Switch to gr.Server with custom semantic studio frontend

README.md

@@ -22,7 +22,7 @@ preload_from_hub:
 
 # WeMM Semantic Universe
 
-An immersive, retrieval-first showcase for [Tencent WeMM-Embedding-9B](https://huggingface.co/tencent/WeMM-Embedding-9B), a universal multimodal embedding model built on Qwen3.5.
+An immersive, retrieval-first showcase for [Tencent WeMM-Embedding-9B](https://huggingface.co/tencent/WeMM-Embedding-9B), a universal multimodal embedding model built on Qwen3.5. The interface is a fully custom HTML/CSS/JavaScript application served by `gr.Server`; Gradio provides the queued API engine and ZeroGPU integration without rendering the UI.
 
 The Space demonstrates the model as a shared semantic geometry rather than a single similarity score:
 
@@ -31,13 +31,14 @@ The Space demonstrates the model as a shared semantic geometry rather than a sin
 - Add a custom mixed-media candidate collection alongside the curated universe.
 - Inspect rankings at every native Matryoshka size: 64, 128, 256, 512, 1,024, 2,048, and 4,096 dimensions.
 - Compare any two supported inputs in the Vector Microscope.
-- Explore compressed vector fingerprints and a structured API payload.
+- Explore ranked media cards, Matryoshka stability curves, compressed vector fingerprints, and structured API telemetry.
+- Launch five one-click curated expeditions or drag in your own visual query and candidate set.
 
 ## Runtime design
 
 The model loads once on CPU at startup. A ZeroGPU allocation moves it to GPU only for inference, then returns it to CPU. The built-in candidate universe is embedded on the first search and cached as normalized 4,096-dimensional CPU tensors; all later dimension choices use lossless prefix truncation followed by re-normalization, without re-encoding the corpus.
 
-The first curated search is therefore slower than warm searches. The five `gr.Examples` are cached lazily so opening the Space does not consume GPU quota.
+The first curated search is therefore slower than warm searches. The five curated expeditions are implemented in the custom frontend and only invoke the model when selected, so opening the Space does not consume GPU quota.
 
 Live ZeroGPU validation measured 17.7 seconds for the cold 10-item multimodal corpus pass and 8.7 seconds for a video-plus-text to text retrieval pass. The callable GPU budgets use a 30-second heavy-path allowance and a 15-second light-path allowance; actual latency still varies with media length and queue conditions.
 
@@ -45,13 +46,20 @@ This repository targets `zero-a10g` (the current 48 GB ZeroGPU allocation). `sug
 
 ## API
 
-Once deployed, open **Use via API** in the Gradio footer to inspect the generated client signatures.
+The custom frontend calls the queued endpoints through `@gradio/client`, which preserves Hugging Face iframe authentication and ZeroGPU quota handling. The generated schema is available at `/gradio_api/info` (also linked as **API** in the top bar).
 
 - `/search` ranks a mixed candidate collection from a text/image/video query.
 - `/compare` compares a query and candidate across every native Matryoshka dimension.
 
 Always call `Client.view_api()` before invoking either endpoint so the client uses the deployed schema.
 
+## Interface architecture
+
+- `app.py` owns model loading, ZeroGPU functions, structured `/search` and `/compare` endpoints, and static routes.
+- `frontend/index.html` contains the semantic-search and vector-microscope application shell.
+- `frontend/app.css` provides the responsive visual system and motion.
+- `frontend/app.js` manages uploads, curated expeditions, queued client calls, and data visualizations.
+
 ## Score semantics
 
 Every output is an L2-normalized embedding. The displayed dot products are therefore cosine similarities. They are ranking signals within a candidate set—not calibrated probabilities or universal relevance grades.

app.py

@@ -1,20 +1,16 @@
 import os
 
 # ZeroGPU and library caches must be configured before importing spaces/torch.
-EXAMPLE_CACHE_VERSION = "2026-08-26-a"
 os.environ.setdefault("HF_HOME", os.path.expanduser("~/.cache/huggingface"))
 os.environ.setdefault("HF_MODULES_CACHE", "/tmp/hf_modules")
 os.environ.setdefault("MPLCONFIGDIR", "/tmp/matplotlib")
-os.environ.setdefault("GRADIO_EXAMPLES_CACHE", f"/tmp/gradio_cached_examples/{EXAMPLE_CACHE_VERSION}")
 os.environ.setdefault("GRADIO_ANALYTICS_ENABLED", "False")
 os.environ.setdefault("GRADIO_SSR_MODE", "false")
 os.environ.setdefault("TOKENIZERS_PARALLELISM", "false")
 
 import spaces
 
-import html
 import logging
-import math
 import threading
 import time
 from dataclasses import dataclass
@@ -24,12 +20,16 @@ from typing import Any
 import gradio as gr
 import torch
 import torch.nn.functional as F
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from gradio.data_classes import FileData
 from sentence_transformers import SentenceTransformer
 
 
 MODEL_ID = "tencent/WeMM-Embedding-9B"
 ROOT = Path(__file__).resolve().parent
 ASSET_DIR = ROOT / "assets"
+FRONTEND_DIR = ROOT / "frontend"
 MATRYOSHKA_DIMS = (64, 128, 256, 512, 1024, 2048, 4096)
 MAX_CUSTOM_TEXTS = 6
 MAX_CUSTOM_MEDIA = 6
@@ -147,7 +147,7 @@ _SHOWCASE_EMBEDDINGS: torch.Tensor | None = None
 
 
 def _file_path(value: Any) -> str | None:
-    """Normalize Gradio file values across UI and API representations."""
+    """Normalize Gradio file values across browser and programmatic clients."""
     if value is None:
         return None
     if isinstance(value, (str, Path)):
@@ -161,13 +161,7 @@ def _file_path(value: Any) -> str | None:
 
 def _is_video(path: str) -> bool:
     return Path(path.split("?", 1)[0]).suffix.lower() in {
-        ".mp4",
-        ".webm",
-        ".mov",
-        ".mkv",
-        ".avi",
-        ".mpeg",
-        ".mpg",
+        ".mp4", ".webm", ".mov", ".mkv", ".avi", ".mpeg", ".mpg"
     }
 
 
@@ -178,13 +172,9 @@ def _multimodal_payload(text: str | None, image: Any, video: Any) -> tuple[Any,
     if image_path and video_path:
         raise gr.Error("Choose one visual query: an image or a video, not both.")
     if image_path:
-        if text:
-            return {"image": image_path, "text": text}, "image + text"
-        return image_path, "image"
+        return ({"image": image_path, "text": text}, "image + text") if text else (image_path, "image")
     if video_path:
-        if text:
-            return {"video": video_path, "text": text}, "video + text"
-        return video_path, "video"
+        return ({"video": video_path, "text": text}, "video + text") if text else (video_path, "video")
     if text:
         return text, "text"
     raise gr.Error("Add a text, image, or video query to begin.")
@@ -201,17 +191,8 @@ def _parse_text_candidates(raw: str | None) -> list[Candidate]:
             title = title or f"Custom text {index}"
             body = body or title
         else:
-            title = f"Custom text {index}"
-            body = line
-        candidates.append(
-            Candidate(
-                f"custom-text-{index}",
-                title[:80],
-                "text",
-                body[:240],
-                body,
-            )
-        )
+            title, body = f"Custom text {index}", line
+        candidates.append(Candidate(f"custom-text-{index}", title[:80], "text", body[:240], body))
     return candidates
 
 
@@ -221,21 +202,14 @@ def _parse_media_candidates(raw: Any) -> list[Candidate]:
     if len(items) > MAX_CUSTOM_MEDIA:
         raise gr.Error(f"Upload at most {MAX_CUSTOM_MEDIA} candidate media files.")
     for index, item in enumerate(items, start=1):
-        media = item[0] if isinstance(item, (tuple, list)) else item
-        caption = item[1] if isinstance(item, (tuple, list)) and len(item) > 1 else None
-        path = _file_path(media)
+        path = _file_path(item)
         if not path:
             continue
         kind = "video" if _is_video(path) else "image"
-        title = (caption or f"Uploaded {kind} {index}").strip()
         candidates.append(
             Candidate(
-                f"custom-media-{index}",
-                title[:80],
-                kind,
-                f"User-supplied {kind} candidate.",
-                path,
-                path,
+                f"custom-media-{index}", f"Uploaded {kind} {index}", kind,
+                f"User-supplied {kind} candidate.", path, path,
             )
         )
     return candidates
@@ -245,11 +219,8 @@ def _encode(items: list[Any], *, query: bool) -> torch.Tensor:
     method = MODEL.encode_query if query else MODEL.encode_document
     with torch.inference_mode():
         embeddings = method(
-            items,
-            batch_size=1,
-            convert_to_tensor=True,
-            normalize_embeddings=True,
-            show_progress_bar=False,
+            items, batch_size=1, convert_to_tensor=True,
+            normalize_embeddings=True, show_progress_bar=False,
         )
     if embeddings.ndim == 1:
         embeddings = embeddings.unsqueeze(0)
@@ -269,6 +240,22 @@ def _dimension_scores(query: torch.Tensor, documents: torch.Tensor) -> dict[int,
     return scores
 
 
+def _fingerprint(vector: torch.Tensor, bar_count: int = 96) -> list[float]:
+    values = vector.detach().float().flatten()
+    chunks = torch.tensor_split(values, min(bar_count, values.numel()))
+    return [round(float(chunk.mean()), 7) for chunk in chunks]
+
+
+def _public_media(candidate: Candidate) -> str | None:
+    if not candidate.media_path:
+        return None
+    try:
+        relative = Path(candidate.media_path).resolve().relative_to(ASSET_DIR.resolve())
+    except ValueError:
+        return None
+    return f"/assets/{relative.as_posix()}"
+
+
 def _search_duration(*args: Any, **kwargs: Any) -> int:
     """Budget more time for the cold corpus pass and video queries."""
     query_payload = args[0] if args else None
@@ -301,9 +288,9 @@ def _run_search(
     try:
         progress(0.16, desc=f"Encoding the {query_kind} query")
         query_embedding = _encode([query_payload], query=True)
-
         document_blocks: list[torch.Tensor] = []
         candidates: list[Candidate] = []
+
         if include_showcase:
             with _CACHE_LOCK:
                 cached = _SHOWCASE_EMBEDDINGS
@@ -335,230 +322,11 @@ def _run_search(
             torch.cuda.empty_cache()
 
 
-def _score_tone(score: float) -> str:
-    if score >= 0.70:
-        return "high"
-    if score >= 0.40:
-        return "mid"
-    return "low"
-
-
-def _render_summary(
-    query_kind: str,
-    dimension: int,
-    candidate_count: int,
-    elapsed: float,
-    was_cold: bool,
-    top_title: str,
-    top_score: float,
-) -> str:
-    cache_note = "cold corpus map" if was_cold else "warm corpus cache"
-    return f"""
-    <section class="run-summary">
-      <div class="run-kicker"><span class="live-dot"></span> semantic field resolved</div>
-      <div class="run-main">
-        <div><span class="run-label">Top match</span><strong>{html.escape(top_title)}</strong></div>
-        <div class="hero-score"><span>{top_score:+.3f}</span><small>cosine</small></div>
-      </div>
-      <div class="run-meta">
-        <span>{html.escape(query_kind)}</span><i></i>
-        <span>{dimension:,}D</span><i></i>
-        <span>{candidate_count} candidates</span><i></i>
-        <span>{elapsed:.1f}s</span><i></i>
-        <span>{cache_note}</span>
-      </div>
-    </section>
-    """
-
-
-def _render_rankings(ranked: list[tuple[Candidate, float]]) -> str:
-    rows: list[str] = []
-    for rank, (candidate, score) in enumerate(ranked, start=1):
-        fill = min(100.0, max(2.0, max(0.0, score) * 100.0))
-        rows.append(
-            f"""
-            <article class="rank-row {'winner' if rank == 1 else ''}">
-              <div class="rank-number">{rank:02d}</div>
-              <div class="rank-copy">
-                <div class="rank-title-line">
-                  <strong>{html.escape(candidate.title)}</strong>
-                  <span class="kind-pill">{html.escape(candidate.kind)}</span>
-                </div>
-                <p>{html.escape(candidate.description)}</p>
-                <div class="score-track"><span style="width:{fill:.1f}%"></span></div>
-              </div>
-              <div class="rank-score { _score_tone(score) }">{score:+.3f}<small>cos</small></div>
-            </article>
-            """
-        )
-    return '<div class="ranking-stack">' + "".join(rows) + "</div>"
-
-
-def _render_curve(series: dict[str, list[float]], title: str) -> str:
-    width, height = 820, 300
-    left, right, top, bottom = 58, 20, 28, 48
-    plot_w, plot_h = width - left - right, height - top - bottom
-    all_values = [value for values in series.values() for value in values]
-    low = max(-1.0, min(all_values) - 0.08)
-    high = min(1.0, max(all_values) + 0.08)
-    if high - low < 0.2:
-        midpoint = (high + low) / 2
-        low, high = max(-1.0, midpoint - 0.1), min(1.0, midpoint + 0.1)
-
-    def x_at(index: int) -> float:
-        return left + index * plot_w / (len(MATRYOSHKA_DIMS) - 1)
-
-    def y_at(value: float) -> float:
-        return top + (high - value) * plot_h / max(1e-8, high - low)
-
-    grid: list[str] = []
-    for tick in range(5):
-        value = high - tick * (high - low) / 4
-        y = y_at(value)
-        grid.append(
-            f'<line x1="{left}" y1="{y:.1f}" x2="{width-right}" y2="{y:.1f}" class="chart-grid" />'
-            f'<text x="{left-10}" y="{y+4:.1f}" text-anchor="end" class="chart-axis">{value:+.2f}</text>'
-        )
-    for index, dimension in enumerate(MATRYOSHKA_DIMS):
-        x = x_at(index)
-        grid.append(f'<text x="{x:.1f}" y="{height-18}" text-anchor="middle" class="chart-axis">{dimension}</text>')
-
-    colors = ("#ffb86b", "#78e8df", "#a994ff", "#ff7aa2", "#9ad45b")
-    paths: list[str] = []
-    legend: list[str] = []
-    for series_index, (name, values) in enumerate(series.items()):
-        color = colors[series_index % len(colors)]
-        points = " ".join(f"{x_at(i):.1f},{y_at(value):.1f}" for i, value in enumerate(values))
-        circles = "".join(
-            f'<circle cx="{x_at(i):.1f}" cy="{y_at(value):.1f}" r="3.5" fill="{color}" />'
-            for i, value in enumerate(values)
-        )
-        paths.append(f'<polyline points="{points}" fill="none" stroke="{color}" stroke-width="3" />{circles}')
-        legend.append(
-            f'<span><b style="background:{color}"></b>{html.escape(name[:38])}</span>'
-        )
-
-    return f"""
-    <section class="viz-card">
-      <div class="viz-heading"><div><small>MATRYOSHKA SCOPE</small><h3>{html.escape(title)}</h3></div><span>64 → 4096 dimensions</span></div>
-      <svg class="dimension-chart" viewBox="0 0 {width} {height}" role="img" aria-label="Similarity by embedding dimension">
-        {''.join(grid)}{''.join(paths)}
-      </svg>
-      <div class="chart-legend">{''.join(legend)}</div>
-      <p class="viz-note">Cosine similarity at every native truncation size. Compare trends, not universal thresholds.</p>
-    </section>
-    """
-
-
-def _fingerprint_svg(vector: torch.Tensor, label: str) -> str:
-    values = vector.detach().float().flatten()
-    bar_count = min(96, values.numel())
-    chunks = torch.tensor_split(values, bar_count)
-    samples = [float(chunk.mean()) for chunk in chunks]
-    scale = max(max(abs(value) for value in samples), 1e-6)
-    width, height = 800, 210
-    center = 104
-    bar_w = (width - 24) / bar_count
-    bars: list[str] = []
-    for index, value in enumerate(samples):
-        magnitude = min(84.0, abs(value) / scale * 84.0)
-        x = 12 + index * bar_w
-        y = center - magnitude if value >= 0 else center
-        color = "#70e4da" if value >= 0 else "#ff9d57"
-        bars.append(
-            f'<rect x="{x:.1f}" y="{y:.1f}" width="{max(1.2, bar_w-1.5):.1f}" height="{magnitude:.1f}" rx="1.5" fill="{color}" opacity=".9" />'
-        )
-    return f"""
-    <section class="viz-card fingerprint-card">
-      <div class="viz-heading"><div><small>VECTOR FINGERPRINT</small><h3>{html.escape(label)}</h3></div><span>{values.numel():,} values</span></div>
-      <svg class="fingerprint" viewBox="0 0 {width} {height}" role="img" aria-label="Compressed signed embedding fingerprint">
-        <line x1="12" y1="{center}" x2="{width-12}" y2="{center}" class="zero-line" />
-        {''.join(bars)}
-      </svg>
-      <div class="fingerprint-key"><span><b class="positive"></b>positive</span><span><b class="negative"></b>negative</span><em>96 pooled slices · shape, not magnitude</em></div>
-    </section>
-    """
-
-
-def search_experience(
-    query_text: str,
-    query_image: Any,
-    query_video: Any,
-    custom_texts: str,
-    candidate_media: Any,
-    include_showcase: bool,
-    dimension: int,
-    progress: gr.Progress = gr.Progress(track_tqdm=True),
-) -> tuple[str, str, list[tuple[str, str]], str, str, dict[str, Any]]:
-    """Search a mixed text/image/video collection with a multimodal query."""
-    dimension = int(dimension)
-    if dimension not in MATRYOSHKA_DIMS:
-        raise gr.Error("Choose one of the model's native Matryoshka dimensions.")
-    query_payload, query_kind = _multimodal_payload(query_text, query_image, query_video)
-    custom_candidates = _parse_text_candidates(custom_texts) + _parse_media_candidates(candidate_media)
-
-    with _INFERENCE_LOCK:
-        query, documents, candidates, elapsed, was_cold = _run_search(
-            query_payload,
-            query_kind,
-            custom_candidates,
-            bool(include_showcase),
-            dimension,
-            progress,
-        )
-    dimension_map = _dimension_scores(query, documents)
-    chosen_scores = dimension_map[dimension]
-    order = sorted(range(len(candidates)), key=lambda index: chosen_scores[index], reverse=True)
-    ranked = [(candidates[index], float(chosen_scores[index])) for index in order]
-
-    top_candidate, top_score = ranked[0]
-    summary = _render_summary(
-        query_kind,
-        dimension,
-        len(candidates),
-        elapsed,
-        was_cold,
-        top_candidate.title,
-        top_score,
-    )
-    rankings = _render_rankings(ranked[:8])
-    gallery = [
-        (candidate.media_path, f"#{rank} · {candidate.title} · cosine {score:+.3f}")
-        for rank, (candidate, score) in enumerate(ranked, start=1)
-        if candidate.media_path
-    ][:8]
-
-    curve_series: dict[str, list[float]] = {}
-    for index in order[:4]:
-        curve_series[candidates[index].title] = [dimension_map[dim][index] for dim in MATRYOSHKA_DIMS]
-    curve = _render_curve(curve_series, "Does the ranking survive compression?")
-    fingerprint = _fingerprint_svg(query[0, :dimension], f"Query · {query_kind} · {dimension:,}D")
-
-    diagnostics = {
-        "model": MODEL_ID,
-        "query_modality": query_kind,
-        "selected_dimension": dimension,
-        "full_embedding_dimension": int(query.shape[-1]),
-        "l2_norm_after_truncation": round(float(_truncate_normalize(query, dimension).norm()), 6),
-        "candidate_count": len(candidates),
-        "gpu_pass_seconds": round(elapsed, 3),
-        "showcase_cache": "created" if was_cold else "reused" if include_showcase else "not_requested",
-        "top_matches": [
-            {"rank": rank, "title": item.title, "modality": item.kind, "cosine": round(score, 6)}
-            for rank, (item, score) in enumerate(ranked[:5], start=1)
-        ],
-        "query_vector_preview": [round(float(value), 6) for value in query[0, :12]],
-        "note": "Cosine similarity is a ranking signal, not a calibrated probability.",
-    }
-    return summary, rankings, gallery, curve, fingerprint, diagnostics
-
-
 def _pair_duration(*args: Any, **kwargs: Any) -> int:
-    payloads = args[:2]
     has_video = any(
         (isinstance(value, dict) and bool(value.get("video")))
         or (isinstance(value, str) and _is_video(value))
-        for value in payloads
+        for value in args[:2]
     )
     return 30 if has_video else 15
 
@@ -594,467 +362,154 @@ def _interpret_score(score: float) -> tuple[str, str]:
     return "low alignment", "The model places these inputs relatively far apart."
 
 
-def _render_pair_score(score: float, dimension: int, query_kind: str, candidate_kind: str, elapsed: float) -> str:
-    label, explanation = _interpret_score(score)
-    ring = min(100.0, max(0.0, (score + 1.0) * 50.0))
-    return f"""
-    <section class="pair-score-card">
-      <div class="score-orbit" style="--score:{ring:.2f}">
-        <div><strong>{score:+.3f}</strong><span>cosine</span></div>
-      </div>
-      <div class="pair-score-copy">
-        <small>PAIRWISE READOUT</small>
-        <h2>{html.escape(label)}</h2>
-        <p>{html.escape(explanation)}</p>
-        <div class="run-meta"><span>{html.escape(query_kind)}</span><i></i><span>{html.escape(candidate_kind)}</span><i></i><span>{dimension:,}D</span><i></i><span>{elapsed:.1f}s</span></div>
-      </div>
-    </section>
-    """
-
-
-def compare_experience(
-    query_text: str,
-    query_image: Any,
-    query_video: Any,
-    candidate_text: str,
-    candidate_image: Any,
-    candidate_video: Any,
-    dimension: int,
+app = gr.Server(
+    title="WeMM Semantic Universe API",
+    summary="Custom multimodal retrieval studio powered by tencent/WeMM-Embedding-9B",
+    version="2.0.0",
+)
+
+
+@app.api(
+    name="search",
+    description="Rank a mixed text/image/video collection using WeMM-Embedding-9B.",
+    concurrency_limit=1,
+    concurrency_id="wemm_gpu",
+    time_limit=300,
+)
+def search_api(
+    query_text: str = "",
+    query_image: FileData | None = None,
+    query_video: FileData | None = None,
+    custom_texts: str = "",
+    candidate_media: list[FileData] | None = None,
+    include_showcase: bool = True,
+    dimension: int = 1024,
     progress: gr.Progress = gr.Progress(track_tqdm=True),
-) -> tuple[str, str, str, dict[str, Any]]:
-    """Compare any two supported inputs across all Matryoshka dimensions."""
+) -> dict[str, Any]:
+    """Search a mixed media collection and return structured visualization data."""
     dimension = int(dimension)
+    if dimension not in MATRYOSHKA_DIMS:
+        raise gr.Error("Choose one of the model's native Matryoshka dimensions.")
+
     query_payload, query_kind = _multimodal_payload(query_text, query_image, query_video)
-    candidate_payload, candidate_kind = _multimodal_payload(candidate_text, candidate_image, candidate_video)
+    custom_candidates = _parse_text_candidates(custom_texts) + _parse_media_candidates(candidate_media)
+    with _INFERENCE_LOCK:
+        query, documents, candidates, elapsed, was_cold = _run_search(
+            query_payload, query_kind, custom_candidates, bool(include_showcase), dimension, progress,
+        )
+
+    dimension_map = _dimension_scores(query, documents)
+    chosen_scores = dimension_map[dimension]
+    order = sorted(range(len(candidates)), key=lambda index: chosen_scores[index], reverse=True)
+    ranked = [
+        {
+            "rank": rank,
+            "key": candidates[index].key,
+            "title": candidates[index].title,
+            "kind": candidates[index].kind,
+            "description": candidates[index].description,
+            "score": round(float(chosen_scores[index]), 7),
+            "media_url": _public_media(candidates[index]),
+        }
+        for rank, index in enumerate(order, start=1)
+    ]
+    curve_series = [
+        {
+            "key": candidates[index].key,
+            "title": candidates[index].title,
+            "values": [round(float(dimension_map[dim][index]), 7) for dim in MATRYOSHKA_DIMS],
+        }
+        for index in order[:4]
+    ]
+    return {
+        "mode": "search",
+        "model": MODEL_ID,
+        "query_kind": query_kind,
+        "dimension": dimension,
+        "dimensions": list(MATRYOSHKA_DIMS),
+        "candidate_count": len(candidates),
+        "elapsed_seconds": round(elapsed, 3),
+        "cache_state": "created" if was_cold else "reused" if include_showcase else "not requested",
+        "top_match": ranked[0],
+        "rankings": ranked,
+        "dimension_series": curve_series,
+        "query_fingerprint": _fingerprint(query[0, :dimension]),
+        "full_embedding_dimension": int(query.shape[-1]),
+        "query_vector_preview": [round(float(value), 7) for value in query[0, :12]],
+        "l2_norm_after_truncation": round(float(_truncate_normalize(query, dimension).norm()), 7),
+        "note": "Cosine similarity is a ranking signal, not a calibrated probability.",
+    }
+
+
+@app.api(
+    name="compare",
+    description="Compare a multimodal query and candidate across every native Matryoshka dimension.",
+    concurrency_limit=1,
+    concurrency_id="wemm_gpu",
+    time_limit=240,
+)
+def compare_api(
+    query_text: str = "",
+    query_image: FileData | None = None,
+    query_video: FileData | None = None,
+    candidate_text: str = "",
+    candidate_image: FileData | None = None,
+    candidate_video: FileData | None = None,
+    dimension: int = 1024,
+    progress: gr.Progress = gr.Progress(track_tqdm=True),
+) -> dict[str, Any]:
+    """Compare two supported inputs and return structured visualization data."""
+    dimension = int(dimension)
+    if dimension not in MATRYOSHKA_DIMS:
+        raise gr.Error("Choose one of the model's native Matryoshka dimensions.")
+
+    query_payload, query_kind = _multimodal_payload(query_text, query_image, query_video)
+    candidate_payload, candidate_kind = _multimodal_payload(
+        candidate_text, candidate_image, candidate_video
+    )
     with _INFERENCE_LOCK:
         query, candidate, elapsed = _run_pair(query_payload, candidate_payload, progress)
-    scores_by_dimension = {
+
+    scores = {
         dim: float((_truncate_normalize(query, dim) @ _truncate_normalize(candidate, dim).T).item())
         for dim in MATRYOSHKA_DIMS
     }
-    selected_score = scores_by_dimension[dimension]
-    score_card = _render_pair_score(selected_score, dimension, query_kind, candidate_kind, elapsed)
-    curve = _render_curve(
-        {f"{query_kind} → {candidate_kind}": [scores_by_dimension[dim] for dim in MATRYOSHKA_DIMS]},
-        "Semantic alignment under compression",
-    )
-    fingerprints = (
-        '<div class="fingerprint-pair">'
-        + _fingerprint_svg(query[0, :dimension], f"Query · {query_kind}")
-        + _fingerprint_svg(candidate[0, :dimension], f"Candidate · {candidate_kind}")
-        + "</div>"
-    )
-    diagnostics = {
+    selected_score = scores[dimension]
+    label, explanation = _interpret_score(selected_score)
+    return {
+        "mode": "compare",
         "model": MODEL_ID,
-        "query_modality": query_kind,
-        "candidate_modality": candidate_kind,
-        "selected_dimension": dimension,
-        "selected_cosine": round(selected_score, 6),
-        "cosine_by_dimension": {str(dim): round(score, 6) for dim, score in scores_by_dimension.items()},
-        "gpu_pass_seconds": round(elapsed, 3),
+        "query_kind": query_kind,
+        "candidate_kind": candidate_kind,
+        "dimension": dimension,
+        "dimensions": list(MATRYOSHKA_DIMS),
+        "selected_score": round(selected_score, 7),
+        "label": label,
+        "explanation": explanation,
+        "scores": [round(scores[dim], 7) for dim in MATRYOSHKA_DIMS],
+        "query_fingerprint": _fingerprint(query[0, :dimension]),
+        "candidate_fingerprint": _fingerprint(candidate[0, :dimension]),
+        "elapsed_seconds": round(elapsed, 3),
         "note": "Interpret thresholds relative to a task-specific candidate set.",
     }
-    return score_card, curve, fingerprints, diagnostics
-
-
-CSS = """
-:root {
-  --ink: #f6f3ec;
-  --muted: #a9abb5;
-  --panel: rgba(17, 20, 26, .82);
-  --line: rgba(255, 255, 255, .10);
-  --warm: #ffad66;
-  --cool: #71e2da;
-  --violet: #a994ff;
-}
-
-body, .gradio-container {
-  background:
-    radial-gradient(circle at 13% 0%, rgba(255, 143, 68, .16), transparent 30rem),
-    radial-gradient(circle at 92% 13%, rgba(88, 218, 211, .11), transparent 34rem),
-    #090b10 !important;
-  color: var(--ink) !important;
-}
-.gradio-container { max-width: 1380px !important; padding: 0 28px 60px !important; }
-.gradio-container * { box-sizing: border-box; }
-.gradio-container .prose { color: var(--ink); }
-.gradio-container label, .gradio-container .label-wrap { color: #d7d7dc !important; }
-.gradio-container input, .gradio-container textarea {
-  background: rgba(7, 9, 13, .72) !important;
-  border-color: rgba(255,255,255,.12) !important;
-  color: #f8f6f1 !important;
-}
-.gradio-container .block, .gradio-container .form {
-  border-color: var(--line) !important;
-}
-
-#hero { padding: 76px 4px 38px; }
-.hero-shell { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); padding-bottom: 44px; }
-.eyebrow { display:flex; align-items:center; gap:10px; color:var(--cool); font-size:12px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
-.eyebrow:before { content:""; width:26px; height:1px; background:var(--cool); box-shadow:0 0 14px var(--cool); }
-.hero-title { margin: 18px 0 8px; font-size: clamp(52px, 8vw, 112px); line-height:.88; letter-spacing:-.075em; font-weight:760; }
-.hero-title .accent { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.62); }
-.hero-title .dot { color:var(--warm); text-shadow:0 0 42px rgba(255,173,102,.6); }
-.hero-sub { max-width:760px; margin:24px 0 0; font-size:clamp(17px,2vw,23px); line-height:1.55; color:#c0c1c8; }
-.hero-grid { display:grid; grid-template-columns:1fr auto; align-items:end; gap:30px; }
-.hero-stats { display:grid; grid-template-columns:repeat(2,minmax(110px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); min-width:350px; }
-.hero-stats div { background:rgba(9,11,16,.88); padding:18px 20px; }
-.hero-stats strong { display:block; font-size:28px; line-height:1; color:#fff; letter-spacing:-.04em; }
-.hero-stats span { display:block; margin-top:8px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
-.capability-rail { display:flex; gap:8px; flex-wrap:wrap; margin-top:26px; }
-.capability-rail span { border:1px solid var(--line); border-radius:99px; padding:7px 12px; color:#c9c9cf; font-size:12px; background:rgba(255,255,255,.025); }
-
-.section-intro { margin:34px 0 18px; }
-.section-intro small, .viz-heading small, .pair-score-copy small { color:var(--warm); letter-spacing:.16em; font-weight:750; font-size:11px; }
-.section-intro h2 { font-size:30px; letter-spacing:-.035em; margin:6px 0; }
-.section-intro p { color:var(--muted); margin:0; max-width:760px; }
-
-.input-panel, .output-panel { background:linear-gradient(145deg,rgba(22,25,32,.9),rgba(12,14,19,.86)) !important; border:1px solid var(--line) !important; border-radius:18px !important; padding:18px !important; box-shadow:0 22px 70px rgba(0,0,0,.24); }
-.primary-action { min-height:52px !important; border:0 !important; color:#16110d !important; font-weight:800 !important; letter-spacing:.01em; background:linear-gradient(105deg,#ff8e54,#ffd187) !important; box-shadow:0 10px 30px rgba(255,142,84,.2) !important; }
-.primary-action:hover { transform:translateY(-1px); filter:brightness(1.04); }
-
-.run-summary { border:1px solid rgba(112,228,218,.22); border-radius:18px; padding:22px 24px; background:linear-gradient(120deg,rgba(31,48,48,.54),rgba(17,19,25,.94)); margin-bottom:16px; }
-.run-kicker { color:var(--cool); font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:750; }
-.live-dot { display:inline-block; width:7px; height:7px; border-radius:99px; background:var(--cool); box-shadow:0 0 15px var(--cool); margin-right:8px; }
-.run-main { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:14px 0 18px; }
-.run-label { display:block; color:var(--muted); font-size:12px; margin-bottom:5px; }
-.run-main strong { font-size:clamp(23px,3vw,38px); letter-spacing:-.04em; }
-.hero-score { text-align:right; }
-.hero-score span { display:block; font-size:40px; color:var(--cool); font-variant-numeric:tabular-nums; letter-spacing:-.05em; }
-.hero-score small { color:var(--muted); text-transform:uppercase; letter-spacing:.14em; }
-.run-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; color:#aeb0b8; font-size:12px; }
-.run-meta i { display:block; width:3px; height:3px; border-radius:99px; background:#555963; }
-
-.ranking-stack { display:grid; gap:9px; }
-.rank-row { display:grid; grid-template-columns:48px 1fr 80px; gap:16px; align-items:center; padding:15px 17px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025); transition:.2s ease; }
-.rank-row:hover { transform:translateX(3px); border-color:rgba(255,173,102,.28); background:rgba(255,255,255,.04); }
-.rank-row.winner { border-color:rgba(255,173,102,.35); background:linear-gradient(100deg,rgba(255,150,85,.11),rgba(255,255,255,.025)); }
-.rank-number { color:#6d7079; font-size:14px; font-variant-numeric:tabular-nums; }
-.rank-title-line { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
-.rank-title-line strong { font-size:16px; color:#f7f3ec; }
-.kind-pill { font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:#bfc1c8; border:1px solid var(--line); border-radius:99px; padding:4px 7px; }
-.rank-copy p { margin:4px 0 9px; color:#91949e; font-size:12px; line-height:1.45; }
-.score-track { height:2px; background:rgba(255,255,255,.06); overflow:hidden; }
-.score-track span { display:block; height:100%; background:linear-gradient(90deg,var(--warm),var(--cool)); }
-.rank-score { text-align:right; font-size:18px; font-variant-numeric:tabular-nums; color:#b9bbc2; }
-.rank-score.high { color:var(--cool); }.rank-score.mid { color:var(--warm); }
-.rank-score small { display:block; font-size:8px; color:#747780; letter-spacing:.14em; margin-top:3px; text-transform:uppercase; }
-
-.viz-card { border:1px solid var(--line); border-radius:18px; padding:20px; background:rgba(15,17,23,.78); overflow:hidden; }
-.viz-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
-.viz-heading h3 { margin:5px 0 0; font-size:20px; letter-spacing:-.025em; }
-.viz-heading > span { color:#8f929d; font-size:11px; border:1px solid var(--line); border-radius:99px; padding:6px 9px; }
-.dimension-chart, .fingerprint { width:100%; height:auto; overflow:visible; }
-.chart-grid { stroke:rgba(255,255,255,.07); stroke-width:1; }
-.chart-axis { fill:#777b85; font-size:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
-.chart-legend { display:flex; flex-wrap:wrap; gap:8px 16px; }
-.chart-legend span { color:#aeb0b8; font-size:11px; }
-.chart-legend b { display:inline-block; width:7px; height:7px; border-radius:99px; margin-right:6px; }
-.viz-note { margin:14px 0 0; color:#6f727c; font-size:11px; }
-.zero-line { stroke:rgba(255,255,255,.18); stroke-width:1; }
-.fingerprint-key { display:flex; gap:14px; align-items:center; flex-wrap:wrap; color:#848791; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
-.fingerprint-key b { display:inline-block; width:7px; height:7px; border-radius:2px; margin-right:5px; }.fingerprint-key .positive{background:var(--cool)}.fingerprint-key .negative{background:var(--warm)}
-.fingerprint-key em { margin-left:auto; text-transform:none; letter-spacing:0; color:#6e717a; }
-.fingerprint-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
-
-.pair-score-card { display:grid; grid-template-columns:190px 1fr; gap:30px; align-items:center; border:1px solid rgba(169,148,255,.24); border-radius:20px; padding:26px; background:linear-gradient(125deg,rgba(50,40,80,.35),rgba(14,17,23,.92)); }
-.score-orbit { width:170px; aspect-ratio:1; border-radius:50%; padding:2px; background:conic-gradient(var(--violet) calc(var(--score)*1%),rgba(255,255,255,.07) 0); box-shadow:0 0 55px rgba(169,148,255,.12); }
-.score-orbit > div { width:100%; height:100%; border-radius:50%; background:#0d0f15; display:flex; flex-direction:column; align-items:center; justify-content:center; }
-.score-orbit strong { font-size:38px; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }.score-orbit span{color:#777b85;font-size:10px;text-transform:uppercase;letter-spacing:.14em}
-.pair-score-copy h2 { margin:6px 0 8px; font-size:34px; letter-spacing:-.045em; }.pair-score-copy p{color:#aeb0b8;max-width:580px}
-
-.model-note { margin:28px 0 0; padding:18px 20px; border-left:2px solid var(--warm); background:rgba(255,173,102,.05); color:#9ea0aa; font-size:12px; line-height:1.6; }
-.space-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; border-top:1px solid var(--line); padding:28px 4px 0; margin-top:44px; color:#767984; font-size:12px; }
-.space-footer a { color:#c4c6cd !important; text-decoration:none; }.space-footer a:hover{color:var(--warm)!important}
-
-@media (max-width: 900px) {
-  .gradio-container { padding:0 14px 40px !important; }
-  #hero { padding-top:44px; }
-  .hero-grid { grid-template-columns:1fr; }
-  .hero-stats { min-width:0; width:100%; }
-  .fingerprint-pair { grid-template-columns:1fr; }
-}
-@media (max-width: 620px) {
-  .hero-title { font-size:50px; }
-  .hero-stats { grid-template-columns:1fr 1fr; }
-  .rank-row { grid-template-columns:34px 1fr 64px; gap:8px; padding:12px 10px; }
-  .rank-copy p { display:none; }
-  .pair-score-card { grid-template-columns:1fr; text-align:center; }
-  .score-orbit { margin:auto; }.pair-score-copy .run-meta{justify-content:center}
-}
-"""
-
-
-HERO = """
-<div id="hero" class="hero-shell">
-  <div class="eyebrow">Tencent WeMM · multimodal embedding</div>
-  <div class="hero-grid">
-    <div>
-      <h1 class="hero-title">One space<span class="accent">.<br>Every medium</span><span class="dot">.</span></h1>
-      <p class="hero-sub">Search meaning—not file types—across text, images, video, charts, and visual documents in one shared semantic geometry.</p>
-      <div class="capability-rail"><span>text ↔ image</span><span>text ↔ video</span><span>visual documents</span><span>interleaved inputs</span><span>Matryoshka embeddings</span></div>
-    </div>
-    <div class="hero-stats">
-      <div><strong>4096</strong><span>native dimensions</span></div>
-      <div><strong>9B</strong><span>parameters</span></div>
-      <div><strong>80.6</strong><span>MMEB-v2 avg</span></div>
-      <div><strong>190</strong><span>MMEB-v3 tasks</span></div>
-    </div>
-  </div>
-</div>
-"""
-
-
-INTRO_SEARCH = """
-<div class="section-intro">
-  <small>01 / RETRIEVAL UNIVERSE</small>
-  <h2>Ask in one modality. Discover in another.</h2>
-  <p>Search the built-in field of screenshots, figures, dense documents, video, and multilingual text—or bring your own candidates.</p>
-</div>
-"""
-
-
-INTRO_PAIR = """
-<div class="section-intro">
-  <small>02 / VECTOR MICROSCOPE</small>
-  <h2>Put any two ideas under the lens.</h2>
-  <p>Use a query and candidate as text, image, video, or visual-plus-text. Then watch their alignment change as the embedding compresses.</p>
-</div>
-"""
-
-
-INITIAL_SUMMARY = """
-<section class="run-summary">
-  <div class="run-kicker"><span class="live-dot"></span> model ready</div>
-  <div class="run-main"><div><span class="run-label">Awaiting a query</span><strong>Search across media</strong></div><div class="hero-score"><span>—</span><small>cosine</small></div></div>
-  <div class="run-meta"><span>text</span><i></i><span>image</span><i></i><span>video</span><i></i><span>visual documents</span></div>
-</section>
-"""
-
-
-INITIAL_RANKING = """
-<div class="model-note">Choose a curated example below or compose a multimodal query. The first run maps the showcase corpus once; later searches reuse its CPU-cached 4,096D vectors.</div>
-"""
-
-
-with gr.Blocks(css=CSS, title="WeMM · Multimodal Embedding Universe", fill_width=True) as demo:
-    gr.HTML(HERO)
-
-    with gr.Tabs():
-        with gr.Tab("Search the universe", id="search"):
-            gr.HTML(INTRO_SEARCH)
-            with gr.Row(equal_height=False):
-                with gr.Column(scale=5, elem_classes="input-panel"):
-                    query_text = gr.Textbox(
-                        label="Query · text",
-                        placeholder="Try: Which document explains temporary road closures?",
-                        lines=3,
-                        max_lines=7,
-                    )
-                    with gr.Row():
-                        query_image = gr.Image(
-                            label="Query · image (optional)",
-                            type="filepath",
-                            sources=["upload", "clipboard", "webcam"],
-                            height=220,
-                        )
-                        query_video = gr.Video(
-                            label="Query · video (optional)",
-                            format="mp4",
-                            height=220,
-                        )
-                    gr.Markdown("Add text to an image or video to create a joint multimodal query.")
-                    with gr.Accordion("Build your own candidate collection", open=False):
-                        custom_texts = gr.Textbox(
-                            label="Text candidates",
-                            placeholder="Title :: Candidate text\nAnother title :: Another candidate",
-                            lines=5,
-                            info=f"One candidate per line, up to {MAX_CUSTOM_TEXTS}.",
-                        )
-                        candidate_media = gr.Gallery(
-                            label="Image + video candidates",
-                            type="filepath",
-                            file_types=["image", "video"],
-                            sources=["upload"],
-                            columns=3,
-                            height=250,
-                        )
-                    include_showcase = gr.Checkbox(
-                        value=True,
-                        label="Include the curated multimodal universe",
-                        info="10 candidates spanning text, images, video, figures, and visual documents.",
-                    )
-                    dimension = gr.Radio(
-                        choices=list(MATRYOSHKA_DIMS),
-                        value=1024,
-                        label="Embedding budget",
-                        info="Native Matryoshka dimensions; smaller vectors trade storage for fidelity.",
-                    )
-                    search_button = gr.Button("Map the semantic field  →", variant="primary", elem_classes="primary-action")
-
-                with gr.Column(scale=7, elem_classes="output-panel"):
-                    search_summary = gr.HTML(INITIAL_SUMMARY)
-                    ranking_output = gr.HTML(INITIAL_RANKING)
-
-            with gr.Row(equal_height=False):
-                result_gallery = gr.Gallery(
-                    value=[
-                        (str(ASSET_DIR / "llama4_hgf.png"), "Visual document · Llama 4 model card"),
-                        (str(ASSET_DIR / "doc2.jpg"), "Visual document · 1971 budget infographic"),
-                        (str(ASSET_DIR / "mapo_tofu.mp4"), "Video · Mapo tofu in motion"),
-                        (str(ASSET_DIR / "doc4.jpg"), "Visual document · road-safety assessment"),
-                    ],
-                    label="Ranked visual field",
-                    columns=4,
-                    rows=2,
-                    height=430,
-                    object_fit="contain",
-                    interactive=False,
-                    buttons=["fullscreen", "download_all"],
-                )
-            with gr.Row(equal_height=False):
-                dimension_output = gr.HTML('<div class="viz-card"><div class="viz-heading"><div><small>MATRYOSHKA SCOPE</small><h3>Dimension stability appears here</h3></div></div></div>')
-                fingerprint_output = gr.HTML('<div class="viz-card"><div class="viz-heading"><div><small>VECTOR FINGERPRINT</small><h3>Your query vector appears here</h3></div></div></div>')
-            with gr.Accordion("Embedding telemetry · inspect the API payload", open=False):
-                diagnostics_output = gr.JSON(label="Diagnostics")
-
-            example_inputs = [
-                query_text,
-                query_image,
-                query_video,
-                custom_texts,
-                candidate_media,
-                include_showcase,
-                dimension,
-            ]
-            example_outputs = [
-                search_summary,
-                ranking_output,
-                result_gallery,
-                dimension_output,
-                fingerprint_output,
-                diagnostics_output,
-            ]
-            gr.Examples(
-                examples=[
-                    ["Which Llama 4 model variants are available?", None, None, "", None, True, 512],
-                    ["How is mapo tofu prepared?", None, None, "", None, True, 1024],
-                    ["Find the environmental assessment page about driver training and temporary road closures.", None, None, "", None, True, 256],
-                    [
-                        "Match this screenshot to the most relevant description.",
-                        str(ASSET_DIR / "llama4_hgf.png"),
-                        None,
-                        "Llama family :: Scout and Maverick are multimodal mixture-of-experts model variants.\nRecipe :: Soft tofu simmered in spicy chili-bean sauce.",
-                        None,
-                        False,
-                        256,
-                    ],
-                    [
-                        "What dish is being prepared in this clip?",
-                        None,
-                        str(ASSET_DIR / "mapo_tofu.mp4"),
-                        "Sichuan classic :: Mapo tofu combines soft tofu with a spicy, numbing bean-paste sauce.\nSpaceflight :: A launch vehicle carries a satellite into orbit.",
-                        None,
-                        False,
-                        512,
-                    ],
-                ],
-                inputs=example_inputs,
-                outputs=example_outputs,
-                fn=search_experience,
-                cache_examples=True,
-                cache_mode="lazy",
-                label="Curated expeditions",
-                example_labels=[
-                    "Find Llama 4 across a screenshot",
-                    "Search a cooking video with text",
-                    "Retrieve a dense safety document",
-                    "Match an image to text candidates",
-                    "Match a video to text candidates",
-                ],
-            )
 
-            search_event = search_button.click(
-                fn=search_experience,
-                inputs=example_inputs,
-                outputs=example_outputs,
-                api_name="search",
-                api_description="Rank a mixed text/image/video collection using WeMM-Embedding-9B.",
-                concurrency_limit=1,
-                concurrency_id="wemm_gpu",
-                time_limit=300,
-                scroll_to_output=True,
-            )
-            query_text.submit(
-                fn=search_experience,
-                inputs=example_inputs,
-                outputs=example_outputs,
-                api_name=None,
-                api_visibility="private",
-                concurrency_limit=1,
-                concurrency_id="wemm_gpu",
-                time_limit=300,
-                scroll_to_output=True,
-            )
 
-        with gr.Tab("Compare two ideas", id="compare"):
-            gr.HTML(INTRO_PAIR)
-            with gr.Row(equal_height=False):
-                with gr.Column(elem_classes="input-panel"):
-                    gr.Markdown("### A · Query")
-                    pair_query_text = gr.Textbox(label="Text", placeholder="Describe or contextualize the query", lines=3)
-                    with gr.Row():
-                        pair_query_image = gr.Image(label="Image", type="filepath", height=210)
-                        pair_query_video = gr.Video(label="Video", format="mp4", height=210)
-                with gr.Column(elem_classes="input-panel"):
-                    gr.Markdown("### B · Candidate")
-                    pair_candidate_text = gr.Textbox(label="Text", placeholder="Describe or contextualize the candidate", lines=3)
-                    with gr.Row():
-                        pair_candidate_image = gr.Image(label="Image", type="filepath", height=210)
-                        pair_candidate_video = gr.Video(label="Video", format="mp4", height=210)
-            pair_dimension = gr.Radio(
-                choices=list(MATRYOSHKA_DIMS),
-                value=1024,
-                label="Embedding budget",
-            )
-            compare_button = gr.Button("Measure semantic alignment  →", variant="primary", elem_classes="primary-action")
-            pair_score_output = gr.HTML('<div class="model-note">Add one modality on each side. You may pair visual media with text context.</div>')
-            pair_curve_output = gr.HTML('<div class="viz-card"><div class="viz-heading"><div><small>MATRYOSHKA SCOPE</small><h3>Alignment by dimension appears here</h3></div></div></div>')
-            pair_fingerprints_output = gr.HTML()
-            with gr.Accordion("Pairwise telemetry", open=False):
-                pair_diagnostics_output = gr.JSON(label="Diagnostics")
-
-            pair_inputs = [
-                pair_query_text,
-                pair_query_image,
-                pair_query_video,
-                pair_candidate_text,
-                pair_candidate_image,
-                pair_candidate_video,
-                pair_dimension,
-            ]
-            compare_button.click(
-                fn=compare_experience,
-                inputs=pair_inputs,
-                outputs=[pair_score_output, pair_curve_output, pair_fingerprints_output, pair_diagnostics_output],
-                api_name="compare",
-                api_description="Compare a multimodal query and candidate across every native Matryoshka dimension.",
-                concurrency_limit=1,
-                concurrency_id="wemm_gpu",
-                time_limit=240,
-                scroll_to_output=True,
-            )
+@app.get("/", response_class=HTMLResponse, include_in_schema=False)
+async def homepage() -> HTMLResponse:
+    return HTMLResponse((FRONTEND_DIR / "index.html").read_text(encoding="utf-8"))
 
-    gr.HTML(
-        """
-        <div class="model-note"><strong>Read scores comparatively.</strong> Cosine similarity is useful for ranking candidates within a collection; it is not a calibrated confidence or a universal relevance grade. Audio is not supported by WeMM-Embedding-9B.</div>
-        <footer class="space-footer"><span>WeMM-Embedding-9B · Apache-2.0 · built on Qwen3.5</span><span><a href="https://huggingface.co/tencent/WeMM-Embedding-9B" target="_blank">Model card ↗</a>&nbsp;&nbsp;&nbsp;<a href="https://arxiv.org/abs/2608.24053" target="_blank">Technical report ↗</a></span></footer>
-        """
-    )
+
+@app.get("/health", include_in_schema=False)
+async def health() -> dict[str, str]:
+    return {"status": "ok", "model": MODEL_ID, "interface": "gradio-server"}
+
+
+app.mount("/assets", StaticFiles(directory=str(ASSET_DIR)), name="assets")
+app.mount("/ui", StaticFiles(directory=str(FRONTEND_DIR)), name="ui")
+
+# Hugging Face Spaces expects the application object under this conventional name.
+demo = app
 
 
 if __name__ == "__main__":
-    demo.queue(default_concurrency_limit=1, max_size=24).launch(
-        allowed_paths=[str(ASSET_DIR)],
-        show_error=True,
-    )
+    app.launch(show_error=True)

frontend/app.css

@@ -0,0 +1,271 @@
+:root {
+  --bg: #080908;
+  --ink: #f1efe7;
+  --paper: #d9d4c8;
+  --muted: #8d908b;
+  --line: rgba(241, 239, 231, 0.12);
+  --line-strong: rgba(241, 239, 231, 0.23);
+  --panel: rgba(15, 17, 16, 0.88);
+  --acid: #d9ff63;
+  --acid-soft: #bdda54;
+  --teal: #66e3cf;
+  --orange: #ff9c62;
+  --violet: #a993ff;
+  --serif: Iowan Old Style, Baskerville, Times New Roman, serif;
+  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; background: var(--bg); }
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  color: var(--ink);
+  font-family: var(--sans);
+  background:
+    radial-gradient(circle at 71% 1%, rgba(110, 150, 74, 0.11), transparent 35rem),
+    radial-gradient(circle at 10% 32%, rgba(142, 91, 58, 0.08), transparent 34rem),
+    var(--bg);
+  overflow-x: hidden;
+}
+button, input, textarea { font: inherit; }
+button, a { -webkit-tap-highlight-color: transparent; }
+button { color: inherit; }
+a { color: inherit; }
+[hidden] { display: none !important; }
+::selection { color: #111; background: var(--acid); }
+
+.noise {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  pointer-events: none;
+  opacity: 0.035;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
+}
+.aurora { position: fixed; border-radius: 50%; filter: blur(120px); pointer-events: none; opacity: 0.08; }
+.aurora-a { width: 30rem; height: 30rem; background: var(--acid); top: -18rem; left: 30%; }
+.aurora-b { width: 24rem; height: 24rem; background: var(--teal); right: -14rem; top: 35rem; }
+
+.site-header {
+  width: min(1460px, calc(100% - 64px));
+  height: 78px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 24px;
+  border-bottom: 1px solid var(--line);
+  position: relative;
+  z-index: 10;
+}
+.brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; }
+.brand > span:last-child { display: flex; flex-direction: column; gap: 1px; }
+.brand b { font-size: 17px; letter-spacing: -0.04em; }
+.brand small { font: 8px/1.2 var(--mono); letter-spacing: 0.17em; color: var(--muted); }
+.brand-mark { width: 33px; height: 33px; display: inline-grid; grid-template-columns: repeat(3, 1fr); gap: 2px; transform: skew(-6deg); }
+.brand-mark i { display: block; background: var(--acid); }
+.brand-mark i:nth-child(1) { height: 55%; align-self: end; }
+.brand-mark i:nth-child(2) { height: 78%; align-self: end; opacity: 0.78; }
+.brand-mark i:nth-child(3) { height: 100%; opacity: 0.48; }
+.mode-nav { display: flex; padding: 4px; background: rgba(255,255,255,.035); border: 1px solid var(--line); border-radius: 99px; }
+.nav-pill { border: 0; background: transparent; color: #7e817c; cursor: pointer; padding: 9px 16px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .02em; transition: .25s ease; }
+.nav-pill.active { background: var(--paper); color: #101210; box-shadow: 0 3px 14px rgba(0,0,0,.3); }
+.header-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
+.model-status { display: flex; align-items: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }
+.model-status i { width: 6px; height: 6px; background: #b9a64d; border-radius: 50%; box-shadow: 0 0 9px #b9a64d; }
+.model-status.ready i { background: var(--acid); box-shadow: 0 0 10px var(--acid); }
+.model-status.error i { background: #ff766e; box-shadow: 0 0 9px #ff766e; }
+.icon-link { min-width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; text-decoration: none; color: #b5b6b0; font: 9px var(--mono); transition: .2s; }
+.icon-link:hover { border-color: var(--acid); color: var(--acid); }
+.arrow-link { font: 15px var(--sans); }
+
+main { width: min(1460px, calc(100% - 64px)); margin: 0 auto; position: relative; z-index: 1; }
+.hero { min-height: 660px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 60px; padding: 72px 3vw 76px; border-bottom: 1px solid var(--line); }
+.overline { display: flex; align-items: center; gap: 17px; font: 9px var(--mono); letter-spacing: .17em; color: var(--acid); }
+.overline span { display: flex; align-items: center; gap: 12px; }
+.overline span::before { content: ""; width: 28px; height: 1px; background: var(--acid); box-shadow: 0 0 9px rgba(217,255,99,.45); }
+.overline b { color: #656961; font-weight: 500; border-left: 1px solid var(--line); padding-left: 17px; }
+.hero h1 { font-size: clamp(68px, 7.7vw, 124px); line-height: .83; letter-spacing: -.075em; font-weight: 620; margin: 30px 0 35px; max-width: 920px; }
+.hero h1 em { font-family: var(--serif); color: transparent; -webkit-text-stroke: 1px rgba(241,239,231,.58); font-weight: 400; }
+.hero-copy > p { max-width: 650px; color: #a5a69f; font-size: clamp(16px, 1.6vw, 21px); line-height: 1.55; letter-spacing: -.015em; }
+.hero-meta { display: flex; gap: 0; margin-top: 47px; }
+.hero-meta div { padding: 0 30px; border-right: 1px solid var(--line); }
+.hero-meta div:first-child { padding-left: 0; }
+.hero-meta div:last-child { border: 0; }
+.hero-meta b { display: block; font-size: 25px; letter-spacing: -.05em; }
+.hero-meta span { display: block; color: #6d706a; font: 8px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin-top: 6px; }
+
+.semantic-orbit { width: min(100%, 550px); aspect-ratio: 1; justify-self: center; position: relative; }
+.semantic-orbit::before { content: ""; position: absolute; inset: 13%; border-radius: 50%; background: radial-gradient(circle, rgba(217,255,99,.1), transparent 66%); filter: blur(8px); }
+.orbit-ring { position: absolute; border: 1px solid rgba(217,255,99,.12); border-radius: 50%; animation: orbit-spin 34s linear infinite; }
+.ring-one { inset: 10%; border-style: dashed; }
+.ring-two { inset: 22%; animation-direction: reverse; animation-duration: 21s; }
+.ring-three { inset: 35%; border-color: rgba(102,227,207,.16); }
+.orbit-ring::before { content: ""; width: 6px; height: 6px; position: absolute; top: 11%; left: 18%; border-radius: 50%; background: var(--acid); box-shadow: 0 0 15px var(--acid); }
+.orbit-core { position: absolute; inset: 39%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: linear-gradient(145deg,#e8ff9c,#b9da55); color: #11130e; box-shadow: 0 0 80px rgba(217,255,99,.15); z-index: 2; }
+.orbit-core span { font: 700 45px/.9 var(--serif); }
+.orbit-core small { margin-top: 7px; font: 7px var(--mono); letter-spacing: .13em; }
+.semantic-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
+.semantic-orbit path { stroke: rgba(241,239,231,.14); fill: none; stroke-dasharray: 2 5; }
+.orbit-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #747871; font: 7px var(--mono); letter-spacing: .12em; z-index: 3; }
+.orbit-node i { width: 46px; height: 46px; border: 1px solid rgba(241,239,231,.17); border-radius: 50%; background: rgba(13,15,13,.92); display: grid; place-items: center; color: #c7c9c0; font-style: normal; font-size: 12px; box-shadow: 0 13px 40px rgba(0,0,0,.3); }
+.node-text { left: 11%; top: 31%; }.node-image { right: 7%; top: 25%; }.node-video { right: 8%; bottom: 19%; }.node-doc { left: 10%; bottom: 18%; }
+@keyframes orbit-spin { to { transform: rotate(360deg); } }
+
+.expedition-strip { min-height: 155px; display: grid; grid-template-columns: 220px 1fr; align-items: stretch; border-bottom: 1px solid var(--line); }
+.strip-label { padding: 32px 22px 28px 4px; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--line); }
+.strip-label span { color: var(--acid); font: 9px var(--mono); letter-spacing: .15em; }
+.strip-label small { color: #696c67; margin-top: 8px; font-size: 10px; }
+.expedition-list { display: grid; grid-template-columns: repeat(5,1fr); }
+.expedition { position: relative; text-align: left; cursor: pointer; border: 0; border-right: 1px solid var(--line); background: transparent; padding: 28px 20px; transition: .25s ease; overflow: hidden; }
+.expedition:last-child { border-right: 0; }
+.expedition::before { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: var(--acid); transform: scaleX(0); transform-origin: left; transition: .25s; }
+.expedition:hover { background: rgba(217,255,99,.04); }.expedition:hover::before { transform: scaleX(1); }
+.expedition > span { display: block; color: #565a54; font: 8px var(--mono); margin-bottom: 21px; }
+.expedition b { display: block; font-size: 12px; }.expedition small { display: block; color: #73766f; margin-top: 5px; font: 8px var(--mono); }
+
+.studio { padding: 108px 0 112px; border-bottom: 1px solid var(--line); scroll-margin-top: 30px; }
+.section-heading { display: grid; grid-template-columns: 1fr 430px; align-items: end; gap: 60px; margin-bottom: 47px; }
+.section-heading > div > span, .story-copy > span { color: var(--acid); font: 9px var(--mono); letter-spacing: .17em; }
+.section-heading h2, .story-copy h2 { margin: 14px 0 0; font-size: clamp(43px,5vw,76px); line-height: .92; letter-spacing: -.06em; font-weight: 570; }
+.section-heading > p { color: #8b8e88; line-height: 1.65; font-size: 13px; margin: 0 0 7px; }
+.studio-grid { display: grid; grid-template-columns: minmax(370px, .8fr) minmax(520px, 1.2fr); border: 1px solid var(--line); background: rgba(9,11,9,.54); min-height: 790px; }
+.control-deck { padding: 30px; border-right: 1px solid var(--line); background: rgba(20,22,19,.56); }
+.deck-heading { display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; border-bottom: 1px solid var(--line); margin-bottom: 25px; }
+.deck-heading > span, .field-label, .dimension-field legend > span { font: 9px var(--mono); letter-spacing: .13em; color: #9da098; }
+.text-button { background: none; border: 0; cursor: pointer; color: #656862; font-size: 9px; text-decoration: underline; text-underline-offset: 4px; }
+.field-label { display: block; margin-bottom: 9px; }
+.textarea-wrap { position: relative; }
+textarea { width: 100%; resize: vertical; border: 1px solid var(--line); outline: none; color: var(--ink); background: rgba(7,8,7,.7); padding: 15px; border-radius: 2px; line-height: 1.5; font-size: 13px; transition: .2s; }
+textarea:focus { border-color: rgba(217,255,99,.46); box-shadow: 0 0 0 3px rgba(217,255,99,.035); }
+textarea::placeholder { color: #4f524d; }
+.key-hint { position: absolute; right: 11px; bottom: 10px; color: #4f524c; font: 8px var(--mono); padding: 3px 5px; border: 1px solid var(--line); }
+.visual-query-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 11px; }
+.drop-field { min-height: 105px; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; cursor: pointer; border: 1px dashed rgba(241,239,231,.16); background: rgba(255,255,255,.015); transition: .2s; overflow: hidden; }
+.drop-field:hover, .drop-field.dragover { border-color: var(--acid); background: rgba(217,255,99,.035); }
+.drop-field input, .mini-upload input, .pair-uploads input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
+.drop-icon { color: var(--acid); font: 24px var(--serif); line-height: .7; }.drop-icon.play { font: 15px var(--sans); }
+.drop-field b { font-size: 10px; margin-top: 8px; }.drop-field small { color: #5e615b; font: 7px var(--mono); margin-top: 5px; letter-spacing: .08em; }
+.file-chip { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px; background: #161916; }
+.file-chip span { max-width: 100%; font: 9px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.file-chip button { border: 1px solid var(--line); background: transparent; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; }
+.context-note { color: #626660; font-size: 9px; margin: 10px 0 23px; }.context-note span { color: var(--acid); margin-right: 5px; }
+.collection-builder { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 0 -2px 23px; }
+.collection-builder summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 15px 2px; cursor: pointer; font-size: 10px; }
+.collection-builder summary::-webkit-details-marker { display:none; }.collection-builder summary i { color: var(--acid); font-style: normal; margin-right: 7px; }
+.collection-builder summary small { color: #585b56; font: 8px var(--mono); text-transform: uppercase; }
+.collection-builder[open] summary { border-bottom: 1px solid var(--line); }
+.details-body { padding: 18px 1px; }.details-body textarea { font-size: 11px; }
+.mini-upload { position: relative; min-height: 44px; margin-top: 9px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px dashed var(--line); cursor: pointer; }
+.mini-upload span { color: var(--acid); }.mini-upload b { font-size: 9px; }.mini-upload small { margin-left: auto; color: #5a5d57; font: 7px var(--mono); }
+.candidate-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
+.candidate-chip { display: flex; align-items: center; gap: 6px; max-width: 100%; padding: 5px 7px; background: rgba(255,255,255,.04); border: 1px solid var(--line); font: 8px var(--mono); color: #9b9e97; }
+.candidate-chip span { max-width: 150px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.candidate-chip button { border: 0; padding: 0; background: none; color: #747771; cursor: pointer; }
+.switch-line { display: flex; align-items: center; justify-content: space-between; margin: 0 0 26px; }
+.switch-line b { display: block; font-size: 11px; }.switch-line small { display: block; color: #60635d; font: 8px var(--mono); margin-top: 4px; }
+.switch { cursor: pointer; }.switch input { position: absolute; opacity: 0; }.switch span { width: 37px; height: 20px; padding: 2px; display: block; border-radius: 99px; background: #373a35; transition: .2s; }
+.switch span::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #858880; transition: .2s; }
+.switch input:checked + span { background: var(--acid); }.switch input:checked + span::after { background: #12140f; transform: translateX(17px); }
+.dimension-field { padding: 0; margin: 0 0 22px; border: 0; }
+.dimension-field legend { width: 100%; display: flex; justify-content: space-between; margin-bottom: 10px; }
+.dimension-field output { color: var(--acid); font: 10px var(--mono); }
+.dimension-pills { display: grid; grid-template-columns: repeat(7,1fr); border: 1px solid var(--line); }
+.dimension-pills button { border: 0; border-right: 1px solid var(--line); padding: 9px 2px; background: transparent; color: #656961; font: 8px var(--mono); cursor: pointer; transition: .2s; }
+.dimension-pills button:last-child { border: 0; }.dimension-pills button:hover { color: var(--paper); }.dimension-pills button.active { background: var(--acid); color: #12130f; }
+.dimension-field p { color: #5a5d57; font-size: 8px; margin: 8px 0 0; }
+.primary-button { width: 100%; height: 55px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px; border: 1px solid var(--acid); color: #12140f; background: var(--acid); cursor: pointer; font-weight: 800; font-size: 11px; transition: .22s; position: relative; overflow: hidden; }
+.primary-button::before { content: ""; position: absolute; inset: 0; background: #efffb8; transform: translateX(-102%); transition: .25s; }.primary-button:hover::before { transform: translateX(0); }.primary-button span, .primary-button i { position: relative; z-index: 1; }.primary-button i { font-style: normal; font-size: 20px; }
+.primary-button:disabled { cursor: wait; filter: grayscale(.55); opacity: .65; }
+
+.result-deck { min-width: 0; padding: 30px; position: relative; background: radial-gradient(circle at 50% 27%, rgba(217,255,99,.035), transparent 21rem); }
+.result-topbar { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
+.result-topbar > div { display: flex; align-items: center; gap: 13px; }.result-topbar small, .result-count { color: #5e625b; font: 8px var(--mono); letter-spacing: .06em; }
+.signal { color: var(--acid); font: 8px var(--mono); letter-spacing: .1em; }.signal i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 10px var(--acid); margin-right: 6px; }
+.empty-universe { min-height: 685px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
+.empty-field { width: 230px; height: 230px; position: relative; display: grid; place-items: center; margin-bottom: 27px; border: 1px solid rgba(217,255,99,.1); border-radius: 50%; box-shadow: inset 0 0 70px rgba(217,255,99,.025); }
+.empty-field::before, .empty-field::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(241,239,231,.08); }.empty-field::before { inset: 18%; }.empty-field::after { inset: 35%; }
+.empty-field span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: rgba(217,255,99,.12); color: var(--acid); font: 25px var(--serif); box-shadow: 0 0 35px rgba(217,255,99,.09); }
+.empty-field i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #767c70; animation: pulse 2.5s ease-in-out infinite; }.empty-field i:nth-child(1){top:12%;left:46%}.empty-field i:nth-child(2){top:30%;right:12%;animation-delay:.4s}.empty-field i:nth-child(3){bottom:20%;right:21%;animation-delay:.8s}.empty-field i:nth-child(4){bottom:10%;left:37%;animation-delay:1.2s}.empty-field i:nth-child(5){bottom:30%;left:10%;animation-delay:1.6s}.empty-field i:nth-child(6){top:22%;left:18%;animation-delay:2s}
+@keyframes pulse { 50% { background: var(--acid); box-shadow: 0 0 12px var(--acid); transform: scale(1.5); } }
+.empty-universe h3 { margin: 0; font-size: 20px; letter-spacing: -.035em; }.empty-universe > p { max-width: 490px; color: #6c7069; font-size: 11px; line-height: 1.65; }
+.media-preview-rail { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; width: min(100%,530px); height: 95px; margin-top: 23px; opacity: .64; }
+.media-preview-rail img, .media-preview-rail video { width: 100%; height: 100%; object-fit: cover; filter: saturate(.65); }
+
+.summary-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: end; padding: 24px 0 28px; border-bottom: 1px solid var(--line); }
+.summary-card > div > span { display: block; color: var(--acid); font: 8px var(--mono); letter-spacing: .13em; margin-bottom: 8px; }.summary-card h3 { margin: 0; font-size: clamp(25px,3vw,42px); letter-spacing: -.055em; line-height: 1; }.summary-card p { margin: 8px 0 0; color: #73776f; font-size: 10px; }
+.top-score { text-align: right; }.top-score b { display: block; color: var(--acid); font: 400 clamp(36px,4vw,55px)/.9 var(--mono); letter-spacing: -.08em; }.top-score small { color: #656962; font: 7px var(--mono); letter-spacing: .13em; }
+.result-tabs { display: flex; align-items: center; gap: 18px; padding: 16px 0; }
+.result-tabs button { padding: 0 0 6px; border: 0; border-bottom: 1px solid transparent; background: none; color: #5f625c; font: 8px var(--mono); letter-spacing: .1em; cursor: pointer; }.result-tabs button.active { color: var(--paper); border-color: var(--acid); }
+.ranking-list { display: grid; gap: 7px; }
+.ranking-card { display: grid; grid-template-columns: 38px 64px minmax(0,1fr) 66px; gap: 13px; align-items: center; min-height: 75px; padding: 9px 12px 9px 5px; border: 1px solid var(--line); background: rgba(255,255,255,.014); transition: .2s; opacity: 0; transform: translateY(8px); animation: row-in .35s forwards; animation-delay: calc(var(--rank) * 35ms); }
+@keyframes row-in { to { opacity: 1; transform: translateY(0); } }
+.ranking-card:first-child { border-color: rgba(217,255,99,.3); background: linear-gradient(90deg,rgba(217,255,99,.07),transparent); }
+.ranking-card:hover { transform: translateX(3px); border-color: var(--line-strong); }
+.rank-index { color: #5e625b; font: 9px var(--mono); text-align: center; }.rank-media { width: 64px; height: 54px; object-fit: cover; background: #151715; border: 1px solid var(--line); }.rank-media.text-tile { display: grid; place-items: center; color: #73776f; font: 15px var(--serif); }
+.rank-copy { min-width: 0; }.rank-title { display: flex; align-items: center; gap: 7px; }.rank-title b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; }.kind-tag { flex: none; padding: 3px 5px; border: 1px solid var(--line); color: #666a63; font: 6px var(--mono); text-transform: uppercase; letter-spacing: .08em; }.rank-copy p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 6px 0 8px; color: #656961; font-size: 8px; }
+.score-line { height: 2px; background: rgba(255,255,255,.05); }.score-line i { display: block; height: 100%; background: linear-gradient(90deg,var(--acid),var(--teal)); }
+.rank-value { text-align: right; font: 14px var(--mono); color: #a8aaa3; }.ranking-card:first-child .rank-value { color: var(--acid); }.rank-value small { display: block; margin-top: 4px; color: #555852; font-size: 6px; letter-spacing: .1em; }
+.result-view[hidden] { display: none; }
+.visual-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }.visual-card { min-height: 185px; position: relative; overflow: hidden; border: 1px solid var(--line); background: #111311; }.visual-card img,.visual-card video { width: 100%; height: 185px; object-fit: cover; }.visual-card figcaption { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; padding: 30px 10px 9px; background: linear-gradient(transparent,rgba(7,8,7,.92)); font-size: 9px; }.visual-card figcaption span:last-child { color: var(--acid); font-family: var(--mono); }
+.viz-stack { display: grid; gap: 12px; }.viz-panel { border: 1px solid var(--line); padding: 15px; background: rgba(255,255,255,.012); }.viz-head { display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px; }.viz-head span { color: var(--acid); font: 7px var(--mono); letter-spacing: .14em; }.viz-head b { display: block; margin-top: 4px; font-size: 13px; }.viz-head small { color: #5f625d; font: 7px var(--mono); }
+.line-chart { width: 100%; height: auto; overflow: visible; }.chart-grid-line { stroke: rgba(241,239,231,.07); }.chart-label { fill: #60645d; font: 7px var(--mono); }.chart-line { fill: none; stroke-width: 2; }.chart-dot { stroke: #101210; stroke-width: 1.5; }
+.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 7px; }.chart-legend span { color: #777b74; font-size: 7px; }.chart-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; }
+.fingerprint-svg { width: 100%; height: auto; }.fingerprint-zero { stroke: rgba(241,239,231,.13); }.fingerprint-key { display: flex; gap: 15px; color: #5e625b; font: 7px var(--mono); }.fingerprint-key i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; }
+.telemetry { border: 1px solid var(--line); }.telemetry summary { list-style: none; cursor: pointer; padding: 12px 14px; display: flex; justify-content: space-between; font: 8px var(--mono); color: #8f928b; }.telemetry summary::-webkit-details-marker { display:none; }.telemetry pre { overflow: auto; margin: 0; padding: 15px; border-top: 1px solid var(--line); color: #82867e; background: #090a09; font: 8px/1.6 var(--mono); }
+
+.compare-studio { padding-bottom: 100px; }.compare-inputs { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: stretch; }.compare-side { padding: 30px; border: 1px solid var(--line); background: rgba(18,20,18,.58); }.compare-side header { display: flex; gap: 13px; align-items: center; margin-bottom: 24px; }.compare-side header > span { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: #111; background: var(--acid); font: 12px var(--mono); }.compare-side header b { display: block; font: 9px var(--mono); letter-spacing: .15em; }.compare-side header small { display: block; margin-top: 5px; color: #63665f; font-size: 8px; }.compare-side textarea { min-height: 150px; resize: vertical; }
+.pair-uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }.pair-uploads label { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border: 1px dashed var(--line); cursor: pointer; color: #7b7e77; font: 7px var(--mono); }.pair-uploads label:hover { color: var(--acid); border-color: var(--acid); }.pair-uploads span { font-size: 15px; color: var(--acid); }
+.pair-file { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); color: #8c9088; font: 8px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.versus { display: grid; place-content: center; text-align: center; color: var(--acid); }.versus span { font-size: 21px; }.versus small { margin-top: 6px; color: #565953; font: 6px var(--mono); letter-spacing: .1em; writing-mode: vertical-rl; justify-self: center; }
+.compare-controls { display: grid; grid-template-columns: minmax(350px,.8fr) minmax(280px,.45fr); gap: 12px; margin: 14px auto 0; max-width: 850px; }.compare-controls .dimension-pills { align-self: center; }.compare-results { margin-top: 32px; }.compare-empty { min-height: 160px; border: 1px dashed var(--line); display: grid; place-content: center; text-align: center; color: #666a63; }.compare-empty span { color: var(--acid); font-size: 23px; }.compare-empty p { font-size: 10px; }
+.alignment-card { display: grid; grid-template-columns: 210px 1fr; gap: 40px; align-items: center; border: 1px solid rgba(169,147,255,.25); padding: 34px; background: radial-gradient(circle at 8% 50%,rgba(169,147,255,.12),transparent 25rem),rgba(13,14,14,.5); }
+.score-ring { --score: 50; width: 190px; height: 190px; padding: 2px; border-radius: 50%; background: conic-gradient(var(--violet) calc(var(--score) * 1%), rgba(255,255,255,.07) 0); transform: rotate(-90deg); box-shadow: 0 0 70px rgba(169,147,255,.1); }.score-ring > div { width: 100%; height: 100%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: #0c0e0c; transform: rotate(90deg); }.score-ring b { font: 400 36px var(--mono); letter-spacing: -.08em; }.score-ring small { color: #686b65; font: 7px var(--mono); letter-spacing: .12em; margin-top: 6px; }
+.alignment-copy > span { color: var(--violet); font: 8px var(--mono); letter-spacing: .14em; }.alignment-copy h3 { margin: 8px 0 9px; text-transform: capitalize; font-size: 37px; letter-spacing: -.05em; }.alignment-copy p { max-width: 580px; color: #858881; font-size: 12px; line-height: 1.6; }.alignment-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }.alignment-meta span { padding: 5px 8px; border: 1px solid var(--line); color: #777a74; font: 7px var(--mono); text-transform: uppercase; }
+.compare-viz-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; margin-top: 12px; }.fingerprint-pair { display: grid; gap: 10px; }
+
+.model-story { min-height: 570px; position: relative; display: grid; grid-template-columns: .58fr .9fr 1fr; gap: 60px; align-items: center; padding: 100px 3vw; overflow: hidden; border-bottom: 1px solid var(--line); }.story-number { align-self: stretch; display: flex; align-items: center; color: rgba(241,239,231,.032); font: 700 clamp(90px,12vw,190px)/1 var(--mono); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: -.12em; }.story-copy h2 em { color: var(--acid); font-family: var(--serif); font-weight: 400; }.story-copy p { max-width: 480px; color: #878a83; font-size: 12px; line-height: 1.7; margin-top: 25px; }
+.dimension-tower { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }.dimension-tower i { width: var(--w); height: 33px; min-width: 54px; display: flex; justify-content: flex-end; align-items: center; padding-right: 9px; background: linear-gradient(90deg,rgba(217,255,99,.04),rgba(217,255,99,.35)); border-right: 2px solid var(--acid); font-style: normal; animation: tower 4s ease-in-out infinite alternate; animation-delay: calc(var(--w) * -20ms); }.dimension-tower span { color: #afb2aa; font: 7px var(--mono); }
+@keyframes tower { to { filter: brightness(1.35); transform: translateX(6px); } }
+
+footer { width: min(1460px,calc(100% - 64px)); min-height: 145px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 30px; align-items: center; color: #666962; }.footer-brand { display: flex; align-items: center; gap: 10px; }.footer-brand .brand-mark { width: 26px; height: 26px; }.footer-brand b { color: #b9bbb4; }.footer-brand + p { font-size: 9px; line-height: 1.6; text-align: center; }.footer-brand ~ div { justify-self: end; display: flex; gap: 18px; }.footer-brand ~ div a { font: 8px var(--mono); text-decoration: none; }.footer-brand ~ div a:hover { color: var(--acid); }
+
+.job-toast { position: fixed; z-index: 50; right: 24px; bottom: 24px; width: min(430px,calc(100% - 48px)); min-height: 104px; display: grid; grid-template-columns: 65px 1fr 28px; gap: 14px; align-items: center; padding: 17px 18px 21px; border: 1px solid rgba(217,255,99,.28); background: rgba(12,14,12,.96); box-shadow: 0 25px 80px rgba(0,0,0,.5); backdrop-filter: blur(18px); }.job-orbit { width: 55px; height: 55px; position: relative; display: grid; place-items: center; border: 1px solid rgba(217,255,99,.2); border-radius: 50%; }.job-orbit::before { content:""; position:absolute; inset:7px; border:1px dashed rgba(217,255,99,.2); border-radius:50%; animation:orbit-spin 4s linear infinite; }.job-orbit i { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--acid); box-shadow:0 0 8px var(--acid); }.job-orbit i:first-child{top:5px}.job-orbit i:nth-child(2){bottom:9px;right:6px}.job-orbit span{color:var(--acid);font:17px var(--serif)}
+.job-toast > div:nth-child(2) span { color: var(--acid); font: 7px var(--mono); letter-spacing: .14em; }.job-toast > div:nth-child(2) b { display: block; margin-top: 5px; font-size: 11px; }.job-toast > div:nth-child(2) small { display: block; color: #666a63; font: 7px var(--mono); margin-top: 5px; }.job-toast > button { align-self: start; border: 0; background: none; color: #666a63; cursor: pointer; font-size: 18px; }.job-progress { position: absolute; inset: auto 0 0; height: 2px; background: rgba(255,255,255,.06); }.job-progress i { display: block; width: 3%; height: 100%; background: var(--acid); box-shadow: 0 0 8px rgba(217,255,99,.7); transition: width 1s ease; }
+.error-toast { position: fixed; z-index: 60; left: 50%; bottom: 25px; transform: translateX(-50%); width: min(520px,calc(100% - 36px)); display: grid; grid-template-columns: 1fr auto; gap: 5px 16px; padding: 15px 17px; color: #ffd0cb; background: rgba(42,18,17,.96); border: 1px solid rgba(255,118,110,.35); box-shadow: 0 18px 60px rgba(0,0,0,.5); }.error-toast b { font-size: 10px; }.error-toast span { grid-column: 1; color: #bf8e89; font-size: 9px; line-height: 1.45; }.error-toast button { grid-column: 2; grid-row: 1/3; border: 0; background: none; color: #d69d98; cursor: pointer; font-size: 18px; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
+}
+@media (max-width: 1100px) {
+  .site-header, main, footer { width: min(100% - 36px,1460px); }
+  .hero { min-height: 590px; gap: 20px; padding-inline: 0; }.semantic-orbit { width: 440px; }
+  .studio-grid { grid-template-columns: 400px 1fr; }.result-deck,.control-deck { padding: 24px; }
+  .expedition-strip { grid-template-columns: 170px 1fr; }.expedition { padding-inline: 12px; }
+  .section-heading { grid-template-columns: 1fr 350px; }
+}
+@media (max-width: 900px) {
+  .site-header { grid-template-columns: 1fr auto; }.mode-nav { position: fixed; z-index: 40; left: 50%; bottom: 14px; transform: translateX(-50%); background: rgba(22,24,21,.96); box-shadow: 0 9px 35px rgba(0,0,0,.5); }.model-status { display: none; }
+  .hero { grid-template-columns: 1fr; padding-top: 70px; }.semantic-orbit { width: min(80vw,490px); margin-top: -40px; }.hero-copy { position: relative; z-index: 4; }.hero h1 { font-size: clamp(69px,13vw,108px); }
+  .expedition-strip { grid-template-columns: 1fr; }.strip-label { border-right: 0; border-bottom: 1px solid var(--line); padding-left: 0; }.expedition-list { overflow-x: auto; grid-template-columns: repeat(5,170px); }.expedition { min-height: 125px; }
+  .section-heading { grid-template-columns: 1fr; gap: 20px; }.section-heading > p { max-width: 590px; }
+  .studio-grid { grid-template-columns: 1fr; }.control-deck { border-right: 0; border-bottom: 1px solid var(--line); }.result-deck { min-height: 650px; }
+  .compare-inputs { grid-template-columns: 1fr; gap: 9px; }.versus { min-height: 45px; }.versus small { writing-mode: initial; }.compare-controls { grid-template-columns: 1fr; }
+  .model-story { grid-template-columns: .7fr 1.3fr; }.story-number { display:none; }.dimension-tower { grid-column: 1/3; width: 80%; }
+  footer { margin-bottom: 75px; grid-template-columns: 1fr 1fr; }.footer-brand + p { grid-column: 1/3; grid-row: 2; text-align: left; }.footer-brand ~ div { grid-column: 2; grid-row: 1; }
+}
+@media (max-width: 620px) {
+  .site-header, main, footer { width: calc(100% - 24px); }.site-header { height: 65px; }.brand small { display:none; }.header-actions .icon-link:first-of-type { display:none; }
+  .hero { min-height: 640px; padding-top: 58px; }.hero h1 { font-size: clamp(57px,17vw,88px); margin-top: 23px; }.overline b { display:none; }.hero-copy > p { font-size: 15px; }.hero-meta { margin-top: 35px; }.hero-meta div { padding-inline: 16px; }.hero-meta b { font-size: 20px; }.hero-meta span { font-size: 6px; }.semantic-orbit { width: 105vw; margin-left: -10vw; margin-top: -70px; opacity: .8; }
+  .studio { padding-block: 75px; }.section-heading h2,.story-copy h2 { font-size: 46px; }.studio-grid { border-left: 0; border-right: 0; margin-inline: -12px; }.control-deck,.result-deck { padding: 20px 15px; }.visual-query-grid { grid-template-columns: 1fr 1fr; }.drop-field { min-height: 92px; }
+  .result-topbar small { display:none; }.empty-universe { min-height: 580px; }.media-preview-rail { height: 70px; }
+  .ranking-card { grid-template-columns: 28px 48px minmax(0,1fr) 53px; gap: 8px; padding-right: 8px; }.rank-media { width: 48px; height: 48px; }.rank-title b { font-size: 9px; }.kind-tag { display:none; }.rank-copy p { display:none; }.score-line { margin-top: 9px; }.rank-value { font-size: 11px; }
+  .summary-card { grid-template-columns: 1fr auto; }.summary-card h3 { font-size: 24px; }.top-score b { font-size: 34px; }
+  .visual-grid,.compare-viz-grid { grid-template-columns: 1fr; }.visual-card,.visual-card img,.visual-card video { height: 165px; min-height: 165px; }
+  .compare-side { padding: 20px 15px; }.compare-controls { min-width: 0; }.alignment-card { grid-template-columns: 1fr; padding: 25px 18px; text-align: center; }.score-ring { margin: auto; }.alignment-meta { justify-content: center; }
+  .model-story { grid-template-columns: 1fr; padding: 76px 0; gap: 40px; }.dimension-tower { grid-column: 1; width: 100%; }
+  footer { grid-template-columns: 1fr; gap: 15px; padding-block: 35px; }.footer-brand + p,.footer-brand ~ div { grid-column: 1; grid-row:auto; justify-self:start; text-align:left; }
+  .job-toast { right: 12px; bottom: 75px; width: calc(100% - 24px); grid-template-columns: 51px 1fr 20px; }.job-orbit { width: 46px; height: 46px; }
+}

frontend/app.js

@@ -0,0 +1,497 @@
+import {
+  Client,
+  handle_file,
+} from "https://cdn.jsdelivr.net/npm/@gradio/client@1.15.0/dist/index.min.js";
+
+const $ = (selector, root = document) => root.querySelector(selector);
+const $$ = (selector, root = document) => [...root.querySelectorAll(selector)];
+const dims = [64, 128, 256, 512, 1024, 2048, 4096];
+const colors = ["#d9ff63", "#66e3cf", "#ff9c62", "#a993ff"];
+
+const state = {
+  client: null,
+  connecting: null,
+  searchImage: null,
+  searchVideo: null,
+  candidateMedia: [],
+  pairQueryImage: null,
+  pairQueryVideo: null,
+  pairCandidateImage: null,
+  pairCandidateVideo: null,
+  searchDimension: 1024,
+  compareDimension: 1024,
+  objectUrls: new Map(),
+  jobTimer: null,
+  jobStarted: 0,
+};
+
+const examples = {
+  llama: {
+    text: "Which Llama 4 model variants are available?",
+    dimension: 512,
+  },
+  tofu: {
+    text: "How is mapo tofu prepared?",
+    dimension: 1024,
+  },
+  safety: {
+    text: "Find the environmental assessment page about driver training and temporary road closures.",
+    dimension: 256,
+  },
+  image: {
+    text: "Match this screenshot to the most relevant description.",
+    asset: "/assets/llama4_hgf.png",
+    filename: "llama4_hgf.png",
+    type: "image/png",
+    custom:
+      "Llama family :: Scout and Maverick are multimodal mixture-of-experts model variants.\nRecipe :: Soft tofu simmered in spicy chili-bean sauce.",
+    include: false,
+    dimension: 256,
+  },
+  video: {
+    text: "What dish is being prepared in this clip?",
+    asset: "/assets/mapo_tofu.mp4",
+    filename: "mapo_tofu.mp4",
+    type: "video/mp4",
+    custom:
+      "Sichuan classic :: Mapo tofu combines soft tofu with a spicy, numbing bean-paste sauce.\nSpaceflight :: A launch vehicle carries a satellite into orbit.",
+    include: false,
+    dimension: 512,
+  },
+};
+
+function escapeHtml(value) {
+  return String(value ?? "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#039;");
+}
+
+function formatScore(value) {
+  const number = Number(value);
+  return `${number >= 0 ? "+" : ""}${number.toFixed(3)}`;
+}
+
+function formatSeconds(value) {
+  return `${Number(value).toFixed(1)}s`;
+}
+
+function clearObjectUrls() {
+  for (const value of state.objectUrls.values()) URL.revokeObjectURL(value);
+  state.objectUrls.clear();
+}
+
+async function connectClient() {
+  if (state.client) return state.client;
+  if (state.connecting) return state.connecting;
+  const status = $("#model-status");
+  state.connecting = (async () => {
+    try {
+      const client = await Client.connect(window.location.origin);
+      await client.view_api();
+      state.client = client;
+      status.className = "model-status ready";
+      $("span", status).textContent = "Model ready";
+      return client;
+    } catch (error) {
+      status.className = "model-status error";
+      $("span", status).textContent = "Connection failed";
+      state.connecting = null;
+      throw error;
+    }
+  })();
+  return state.connecting;
+}
+
+function switchMode(mode) {
+  $$(".nav-pill").forEach((button) => button.classList.toggle("active", button.dataset.mode === mode));
+  $$("[data-panel]").forEach((panel) => { panel.hidden = panel.dataset.panel !== mode; });
+  $(mode === "search" ? '[data-panel="search"]' : '[data-panel="compare"]').scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+function setDimension(group, value) {
+  const dimension = Number(value);
+  state[`${group}Dimension`] = dimension;
+  $(`[data-dimension-group="${group}"]`).querySelectorAll("button").forEach((button) => {
+    button.classList.toggle("active", Number(button.dataset.value) === dimension);
+  });
+  $(`#${group}-dimension`).value = String(dimension);
+  const output = $(`#${group}-dimension-output`);
+  if (output) output.textContent = `${dimension.toLocaleString()}D`;
+}
+
+function fileLabel(drop, file) {
+  const chip = $(".file-chip", drop);
+  if (!chip) return;
+  chip.hidden = !file;
+  if (file) $("span", chip).textContent = file.name;
+}
+
+function configureDropzone(dropSelector, inputSelector, stateKey, otherStateKey, otherDropSelector) {
+  const drop = $(dropSelector);
+  const input = $(inputSelector);
+  const acceptFile = (file) => {
+    if (!file) return;
+    state[stateKey] = file;
+    fileLabel(drop, file);
+    if (otherStateKey) {
+      state[otherStateKey] = null;
+      fileLabel($(otherDropSelector), null);
+      const otherInput = $(`${otherDropSelector} input`);
+      if (otherInput) otherInput.value = "";
+    }
+  };
+  input.addEventListener("change", () => acceptFile(input.files[0]));
+  ["dragenter", "dragover"].forEach((eventName) => drop.addEventListener(eventName, (event) => {
+    event.preventDefault();
+    drop.classList.add("dragover");
+  }));
+  ["dragleave", "drop"].forEach((eventName) => drop.addEventListener(eventName, (event) => {
+    event.preventDefault();
+    drop.classList.remove("dragover");
+  }));
+  drop.addEventListener("drop", (event) => acceptFile(event.dataTransfer.files[0]));
+  const remove = $(".file-chip button", drop);
+  if (remove) remove.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    input.value = "";
+    state[stateKey] = null;
+    fileLabel(drop, null);
+  });
+}
+
+function renderCandidateChips() {
+  const root = $("#candidate-chips");
+  root.innerHTML = state.candidateMedia.map((file, index) => `
+    <span class="candidate-chip"><span>${escapeHtml(file.name)}</span><button type="button" data-remove-media="${index}" aria-label="Remove ${escapeHtml(file.name)}">×</button></span>
+  `).join("");
+  $$('[data-remove-media]', root).forEach((button) => button.addEventListener("click", () => {
+    state.candidateMedia.splice(Number(button.dataset.removeMedia), 1);
+    renderCandidateChips();
+  }));
+}
+
+function bindPairFile(inputSelector, stateKey, otherKey, labelSelector) {
+  const input = $(inputSelector);
+  input.addEventListener("change", () => {
+    const file = input.files[0] ?? null;
+    state[stateKey] = file;
+    if (file && otherKey) {
+      state[otherKey] = null;
+      const side = input.closest(".compare-side");
+      const otherInput = input.accept.includes("image") ? $('input[accept="video/*"]', side) : $('input[accept="image/*"]', side);
+      if (otherInput) otherInput.value = "";
+    }
+    const label = $(labelSelector);
+    label.hidden = !file;
+    label.textContent = file ? file.name : "";
+  });
+}
+
+function startJob(mode, heavy = false) {
+  const toast = $("#job-toast");
+  const phase = $("#job-phase");
+  const elapsed = $("#job-elapsed");
+  const progress = $("#job-progress-bar");
+  $("#job-label").textContent = mode === "search" ? "RESOLVING SEMANTIC FIELD" : "MEASURING VECTOR ALIGNMENT";
+  phase.textContent = "Waiting for the ZeroGPU allocator…";
+  progress.style.width = "3%";
+  toast.hidden = false;
+  state.jobStarted = Date.now();
+  clearInterval(state.jobTimer);
+  state.jobTimer = setInterval(() => {
+    const seconds = Math.floor((Date.now() - state.jobStarted) / 1000);
+    elapsed.textContent = `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")} elapsed`;
+    const first = heavy ? 13 : 7;
+    if (seconds < 3) {
+      phase.textContent = "Waiting for the ZeroGPU allocator…";
+      progress.style.width = "8%";
+    } else if (seconds < first) {
+      phase.textContent = "Encoding inputs into 4,096 dimensions…";
+      progress.style.width = `${Math.min(52, 18 + seconds * 4)}%`;
+    } else {
+      phase.textContent = mode === "search" ? "Ranking the multimodal universe…" : "Tracing the Matryoshka curve…";
+      progress.style.width = `${Math.min(92, 55 + seconds)}%`;
+    }
+  }, 500);
+}
+
+function finishJob() {
+  clearInterval(state.jobTimer);
+  $("#job-phase").textContent = "Semantic field resolved.";
+  $("#job-progress-bar").style.width = "100%";
+  setTimeout(() => { $("#job-toast").hidden = true; }, 900);
+}
+
+function failJob(error) {
+  clearInterval(state.jobTimer);
+  $("#job-toast").hidden = true;
+  const toast = $("#error-toast");
+  $("span", toast).textContent = error?.message || String(error) || "The request could not be completed.";
+  toast.hidden = false;
+}
+
+function unwrapResult(result) {
+  let data = result?.data ?? result;
+  if (Array.isArray(data) && data.length === 1) data = data[0];
+  if (typeof data === "string") {
+    try { return JSON.parse(data); } catch { return data; }
+  }
+  return data;
+}
+
+function mediaUrl(item) {
+  if (item.media_url) return item.media_url;
+  return state.objectUrls.get(item.key) ?? null;
+}
+
+function mediaMarkup(item, className = "rank-media") {
+  const url = mediaUrl(item);
+  if (!url) return `<span class="${className} text-tile">Aa</span>`;
+  if (item.kind === "video") return `<video class="${className}" src="${escapeHtml(url)}" muted playsinline preload="metadata"></video>`;
+  return `<img class="${className}" src="${escapeHtml(url)}" alt="" loading="lazy" />`;
+}
+
+function rankingMarkup(items) {
+  return `<div class="ranking-list">${items.map((item) => {
+    const fill = Math.max(2, Math.min(100, Math.max(0, Number(item.score)) * 100));
+    return `<article class="ranking-card" style="--rank:${item.rank}">
+      <span class="rank-index">${String(item.rank).padStart(2, "0")}</span>
+      ${mediaMarkup(item)}
+      <div class="rank-copy"><div class="rank-title"><b>${escapeHtml(item.title)}</b><span class="kind-tag">${escapeHtml(item.kind)}</span></div><p>${escapeHtml(item.description)}</p><div class="score-line"><i style="width:${fill}%"></i></div></div>
+      <div class="rank-value">${formatScore(item.score)}<small>COSINE</small></div>
+    </article>`;
+  }).join("")}</div>`;
+}
+
+function visualMarkup(items) {
+  const visual = items.filter((item) => mediaUrl(item));
+  if (!visual.length) return `<div class="compare-empty"><p>No visual candidates in this result set.</p></div>`;
+  return `<div class="visual-grid">${visual.map((item) => `<figure class="visual-card">
+    ${item.kind === "video" ? `<video src="${escapeHtml(mediaUrl(item))}" controls muted playsinline preload="metadata"></video>` : `<img src="${escapeHtml(mediaUrl(item))}" alt="${escapeHtml(item.title)}" loading="lazy" />`}
+    <figcaption><span>#${item.rank} · ${escapeHtml(item.title)}</span><span>${formatScore(item.score)}</span></figcaption>
+  </figure>`).join("")}</div>`;
+}
+
+function lineChart(dimensions, series, title) {
+  const width = 720;
+  const height = 260;
+  const pad = { l: 46, r: 15, t: 20, b: 36 };
+  const values = series.flatMap((item) => item.values);
+  let low = Math.max(-1, Math.min(...values) - 0.08);
+  let high = Math.min(1, Math.max(...values) + 0.08);
+  if (high - low < 0.2) { const mid = (high + low) / 2; low = Math.max(-1, mid - 0.1); high = Math.min(1, mid + 0.1); }
+  const x = (index) => pad.l + (index * (width - pad.l - pad.r)) / (dimensions.length - 1);
+  const y = (value) => pad.t + ((high - value) * (height - pad.t - pad.b)) / Math.max(0.0001, high - low);
+  const grid = Array.from({ length: 5 }, (_, index) => {
+    const value = high - (index * (high - low)) / 4;
+    return `<line class="chart-grid-line" x1="${pad.l}" y1="${y(value)}" x2="${width-pad.r}" y2="${y(value)}"/><text class="chart-label" x="${pad.l-8}" y="${y(value)+3}" text-anchor="end">${formatScore(value).slice(0,-1)}</text>`;
+  }).join("");
+  const labels = dimensions.map((value, index) => `<text class="chart-label" x="${x(index)}" y="${height-12}" text-anchor="middle">${value}</text>`).join("");
+  const paths = series.map((item, seriesIndex) => {
+    const color = colors[seriesIndex % colors.length];
+    const points = item.values.map((value, index) => `${x(index)},${y(value)}`).join(" ");
+    const dots = item.values.map((value, index) => `<circle class="chart-dot" cx="${x(index)}" cy="${y(value)}" r="3" fill="${color}"/>`).join("");
+    return `<polyline class="chart-line" points="${points}" stroke="${color}"/>${dots}`;
+  }).join("");
+  const legend = series.map((item, index) => `<span><i style="background:${colors[index % colors.length]}"></i>${escapeHtml(item.title.slice(0, 40))}</span>`).join("");
+  return `<section class="viz-panel"><div class="viz-head"><div><span>MATRYOSHKA SCOPE</span><b>${escapeHtml(title)}</b></div><small>64 → 4096D</small></div><svg class="line-chart" viewBox="0 0 ${width} ${height}" role="img" aria-label="Cosine similarity across embedding dimensions">${grid}${labels}${paths}</svg><div class="chart-legend">${legend}</div></section>`;
+}
+
+function fingerprintChart(values, title, dimension) {
+  const width = 720;
+  const height = 155;
+  const center = 78;
+  const scale = Math.max(...values.map((value) => Math.abs(value)), 0.000001);
+  const barWidth = (width - 16) / values.length;
+  const bars = values.map((value, index) => {
+    const magnitude = Math.min(64, (Math.abs(value) / scale) * 64);
+    const y = value >= 0 ? center - magnitude : center;
+    return `<rect x="${8 + index * barWidth}" y="${y}" width="${Math.max(1.2,barWidth-1.4)}" height="${magnitude}" rx="1" fill="${value >= 0 ? "#66e3cf" : "#ff9c62"}" opacity=".86"/>`;
+  }).join("");
+  return `<section class="viz-panel"><div class="viz-head"><div><span>VECTOR FINGERPRINT</span><b>${escapeHtml(title)}</b></div><small>${Number(dimension).toLocaleString()} values</small></div><svg class="fingerprint-svg" viewBox="0 0 ${width} ${height}" role="img" aria-label="Compressed signed vector fingerprint"><line class="fingerprint-zero" x1="8" y1="${center}" x2="${width-8}" y2="${center}"/>${bars}</svg><div class="fingerprint-key"><span><i style="background:#66e3cf"></i>POSITIVE</span><span><i style="background:#ff9c62"></i>NEGATIVE</span><span>96 POOLED SLICES</span></div></section>`;
+}
+
+function telemetryMarkup(data) {
+  const compact = { ...data };
+  delete compact.rankings;
+  delete compact.dimension_series;
+  delete compact.query_fingerprint;
+  delete compact.candidate_fingerprint;
+  return `<details class="telemetry"><summary><span>EMBEDDING TELEMETRY</span><span>INSPECT JSON ＋</span></summary><pre>${escapeHtml(JSON.stringify(compact, null, 2))}</pre></details>`;
+}
+
+function analysisMarkup(data) {
+  return `<div class="viz-stack">${lineChart(data.dimensions, data.dimension_series, "Does the ranking survive compression?")}${fingerprintChart(data.query_fingerprint, `Query · ${data.query_kind}`, data.dimension)}${telemetryMarkup(data)}</div>`;
+}
+
+function bindResultTabs(root) {
+  $$('[data-result-tab]', root).forEach((button) => button.addEventListener("click", () => {
+    $$('[data-result-tab]', root).forEach((item) => item.classList.toggle("active", item === button));
+    $$('[data-result-view]', root).forEach((view) => { view.hidden = view.dataset.resultView !== button.dataset.resultTab; });
+  }));
+}
+
+function renderSearchResults(data) {
+  const root = $("#search-results");
+  root.innerHTML = `
+    <div class="result-topbar"><div><span class="signal"><i></i>FIELD RESOLVED</span><small>tencent / WeMM-Embedding-9B</small></div><span class="result-count">${data.candidate_count} CANDIDATES · ${Number(data.dimension).toLocaleString()}D</span></div>
+    <section class="summary-card"><div><span>TOP SEMANTIC MATCH</span><h3>${escapeHtml(data.top_match.title)}</h3><p>${escapeHtml(data.query_kind)} query · ${formatSeconds(data.elapsed_seconds)} GPU pass · ${escapeHtml(data.cache_state)} cache</p></div><div class="top-score"><b>${formatScore(data.top_match.score)}</b><small>COSINE</small></div></section>
+    <nav class="result-tabs" aria-label="Result view"><button class="active" data-result-tab="rank">RANKING</button><button data-result-tab="visual">VISUAL FIELD</button><button data-result-tab="analysis">ANALYSIS</button></nav>
+    <div class="result-view" data-result-view="rank">${rankingMarkup(data.rankings)}</div>
+    <div class="result-view" data-result-view="visual" hidden>${visualMarkup(data.rankings)}</div>
+    <div class="result-view" data-result-view="analysis" hidden>${analysisMarkup(data)}</div>`;
+  bindResultTabs(root);
+  root.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+function renderCompareResults(data) {
+  const ring = Math.max(0, Math.min(100, (Number(data.selected_score) + 1) * 50));
+  const series = [{ title: `${data.query_kind} → ${data.candidate_kind}`, values: data.scores }];
+  $("#compare-results").innerHTML = `
+    <section class="alignment-card"><div class="score-ring" style="--score:${ring}"><div><b>${formatScore(data.selected_score)}</b><small>COSINE</small></div></div><div class="alignment-copy"><span>PAIRWISE READOUT</span><h3>${escapeHtml(data.label)}</h3><p>${escapeHtml(data.explanation)}</p><div class="alignment-meta"><span>${escapeHtml(data.query_kind)}</span><span>→</span><span>${escapeHtml(data.candidate_kind)}</span><span>${Number(data.dimension).toLocaleString()}D</span><span>${formatSeconds(data.elapsed_seconds)}</span></div></div></section>
+    <div class="compare-viz-grid">${lineChart(data.dimensions, series, "Semantic alignment under compression?")}<div class="fingerprint-pair">${fingerprintChart(data.query_fingerprint, `A · ${data.query_kind}`, data.dimension)}${fingerprintChart(data.candidate_fingerprint, `B · ${data.candidate_kind}`, data.dimension)}</div></div>
+    <div style="margin-top:12px">${telemetryMarkup(data)}</div>`;
+  $("#compare-results").scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+async function submitSearch() {
+  const button = $("#search-button");
+  clearObjectUrls();
+  state.candidateMedia.forEach((file, index) => state.objectUrls.set(`custom-media-${index + 1}`, URL.createObjectURL(file)));
+  const payload = {
+    query_text: $("#query-text").value,
+    query_image: state.searchImage ? handle_file(state.searchImage) : null,
+    query_video: state.searchVideo ? handle_file(state.searchVideo) : null,
+    custom_texts: $("#custom-texts").value,
+    candidate_media: state.candidateMedia.map((file) => handle_file(file)),
+    include_showcase: $("#include-showcase").checked,
+    dimension: state.searchDimension,
+  };
+  button.disabled = true;
+  startJob("search", Boolean(state.searchVideo || state.candidateMedia.some((file) => file.type.startsWith("video/")) || payload.include_showcase));
+  try {
+    const client = await connectClient();
+    const result = await client.predict("/search", payload);
+    const data = unwrapResult(result);
+    if (!data || typeof data !== "object") throw new Error("The server returned an unexpected search result.");
+    renderSearchResults(data);
+    finishJob();
+  } catch (error) {
+    failJob(error);
+  } finally {
+    button.disabled = false;
+  }
+}
+
+async function submitCompare() {
+  const button = $("#compare-button");
+  const payload = {
+    query_text: $("#pair-query-text").value,
+    query_image: state.pairQueryImage ? handle_file(state.pairQueryImage) : null,
+    query_video: state.pairQueryVideo ? handle_file(state.pairQueryVideo) : null,
+    candidate_text: $("#pair-candidate-text").value,
+    candidate_image: state.pairCandidateImage ? handle_file(state.pairCandidateImage) : null,
+    candidate_video: state.pairCandidateVideo ? handle_file(state.pairCandidateVideo) : null,
+    dimension: state.compareDimension,
+  };
+  button.disabled = true;
+  startJob("compare", Boolean(state.pairQueryVideo || state.pairCandidateVideo));
+  try {
+    const client = await connectClient();
+    const result = await client.predict("/compare", payload);
+    const data = unwrapResult(result);
+    if (!data || typeof data !== "object") throw new Error("The server returned an unexpected comparison result.");
+    renderCompareResults(data);
+    finishJob();
+  } catch (error) {
+    failJob(error);
+  } finally {
+    button.disabled = false;
+  }
+}
+
+async function loadAssetAsFile(url, filename, type) {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`Could not load the curated asset ${filename}.`);
+  return new File([await response.blob()], filename, { type });
+}
+
+async function runExample(name) {
+  const example = examples[name];
+  switchMode("search");
+  $("#query-text").value = example.text;
+  $("#custom-texts").value = example.custom ?? "";
+  $("#include-showcase").checked = example.include ?? true;
+  state.searchImage = null;
+  state.searchVideo = null;
+  fileLabel($("#query-image-drop"), null);
+  fileLabel($("#query-video-drop"), null);
+  $("#query-image").value = "";
+  $("#query-video").value = "";
+  setDimension("search", example.dimension);
+  if (example.asset) {
+    try {
+      const file = await loadAssetAsFile(example.asset, example.filename, example.type);
+      if (example.type.startsWith("image")) {
+        state.searchImage = file;
+        fileLabel($("#query-image-drop"), file);
+      } else {
+        state.searchVideo = file;
+        fileLabel($("#query-video-drop"), file);
+      }
+    } catch (error) {
+      failJob(error);
+      return;
+    }
+  }
+  setTimeout(submitSearch, 350);
+}
+
+function resetSearch() {
+  state.searchImage = null;
+  state.searchVideo = null;
+  state.candidateMedia = [];
+  setDimension("search", 1024);
+  setTimeout(() => {
+    fileLabel($("#query-image-drop"), null);
+    fileLabel($("#query-video-drop"), null);
+    renderCandidateChips();
+  });
+}
+
+function bindEvents() {
+  $$(".nav-pill").forEach((button) => button.addEventListener("click", () => switchMode(button.dataset.mode)));
+  $$("[data-dimension-group]").forEach((group) => $$('button', group).forEach((button) => button.addEventListener("click", () => setDimension(group.dataset.dimensionGroup, button.dataset.value))));
+  $$(".expedition").forEach((button) => button.addEventListener("click", () => runExample(button.dataset.example)));
+
+  configureDropzone("#query-image-drop", "#query-image", "searchImage", "searchVideo", "#query-video-drop");
+  configureDropzone("#query-video-drop", "#query-video", "searchVideo", "searchImage", "#query-image-drop");
+  $("#candidate-media").addEventListener("change", (event) => {
+    state.candidateMedia = [...event.target.files].slice(0, 6);
+    renderCandidateChips();
+  });
+
+  bindPairFile("#pair-query-image", "pairQueryImage", "pairQueryVideo", "#pair-query-file");
+  bindPairFile("#pair-query-video", "pairQueryVideo", "pairQueryImage", "#pair-query-file");
+  bindPairFile("#pair-candidate-image", "pairCandidateImage", "pairCandidateVideo", "#pair-candidate-file");
+  bindPairFile("#pair-candidate-video", "pairCandidateVideo", "pairCandidateImage", "#pair-candidate-file");
+
+  $("#search-form").addEventListener("submit", (event) => { event.preventDefault(); submitSearch(); });
+  $("#search-form").addEventListener("reset", resetSearch);
+  $("#compare-form").addEventListener("submit", (event) => { event.preventDefault(); submitCompare(); });
+  $("#query-text").addEventListener("keydown", (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
+      event.preventDefault();
+      submitSearch();
+    }
+  });
+  $("#job-close").addEventListener("click", () => { $("#job-toast").hidden = true; });
+  $("#error-toast button").addEventListener("click", () => { $("#error-toast").hidden = true; });
+}
+
+bindEvents();
+connectClient().catch(() => {});

