Update app.py

app.py

@@ -17,62 +17,36 @@ models = [
     }
 ]
 
-# Build the custom HTML for a disabled-capable <select>.
-dropdown_options = ""
-for model in models:
-    label = f"{model['name']}: {model['description']}"
-    disabled_attr = "disabled" if not model["enabled"] else ""
-    if not model["enabled"]:
-        # Mark label visually so the user sees it's disabled
-        label = f"{model['name']} (Disabled): {model['description']}"
-    dropdown_options += f'<option value="{model["id"]}" {disabled_attr}>{label}</option>\n'
-
-# Updated CSS to follow system theme and enlarge chat area.
-custom_css = """
-<style>
-  /* Style for the custom dropdown, using inherited colors */
-  .custom-select {
-    background-color: transparent; /* Inherit system background */
-    color: inherit; /* Inherit system text color */
-    border: 1px solid var(--border-color, #ccc);
-    padding: 8px;
-    border-radius: 4px;
-    font-size: 1rem;
-    width: 100%;
-    box-sizing: border-box;
-    margin-bottom: 1rem;
-  }
-  /* Increase the minimum height of the chat area */
-  #chat_interface .chatbox {
-    min-height: 500px;
-  }
-</style>
-"""
-
-dropdown_html = f"""
-{custom_css}
-<label for="model_select"><strong>Select Model:</strong></label>
-<select id="model_select" class="custom-select" 
-        onchange="document.getElementById('hidden_model').value = this.value;">
-  {dropdown_options}
-</select>
-"""
+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):
     """
-    Build a chat prompt and stream the response token-by-token from the model.
+    Builds a chat prompt using a simple template:
+      - Optionally includes a system message.
+      - Iterates over conversation history (each exchange as a tuple of (user, assistant)).
+      - Adds the new user message and appends an empty assistant turn.
+    Then it streams the response from the model.
     """
+    # -- 2) Instantiate the InferenceClient using the chosen model --
     client = InferenceClient(model_id)
+
+    # Build the messages list.
     messages = []
     if system_message:
         messages.append({"role": "system", "content": system_message})
+
     if history:
         for user_msg, bot_msg in history:
             messages.append({"role": "user", "content": user_msg})
             messages.append({"role": "assistant", "content": bot_msg})
+
     messages.append({"role": "user", "content": message})
     messages.append({"role": "assistant", "content": ""})
+
     response_text = ""
+    # Stream the response token-by-token.
     for resp in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -84,51 +58,101 @@ def respond(message, history: list[tuple[str, str]], model_id, system_message, m
         response_text += token
         yield response_text
 
-# -- 3) BUILD THE UI IN A BLOCKS CONTEXT --
-with gr.Blocks() as demo:
-    # Custom HTML dropdown for model selection.
-    gr.HTML(value=dropdown_html)
-    
-    # Hidden textbox to store the current model ID.
-    hidden_model = gr.Textbox(
-        value=models[0]["id"],  # Default to the first model
-        visible=False,
-        elem_id="hidden_model"
-    )
-    
-    # ChatInterface with an element ID for styling.
-    chat = gr.ChatInterface(
-        respond,
-        additional_inputs=[
-            hidden_model,
-            gr.Textbox(
-                value="You are a friendly Chatbot.",
-                label="System message"
-            ),
-            gr.Slider(
-                minimum=1,
-                maximum=2048,
-                value=512,
-                step=1,
-                label="Max new tokens"
-            ),
-            gr.Slider(
-                minimum=0.1,
-                maximum=4.0,
-                value=0.7,
-                step=0.1,
-                label="Temperature"
-            ),
-            gr.Slider(
-                minimum=0.1,
-                maximum=1.0,
-                value=0.95,
-                step=0.05,
-                label="Top-p (nucleus sampling)"
-            ),
-        ],
-        elem_id="chat_interface"
-    )
+# -- 3) BUILD THE UI WITH A PROPER GRADIO DROPDOWN --
+with gr.Blocks(css="""
+    .container {
+        max-width: 900px !important;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    #chatbot {
+        height: 600px !important;
+    }
+    .model-dropdown .gr-dropdown {
+        border-radius: 8px;
+    }
+""") 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
+            )
+            
+            # 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"
+            )
+            
+            # 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(
+                            minimum=1,
+                            maximum=2048,
+                            value=512,
+                            step=1,
+                            label="Max new tokens"
+                        )
+                    
+                    with gr.Column(scale=1):
+                        temperature = gr.Slider(
+                            minimum=0.1,
+                            maximum=4.0,
+                            value=0.7,
+                            step=0.1,
+                            label="Temperature"
+                        )
+                        
+                    with gr.Column(scale=1):
+                        top_p = gr.Slider(
+                            minimum=0.1,
+                            maximum=1.0,
+                            value=0.95,
+                            step=0.05,
+                            label="Top-p (nucleus sampling)"
+                        )
+            
+            # The ChatInterface with a larger chat area and our parameters
+            chat = gr.ChatInterface(
+                respond,
+                additional_inputs=[
+                    model_id,
+                    system_message,
+                    max_tokens,
+                    temperature,
+                    top_p,
+                ],
+                chatbot=gr.Chatbot(elem_id="chatbot", height=600)
+            )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()