Title refreshed ? - What wind.surf will do ?

app.py

@@ -84,6 +84,8 @@ def respond(
     # Load new model if changed
     if current_model is None or model_name not in str(current_model.model_path):
         current_model = load_model(model_name)
+        # Update the interface title
+        gr.Info(get_chat_title(model_name))
     
     # Start with system message
     messages = []
@@ -121,12 +123,27 @@ def respond(
 def get_chat_title(model_name):
     return f"{model_name} < - Load different model in Additional Inputs"
 
-demo = gr.ChatInterface(
-    respond,
-    title=get_chat_title(list(MODELS.keys())[0]),
-    description="GGUF is popular format, try models locclay in: [LM Studio AI for PC](https://lmstudio.ai) | PocketPal AI ([Android](https://play.google.com/store/apps/details?id=com.pocketpalai) & [iOS](https://play.google.com/store/apps/details?id=com.pocketpalai)) on Tablet or Mobile",
-    additional_inputs=[
-        gr.Dropdown(
+with gr.Blocks() as demo:
+    with gr.Row():
+        title = gr.HTML(value=f"<h1>{get_chat_title(list(MODELS.keys())[0])}</h1>")
+    
+    with gr.Row():
+        chatbot = gr.Chatbot(
+            value=[],
+            type="messages",
+            label="Chat Messages"
+        )
+    
+    with gr.Row():
+        msg = gr.Textbox(
+            label="Message",
+            placeholder="Type your message here...",
+            lines=1
+        )
+        submit = gr.Button("Submit")
+    
+    with gr.Accordion("Additional Inputs", open=False):
+        model_selector = gr.Dropdown(
             choices=list(MODELS.keys()),
             value=list(MODELS.keys())[0],
             label="Select Model",
@@ -134,68 +151,49 @@ demo = gr.ChatInterface(
             allow_custom_value=False,
             elem_id="model_selector",
             show_label=True
-        ),
-        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)",
-        ),
-    ],
-    chatbot=gr.Chatbot(
-        value=[],
-        type="messages",
-        label="Chat Messages"
-    ),
-    theme=gr.themes.Soft(
+        )
+        system_msg = gr.Textbox(value="You are a friendly Chatbot.", label="System message")
+        max_tokens = gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens")
+        temperature = gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature")
+        top_p = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")
+    
+    gr.Markdown(
+        "GGUF is popular model format, try HG models localy in: [LM Studio AI](https://lmstudio.ai) for PC | PocketPal AI ([Android](https://play.google.com/store/apps/details?id=com.pocketpalai) & [iOS](https://play.google.com/store/apps/details?id=com.pocketpalai)) on Tablet or Mobile"
+    )
+    
+    def update_title(model_name):
+        return f"<h1>{get_chat_title(model_name)}</h1>"
+    
+    model_selector.change(
+        fn=update_title,
+        inputs=[model_selector],
+        outputs=[title]
+    )
+    
+    def submit_message(message, chat_history, model_name, system_message, max_tokens, temperature, top_p):
+        history = [] if chat_history is None else chat_history
+        for response in respond(message, history, model_name, system_message, max_tokens, temperature, top_p):
+            history = history + [[message, response]]
+            yield history, ""
+    
+    submit_event = submit.click(
+        fn=submit_message,
+        inputs=[msg, chatbot, model_selector, system_msg, max_tokens, temperature, top_p],
+        outputs=[chatbot, msg],
+        show_progress=True,
+    )
+    
+    msg.submit(
+        fn=submit_message,
+        inputs=[msg, chatbot, model_selector, system_msg, max_tokens, temperature, top_p],
+        outputs=[chatbot, msg],
+        show_progress=True,
+    )
+    
+    demo.theme = gr.themes.Soft(
         primary_hue="blue",
         secondary_hue="purple",
-    ),
-    css="""
-    .message-wrap {
-        border: 1px solid #e0e0e0;
-        border-radius: 8px;
-        padding: 8px;
-        margin: 8px 0;
-    }
-    #component-0, #component-1 {
-        border: 4px solid #2196F3;
-        border-radius: 12px;
-        padding: 15px;
-        background-color: #E3F2FD;
-        box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
-        margin: 10px 0;
-    }
-    #component-0:focus-within, #component-1:focus-within {
-        border-color: #1976D2;
-        box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
-        background-color: #BBDEFB;
-    }
-    .input-container, .gradio-container .input-container {
-        border: 4px solid #2196F3;
-        border-radius: 12px;
-        padding: 15px;
-        background-color: #E3F2FD;
-        box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
-        margin: 10px 0;
-    }
-    .input-container textarea, .input-container input[type="text"] {
-        background-color: #E3F2FD;
-        border: 2px solid #2196F3;
-        border-radius: 8px;
-        padding: 10px;
-    }
-    .input-container textarea:focus, .input-container input[type="text"]:focus {
-        background-color: #BBDEFB;
-        border-color: #1976D2;
-        outline: none;
-    }
-    """
-)
+    )
 
 if __name__ == "__main__":
     demo.launch()