Update app.py

app.py

@@ -3,7 +3,8 @@ import os
 from gtts import gTTS
 import gradio as gr
 from groq import Groq
-from datetime import datetime
+from datetime import datetime  # Import datetime to handle timestamps
+from IPython.display import HTML
 
 # Load a smaller Whisper model for faster processing
 try:
@@ -88,54 +89,49 @@ def chatbot(audio):
         print(f"Error in chatbot function: {e}")
         return "Sorry, there was an error processing your request.", None, chat_history
 
-# CSS for custom background and styling
-custom_css = """
-<style>
-    body {
-        background-color: #f4f4f4;
-        font-family: Arial, sans-serif;
-    }
-    .container {
-        background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
-        border-radius: 12px;
-        padding: 20px;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        max-width: 700px;
-        margin: auto;
-    }
-    .chat-history {
-        background-color: #ffffff;
-        border-radius: 10px;
-        padding: 15px;
-        height: 300px;
-        overflow-y: auto;
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
-    }
-    .user-message {
-        color: #0084ff;
-        font-weight: bold;
-        margin-bottom: 5px;
-    }
-    .bot-message {
-        color: #5a5a5a;
-        margin-bottom: 10px;
-    }
-    .audio-output {
-        margin-top: 15px;
-        background-color: #d8f3dc;
-        border-radius: 8px;
-        padding: 10px;
-        text-align: center;
-    }
-</style>
-"""
+# Inject custom CSS for background and styling
+def set_background():
+    return HTML('''
+        <style>
+            body {
+                background-image: url("https://raw.githubusercontent.com/username/repository/main/path/to/your-image.png");
+                background-size: cover;
+                background-position: center;
+                background-repeat: no-repeat;
+                color: white;
+                font-family: Arial, sans-serif;
+            }
+            .gradio-container {
+                background-color: rgba(0, 0, 0, 0.6);
+                padding: 20px;
+                border-radius: 8px;
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            }
+            h1, h2, p, .gradio-label {
+                color: #FFD700;  /* Gold color for labels and titles */
+            }
+            .gradio-button {
+                background-color: #FFD700;
+                color: black;
+                border-radius: 4px;
+                font-weight: bold;
+            }
+            .gradio-input {
+                background-color: rgba(255, 255, 255, 0.9);
+                border-radius: 4px;
+            }
+        </style>
+    ''')
+
+# Display custom background styling
+set_background() 
 
 # Gradio interface for real-time interaction with chat history display
 iface = gr.Interface(
     fn=chatbot,
     inputs=gr.Audio(type="filepath"),
     outputs=[
-        gr.HTML("<div class='chat-history'></div>"),  # Display chat history in a styled div
+        gr.Textbox(label="Chat History"),  # Display chat history
         gr.Audio(type="filepath", label="Response Audio"),
     ],
     live=True,
@@ -144,9 +140,6 @@ iface = gr.Interface(
     theme="default"
 )
 
-# Inject the custom CSS into the interface
-iface.css = custom_css
-
 # Launch the Gradio app
 if __name__ == "__main__":
     iface.launch()
@@ -161,8 +154,6 @@ if __name__ == "__main__":
 
 
 
-
-
 # import whisper
 # import os
 # from gtts import gTTS