Actualiza `app.py` para integrar la API de Gemini a través de OpenAI. Se elimina la dependencia de `huggingface_hub` y se refactoriza la función `respond` para manejar mensajes multimodales. Se implementa la función `_extract_text_and_files` para extraer texto y archivos adjuntos de los mensajes. Además, se crea una interfaz de chat personalizada que guía a los usuarios en la creación de claves API de Gmail y Outlook.

app.py

@@ -1,197 +1,162 @@
+import os
 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]],
-    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
+from openai import OpenAI
+from dotenv import load_dotenv
+
+load_dotenv()
+
+# Configure Gemini via OpenAI-compatible endpoint
+GEMINI_BASE_URL = "https://generativelanguage.googleapis.com/v1beta/openai/"
+GEMINI_MODEL = "gemini-2.5-flash"
+_api_key = os.getenv("GEMINI_API_KEY")
+_client = OpenAI(api_key=_api_key, base_url=GEMINI_BASE_URL) if _api_key else None
+
+
+def _extract_text_and_files(message):
+    """Extract user text and attached files from a multimodal message value."""
+    if isinstance(message, str):
+        return message, []
+    # Common multimodal shapes: dict with keys, or list of parts
+    files = []
+    text_parts = []
+    try:
+        if isinstance(message, dict):
+            if "text" in message:
+                text_parts.append(message.get("text") or "")
+            if "files" in message and message["files"]:
+                files = message["files"] or []
+        elif isinstance(message, (list, tuple)):
+            for part in message:
+                if isinstance(part, str):
+                    text_parts.append(part)
+                elif isinstance(part, dict):
+                    # Heuristic: file-like dicts may have 'path' or 'name'
+                    if any(k in part for k in ("path", "name", "mime_type")):
+                        files.append(part)
+                    elif "text" in part:
+                        text_parts.append(part.get("text") or "")
+    except Exception:
+        pass
+    text_combined = " ".join([t for t in text_parts if t])
+    return text_combined, files
+
+
+def respond(message, history: list[tuple[str, str]]):
+    """Stream assistant reply via Gemini using OpenAI-compatible API.
+
+    Yields partial text chunks so the UI shows a live stream.
     """
-    # Configuración por defecto
-    system_message = "You are a friendly Chatbot."
-    max_tokens = 512
-    temperature = 0.7
-    top_p = 0.95
-
-    # 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}]
-
-    # 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 = []
-
-    # 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 = ""
-
-    for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
-    ):
-        choices = message.choices
-        token = ""
-        if len(choices) and choices[0].delta.content:
-            token = choices[0].delta.content
-
-        response += token
-        yield response
-
-
-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
-        )
+    user_text, files = _extract_text_and_files(message)
 
-        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
+    if not _client:
+        yield (
+            "Gemini API key not configured. Set environment variable GEMINI_API_KEY "
+            "and restart the app."
         )
-
-        clear_btn.click(
-            lambda: ([], []),
-            outputs=[chatbot, uploaded_images]
+        return
+
+    # Build OpenAI-style messages from history
+    messages = [
+        {
+            "role": "system",
+            "content": (
+                "You are a helpful assistant that guides users to create Gmail and Outlook API keys. "
+                "Answer in Spanish unless asked otherwise."
+            ),
+        }
+    ]
+    for user_turn, assistant_turn in history or []:
+        if user_turn:
+            messages.append({"role": "user", "content": user_turn})
+        if assistant_turn:
+            messages.append({"role": "assistant", "content": assistant_turn})
+
+    # Include a short mention about attached files (no uploading to remote in this demo)
+    if files:
+        filenames = []
+        for f in files:
+            if isinstance(f, dict):
+                name = f.get("name") or f.get("path") or "file"
+                filenames.append(str(name))
+        if filenames:
+            user_text = (user_text or "").strip()
+            user_text = f"{user_text}\n\n[Adjuntos: {', '.join(filenames)}]" if user_text else f"[Adjuntos: {', '.join(filenames)}]"
+
+    # If user provided no text, provide a nudge
+    final_user_text = user_text or "Quiero ayuda para crear una API Key."
+    messages.append({"role": "user", "content": final_user_text})
+
+    try:
+        stream = _client.chat.completions.create(
+            model=GEMINI_MODEL,
+            messages=messages,
+            stream=True,
         )
 
-    return demo
-
-# Create the interface
-demo = create_chat_interface()
+        accumulated = ""
+        for chunk in stream:
+            try:
+                choice = chunk.choices[0]
+                delta_text = None
+                # OpenAI v1: delta.content
+                if getattr(choice, "delta", None) is not None:
+                    delta_text = getattr(choice.delta, "content", None)
+                # Fallback: some providers emit message.content in chunks
+                if delta_text is None and getattr(choice, "message", None) is not None:
+                    delta_text = choice.message.get("content") if isinstance(choice.message, dict) else None
+                if not delta_text:
+                    continue
+                accumulated += delta_text
+                yield accumulated
+            except Exception:
+                continue
+
+        if not accumulated:
+            yield "(Sin contenido de respuesta)"
+    except Exception as e:
+        yield f"Ocurrió un error al llamar a Gemini: {e}"
+
+
+chat = gr.ChatInterface(
+    fn=respond,
+    # default type keeps string message, keeps compatibility across versions
+    title="Gmail & Outlook API Helper",
+    description="Chat similar a ChatGPT para guiarte en la creación de API Keys.",
+    textbox=gr.MultimodalTextbox(file_types=[".pdf", ".txt"]),
+    multimodal=True,
+    fill_height=True,
+    examples=[
+        "¿Cómo creo una API Key de Gmail?",
+        "Guíame para obtener credenciales de Outlook",
+        "¿Qué permisos necesito para enviar correos?",
+    ],
+    theme=gr.themes.Monochrome(),
+    css="""
+/* Force dark appearance similar to ChatGPT */
+:root, .gradio-container { color-scheme: dark; }
+body, .gradio-container { background: #0b0f16; }
+.prose, .gr-text, .gr-form { color: #e5e7eb; }
+/* Chat bubbles */
+.message.user { background: #111827; border-radius: 10px; }
+.message.assistant { background: #0f172a; border-radius: 10px; }
+/* Input */
+textarea, .gr-textbox textarea {
+  background: #0f172a !important;
+  color: #e5e7eb !important;
+  border-color: #1f2937 !important;
+}
+/* Buttons */
+button {
+  background: #1f2937 !important;
+  color: #e5e7eb !important;
+  border: 1px solid #374151 !important;
+}
+button:hover { background: #374151 !important; }
+""",
+)
 
 
 if __name__ == "__main__":
-    demo.launch(
-        debug=True,  # Habilita recarga automática y debugging
-    )
+    chat.launch()
+
+