Agrega capacidad de carga de imágenes a la interfaz de chat en `app.py`. Se implementa la función `encode_image` para convertir imágenes PIL a cadenas base64. La función `respond` se actualiza para manejar mensajes de texto e imágenes, y se crea una nueva función `create_chat_interface` para estructurar la interfaz de usuario con opciones de carga de imágenes.

app.py

@@ -1,11 +1,21 @@
 import gradio as gr
 from huggingface_hub import InferenceClient
+import base64
+from PIL import Image
+import io
+
+
+def encode_image(pil_image):
+    """Convert PIL image to base64 string"""
+    buffered = io.BytesIO()
+    pil_image.save(buffered, format="PNG")
+    return base64.b64encode(buffered.getvalue()).decode("utf-8")
 
 
 def respond(
     message,
     history: list[dict[str, str]],
-    hf_token: gr.OAuthToken,
+    images=None,
 ):
     """
     For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
@@ -16,13 +26,47 @@ def respond(
     temperature = 0.7
     top_p = 0.95
 
-    client = InferenceClient(token=hf_token.token, model="openbmb/MiniCPM-V-4_5")
+    # Try to get the token from environment variable first, then from current request
+    import os
+    token = os.environ.get('HF_TOKEN') or os.environ.get('HUGGINGFACE_API_TOKEN')
+
+    if not token:
+        # Try to get from current Gradio context
+        try:
+            import gradio as gr
+            token = gr.get_current_token()
+        except:
+            pass
+
+    if not token:
+        raise gr.Error("Please log in with HuggingFace to use this chatbot. Click the login button in the sidebar.")
+
+    client = InferenceClient(token=token, model="openbmb/MiniCPM-V-4_5")
 
     messages = [{"role": "system", "content": system_message}]
 
-    messages.extend(history)
+    # Convert history to messages format
+    for msg in history:
+        if isinstance(msg, dict):
+            messages.append(msg)
+
+    # Prepare user content - can include both text and images
+    user_content = []
 
-    messages.append({"role": "user", "content": message})
+    # Add images if provided
+    if images:
+        for img in images:
+            if isinstance(img, dict) and 'path' in img:
+                # Handle file uploads from gallery
+                pil_img = Image.open(img['path']).convert("RGB")
+                base64_image = encode_image(pil_img)
+                user_content.append({"image": f"data:image/png;base64,{base64_image}"})
+
+    # Add text message
+    if message:
+        user_content.append({"text": message})
+
+    messages.append({"role": "user", "content": user_content})
 
     response = ""
 
@@ -42,18 +86,109 @@ def respond(
         yield response
 
 
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
-"""
-chatbot = gr.ChatInterface(
-    respond,
-    type="messages",
-)
+def create_chat_interface():
+    """Create a custom chat interface with image upload capability"""
+    with gr.Blocks() as demo:
+        with gr.Sidebar():
+            gr.LoginButton()
+            # OAuth token will be passed automatically through the request context
+
+        gr.Markdown("# 🤖 Chat with Images")
+        gr.Markdown("Upload images and ask questions about them!")
+
+        with gr.Row():
+            with gr.Column(scale=2):
+                # Image upload area
+                uploaded_images = gr.Gallery(
+                    label="📸 Upload Images",
+                    show_label=True,
+                    columns=3,
+                    rows=2,
+                    height="300px",
+                    allow_preview=True,
+                    interactive=True
+                )
+
+                # Chat message input
+                message_input = gr.Textbox(
+                    label="💬 Your Message",
+                    placeholder="Ask me anything about the images or just chat...",
+                    lines=3,
+                    show_label=True
+                )
+
+            with gr.Column(scale=3):
+                # Chat display
+                chatbot = gr.Chatbot(
+                    label="💬 Chat",
+                    height="500px",
+                    show_label=True
+                )
+
+        with gr.Row():
+            submit_btn = gr.Button("🚀 Send", variant="primary")
+            clear_btn = gr.Button("🗑️ Clear Chat")
+
+        # Store hf_token as state
+        hf_token_state = gr.State()
+
+        def update_token(token):
+            return token
+
+        # Handle message submission
+        def user_message(message, history, images):
+            if not message and not images:
+                return "", history, []
+            return "", history + [{"role": "user", "content": message}], images
+
+        def bot_response(message, history, images):
+            if not message and not images:
+                yield history, images
+                return
+
+            # Add user message to history
+            new_history = history + [{"role": "user", "content": message}]
+
+            # Get bot response
+            bot_message = ""
+            for partial_response in respond(message, history, images):
+                bot_message = partial_response
+                yield new_history + [{"role": "assistant", "content": bot_message}], images
+
+        # Event handlers
+        message_input.submit(
+            user_message,
+            [message_input, chatbot, uploaded_images],
+            [message_input, chatbot, uploaded_images],
+            queue=False
+        ).then(
+            bot_response,
+            [message_input, chatbot, uploaded_images],
+            [chatbot, uploaded_images],
+            queue=True
+        )
+
+        submit_btn.click(
+            user_message,
+            [message_input, chatbot, uploaded_images],
+            [message_input, chatbot, uploaded_images],
+            queue=False
+        ).then(
+            bot_response,
+            [message_input, chatbot, uploaded_images],
+            [chatbot, uploaded_images],
+            queue=True
+        )
+
+        clear_btn.click(
+            lambda: ([], []),
+            outputs=[chatbot, uploaded_images]
+        )
+
+    return demo
 
-with gr.Blocks() as demo:
-    with gr.Sidebar():
-        gr.LoginButton()
-    chatbot.render()
+# Create the interface
+demo = create_chat_interface()
 
 
 if __name__ == "__main__":