Upload 3 files

app.py

@@ -0,0 +1,1125 @@
+"""
+Gemma Explorer — Gradio app to explore and chat with the full Gemma model family.
+Powered by Google DeepMind models on ZeroGPU (NVIDIA H200).
+"""
+
+import os
+import gc
+import json
+import datetime
+import html as _html
+import gradio as gr
+import torch
+import spaces
+from transformers import (
+    AutoTokenizer,
+    AutoProcessor,
+    AutoModelForCausalLM,
+    TextIteratorStreamer,
+)
+from threading import Thread
+from PIL import Image
+import numpy as np
+from models_data import MODELS, FAMILIES, get_models_by_family
+
+_HF_TOKEN = os.environ.get("HF_TOKEN")
+if _HF_TOKEN:
+    from huggingface_hub import login
+    # Se agrega add_to_git_credential=False para evitar advertencias de sobreescritura de token
+    login(token=_HF_TOKEN, add_to_git_credential=False)
+
+try:
+    import torchvision  # noqa: F401
+except ImportError:
+    import subprocess, sys
+    subprocess.run(
+        [sys.executable, "-m", "pip", "install", "torchvision", "-q", "--no-input"],
+        check=True,
+    )
+
+try:
+    from transformers import AutoModelForMultimodalLM
+    _HAS_MULTIMODAL = True
+except ImportError:
+    _HAS_MULTIMODAL = False
+    AutoModelForMultimodalLM = None
+
+
+# ── Model state ───────────────────────────────────────────────────────────────
+
+_model      = None
+_processor  = None
+_current_id = None
+
+
+def _purge_model():
+    """Unload current model from CPU memory. Never touches CUDA directly —
+    CUDA cleanup happens inside @spaces.GPU contexts only."""
+    global _model, _processor, _current_id
+    if _model is not None:
+        del _model
+        _model = None
+    if _processor is not None:
+        del _processor
+        _processor = None
+    _current_id = None
+    gc.collect()
+
+
+def _load_weights(model_id: str):
+    """Load model weights. Always purges previous model first, no exceptions."""
+    global _model, _processor, _current_id
+
+    meta   = MODELS[model_id]
+    loader = meta["loader_type"]
+    dtype  = meta["torch_dtype"]
+
+    _purge_model()
+
+    if loader == "multimodal":
+        if not _HAS_MULTIMODAL:
+            raise ImportError("AutoModelForMultimodalLM not available. Run: pip install -U transformers")
+        _processor = AutoProcessor.from_pretrained(model_id, token=_HF_TOKEN)
+        _model = AutoModelForMultimodalLM.from_pretrained(model_id, torch_dtype=dtype, token=_HF_TOKEN)
+    elif loader == "vision_causal":
+        _processor = AutoProcessor.from_pretrained(model_id, token=_HF_TOKEN)
+        _model = AutoModelForCausalLM.from_pretrained(model_id, torch_dtype=dtype, token=_HF_TOKEN)
+    else:
+        _processor = AutoTokenizer.from_pretrained(model_id, token=_HF_TOKEN)
+        _model = AutoModelForCausalLM.from_pretrained(model_id, torch_dtype=dtype, token=_HF_TOKEN)
+
+    _model.eval()
+    _current_id = model_id
+
+
+def load_model_stream(model_id: str, card_html_list_len: int):
+    """
+    Two-phase generator so the loading notice is *visibly rendered* before
+    the blocking from_pretrained() call starts.
+    """
+    meta = MODELS[model_id]
+    n = card_html_list_len
+
+    # ── Phase 1: show loading notice ──────────────────────────────────────────
+    loading = _loading_html(meta["name"])
+    yield (
+        gr.update(visible=True, value=loading),
+        gr.update(visible=True, value=loading),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        gr.update(),
+        *([gr.update()] * n),
+    )
+
+    # ── Phase 2: actual load ──────────────────────────────────────────────────
+    try:
+        _load_weights(model_id)
+        status  = _make_status_html(meta, state="ready")
+        inline  = _chat_inline_status(loaded=True, name=meta["name"])
+        cards   = [
+            gr.update(value=_card_html(mid, m, active=(mid == model_id)))
+            for mid, m in MODELS.items()
+        ]
+        yield (
+            gr.update(visible=False),
+            gr.update(visible=False),
+            status,
+            gr.update(selected="single"),
+            gr.update(visible=meta["supports_vision"]),
+            gr.update(value=model_id),
+            [],
+            inline,
+            *cards,
+        )
+    except Exception as exc:
+        error = (f'<div class="status-error">Error loading '
+                 f'<strong>{_html.escape(meta["name"])}</strong>: '
+                 f'{_html.escape(str(exc))}</div>')
+        yield (
+            gr.update(visible=False),
+            gr.update(visible=False),
+            error,
+            gr.update(), gr.update(), gr.update(), gr.update(), gr.update(),
+            *([gr.update()] * n),
+        )
+
+
+# ── Inference ─────────────────────────────────────────────────────────────────
+
+def _run_inference(message: str, image, max_new_tokens: int, temperature: float):
+    global _model, _processor, _current_id
+
+    if _model is None or _current_id is None or _processor is None:
+        yield "No model loaded. Go to Explore Models and click Load & Chat."
+        return
+
+    if _current_id not in MODELS:
+        _purge_model()
+        yield "Model state corrupted — please reload the model from Explore Models."
+        return
+
+    torch.cuda.empty_cache()
+
+    max_new_tokens = max(64, min(int(max_new_tokens), 2048))
+    temperature    = max(0.0, min(float(temperature), 1.5))
+
+    meta   = MODELS[_current_id]
+    loader = meta["loader_type"]
+    device = "cuda"
+    _model.to(device)
+
+    pil_image = None
+    if image is not None:
+        try:
+            pil_image = Image.fromarray(image) if isinstance(image, np.ndarray) else image
+        except Exception:
+            pil_image = None
+
+    try:
+        if loader == "multimodal":
+            content = []
+            if pil_image is not None:
+                content.append({"type": "image", "image": pil_image})
+            content.append({"type": "text", "text": message})
+            messages = [{"role": "user", "content": content}]
+            inputs = _processor.apply_chat_template(
+                messages, tokenize=True, return_dict=True,
+                return_tensors="pt", add_generation_prompt=True,
+            ).to(device)
+
+        elif loader == "vision_causal":
+            if pil_image is not None:
+                content = [{"type": "image"}, {"type": "text", "text": message}]
+                messages = [{"role": "user", "content": content}]
+            else:
+                messages = [{"role": "user", "content": message}]
+            text   = _processor.apply_chat_template(messages, add_generation_prompt=True)
+            inputs = _processor(text=text, images=pil_image, return_tensors="pt").to(device)
+
+        else:
+            if pil_image is not None:
+                message = "[This model does not support images] " + message
+            messages = [{"role": "user", "content": message}]
+            text   = _processor.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
+            inputs = _processor(text, return_tensors="pt").to(device)
+
+    except Exception as exc:
+        yield f"Error preparing inputs: {exc}"
+        return
+
+    tok      = getattr(_processor, "tokenizer", _processor)
+    streamer = TextIteratorStreamer(tok, skip_prompt=True, skip_special_tokens=True, timeout=60)
+
+    allowed_keys = {"input_ids", "attention_mask", "token_type_ids", "pixel_values",
+                    "image_sizes", "pixel_attention_mask", "image_position_ids",
+                    "pixel_position_ids", "token_type_ids_for_images"}
+    filtered_inputs = {k: v for k, v in inputs.items() if k in allowed_keys}
+
+    if "image_position_ids" in filtered_inputs:
+        ipi = filtered_inputs["image_position_ids"]
+        if not isinstance(ipi, torch.Tensor):
+            filtered_inputs["image_position_ids"] = torch.tensor(ipi, device=device)
+        elif ipi.dtype == torch.bool:
+            filtered_inputs["image_position_ids"] = ipi.long()
+
+    gen_kwargs: dict = {**filtered_inputs, "streamer": streamer, "max_new_tokens": max_new_tokens}
+    if temperature > 0.01:
+        gen_kwargs.update({"do_sample": True, "temperature": temperature, "top_p": 0.95})
+    else:
+        gen_kwargs["do_sample"] = False
+
+    thread = Thread(target=_model.generate, kwargs=gen_kwargs)
+    thread.start()
+
+    partial = ""
+    for token in streamer:
+        partial += token
+        yield partial
+    thread.join()
+
+
+@spaces.GPU(duration=120)
+def infer_large(message, image, max_new_tokens, temperature):
+    yield from _run_inference(message, image, max_new_tokens, temperature)
+
+
+@spaces.GPU(duration=180, size="xlarge")
+def infer_xlarge(message, image, max_new_tokens, temperature):
+    yield from _run_inference(message, image, max_new_tokens, temperature)
+
+
+def respond(message: str, image, max_new_tokens: int, temperature: float, history: list):
+    if not message.strip() and image is None:
+        yield history, gr.update()
+        return
+
+    if _current_id is None:
+        yield history + [
+            {"role": "user",      "content": message or "[image attached]"},
+            {"role": "assistant", "content": "Please load a model first from the **Explore Models** tab."},
+        ], gr.update()
+        return
+
+    new_history = history + [{"role": "user", "content": message or "[image attached]"}]
+    yield new_history, gr.update()
+
+    meta     = MODELS[_current_id]
+    infer_fn = infer_xlarge if meta["gpu_size"] == "xlarge" else infer_large
+
+    partial = ""
+    for chunk in infer_fn(message, image, max_new_tokens, temperature):
+        partial = chunk
+        yield new_history + [{"role": "assistant", "content": partial}], gr.update()
+
+    yield new_history + [{"role": "assistant", "content": partial}], gr.update(value=None)
+
+
+def export_chat(history: list) -> str:
+    if not history:
+        return ""
+    model_name = MODELS[_current_id]["name"] if _current_id else "unknown"
+    lines = [
+        "# Gemma Explorer — Chat Export",
+        f"Model: {model_name}",
+        f"Date: {datetime.datetime.now().strftime('%Y-%m-%d %H:%M')}",
+        "---", "",
+    ]
+    for msg in history:
+        role = "**You**" if msg["role"] == "user" else f"**{model_name}**"
+        lines.append(f"{role}: {msg['content']}")
+        lines.append("")
+    return "\n".join(lines)
+
+
+# ── Dual-chat inference ───────────────────────────────────────────────────────
+
+def respond_dual(message: str, image,
+                 max_new_tokens: int, temperature: float,
+                 sys_a: str, sys_b: str,
+                 model_a_id: str, model_b_id: str,
+                 hist_a: list, hist_b: list):
+    if not message.strip() and image is None:
+        yield hist_a, hist_b
+        return
+
+    user_msg  = message or "[image attached]"
+
+    try:
+        _load_weights(model_a_id)
+    except Exception as exc:
+        _purge_model()
+        yield (hist_a + [{"role": "user", "content": user_msg},
+                         {"role": "assistant", "content": f"Failed to load {model_a_id}: {exc}"}],
+               hist_b)
+        return
+
+    new_hist_a = hist_a + [{"role": "user", "content": user_msg}]
+    yield new_hist_a, hist_b
+
+    meta_a    = MODELS[model_a_id]
+    infer_fn  = infer_xlarge if meta_a["gpu_size"] == "xlarge" else infer_large
+    full_a    = (sys_a.strip() + "\n\n" + message) if sys_a.strip() else message
+    partial_a = ""
+    for chunk in infer_fn(full_a, image, max_new_tokens, temperature):
+        partial_a = chunk
+        yield new_hist_a + [{"role": "assistant", "content": partial_a}], hist_b
+    hist_a = new_hist_a + [{"role": "assistant", "content": partial_a}]
+
+    try:
+        _load_weights(model_b_id)
+    except Exception as exc:
+        _purge_model()
+        yield (hist_a,
+               hist_b + [{"role": "user", "content": user_msg},
+                          {"role": "assistant", "content": f"Failed to load {model_b_id}: {exc}"}])
+        return
+
+    new_hist_b = hist_b + [{"role": "user", "content": user_msg}]
+    yield hist_a, new_hist_b
+
+    meta_b    = MODELS[model_b_id]
+    infer_fn  = infer_xlarge if meta_b["gpu_size"] == "xlarge" else infer_large
+    full_b    = (sys_b.strip() + "\n\n" + message) if sys_b.strip() else message
+    partial_b = ""
+    for chunk in infer_fn(full_b, image, max_new_tokens, temperature):
+        partial_b = chunk
+        yield hist_a, new_hist_b + [{"role": "assistant", "content": partial_b}]
+    yield hist_a, new_hist_b + [{"role": "assistant", "content": partial_b}]
+
+
+# ── CSS ───────────────────────────────────────────────────────────────────────
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
+
+:root {
+    --bg:         #080d18;
+    --surface:    #0f1523;
+    --surface2:   #161e30;
+    --border:     rgba(80,110,220,0.16);
+    --blue:       #4f7ef8;
+    --blue-dim:   #3a5fc4;
+    --purple:     #8b72f0;
+    --purple-dim: #6a55cc;
+    --text:       #dde4f4;
+    --text-dim:   #7a86a8;
+    --green:      #34d399;
+    --red:        #f87171;
+    --amber:      #fbbf24;
+    --radius:     13px;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+.gradio-container {
+    font-family: 'Inter', sans-serif !important;
+    background: var(--bg) !important;
+    max-width: 1420px !important;
+    color: var(--text) !important;
+}
+
+footer, .gr-prose { display: none !important; }
+
+.gemma-hero {
+    position: relative;
+    background: linear-gradient(150deg, #06091566 0%, #0b1225 60%, #0d1530 100%);
+    border-radius: 18px; padding: 42px 52px; margin-bottom: 6px;
+    overflow: hidden; border: 1px solid var(--border);
+}
+.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
+.hero-grid {
+    position: absolute; inset: 0;
+    background-image:
+        linear-gradient(rgba(79,126,248,0.055) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(79,126,248,0.055) 1px, transparent 1px);
+    background-size: 44px 44px;
+    animation: grid-drift 22s linear infinite;
+}
+@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 44px 44px; } }
+.orb {
+    position: absolute; border-radius: 50%;
+    filter: blur(70px); opacity: 0.16;
+    animation: float-orb var(--dur, 13s) ease-in-out infinite var(--delay, 0s);
+}
+.orb-1 { width: 400px; height: 400px; background: var(--blue);   top: -130px; right: -60px;  --dur:15s; --delay:0s; }
+.orb-2 { width: 280px; height: 280px; background: var(--purple); bottom: -90px; left: 12%;   --dur:12s; --delay:-4s; }
+.orb-3 { width: 200px; height: 200px; background: #60a5fa;        top: 35%; left: 52%;        --dur:18s; --delay:-7s; }
+@keyframes float-orb {
+    0%,100% { transform: translate(0,0) scale(1); }
+    33%     { transform: translate(16px,-20px) scale(1.05); }
+    66%     { transform: translate(-10px,12px) scale(0.96); }
+}
+.hero-stars { position: absolute; inset: 0; }
+.star {
+    position: absolute; width: 2px; height: 2px;
+    background: #fff; border-radius: 50%; opacity: 0;
+    animation: twinkle var(--dur,3s) ease-in-out infinite var(--delay,0s);
+}
+@keyframes twinkle {
+    0%,100% { opacity:0; transform:scale(.8); }
+    50%     { opacity:.65; transform:scale(1.3); }
+}
+.hero-inner   { position: relative; z-index: 1; }
+.hero-top-bar { display: flex; align-items: center; margin-bottom: 22px; }
+.hero-eyebrow {
+    display: inline-flex; align-items: center; gap: 9px;
+    background: rgba(79,126,248,0.1); border: 1px solid rgba(79,126,248,0.28);
+    border-radius: 20px; padding: 5px 16px;
+    font-size: 11px; font-weight: 600; color: #7aabf8; letter-spacing: 1px; text-transform: uppercase;
+}
+.hero-dot-pulse {
+    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
+    animation: pulse-ring 2s ease-out infinite;
+}
+@keyframes pulse-ring {
+    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
+    70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
+    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
+}
+.hero-title {
+    font-family: 'Space Grotesk', sans-serif;
+    font-size: 54px; font-weight: 700; color: #fff;
+    line-height: 1.05; margin: 0 0 14px; letter-spacing: -2px;
+}
+.hero-title span {
+    background: linear-gradient(120deg, var(--blue) 20%, var(--purple) 80%);
+    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+}
+.hero-subtitle {
+    font-size: 15px; color: rgba(221,228,244,0.55);
+    margin: 0 0 28px; max-width: 530px; line-height: 1.7; font-weight: 400;
+}
+.hero-chips  { display: flex; flex-wrap: wrap; gap: 7px; }
+.hero-chip {
+    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.09);
+    border-radius: 7px; padding: 5px 12px;
+    font-size: 12px; color: rgba(221,228,244,0.7); font-weight: 500;
+}
+.hero-chip strong { color: #fff; }
+.hero-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
+.legend-dot  { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgba(221,228,244,0.5); font-weight: 500; }
+.legend-swatch { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
+
+.tab-nav { background: transparent !important; border-bottom: 1px solid var(--border) !important; gap: 2px !important; padding: 0 4px !important; margin-top: 6px !important; }
+.tab-nav button { font-family: 'Inter', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; border-radius: 8px 8px 0 0 !important; padding: 10px 22px !important; color: var(--text-dim) !important; border: none !important; background: transparent !important; transition: all 0.2s !important; letter-spacing: 0.2px !important; }
+.tab-nav button:hover { color: var(--text) !important; background: rgba(79,126,248,0.07) !important; }
+.tab-nav button.selected { color: var(--blue) !important; background: rgba(79,126,248,0.08) !important; border-bottom: 2px solid var(--blue) !important; }
+
+.status-bar {
+    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
+    background: var(--surface); border: 1px solid var(--border);
+    border-left: 3px solid var(--accent, var(--blue));
+    border-radius: var(--radius); padding: 11px 18px; gap: 10px; margin-bottom: 14px;
+}
+.status-left, .status-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+.dot-ready   { background: var(--green); box-shadow: 0 0 6px rgba(52,211,153,.5); }
+.dot-loading { background: var(--amber); animation: pulse-ring 1.5s ease-out infinite; }
+.status-name { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 600; }
+.status-chip { font-size: 11px; font-weight: 500; padding: 2px 9px; border-radius: 5px; background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--text-dim); }
+.chip-vision { background: rgba(79,126,248,0.13); border-color: rgba(79,126,248,0.28); color: #8ab4f8; }
+.chip-text   { background: rgba(122,134,168,0.08); border-color: var(--border); color: var(--text-dim); }
+.status-ok   { font-size: 12px; color: var(--green); font-weight: 500; }
+.status-error { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.22); color: var(--red); border-radius: 10px; padding: 12px 16px; font-size: 13px; }
+.status-empty { font-size: 13px; color: var(--text-dim); padding: 10px 0; font-style: italic; }
+
+.loading-notice { display: flex; align-items: center; gap: 12px; background: rgba(79,126,248,0.07); border: 1px solid rgba(79,126,248,0.22); border-radius: var(--radius); padding: 13px 18px; margin-bottom: 14px; color: #8ab4f8; font-size: 13px; font-weight: 500; animation: notice-pulse 2s ease-in-out infinite; }
+.notice-spinner { width: 15px; height: 15px; border: 2px solid rgba(79,126,248,0.25); border-top-color: var(--blue); border-radius: 50%; animation: spin .75s linear infinite; flex-shrink: 0; }
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes notice-pulse { 0%,100% { border-color: rgba(79,126,248,0.22); } 50% { border-color: rgba(79,126,248,0.5); } }
+
+.family-header { display: flex; align-items: center; gap: 14px; padding: 15px 20px; border-radius: var(--radius); margin-bottom: 12px; background: var(--surface); border: 1px solid var(--border); }
+.family-icon { font-family: 'Space Grotesk', sans-serif; font-size: 17px; font-weight: 700; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; flex-shrink: 0; }
+.family-text h3 { font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 600; margin: 0 0 2px; color: var(--text); }
+.family-text p  { font-size: 12px; color: var(--text-dim); margin: 0; }
+.family-year { margin-left: auto; font-size: 11px; color: var(--text-dim); font-weight: 500; opacity: 0.7; }
+.family-new-badge { margin-left: 8px; background: linear-gradient(120deg, var(--blue), var(--purple)); color: #fff; border-radius: 7px; padding: 3px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; }
+
+.model-card-wrap { padding: 5px !important; }
+.model-card {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius); overflow: hidden; height: 100%;
+    display: flex; flex-direction: column;
+    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
+    min-height: 255px;
+}
+.model-card:hover { border-color: rgba(79,126,248,0.42); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0,0,0,0.4); }
+.model-card.card-active { border-color: var(--green) !important; box-shadow: 0 0 0 1px rgba(52,211,153,0.18), 0 8px 28px rgba(0,0,0,0.35) !important; }
+.card-active-badge { font-size: 9px; font-weight: 700; padding: 2px 8px; border-radius: 5px; background: rgba(52,211,153,0.13); color: var(--green); border: 1px solid rgba(52,211,153,0.28); text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
+.card-accent { height: 3px; width: 100%; flex-shrink: 0; }
+.card-body   { padding: 17px 17px 14px; flex: 1; display: flex; flex-direction: column; }
+.card-top    { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; gap: 6px; flex-wrap: wrap; }
+.card-name   { font-family: 'Space Grotesk', sans-serif; font-size: 15.5px; font-weight: 600; color: var(--text); margin: 0; line-height: 1.2; }
+.card-badge  { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; letter-spacing: 0.5px; flex-shrink: 0; }
+.badge-NEW      { background: rgba(79,126,248,0.15); color: #8ab4f8; border: 1px solid rgba(79,126,248,0.28); }
+.badge-FLAGSHIP { background: rgba(139,114,240,0.15); color: #baaaf8; border: 1px solid rgba(139,114,240,0.28); }
+.card-desc   { font-size: 12px; color: var(--text-dim); line-height: 1.55; margin: 0 0 13px; flex: 1; }
+.card-stats  { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; margin-bottom: 11px; }
+.card-stat   { font-size: 10.5px; font-weight: 500; padding: 5px 4px; border-radius: 6px; background: rgba(255,255,255,0.03); color: var(--text-dim); border: 1px solid var(--border); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.card-tags   { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 13px; }
+.tag { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 5px; letter-spacing: 0.2px; border: 1px solid transparent; }
+.tag-vision   { background: rgba(79,126,248,0.1);   color: #8ab4f8;  border-color: rgba(79,126,248,0.22); }
+.tag-text     { background: rgba(122,134,168,0.07); color: var(--text-dim); border-color: var(--border); }
+.tag-apache   { background: rgba(52,211,153,0.09);  color: #6ee7b7;  border-color: rgba(52,211,153,0.22); }
+.tag-gemma    { background: rgba(251,191,36,0.09);  color: #fcd34d;  border-color: rgba(251,191,36,0.22); }
+.tag-xlarge   { background: rgba(139,114,240,0.1);  color: #baaaf8;  border-color: rgba(139,114,240,0.25); }
+.tag-instruct { background: rgba(167,139,250,0.13); color: #c4b5fd;  border-color: rgba(167,139,250,0.3); }
+.tag-base     { background: rgba(148,163,184,0.08); color: #94a3b8;  border-color: rgba(148,163,184,0.2); }
+
+.model-card-wrap { display: flex !important; flex-direction: column !important; }
+.model-card-wrap > * { width: 100% !important; }
+.card-btn { width: 100% !important; margin-top: 6px !important; }
+.card-btn > div { width: 100% !important; }
+.card-btn button { width: 100% !important; background: linear-gradient(120deg, var(--blue), var(--blue-dim)) !important; color: #fff !important; border-radius: 8px !important; font-family: 'Inter', sans-serif !important; font-size: 12.5px !important; font-weight: 500 !important; padding: 9px !important; border: none !important; cursor: pointer !important; letter-spacing: 0.2px !important; transition: opacity 0.2s, transform 0.15s !important; }
+.card-btn button:hover    { opacity: 0.85 !important; transform: translateY(-1px) !important; }
+.card-btn button:disabled { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; }
+.card-btn-xlarge button   { background: linear-gradient(120deg, var(--purple), var(--purple-dim)) !important; }
+
+.thinking-wrap {
+    display: flex; align-items: center; gap: 10px;
+    padding: 8px 14px 10px;
+    border-bottom: 1px solid var(--border);
+    background: var(--surface2);
+    font-size: 12px; color: var(--text-dim); font-style: italic;
+}
+.thinking-dots { display: flex; gap: 5px; align-items: center; }
+.thinking-dots span {
+    width: 7px; height: 7px; border-radius: 50%;
+    background: var(--blue); opacity: 0.3;
+    animation: dot-bounce 1.1s ease-in-out infinite;
+}
+.thinking-dots span:nth-child(2) { animation-delay: 0.18s; }
+.thinking-dots span:nth-child(3) { animation-delay: 0.36s; }
+@keyframes dot-bounce {
+    0%, 100% { opacity: 0.2; transform: translateY(0px); }
+    50%       { opacity: 1;   transform: translateY(-5px); }
+}
+
+.dual-loading-notice {
+    display: flex; align-items: flex-start; gap: 12px;
+    background: rgba(79,126,248,0.07); border: 1px solid rgba(79,126,248,0.28);
+    border-radius: var(--radius); padding: 13px 18px; margin-bottom: 12px;
+    animation: notice-pulse 2s ease-in-out infinite;
+}
+.dual-loading-notice .notice-spinner { margin-top: 2px; }
+.dual-loading-body { display: flex; flex-direction: column; gap: 3px; }
+.dual-loading-title { font-size: 13px; font-weight: 600; color: #8ab4f8; }
+.dual-loading-sub   { font-size: 11px; color: var(--text-dim); }
+
+.chat-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.gradio-chatbot { background: var(--surface) !important; border: none !important; color: var(--text) !important; }
+
+.settings-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
+.zerogpu-notice { background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.25); color: #fcd34d; border-radius: 8px; padding: 12px 14px; font-size: 11px; margin-bottom: 16px; line-height: 1.6; font-weight: 500; }
+.zgn-title   { font-weight: 700; font-size: 11.5px; margin-bottom: 3px; }
+.zgn-divider { border-top: 1px solid rgba(245,158,11,0.2); margin: 9px 0; }
+.zerogpu-notice strong { color: #fde68a; }
+.settings-title { font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
+.settings-hint { font-size: 11.5px; color: var(--text-dim); line-height: 1.8; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
+.settings-hint strong { color: rgba(221,228,244,0.55); font-weight: 500; display: block; margin-bottom: 2px; }
+.system-prompt textarea { font-size: 12px !important; min-height: 72px !important; background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; border-radius: 8px !important; resize: vertical !important; }
+
+.send-btn button { background: linear-gradient(120deg, var(--blue), var(--blue-dim)) !important; color: #fff !important; border-radius: 10px !important; font-family: 'Inter', sans-serif !important; font-weight: 500 !important; padding: 10px 20px !important; border: none !important; letter-spacing: 0.2px !important; transition: opacity 0.2s !important; }
+.send-btn button:hover { opacity: 0.85 !important; }
+.clear-btn button, .export-btn button, .reset-btn button { background: transparent !important; border: 1px solid var(--border) !important; color: var(--text-dim) !important; border-radius: 10px !important; font-family: 'Inter', sans-serif !important; font-weight: 500 !important; font-size: 12.5px !important; width: 100% !important; transition: all 0.2s !important; }
+.clear-btn button:hover  { border-color: rgba(248,113,113,0.4) !important; color: var(--red) !important;   background: rgba(248,113,113,0.06) !important; }
+.export-btn button:hover { border-color: rgba(79,126,248,0.4)  !important; color: var(--blue) !important;  background: rgba(79,126,248,0.06)  !important; }
+.reset-btn button:hover  { border-color: rgba(251,191,36,0.4)  !important; color: var(--amber) !important; background: rgba(251,191,36,0.06)  !important; }
+
+.chat-inline-status { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12px; color: var(--text-dim); border-bottom: 1px solid var(--border); background: var(--surface2); min-height: 32px; }
+.csi-dot       { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
+.csi-dot-idle  { background: var(--text-dim); opacity: 0.35; }
+.csi-dot-ready { background: var(--green); box-shadow: 0 0 6px rgba(52,211,153,.5); }
+.csi-name      { font-weight: 600; color: var(--text); }
+.csi-label     { color: var(--green); font-weight: 500; }
+.csi-idle      { font-style: italic; }
+
+.image-upload-wrap { width: 100% !important; margin-top: 6px !important; }
+.image-upload-wrap > div,
+.image-upload-wrap .wrap { min-height: 260px !important; border-radius: 10px !important; }
+
+.dual-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+.dual-header { display: flex; align-items: center; padding: 10px 14px; background: var(--surface2); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; }
+.dual-label-a { color: var(--blue); }
+.dual-label-b { color: var(--purple); }
+.dual-send-btn button { background: linear-gradient(120deg, var(--blue), var(--purple)) !important; color: #fff !important; border-radius: 10px !important; font-family: 'Inter', sans-serif !important; font-weight: 500 !important; padding: 10px 20px !important; border: none !important; letter-spacing: 0.2px !important; transition: opacity 0.2s !important; }
+.dual-send-btn button:hover { opacity: 0.85 !important; }
+.dual-img-wrap { width: 100% !important; margin-top: 6px !important; }
+.dual-img-wrap > div,
+.dual-img-wrap .wrap { min-height: 140px !important; border-radius: 10px !important; }
+
+input, textarea, .gr-input { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; border-radius: 10px !important; }
+label { color: var(--text-dim) !important; font-size: 12px !important; }
+.gr-slider input[type=range] { accent-color: var(--blue); }
+.gr-box, .gr-form { background: transparent !important; }
+"""
+
+
+# ── Static HTML fragments ─────────────────────────────────────────────────────
+
+_STAR_COORDS = [
+    (8,12),(15,78),(23,45),(31,67),(42,23),(48,89),(55,34),(63,56),
+    (71,14),(78,72),(85,41),(92,88),(5,55),(18,33),(27,91),(36,8),
+    (44,62),(52,27),(59,79),(67,48),(74,19),(82,64),(89,35),(96,82),
+    (11,95),(20,7),(29,53),(38,74),(47,16),(56,39),
+]
+_STARS_HTML = "".join(
+    f'<div class="star" style="left:{x}%;top:{y}%;--dur:{2.4+(i%5)*0.7}s;--delay:{-(i%8)*0.6}s"></div>'
+    for i,(x,y) in enumerate(_STAR_COORDS)
+)
+
+_N_MODELS   = len(MODELS)
+_N_FAMILIES = len(FAMILIES)
+
+_LEGEND_HTML = "".join(
+    f'<span class="legend-dot">'
+    f'<span class="legend-swatch" style="background:{info["color"]}"></span>'
+    f'{_html.escape(name)}</span>'
+    for name, info in FAMILIES.items()
+)
+
+_HERO_HTML = f"""
+<div class="gemma-hero">
+  <div class="hero-bg">
+    <div class="hero-grid"></div>
+    <div class="orb orb-1"></div><div class="orb orb-2"></div><div class="orb orb-3"></div>
+    <div class="hero-stars">{_STARS_HTML}</div>
+  </div>
+  <div class="hero-inner">
+    <div class="hero-top-bar">
+      <div class="hero-eyebrow">
+        <span class="hero-dot-pulse"></span>
+        Google DeepMind &middot; Open Models
+      </div>
+    </div>
+    <h1 class="hero-title">Gemma <span>Explorer</span></h1>
+    <p class="hero-subtitle">Explore, compare, and chat with the full Gemma open model family &mdash; from the compact 1B to the powerful 31B multimodal.</p>
+    <div class="hero-chips">
+      <span class="hero-chip"><strong>{_N_MODELS}</strong> models</span>
+      <span class="hero-chip"><strong>{_N_FAMILIES}</strong> generations</span>
+      <span class="hero-chip">Vision &mdash; Gemma 3 &amp; 4</span>
+      <span class="hero-chip">ZeroGPU &middot; NVIDIA H200</span>
+    </div>
+    <div class="hero-legend">{_LEGEND_HTML}</div>
+  </div>
+</div>
+"""
+
+_ZEROGPU_NOTICE = """
+<div class="zerogpu-notice">
+  <div class="zgn-title">⚡ ZeroGPU Latency</div>
+  GPU allocation happens on every message in this serverless Space — expect a brief wait before the first token.
+  <div class="zgn-divider"></div>
+  <div class="zgn-title">🧠 No Memory</div>
+  Due to ZeroGPU constraints, each message is processed independently.
+  The model has <strong>no conversation history</strong> — it starts fresh on every reply.
+</div>
+"""
+
+_SETTINGS_HINT = """
+<div class="settings-hint">
+  <strong>Temperature</strong>
+  0 = deterministic<br>0.7 = balanced<br>1.5 = creative
+  <br><br>
+  <strong>GPU allocation</strong>
+  large = 70 GB H200<br>xlarge = 141 GB H200<br>(Gemma 4 31B only)
+</div>
+"""
+
+
+# ── Card / header HTML ────────────────────────────────────────────────────────
+
+def _card_html(model_id: str, meta: dict, active: bool = False) -> str:
+    color        = meta["family_color"]
+    badge        = meta.get("badge")
+    badge_html   = f'<span class="card-badge badge-{badge}">{_html.escape(badge)}</span>' if badge else ""
+    active_html  = '<span class="card-active-badge">✓ Loaded</span>' if active else ""
+    vision_tag   = '<span class="tag tag-vision">Vision</span>' if meta["supports_vision"] else '<span class="tag tag-text">Text only</span>'
+    license_tag  = '<span class="tag tag-apache">Apache 2.0</span>' if meta["license_open"] else '<span class="tag tag-gemma">Gemma License</span>'
+    gpu_tag      = '<span class="tag tag-xlarge">xlarge GPU</span>' if meta["gpu_size"] == "xlarge" else ""
+    instruct_tag = '<span class="tag tag-instruct">Instruct</span>' if "-it" in model_id.lower() else '<span class="tag tag-base">Base</span>'
+    active_cls   = " card-active" if active else ""
+    return f"""
+<div class="model-card{active_cls}">
+  <div class="card-accent" style="background:linear-gradient(90deg,{color},{color}66)"></div>
+  <div class="card-body">
+    <div class="card-top">
+      <p class="card-name">{_html.escape(meta['name'])}</p>
+      <span style="display:flex;gap:4px;flex-shrink:0">{badge_html}{active_html}</span>
+    </div>
+    <p class="card-desc">{_html.escape(meta['description'])}</p>
+    <div class="card-stats">
+      <span class="card-stat">{_html.escape(meta['params_short'])}</span>
+      <span class="card-stat">{_html.escape(meta['context'])} ctx</span>
+      <span class="card-stat">{_html.escape(meta['vram'])}</span>
+    </div>
+    <div class="card-tags">{vision_tag}{instruct_tag}{license_tag}{gpu_tag}</div>
+  </div>
+</div>
+"""
+
+
+def _family_header_html(name: str, info: dict) -> str:
+    new_badge = '<span class="family-new-badge">New</span>' if info.get("new") else ""
+    return f"""
+<div class="family-header">
+  <div class="family-icon" style="background:linear-gradient(135deg,{info['color']},{info['color']}88)">{info['icon']}</div>
+  <div class="family-text"><h3>{_html.escape(name)}</h3><p>{_html.escape(info['description'])}</p></div>
+  <span class="family-year">{info['year']}</span>
+  {new_badge}
+</div>
+"""
+
+
+def _make_status_html(meta: dict, state: str = "ready") -> str:
+    color     = meta["family_color"]
+    safe_name = _html.escape(meta["name"])
+    dot_class, label = {
+        "ready":   ("dot-ready",   "Ready"),
+        "already": ("dot-ready",   "Already loaded"),
+    }.get(state, ("dot-loading", "Loading\u2026"))
+    vision_tag = (
+        '<span class="status-chip chip-vision">Vision</span>'
+        if meta["supports_vision"]
+        else '<span class="status-chip chip-text">Text only</span>'
+    )
+    return f"""
+<div class="status-bar" style="--accent:{color}">
+  <div class="status-left">
+    <span class="status-dot {dot_class}"></span>
+    <span class="status-name" style="color:{color}">{safe_name}</span>
+    {vision_tag}
+  </div>
+  <div class="status-right">
+    <span class="status-chip">{_html.escape(meta['params_short'])}</span>
+    <span class="status-chip">{_html.escape(str(meta['context']))} ctx</span>
+    <span class="status-chip">{_html.escape(meta['vram'])}</span>
+    <span class="status-ok">{label}</span>
+  </div>
+</div>
+"""
+
+
+def _chat_inline_status(loaded: bool = False, name: str = "") -> str:
+    safe_name = _html.escape(name)
+    if loaded:
+        return (f'<div class="chat-inline-status">'
+                f'<span class="csi-dot csi-dot-ready"></span>'
+                f'<span class="csi-name">{safe_name}</span>'
+                f'<span class="csi-label">&nbsp;&middot; Ready to chat</span>'
+                f'</div>')
+    return ('<div class="chat-inline-status">'
+            '<span class="csi-dot csi-dot-idle"></span>'
+            '<span class="csi-idle">No model loaded &mdash; go to <strong>Explore Models</strong> and click <em>Load &amp; Chat</em>.</span>'
+            '</div>')
+
+
+def _empty_status() -> str:
+    return '<div class="status-empty">No model loaded &mdash; select one in <strong>Explore Models</strong>.</div>'
+
+
+def _loading_html(model_name: str = "") -> str:
+    name_part = f" <strong>{_html.escape(model_name)}</strong>" if model_name else ""
+    return (
+        '<div class="loading-notice">'
+        '<div class="notice-spinner"></div>'
+        '<div>'
+        f'<div>Loading{name_part}, please wait&hellip;</div>'
+        '<div style="font-size:11px;opacity:0.7;margin-top:3px;font-weight:400">'
+        '⏱&nbsp; Large models (27B, 31B) can take 1&ndash;3 min. Please be patient.'
+        '</div>'
+        '</div>'
+        '</div>'
+    )
+
+
+_THINKING_HTML = (
+    '<div class="thinking-wrap">'
+    '<div class="thinking-dots"><span></span><span></span><span></span></div>'
+    'Thinking&hellip;'
+    '</div>'
+)
+
+
+def _dual_loading_html(label: str, color: str, model_name: str) -> str:
+    return (
+        '<div class="dual-loading-notice">'
+        '<div class="notice-spinner"></div>'
+        '<div class="dual-loading-body">'
+        f'<span class="dual-loading-title" style="color:{color}">'
+        f'Loading {_html.escape(label)}: {_html.escape(model_name)}&hellip;'
+        '</span>'
+        '<span class="dual-loading-sub">'
+        '⏱&nbsp; Large models (27B, 31B) may take 1&ndash;3 min. Please be patient.'
+        '</span>'
+        '</div>'
+        '</div>'
+    )
+
+
+# ── Build Gradio UI ───────────────────────────────────────────────────────────
+
+_MODEL_CHOICES = [(meta["name"], mid) for mid, meta in MODELS.items()]
+
+# Corrección Gradio 6.0: css y theme movidos a launch()
+with gr.Blocks(title="Gemma Explorer") as demo:
+
+    current_model_state = gr.State(value=None)
+    gr.HTML(value=_HERO_HTML)
+
+    with gr.Tabs() as main_tabs:
+
+        with gr.Tab("Explore Models", id="explore"):
+
+            status_html    = gr.HTML(value=_empty_status())
+            loading_notice = gr.HTML(value=_loading_html(), visible=False)
+
+            card_html_components: dict[str, gr.HTML] = {}
+            load_btns: list[gr.Button] = []
+
+            for family_name, family_info in FAMILIES.items():
+                gr.HTML(_family_header_html(family_name, family_info))
+                family_models = list(get_models_by_family(family_name).items())
+
+                for row_start in range(0, len(family_models), 4):
+                    row_models = family_models[row_start: row_start + 4]
+                    with gr.Row(equal_height=True):
+                        for model_id, meta in row_models:
+                            with gr.Column(min_width=200, elem_classes=["model-card-wrap"]):
+                                card_comp = gr.HTML(_card_html(model_id, meta, active=False))
+                                card_html_components[model_id] = card_comp
+                                btn_cls = ["card-btn", "card-btn-xlarge"] if meta["gpu_size"] == "xlarge" else ["card-btn"]
+                                load_btn = gr.Button("Load & Chat", elem_classes=btn_cls)
+                                load_btn._model_id = model_id
+                                load_btns.append(load_btn)
+
+        with gr.Tab("Single Chat", id="single"):
+
+            chat_status_html    = gr.HTML(value=_empty_status())
+            chat_loading_notice = gr.HTML(value=_loading_html(), visible=False)
+
+            with gr.Row(equal_height=False):
+
+                with gr.Column(scale=4, elem_classes=["chat-panel"]):
+                    chat_inline = gr.HTML(value=_chat_inline_status(loaded=False))
+                    thinking_html = gr.HTML(value="", visible=False)
+                    chatbot = gr.Chatbot(value=[], height=480, show_label=False, placeholder="")
+
+                    with gr.Row():
+                        msg_input = gr.Textbox(
+                            placeholder="Type your message here\u2026",
+                            show_label=False, scale=5, lines=1, max_lines=5, autofocus=True,
+                        )
+                        send_btn = gr.Button("Send", variant="primary", elem_classes=["send-btn"], scale=1)
+
+                    image_input = gr.Image(
+                        type="numpy", label="Attach image (optional)",
+                        show_label=True, visible=False,
+                        elem_classes=["image-upload-wrap"], height=260,
+                    )
+
+                with gr.Column(scale=1, elem_classes=["settings-panel"]):
+                    gr.HTML(_ZEROGPU_NOTICE)
+                    gr.HTML('<div class="settings-title">Parameters</div>')
+                    max_tokens  = gr.Slider(64, 2048, value=512, step=64,  label="Max new tokens")
+                    temperature = gr.Slider(0.0, 1.5,  value=0.7, step=0.05, label="Temperature")
+                    system_prompt = gr.Textbox(
+                        label="System prompt (optional)",
+                        placeholder="e.g. You are a helpful assistant\u2026",
+                        lines=3, max_lines=6,
+                        elem_classes=["system-prompt"],
+                    )
+                    gr.HTML(_SETTINGS_HINT)
+                    reset_btn  = gr.Button("↺ Reset params", elem_classes=["reset-btn"])
+                    clear_btn  = gr.Button("Clear Chat",    elem_classes=["clear-btn"])
+                    export_btn = gr.Button("⬇ Export .md",  elem_classes=["export-btn"])
+                    export_file = gr.File(label="Download chat", visible=False)
+
+        with gr.Tab("Dual Chat", id="dual"):
+
+            gr.HTML("""
+            <div class="zerogpu-notice" style="margin-bottom:16px">
+              <div class="zgn-title">⚔️ Dual Chat — Side-by-Side Comparison</div>
+              Send the same prompt to two models and compare their responses.
+              Models are loaded and run sequentially — Model A first, then Model B.
+              <div class="zgn-divider"></div>
+              <div class="zgn-title">🧠 No Memory</div>
+              Same ZeroGPU constraints apply — each turn is processed independently with no context history.
+            </div>
+            """)
+
+            dual_loading_html = gr.HTML(value="", visible=False)
+
+            with gr.Row():
+                with gr.Column(scale=1):
+                    dual_model_a = gr.Dropdown(choices=_MODEL_CHOICES, value=list(MODELS.keys())[0], label="Model A")
+                    dual_sys_a   = gr.Textbox(label="System prompt A (optional)", lines=2,
+                                              placeholder="e.g. Answer concisely.",
+                                              elem_classes=["system-prompt"])
+                with gr.Column(scale=1):
+                    dual_model_b = gr.Dropdown(
+                        choices=_MODEL_CHOICES,
+                        value=list(MODELS.keys())[min(3, len(MODELS)-1)],
+                        label="Model B",
+                    )
+                    dual_sys_b   = gr.Textbox(label="System prompt B (optional)", lines=2,
+                                              placeholder="e.g. Answer in detail.",
+                                              elem_classes=["system-prompt"])
+
+            with gr.Row(equal_height=True):
+                with gr.Column(scale=1, elem_classes=["dual-panel"]):
+                    gr.HTML('<div class="dual-header"><span class="dual-label-a">▲ Model A</span></div>')
+                    dual_bot_a = gr.Chatbot(value=[], height=400, show_label=False)
+                with gr.Column(scale=1, elem_classes=["dual-panel"]):
+                    gr.HTML('<div class="dual-header"><span class="dual-label-b">▲ Model B</span></div>')
+                    dual_bot_b = gr.Chatbot(value=[], height=400, show_label=False)
+
+            _init_a = list(MODELS.keys())[0]
+            _init_b = list(MODELS.keys())[min(3, len(MODELS)-1)]
+            _both_vision_init = MODELS[_init_a]["supports_vision"] and MODELS[_init_b]["supports_vision"]
+            dual_img = gr.Image(
+                type="numpy",
+                label="Attach image — sent to both models (only available when both models support vision)",
+                show_label=True,
+                elem_classes=["dual-img-wrap"],
+                height=160,
+                visible=_both_vision_init,
+            )
+
+            with gr.Row():
+                dual_msg  = gr.Textbox(placeholder="Type a prompt — it will be sent to both models\u2026",
+                                       show_label=False, scale=5, lines=1, max_lines=4)
+                dual_send = gr.Button("Send to Both", variant="primary",
+                                      elem_classes=["dual-send-btn"], scale=1)
+
+            with gr.Row():
+                dual_max_tokens  = gr.Slider(64, 2048, value=512, step=64,  label="Max new tokens")
+                dual_temperature = gr.Slider(0.0, 1.5,  value=0.7, step=0.05, label="Temperature")
+                dual_clear = gr.Button("Clear Both", elem_classes=["clear-btn"])
+
+    # ── Event wiring ──────────────────────────────────────────────────────────
+
+    card_html_list = [card_html_components[mid] for mid in MODELS]
+    _n_cards = len(card_html_list)
+
+    # Corrección: Uso de una función auxiliar para evitar el error del generador con lambda
+    def make_load_fn(model_id):
+        def load_fn():
+            yield from load_model_stream(model_id, _n_cards)
+        return load_fn
+
+    for btn in load_btns:
+        btn.click(
+            fn=make_load_fn(btn._model_id),
+            inputs=[],
+            outputs=[
+                loading_notice, chat_loading_notice,
+                status_html, main_tabs, image_input, current_model_state,
+                chatbot, chat_inline,
+                *card_html_list,
+            ],
+        )
+
+    # ── Single chat ───────────────────────────────────────────────────────────
+
+    def _do_respond(message, image, max_toks, temp, sys_prompt, history):
+        full_msg  = (sys_prompt.strip() + "\n\n" + message) if sys_prompt.strip() else message
+        last_hist = history
+        _lock     = gr.update(interactive=False)
+        _unlock   = gr.update(interactive=True)
+        _thinking = gr.update(visible=True,  value=_THINKING_HTML)
+        _done     = gr.update(visible=False, value="")
+
+        yield last_hist, gr.update(value=""), gr.update(), _lock, _lock, _thinking
+
+        for hist_update, img_update in respond(full_msg, image, max_toks, temp, history):
+            last_hist = hist_update
+            yield last_hist, gr.update(), img_update, gr.update(), gr.update(), _done
+
+        yield last_hist, gr.update(), gr.update(value=None), _unlock, _unlock, _done
+
+    _single_inputs  = [msg_input, image_input, max_tokens, temperature, system_prompt, chatbot]
+    _single_outputs = [chatbot, msg_input, image_input, send_btn, msg_input, thinking_html]
+
+    msg_input.submit(fn=_do_respond, inputs=_single_inputs, outputs=_single_outputs)
+    send_btn.click(  fn=_do_respond, inputs=_single_inputs, outputs=_single_outputs)
+
+    clear_btn.click(fn=lambda: [], outputs=[chatbot])
+    reset_btn.click(fn=lambda: (512, 0.7, ""), outputs=[max_tokens, temperature, system_prompt])
+
+    def _do_export(history):
+        if not history:
+            return gr.update(visible=False)
+        content = export_chat(history)
+        path = f"/tmp/gemma_chat_{datetime.datetime.now().strftime('%Y%m%d_%H%M%S')}.md"
+        with open(path, "w") as f:
+            f.write(content)
+        return gr.update(value=path, visible=True)
+
+    export_btn.click(fn=_do_export, inputs=[chatbot], outputs=[export_file])
+
+    # ── Dual chat ─────────────────────────────────────────────────────────────
+
+    def _dual_img_visibility(model_a, model_b):
+        a_ok = MODELS.get(model_a, {}).get("supports_vision", False)
+        b_ok = MODELS.get(model_b, {}).get("supports_vision", False)
+        return gr.update(visible=(a_ok and b_ok))
+
+    dual_model_a.change(
+        fn=_dual_img_visibility,
+        inputs=[dual_model_a, dual_model_b],
+        outputs=[dual_img],
+    )
+    dual_model_b.change(
+        fn=_dual_img_visibility,
+        inputs=[dual_model_a, dual_model_b],
+        outputs=[dual_img],
+    )
+
+    def _do_dual(message, image, max_toks, temp, sys_a, sys_b, model_a, model_b, hist_a, hist_b):
+        if not message.strip() and image is None:
+            yield hist_a, hist_b, gr.update(), gr.update(), gr.update(), gr.update(), gr.update(visible=False)
+            return
+
+        _lock   = gr.update(interactive=False)
+        _unlock = gr.update(interactive=True)
+
+        name_a = MODELS.get(model_a, {}).get("name", model_a)
+        name_b = MODELS.get(model_b, {}).get("name", model_b)
+        user_msg = message or "[image attached]"
+
+        yield (hist_a, hist_b, gr.update(value=""), gr.update(), _lock, _lock,
+               gr.update(visible=True, value=_dual_loading_html("Model A", "var(--blue)", name_a)))
+
+        try:
+            _load_weights(model_a)
+        except Exception as exc:
+            _purge_model()
+            err = f"❌ Failed to load {name_a}: {exc}"
+            yield (hist_a + [{"role": "user", "content": user_msg}, {"role": "assistant", "content": err}],
+                   hist_b, gr.update(), gr.update(value=None), _unlock, _unlock,
+                   gr.update(visible=False))
+            return
+
+        new_hist_a = hist_a + [{"role": "user", "content": user_msg}]
+        meta_a    = MODELS[model_a]
+        infer_fn  = infer_xlarge if meta_a["gpu_size"] == "xlarge" else infer_large
+        full_a    = (sys_a.strip() + "\n\n" + message) if sys_a.strip() else message
+        partial_a = ""
+
+        for chunk in infer_fn(full_a, image, max_toks, temp):
+            partial_a = chunk
+            yield (new_hist_a + [{"role": "assistant", "content": partial_a}],
+                   hist_b, gr.update(), gr.update(), gr.update(), gr.update(), gr.update())
+
+        hist_a = new_hist_a + [{"role": "assistant", "content": partial_a}]
+
+        yield (hist_a, hist_b, gr.update(), gr.update(), gr.update(), gr.update(),
+               gr.update(visible=True, value=_dual_loading_html("Model B", "var(--purple)", name_b)))
+
+        try:
+            _load_weights(model_b)
+        except Exception as exc:
+            _purge_model()
+            err = f"❌ Failed to load {name_b}: {exc}"
+            yield (hist_a,
+                   hist_b + [{"role": "user", "content": user_msg}, {"role": "assistant", "content": err}],
+                   gr.update(), gr.update(value=None), _unlock, _unlock, gr.update(visible=False))
+            return
+
+        new_hist_b = hist_b + [{"role": "user", "content": user_msg}]
+        meta_b    = MODELS[model_b]
+        infer_fn  = infer_xlarge if meta_b["gpu_size"] == "xlarge" else infer_large
+        full_b    = (sys_b.strip() + "\n\n" + message) if sys_b.strip() else message
+        partial_b = ""
+
+        for chunk in infer_fn(full_b, image, max_toks, temp):
+            partial_b = chunk
+            yield (hist_a,
+                   new_hist_b + [{"role": "assistant", "content": partial_b}],
+                   gr.update(), gr.update(), gr.update(), gr.update(), gr.update())
+
+        yield (hist_a, new_hist_b + [{"role": "assistant", "content": partial_b}],
+               gr.update(), gr.update(value=None), _unlock, _unlock, gr.update(visible=False))
+
+    _dual_inputs  = [dual_msg, dual_img, dual_max_tokens, dual_temperature,
+                     dual_sys_a, dual_sys_b, dual_model_a, dual_model_b, dual_bot_a, dual_bot_b]
+    _dual_outputs = [dual_bot_a, dual_bot_b, dual_msg, dual_img,
+                     dual_send, dual_msg, dual_loading_html]
+
+    dual_send.click(fn=_do_dual, inputs=_dual_inputs, outputs=_dual_outputs)
+    dual_msg.submit( fn=_do_dual, inputs=_dual_inputs, outputs=_dual_outputs)
+    dual_clear.click(fn=lambda: ([], []), outputs=[dual_bot_a, dual_bot_b])
+
+
+if __name__ == "__main__":
+    _debug = os.environ.get("GRADIO_DEBUG", "0") == "1"
+    # Corrección Gradio 6.0: css y theme ahora se pasan en launch()
+    demo.launch(
+        debug=_debug,
+        css=CSS,
+        theme=gr.themes.Base()
+    )

models_data.py

@@ -0,0 +1,338 @@
+import torch
+
+# ─── Model Registry ───────────────────────────────────────────────────────────
+# loader_type:
+#   "multimodal"    → AutoModelForMultimodalLM + AutoProcessor (Gemma 4)
+#   "vision_causal" → AutoModelForCausalLM    + AutoProcessor (Gemma 3 vision)
+#   "causal"        → AutoModelForCausalLM    + AutoTokenizer  (text-only)
+
+MODELS = {
+    # ── Gemma 4 ───────────────────────────────────────────────────────────────
+    "google/gemma-4-E2B-it": {
+        "name": "Gemma 4 E2B",
+        "short": "E2B",
+        "family": "Gemma 4",
+        "family_color": "#1a73e8",
+        "params": "2.3B active / 5.1B total",
+        "params_short": "2.3B",
+        "context": "128K",
+        "context_k": 128,
+        "gpu_size": "large",
+        "supports_vision": True,
+        "loader_type": "multimodal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Most compact Gemma 4. PLE architecture with image support. Fast and efficient.",
+        "release_year": 2026,
+        "license": "Apache 2.0",
+        "license_open": True,
+        "vram": "~10 GB",
+        "lmarena": None,
+        "architecture": "Transformer + PLE",
+        "badge": "NEW",
+    },
+    "google/gemma-4-E4B-it": {
+        "name": "Gemma 4 E4B",
+        "short": "E4B",
+        "family": "Gemma 4",
+        "family_color": "#1a73e8",
+        "params": "4.5B active / 8B total",
+        "params_short": "4.5B",
+        "context": "128K",
+        "context_k": 128,
+        "gpu_size": "large",
+        "supports_vision": True,
+        "loader_type": "multimodal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Greater capacity with PLE and Shared KV Cache. Image + text. Great balance.",
+        "release_year": 2026,
+        "license": "Apache 2.0",
+        "license_open": True,
+        "vram": "~16 GB",
+        "lmarena": None,
+        "architecture": "Transformer + PLE",
+        "badge": "NEW",
+    },
+    "google/gemma-4-26B-A4B-it": {
+        "name": "Gemma 4 26B MoE",
+        "short": "26B MoE",
+        "family": "Gemma 4",
+        "family_color": "#1a73e8",
+        "params": "4B active / 26B total",
+        "params_short": "26B MoE",
+        "context": "256K",
+        "context_k": 256,
+        "gpu_size": "large",
+        "supports_vision": True,
+        "loader_type": "multimodal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Mixture-of-Experts with only 4B active parameters. LMArena ~1441. Image + text.",
+        "release_year": 2026,
+        "license": "Apache 2.0",
+        "license_open": True,
+        "vram": "~52 GB",
+        "lmarena": 1441,
+        "architecture": "MoE Transformer",
+        "badge": "NEW",
+    },
+    "google/gemma-4-31B-it": {
+        "name": "Gemma 4 31B",
+        "short": "31B",
+        "family": "Gemma 4",
+        "family_color": "#1a73e8",
+        "params": "31B parameters",
+        "params_short": "31B",
+        "context": "256K",
+        "context_k": 256,
+        "gpu_size": "xlarge",
+        "supports_vision": True,
+        "loader_type": "multimodal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Most powerful Gemma 4. Dense Transformer. LMArena ~1452. On par with models 30× larger.",
+        "release_year": 2026,
+        "license": "Apache 2.0",
+        "license_open": True,
+        "vram": "~62 GB",
+        "lmarena": 1452,
+        "architecture": "Dense Transformer",
+        "badge": "FLAGSHIP",
+    },
+    # ── Gemma 3 ───────────────────────────────────────────────────────────────
+    "google/gemma-3-1b-it": {
+        "name": "Gemma 3 1B",
+        "short": "1B",
+        "family": "Gemma 3",
+        "family_color": "#137333",
+        "params": "1B parameters",
+        "params_short": "1B",
+        "context": "32K",
+        "context_k": 32,
+        "gpu_size": "large",
+        "supports_vision": False,
+        "loader_type": "causal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Ultra-lightweight. Ideal for edge devices and low-latency tasks. Text only.",
+        "release_year": 2025,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~2 GB",
+        "lmarena": None,
+        "architecture": "Transformer",
+        "badge": None,
+    },
+    "google/gemma-3-4b-it": {
+        "name": "Gemma 3 4B",
+        "short": "4B",
+        "family": "Gemma 3",
+        "family_color": "#137333",
+        "params": "4B parameters",
+        "params_short": "4B",
+        "context": "128K",
+        "context_k": 128,
+        "gpu_size": "large",
+        "supports_vision": True,
+        "loader_type": "vision_causal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Perfect balance between size and capability. Image + text. 128K context.",
+        "release_year": 2025,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~8 GB",
+        "lmarena": None,
+        "architecture": "Transformer",
+        "badge": None,
+    },
+    "google/gemma-3-12b-it": {
+        "name": "Gemma 3 12B",
+        "short": "12B",
+        "family": "Gemma 3",
+        "family_color": "#137333",
+        "params": "12B parameters",
+        "params_short": "12B",
+        "context": "128K",
+        "context_k": 128,
+        "gpu_size": "large",
+        "supports_vision": True,
+        "loader_type": "vision_causal",
+        "torch_dtype": torch.bfloat16,
+        "description": "High-capacity multimodal. Complex reasoning and image analysis.",
+        "release_year": 2025,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~24 GB",
+        "lmarena": None,
+        "architecture": "Transformer",
+        "badge": None,
+    },
+    "google/gemma-3-27b-it": {
+        "name": "Gemma 3 27B",
+        "short": "27B",
+        "family": "Gemma 3",
+        "family_color": "#137333",
+        "params": "27B parameters",
+        "params_short": "27B",
+        "context": "128K",
+        "context_k": 128,
+        "gpu_size": "large",
+        "supports_vision": True,
+        "loader_type": "vision_causal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Most capable Gemma 3. Advanced vision and high-level reasoning.",
+        "release_year": 2025,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~54 GB",
+        "lmarena": None,
+        "architecture": "Transformer",
+        "badge": None,
+    },
+    # ── Gemma 2 ───────────────────────────────────────────────────────────────
+    "google/gemma-2-2b-it": {
+        "name": "Gemma 2 2B",
+        "short": "2B",
+        "family": "Gemma 2",
+        "family_color": "#e37400",
+        "params": "2B parameters",
+        "params_short": "2B",
+        "context": "8K",
+        "context_k": 8,
+        "gpu_size": "large",
+        "supports_vision": False,
+        "loader_type": "causal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Fast and efficient. Sliding Window Attention. Text only.",
+        "release_year": 2024,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~4 GB",
+        "lmarena": None,
+        "architecture": "Sliding Window Attn",
+        "badge": None,
+    },
+    "google/gemma-2-9b-it": {
+        "name": "Gemma 2 9B",
+        "short": "9B",
+        "family": "Gemma 2",
+        "family_color": "#e37400",
+        "params": "9B parameters",
+        "params_short": "9B",
+        "context": "8K",
+        "context_k": 8,
+        "gpu_size": "large",
+        "supports_vision": False,
+        "loader_type": "causal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Solid text performance. Efficient architecture with sliding window.",
+        "release_year": 2024,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~18 GB",
+        "lmarena": None,
+        "architecture": "Sliding Window Attn",
+        "badge": None,
+    },
+    "google/gemma-2-27b-it": {
+        "name": "Gemma 2 27B",
+        "short": "27B",
+        "family": "Gemma 2",
+        "family_color": "#e37400",
+        "params": "27B parameters",
+        "params_short": "27B",
+        "context": "8K",
+        "context_k": 8,
+        "gpu_size": "large",
+        "supports_vision": False,
+        "loader_type": "causal",
+        "torch_dtype": torch.bfloat16,
+        "description": "Largest Gemma 2. High performance on complex text tasks.",
+        "release_year": 2024,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~54 GB",
+        "lmarena": None,
+        "architecture": "Sliding Window Attn",
+        "badge": None,
+    },
+    # ── Gemma 1 ───────────────────────────────────────────────────────────────
+    "google/gemma-1.1-2b-it": {
+        "name": "Gemma 1.1 2B",
+        "short": "2B",
+        "family": "Gemma 1",
+        "family_color": "#c5221f",
+        "params": "2B parameters",
+        "params_short": "2B",
+        "context": "8K",
+        "context_k": 8,
+        "gpu_size": "large",
+        "supports_vision": False,
+        "loader_type": "causal",
+        "torch_dtype": torch.float16,
+        "description": "The original foundation model. Where it all began. Text only.",
+        "release_year": 2024,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~4 GB",
+        "lmarena": None,
+        "architecture": "Transformer",
+        "badge": None,
+    },
+    "google/gemma-1.1-7b-it": {
+        "name": "Gemma 1.1 7B",
+        "short": "7B",
+        "family": "Gemma 1",
+        "family_color": "#c5221f",
+        "params": "7B parameters",
+        "params_short": "7B",
+        "context": "8K",
+        "context_k": 8,
+        "gpu_size": "large",
+        "supports_vision": False,
+        "loader_type": "causal",
+        "torch_dtype": torch.float16,
+        "description": "The original 7B. The historical base of the entire Gemma family.",
+        "release_year": 2024,
+        "license": "Gemma",
+        "license_open": False,
+        "vram": "~14 GB",
+        "lmarena": None,
+        "architecture": "Transformer",
+        "badge": None,
+    },
+}
+
+FAMILIES = {
+    "Gemma 4": {
+        "color": "#1a73e8",
+        "bg": "#e8f0fe",
+        "year": 2026,
+        "description": "The newest generation. Full multimodal (image + text). Apache 2.0. Just launched!",
+        "icon": "✦",
+        "new": True,
+    },
+    "Gemma 3": {
+        "color": "#137333",
+        "bg": "#e6f4ea",
+        "year": 2025,
+        "description": "Second generation with vision. Long contexts up to 128K tokens.",
+        "icon": "◆",
+        "new": False,
+    },
+    "Gemma 2": {
+        "color": "#e37400",
+        "bg": "#fef7e0",
+        "year": 2024,
+        "description": "Optimized for text with Sliding Window Attention. Efficient and fast.",
+        "icon": "●",
+        "new": False,
+    },
+    "Gemma 1": {
+        "color": "#c5221f",
+        "bg": "#fce8e6",
+        "year": 2024,
+        "description": "The original foundation models from Google DeepMind.",
+        "icon": "◉",
+        "new": False,
+    },
+}
+
+def get_models_by_family(family: str):
+    return {k: v for k, v in MODELS.items() if v["family"] == family}

requirements.txt

@@ -0,0 +1,8 @@
+gradio>=4.44.0
+transformers>=4.51.0
+torch>=2.3.0
+torchvision>=0.18.0
+accelerate>=0.30.0
+Pillow>=10.0.0
+sentencepiece>=0.2.0
+huggingface_hub>=0.23.0