Update app.py

app.py

@@ -3,54 +3,59 @@ from transformers import pipeline
 
 # Function to generate text based on the model
 def chatbot(user_input, history):
-    # Load the selected model (using a hard-coded model for now)
-    model = pipeline("text-generation", model="google/mt5-base")
-    
-    # Get the model's response
-    response = model(user_input, max_length=50, temperature=1.0)[0]["generated_text"]
-    
-    # Append the user input and model's response to the history
+    # Mock model response for demo purposes
+    response = f"Echo: {user_input}"
     history.append({"role": "user", "content": user_input})
     history.append({"role": "assistant", "content": response})
-    
-    return history  # Return the updated conversation history
+    return history
 
-# Main interface layout with small input and large output
+# Main interface layout
 def create_chat_interface():
     with gr.Blocks() as demo:
         gr.Markdown("# Chatbot Interface")
-
-        # Define the chat interface
+        
+        # Chat display
         chatbot_component = gr.Chatbot(type="messages", label="Chat History", height=500)
-
+        
+        # Input and button container
         with gr.Row(elem_id="input_container"):
-            # Input field
-            user_input = gr.Textbox(
-                placeholder="Type your message here...", label=None, lines=1, elem_id="user_input"
-            )
-            # Send button
-            send_button = gr.Button("📤", elem_id="send_button")
+            # Input field with the button inside
+            with gr.Box(elem_id="input_with_button"):
+                send_button = gr.Button("📤", elem_id="send_button")
+                user_input = gr.Textbox(
+                    placeholder="Type your message here...", label=None, lines=1, elem_id="user_input"
+                )
         
-        # Add CSS for styling the input container and placing the button inside
+        # Custom CSS to position the send button inside the input box
         demo.css = """
             #input_container {
                 display: flex;
-                align-items: center;
-                gap: 5px;
+                justify-content: center;
+                margin-top: 10px;
+            }
+            #input_with_button {
+                position: relative;
+                width: 100%;
+                max-width: 600px;
             }
             #user_input {
-                flex-grow: 1;
-                border: 1px solid #ccc;
+                width: 100%;
+                padding-left: 40px; /* To make space for the button */
                 border-radius: 8px;
-                padding: 10px;
+                border: 1px solid #ccc;
+                height: 40px;
+                box-sizing: border-box;
             }
             #send_button {
-                width: 40px;
-                height: 40px;
+                position: absolute;
+                left: 5px;
+                top: 5px;
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
                 background-color: #007bff;
                 color: white;
                 border: none;
-                border-radius: 50%;
                 cursor: pointer;
                 display: flex;
                 justify-content: center;
@@ -60,8 +65,8 @@ def create_chat_interface():
                 background-color: #0056b3;
             }
         """
-
-        # Connect the input to the chatbot function via the Send button
+        
+        # Link button click to the chatbot function
         send_button.click(
             chatbot,
             inputs=[user_input, chatbot_component],