Update app.py

app.py

@@ -3,7 +3,7 @@ import datetime
 import pytz
 import gradio as gr
 
-# Replace with your actual API key
+# Your real API key (replace with yours if different)
 client = openai.OpenAI(
     api_key='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',
     base_url="https://api.groq.com/openai/v1",
@@ -47,7 +47,7 @@ Make it a challenge to guess if you are an AI.
         messages.append({"role": "assistant", "content": ai_turn})
 
     response = client.chat.completions.create(
-        model='llama-3.2-11b-text-preview',  # Or your preferred model
+        model='llama-3.2-11b-text-preview',
         messages=messages,
         temperature=1,
     )
@@ -62,44 +62,45 @@ def chatbot_interface(input, history):
     history.append((user_message, ai_response))
     return history, history
 
-# Create the Gradio interface with a cleaner WhatsApp-like layout
-with gr.Blocks(css="""
-    /* Basic WhatsApp styling */
-    body {
-        font-family: sans-serif;
-        background-color: #e5ddd5; 
-    }
-    .chatbot {
-        border: 1px solid #ddd;
-        border-radius: 10px;
-        background-color: #fff;
-        padding: 15px;
-        margin: 20px auto;
-        max-width: 600px;
-    }
-    .user-message {
-        background-color: #dcf8c6; /* Light green for user messages */
-        border-radius: 15px;
-        padding: 10px;
-        margin-bottom: 10px;
-        align-self: flex-end;
-    }
-    .bot-message {
-        background-color: #fff; /* White for bot messages */
-        border-radius: 15px;
-        padding: 10px;
-        margin-bottom: 10px;
-        align-self: flex-start;
-    }
-    .gradio-container .gr-button { 
-        background-color: #128C7E; /* WhatsApp green for the button */
-        color: white;
-        border: none;
-    }
-""") as demo:
-    chatbot = gr.Chatbot(elem_classes="chatbot")
-    msg = gr.Textbox(placeholder="Enter your message here...", show_label=False)
-    clear = gr.Button("Clear")
+# CSS for styling the interface
+css = """
+body {
+    font-family: 'Merriweather', serif; 
+}
+#chatbot {
+    border: 1px solid #ccc;
+    border-radius: 10px;
+    padding: 10px;
+    height: 400px;
+    overflow-y: auto;
+}
+.user-message {
+    background-color: #e0f7fa;
+    padding: 10px;
+    margin-bottom: 5px;
+    border-radius: 5px;
+}
+.ai-message {
+    background-color: #f5f5dc;
+    padding: 10px;
+    margin-bottom: 5px;
+    border-radius: 5px;
+}
+#textbox {
+    margin-top: 10px;
+}
+"""
+
+# Create the Gradio interface
+with gr.Blocks(css=css) as demo:
+    
+    with gr.Row():
+        chatbot = gr.Chatbot(elem_id="chatbot") 
+
+    with gr.Row():
+        msg = gr.Textbox(placeholder="Enter your message here...", elem_id="textbox")
+        submit_btn = gr.Button("Send", variant="primary")  # Primary button style
+        clear_btn = gr.Button("Clear", variant="secondary")  # Secondary button style
 
     def user(user_message, history):
         return "", history + [[user_message, None]]
@@ -110,9 +111,9 @@ with gr.Blocks(css="""
         history[-1][1] = ai_response
         return history
 
-    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
+    submit_btn.click(user, [msg, chatbot], [msg, chatbot], queue=False).then(
         bot, chatbot, chatbot
     )
-    clear.click(lambda: None, None, chatbot, queue=False)
+    clear_btn.click(lambda: None, None, chatbot, queue=False)
 
 demo.launch()