Update Gradio_UI.py

Gradio_UI.py

@@ -295,59 +295,59 @@ class GradioUI:
         )
 
     def launch(self, **kwargs):
-    import gradio as gr
+        import gradio as gr
 
-    # NEW: Add a helper function to extract audio file path from stored messages
-    def extract_audio(messages):
-        if not messages:
+        # NEW: Add a helper function to extract audio file path from stored messages
+        def extract_audio(messages):
+            if not messages:
+                return None
+            last_message = messages[-1]
+            if isinstance(last_message.content, dict):
+                mime = last_message.content.get("mime_type", "")
+                if mime.startswith("audio"):
+                    return last_message.content.get("path")
             return None
-        last_message = messages[-1]
-        if isinstance(last_message.content, dict):
-            mime = last_message.content.get("mime_type", "")
-            if mime.startswith("audio"):
-                return last_message.content.get("path")
-        return None
-
-    with gr.Blocks(fill_height=True) as demo:
-        stored_messages = gr.State([])
-        file_uploads_log = gr.State([])
-        chatbot = gr.Chatbot(
-            label="Agent",
-            type="messages",
-            avatar_images=(
-                None,
-                "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
-            ),
-            resizeable=True,
-            scale=1,
-        )
-
-        # NEW: Add a dedicated audio player component below the chatbot.
-        audio_player = gr.Audio(label="Audio Pronunciation", type="filepath")
 
-        if self.file_upload_folder is not None:
-            upload_file = gr.File(label="Upload a file")
-            upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
-            upload_file.change(
-                self.upload_file,
-                [upload_file, file_uploads_log],
-                [upload_status, file_uploads_log],
+        with gr.Blocks(fill_height=True) as demo:
+            stored_messages = gr.State([])
+            file_uploads_log = gr.State([])
+            chatbot = gr.Chatbot(
+                label="Agent",
+                type="messages",
+                avatar_images=(
+                    None,
+                    "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
+                ),
+                resizeable=True,
+                scale=1,
             )
-        text_input = gr.Textbox(lines=1, label="Chat Message")
-        # Chain the functions: log user message -> interact with agent -> extract audio for player
-        text_input.submit(
-            self.log_user_message,
-            [text_input, file_uploads_log],
-            [stored_messages, text_input],
-        ).then(
-            self.interact_with_agent, [stored_messages, chatbot], [chatbot]
-        ).then(
-            fn=extract_audio, inputs=[stored_messages], outputs=[audio_player]
-        )
 
-        # Optionally, you can arrange the components as you like, for example:
-        # gr.Column([chatbot, audio_player, text_input])
-    demo.launch(debug=True, share=True, **kwargs)
+            # NEW: Add a dedicated audio player component below the chatbot.
+            audio_player = gr.Audio(label="Audio Pronunciation", type="filepath")
+    
+            if self.file_upload_folder is not None:
+                upload_file = gr.File(label="Upload a file")
+                upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False)
+                upload_file.change(
+                    self.upload_file,
+                    [upload_file, file_uploads_log],
+                    [upload_status, file_uploads_log],
+                )
+            text_input = gr.Textbox(lines=1, label="Chat Message")
+            # Chain the functions: log user message -> interact with agent -> extract audio for player
+            text_input.submit(
+                self.log_user_message,
+                [text_input, file_uploads_log],
+                [stored_messages, text_input],
+            ).then(
+                self.interact_with_agent, [stored_messages, chatbot], [chatbot]
+            ).then(
+                fn=extract_audio, inputs=[stored_messages], outputs=[audio_player]
+            )
+    
+            # Optionally, you can arrange the components as you like, for example:
+            # gr.Column([chatbot, audio_player, text_input])
+        demo.launch(debug=True, share=True, **kwargs)
 
 
 __all__ = ["stream_to_gradio", "GradioUI"]