Update app.py

app.py

@@ -120,7 +120,7 @@ def create_demo():
 
             with gr.Column(scale=1):
                 chat_output = gr.Textbox(label="💬 AI Response", elem_id="chat-output", lines=5, interactive=False)
-                audio_output = gr.Audio(label="🔊 AI Voice Response", elem_id="audio-output")
+                audio_output = gr.Audio(label="🔊 AI Voice Response", autoplay=True, elem_id="audio-output")
 
         # Add some spacing and a divider
         gr.Markdown("---")
@@ -129,63 +129,39 @@ def create_demo():
         def process_audio(audio, volume):
             logging.info(f"Received audio: {audio}")
             if audio is None:
-                return "No audio detected. Please try recording again.", None
+                return "No audio detected. Please try recording again.", None, 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
+            return response, adjusted_audio_path, None  # Return None to clear the audio input
 
-        audio_input.change(process_audio, inputs=[audio_input, voice_volume], outputs=[chat_output, audio_output])
+        audio_input.change(process_audio, inputs=[audio_input, voice_volume], outputs=[chat_output, audio_output, audio_input])
         clear_button.click(lambda: (None, None, None), None, [chat_output, audio_output, audio_input])
 
-        # JavaScript to handle autoplay and automatic clearing
+        # JavaScript to handle autoplay and automatic submission
         demo.load(None, js="""
             function() {
-                let isPlaying = false;
-
+                document.querySelector("audio").addEventListener("stop", function() {
+                    setTimeout(function() {
+                        document.querySelector('button[title="Submit"]').click();
+                    }, 500);
+                });
+                
                 function playAssistantAudio() {
                     var audioElements = document.querySelectorAll('audio');
                     if (audioElements.length > 1) {
                         var assistantAudio = audioElements[1];
                         if (assistantAudio) {
-                            isPlaying = true;
                             assistantAudio.play();
-                            assistantAudio.onended = function() {
-                                isPlaying = false;
-                                clearAllInputs();
-                            };
                         }
                     }
                 }
 
-                function clearAllInputs() {
-                    if (!isPlaying) {
-                        document.querySelector('#clear-button').click();
-                    }
-                }
-
-                // Automatically play the assistant's audio when it's loaded
-                const audioOutputObserver = new MutationObserver((mutations) => {
-                    mutations.forEach((mutation) => {
-                        if (mutation.type === 'childList') {
-                            const addedNodes = mutation.addedNodes;
-                            addedNodes.forEach((node) => {
-                                if (node.tagName === 'AUDIO') {
-                                    setTimeout(() => {
-                                        node.play();
-                                    }, 100);
-                                }
-                            });
-                        }
-                    });
+                document.addEventListener('gradioAudioLoaded', function(event) {
+                    playAssistantAudio();
                 });
 
-                const audioOutputElement = document.querySelector('#audio-output');
-                if (audioOutputElement) {
-                    audioOutputObserver.observe(audioOutputElement, { childList: true, subtree: true });
-                }
-
                 document.addEventListener('gradioUpdated', function(event) {
                     setTimeout(playAssistantAudio, 100);
                 });
@@ -194,9 +170,7 @@ def create_demo():
                 document.addEventListener("visibilitychange", function() {
                     var audioElements = document.querySelectorAll('audio');
                     audioElements.forEach(function(audio) {
-                        if (isPlaying) {
-                            audio.play();
-                        }
+                        audio.play();
                     });
                 });
             }