Update app.py

app.py

@@ -104,42 +104,79 @@ def transcribe_and_chat(audio):
     return response, audio_path
 
 def create_demo():
-    with gr.Blocks() as demo:
+    with gr.Blocks(theme=gr.themes.Soft()) as demo:
         gr.Markdown(
             """
-            # 🗣️ AI Voice Assistant
-            Welcome to your personal voice assistant! Simply record your voice, and I will respond with both text and speech. The assistant will automatically start listening after playing its response. Powered by advanced AI models.
+            # 🎙️ AI Voice Assistant
+            Welcome to your personal voice assistant! Have a natural conversation with an AI-powered assistant.
+            Simply record your voice, and I'll respond with both text and speech.
             """
         )
 
         with gr.Row():
             with gr.Column(scale=1):
-                audio_input = gr.Audio(type="filepath", label="🎤 Record your voice", elem_id="audio-input")
-                clear_button = gr.Button("Clear", variant="secondary", elem_id="clear-button")
-                voice_volume = gr.Slider(minimum=0, maximum=2, value=1, step=0.1, label="Voice Volume", elem_id="voice-volume")
+                audio_input = gr.Audio(
+                    type="filepath",
+                    label="🎤 Speak your message",
+                    elem_id="audio-input",
+                    source="microphone"
+                )
+                voice_volume = gr.Slider(
+                    minimum=0,
+                    maximum=2,
+                    value=1,
+                    step=0.1,
+                    label="🔊 Assistant Voice Volume",
+                    elem_id="voice-volume"
+                )
 
             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", autoplay=True, elem_id="audio-output")
+                chat_output = gr.Chatbot(
+                    label="Conversation",
+                    elem_id="chat-output",
+                    height=400
+                )
+                audio_output = gr.Audio(
+                    label="🔈 AI Voice Response",
+                    autoplay=True,
+                    elem_id="audio-output"
+                )
 
-        # Add some spacing and a divider
-        gr.Markdown("---")
+        with gr.Row():
+            clear_button = gr.Button("🗑️ Clear Chat", variant="secondary", elem_id="clear-button")
+            submit_button = gr.Button("🚀 Submit", variant="primary", elem_id="submit-button")
 
         # Processing the audio input
-        def process_audio(audio, volume):
+        def process_audio(audio, volume, history):
             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)
+                return history + [("No audio detected. Please try recording again.", None)], None
+            
+            transcribed_text = whisper_speech_to_text(audio)
+            if not transcribed_text:
+                return history + [("Sorry, I couldn't understand the audio. Please try again.", None)], None
+            
+            response, audio_path = asyncio.run(chat_with_ai(transcribed_text))
+            
             # 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
-
-        audio_input.change(process_audio, inputs=[audio_input, voice_volume], outputs=[chat_output, audio_output])
-        clear_button.click(lambda: (None, None), None, [chat_output, audio_output])
+            
+            new_history = history + [(transcribed_text, response)]
+            return new_history, adjusted_audio_path
+
+        submit_button.click(
+            process_audio,
+            inputs=[audio_input, voice_volume, chat_output],
+            outputs=[chat_output, audio_output]
+        )
+        
+        clear_button.click(
+            lambda: ([], None),
+            outputs=[chat_output, audio_output]
+        )
 
-        # JavaScript to handle autoplay, automatic submission, and auto-listen
+        # JavaScript to handle autoplay and auto-listen
         demo.load(None, js="""
             function() {
                 var recordButton;
@@ -163,24 +200,17 @@ def create_demo():
                     }
                 }
 
-                document.querySelector("audio").addEventListener("ended", function() {
+                document.querySelector("#audio-output").addEventListener("ended", function() {
                     setTimeout(startListening, 500);
                 });
                 
                 function playAssistantAudio() {
-                    var audioElements = document.querySelectorAll('audio');
-                    if (audioElements.length > 1) {
-                        var assistantAudio = audioElements[1];
-                        if (assistantAudio) {
-                            assistantAudio.play();
-                        }
+                    var audioElement = document.querySelector('#audio-output audio');
+                    if (audioElement) {
+                        audioElement.play();
                     }
                 }
 
-                document.addEventListener('gradioAudioLoaded', function(event) {
-                    playAssistantAudio();
-                });
-
                 document.addEventListener('gradioUpdated', function(event) {
                     setTimeout(playAssistantAudio, 100);
                 });