Update app.py

app.py

@@ -379,6 +379,13 @@ def get_model_info(model_choice):
             return model_id_value, ctx_size
     return None, 0
 
+def get_models_for_category(category):
+    """Get model list for a specific category"""
+    for cat in MODELS:
+        if cat["category"] == category:
+            return [model[0] for model in cat["models"]]
+    return []
+
 def call_openrouter_api(payload):
     """Make a call to OpenRouter API with error handling"""
     try:
@@ -711,8 +718,10 @@ def create_app():
                             value=ALL_MODELS[0][0],
                             label="Model",
                             elem_id="model-choice",
-                            allow_custom_value=True  # allow custom values
+                            elem_classes="model-choice",
+                            allow_custom_value=True
                         )
+
                         context_display = gr.Textbox(
                             value=update_context_display(ALL_MODELS[0][0]),
                             label="Context",
@@ -730,10 +739,15 @@ def create_app():
                         
                         # Create a container for the category models dropdown
                         with gr.Column(visible=True, elem_id="category-models-container") as category_models_container:
+                            # Create a hidden text component to store model choices as JSON
+                            category_model_choices = gr.Text(visible=False)
+
+                            # Create the dropdown with no initial choices
                             category_models = gr.Dropdown(
-                                [model[0] for model in MODELS[0]["models"]],
+                                [],
                                 label="Models in Category",
-                                value=MODELS[0]["models"][0][0],
+                                value=None,
+                                elem_classes="category-models",
                                 allow_custom_value=True
                             )
                 
@@ -929,9 +943,9 @@ def create_app():
         
         # Update model list when category changes
         model_categories.change(
-            fn=update_category_models_ui,
+            fn=lambda cat: json.dumps(get_models_for_category(cat)),
             inputs=model_categories,
-            outputs=category_models_container
+            outputs=category_model_choices
         )
         
         # Update main model choice when category model is selected
@@ -940,7 +954,55 @@ def create_app():
             inputs=category_models,
             outputs=model_choice
         )
-        
+
+        category_model_choices.change(
+            fn=None,
+            inputs=None,
+            outputs=None,
+            _js="""
+            function(choices_json) {
+                // Parse JSON string to array
+                const choices = JSON.parse(choices_json);
+                
+                // Find the dropdown element
+                const dropdown = document.querySelector('.category-models select');
+                
+                // Clear existing options
+                dropdown.innerHTML = '';
+                
+                // Add new options
+                choices.forEach(model => {
+                    const option = document.createElement('option');
+                    option.value = model;
+                    option.textContent = model;
+                    dropdown.appendChild(option);
+                });
+                
+                // Set the first option as selected if available
+                if (choices.length > 0) {
+                    dropdown.value = choices[0];
+                    
+                    // Update the main model dropdown
+                    const mainDropdown = document.querySelector('.model-choice select');
+                    mainDropdown.value = choices[0];
+                    
+                    // Trigger change events
+                    dropdown.dispatchEvent(new Event('change', { bubbles: true }));
+                    mainDropdown.dispatchEvent(new Event('change', { bubbles: true }));
+                }
+            }
+            """
+        )
+
+        # Function to initialize the category models dropdown
+        def init_category_models():
+            initial_category = MODELS[0]["category"]
+            initial_models = get_models_for_category(initial_category)
+            return json.dumps(initial_models)
+
+        # Set initial choices for category models dropdown
+        category_model_choices.value = init_category_models()
+
         # Process uploaded images
         image_upload_btn.upload(
             fn=lambda files: files,
@@ -1007,6 +1069,9 @@ def create_app():
         
         return demo
 
+
+
+
 # Launch the app
 if __name__ == "__main__":
     # Check API key before starting