Update app.py

app.py

@@ -4,22 +4,19 @@ from huggingface_hub import InferenceClient
 # -- 1) DEFINE YOUR MODELS HERE --
 models = [
     {
-        "name": "Tiny Model",
-        "description": "A small chat model.",
+        "name": "Tiny Model 500M Chat v2",
+        "description": "Original model with a context length of 1024 and single turn capabilities",
         "id": "amusktweewt/tiny-model-500M-chat-v2",
         "enabled": True
     },
     {
-        "name": "Another Model",
-        "description": "A bigger chat model (disabled).",
+        "name": "New Model",
+        "description": "(Disabled)",
         "id": "another-model",
         "enabled": False
     }
 ]
 
-def get_selected_model_id(evt: gr.SelectData):
-    """Helper to extract the model ID from dropdown selection"""
-    return models[evt.index]["id"] if models[evt.index]["enabled"] else models[0]["id"]
 
 def respond(message, history: list[tuple[str, str]], model_id, system_message, max_tokens, temperature, top_p):
     """
@@ -48,17 +45,21 @@ def respond(message, history: list[tuple[str, str]], model_id, system_message, m
     response_text = ""
     # Stream the response token-by-token.
     for resp in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
+            messages,
+            max_tokens=max_tokens,
+            stream=True,
+            temperature=temperature,
+            top_p=top_p,
     ):
         token = resp.choices[0].delta.content
         response_text += token
         yield response_text
 
-# -- 3) BUILD THE UI WITH A PROPER GRADIO DROPDOWN --
+
+# Since Gradio doesn't support disabled options in dropdowns natively,
+# we'll use a workaround with HTML and JavaScript
+
+# -- 3) BUILD THE UI WITH CUSTOM DROPDOWN --
 with gr.Blocks(css="""
     .container {
         max-width: 900px !important;
@@ -68,51 +69,58 @@ with gr.Blocks(css="""
     #chatbot {
         height: 600px !important;
     }
-    .model-dropdown .gr-dropdown {
-        border-radius: 8px;
+    /* CSS for disabling dropdown options */
+    .disabled-option {
+        color: #999 !important;
+        background-color: #f0f0f0 !important;
+        pointer-events: none !important;
+    }
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+        .disabled-option {
+            color: #666 !important;
+            background-color: #333 !important;
+        }
     }
 """) as demo:
     with gr.Row():
         with gr.Column(elem_classes="container"):
-            # Create proper Gradio Dropdown that will respect theme
-            model_choices = [f"{m['name']}: {m['description']}" for m in models]
-            model_dropdown = gr.Dropdown(
-                choices=model_choices,
-                value=model_choices[0],
-                label="Select Model",
-                elem_classes="model-dropdown",
-                scale=3
-            )
-            
+            # Create custom HTML dropdown with properly disabled options
+            dropdown_options = ""
+            for model in models:
+                value = model["id"]
+                label = f"{model['name']}: {model['description']}"
+                disabled = "" if model["enabled"] else 'disabled class="disabled-option"'
+                dropdown_options += f'<option value="{value}" {disabled}>{label}</option>'
+
+            dropdown_html = f"""
+            <div style="margin-bottom: 20px;">
+              <label for="model_select" style="display: block; margin-bottom: 8px; font-weight: bold;">Select Model:</label>
+              <select id="model_select" style="width: 100%; padding: 8px; border-radius: 8px; 
+                     border: 1px solid var(--border-color, #ccc); background-color: var(--background-fill-primary);"
+                     onchange="document.getElementById('hidden_model_id').value = this.value; 
+                              document.getElementById('hidden_model_id').dispatchEvent(new Event('input'));">
+                {dropdown_options}
+              </select>
+            </div>
+            """
+
+            gr.HTML(value=dropdown_html)
+
             # Hidden textbox to store the current model ID (will be read by 'respond')
             model_id = gr.Textbox(
                 value=models[0]["id"],
                 visible=False,
-                elem_id="hidden_model"
+                elem_id="hidden_model_id"
             )
-            
-            # Update the hidden model_id when dropdown changes
-            def update_model_id(evt):
-                selected_index = evt.index
-                if models[selected_index]["enabled"]:
-                    return models[selected_index]["id"]
-                else:
-                    # If disabled model selected, stay with default
-                    return models[0]["id"]
-                
-            model_dropdown.select(
-                update_model_id,
-                inputs=[],
-                outputs=[model_id]
-            )
-            
+
             # System message and parameter controls in a collapsible section
             with gr.Accordion("Advanced Settings", open=False):
                 system_message = gr.Textbox(
                     value="You are a friendly Chatbot.",
                     label="System message"
                 )
-                
+
                 with gr.Row():
                     with gr.Column(scale=1):
                         max_tokens = gr.Slider(
@@ -122,7 +130,7 @@ with gr.Blocks(css="""
                             step=1,
                             label="Max new tokens"
                         )
-                    
+
                     with gr.Column(scale=1):
                         temperature = gr.Slider(
                             minimum=0.1,
@@ -131,7 +139,7 @@ with gr.Blocks(css="""
                             step=0.1,
                             label="Temperature"
                         )
-                        
+
                     with gr.Column(scale=1):
                         top_p = gr.Slider(
                             minimum=0.1,
@@ -140,7 +148,7 @@ with gr.Blocks(css="""
                             step=0.05,
                             label="Top-p (nucleus sampling)"
                         )
-            
+
             # The ChatInterface with a larger chat area and our parameters
             chat = gr.ChatInterface(
                 respond,