Update Gradio_UI.py

Gradio_UI.py

@@ -17,8 +17,16 @@ import mimetypes
 import os
 import re
 import shutil
+import tempfile # Import für temporäre Dateien
 from typing import Optional
 
+# Importiere PIL für Bildverarbeitung (füge 'Pillow' zu requirements.txt hinzu, falls nicht vorhanden)
+try:
+    from PIL import Image
+except ImportError:
+    print("WARNUNG: Pillow nicht installiert. Bildanzeige funktioniert möglicherweise nicht. Führe 'pip install Pillow' aus oder füge 'Pillow' zu requirements.txt hinzu.")
+    Image = None
+
 from smolagents.agent_types import AgentAudio, AgentImage, AgentText, handle_agent_output_types
 from smolagents.agents import ActionStep, MultiStepAgent
 from smolagents.memory import MemoryStep
@@ -31,6 +39,7 @@ def pull_messages_from_step(
     """Extract ChatMessage objects from agent steps with proper nesting"""
     import gradio as gr
 
+    # --- (Rest dieser Funktion bleibt unverändert) ---
     if isinstance(step_log, ActionStep):
         # Output the step number
         step_number = f"Step {step_log.step_number}" if step_log.step_number is not None else ""
@@ -156,22 +165,48 @@ def stream_to_gradio(
     final_answer = step_log  # Last log is the run's final_answer
     final_answer = handle_agent_output_types(final_answer)
 
+    # --- *** HIER IST DIE ÄNDERUNG FÜR DIE BILDANZEIGE *** ---
     if isinstance(final_answer, AgentText):
         yield gr.ChatMessage(
             role="assistant",
             content=f"**Final answer:**\n{final_answer.to_string()}\n",
         )
     elif isinstance(final_answer, AgentImage):
-        yield gr.ChatMessage(
-            role="assistant",
-            content={"path": final_answer.to_string(), "mime_type": "image/png"},
-        )
+        # Versuche, das Bild anzuzeigen
+        try:
+            # Annahme: final_answer.image enthält ein PIL Image Objekt
+            if Image is not None and hasattr(final_answer, 'image') and isinstance(final_answer.image, Image.Image):
+                # Erstelle eine temporäre Datei zum Speichern des Bildes
+                with tempfile.NamedTemporaryFile(delete=False, suffix=".png") as tmpfile:
+                    final_answer.image.save(tmpfile.name, format="PNG")
+                    temp_file_path = tmpfile.name
+                print(f"Bild temporär gespeichert unter: {temp_file_path}") # Debugging-Ausgabe
+
+                # Gib das ChatMessage mit dem Pfad zur temporären Datei zurück
+                yield gr.ChatMessage(
+                    role="assistant",
+                    content={"path": temp_file_path, "mime_type": "image/png"},
+                    # Optional: Füge Text hinzu, falls die Bildanzeige fehlschlägt
+                    # content=f"Generated Image (saved at {temp_file_path}):",
+                )
+            else:
+                 # Fallback, wenn .image nicht das erwartete PIL-Objekt ist oder Pillow fehlt
+                 print("WARNUNG: Konnte Bild nicht als PIL-Objekt interpretieren. Zeige Text-Repräsentation.")
+                 yield gr.ChatMessage(role="assistant", content=f"**Final answer (Image Object):** {str(final_answer)}")
+
+        except Exception as e:
+            print(f"FEHLER beim Verarbeiten/Anzeigen des Bildes: {e}")
+            # Fallback zur Textanzeige bei Fehlern
+            yield gr.ChatMessage(role="assistant", content=f"**Final answer (Error displaying Image):** {str(final_answer)}")
+
     elif isinstance(final_answer, AgentAudio):
+        # Annahme: Funktioniert ähnlich wie bei Bildern, falls nötig anpassen
         yield gr.ChatMessage(
             role="assistant",
             content={"path": final_answer.to_string(), "mime_type": "audio/wav"},
         )
     else:
+        # Fallback für andere Typen
         yield gr.ChatMessage(role="assistant", content=f"**Final answer:** {str(final_answer)}")
 
 
@@ -186,19 +221,31 @@ class GradioUI:
         self.agent = agent
         self.file_upload_folder = file_upload_folder
         if self.file_upload_folder is not None:
-            if not os.path.exists(file_upload_folder):
-                os.mkdir(file_upload_folder)
+            # Erstelle Ordner, wenn er nicht existiert
+            os.makedirs(self.file_upload_folder, exist_ok=True)
+
 
     def interact_with_agent(self, prompt, messages):
         import gradio as gr
 
         messages.append(gr.ChatMessage(role="user", content=prompt))
         yield messages
-        for msg in stream_to_gradio(self.agent, task=prompt, reset_agent_memory=False):
+        # Verwende einen temporären Ordner für generierte Bilder, falls keiner angegeben ist
+        # Dies ist wichtig, damit Gradio auf die Dateien zugreifen kann
+        temp_image_dir = os.path.join(tempfile.gettempdir(), "gradio_agent_images")
+        os.makedirs(temp_image_dir, exist_ok=True)
+
+        # Füge den temporären Ordner zu additional_args hinzu,
+        # damit stream_to_gradio ihn verwenden kann (optional, aber sauberer)
+        # current_additional_args = {"image_output_dir": temp_image_dir}
+
+        # Iteriere durch die Nachrichten vom Agenten
+        for msg in stream_to_gradio(self.agent, task=prompt, reset_agent_memory=False): #, additional_args=current_additional_args):
             messages.append(msg)
             yield messages
         yield messages
 
+    # --- (Rest der Klasse GradioUI bleibt unverändert) ---
     def upload_file(
         self,
         file,
@@ -241,11 +288,17 @@ class GradioUI:
         sanitized_name.append("" + type_to_ext[mime_type])
         sanitized_name = "".join(sanitized_name)
 
-        # Save the uploaded file to the specified folder
-        file_path = os.path.join(self.file_upload_folder, os.path.basename(sanitized_name))
-        shutil.copy(file.name, file_path)
+        # Ensure the upload folder exists
+        if self.file_upload_folder:
+             os.makedirs(self.file_upload_folder, exist_ok=True)
+             # Save the uploaded file to the specified folder
+             file_path = os.path.join(self.file_upload_folder, os.path.basename(sanitized_name))
+             shutil.copy(file.name, file_path)
+             return gr.Textbox(f"File uploaded: {file_path}", visible=True), file_uploads_log + [file_path]
+        else:
+            # Handle case where no upload folder is specified (optional)
+            return gr.Textbox("File upload folder not configured.", visible=True), file_uploads_log
 
-        return gr.Textbox(f"File uploaded: {file_path}", visible=True), file_uploads_log + [file_path]
 
     def log_user_message(self, text_input, file_uploads_log):
         return (
@@ -266,31 +319,67 @@ class GradioUI:
             file_uploads_log = gr.State([])
             chatbot = gr.Chatbot(
                 label="Agent",
-                type="messages",
+                # type="messages", # 'type' ist veraltet, wird automatisch gehandhabt
+                elem_id="chatbot", # Gib dem Chatbot eine ID für CSS/JS (optional)
+                bubble_full_width=False, # Lässt Nachrichten nicht die volle Breite einnehmen (optional)
                 avatar_images=(
-                    None,
-                    "https://huggingface.co/datasets/agents-course/course-images/resolve/main/en/communication/Alfred.png",
+                    None, # Kein Avatar für User
+                    # Standard-Avatar für den Assistenten (URL oder lokaler Pfad)
+                    "[https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo-round-with-padding.png](https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/hf-logo-round-with-padding.png)"
                 ),
-                resizeable=True,
-                scale=1,
+                # height=600, # Setze eine feste Höhe (optional)
+                render=False # Wir rendern es manuell unten
             )
             # 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)
+                with gr.Row(): # Ordne Upload-Elemente an
+                     upload_file = gr.File(label="Upload a file", scale=1) # Nimmt weniger Platz
+                     upload_status = gr.Textbox(label="Upload Status", interactive=False, visible=False, scale=2) # Mehr Platz für Status
+
                 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(
+
+            with gr.Row(): # Ordne Textfeld und Senden-Button an (optional)
+                text_input = gr.Textbox(
+                    lines=1,
+                    label="Chat Message",
+                    placeholder="Type your message here...",
+                    scale=4 # Gib dem Textfeld mehr Breite
+                )
+                # submit_button = gr.Button("Send", scale=1) # Optionaler Senden-Button
+
+            # Rendere den Chatbot hier, damit er über dem Eingabefeld ist
+            chatbot.render()
+
+            # Definiere die Submit-Aktion
+            submit_action = 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])
+                [stored_messages, text_input], # Leere Textbox nach Senden
+            ).then(
+                self.interact_with_agent,
+                [stored_messages, chatbot],
+                [chatbot] # Update Chatbot
+            )
+
+            # Verknüpfe auch den Button mit der Aktion (falls vorhanden)
+            # submit_button.click(
+            #     self.log_user_message,
+            #     [text_input, file_uploads_log],
+            #     [stored_messages, text_input],
+            # ).then(
+            #     self.interact_with_agent,
+            #     [stored_messages, chatbot],
+            #     [chatbot]
+            # )
 
-        demo.launch(debug=True, share=True, **kwargs)
+        # Starte die Demo
+        # Entferne share=True, da es auf Spaces nicht unterstützt wird und Warnungen verursacht
+        # Füge inline=False hinzu, um sicherzustellen, dass es nicht versucht, inline in Notebooks zu laufen
+        demo.launch(debug=True, share=False, inline=False, **kwargs)
 
 
-__all__ = ["stream_to_gradio", "GradioUI"]
+__all__ = ["stream_to_gradio", "GradioUI"]