Update app.py

app.py

@@ -104,43 +104,27 @@ def transcribe_and_chat(audio):
     return response, audio_path
 
 def create_demo():
-    with gr.Blocks(css="""
-        .container { 
-            background-color: #f0f4f7; 
-            padding: 20px; 
-            border-radius: 10px; 
-        }
-        .gr-button { 
-            background-color: #4CAF50; 
-            color: white; 
-            padding: 10px 24px; 
-            border: none; 
-            border-radius: 5px; 
-            cursor: pointer; 
-        }
-        .gr-button:hover { 
-            background-color: #45a049; 
-        }
-    """) as demo:
+    with gr.Blocks() as demo:
         gr.Markdown(
             """
-            <div style="text-align: center;">
-                <h1 style="color: #333;">🗣️ AI Voice Assistant</h1>
-                <p>Record your voice, and the assistant will respond with both text and speech. Powered by advanced AI models.</p>
-            </div>
+            # 🗣️ 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().style(margin_top="20px"):
+        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", style={"margin-top": "10px"})
+                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")
 
             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")
 
+        # Add some spacing and a divider
+        gr.Markdown("---")
+
         # Processing the audio input
         def process_audio(audio, volume):
             logging.info(f"Received audio: {audio}")
@@ -163,7 +147,7 @@ def create_demo():
                         document.querySelector('button[title="Submit"]').click();
                     }, 500);
                 });
-
+                
                 function playAssistantAudio() {
                     var audioElements = document.querySelectorAll('audio');
                     if (audioElements.length > 1) {
@@ -197,4 +181,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)