Update app.py

app.py

@@ -98,17 +98,27 @@ def transcribe_and_chat(audio):
     return response, audio_path
 
 def create_demo():
-    with gr.Blocks() as demo:
-        gr.Markdown("# AI Voice Assistant")
+    with gr.Blocks(theme="compact") 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. Powered by advanced AI models.
+            """
+        )
 
         with gr.Row():
             with gr.Column(scale=1):
-                audio_input = gr.Audio(type="filepath", label="Press 'Record' to Speak")
+                audio_input = gr.Audio(type="filepath", label="🎤 Record your voice", elem_id="audio-input", source="microphone")
+                clear_button = gr.Button("Clear", variant="secondary", elem_id="clear-button")
 
             with gr.Column(scale=1):
-                chat_output = gr.Textbox(label="AI Response")
-                audio_output = gr.Audio(label="AI Voice Response", autoplay=True)
+                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")
+
+        # Add some spacing and a divider
+        gr.Markdown("---")
 
+        # Processing the audio input
         def process_audio(audio):
             logging.info(f"Received audio: {audio}")
             if audio is None:
@@ -117,6 +127,10 @@ def create_demo():
             logging.info(f"Response: {response}, Audio path: {audio_path}")
             return response, audio_path, None  # Return None to clear the audio input
 
+        audio_input.change(process_audio, inputs=[audio_input], 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 submission
         demo.load(None, js="""
             function() {
                 document.querySelector("audio").addEventListener("stop", function() {
@@ -145,11 +159,9 @@ def create_demo():
             }
         """)
 
-        audio_input.change(process_audio, inputs=[audio_input], outputs=[chat_output, audio_output, audio_input])
-
     return 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)