Update app.py

app.py

@@ -105,20 +105,84 @@ def transcribe_and_chat(audio):
 
 def create_demo():
     with gr.Blocks(css="""
-        #audio-input {border: 2px solid #ffb703; padding: 10px;}
-        #chat-output {background-color: #023047; color: #ffffff;}
-        #audio-output {border: 2px solid #8ecae6;}
-        #clear-button {background-color: #fb8500; color: white;}
-        #voice-volume {background-color: #219ebc;}
-        button {font-size: 16px;}
-        audio {background-color: #ffb703; border-radius: 10px;}
-        footer {display: none;}
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+        
+        body { font-family: 'Poppins', sans-serif; }
+
+        #audio-input, #voice-volume {
+            border: 2px solid #ffb703;
+            padding: 10px;
+            box-shadow: 0px 0px 15px #ffb703;
+        }
+
+        #chat-output {
+            background-color: #023047;
+            color: #ffffff;
+            border-radius: 10px;
+            box-shadow: 0px 0px 15px #8ecae6;
+        }
+
+        #audio-output {
+            border: 2px solid #8ecae6;
+            box-shadow: 0px 0px 15px #8ecae6;
+            border-radius: 10px;
+        }
+
+        #clear-button {
+            background-color: #fb8500;
+            color: white;
+            font-size: 16px;
+            border-radius: 5px;
+            box-shadow: 0px 0px 15px #fb8500;
+        }
+
+        #voice-volume {
+            background-color: #219ebc;
+            border-radius: 5px;
+            box-shadow: 0px 0px 15px #219ebc;
+        }
+
+        button { 
+            font-size: 16px;
+            font-family: 'Poppins', sans-serif;
+            padding: 10px;
+        }
+
+        audio {
+            background-color: #ffb703;
+            border-radius: 10px;
+        }
+
+        h1 {
+            text-align: center;
+            color: #023047;
+            font-size: 28px;
+            font-weight: bold;
+            text-shadow: 0px 0px 15px #023047;
+        }
+
+        p {
+            text-align: center;
+            color: #8ecae6;
+            font-size: 18px;
+        }
+
+        @media (max-width: 768px) {
+            #audio-input, #audio-output, #voice-volume, #chat-output {
+                font-size: 14px;
+                padding: 8px;
+            }
+            
+            button { 
+                font-size: 14px;
+            }
+        }
     """) as demo:
         gr.Markdown(
             """
-            <div style='text-align:center; color:#023047; font-size: 28px; font-weight: bold;'>🗣️ AI Voice Assistant</div>
-            <p style='text-align:center; color:#8ecae6; font-size: 18px;'>Talk to your personal AI! Record your voice, and get a response in both text and audio.</p>
-            <p style='text-align:center; color:#8ecae6;'>Powered by advanced AI models for real-time interaction.</p>
+            <h1>🗣️ AI Voice Assistant</h1>
+            <p>Talk to your personal AI! Record your voice, and get a response in both text and audio.</p>
+            <p>Powered by advanced AI models for real-time interaction.</p>
             """, 
             elem_id="header"
         )
@@ -193,22 +257,13 @@ def create_demo():
                 });
 
                 document.addEventListener('gradioUpdated', function(event) {
-                    setTimeout(playAssistantAudio, 100);
-                });
-
-                // Prevent audio from stopping when switching tabs
-                document.addEventListener("visibilitychange", function() {
-                    var audioElements = document.querySelectorAll('audio');
-                    audioElements.forEach(function(audio) {
-                        audio.play();
-                    });
+                    playAssistantAudio();
                 });
             }
         """)
 
     return demo
 
-# Launch the Gradio app
-if __name__ == "__main__":
-    demo = create_demo()
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+# Create and launch the Gradio demo
+demo = create_demo()
+demo.launch()