Update app.py

app.py

@@ -1,4 +1,4 @@
-# --- START OF FINAL, CORRECTED FILE app.py ---
+# --- START OF FIXED FILE app.py ---
 
 import gradio as gr
 import pandas as pd
@@ -16,52 +16,6 @@ HF_DATASET_ID = "evijit/orgstats_daily_data"
 TAG_FILTER_CHOICES = [ "Audio & Speech", "Time series", "Robotics", "Music", "Video", "Images", "Text", "Biomedical", "Sciences" ]
 PIPELINE_TAGS = [ 'text-generation', 'text-to-image', 'text-classification', 'text2text-generation', 'audio-to-audio', 'feature-extraction', 'image-classification', 'translation', 'reinforcement-learning', 'fill-mask', 'text-to-speech', 'automatic-speech-recognition', 'image-text-to-text', 'token-classification', 'sentence-similarity', 'question-answering', 'image-feature-extraction', 'summarization', 'zero-shot-image-classification', 'object-detection', 'image-segmentation', 'image-to-image', 'image-to-text', 'audio-classification', 'visual-question-answering', 'text-to-video', 'zero-shot-classification', 'depth-estimation', 'text-ranking', 'image-to-video', 'multiple-choice', 'unconditional-image-generation', 'video-classification', 'text-to-audio', 'time-series-forecasting', 'any-to-any', 'video-text-to-text', 'table-question-answering' ]
 
-# --- Custom HTML, CSS, and JavaScript for the Slider ---
-# Using a placeholder for the choices to be safely injected from Python
-custom_slider_js = """
-function createCustomSlider() {{
-    const paramChoices = {js_param_choices}; // This will be replaced by Python
-    const slider = document.getElementById('noui-slider-container');
-    if (slider.noUiSlider) {{
-        slider.noUiSlider.destroy();
-    }}
-    noUiSlider.create(slider, {{
-        start: [0, paramChoices.length - 1],
-        connect: true,
-        step: 1,
-        range: {{ 'min': 0, 'max': paramChoices.length - 1 }},
-        pips: {{
-            mode: 'values',
-            values: Array.from(Array(paramChoices.length).keys()),
-            density: 100 / (paramChoices.length - 1),
-            format: {{ to: function(value) {{ return paramChoices[value]; }} }}
-        }}
-    }});
-
-    const paramRangeStateInput = document.querySelector('#param-range-state-js textarea');
-    slider.noUiSlider.on('update', function (values) {{
-        const intValues = values.map(v => parseInt(v, 10));
-        const newValue = JSON.stringify(intValues);
-        if (paramRangeStateInput.value !== newValue) {{
-            paramRangeStateInput.value = newValue;
-            const event = new Event('input', {{ bubbles: true }});
-            paramRangeStateInput.dispatchEvent(event);
-        }}
-    }});
-    
-    function highlightPips(values) {{
-        const intValues = values.map(v => parseInt(v, 10));
-        document.querySelectorAll('.noUi-value').forEach((pip, index) => {{
-            const pipIsSelected = index >= intValues[0] && index <= intValues[1];
-            pip.style.fontWeight = pipIsSelected ? 'bold' : 'normal';
-            pip.style.color = pipIsSelected ? '#000' : '#777';
-        }});
-    }}
-    slider.noUiSlider.on('update', highlightPips);
-    highlightPips([0, paramChoices.length - 1]);
-}}
-"""
-
 def load_models_data():
     overall_start_time = time.time()
     print(f"Attempting to load dataset from Hugging Face Hub: {HF_DATASET_ID}")
@@ -121,50 +75,226 @@ def create_treemap(treemap_data, count_by, title=None):
     fig.update_traces(textinfo="label+value+percent root", hovertemplate="<b>%{label}</b><br>%{value:,} " + count_by + "<br>%{percentRoot:.2%} of total<extra></extra>")
     return fig
 
+# Custom head with noUiSlider CSS and JS
 custom_head = """
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
 """
 