frontend/index.html

@@ -0,0 +1,245 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#080908" />
+    <meta
+      name="description"
+      content="Explore WeMM-Embedding-9B across text, images, video, figures, and visual documents."
+    />
+    <title>WeMM — Semantic Universe</title>
+    <link rel="stylesheet" href="/ui/app.css?v=2" />
+    <script type="module" src="/ui/app.js?v=2"></script>
+  </head>
+  <body>
+    <div class="noise" aria-hidden="true"></div>
+    <div class="aurora aurora-a" aria-hidden="true"></div>
+    <div class="aurora aurora-b" aria-hidden="true"></div>
+
+    <header class="site-header">
+      <a class="brand" href="#top" aria-label="WeMM home">
+        <span class="brand-mark" aria-hidden="true"><i></i><i></i><i></i></span>
+        <span><b>WeMM</b><small>SEMANTIC UNIVERSE</small></span>
+      </a>
+      <nav class="mode-nav" aria-label="Studio mode">
+        <button class="nav-pill active" data-mode="search">Semantic search</button>
+        <button class="nav-pill" data-mode="compare">Vector microscope</button>
+      </nav>
+      <div class="header-actions">
+        <span class="model-status" id="model-status"><i></i><span>Connecting</span></span>
+        <a class="icon-link" href="/gradio_api/info" target="_blank" title="API schema" aria-label="Open API schema">API</a>
+        <a class="icon-link arrow-link" href="https://huggingface.co/tencent/WeMM-Embedding-9B" target="_blank" rel="noreferrer" aria-label="Open model card">↗</a>
+      </div>
+    </header>
+
+    <main id="top">
+      <section class="hero" aria-labelledby="hero-title">
+        <div class="hero-copy">
+          <div class="overline"><span>UNIVERSAL MULTIMODAL EMBEDDING</span><b>QWEN3.5 · 9B</b></div>
+          <h1 id="hero-title">Meaning has<br /><em>no file type.</em></h1>
+          <p>
+            Project language, imagery, video, charts, and visual documents into one shared
+            geometry—then watch meaning arrange itself.
+          </p>
+          <div class="hero-meta">
+            <div><b>4,096</b><span>native dimensions</span></div>
+            <div><b>80.6</b><span>MMEB-v2 average</span></div>
+            <div><b>190</b><span>MMEB-v3 tasks</span></div>
+          </div>
+        </div>
+        <div class="semantic-orbit" aria-hidden="true">
+          <div class="orbit-ring ring-one"></div>
+          <div class="orbit-ring ring-two"></div>
+          <div class="orbit-ring ring-three"></div>
+          <div class="orbit-core"><span>W</span><small>4096D</small></div>
+          <span class="orbit-node node-text"><i>Tx</i>TEXT</span>
+          <span class="orbit-node node-image"><i>Im</i>IMAGE</span>
+          <span class="orbit-node node-video"><i>Vd</i>VIDEO</span>
+          <span class="orbit-node node-doc"><i>Dc</i>DOCUMENT</span>
+          <svg viewBox="0 0 500 500">
+            <path d="M110 190 C190 220 204 235 250 250" />
+            <path d="M390 154 C335 192 302 220 250 250" />
+            <path d="M390 355 C328 317 302 283 250 250" />
+            <path d="M110 355 C164 315 198 285 250 250" />
+          </svg>
+        </div>
+      </section>
+
+      <section class="expedition-strip" id="expeditions">
+        <div class="strip-label"><span>CURATED EXPEDITIONS</span><small>Choose a path into the model</small></div>
+        <div class="expedition-list">
+          <button class="expedition" data-example="llama"><span>01</span><b>Find Llama 4</b><small>text → screenshot</small></button>
+          <button class="expedition" data-example="tofu"><span>02</span><b>Find mapo tofu</b><small>text → video</small></button>
+          <button class="expedition" data-example="safety"><span>03</span><b>Read road safety</b><small>text → document</small></button>
+          <button class="expedition" data-example="image"><span>04</span><b>Match a screenshot</b><small>image + text</small></button>
+          <button class="expedition" data-example="video"><span>05</span><b>Understand a clip</b><small>video → text</small></button>
+        </div>
+      </section>
+
+      <section class="studio" data-panel="search">
+        <div class="section-heading">
+          <div><span>01 / RETRIEVAL UNIVERSE</span><h2>Ask in one medium.<br />Discover in another.</h2></div>
+          <p>Search the curated field or add a small collection of your own. Every result is scored in the same normalized vector space.</p>
+        </div>
+
+        <div class="studio-grid">
+          <form class="control-deck" id="search-form">
+            <div class="deck-heading">
+              <span>QUERY COMPOSER</span>
+              <button class="text-button" type="reset">Clear all</button>
+            </div>
+
+            <label class="field-label" for="query-text">Describe what you mean</label>
+            <div class="textarea-wrap">
+              <textarea id="query-text" rows="4" maxlength="1200" placeholder="Which document explains temporary road closures?"></textarea>
+              <span class="key-hint">⌘ ↵</span>
+            </div>
+
+            <div class="visual-query-grid">
+              <label class="drop-field" id="query-image-drop">
+                <input id="query-image" type="file" accept="image/*" />
+                <span class="drop-icon">⌁</span><b>Add image</b><small>PNG, JPG, WEBP</small>
+                <div class="file-chip" hidden><span></span><button type="button" aria-label="Remove image">×</button></div>
+              </label>
+              <label class="drop-field" id="query-video-drop">
+                <input id="query-video" type="file" accept="video/*" />
+                <span class="drop-icon play">▷</span><b>Add video</b><small>MP4, WEBM, MOV</small>
+                <div class="file-chip" hidden><span></span><button type="button" aria-label="Remove video">×</button></div>
+              </label>
+            </div>
+            <p class="context-note"><span>＋</span> Visual media and text become one interleaved query.</p>
+
+            <details class="collection-builder">
+              <summary><span><i>＋</i> Build your candidate collection</span><small>optional</small></summary>
+              <div class="details-body">
+                <label class="field-label" for="custom-texts">Text candidates · one per line</label>
+                <textarea id="custom-texts" rows="5" placeholder="Title :: Candidate text&#10;Another title :: Another candidate"></textarea>
+                <label class="mini-upload">
+                  <input id="candidate-media" type="file" accept="image/*,video/*" multiple />
+                  <span>＋</span><b>Add candidate media</b><small>up to 6 files</small>
+                </label>
+                <div class="candidate-chips" id="candidate-chips"></div>
+              </div>
+            </details>
+
+            <div class="switch-line">
+              <div><b>Curated universe</b><small>10 mixed-media candidates</small></div>
+              <label class="switch"><input id="include-showcase" type="checkbox" checked /><span></span></label>
+            </div>
+
+            <fieldset class="dimension-field">
+              <legend><span>EMBEDDING BUDGET</span><output id="search-dimension-output">1,024D</output></legend>
+              <div class="dimension-pills" data-dimension-group="search">
+                <button type="button" data-value="64">64</button><button type="button" data-value="128">128</button>
+                <button type="button" data-value="256">256</button><button type="button" data-value="512">512</button>
+                <button type="button" data-value="1024" class="active">1K</button><button type="button" data-value="2048">2K</button>
+                <button type="button" data-value="4096">4K</button>
+              </div>
+              <input id="search-dimension" type="hidden" value="1024" />
+              <p>Smaller vectors trade storage for retrieval fidelity.</p>
+            </fieldset>
+
+            <button class="primary-button" id="search-button" type="submit">
+              <span>Map the semantic field</span><i>→</i>
+            </button>
+          </form>
+
+          <div class="result-deck" id="search-results" aria-live="polite">
+            <div class="result-topbar">
+              <div><span class="signal"><i></i>MODEL READY</span><small>tencent / WeMM-Embedding-9B</small></div>
+              <span class="result-count">AWAITING QUERY</span>
+            </div>
+            <div class="empty-universe">
+              <div class="empty-field" aria-hidden="true">
+                <i></i><i></i><i></i><i></i><i></i><i></i><span>W</span>
+              </div>
+              <h3>Your semantic field is quiet.</h3>
+              <p>Compose a query or choose a curated expedition. The first run maps the multimodal corpus; later runs reuse its cached vectors.</p>
+              <div class="media-preview-rail">
+                <img src="/assets/llama4_hgf.png" alt="Llama 4 model card screenshot" />
+                <img src="/assets/doc2.jpg" alt="Historical budget infographic" />
+                <video src="/assets/mapo_tofu.mp4" muted playsinline aria-label="Mapo tofu cooking clip"></video>
+                <img src="/assets/doc4.jpg" alt="Road safety assessment page" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="studio compare-studio" data-panel="compare" hidden>
+        <div class="section-heading">
+          <div><span>02 / VECTOR MICROSCOPE</span><h2>Put any two ideas<br />under the lens.</h2></div>
+          <p>Compare any supported pair, then observe whether their relationship survives Matryoshka compression from 4,096 to 64 dimensions.</p>
+        </div>
+
+        <form id="compare-form">
+          <div class="compare-inputs">
+            <article class="compare-side" data-side="a">
+              <header><span>A</span><div><b>QUERY</b><small>What are you looking for?</small></div></header>
+              <textarea id="pair-query-text" rows="5" placeholder="A picture or description of an idea…"></textarea>
+              <div class="pair-uploads">
+                <label><input id="pair-query-image" type="file" accept="image/*" /><span>⌁</span>IMAGE</label>
+                <label><input id="pair-query-video" type="file" accept="video/*" /><span>▷</span>VIDEO</label>
+              </div>
+              <div class="pair-file" id="pair-query-file" hidden></div>
+            </article>
+            <div class="versus" aria-hidden="true"><span>↔</span><small>COSINE</small></div>
+            <article class="compare-side" data-side="b">
+              <header><span>B</span><div><b>CANDIDATE</b><small>What should it align with?</small></div></header>
+              <textarea id="pair-candidate-text" rows="5" placeholder="A candidate in text, image, or video…"></textarea>
+              <div class="pair-uploads">
+                <label><input id="pair-candidate-image" type="file" accept="image/*" /><span>⌁</span>IMAGE</label>
+                <label><input id="pair-candidate-video" type="file" accept="video/*" /><span>▷</span>VIDEO</label>
+              </div>
+              <div class="pair-file" id="pair-candidate-file" hidden></div>
+            </article>
+          </div>
+
+          <div class="compare-controls">
+            <div class="dimension-pills" data-dimension-group="compare">
+              <button type="button" data-value="64">64</button><button type="button" data-value="128">128</button>
+              <button type="button" data-value="256">256</button><button type="button" data-value="512">512</button>
+              <button type="button" data-value="1024" class="active">1K</button><button type="button" data-value="2048">2K</button>
+              <button type="button" data-value="4096">4K</button>
+            </div>
+            <input id="compare-dimension" type="hidden" value="1024" />
+            <button class="primary-button" id="compare-button" type="submit"><span>Measure alignment</span><i>→</i></button>
+          </div>
+        </form>
+        <div class="compare-results" id="compare-results" aria-live="polite">
+          <div class="compare-empty"><span>＋</span><p>Add one input on each side to activate the microscope.</p></div>
+        </div>
+      </section>
+
+      <section class="model-story">
+        <div class="story-number">4096</div>
+        <div class="story-copy">
+          <span>ONE MODEL · MANY RESOLUTIONS</span>
+          <h2>Fold the vector.<br /><em>Keep the meaning.</em></h2>
+          <p>WeMM emits a 4,096-dimensional embedding with Matryoshka structure. Store fewer leading dimensions when latency or memory matters, and inspect the tradeoff here before choosing.</p>
+        </div>
+        <div class="dimension-tower" aria-hidden="true">
+          <i style="--w:100%"><span>4096</span></i><i style="--w:72%"><span>2048</span></i>
+          <i style="--w:50%"><span>1024</span></i><i style="--w:36%"><span>512</span></i>
+          <i style="--w:24%"><span>256</span></i><i style="--w:16%"><span>128</span></i>
+          <i style="--w:10%"><span>64</span></i>
+        </div>
+      </section>
+    </main>
+
+    <footer>
+      <div class="footer-brand"><span class="brand-mark"><i></i><i></i><i></i></span><b>WeMM</b></div>
+      <p>Cosine similarity ranks candidates within a collection. It is not a calibrated probability. Audio is not supported.</p>
+      <div><a href="https://huggingface.co/tencent/WeMM-Embedding-9B" target="_blank" rel="noreferrer">MODEL CARD ↗</a><a href="https://arxiv.org/abs/2608.24053" target="_blank" rel="noreferrer">PAPER ↗</a></div>
+    </footer>
+
+    <div class="job-toast" id="job-toast" hidden>
+      <div class="job-orbit"><i></i><i></i><span>W</span></div>
+      <div><span id="job-label">ALLOCATING ZERO GPU</span><b id="job-phase">Entering the semantic field…</b><small id="job-elapsed">00:00 elapsed</small></div>
+      <button id="job-close" type="button" aria-label="Dismiss">×</button>
+      <div class="job-progress"><i id="job-progress-bar"></i></div>
+    </div>
+    <div class="error-toast" id="error-toast" hidden><b>Something interrupted the field.</b><span></span><button type="button">×</button></div>
+  </body>
+</html>