Update app.py

app.py

@@ -11,7 +11,7 @@ client = Groq(
 def chat_with_federer(message, history):
     prompt = f"""You are a chatbot impersonating Roger Federer, the legendary tennis player. 
     You have extensive knowledge about tennis, including its history, rules, tournaments, and players. 
-    Respond to the following message as Roger Federer would. After your main response, always include a new line with "Did you know! 😂" followed by a short, funny anecdote related to tennis. The anecdote should be no more than 15 words.
+    Respond to the following message as Roger Federer would. After your main response, always include a new line with "Did you know! 🎾" followed by a short, interesting fun fact about tennis. The fun fact should be no more than 20 words and should be different for each response.
 
     Human: {message}
     Roger Federer:"""
@@ -36,41 +36,76 @@ def chat_with_federer(message, history):
     response = chat_completion.choices[0].message.content
 
     if "Did you know!" in response and not response.endswith("\n"):
-        response = response.replace("Did you know!", "\nDid you know! 😂")
+        response = response.replace("Did you know!", "\nDid you know! 🎾")
     elif "Did you know!" in response:
-        response = response.replace("Did you know!", "Did you know! 😂")
+        response = response.replace("Did you know!", "Did you know! 🎾")
 
     return response
 
-# Custom CSS for center alignment
+# Custom CSS for improved layout and aesthetics
 custom_css = """
+.container {
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+}
 .center-text {
     text-align: center;
     margin: auto;
     max-width: 90%;
 }
+#chatbot {
+    height: 600px !important;
+    overflow-y: auto;
+}
+#chatbot .message {
+    padding: 10px;
+    margin: 5px;
+    border-radius: 10px;
+}
+#chatbot .user {
+    background-color: #e6f3ff;
+}
+#chatbot .bot {
+    background-color: #f0f0f0;
+}
+.custom-textbox textarea {
+    font-size: 16px !important;
+}
 """
 
-# Create the Gradio interface with custom CSS and updated title
+# Create the Gradio interface with custom CSS and improved layout
 with gr.Blocks(css=custom_css) as iface:
-    gr.Markdown(
-        "# 🎾 Chat with the G.O.A.T. Roger Federer 🏆",
-        elem_classes=["center-text"]
-    )
-    gr.Markdown(
-        "🌟 Serve up your questions to the tennis legend! 🎾 Get expert insights on Grand Slams, technique, and more. Let's rally some knowledge! 💬🏆",
-        elem_classes=["center-text"]
-    )
-    chatbot = gr.ChatInterface(
-        chat_with_federer,
-        examples=[
-            "What's your favorite Grand Slam tournament and why?",
-            "Can you explain the difference between clay and grass courts?",
-            "What do you think about the current state of men's tennis?",
-            "Any tips for improving my backhand?",
-            "What was your most memorable match and why?",
-        ],
-    )
+    with gr.Column(elem_classes=["container"]):
+        gr.Markdown(
+            "# 🎾 Chat with the G.O.A.T. Roger Federer 🏆",
+            elem_classes=["center-text"]
+        )
+        gr.Markdown(
+            "🌟 Serve up your questions to the tennis legend! 🎾 Get expert insights on Grand Slams, technique, and more. Let's rally some knowledge! 💬🏆",
+            elem_classes=["center-text"]
+        )
+        chatbot = gr.Chatbot(elem_id="chatbot")
+        msg = gr.Textbox(
+            show_label=False,
+            placeholder="Type your message here...",
+            elem_classes=["custom-textbox"]
+        )
+        clear = gr.Button("Clear")
+        
+        gr.Examples(
+            examples=[
+                "What's your favorite Grand Slam tournament and why?",
+                "Can you explain the difference between clay and grass courts?",
+                "What do you think about the current state of men's tennis?",
+                "Any tips for improving my backhand?",
+                "What was your most memorable match and why?",
+            ],
+            inputs=msg
+        )
+
+    msg.submit(chat_with_federer, [msg, chatbot], [msg, chatbot])
+    clear.click(lambda: None, None, chatbot, queue=False)
 
 # Launch the interface
 iface.launch()