Update app.py

app.py

@@ -131,10 +131,12 @@ for category, models in MODEL_CATEGORIES.items():
     ALL_MODELS.extend(models)
 
 
-# Helper function to get model info display
 def get_model_info(model_name):
     """Extract and format model information for display"""
     parts = model_name.split('/')
+    if len(parts) != 2:
+        return f"**Model:** {model_name}\n**Format:** Unknown"
+    
     org = parts[0]
     model = parts[1]
     
@@ -146,6 +148,20 @@ def get_model_info(model_name):
     return f"**Organization:** {org}\n**Model:** {model}\n**Size:** {size}"
 
 
+def set_model_and_update_info(model_name):
+    """Set the selected model and update the model info display"""
+    # This function is called when a model is selected (either clicked or via API)
+    try:
+        # Get model info
+        model_info = get_model_info(model_name)
+        
+        # Return both the model name and the model info
+        return model_name, model_info
+    except Exception as e:
+        print(f"Error in set_model_and_update_info: {e}")
+        return model_name, f"**Error loading model info**: {str(e)}"
+
+
 def filter_models(search_term):
     """Filter models based on search term across all categories"""
     if not search_term:
@@ -164,18 +180,48 @@ def update_model_display(search_term=""):
     """Update the model selection UI based on search term"""
     filtered_categories = filter_models(search_term)
     
-    # Create HTML for model display
-    html = "<div style='max-height: 400px; overflow-y: auto;'>"
+    # Create HTML for model display with a more direct approach
+    html = """
+    <div style='max-height: 400px; overflow-y: auto;'>
+    <script>
+    // Direct model selection function - more reliable
+    function selectModel(modelName) {
+        // Get the textbox element by its ID
+        const modelInput = document.getElementById('custom-model-input');
+        if (modelInput) {
+            // Set the value
+            modelInput.value = modelName;
+            
+            // Create and dispatch change event
+            const event = new Event('change', { bubbles: true });
+            modelInput.dispatchEvent(event);
+            
+            // Look for the hidden trigger button and click it
+            const triggerBtn = document.querySelector('button[value="Select Model"]');
+            if (triggerBtn) {
+                triggerBtn.click();
+            }
+            
+            console.log('Selected model:', modelName);
+        } else {
+            console.error('Model input element not found');
+        }
+    }
+    </script>
+    """
     
+    # Add models by category
     for category, models in filtered_categories.items():
         html += f"<h3>{category}</h3><div style='display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px;'>"
         
         for model in models:
             model_short = model.split('/')[-1]
+            escaped_model = model.replace("'", "\\'").replace('"', '\\"')
             html += f"""
-            <div class='model-card' onclick='selectAndUpdateModel("{model}")' 
+            <div class='model-card' 
                  style='border: 1px solid #ddd; border-radius: 8px; padding: 12px; cursor: pointer; transition: all 0.2s;
-                        background: linear-gradient(145deg, #f0f0f0, #ffffff); box-shadow: 0 4px 6px rgba(0,0,0,0.1);'>
+                        background: linear-gradient(145deg, #f0f0f0, #ffffff); box-shadow: 0 4px 6px rgba(0,0,0,0.1);'
+                 onclick="selectModel('{escaped_model}')">
                 <div style='font-weight: bold; margin-bottom: 6px; color: #1a73e8;'>{model_short}</div>
                 <div style='font-size: 0.8em; color: #666;'>{model.split('/')[0]}</div>
             </div>
@@ -185,25 +231,7 @@ def update_model_display(search_term=""):
     if not filtered_categories:
         html += "<p>No models found matching your search.</p>"
     
-    html += """</div>
-    <script>
-    function selectAndUpdateModel(model) {
-        // Set the value in the input field
-        const input = document.getElementById('custom-model-input');
-        input.value = model;
-        
-        // Create and dispatch a change event to trigger Gradio's handlers
-        const event = new Event('change', { bubbles: true });
-        input.dispatchEvent(event);
-        
-        // Also trigger the input event for good measure
-        const inputEvent = new Event('input', { bubbles: true });
-        input.dispatchEvent(inputEvent);
-        
-        console.log('Model selected:', model);
-    }
-    </script>"""
-    
+    html += "</div>"
     return html
 
 
@@ -325,7 +353,7 @@ with gr.Blocks(css=custom_css, title=APP_TITLE, theme=gr.themes.Soft()) as demo:
             
             # Model information display
             gr.HTML("<h4>Current Model Info</h4>")
-            model_info_display = gr.Markdown(get_model_info("Qwen/Qwen3-32B"))  # Updated to match default
+            model_info_display = gr.Markdown(get_model_info("Qwen/Qwen3-32B"))
             gr.HTML("</div>")
         
         with gr.Column(scale=3):
@@ -412,6 +440,9 @@ with gr.Blocks(css=custom_css, title=APP_TITLE, theme=gr.themes.Soft()) as demo:
     </div>
     """)
     
+    # Add a hidden button to trigger model selection via JavaScript
+    trigger_model_selection = gr.Button("Select Model", visible=False)
+    
     # Set up event handlers
     msg.submit(
         fn=respond,
@@ -446,9 +477,16 @@ with gr.Blocks(css=custom_css, title=APP_TITLE, theme=gr.themes.Soft()) as demo:
     
     # Update model info when selection changes
     custom_model_box.change(
-        fn=lambda x: get_model_info(x),
+        fn=set_model_and_update_info,
+        inputs=custom_model_box,
+        outputs=[custom_model_box, model_info_display]
+    )
+    
+    # Connect the hidden trigger button to update model info
+    trigger_model_selection.click(
+        fn=set_model_and_update_info,
         inputs=custom_model_box,
-        outputs=model_info_display
+        outputs=[custom_model_box, model_info_display]
     )
 
 if __name__ == "__main__":