Update app.py

app.py

@@ -4,67 +4,20 @@ import gradio as gr
 import pandas as pd
 import plotly.express as px
 import time
-import json
 from datasets import load_dataset
+# Using the stable, community-built RangeSlider component
+from gradio_rangeslider import RangeSlider
 
 # --- Constants ---
 PARAM_CHOICES = ['< 1B', '1B', '5B', '12B', '32B', '64B', '128B', '256B', '> 500B']
-# This hidden textbox will store the slider's state as a JSON string
-PARAM_STATE_DEFAULT_JSON = json.dumps([0, len(PARAM_CHOICES) - 1])
+# The RangeSlider 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' ]
 
-# --- Custom HTML, CSS, and JavaScript for the Slider ---
-custom_slider_js = """
-function createCustomSlider() {{
-    const paramChoices = {js_param_choices};
-    const slider = document.getElementById('noui-slider-container');
-    if (slider.noUiSlider) {{ return; }} // Don't re-create if it already exists
-
-    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');
-    const resetBtn = document.getElementById('reset-params-btn');
-    const initialRange = [0, paramChoices.length - 1];
-
-    function update(values) {{
-        const intValues = values.map(v => parseInt(v, 10));
-        const isDefault = intValues[0] === initialRange[0] && intValues[1] === initialRange[1];
-        
-        // Show/hide reset button
-        resetBtn.style.display = isDefault ? 'none' : 'inline-block';
-
-        // Update hidden state for Python
-        const newValue = JSON.stringify(intValues);
-        if (paramRangeStateInput.value !== newValue) {{
-            paramRangeStateInput.value = newValue;
-            const event = new Event('input', {{ bubbles: true }});
-            paramRangeStateInput.dispatchEvent(event);
-        }}
-    }}
-
-    slider.noUiSlider.on('update', update);
-    
-    // The reset button in the HTML calls this JS function directly
-    window.resetSlider = function() {{
-        slider.noUiSlider.set(initialRange);
-    }}
-}}
-"""
 
 def load_models_data():
     overall_start_time = time.time()
@@ -80,7 +33,9 @@ def load_models_data():
         print(msg)
         return df, True, msg
     except Exception as e:
-        return pd.DataFrame(), False, f"Failed to load dataset. Error: {e}"
+        err_msg = f"Failed to load dataset. Error: {e}"
+        print(err_msg)
+        return pd.DataFrame(), False, err_msg
 
 def get_param_range_values(param_range_labels):
     min_label, max_label = param_range_labels
@@ -123,12 +78,7 @@ 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 = """
-<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>
-"""
-
-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)
     
@@ -143,25 +93,20 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True, head=custom_he
             pipeline_filter_dropdown = gr.Dropdown(label="Select Pipeline Tag", choices=PIPELINE_TAGS, value=None, visible=False)
             
             with gr.Group():
-                gr.HTML("""
-                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: -1rem;">
-                        <label class="gradio-label">Parameters</label>
-                        <button id="reset-params-btn" onclick="window.resetSlider()" class="gr-button gr-button-sm gr-button-secondary" style="display: none;">🔄 Reset</button>
-                    </div>
-                """)
-                gr.HTML("""
-                    <div id="noui-slider-container" style="margin: 2rem 1rem;"></div>
-                    <style>
-                        .noUi-value { font-size: 12px; color: #777; }
-                        .noUi-pips-horizontal { padding: 10px 0; height: 50px; }
-                        .noUi-connect { background: #000; }
-                        .noUi-handle { border-radius: 50%; width: 22px; height: 22px; right: -11px; top: -8px; box-shadow: none; border: 2px solid #000; background: #FFF; cursor: pointer; }
-                        .noUi-handle:focus { outline: none; }
-                        .noUi-handle::after, .noUi-handle::before { display: none; }
-                    </style>
-                """)
-                param_range_state_js = gr.Textbox(value=PARAM_STATE_DEFAULT_JSON, visible=False, elem_id="param-range-state-js")
-            
+                with gr.Row():
+                    gr.Markdown("<div style='font-weight: 500; padding-top: 10px;'>Parameters</div>")
+                    reset_params_button = gr.Button("🔄 Reset", visible=False, size="sm", min_width=80)
+                
+                param_range_slider = RangeSlider(
+                    minimum=0,
+                    maximum=len(PARAM_CHOICES) - 1,
+                    value=PARAM_CHOICES_DEFAULT_INDICES,
+                    step=1,
+                    label=None,
+                    show_label=False,
+                )
+                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)
@@ -170,6 +115,23 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True, head=custom_he
             plot_output = gr.Plot()
             status_message_md = gr.Markdown("Initializing...")
             data_info_md = gr.Markdown("")
+    
+    def update_param_ui(value: tuple):
+        min_idx, max_idx = int(value[0]), int(value[1])
+        is_default = (min_idx == 0 and max_idx == len(PARAM_CHOICES) - 1)
+        
+        display_text = f"Range: `{PARAM_CHOICES[min_idx]}` to `{PARAM_CHOICES[max_idx]}`"
+        button_visibility = gr.update(visible=not is_default)
+        
+        return display_text, button_visibility
+    
+    param_range_slider.change(update_param_ui, param_range_slider, [param_range_display, reset_params_button])
+
+    def reset_params():
+        default_text = f"Range: `{PARAM_CHOICES[0]}` to `{PARAM_CHOICES[-1]}`"
+        return PARAM_CHOICES_DEFAULT_INDICES, default_text, gr.update(visible=False)
+
+    reset_params_button.click(reset_params, outputs=[param_range_slider, param_range_display, reset_params_button])
 
     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)
@@ -194,11 +156,14 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True, head=custom_he
                 data_info_text = f"### Data Load Failed\n- {status_msg_from_load}"
                 status_msg_ui = status_msg_from_load
         except Exception as e:
-            status_msg_ui, data_info_text, load_success_flag = f"An unexpected error occurred: {str(e)}", f"### Critical Error\n- {status_msg_ui}", False
+            status_msg_ui = f"An unexpected error occurred: {str(e)}"
+            data_info_text = f"### Critical Error\n- {status_msg_ui}"
+            load_success_flag = False
+            print(f"Critical error in ui_load_data_controller: {e}")
         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."
         
@@ -207,7 +172,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()]
         
-        param_range_indices = json.loads(param_range_json)
         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]
@@ -227,23 +191,21 @@ 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_js = custom_slider_js.format(js_param_choices=json.dumps(PARAM_CHOICES))
     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} }}"
+        outputs=[models_data_state, loading_complete_state, data_info_md, status_message_md]
     )
 
     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_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(ssr_mode=False)
+    demo.queue().launch()
 
 # --- END OF FINAL, POLISHED FILE app.py ---