Update app.py

app.py

@@ -85,6 +85,15 @@ def respond(
 
 # Model categories for better organization
 MODEL_CATEGORIES = {
+    "Qwen": [
+        "Qwen/Qwen3-235B-A22B",
+        "Qwen/Qwen3-32B",
+        "Qwen/Qwen2.5-72B-Instruct",
+        "Qwen/Qwen2.5-3B-Instruct",
+        "Qwen/Qwen2.5-0.5B-Instruct",
+        "Qwen/QwQ-32B",
+        "Qwen/Qwen2.5-Coder-32B-Instruct",
+    ],
     "Meta LLaMa": [
         "meta-llama/Llama-3.3-70B-Instruct",
         "meta-llama/Llama-3.1-70B-Instruct",
@@ -99,15 +108,6 @@ MODEL_CATEGORIES = {
         "mistralai/Mistral-7B-Instruct-v0.3",
         "mistralai/Mistral-7B-Instruct-v0.2",
     ],
-    "Qwen": [
-        "Qwen/Qwen3-235B-A22B",
-        "Qwen/Qwen3-32B",
-        "Qwen/Qwen2.5-72B-Instruct",
-        "Qwen/Qwen2.5-3B-Instruct",
-        "Qwen/Qwen2.5-0.5B-Instruct",
-        "Qwen/QwQ-32B",
-        "Qwen/Qwen2.5-Coder-32B-Instruct",
-    ],
     "Microsoft Phi": [
         "microsoft/Phi-3.5-mini-instruct",
         "microsoft/Phi-3-mini-128k-instruct",
@@ -173,7 +173,7 @@ def update_model_display(search_term=""):
         for model in models:
             model_short = model.split('/')[-1]
             html += f"""
-            <div class='model-card' onclick='selectModel("{model}")' 
+            <div class='model-card' onclick='selectAndUpdateModel("{model}")' 
                  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);'>
                 <div style='font-weight: bold; margin-bottom: 6px; color: #1a73e8;'>{model_short}</div>
@@ -185,7 +185,25 @@ def update_model_display(search_term=""):
     if not filtered_categories:
         html += "<p>No models found matching your search.</p>"
     
-    html += "</div><script>function selectModel(model) { document.getElementById('custom-model-input').value = model; }</script>"
+    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>"""
+    
     return html
 
 
@@ -283,6 +301,33 @@ with gr.Blocks(css=custom_css, title=APP_TITLE, theme=gr.themes.Soft()) as demo:
     """)
     
     with gr.Row():
+        with gr.Column(scale=2):
+            # Model selection panel - MOVED TO THE LEFT SIDE
+            gr.HTML("<div style='border: 1px solid #e0e0e0; border-radius: 10px; padding: 15px;'>")
+            gr.HTML("<h3 style='margin-top: 0;'>Model Selection</h3>")
+            
+            # Custom model input (this is what the respond function sees)
+            custom_model_box = gr.Textbox(
+                value="Qwen/Qwen3-32B",  # Changed default model to Qwen
+                label="Selected Model",
+                elem_id="custom-model-input"
+            )
+            
+            # Search box
+            model_search_box = gr.Textbox(
+                label="Search Models",
+                placeholder="Type to filter models...",
+                lines=1
+            )
+            
+            # Dynamic model display area
+            model_display = gr.HTML(update_model_display())
+            
+            # 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
+            gr.HTML("</div>")
+        
         with gr.Column(scale=3):
             # Main chat interface
             chatbot = gr.Chatbot(
@@ -358,33 +403,6 @@ with gr.Blocks(css=custom_css, title=APP_TITLE, theme=gr.themes.Soft()) as demo:
                     step=1,
                     label="Seed (-1 for random)"
                 )
-        
-        with gr.Column(scale=2):
-            # Model selection panel
-            gr.HTML("<div style='border: 1px solid #e0e0e0; border-radius: 10px; padding: 15px;'>")
-            gr.HTML("<h3 style='margin-top: 0;'>Model Selection</h3>")
-            
-            # Custom model input (this is what the respond function sees)
-            custom_model_box = gr.Textbox(
-                value="meta-llama/Llama-3.3-70B-Instruct",
-                label="Selected Model",
-                elem_id="custom-model-input"
-            )
-            
-            # Search box
-            model_search_box = gr.Textbox(
-                label="Search Models",
-                placeholder="Type to filter models...",
-                lines=1
-            )
-            
-            # Dynamic model display area
-            model_display = gr.HTML(update_model_display())
-            
-            # Model information display
-            gr.HTML("<h4>Current Model Info</h4>")
-            model_info_display = gr.Markdown(get_model_info("meta-llama/Llama-3.3-70B-Instruct"))
-            gr.HTML("</div>")
     
     # Footer
     gr.HTML("""