Update app.py

app.py

@@ -105,84 +105,26 @@ def transcribe_and_chat(audio):
 
 def create_demo():
     with gr.Blocks(css="""
-        @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;
-        }
-
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+        body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box;}
+        #audio-input {border: 2px solid #ffb703; padding: 10px;}
+        #chat-output {background-color: #023047; color: #ffffff; font-size: 1.2em;}
+        #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;}
         @media (max-width: 768px) {
-            #audio-input, #audio-output, #voice-volume, #chat-output {
-                font-size: 14px;
-                padding: 8px;
-            }
-            
-            button { 
-                font-size: 14px;
-            }
+            #audio-input, #chat-output, #audio-output { width: 100%; }
+            button { width: 100%; }
         }
     """) as demo:
         gr.Markdown(
             """
-            <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>
+            <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>
             """, 
             elem_id="header"
         )
@@ -257,13 +199,22 @@ def create_demo():
                 });
 
                 document.addEventListener('gradioUpdated', function(event) {
-                    playAssistantAudio();
+                    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();
+                    });
                 });
             }
         """)
 
     return demo
 
-# Create and launch the Gradio demo
-demo = create_demo()
-demo.launch()
+# Launch the Gradio app
+if __name__ == "__main__":
+    demo = create_demo()
+    demo.launch(server_name="0.0.0.0", server_port=7860)