Update app.py

app.py

@@ -106,18 +106,14 @@ def transcribe_and_chat(audio):
 def create_demo():
     with gr.Blocks(css="""
         @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; background-color: #f0f4f8; color: #333; }
-        #header { font-size: 30px; font-weight: 700; color: #333; }
-        p { font-size: 18px; color: #666; }
-        #audio-input {border: 2px solid #9b51e0; padding: 10px; border-radius: 10px; background-color: #ffffff;}
-        #chat-output {background-color: #2f3640; color: #ffffff; font-size: 1.2em; border-radius: 10px; padding: 15px;}
-        #audio-output {border: 2px solid #9b51e0; padding: 10px; border-radius: 10px; background-color: #ffffff;}
-        #clear-button {background-color: #ff6b6b; color: white; border-radius: 5px;}
-        #voice-volume {background-color: #51a3ff;}
-        button {font-size: 16px; padding: 10px 20px; border-radius: 5px; cursor: pointer;}
-        button:hover { background-color: #ff6b6b; color: white;}
-        audio {border-radius: 10px; background-color: #9b51e0; padding: 10px;}
-        hr { border: 1px solid #9b51e0; margin-top: 20px; }
+        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, #chat-output, #audio-output { width: 100%; }
@@ -126,8 +122,9 @@ def create_demo():
     """) as demo:
         gr.Markdown(
             """
-            <div id='header'>🗣️ AI Voice Assistant</div>
-            <p style='text-align:center;'>Talk to your personal AI! Record your voice, and get a response in both text and audio.</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"
         )
@@ -142,13 +139,16 @@ def create_demo():
                 chat_output = gr.Textbox(label="💬 AI Response", elem_id="chat-output", lines=5, interactive=False)
                 audio_output = gr.Audio(label="🔊 AI Voice Response", autoplay=True, elem_id="audio-output")
 
-        gr.Markdown("<hr />")
+        # Add some spacing and a divider
+        gr.Markdown("<hr style='border: 1px solid #8ecae6;'/>")
 
+        # Processing the audio input
         def process_audio(audio, volume):
             logging.info(f"Received audio: {audio}")
             if audio is None:
                 return "No audio detected. Please try recording again.", None
             response, audio_path = transcribe_and_chat(audio)
+            # Adjust volume for the response audio
             adjusted_audio_path = asyncio.run(text_to_speech_stream(response, volume))
             logging.info(f"Response: {response}, Audio path: {adjusted_audio_path}")
             return response, adjusted_audio_path
@@ -160,18 +160,21 @@ def create_demo():
         demo.load(None, js="""
             function() {
                 var recordButton;
-
+                
                 function findRecordButton() {
                     var buttons = document.querySelectorAll('button');
-                    for (var i = 0; buttons.length; i++) {
+                    for (var i = 0; i < buttons.length; i++) {
                         if (buttons[i].textContent.includes('Record from microphone')) {
                             return buttons[i];
                         }
                     }
+                    return null;
                 }
 
                 function startListening() {
-                    recordButton = findRecordButton();
+                    if (!recordButton) {
+                        recordButton = findRecordButton();
+                    }
                     if (recordButton) {
                         recordButton.click();
                     }
@@ -199,6 +202,7 @@ def create_demo():
                     setTimeout(playAssistantAudio, 100);
                 });
 
+                // Prevent audio from stopping when switching tabs
                 document.addEventListener("visibilitychange", function() {
                     var audioElements = document.querySelectorAll('audio');
                     audioElements.forEach(function(audio) {
@@ -213,4 +217,4 @@ def create_demo():
 # Launch the Gradio app
 if __name__ == "__main__":
     demo = create_demo()
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+    demo.launch(server_name="0.0.0.0", server_port=7860)