Add Docker deployment with FastAPI backend

Dockerfile

@@ -0,0 +1,30 @@
+FROM python:3.10-slim
+
+# Install OpenJDK (for SPICE JAR)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+        default-jre-headless \
+    && rm -rf /var/lib/apt/lists/*
+
+# HuggingFace Spaces requires non-root user with uid 1000
+RUN useradd -m -u 1000 user
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Pre-download NLTK data
+RUN python -c "import nltk; nltk.download('wordnet', download_dir='/usr/share/nltk_data'); nltk.download('omw-1.4', download_dir='/usr/share/nltk_data')"
+
+# Download SPICE-1.0 from HF dataset repo
+RUN python -c "from huggingface_hub import snapshot_download; snapshot_download(repo_id='Gayanukaa/spice-1.0-jar', repo_type='dataset', local_dir='/app/SPICE-1.0')"
+
+COPY --chown=user:user . .
+
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,10 @@
 ---
 title: SPICE Evaluator
-emoji: 📚
-colorFrom: green
+emoji: 🔬
+colorFrom: purple
 colorTo: pink
 sdk: docker
-pinned: false
+pinned: true
 license: apache-2.0
 short_description: SPICE metric evaluation and visualization
 ---

app.py

@@ -0,0 +1,111 @@
+import asyncio
+import json
+import logging
+import queue
+from contextlib import asynccontextmanager
+from typing import Optional
+
+from fastapi import FastAPI, HTTPException, Request
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import StreamingResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+
+from evaluator import SpiceEvaluator
+
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s [%(levelname)s] %(name)s - %(message)s",
+)
+logger = logging.getLogger(__name__)
+
+evaluator: Optional[SpiceEvaluator] = None
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    global evaluator
+    logger.info("Initializing SpiceEvaluator...")
+    evaluator = SpiceEvaluator(cache_dir="/tmp/spice_cache")
+    logger.info("SpiceEvaluator ready.")
+    yield
+    logger.info("Shutting down.")
+
+
+app = FastAPI(title="SPICE Evaluator", lifespan=lifespan)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["GET", "POST"],
+    allow_headers=["Content-Type"],
+)
+
+
+class EvaluateRequest(BaseModel):
+    candidate: str
+    references: list[str]
+
+
+@app.get("/api/health")
+def health():
+    return {"status": "ready" if evaluator else "loading"}
+
+
+@app.post("/api/evaluate")
+async def evaluate(req: EvaluateRequest):
+    if not evaluator:
+        raise HTTPException(503, "Evaluator not ready")
+
+    candidate = req.candidate.strip()
+    if not candidate:
+        raise HTTPException(400, "Candidate caption is empty")
+
+    references = [r.strip() for r in req.references if r.strip()]
+    if not references:
+        raise HTTPException(400, "At least one reference caption required")
+
+    log_queue: queue.Queue[str] = queue.Queue()
+
+    def log_fn(msg: str):
+        log_queue.put(msg)
+
+    async def event_stream():
+        loop = asyncio.get_event_loop()
+        future = loop.run_in_executor(
+            None, evaluator.evaluate, candidate, references, log_fn
+        )
+
+        while not future.done():
+            try:
+                msg = log_queue.get_nowait()
+                yield f"event: log\ndata: {msg}\n\n"
+            except queue.Empty:
+                await asyncio.sleep(0.1)
+
+        # Drain remaining logs
+        while not log_queue.empty():
+            msg = log_queue.get_nowait()
+            yield f"event: log\ndata: {msg}\n\n"
+
+        try:
+            result = future.result()
+            data = {
+                "spice_precision": result["spice_precision"],
+                "spice_recall": result["spice_recall"],
+                "spice_f1": result["spice_f1"],
+                "binary_precision": result["precision"],
+                "binary_recall": result["recall"],
+                "binary_f1": result["binary_f1"],
+                "test_tuples": result["test_tuples"],
+                "ref_tuples": result["ref_tuples"],
+            }
+            yield f"event: result\ndata: {json.dumps(data)}\n\n"
+        except Exception as e:
+            logger.exception("SPICE evaluation failed")
+            yield f"event: error\ndata: {str(e)}\n\n"
+
+    return StreamingResponse(event_stream(), media_type="text/event-stream")
+
+
+app.mount("/", StaticFiles(directory="static", html=True), name="static")

evaluator.py

@@ -0,0 +1,134 @@
+import json
+import os
+import subprocess
+import uuid
+
+from nltk import download as nltk_download
+from nltk.corpus import wordnet
+
+try:
+    nltk_download("wordnet", quiet=True)
+    nltk_download("omw-1.4", quiet=True)
+except Exception:
+    pass
+
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+SPICE_JAR = os.path.join(BASE_DIR, "SPICE-1.0", "spice-1.0.jar")
+
+
+def _run_spice(input_json: str, output_json: str, detailed: bool, log_fn=None) -> dict:
+    if not os.path.isfile(SPICE_JAR):
+        raise FileNotFoundError(f"SPICE jar not found at {SPICE_JAR}")
+
+    cmd = ["java", "-Xmx2G", "-jar", SPICE_JAR, input_json]
+    if detailed:
+        cmd.append("-detailed")
+    cmd += ["-out", output_json, "-silent"]
+
+    if log_fn:
+        log_fn(f"> {' '.join(cmd)}")
+
+    proc = subprocess.Popen(
+        cmd, stdout=subprocess.PIPE, stderr=subprocess.STDOUT, text=True
+    )
+    for line in proc.stdout:
+        if log_fn:
+            log_fn(line.rstrip())
+    ret = proc.wait()
+    if ret != 0:
+        raise RuntimeError(f"SPICE exited {ret}")
+
+    with open(output_json, "r") as f:
+        results = json.load(f)
+    if not isinstance(results, list) or len(results) != 1:
+        raise ValueError(f"Unexpected SPICE output: {results}")
+    return results[0]
+
+
+def _wordnet_match(w1: str, w2: str) -> bool:
+    if w1 == w2:
+        return True
+    syns1 = {l.name() for s in wordnet.synsets(w1) for l in s.lemmas()}
+    syns2 = {l.name() for s in wordnet.synsets(w2) for l in s.lemmas()}
+    return bool(syns1 & syns2)
+
+
+def precision_recall_f1(hyp_tups: list, ref_tups: list) -> tuple:
+    matched, used = 0, set()
+    for h in hyp_tups:
+        for i, r in enumerate(ref_tups):
+            if i in used:
+                continue
+            if all(_wordnet_match(str(h[j]), str(r[j])) for j in range(len(h))):
+                matched += 1
+                used.add(i)
+                break
+    p = matched / len(hyp_tups) if hyp_tups else 0.0
+    r = matched / len(ref_tups) if ref_tups else 0.0
+    f1 = (2 * p * r / (p + r)) if (p + r) else 0.0
+    return p, r, f1
+
+
+class SpiceEvaluator:
+    def __init__(self, cache_dir="/tmp/spice_cache"):
+        self.cache_dir = cache_dir if os.path.isabs(cache_dir) else os.path.join(BASE_DIR, cache_dir)
+        os.makedirs(self.cache_dir, exist_ok=True)
+
+    def evaluate(self, candidate: str, references: list, log_fn=None) -> dict:
+        request_id = uuid.uuid4().hex[:8]
+
+        if log_fn:
+            log_fn("Preparing input JSON...")
+        inp = os.path.join(self.cache_dir, f"inp_{request_id}.json")
+        with open(inp, "w") as f:
+            json.dump([{"image_id": 0, "test": candidate, "refs": references}], f)
+        if log_fn:
+            log_fn(f"Wrote input to {inp}")
+
+        outp = os.path.join(self.cache_dir, f"out_{request_id}.json")
+        if log_fn:
+            log_fn("Running SPICE...")
+        try:
+            result = _run_spice(inp, outp, detailed=True, log_fn=log_fn)
+        finally:
+            for path in (inp, outp):
+                try:
+                    os.remove(path)
+                except OSError:
+                    pass
+
+        if log_fn:
+            log_fn("SPICE completed")
+
+        sc = result["scores"]["All"]
+        sp_p = sc.get("pr", 0.0)
+        sp_r = sc.get("re", 0.0)
+        sp_f = sc.get("f", 0.0)
+        if log_fn:
+            log_fn(
+                f"SPICE -> Precision: {sp_p:.3f}, Recall: {sp_r:.3f}, F1: {sp_f:.3f}"
+            )
+
+        test_block = result.get("test_tuples", [])
+        ref_block = result.get("ref_tuples", [])
+        test_tups = [e["tuple"] for e in test_block]
+        ref_tups = [e["tuple"] for e in ref_block]
+        if log_fn:
+            log_fn(
+                f"Parsed {len(test_tups)} test tuples and {len(ref_tups)} reference tuples"
+            )
+
+        p, r, bf1 = precision_recall_f1(test_tups, ref_tups)
+        if log_fn:
+            log_fn(f"Tuple-level binary F1: {bf1:.3f}")
+
+        return {
+            "spice_precision": sp_p,
+            "spice_recall": sp_r,
+            "spice_f1": sp_f,
+            "precision": p,
+            "recall": r,
+            "binary_f1": bf1,
+            "test_tuples": test_tups,
+            "ref_tuples": ref_tups,
+        }

requirements.txt

@@ -0,0 +1,4 @@
+fastapi==0.111.0
+uvicorn[standard]==0.29.0
+nltk>=3.8
+huggingface_hub

static/index.html

@@ -0,0 +1,921 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SPICE Evaluator</title>
+    <script src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
+    <style>
+      :root {
+        --primary: #4a6fa5;
+        --primary-light: #6b8fc5;
+        --accent: #e8913a;
+        --bg: #f5f7fa;
+        --card-bg: #ffffff;
+        --border: #e0e4ea;
+        --text: #2c3e50;
+        --text-dim: #7f8c9b;
+        --success: #27ae60;
+        --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        --radius: 8px;
+      }
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        background: var(--bg);
+        color: var(--text);
+        font-family: "Inter", "Segoe UI", system-ui, sans-serif;
+        min-height: 100vh;
+        line-height: 1.5;
+      }
+
+      /* ── Header ──────────────────────────────────────────── */
+      header {
+        background: var(--card-bg);
+        border-bottom: 1px solid var(--border);
+        padding: 16px 32px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-shadow: var(--shadow);
+      }
+
+      header h1 {
+        font-size: 1.4rem;
+        font-weight: 700;
+        color: var(--primary);
+      }
+
+      header h1 span {
+        color: var(--accent);
+      }
+
+      .health-badge {
+        font-size: 0.8rem;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-weight: 500;
+      }
+
+      .health-badge.ready {
+        background: #e8f5e9;
+        color: var(--success);
+      }
+
+      .health-badge.loading {
+        background: #fff3e0;
+        color: #e65100;
+      }
+
+      /* ── Main layout ─────────────────────────────────────── */
+      .container {
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 24px;
+      }
+
+      /* ── Input section ───────────────────────────────────── */
+      .input-section {
+        background: var(--card-bg);
+        border-radius: var(--radius);
+        padding: 24px;
+        box-shadow: var(--shadow);
+        margin-bottom: 24px;
+      }
+
+      .input-section h2 {
+        font-size: 1rem;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: var(--primary);
+      }
+
+      .input-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 20px;
+      }
+
+      @media (max-width: 768px) {
+        .input-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .input-group label {
+        display: block;
+        font-size: 0.85rem;
+        font-weight: 600;
+        margin-bottom: 6px;
+        color: var(--text);
+      }
+
+      .input-group input,
+      .input-group textarea {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        font-family: inherit;
+        font-size: 0.9rem;
+        color: var(--text);
+        background: var(--bg);
+        transition: border-color 0.2s;
+        resize: vertical;
+      }
+
+      .input-group input:focus,
+      .input-group textarea:focus {
+        outline: none;
+        border-color: var(--primary-light);
+        box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.12);
+      }
+
+      .input-group textarea {
+        min-height: 120px;
+      }
+
+      /* ── Examples selector ─────────────────────────────── */
+      .examples-bar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 16px;
+        flex-wrap: wrap;
+      }
+
+      .examples-bar label {
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: var(--text);
+        white-space: nowrap;
+      }
+
+      .examples-bar select {
+        flex: 1;
+        min-width: 200px;
+        padding: 8px 12px;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        font-family: inherit;
+        font-size: 0.85rem;
+        color: var(--text);
+        background: var(--bg);
+        cursor: pointer;
+        transition: border-color 0.2s;
+      }
+
+      .examples-bar select:focus {
+        outline: none;
+        border-color: var(--primary-light);
+        box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.12);
+      }
+
+      .btn-evaluate {
+        margin-top: 16px;
+        padding: 10px 28px;
+        background: var(--primary);
+        color: #fff;
+        border: none;
+        border-radius: 6px;
+        font-size: 0.9rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: background 0.2s;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .btn-evaluate:hover {
+        background: var(--primary-light);
+      }
+
+      .btn-evaluate:disabled {
+        background: var(--text-dim);
+        cursor: not-allowed;
+      }
+
+      .spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid rgba(255, 255, 255, 0.3);
+        border-top-color: #fff;
+        border-radius: 50%;
+        animation: spin 0.6s linear infinite;
+        display: none;
+      }
+
+      @keyframes spin {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      /* ── Results ─────────────────────────────────────────── */
+      .results-section {
+        display: none;
+        margin-bottom: 24px;
+      }
+
+      .results-section.visible {
+        display: block;
+      }
+
+      .metrics-grid {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+
+      @media (max-width: 600px) {
+        .metrics-grid {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .metric-card {
+        background: var(--card-bg);
+        border-radius: var(--radius);
+        padding: 20px;
+        text-align: center;
+        box-shadow: var(--shadow);
+        border-top: 3px solid var(--primary);
+      }
+
+      .metric-card.highlight {
+        border-top-color: var(--accent);
+      }
+
+      .metric-card .label {
+        font-size: 0.8rem;
+        font-weight: 600;
+        color: var(--text-dim);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 4px;
+      }
+
+      .metric-card .value {
+        font-size: 2rem;
+        font-weight: 700;
+        color: var(--text);
+      }
+
+      /* ── Graphs ──────────────────────────────────────────── */
+      .graphs-section {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+
+      @media (max-width: 768px) {
+        .graphs-section {
+          grid-template-columns: 1fr;
+        }
+      }
+
+      .graph-card {
+        background: var(--card-bg);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        overflow: hidden;
+      }
+
+      .graph-card .graph-header {
+        padding: 12px 16px;
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: var(--primary);
+        border-bottom: 1px solid var(--border);
+      }
+
+      .graph-container {
+        height: 400px;
+        width: 100%;
+      }
+
+      .graph-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 400px;
+        color: var(--text-dim);
+        font-size: 0.9rem;
+      }
+
+      /* ── Collapsible sections ────────────────────────────── */
+      .collapsible {
+        background: var(--card-bg);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+        margin-bottom: 16px;
+        overflow: hidden;
+      }
+
+      .collapsible-header {
+        padding: 12px 16px;
+        font-size: 0.85rem;
+        font-weight: 600;
+        color: var(--primary);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        user-select: none;
+        border-bottom: 1px solid transparent;
+        transition: border-color 0.2s;
+      }
+
+      .collapsible-header:hover {
+        background: var(--bg);
+      }
+
+      .collapsible-header .arrow {
+        transition: transform 0.2s;
+        font-size: 0.7rem;
+        color: var(--text-dim);
+      }
+
+      .collapsible.open .collapsible-header {
+        border-bottom-color: var(--border);
+      }
+
+      .collapsible.open .collapsible-header .arrow {
+        transform: rotate(90deg);
+      }
+
+      .collapsible-body {
+        display: none;
+        padding: 16px;
+      }
+
+      .collapsible.open .collapsible-body {
+        display: block;
+      }
+
+      .tuple-list {
+        font-family: "Fira Code", "Consolas", monospace;
+        font-size: 0.82rem;
+        line-height: 1.8;
+        color: var(--text);
+        white-space: pre-wrap;
+        background: var(--bg);
+        padding: 12px;
+        border-radius: 6px;
+      }
+
+      .log-output {
+        font-family: "Fira Code", "Consolas", monospace;
+        font-size: 0.8rem;
+        line-height: 1.7;
+        color: var(--text-dim);
+        white-space: pre-wrap;
+        background: #1e1e2e;
+        color: #cdd6f4;
+        padding: 12px;
+        border-radius: 6px;
+        max-height: 300px;
+        overflow-y: auto;
+      }
+
+      .about-body p {
+        margin-bottom: 10px;
+        font-size: 0.88rem;
+        color: var(--text);
+        line-height: 1.6;
+      }
+
+      .about-body a {
+        color: var(--primary);
+        text-decoration: none;
+      }
+
+      .about-body a:hover {
+        text-decoration: underline;
+      }
+
+      .about-links {
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+        margin-top: 12px;
+      }
+
+      .about-links a {
+        padding: 6px 14px;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        font-size: 0.82rem;
+        font-weight: 500;
+        color: var(--primary);
+        transition: background 0.2s, border-color 0.2s;
+      }
+
+      .about-links a:hover {
+        background: var(--bg);
+        border-color: var(--primary-light);
+        text-decoration: none;
+      }
+
+      .error-banner {
+        background: #fde8e8;
+        color: #c0392b;
+        padding: 12px 16px;
+        border-radius: var(--radius);
+        margin-bottom: 16px;
+        font-size: 0.9rem;
+        display: none;
+      }
+
+      .error-banner.visible {
+        display: block;
+      }
+
+      footer {
+        text-align: center;
+        padding: 16px;
+        color: var(--text-dim);
+        font-size: 0.8rem;
+      }
+
+      footer a {
+        color: var(--primary);
+        text-decoration: none;
+      }
+
+      footer a:hover {
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>SPICE <span>Evaluator</span></h1>
+      <span id="healthBadge" class="health-badge loading">Checking...</span>
+    </header>
+
+    <div class="container">
+      <!-- Input Section -->
+      <div class="input-section">
+        <h2>Caption Inputs</h2>
+        <div class="examples-bar">
+          <label for="exampleSelect">Load Example:</label>
+          <select id="exampleSelect" onchange="loadExample()">
+            <option value="">-- Select an example --</option>
+          </select>
+        </div>
+        <div class="input-grid">
+          <div class="input-group">
+            <label for="candidate">Candidate Caption</label>
+            <input
+              type="text"
+              id="candidate"
+              value="a herd of giraffe standing next to each other"
+            />
+          </div>
+          <div class="input-group">
+            <label for="references">Reference Captions (one per line)</label>
+            <textarea id="references">a couple of giraffes that are walking around
+a herd of giraffe standing on top of a dirt field.
+Several smaller giraffes that are in an enclosure.
+The giraffes are walking in different directions outside.
+A giraffe standing next to three baby giraffes in a zoo exhibit.</textarea>
+          </div>
+        </div>
+        <button class="btn-evaluate" id="evalBtn" onclick="runEvaluation()">
+          <span class="spinner" id="spinner"></span>
+          Evaluate
+        </button>
+      </div>
+
+      <!-- Error -->
+      <div class="error-banner" id="errorBanner"></div>
+
+      <!-- Logs (above results, shown during evaluation) -->
+      <div class="collapsible" id="logsSection" style="display: none;">
+        <div class="collapsible-header" onclick="toggleCollapsible('logsSection')">
+          Evaluation Logs
+          <span class="arrow">&#9654;</span>
+        </div>
+        <div class="collapsible-body">
+          <div class="log-output" id="logOutput"></div>
+        </div>
+      </div>
+
+      <!-- Results -->
+      <div class="results-section" id="resultsSection">
+        <div class="metrics-grid">
+          <div class="metric-card highlight">
+            <div class="label">SPICE F1</div>
+            <div class="value" id="metricF1">-</div>
+          </div>
+          <div class="metric-card">
+            <div class="label">Precision</div>
+            <div class="value" id="metricPrec">-</div>
+          </div>
+          <div class="metric-card">
+            <div class="label">Recall</div>
+            <div class="value" id="metricRec">-</div>
+          </div>
+        </div>
+
+        <!-- Graphs -->
+        <div class="graphs-section">
+          <div class="graph-card">
+            <div class="graph-header">Candidate Scene Graph</div>
+            <div class="graph-container" id="candidateGraph"></div>
+          </div>
+          <div class="graph-card">
+            <div class="graph-header">Reference Scene Graph</div>
+            <div class="graph-container" id="referenceGraph"></div>
+          </div>
+        </div>
+
+        <!-- Tuples -->
+        <div class="collapsible" id="tuplesSection">
+          <div class="collapsible-header" onclick="toggleCollapsible('tuplesSection')">
+            Extracted Tuples
+            <span class="arrow">&#9654;</span>
+          </div>
+          <div class="collapsible-body">
+            <label style="font-size: 0.82rem; font-weight: 600; color: var(--text-dim); display: block; margin-bottom: 6px;">Candidate Tuples</label>
+            <div class="tuple-list" id="candidateTuples"></div>
+            <label style="font-size: 0.82rem; font-weight: 600; color: var(--text-dim); display: block; margin: 12px 0 6px;">Reference Tuples</label>
+            <div class="tuple-list" id="referenceTuples"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- About (always visible, collapsed) -->
+      <div class="collapsible open" id="aboutSection">
+        <div class="collapsible-header" onclick="toggleCollapsible('aboutSection')">
+          About This Project
+          <span class="arrow">&#9654;</span>
+        </div>
+        <div class="collapsible-body about-body">
+          <p>
+            <strong>SPICE Evaluator</strong> is an interactive tool for evaluating image captions using the
+            <a href="https://panderson.me/spice/" target="_blank">SPICE</a> (Semantic Propositional Image Caption Evaluation) metric.
+            It computes precision, recall, and F1 scores by comparing semantic scene graphs extracted from candidate and reference captions.
+          </p>
+          <p>
+            The evaluation pipeline invokes the official SPICE-1.0 Java implementation, which uses Stanford CoreNLP for dependency parsing
+            and scene graph extraction. Extracted tuples are matched using WordNet-based synonym matching.
+          </p>
+          <div class="about-links">
+            <a href="https://gayanukaa.com/projects/spice-evaluator" target="_blank">Project Page</a>
+            <a href="https://gayanukaa.com/blog/2025-05-29-understanding-spice-metric" target="_blank">Understanding SPICE - Blog Post</a>
+            <a href="https://github.com/Gayanukaa/SPICE-Evaluator" target="_blank">Source Code</a>
+          </div>
+        </div>
+      </div>
+
+      <footer>
+        Developed by <a href="https://gayanukaa.com" target="_blank">Gayanukaa</a>
+        &middot; Powered by <a href="https://panderson.me/spice/" target="_blank">SPICE</a>
+      </footer>
+    </div>
+
+    <script>
+      /* ── Example captions (MS COCO style) ──────────────── */
+      const EXAMPLES = [
+        {
+          name: "Giraffes in enclosure",
+          candidate: "a herd of giraffe standing next to each other",
+          references: [
+            "a couple of giraffes that are walking around",
+            "a herd of giraffe standing on top of a dirt field.",
+            "Several smaller giraffes that are in an enclosure.",
+            "The giraffes are walking in different directions outside.",
+            "A giraffe standing next to three baby giraffes in a zoo exhibit.",
+          ],
+        },
+        {
+          name: "Young girl on tennis court",
+          candidate: "a young girl standing on a tennis court holding a racket",
+          references: [
+            "A girl holding a tennis racket on a court.",
+            "A young woman in a white outfit plays tennis.",
+            "A girl standing on a tennis court with a racket in her hand.",
+            "A female tennis player preparing to serve the ball.",
+            "A young girl in white is playing a game of tennis.",
+          ],
+        },
+        {
+          name: "Dog catching frisbee",
+          candidate: "a brown dog catching a frisbee in a park",
+          references: [
+            "A dog leaps to catch a frisbee in a field.",
+            "A brown and white dog jumping in the air to catch a disc.",
+            "A dog is playing frisbee in a grassy park.",
+            "An active dog catches a flying disc outdoors.",
+            "A playful dog jumps to catch a frisbee on the grass.",
+          ],
+        },
+        {
+          name: "City bus at stop",
+          candidate: "a red double decker bus parked on the side of the road",
+          references: [
+            "A red bus is stopped at a bus stop on a city street.",
+            "A double decker bus pulling up to a stop.",
+            "A large red bus sitting on the side of a road.",
+            "A red double decker bus driving down a street.",
+            "A double decker red bus parked near a sidewalk.",
+          ],
+        },
+        {
+          name: "Pizza on table",
+          candidate: "a pizza sitting on top of a wooden table",
+          references: [
+            "A large cheese pizza on a table with a glass of beer.",
+            "A pizza with various toppings is on a plate.",
+            "A freshly made pizza sitting on a wooden board.",
+            "There is a pizza on the table ready to be eaten.",
+            "A delicious looking pizza placed on a wooden surface.",
+          ],
+        },
+        {
+          name: "Cat on laptop",
+          candidate: "a cat sitting on a laptop computer",
+          references: [
+            "A cat is lying on top of a laptop keyboard.",
+            "A grey cat sitting on an open laptop on a desk.",
+            "A cat resting on a computer keyboard.",
+            "There is a cat sitting on the laptop.",
+            "A furry cat has decided to sit on the laptop computer.",
+          ],
+        },
+        {
+          name: "Kitchen scene",
+          candidate: "a kitchen with a stove and a refrigerator",
+          references: [
+            "A small kitchen with white appliances and wooden cabinets.",
+            "A kitchen area with a stove, oven and refrigerator.",
+            "The kitchen has a stove, fridge and microwave.",
+            "A clean kitchen with modern appliances.",
+            "A kitchen with a white refrigerator and a stove top oven.",
+          ],
+        },
+        {
+          name: "Surfer on wave",
+          candidate: "a man riding a wave on a surfboard",
+          references: [
+            "A surfer is riding a large wave in the ocean.",
+            "A man on a surfboard riding a big wave.",
+            "A person surfing on a wave near the shore.",
+            "A surfer in a wetsuit rides a cresting wave.",
+            "A man is surfing on a wave in the sea.",
+          ],
+        },
+      ];
+
+      /* ── Populate examples dropdown ────────────────────── */
+      const exSelect = document.getElementById("exampleSelect");
+      EXAMPLES.forEach((ex, i) => {
+        const opt = document.createElement("option");
+        opt.value = i;
+        opt.textContent = ex.name;
+        exSelect.appendChild(opt);
+      });
+
+      function loadExample() {
+        const idx = exSelect.value;
+        if (idx === "") return;
+        const ex = EXAMPLES[idx];
+        document.getElementById("candidate").value = ex.candidate;
+        document.getElementById("references").value = ex.references.join("\n");
+      }
+
+      /* ── Health check ──────────────────────────────────── */
+      const badge = document.getElementById("healthBadge");
+
+      async function checkHealth() {
+        try {
+          const res = await fetch("/api/health");
+          const data = await res.json();
+          if (data.status === "ready") {
+            badge.textContent = "Ready";
+            badge.className = "health-badge ready";
+            return true;
+          }
+        } catch (_) {}
+        badge.textContent = "Loading...";
+        badge.className = "health-badge loading";
+        return false;
+      }
+
+      (async function pollHealth() {
+        if (await checkHealth()) return;
+        const id = setInterval(async () => {
+          if (await checkHealth()) clearInterval(id);
+        }, 2500);
+      })();
+
+      /* ── Collapsible toggle ────────────────────────────── */
+      function toggleCollapsible(id) {
+        document.getElementById(id).classList.toggle("open");
+      }
+
+      /* ── Graph rendering ───────────────────────────────── */
+      function renderGraph(containerId, tuples, nodeColor, edgeColor) {
+        const container = document.getElementById(containerId);
+        container.innerHTML = "";
+
+        if (!tuples || tuples.length === 0) {
+          container.innerHTML = '<div class="graph-empty">No tuples to visualize</div>';
+          return;
+        }
+
+        const nodesMap = new Map();
+        const edgesArr = [];
+        let nodeId = 0;
+
+        function getNodeId(label) {
+          if (!nodesMap.has(label)) {
+            nodesMap.set(label, nodeId++);
+          }
+          return nodesMap.get(label);
+        }
+
+        tuples.forEach((tpl) => {
+          if (tpl.length === 1) {
+            getNodeId(tpl[0]);
+          } else {
+            for (let i = 0; i < tpl.length - 1; i++) {
+              const fromId = getNodeId(tpl[i]);
+              const toId = getNodeId(tpl[i + 1]);
+              edgesArr.push({ from: fromId, to: toId, color: { color: edgeColor }, arrows: "to" });
+            }
+          }
+        });
+
+        const nodes = new vis.DataSet(
+          Array.from(nodesMap.entries()).map(([label, id]) => ({
+            id,
+            label,
+            color: { border: "#333", background: nodeColor },
+            font: { size: 13, color: "#2c3e50" },
+            size: 18,
+            borderWidth: 2,
+          }))
+        );
+
+        const edges = new vis.DataSet(edgesArr);
+
+        new vis.Network(
+          container,
+          { nodes, edges },
+          {
+            physics: {
+              barnesHut: {
+                gravitationalConstant: -8000,
+                centralGravity: 0.5,
+                springLength: 80,
+                springConstant: 0.1,
+                damping: 0.4,
+                avoidOverlap: 0.2,
+              },
+            },
+            edges: {
+              smooth: { type: "curvedCCW", roundness: 0.15 },
+              width: 2,
+            },
+            interaction: {
+              hover: true,
+              zoomView: true,
+              dragView: true,
+            },
+          }
+        );
+      }
+
+      /* ── Format tuples for display ─────────────────────── */
+      function formatTuples(tuples) {
+        if (!tuples || tuples.length === 0) return "(none)";
+        return tuples.map((t) => "(" + t.join(", ") + ")").join("\n");
+      }
+
+      /* ── Evaluation (SSE streaming) ────────────────────── */
+      async function runEvaluation() {
+        const btn = document.getElementById("evalBtn");
+        const spinner = document.getElementById("spinner");
+        const errorBanner = document.getElementById("errorBanner");
+        const resultsSection = document.getElementById("resultsSection");
+        const logsSection = document.getElementById("logsSection");
+        const logOutput = document.getElementById("logOutput");
+
+        const candidate = document.getElementById("candidate").value.trim();
+        const refsRaw = document.getElementById("references").value.trim();
+        const references = refsRaw
+          .split("\n")
+          .map((l) => l.trim())
+          .filter((l) => l.length > 0);
+
+        if (!candidate) {
+          showError("Please enter a candidate caption.");
+          return;
+        }
+        if (references.length === 0) {
+          showError("Please enter at least one reference caption.");
+          return;
+        }
+
+        // Reset UI
+        errorBanner.classList.remove("visible");
+        resultsSection.classList.remove("visible");
+        btn.disabled = true;
+        spinner.style.display = "inline-block";
+
+        // Show and expand logs
+        logOutput.textContent = "";
+        logsSection.style.display = "";
+        logsSection.classList.add("open");
+
+        try {
+          const res = await fetch("/api/evaluate", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ candidate, references }),
+          });
+
+          if (!res.ok) {
+            const err = await res.json().catch(() => ({}));
+            throw new Error(err.detail || `Server error ${res.status}`);
+          }
+
+          // Parse SSE stream
+          const reader = res.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = "";
+          let resultData = null;
+
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n");
+            buffer = lines.pop(); // keep incomplete line in buffer
+
+            let eventType = null;
+            for (const line of lines) {
+              if (line.startsWith("event: ")) {
+                eventType = line.slice(7).trim();
+              } else if (line.startsWith("data: ")) {
+                const data = line.slice(6);
+                if (eventType === "log") {
+                  logOutput.textContent += (logOutput.textContent ? "\n" : "") + data;
+                  logOutput.scrollTop = logOutput.scrollHeight;
+                } else if (eventType === "result") {
+                  resultData = JSON.parse(data);
+                } else if (eventType === "error") {
+                  throw new Error(data);
+                }
+                eventType = null;
+              }
+            }
+          }
+
+          if (!resultData) {
+            throw new Error("No result received from server");
+          }
+
+          // Collapse logs and about, show results
+          logsSection.classList.remove("open");
+          document.getElementById("aboutSection").classList.remove("open");
+
+          document.getElementById("metricF1").textContent = resultData.spice_f1.toFixed(3);
+          document.getElementById("metricPrec").textContent = resultData.spice_precision.toFixed(3);
+          document.getElementById("metricRec").textContent = resultData.spice_recall.toFixed(3);
+
+          renderGraph("candidateGraph", resultData.test_tuples, "#a8d5f2", "#4a6fa5");
+          renderGraph("referenceGraph", resultData.ref_tuples, "#a8f0c6", "#27ae60");
+
+          document.getElementById("candidateTuples").textContent = formatTuples(resultData.test_tuples);
+          document.getElementById("referenceTuples").textContent = formatTuples(resultData.ref_tuples);
+
+          resultsSection.classList.add("visible");
+        } catch (e) {
+          showError(e.message);
+        } finally {
+          btn.disabled = false;
+          spinner.style.display = "none";
+        }
+      }
+
+      function showError(msg) {
+        const banner = document.getElementById("errorBanner");
+        banner.textContent = msg;
+        banner.classList.add("visible");
+      }
+    </script>
+  </body>
+</html>