Update app.py

app.py

@@ -1,4 +1,4 @@
-# --- START OF FINAL POLISHED FILE app.py ---
+# --- START OF FINAL, CORRECTED FILE app.py ---
 
 import gradio as gr
 import pandas as pd
@@ -17,48 +17,49 @@ TAG_FILTER_CHOICES = [ "Audio & Speech", "Time series", "Robotics", "Music", "Vi
 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 = [<1B>, <1B>, <5B>, <12B>, <32B>, <64B>, <128B>, <256B>, <500B>];
+function createCustomSlider() {{
+    const paramChoices = {js_param_choices}; // This will be replaced by Python
     const slider = document.getElementById('noui-slider-container');
-    if (slider.noUiSlider) {
+    if (slider.noUiSlider) {{
         slider.noUiSlider.destroy();
-    }
-    noUiSlider.create(slider, {
+    }}
+    noUiSlider.create(slider, {{
         start: [0, paramChoices.length - 1],
         connect: true,
         step: 1,
-        range: { 'min': 0, 'max': paramChoices.length - 1 },
-        pips: {
+        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]; } }
-        }
-    });
+            format: {{ to: function(value) {{ return paramChoices[value]; }} }}
+        }}
+    }});
 
     const paramRangeStateInput = document.querySelector('#param-range-state-js textarea');
-    slider.noUiSlider.on('update', function (values) {
+    slider.noUiSlider.on('update', function (values) {{
         const intValues = values.map(v => parseInt(v, 10));
         const newValue = JSON.stringify(intValues);
-        if (paramRangeStateInput.value !== newValue) {
+        if (paramRangeStateInput.value !== newValue) {{
             paramRangeStateInput.value = newValue;
-            const event = new Event('input', { bubbles: true });
+            const event = new Event('input', {{ bubbles: true }});
             paramRangeStateInput.dispatchEvent(event);
-        }
-    });
+        }}
+    }});
     
-    function highlightPips(values) {
+    function highlightPips(values) {{
         const intValues = values.map(v => parseInt(v, 10));
-        document.querySelectorAll('.noUi-value').forEach((pip, index) => {
+        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():
@@ -103,7 +104,7 @@ def make_treemap_data(df, count_by, top_k=25, tag_filter=None, pipeline_filter=N
         filtered_df = filtered_df[~filtered_df["organization"].isin(skip_orgs)]
     if filtered_df.empty: return pd.DataFrame()
     if count_by not in filtered_df.columns: filtered_df[count_by] = 0.0
-    filtered_df[count_by] = pd.to_numeric(filtered_df[count_by], errors="coerce").fillna(0.0)
+    filtered_df[count_by] = pd.to_numeric(filtered_df[count_by], errors='coerce').fillna(0.0)
     org_totals = filtered_df.groupby("organization")[count_by].sum().nlargest(top_k, keep='first')
     top_orgs_list = org_totals.index.tolist()
     treemap_data = filtered_df[filtered_df["organization"].isin(top_orgs_list)][["id", "organization", count_by]].copy()
@@ -125,12 +126,9 @@ custom_head = """
 <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.7.1/nouislider.min.js"></script>
 """
 
-# --- MODIFIED: Added emoji to the browser tab title ---
 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)
-
-    # --- MODIFIED: Removed the main title from the page body for a cleaner look ---
     
     with gr.Row():
         with gr.Column(scale=1):
@@ -221,8 +219,15 @@ 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
 
-    demo.load(fn=ui_load_data_controller, inputs=[], outputs=[models_data_state, loading_complete_state, data_info_md, status_message_md]) \
-       .then(fn=None, _js=custom_slider_js.replace("<", "'<").replace(">", "'"))
+    # --- 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))
+    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
+    )
 
     generate_plot_button.click(
         fn=ui_generate_plot_controller,
@@ -235,4 +240,4 @@ if __name__ == "__main__":
     print(f"Application starting...")
     demo.queue().launch()
 
-# --- END OF FINAL POLISHED FILE app.py ---
+# --- END OF FINAL, CORRECTED FILE app.py ---