Update app.py

app.py

@@ -2,7 +2,6 @@ import gradio as gr
 from huggingface_hub import InferenceClient
 
 # Define available models.
-# Each model has a name, description, model ID, and an "enabled" flag.
 models = [
     {
         "name": "Tiny Model",
@@ -21,15 +20,12 @@ models = [
 # Build the HTML for the custom dropdown.
 dropdown_options = ""
 for model in models:
-    # If a model is disabled, add the "disabled" attribute and modify its label.
     disabled_attr = "disabled" if not model["enabled"] else ""
     label = f"{model['name']}: {model['description']}"
     if not model["enabled"]:
         label = f"{model['name']} (Disabled): {model['description']}"
     dropdown_options += f'<option value="{model["id"]}" {disabled_attr}>{label}</option>\n'
 
-# This HTML dropdown will be displayed. When the user selects an option,
-# an inline JavaScript updates the value of the hidden textbox with the chosen model ID.
 dropdown_html = f"""
 <div>
   <label for="model_select"><strong>Select Model:</strong></label>
@@ -39,20 +35,17 @@ dropdown_html = f"""
 </div>
 """
 
-# The respond function now accepts the model_id as one of its inputs.
 def respond(message, history: list[tuple[str, str]], model_id, system_message, max_tokens, temperature, top_p):
-    # Instantiate the InferenceClient with the selected model.
+    # Instantiate the InferenceClient using the selected model.
     client = InferenceClient(model_id)
     
     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": ""})
     
@@ -69,28 +62,25 @@ def respond(message, history: list[tuple[str, str]], model_id, system_message, m
         response_text += token
         yield response_text
 
-# Create Gradio components.
-# The HTML component displays our custom dropdown.
-html_dropdown = gr.HTML(value=dropdown_html)
-# The hidden textbox will hold the selected model ID.
-hidden_model = gr.Textbox(value=models[0]["id"], visible=False, elem_id="hidden_model")
-
-# Create the Gradio ChatInterface.
-# Note: Only components that supply a value are passed to the function.
-# The HTML component is for display only.
-demo = gr.ChatInterface(
-    fn=respond,
-    additional_inputs=[
-        # hidden_model supplies the model_id.
-        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)")
-    ],
-    # You can include the HTML dropdown in a layout so that it is visible to the user.
-    layout=[html_dropdown]
-)
+# Build the interface using Gradio Blocks.
+with gr.Blocks() as demo:
+    # Display the custom dropdown.
+    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")
+    
+    # Create the ChatInterface.
+    chat_interface = gr.ChatInterface(
+        fn=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)")
+        ]
+    )
 
 if __name__ == "__main__":
     demo.launch()