Update app.py

app.py

@@ -1,12 +1,12 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
 
-# Define available models.
+# -- 1) DEFINE YOUR MODELS HERE --
 models = [
     {
         "name": "Tiny Model",
         "description": "A small chat model.",
-        "id": "amusktweewt/tiny-model-500M-chat-v2",
+        "id": "amusktweewt/tiny-model-500M-chat-v2",  # The one you say works already
         "enabled": True
     },
     {
@@ -17,38 +17,62 @@ models = [
     }
 ]
 
-# Build the HTML for the custom dropdown.
+# Build the custom HTML for a disabled-capable <select>.
 dropdown_options = ""
 for model in models:
-    disabled_attr = "disabled" if not model["enabled"] else ""
     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'
 
+# Minimal inline styling to help match Gradio's background.
 dropdown_html = f"""
-<div>
-  <label for="model_select"><strong>Select Model:</strong></label>
-  <select id="model_select" onchange="document.getElementById('hidden_model').value = this.value;">
-    {dropdown_options}
-  </select>
-</div>
+<style>
+  .custom-select {{
+    background-color: var(--background-color, #FFF);
+    color: var(--text-color, #000);
+    border: 1px solid var(--border-color, #CCC);
+    padding: 8px;
+    border-radius: 4px;
+    font-size: 1rem;
+    width: 100%;
+    box-sizing: border-box;
+    margin-bottom: 1rem;
+  }}
+</style>
+<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 respond(message, history: list[tuple[str, str]], model_id, system_message, max_tokens, temperature, top_p):
-    # Instantiate the InferenceClient using the selected 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(
@@ -62,23 +86,49 @@ def respond(message, history: list[tuple[str, str]], model_id, system_message, m
         response_text += token
         yield response_text
 
-# Build the interface using Gradio Blocks.
+# -- 3) BUILD THE UI IN A BLOCKS CONTEXT (so we can add custom HTML above the chat) --
 with gr.Blocks() as demo:
-    # Display the custom dropdown.
+    # Our custom HTML dropdown (shows model + description, supports disabled)
     gr.HTML(value=dropdown_html)
-    # Hidden textbox to capture the selected model ID.
-    hidden_model = gr.Textbox(value=models[0]["id"], visible=False, elem_id="hidden_model")
+
+    # Hidden textbox to store the current model ID (will be read by 'respond').
+    hidden_model = gr.Textbox(
+        value=models[0]["id"],  # Default to the first model
+        visible=False,
+        elem_id="hidden_model"
+    )
     
-    # Create the ChatInterface.
-    chat_interface = gr.ChatInterface(
-        fn=respond,
+    # The ChatInterface is almost the same as your original code.
+    # We simply add `hidden_model` as one more input argument.
+    chat = gr.ChatInterface(
+        respond,
         additional_inputs=[
-            # Pass the hidden model selector.
             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)")
+            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)"
+            ),
         ]
     )