Update app.py

app.py

@@ -1,21 +1,22 @@
-# --- START OF FIXED FILE app.py ---
-
 import gradio as gr
 import pandas as pd
 import plotly.express as px
 import time
-import json
 from datasets import load_dataset
+# --- FIX 1: Import the new, stable RangeSlider component ---
+from gradio_rangeslider import RangeSlider
 
 # --- Constants ---
 PARAM_CHOICES = ['< 1B', '1B', '5B', '12B', '32B', '64B', '128B', '256B', '> 500B']
-PARAM_CHOICES_DEFAULT_INDICES_JSON = json.dumps([0, len(PARAM_CHOICES) - 1])
+# The new component uses a tuple for its default value
+PARAM_CHOICES_DEFAULT_INDICES = (0, len(PARAM_CHOICES) - 1)
 
 TOP_K_CHOICES = list(range(5, 51, 5))
 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' ]
 
+
 def load_models_data():
     overall_start_time = time.time()
     print(f"Attempting to load dataset from Hugging Face Hub: {HF_DATASET_ID}")
@@ -75,226 +76,49 @@ 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:
+with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True) 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"
-            )
+            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)
             
-            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("### Parameters")
-                
-                # Custom HTML for the slider
-                gr.HTML(f"""
-                    <div id="param-slider" style="margin: 20px 10px 60px 10px; height: 20px;"></div>
-                    <style>
-                        #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>
-                """)
-                
-                # 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
-            )
-            
-            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
+            # --- FIX 2: Replace all previous slider attempts with the stable custom component ---
+            param_range_slider = RangeSlider(
+                minimum=0,
+                maximum=len(PARAM_CHOICES) - 1,
+                value=PARAM_CHOICES_DEFAULT_INDICES,
+                step=1,
+                label="Parameters"
             )
+            # This markdown will display the selected range labels
+            param_range_display = gr.Markdown(f"Range: `{PARAM_CHOICES[0]}` to `{PARAM_CHOICES[-1]}`")
+
+            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)
 
         with gr.Column(scale=3):
             plot_output = gr.Plot()
             status_message_md = gr.Markdown("Initializing...")
             data_info_md = gr.Markdown("")
-
-    # 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")
-        )
+    # Event handler to update the text display when the slider changes
+    def update_param_display(value: tuple):
+        min_idx, max_idx = int(value[0]), int(value[1])
+        return f"Range: `{PARAM_CHOICES[min_idx]}` to `{PARAM_CHOICES[max_idx]}`"
     
-    filter_choice_radio.change(
-        fn=_toggle_filters_visibility, 
-        inputs=filter_choice_radio, 
-        outputs=[tag_filter_dropdown, pipeline_filter_dropdown]
-    )
+    param_range_slider.change(update_param_display, param_range_slider, param_range_display)
+
+    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 ui_load_data_controller(progress=gr.Progress()):
         progress(0, desc=f"Loading dataset '{HF_DATASET_ID}'...")
@@ -320,7 +144,7 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True, head=custom_he
         return current_df, load_success_flag, data_info_text, status_msg_ui
 
     def ui_generate_plot_controller(metric_choice, filter_type, tag_choice, pipeline_choice, 
-                                   param_range_json, k_orgs, skip_orgs_input, df_current_models, progress=gr.Progress()):
+                                   param_range_indices, k_orgs, skip_orgs_input, df_current_models, progress=gr.Progress()):
         if df_current_models is None or df_current_models.empty:
             return create_treemap(pd.DataFrame(), metric_choice, "Error: Model Data Not Loaded"), "Model data is not loaded."
         
@@ -329,11 +153,6 @@ 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()]
         
-        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]
@@ -349,35 +168,25 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True, head=custom_he
             plot_stats_md = "No data matches the selected filters. Please try different options."
         else:
             total_items_in_plot = len(treemap_df['id'].unique())
+            # --- FIX 3: Corrected the NameError from the traceback ---
             total_value_in_plot = treemap_df[metric_choice].sum()
             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
 
-    # Load data on startup and initialize slider
+    # A standard load event, no JS needed anymore.
     demo.load(
         fn=ui_load_data_controller, 
         inputs=[], 
         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_hidden, top_k_dropdown, skip_orgs_textbox, models_data_state],
+                param_range_slider, top_k_dropdown, skip_orgs_textbox, models_data_state],
         outputs=[plot_output, status_message_md]
     )
 
 if __name__ == "__main__":
     print(f"Application starting...")
-    demo.queue().launch()
-
-# --- END OF FIXED FILE
+    demo.queue().launch()