Update app.py

app.py

@@ -100,30 +100,49 @@ def submit(message, history, model_name, max_tokens, temperature, top_p):
     for updated_history in respond(message, history, model_name, max_tokens, temperature, top_p):
         yield updated_history, ""
 
+def select_model(model_name, current_model):
+    """
+    Update the selected model name when a model button is clicked.
+    
+    Args:
+        model_name (str): The model name to select.
+        current_model (str): The currently selected model.
+    
+    Returns:
+        str: The newly selected model name.
+    """
+    return model_name
+
 # Create the Gradio interface with Blocks
-with gr.Blocks() as demo:
+with gr.Blocks(css=".gr-button {margin: 5px; width: 100%;} .gr-column {padding: 10px;}") as demo:
     # Title and description
     gr.Markdown("# LeCarnet")
     gr.Markdown("Select a model on the right and type a message to chat.")
 
-    # Two-column layout
+    # Two-column layout with specific widths
     with gr.Row():
-        # Left column: Chat interface
-        with gr.Column():
+        # Left column: Chat interface (80% width)
+        with gr.Column(scale=4):
             chatbot = gr.Chatbot(
                 avatar_images=(None, "media/le-carnet.png"),  # User avatar: None, Bot avatar: Logo
-                label="Chat"
+                label="Chat",
+                height=600,  # Increase chat height for larger display
             )
             user_input = gr.Textbox(placeholder="Type your message here...", label="Message")
             submit_btn = gr.Button("Send")
 
-        # Right column: Model selection and parameters
-        with gr.Column():
-            model_dropdown = gr.Dropdown(
-                choices=["LeCarnet-3M", "LeCarnet-8M", "LeCarnet-21M"],
-                value="LeCarnet-8M",
-                label="Model"
-            )
+        # Right column: Model selection and parameters (20% width)
+        with gr.Column(scale=1, min_width=200):
+            # State to track selected model
+            model_state = gr.State(value="LeCarnet-8M")
+
+            # Model selection buttons
+            gr.Markdown("**Select Model**")
+            btn_3m = gr.Button("LeCarnet-3M")
+            btn_8m = gr.Button("LeCarnet-8M")
+            btn_21m = gr.Button("LeCarnet-21M")
+
+            # Sliders for parameters
             max_tokens = gr.Slider(1, 512, value=512, step=1, label="Max New Tokens")
             temperature = gr.Slider(0.1, 2.0, value=0.7, step=0.1, label="Temperature")
             top_p = gr.Slider(0.1, 1.0, value=0.9, step=0.05, label="Top-p")
@@ -141,9 +160,26 @@ with gr.Blocks() as demo:
     # Event handling for submit button
     submit_btn.click(
         fn=submit,
-        inputs=[user_input, chatbot, model_dropdown, max_tokens, temperature, top_p],
+        inputs=[user_input, chatbot, model_state, max_tokens, temperature, top_p],
         outputs=[chatbot, user_input],
     )
 
+    # Event handling for model selection buttons
+    btn_3m.click(
+        fn=select_model,
+        inputs=[gr.State("LeCarnet-3M"), model_state],
+        outputs=model_state,
+    )
+    btn_8m.click(
+        fn=select_model,
+        inputs=[gr.State("LeCarnet-8M"), model_state],
+        outputs=model_state,
+    )
+    btn_21m.click(
+        fn=select_model,
+        inputs=[gr.State("LeCarnet-21M"), model_state],
+        outputs=model_state,
+    )
+
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=10, max_size=10).launch(ssr_mode=False, max_threads=10)