Update app.py

app.py

@@ -1,46 +1,42 @@
 import gradio as gr
-from transformers import pipeline
 
-# Function to generate text based on the model
+# Function to generate chatbot responses
 def chatbot(user_input, 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
 
-# Main interface layout
+# Create the chat interface
 def create_chat_interface():
     with gr.Blocks() as demo:
         gr.Markdown("# Chatbot 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 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"
-                )
-        
-        # Custom CSS to position the send button inside the input box
+
+        # Input and send button container
+        with gr.Row(elem_id="input_container", equal_height=True):
+            # Send button inside input box
+            user_input = gr.Textbox(
+                placeholder="Type your message here...", label=None, elem_id="user_input"
+            )
+            send_button = gr.Button("📤", elem_id="send_button")
+
+        # Custom CSS to style the layout
         demo.css = """
             #input_container {
                 display: flex;
                 justify-content: center;
+                align-items: center;
                 margin-top: 10px;
-            }
-            #input_with_button {
-                position: relative;
                 width: 100%;
                 max-width: 600px;
+                position: relative;
             }
             #user_input {
-                width: 100%;
-                padding-left: 40px; /* To make space for the button */
+                flex-grow: 1;
+                padding-left: 40px; /* Add space for the send button */
                 border-radius: 8px;
                 border: 1px solid #ccc;
                 height: 40px;
@@ -48,8 +44,7 @@ def create_chat_interface():
             }
             #send_button {
                 position: absolute;
-                left: 5px;
-                top: 5px;
+                left: 10px;
                 width: 30px;
                 height: 30px;
                 border-radius: 50%;
@@ -65,8 +60,8 @@ def create_chat_interface():
                 background-color: #0056b3;
             }
         """
-        
-        # Link button click to the chatbot function
+
+        # Link button click to chatbot function
         send_button.click(
             chatbot,
             inputs=[user_input, chatbot_component],