+# JavaScript for creating the slider - this will be injected properly
+def create_slider_js():
+    return f"""
+function initializeSlider() {{
+    const paramChoices = {json.dumps(PARAM_CHOICES)};
+    const sliderContainer = document.getElementById('param-slider');
+    const hiddenInput = document.querySelector('#param-range-hidden input');
+    
+    if (!sliderContainer || !hiddenInput) {{
+        console.log('Slider elements not found, retrying...');
+        setTimeout(initializeSlider, 100);
+        return;
+    }}
+    
+    // Clear any existing slider
+    if (sliderContainer.noUiSlider) {{
+        sliderContainer.noUiSlider.destroy();
+    }}
+    
+    // Create the slider
+    noUiSlider.create(sliderContainer, {{
+        start: [0, paramChoices.length - 1],
+        connect: true,
+        step: 1,
+        range: {{
+            'min': 0,
+            'max': paramChoices.length - 1
+        }},
+        pips: {{
+            mode: 'values',
+            values: Array.from({{length: paramChoices.length}}, (_, i) => i),
+            density: 100 / (paramChoices.length - 1),
+            format: {{
+                to: function(value) {{
+                    return paramChoices[Math.round(value)];
+                }}
+            }}
+        }}
+    }});
+    
+    // Update hidden input when slider changes
+    sliderContainer.noUiSlider.on('update', function(values) {{
+        const indices = values.map(v => Math.round(parseFloat(v)));
+        hiddenInput.value = JSON.stringify(indices);
+        hiddenInput.dispatchEvent(new Event('input', {{ bubbles: true }}));
+        
+        // Highlight selected range
+        document.querySelectorAll('.noUi-value').forEach((pip, index) => {{
+            const isSelected = index >= indices[0] && index <= indices[1];
+            pip.style.fontWeight = isSelected ? 'bold' : 'normal';
+            pip.style.color = isSelected ? '#2563eb' : '#6b7280';
+        }});
+    }});
+    
+    // Initial highlight
+    document.querySelectorAll('.noUi-value').forEach((pip, index) => {{
+        const isSelected = index >= 0 && index <= paramChoices.length - 1;
+        pip.style.fontWeight = isSelected ? 'bold' : 'normal';
+        pip.style.color = isSelected ? '#2563eb' : '#6b7280';
+    }});
+    
+    console.log('Slider initialized successfully');
+}}
+
+// Initialize when DOM is ready
+if (document.readyState === 'loading') {{
+    document.addEventListener('DOMContentLoaded', initializeSlider);
+}} else {{
+    initializeSlider();
+}}
+"""
+
 with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True, head=custom_head) as demo:
     models_data_state = gr.State(pd.DataFrame())
     loading_complete_state = gr.State(False)
     
     with gr.Row():
         with gr.Column(scale=1):
-            count_by_dropdown = gr.Dropdown(label="Metric", choices=[("Downloads (last 30 days)", "downloads"), ("Downloads (All Time)", "downloadsAllTime"), ("Likes", "likes")], value="downloads")
-            filter_choice_radio = gr.Radio(label="Filter Type", choices=["None", "Tag Filter", "Pipeline Filter"], value="None")
-            tag_filter_dropdown = gr.Dropdown(label="Select Tag", choices=TAG_FILTER_CHOICES, value=None, visible=False)
-            pipeline_filter_dropdown = gr.Dropdown(label="Select Pipeline Tag", choices=PIPELINE_TAGS, value=None, visible=False)
+            count_by_dropdown = gr.Dropdown(
+                label="Metric", 
+                choices=[("Downloads (last 30 days)", "downloads"), ("Downloads (All Time)", "downloadsAllTime"), ("Likes", "likes")], 
+                value="downloads"
+            )
             
+            filter_choice_radio = gr.Radio(
+                label="Filter Type", 
+                choices=["None", "Tag Filter", "Pipeline Filter"], 
+                value="None"
+            )
+            
+            tag_filter_dropdown = gr.Dropdown(
+                label="Select Tag", 
+                choices=TAG_FILTER_CHOICES, 
+                value=None, 
+                visible=False
+            )
+            
+            pipeline_filter_dropdown = gr.Dropdown(
+                label="Select Pipeline Tag", 
+                choices=PIPELINE_TAGS, 
+                value=None, 
+                visible=False
+            )
+            
+            # Parameter range slider section
             with gr.Group():
