Update app.py

app.py

@@ -1,21 +1,70 @@
-# --- START OF FINAL POLISHED FILE app.py ---
+# --- START OF FINAL, POLISHED 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
-from gradio_rangeslider import RangeSlider
 
 # --- Constants ---
 PARAM_CHOICES = ['< 1B', '1B', '5B', '12B', '32B', '64B', '128B', '256B', '> 500B']
-PARAM_CHOICES_DEFAULT_INDICES = (0, len(PARAM_CHOICES) - 1)
+# This hidden textbox will store the slider's state as a JSON string
+PARAM_STATE_DEFAULT_JSON = json.dumps([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()
@@ -31,9 +80,7 @@ def load_models_data():
         print(msg)
         return df, True, msg
     except Exception as e:
-        err_msg = f"Failed to load dataset. Error: {e}"
-        print(err_msg)
-        return pd.DataFrame(), False, err_msg
+        return pd.DataFrame(), False, f"Failed to load dataset. Error: {e}"
 
 def get_param_range_values(param_range_labels):
     min_label, max_label = param_range_labels
@@ -76,11 +123,15 @@ 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
 
-with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True) as demo:
+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:
     models_data_state = gr.State(pd.DataFrame())
     loading_complete_state = gr.State(False)
     
-    # --- FIX 1: The application title is restored here ---
     with gr.Row():
         gr.Markdown("# 🤗 ModelVerse Explorer")
 
@@ -91,16 +142,26 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True) as demo:
             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)
             
-            param_range_slider = RangeSlider(
-                minimum=0,
-                maximum=len(PARAM_CHOICES) - 1,
-                value=PARAM_CHOICES_DEFAULT_INDICES,
-                step=1,
-                label="Parameters"
-            )
-            # This markdown provides the meaningful labels for the slider's numeric range
-            param_range_display = gr.Markdown(f"Range: `{PARAM_CHOICES[0]}` to `{PARAM_CHOICES[-1]}`")
-
+            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")
+            
             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)
@@ -109,12 +170,6 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True) as demo:
             plot_output = gr.Plot()
             status_message_md = gr.Markdown("Initializing...")
             data_info_md = gr.Markdown("")
-    
-    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]}`"
-    
-    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)
@@ -139,14 +194,11 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True) as demo:
                 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 = 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}")
+            status_msg_ui, data_info_text, load_success_flag = f"An unexpected error occurred: {str(e)}", f"### Critical Error\n- {status_msg_ui}", False
         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_indices, k_orgs, skip_orgs_input, df_current_models, progress=gr.Progress()):
+                                   param_range_json, 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."
         
@@ -155,6 +207,7 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True) as demo:
         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]
@@ -174,16 +227,18 @@ with gr.Blocks(title="🤗 ModelVerse Explorer", fill_width=True) as demo:
             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]
+        outputs=[models_data_state, loading_complete_state, data_info_md, status_message_md],
+        js=f"() => {{ {final_js} }}"
     )
 
     generate_plot_button.click(
         fn=ui_generate_plot_controller,
         inputs=[count_by_dropdown, filter_choice_radio, tag_filter_dropdown, pipeline_filter_dropdown,
-                param_range_slider, top_k_dropdown, skip_orgs_textbox, models_data_state],
+                param_range_state_js, top_k_dropdown, skip_orgs_textbox, models_data_state],
         outputs=[plot_output, status_message_md]
     )
 
@@ -191,4 +246,4 @@ if __name__ == "__main__":
     print(f"Application starting...")
     demo.queue().launch()
 
-# --- END OF FINAL POLISHED FILE app.py ---
+# --- END OF FINAL, POLISHED FILE app.py ---