Update Gradio_UI.py

Gradio_UI.py

@@ -295,52 +295,59 @@ class GradioUI:
         )
 
     def launch(self, **kwargs):
-        import gradio as gr
+    import gradio as gr
 
-        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 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
+
+    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,
+        )
 
-            # # Добавляем dad jokes UI внутрь блока
-            # input_box = gr.Textbox(label="Enter a word") #added
-            # output_text = gr.Textbox(label="Jokes Found") #added
-            # output_audio = gr.Audio(label="Audio Pronunciation", type="filepath") #added
-            # btn = gr.Button("Get Jokes") #added
-            # btn.click(self.gradio_search_jokes, inputs=input_box, outputs=[output_text, output_audio]) #added
-
-
-            
-            # If an upload folder is provided, enable the upload feature
-            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")
-            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])
+        # 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]
+        )
 
-        
-        demo.launch(debug=True, share=True, **kwargs)
+        # 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"]