Update app.py

app.py

@@ -2,6 +2,7 @@ import openai
 import datetime
 import pytz
 import gradio as gr
+import time
 
 # Your real API key (replace with yours if different)
 client = openai.OpenAI(
@@ -10,7 +11,7 @@ client = openai.OpenAI(
 )
 
 def get_current_local_time():
-    return datetime.datetime.now().strftime("%a, %d %b %Y %H:%M:%S")
+    return datetime.datetime.now().strftime("%I:%M %p")  # Format time as 09:32 PM
 
 def generate_response(user_message, conversation_history):
     current_time = get_current_local_time()
@@ -58,14 +59,19 @@ Make it a challenge to guess if you are an AI.
 def chatbot_interface(input, history):
     history = history or []
     user_message = input
-    ai_response = generate_response(user_message, history)
-    history.append((user_message, ai_response))
+
+    # Simulate typing animation by adding a delay
+    history.append((user_message, "Typing..."))
+    time.sleep(2)  # Adjust the delay as needed
+
+    ai_response = generate_response(user_message, history[:-1])
+    history[-1] = (user_message, ai_response)  # Replace "Typing..." with the actual response
     return history, history
 
-# CSS for styling the interface
+# CSS for styling the interface (including typing animation)
 css = """
 body {
-    font-family: 'Merriweather', serif; 
+    font-family: 'Merriweather', serif;
 }
 #chatbot {
     border: 1px solid #ccc;
@@ -79,6 +85,7 @@ body {
     padding: 10px;
     margin-bottom: 5px;
     border-radius: 5px;
+    text-align: right; /* Align user messages to the right */
 }
 .ai-message {
     background-color: #f5f5dc;
@@ -86,6 +93,10 @@ body {
     margin-bottom: 5px;
     border-radius: 5px;
 }
+.typing-indicator { /* Style for the typing animation */
+    font-style: italic;
+    color: #888;
+}
 #textbox {
     margin-top: 10px;
 }
@@ -93,14 +104,20 @@ body {
 
 # Create the Gradio interface
 with gr.Blocks(css=css) as demo:
-    
+    gr.Markdown("<h1>AI Chatbot Challenge</h1>")
+
     with gr.Row():
-        chatbot = gr.Chatbot(elem_id="chatbot") 
+        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
+        msg = gr.Textbox(placeholder="Type here...", elem_id="textbox")
+        submit_btn = gr.Button("Send", variant="primary")
+        clear_btn = gr.Button("Clear", variant="secondary")
+
+        # Add icons to the buttons (using FontAwesome for example)
+        with gr.Accordion("More Options", open=False):
+            upload_btn = gr.UploadButton("Upload File", file_types=["image", "video", "audio"])
+            record_btn = gr.Button("Record Audio", variant="secondary")
 
     def user(user_message, history):
         return "", history + [[user_message, None]]