-                gr.Markdown("<div style='font-weight: 500;'>Parameters</div>")
-                gr.HTML("""
-                    <div id="noui-slider-container" style="margin: 2rem 1rem;"></div>
+                gr.Markdown("### Parameters")
+                
+                # Custom HTML for the slider
+                gr.HTML(f"""
+                    <div id="param-slider" style="margin: 20px 10px 60px 10px; height: 20px;"></div>
                     <style>
-                        .noUi-value { font-size: 12px; }
-                        .noUi-pips-horizontal { padding: 10px 0; height: 50px; }
-                        .noUi-connect { background: #333; }
-                        .noUi-handle { border-radius: 50%; width: 20px; height: 20px; right: -10px; top: -7px; box-shadow: none; border: 2px solid #333; background: #FFF; cursor: pointer; }
-                        .noUi-handle:focus { outline: none; }
+                        #param-slider {{
+                            height: 20px;
+                        }}
+                        .noUi-target {{
+                            background: #f1f5f9;
+                            border-radius: 10px;
+                            border: 1px solid #e2e8f0;
+                            box-shadow: none;
+                        }}
+                        .noUi-connect {{
+                            background: #3b82f6;
+                            border-radius: 10px;
+                        }}
+                        .noUi-handle {{
+                            width: 20px;
+                            height: 20px;
+                            right: -10px;
+                            top: -5px;
+                            background: white;
+                            border: 2px solid #3b82f6;
+                            border-radius: 50%;
+                            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                            cursor: pointer;
+                        }}
+                        .noUi-handle:before,
+                        .noUi-handle:after {{
+                            display: none;
+                        }}
+                        .noUi-handle:focus {{
+                            outline: none;
+                        }}
+                        .noUi-pips {{
+                            color: #6b7280;
+                            font-size: 12px;
+                        }}
+                        .noUi-pips-horizontal {{
+                            padding: 10px 0;
+                            height: 60px;
+                        }}
+                        .noUi-value {{
+                            font-size: 11px;
+                            padding-top: 5px;
+                            cursor: pointer;
+                        }}
+                        .noUi-marker-horizontal.noUi-marker {{
+                            background: #e2e8f0;
+                            height: 5px;
+                            width: 1px;
+                        }}
                     </style>
                 """)
-                param_range_state_js = gr.Textbox(value=PARAM_CHOICES_DEFAULT_INDICES_JSON, visible=False, elem_id="param-range-state-js")
+                
+                # Hidden input to store slider values
+                param_range_hidden = gr.Textbox(
+                    value=PARAM_CHOICES_DEFAULT_INDICES_JSON, 
+                    visible=False, 
+                    elem_id="param-range-hidden"
+                )
+            
+            top_k_dropdown = gr.Dropdown(
+                label="Number of Top Organizations", 
+                choices=TOP_K_CHOICES, 
+                value=25
+            )
             
-            top_k_dropdown = gr.Dropdown(label="Number of Top Organizations", choices=TOP_K_CHOICES, value=25)
-            skip_orgs_textbox = gr.Textbox(label="Organizations to Skip (comma-separated)", value="TheBloke,MaziyarPanahi,unsloth,modularai,Gensyn,bartowski")
-            generate_plot_button = gr.Button(value="Generate Plot", variant="primary", interactive=False)
+            skip_orgs_textbox = gr.Textbox(
+                label="Organizations to Skip (comma-separated)", 
+                value="TheBloke,MaziyarPanahi,unsloth,modularai,Gensyn,bartowski"
+            )
+            
+            generate_plot_button = gr.Button(
+                value="Generate Plot", 
+                variant="primary", 
+                interactive=False
+            )
 
         with gr.Column(scale=3):
             plot_output = gr.Plot()
             status_message_md = gr.Markdown("Initializing...")
             data_info_md = gr.Markdown("")
 
-    def _update_button_interactivity(is_loaded_flag): return gr.update(interactive=is_loaded_flag)
-    loading_complete_state.change(fn=_update_button_interactivity, inputs=loading_complete_state, outputs=generate_plot_button)
+    # Event handlers
+    def _update_button_interactivity(is_loaded_flag): 
+        return gr.update(interactive=is_loaded_flag)
+    
+    loading_complete_state.change(
+        fn=_update_button_interactivity, 
+        inputs=loading_complete_state, 
+        outputs=generate_plot_button
+    )
 
-    def _toggle_filters_visibility(choice): return gr.update(visible=choice == "Tag Filter"), gr.update(visible=choice == "Pipeline Filter")
-    filter_choice_radio.change(fn=_toggle_filters_visibility, inputs=filter_choice_radio, outputs=[tag_filter_dropdown, pipeline_filter_dropdown])
+    def _toggle_filters_visibility(choice): 
+        return (
+            gr.update(visible=choice == "Tag Filter"), 
+            gr.update(visible=choice == "Pipeline Filter")
+        )
+    
+    filter_choice_radio.change(
+        fn=_toggle_filters_visibility, 
+        inputs=filter_choice_radio, 
+        outputs=[tag_filter_dropdown, pipeline_filter_dropdown]
+    )
 
     def ui_load_data_controller(progress=gr.Progress()):
         progress(0, desc=f"Loading dataset '{HF_DATASET_ID}'...")
@@ -199,7 +329,11 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True, head=custom_he
         pipeline_to_use = pipeline_choice if filter_type == "Pipeline Filter" else None
         orgs_to_skip = [org.strip() for org in skip_orgs_input.split(',') if org.strip()]
         
-        param_range_indices = json.loads(param_range_json)
+        try:
+            param_range_indices = json.loads(param_range_json)
+        except:
+            param_range_indices = [0, len(PARAM_CHOICES) - 1]
+            
         min_label = PARAM_CHOICES[int(param_range_indices[0])]
         max_label = PARAM_CHOICES[int(param_range_indices[1])]
         param_labels_for_filtering = [min_label, max_label]
@@ -219,20 +353,26 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True, head=custom_he
             plot_stats_md = f"## Plot Statistics\n- **Models shown**: {total_items_in_plot:,}\n- **Total {metric_choice}**: {int(total_value_in_plot):,}"
         return plotly_fig, plot_stats_md
 
-    # --- FINAL FIX: Use the `js` parameter in demo.load() instead of the deprecated `_js` in .then() ---
-    # We also safely format the Python list into a JS array using json.dumps
-    final_js = custom_slider_js.format(js_param_choices=json.dumps(PARAM_CHOICES))
+    # Load data on startup and initialize slider
     demo.load(
         fn=ui_load_data_controller, 
         inputs=[], 
-        outputs=[models_data_state, loading_complete_state, data_info_md, status_message_md],
-        js=f"() => {{ {final_js} }}" # Wrap the JS in a function to be executed on load
+        outputs=[models_data_state, loading_complete_state, data_info_md, status_message_md]
+    )
+    
+    # Initialize slider after page loads
+    demo.load(
+        fn=lambda: None,
+        inputs=[],
+        outputs=[],
+        js=create_slider_js()
     )
 
+    # Generate plot button click handler
     generate_plot_button.click(
         fn=ui_generate_plot_controller,
         inputs=[count_by_dropdown, filter_choice_radio, tag_filter_dropdown, pipeline_filter_dropdown,
-                param_range_state_js, top_k_dropdown, skip_orgs_textbox, models_data_state],
+                param_range_hidden, top_k_dropdown, skip_orgs_textbox, models_data_state],
         outputs=[plot_output, status_message_md]
     )
 
@@ -240,4 +380,4 @@ if __name__ == "__main__":
     print(f"Application starting...")
     demo.queue().launch()
 
-# --- END OF FINAL, CORRECTED FILE app.py ---
+# --- END OF FIXED FILE