Update app.py

app.py

@@ -6,7 +6,7 @@ models = [
     {
         "name": "Tiny Model",
         "description": "A small chat model.",
-        "id": "amusktweewt/tiny-model-500M-chat-v2",  # The one you say works already
+        "id": "amusktweewt/tiny-model-500M-chat-v2",
         "enabled": True
     },
     {
@@ -27,21 +27,30 @@ for model in models:
         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"""
+# Updated CSS to follow system theme and enlarge chat area.
+custom_css = """
 <style>
-  .custom-select {{
-    background-color: var(--background-color, #FFF);
-    color: var(--text-color, #000);
-    border: 1px solid var(--border-color, #CCC);
+  /* 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;">
@@ -51,30 +60,19 @@ dropdown_html = f"""
 
 def respond(message, history: list[tuple[str, str]], model_id, system_message, max_tokens, temperature, top_p):
     """
-    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.
+    Build a chat prompt and stream the response token-by-token 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,
@@ -86,20 +84,19 @@ 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 (so we can add custom HTML above the chat) --
+# -- 3) BUILD THE UI IN A BLOCKS CONTEXT --
 with gr.Blocks() as demo:
-    # Our custom HTML dropdown (shows model + description, supports disabled)
+    # Custom HTML dropdown for model selection.
     gr.HTML(value=dropdown_html)
-
-    # Hidden textbox to store the current model ID (will be read by 'respond').
+    
+    # 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"
     )
     
-    # The ChatInterface is almost the same as your original code.
-    # We simply add `hidden_model` as one more input argument.
+    # ChatInterface with an element ID for styling.
     chat = gr.ChatInterface(
         respond,
         additional_inputs=[
@@ -129,7 +126,8 @@ with gr.Blocks() as demo:
                 step=0.05,
                 label="Top-p (nucleus sampling)"
             ),
-        ]
+        ],
+        elem_id="chat_interface"
     )
 
 if __name__ == "__main__":