chore: HF Space deployment — full pipeline + inventory

Single squashed commit for clean HF push. Contains:
- app.py: vision pipeline with json_schema output, Humbrol→Tamiya lookup
- server.py: gr.Server streaming endpoint + frontend middleware (/assets, /examples)
- inventory.py: gspread integration (GOOGLE_SERVICE_ACCOUNT_JSON + GOOGLE_SHEET_ID)
- frontend/: Airfix Dogfighter UI
- requirements.txt: requests, pillow, gspread

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -0,0 +1,51 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Setup & running
+
+```bash
+source venv/bin/activate
+python ui.py           # Gradio UI at http://localhost:7860
+```
+
+The Radxa inference box (`192.168.68.119:8088`) must be reachable on the LAN. Start llama-server on it with:
+```bash
+taskset -c 4-7 llama-server --threads 4 --jinja --ctx-size 4096 --host 0.0.0.0 --port 8088 \
+  -m <model.gguf> --mmproj <mmproj.gguf>
+```
+
+## Architecture
+
+Two files: `app.py` (logic) + `ui.py` (CSS, layout). Pipeline:
+
+1. `encode_image` — PIL resize to 960px longest side → base64 JPEG (A/B tested 2026-06-08: 640px loses numeric codes on small-print instruction sheet photos; 960px = 100% recall, +~60s vs 640; 1280px identical recall at +90s — not worth it. Shop screenshots are already ≤640px so unaffected.)
+2. `call_llama` — POST to `llama-server` OpenAI-compatible endpoint (`/v1/chat/completions`) with image as base64 data URI; CPU inference, ~90–180s depending on image type
+3. `extract_codes` — json_schema constraint → json.loads → numeric extraction; falls back to tolerant regex for non-json modes
+4. Gradio `gr.Blocks` UI — single-page, upload → analyze → display raw output + extracted codes
+
+Each request must be a fresh conversation (no message history) — otherwise llama-server reuses the previous image encoding.
+
+## Model
+
+InternVL3.5-2B Q6_K_L GGUF + mmproj f16 GGUF on Radxa Dragon Q6A (CPU-only, Ubuntu).
+
+## Pending (in priority order)
+
+1. ~~Humbrol → Tamiya conversion table~~ — done (CSV lookup + mojehobby.pl shop links)
+2. Structured model output (JSON-in-prompt or GBNF grammar instead of free-text regex)
+3. ~~Brand autodetection~~ — solved by brand dropdown (deterministic, no extra work needed)
+4. ~~HF Space deployment~~ — done (`build-small-hackathon/paint_match`, branch `hf-deploy`); Cloudflare Tunnel pending (do weekendu)
+5. Airfix Dogfighter aesthetic UI (deferred until pipeline is solid)
+6. ~~Paint inventory integration~~ — done (gspread + service account; `GOOGLE_SERVICE_ACCOUNT_JSON` + `GOOGLE_SHEET_ID` env vars; sheet "Hakaton", sheet1; owned badge "✓ ISSUED" replaces shop link)
+
+## Hackathon constraints
+
+"Off-the-grid": inference must stay on the Radxa — no hosted LLM APIs. Cloudflare Tunnel and HF Space are acceptable front-door plumbing. Deadline: 2026-06-15.
+
+## Known pitfalls
+
+- Port 8080 on the Radxa is taken; llama-server uses 8088.
+- First request after server start is warmup — disregard its timing.
+- macOS `base64` is BSD: no `-w0`. Use `base64 -i file` or `base64 < file`.
+- `hf` not `huggingface-cli` in this venv.

app.py

@@ -0,0 +1,346 @@
+import base64
+import csv
+import io
+import itertools
+import json
+import os
+import re
+import threading
+import time
+import requests
+from html import escape
+from PIL import Image, ImageOps
+import inventory
+
+LLAMA_SERVER = os.environ.get("LLAMA_SERVER", "http://192.168.68.119:8088")
+TIMEOUT = 300  # seconds; CPU inference is slow
+
+# ---------- Humbrol → Tamiya lookup ----------
+
+def _load_humbrol_tamiya() -> dict[str, tuple[str, str]]:
+    path = os.path.join(os.path.dirname(__file__), "data", "humbrol_tamyia.csv")
+    result: dict[str, tuple[str, str]] = {}
+    with open(path, newline="") as f:
+        for row in csv.DictReader(f):
+            h = row["humbrol"].strip()
+            t = row["tamiya"].strip()
+            n = row["tamiya_name"].strip()
+            if h and h not in result:
+                result[h] = (t, n)
+    return result
+
+HUMBROL_TO_TAMIYA = _load_humbrol_tamiya()
+
+# ---------- Format configurations ----------
+
+# One prompt + one regex shared by every document type. The model returns a plain
+# `- CODE: NAME` list regardless of source layout, so a single tolerant regex parses
+# all of them — no per-format coupling to break when the model varies its output.
+LIST_PROMPT = (
+    "List every paint code visible in this image."
+    # "Output one per line, exactly as `- CODE: NAME`, and nothing else. "
+    # "For a paint given as a mix ratio, join the codes with + (for example 118+34)."
+)
+
+# Tolerant by design: the 2B model formats the same prompt differently per input —
+# a clean "- 11: Silver" for sparse instruction sheets, but an echoed, noisy
+# "- Acrylic Paint 11 - Silver - Metallic - CODE: 11 - Silver" for dense shop
+# screenshots. So we don't anchor to line start or a fixed separator; we grab the
+# first code-like token, then a ':' or '-' separator, then the name up to the next
+# separator/newline. Duplicates (shop lines repeat the code) are deduped downstream.
+CODE_REGEX = re.compile(
+    r'(?P<code>\d+(?:\+\d+)?)\s*[:\-]\s*(?P<name>[^-:\n]+?)\s*(?=[-–\n]|$)'
+)
+
+# ---------- Output constraint (per-request, switchable) ----------
+#
+# A 2B model can't reliably *follow* a format instruction (longer prompt = more
+# random), so instead of asking we constrain the sampler. The constraint is a
+# per-request payload field — no model/server change, no restart. Flip OUTPUT_MODE
+# and re-run the same image to A/B which mode gives the best recall + stability.
+#
+#   "json" — response_format json_schema; output parsed with json.loads
+#   "line" — GBNF grammar forcing exactly the "- CODE: NAME" lines CODE_REGEX expects
+#   "free" — no constraint; free text + tolerant regex (legacy baseline)
+OUTPUT_MODE = "json"
+
+# No `pattern` on `code`: this build of llama.cpp accepts the pattern at schema
+# conversion but its structured-output response parser then 500s on real input
+# (the json_schema→GBNF→parser path is fragile here). So the schema enforces only
+# shape; the model tends to dump the whole echoed product line into `code`, which
+# we clean up downstream (see _clean_code). The `line` GBNF mode is the stronger
+# alternative — it forces digits in the code position without this machinery.
+JSON_SCHEMA = {
+    "type": "array",
+    "items": {
+        "type": "object",
+        "properties": {
+            "code": {"type": "string"},
+            "name": {"type": "string"},
+        },
+        "required": ["code"],
+    },
+}
+
+# Forces exactly the line shape CODE_REGEX already parses, so the "line" path
+# reuses the existing regex downstream with zero new parsing code. The name is
+# length-capped ({1,40}): unbounded [^\n]+ let the model loop a phrase forever
+# (e.g. "(14ml) each. (14ml) each. …") until max_tokens — the cap forces the
+# newline and lets generation terminate.
+LINE_GRAMMAR = r'''root ::= item+
+item ::= "- " code ": " name "\n"
+code ::= [0-9]+ ("+" [0-9]+)?
+name ::= [^\n]{1,40}'''
+
+FORMATS = {
+    "airfix_shop": {
+        "label": "Airfix shop screenshot",
+        "prompt": LIST_PROMPT,
+        "regex": CODE_REGEX,
+    },
+    "airfix_instruction": {
+        "label": "Airfix paper instruction sheet",
+        "prompt": LIST_PROMPT,
+        "regex": CODE_REGEX,
+    },
+}
+
+# ---------- Image & inference ----------
+
+def encode_image(img: Image.Image) -> str:
+    """Correct EXIF orientation, resize to max 960px (longest side), encode as base64 JPEG."""
+    img = ImageOps.exif_transpose(img)
+    img = img.convert("RGB")
+    # 960px: A/B test showed 640px is insufficient for small-print instruction sheets
+    # (model sees colour names but not numeric codes). 960px recovers 100% recall on
+    # paper photos (3000+px originals) with ~60s extra vs 640px. 1280px gave identical
+    # recall at +90s — no gain. Shop screenshots are already ≤640px so unchanged.
+    img.thumbnail((960, 960))
+    buf = io.BytesIO()
+    img.save(buf, format="JPEG", quality=90)
+    return base64.b64encode(buf.getvalue()).decode()
+
+
+def call_llama(img_b64: str, prompt: str) -> str:
+    payload = {
+        "messages": [{
+            "role": "user",
+            "content": [
+                {"type": "text", "text": prompt},
+                {"type": "image_url",
+                 "image_url": {"url": f"data:image/jpeg;base64,{img_b64}"}}
+            ]
+        }],
+        "temperature": 0.0,
+        # Dense shop screenshots (e.g. dual enamel+acrylic listings) overran 500
+        # tokens and truncated mid-JSON, which json.loads can't parse at all. 1024
+        # fits them; short lists still stop early on EOS, so only long ones pay.
+        "max_tokens": 1024,
+        # Critical for multimodal: llama-server reuses KV/prompt cache across
+        # consecutive requests (LRU slots), bleeding a previous image's encoding
+        # into the next and producing runaway garbage on back-to-back calls. Force
+        # a fresh evaluation every request so results are order-independent.
+        "cache_prompt": False,
+    }
+    if OUTPUT_MODE == "json":
+        payload["response_format"] = {
+            "type": "json_schema",
+            "json_schema": {"name": "paint_codes", "schema": JSON_SCHEMA},
+        }
+    elif OUTPUT_MODE == "line":
+        payload["grammar"] = LINE_GRAMMAR
+    r = requests.post(
+        f"{LLAMA_SERVER}/v1/chat/completions",
+        json=payload,
+        timeout=TIMEOUT,
+    )
+    r.raise_for_status()
+    return r.json()["choices"][0]["message"]["content"]
+
+# ---------- Parsing ----------
+
+def strip_parens(text: str) -> str:
+    return re.sub(r'\([^)]*\)', '', text)
+
+
+def parse_entries(text: str, pattern: re.Pattern) -> list[dict]:
+    return [m.groupdict() for m in pattern.finditer(text)]
+
+
+def _loads_tolerant(raw: str):
+    """json.loads, but salvage a truncated array (model hit max_tokens mid-entry).
+    A cut-off "[ {...}, {...}, {...incomplete" still has complete objects before
+    the break: keep through the last '}' and close the array. Returns None if even
+    that fails."""
+    try:
+        return json.loads(raw)
+    except (json.JSONDecodeError, TypeError):
+        pass
+    start, end = raw.find("["), raw.rfind("}")
+    if start != -1 and end > start:
+        try:
+            return json.loads(raw[start:end + 1] + "]")
+        except json.JSONDecodeError:
+            return None
+    return None
+
+
+def parse_json_entries(raw: str) -> list[dict]:
+    """Parse the json_schema-constrained array into {code, name} entries.
+
+    json_schema enforces the array *shape* but not field semantics, so the 2B
+    model often dumps the whole echoed product line into `code`
+    ("Acrylic Paint 11 - Silver - Metallic"). We pull the first numeric code
+    (optionally a mix like "118+34") out of that field — reliable because it
+    operates on the already-isolated entry, not the raw response. Items with no
+    code-like token are dropped; a broken payload yields []."""
+    data = _loads_tolerant(raw)
+    if not isinstance(data, list):
+        return []
+    entries = []
+    for item in data:
+        if not isinstance(item, dict):
+            continue
+        m = re.search(r'\d+(?:\+\d+)?', str(item.get("code", "")))
+        if m:
+            entries.append({"code": m.group(0), "name": item.get("name")})
+    return entries
+
+
+# Instruction sheets mix paint codes with decal numbers, part numbers and dates,
+# and the 2B model can't reliably tell them apart — it sometimes emits decals as
+# if they were paints (non-deterministic across layouts, though stable per image
+# at temp 0). This is a perception problem the format constraint can't fix, so we
+# drop entries whose *name* gives them away: a decal/stencil/transfer reference,
+# a bare number, or a 4-digit year. A missing name is NOT evidence (the code still
+# matters for the Tamiya lookup), so those are kept.
+NON_PAINT_NAME = re.compile(r'decal|stencil|transfer|\d{4}', re.IGNORECASE)
+
+
+def is_paint_name(name) -> bool:
+    if name is None:
+        return True
+    s = str(name).strip()
+    if not s:
+        return True
+    if s.replace("+", "").isdigit():  # name is just a number → likely a misread reference
+        return False
+    return not NON_PAINT_NAME.search(s)
+
+
+def extract_entries(raw: str, pattern: re.Pattern) -> list[dict]:
+    """Branch parsing on the active output mode (JSON for the json_schema
+    constraint, tolerant regex otherwise), then drop non-paint entries."""
+    if OUTPUT_MODE == "json":
+        entries = parse_json_entries(raw)
+    else:
+        entries = parse_entries(strip_parens(raw), pattern)
+    return [e for e in entries if is_paint_name(e.get("name"))]
+
+
+def expand_codes(entries: list[dict]) -> list[dict]:
+    """Split composite codes (e.g. '118+34') into separate items; dedupe."""
+    seen = set()
+    result = []
+    for entry in entries:
+        code = entry["code"]
+        if "+" in code:
+            for c in code.split("+"):
+                if c not in seen:
+                    seen.add(c)
+                    result.append({"code": c, "name": None})
+        else:
+            if code not in seen:
+                seen.add(code)
+                result.append(entry)
+    return result
+
+# ---------- Main flow ----------
+
+def tamiya_shop_url(code: str, name: str) -> str:
+    slug_code = re.sub(r'([A-Za-z]+)(\d+)', r'\1-\2', code)
+    slug_name = name.replace(".", "").replace(" ", "-")
+    return f"https://www.mojehobby.pl/products/{slug_code}-{slug_name}.html"
+
+
+LOADING_INTERVAL = 8.0   # seconds between status lines; ~90s inference ≈ one pass of 10 lines
+
+LOADING_LINES = [
+    "▸ Establishing uplink to field unit…",
+    "▸ Calibrating optical sensors…",
+    "▸ Enhancing image resolution…",
+    "▸ Scanning paint tin labels…",
+    "▸ Identifying colour swatches…",
+    "▸ Cross-referencing Humbrol registry…",
+    "▸ Computing Tamiya equivalents…",
+    "▸ Consulting quartermaster database…",
+    "▸ Verifying stock availability…",
+    "▸ Assembling resupply manifest…",
+]
+
+
+def _run_analysis(image: Image.Image, format_id: str) -> tuple[str, str]:
+    cfg = FORMATS[format_id]
+    try:
+        img_b64 = encode_image(image)
+        raw = call_llama(img_b64, cfg["prompt"])
+        entries = extract_entries(raw, cfg["regex"])
+        expanded = expand_codes(entries)
+        if expanded:
+            items = []
+            for e in expanded:
+                code = e["code"]
+                tamiya_code, tamiya_name = HUMBROL_TO_TAMIYA.get(code, (None, ""))
+                if tamiya_code is None:
+                    items.append(f"<li>Humbrol {escape(code)} – ?</li>")
+                elif tamiya_code == "":
+                    items.append(f"<li>Humbrol {escape(code)} – (no Tamiya equivalent)</li>")
+                elif tamiya_name:
+                    if tamiya_code.upper() in inventory.OWNED:
+                        items.append(
+                            f'<li class="owned">Humbrol {escape(code)} –'
+                            f' Tamiya {tamiya_code} {escape(tamiya_name)}'
+                            f' <span class="owned-badge">&#10003; ISSUED</span>'
+                            f'<span class="owned-status">On personal charge — no resupply required</span></li>'
+                        )
+                    else:
+                        url = tamiya_shop_url(tamiya_code, tamiya_name)
+                        items.append(
+                            f'<li>Humbrol {escape(code)} –'
+                            f' <a href="{url}" target="_blank">Tamiya {tamiya_code} {tamiya_name} ↗</a></li>'
+                        )
+                else:
+                    items.append(f"<li>Humbrol {escape(code)} – Tamiya {tamiya_code}</li>")
+            codes_str = "<ul>" + "".join(items) + "</ul>"
+        else:
+            codes_str = "<p>(none parsed)</p>"
+        return raw, codes_str
+    except requests.Timeout:
+        return "Timeout — model took too long.", ""
+    except requests.RequestException as e:
+        return f"Server error: {e}", ""
+
+
+def analyze(image: Image.Image, format_id: str):
+    """Generator: stream rotating status lines into Field report while inference
+    runs on a worker thread, then yield the final (raw report, manifest HTML)."""
+    if image is None:
+        yield "No image provided.", ""
+        return
+    box: dict[str, tuple[str, str]] = {}
+
+    def worker():
+        try:
+            box["result"] = _run_analysis(image, format_id)
+        except Exception as e:  # noqa: BLE001 — never leave box empty
+            box["result"] = (f"Error: {e}", "")
+
+    t = threading.Thread(target=worker, daemon=True)
+    t.start()
+    for line in itertools.cycle(LOADING_LINES):
+        if not t.is_alive():
+            break
+        yield line, ""  # status into Field report; manifest stays empty (collapsed)
+        time.sleep(LOADING_INTERVAL)
+    t.join()
+    yield box.get("result", ("Unknown error.", ""))

data/humbrol_tamyia.csv

@@ -0,0 +1,172 @@
+humbrol,tamiya,tamiya_name
+1,X21,Flat Base
+2,X5,Green
+3,X5,Green
+5,XF66,Light Grey
+7,XF57,Buff
+9,,
+10,X9,Brown
+11,X11,Chrome Silver
+12,XF6,Copper
+14,X4,Blue
+15,X3,Royal Blue
+16,X12,Gold Leaf
+18,X6,Orange
+19,X7,Red
+20,,
+21,X1,Black
+22,X2,White
+23,XF21,Sky
+24,,
+25,XF8,Flat Blue
+26,XF49,Khaki
+27,XF54,Dark Sea Grey
+28,XF55,Deck Tan
+29,XF52,Flat Earth
+30,XF58,Olive Green
+31,XF25,Light Sea Grey
+32,XF24,Dark Grey
+33,XF1,Flat Black
+34,XF2,Flat White
+35,X22,Clear
+35,,
+36,,
+37,,
+38,X15,Light Green
+40,,
+41,,
+42,,
+44,,
+46,,
+47,,
+48,X14,Sky Blue
+49,X21,Flat Base
+49,,
+52,X13,Metallic Blue
+53,X10,Gun Metal
+54,,
+55,,
+56,XF56,Metallic Grey
+57,,
+58,,
+60,XF7,Flat Red
+61,XF15,Flat Flesh
+62,,
+63,XF59,Desert Yellow
+64,XF12,J.N. Grey
+65,XF21,Sky
+66,XF65,Field Grey
+67,XF63,German Grey
+68,X16,Purple
+69,X8,Lemon Yellow
+70,XF68,NATO Brown
+71,,
+72,XF49,Khaki
+73,XF9,Hull Red
+74,,
+75,XF11,J.N. Green
+76,XF26,Deep Green
+77,XF50,Field Blue
+78,XF71,Cockpit Green
+79,XF50,Field Blue
+80,X28,Park Green
+81,XF4,Yellow Green
+82,,
+83,XF60,Dark Yellow
+85,X18,Semi Gloss Black
+86,XF58,Olive Green
+87,XF25,Light Sea Grey
+88,XF26,Deep Green
+89,,
+90,XF21,Sky
+91,XF27,Black Green
+93,XF59,Desert Yellow
+94,XF59,Desert Yellow
+96,XF18,Medium Blue
+98,XF10,Flat Brown
+99,XF3,Flat Yellow
+100,,
+101,XF5,Flat Green
+102,,
+103,,
+104,XF17,Sea Blue
+105,XF5,Flat Green
+106,XF66,Light Grey
+109,,
+110,XF55,Deck Tan
+113,XF68,NATO Brown
+116,XF13,J.A. Green
+117,XF58,Olive Green
+118,XF52,Flat Earth
+119,XF52,Flat Earth
+120,XF26,Deep Green
+121,XF59,Desert Yellow
+123,XF24,Dark Grey
+125,XF24,Dark Grey
+126,XF53,Neutral Grey
+127,XF19,Sky Grey
+128,XF53,Neutral Grey
+129,XF20,Medium Grey
+130,XF1,Flat Black
+131,,
+132,,
+133,,
+135,,
+135,,
+140,XF54,Dark Sea Grey
+145,,
+147,XF14,J.A. Grey
+148,XF15,Flat Flesh
+149,XF26,Deep Green
+150,,
+153,XF7,Flat Red
+154,,
+155,XF62,Olive Drab
+156,XF53,Neutral Grey
+157,,
+159,,
+160,XF64,Red Brown
+163,,
+164,XF24,Dark Grey
+164,,
+165,XF54,Dark Sea Grey
+165,,
+166,,
+167,XF19,Sky Grey
+168,,
+171,,
+173,,
+174,XF7,Flat Red
+186,XF52,Flat Earth
+191,X11,Chrome Silver
+196,XF66,Light Grey
+200,X17,Pink
+201,,
+208,,
+209,,
+220,,
+222,,
+224,,
+225,,
+226,,
+230,XF18,Medium Blue
+237,,
+238,,
+239,,
+240,XF22,R.L.M. Grey
+241,XF27,Black Green
+242,XF58,Olive Green
+243,XF26,Deep Green
+244,XF27,Black Green
+245,XF63,German Grey
+246,,
+247,,
+248,XF23,Light Blue
+249,XF60,Dark Yellow
+251,,
+252,XF27,Black Green
+253,,
+27001,,
+27002,,
+27003,,
+27004,,

frontend/app.js

@@ -0,0 +1,111 @@
+import { Client, handle_file } from "https://cdn.jsdelivr.net/npm/@gradio/client@2.2.1";
+
+const $ = (id) => document.getElementById(id);
+
+const SAMPLES = [
+  { src: "/examples/paper-2.jpg", fmt: "airfix_instruction", lbl: "Instructions A"  },
+  { src: "/examples/paper-3.JPG", fmt: "airfix_instruction", lbl: "Instructions B"  },
+  { src: "/examples/shop-2.png",  fmt: "airfix_shop",        lbl: "Shop listing"    },
+  { src: "/examples/shop-3.png",  fmt: "airfix_shop",        lbl: "Colour chart"    },
+];
+
+document.querySelectorAll(".smp").forEach((btn, i) => {
+  const s = SAMPLES[i];
+  btn.style.backgroundImage = `url('${s.src}')`;
+  btn.title = s.lbl;
+  btn.addEventListener("click", () => loadSample(s.src, s.fmt));
+});
+
+async function loadSample(src, fmt) {
+  const resp = await fetch(src);
+  const blob = await resp.blob();
+  const filename = src.split("/").pop();
+  const file = new File([blob], filename, { type: blob.type });
+  const dt = new DataTransfer();
+  dt.items.add(file);
+  $("file").files = dt.files;
+  $("file").dispatchEvent(new Event("change"));
+  $("format").value = fmt;
+}
+
+// On file select: swap the dropzone for the EXHIBIT A evidence frame
+// (dark frame + clip + RECEIVED stamp wrapping the user's uploaded image).
+let previewUrl = null;
+$("file").addEventListener("change", () => {
+  const f = $("file").files[0];
+  const preview = $("preview");
+  const dropzone = $("dropzone");
+  const evidence = $("evidence");
+  if (previewUrl) { URL.revokeObjectURL(previewUrl); previewUrl = null; }
+  if (f) {
+    previewUrl = URL.createObjectURL(f);
+    preview.src = previewUrl;
+    $("src-name").textContent = "SRC: " + f.name;
+    dropzone.style.display = "none";
+    evidence.classList.add("on");
+  } else {
+    preview.removeAttribute("src");
+    $("src-name").textContent = "SRC: —";
+    dropzone.style.display = "";
+    evidence.classList.remove("on");
+  }
+  // Reset the right side to STANDBY (radar) before the next analysis.
+  $("reportIdle").style.display = "";
+  $("report").style.display = "none";
+});
+
+async function run() {
+  const file = $("file").files[0];
+  const report = $("report");
+  const scan = $("scan");
+  // Always swap radar idle for the report text element before reporting anything.
+  $("reportIdle").style.display = "none";
+  report.style.display = "";
+  if (!file) {
+    report.classList.remove("pulse");
+    report.classList.add("alert");
+    report.textContent = "No image provided.";
+    return;
+  }
+  const format_id = $("format").value;
+
+  $("analyze").disabled = true;
+  $("manifest").innerHTML = '<div class="idle-m">Awaiting resupply manifest…</div>';
+  scan.classList.add("on");
+  report.classList.remove("alert");
+  report.classList.add("pulse");
+  report.textContent = "▸ Establishing uplink to field unit…";
+
+  try {
+    const client = await Client.connect(window.location.origin);
+    const job = client.submit("/analyze", { image: handle_file(file), format_id });
+
+    let finalReceived = false;
+    for await (const msg of job) {
+      if (msg.type !== "data") continue;
+      const [text, manifest] = msg.data;          // tuple yielded by the backend
+      if (manifest && manifest !== "") {          // final event: manifest non-empty
+        finalReceived = true;
+        report.classList.remove("pulse");
+        report.textContent = text;
+        $("manifest").innerHTML = manifest;
+      } else {                                     // streaming status line
+        report.textContent = text;
+      }
+    }
+    if (!finalReceived) {
+      report.classList.remove("pulse");
+      report.classList.add("alert");
+      report.textContent = "Analysis ended without a result — field unit may be offline.";
+    }
+  } catch (err) {
+    report.classList.remove("pulse");
+    report.classList.add("alert");
+    report.textContent = "Field unit offline — " + (err && err.message ? err.message : err);
+  } finally {
+    scan.classList.remove("on");   // stop the sweep loop
+    $("analyze").disabled = false;
+  }
+}
+
+$("analyze").addEventListener("click", run);

frontend/index.html

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Paint Match — Colour Identification Unit</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Black+Ops+One&family=Stardos+Stencil:wght@400;700&family=Saira+Condensed:wght@400;500;600;700&family=Saira+Semi+Condensed:wght@500;600;700&family=Special+Elite&display=swap" rel="stylesheet">
+<style>
+:root{
+  --olive:#46522f;
+  --olive-2:#3a4528;
+  --olive-dark:#2c351d;
+  --panel:rgba(13,17,8,0.74);
+  --panel-edge:rgba(199,176,116,0.22);
+  --panel-edge-hi:rgba(214,196,140,0.40);
+  --inner:#0c0f07;
+  --gold:#d3bd83;
+  --gold-bright:#e6d29a;
+  --gold-dim:#9b8d57;
+  --text:#dcd7c0;
+  --text-dim:#9a9a80;
+  --orange:#d6841f;
+  --orange-hi:#f0a338;
+  --orange-dk:#a85f12;
+  --stamp-red:#a8362c;
+  --teletype:#bfe6b6;
+}
+*{box-sizing:border-box}
+html,body{margin:0;padding:0}
+body{
+  font-family:"Saira Condensed",sans-serif;
+  color:var(--text);
+  min-height:100vh;
+  background:
+    radial-gradient(120% 90% at 50% -10%, rgba(120,134,84,0.18), transparent 60%),
+    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,0.55), transparent 55%),
+    linear-gradient(160deg, var(--olive) 0%, var(--olive-2) 45%, var(--olive-dark) 100%);
+  position:relative;
+  overflow-x:hidden;
+}
+/* weathered metal grain overlay */
+body::before{
+  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
+  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
+  opacity:0.06;mix-blend-mode:overlay;
+}
+/* scratches + grime */
+body::after{
+  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0.5;
+  background-image:
+    linear-gradient(105deg, transparent 0 38%, rgba(0,0,0,0.10) 38.4%, transparent 39%),
+    linear-gradient(102deg, transparent 0 71%, rgba(0,0,0,0.08) 71.3%, transparent 72%),
+    linear-gradient(98deg, transparent 0 12%, rgba(180,190,140,0.05) 12.4%, transparent 13%),
+    radial-gradient(2px 2px at 14% 22%, rgba(60,40,20,0.5), transparent 60%),
+    radial-gradient(2px 2px at 86% 18%, rgba(60,40,20,0.4), transparent 60%),
+    radial-gradient(2px 2px at 64% 84%, rgba(60,40,20,0.4), transparent 60%),
+    radial-gradient(2px 2px at 30% 92%, rgba(60,40,20,0.4), transparent 60%);
+}
+.wrap{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:34px 30px 70px;}
+
+/* corner classification stamps */
+.page-stamp{position:fixed;z-index:3;font-family:"Stardos Stencil",sans-serif;font-weight:700;
+  letter-spacing:3px;color:rgba(168,54,44,0.5);border:3px solid rgba(168,54,44,0.42);
+  padding:5px 12px;text-transform:uppercase;font-size:15px;pointer-events:none;
+  mix-blend-mode:screen;filter:contrast(1.1);}
+.page-stamp.tl{top:26px;left:26px;transform:rotate(-9deg)}
+.page-stamp.br{bottom:24px;right:30px;transform:rotate(6deg)}
+
+/* ---------- header / emblem ---------- */
+.hero{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:30px;}
+.emblem{
+  position:relative;display:flex;align-items:center;gap:14px;
+  padding:12px 30px;border-radius:8px;
+  background:linear-gradient(180deg,#5a6038 0%, #2c3019 55%, #1a1d0f 100%);
+  border:1px solid #6c7344;
+  box-shadow:0 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 8px rgba(0,0,0,0.6);
+}
+.emblem::before,.emblem::after{content:"";position:absolute;top:50%;width:54px;height:14px;transform:translateY(-50%);
+  background:linear-gradient(180deg,#8d9258,#3d4222);clip-path:polygon(0 40%,100% 0,100% 100%,0 60%);opacity:0.9}
+.emblem::before{left:-50px}
+.emblem::after{right:-50px;transform:translateY(-50%) scaleX(-1)}
+.emblem .star{color:#e9c45a;font-size:26px;text-shadow:0 1px 2px rgba(0,0,0,0.7);line-height:1}
+.emblem .word{font-family:"Black Ops One",sans-serif;font-size:34px;letter-spacing:2px;line-height:1;
+  background:linear-gradient(180deg,#f3e3a8 0%, #c79a3e 48%, #8a6a22 52%, #e8d49a 100%);
+  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
+  filter:drop-shadow(0 2px 1px rgba(0,0,0,0.6));}
+.rivet{position:absolute;width:9px;height:9px;border-radius:50%;
+  background:radial-gradient(circle at 35% 30%, #cfd2c0, #6a6d52 55%, #1c1d12 100%);
+  box-shadow:0 1px 1px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.4);}
+.emblem .rivet:nth-child(1){top:7px;left:9px}
+.emblem .rivet:nth-child(2){top:7px;right:9px}
+.emblem .rivet:nth-child(3){bottom:7px;left:9px}
+.emblem .rivet:nth-child(4){bottom:7px;right:9px}
+.subtitle{font-family:"Stardos Stencil",sans-serif;font-weight:700;font-size:26px;letter-spacing:11px;
+  color:var(--gold);text-transform:uppercase;padding-left:11px;
+  text-shadow:0 2px 4px rgba(0,0,0,0.6);text-align:center;}
+.refline{font-family:"Saira Condensed";font-size:13px;letter-spacing:4px;color:var(--gold-dim);text-transform:uppercase;}
+
+/* ---------- layout ---------- */
+.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
+.col{display:flex;flex-direction:column;gap:22px;}
+
+/* ---------- riveted panel ---------- */
+.panel{position:relative;border-radius:12px;padding:20px 22px 22px;
+  background:var(--panel);
+  border:1px solid var(--panel-edge);
+  box-shadow:0 10px 26px rgba(0,0,0,0.45), inset 0 1px 0 var(--panel-edge-hi), inset 0 -2px 10px rgba(0,0,0,0.5);
+  backdrop-filter:blur(1px);}
+.panel::before,.panel::after,.panel .b3,.panel .b4{content:"";position:absolute;width:10px;height:10px;border-radius:50%;
+  background:radial-gradient(circle at 36% 30%, #c4c6b0, #5e6147 52%, #15170d 100%);
+  box-shadow:inset 0 1px 1px rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.6);}
+.panel::before{top:9px;left:9px}
+.panel::after{top:9px;right:9px}
+.panel .b3{bottom:9px;left:9px}
+.panel .b4{bottom:9px;right:9px}
+.phead{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 8px 11px;
+  border-bottom:1px solid rgba(199,176,116,0.18);}
+.phead h2{margin:0;font-family:"Stardos Stencil",sans-serif;font-weight:700;font-size:18px;letter-spacing:4px;
+  color:var(--gold);text-transform:uppercase;}
+.phead .tick{width:9px;height:9px;background:var(--orange);transform:rotate(45deg);box-shadow:0 0 8px rgba(214,132,31,0.6);flex:none;}
+
+/* ---------- select ---------- */
+.select{position:relative;}
+.select select{appearance:none;-webkit-appearance:none;width:100%;padding:15px 46px 15px 18px;
+  font-family:"Saira Condensed";font-weight:600;font-size:18px;letter-spacing:0.5px;color:var(--text);
+  background:var(--inner);border:1px solid rgba(199,176,116,0.22);border-radius:8px;cursor:pointer;
+  box-shadow:inset 0 2px 8px rgba(0,0,0,0.6);}
+.select select:focus{outline:1px solid var(--gold-dim);}
+.select select option{background:var(--inner);color:var(--text);}
+.select::after{content:"";position:absolute;right:18px;top:50%;transform:translateY(-30%);
+  border-left:7px solid transparent;border-right:7px solid transparent;border-top:8px solid var(--gold-dim);pointer-events:none;}
+
+/* ---------- upload / evidence ---------- */
+/* visually-hidden native file input (removes black artifact) */
+.vh-input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
+  clip:rect(0 0 0 0);white-space:nowrap;border:0;}
+
+.dropzone{position:relative;min-height:300px;border:2px dashed rgba(199,176,116,0.32);border-radius:10px;
+  background:radial-gradient(120% 80% at 50% 30%, rgba(20,26,12,0.6), var(--inner));
+  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;cursor:pointer;
+  transition:border-color .2s, background .2s;}
+.dropzone:hover{border-color:var(--orange);background:radial-gradient(120% 80% at 50% 30%, rgba(40,30,10,0.5), var(--inner));}
+.reticle{position:relative;width:74px;height:74px;border-radius:50%;
+  border:2px solid var(--gold-dim);box-shadow:0 0 0 6px rgba(155,141,87,0.08), inset 0 0 0 1px rgba(155,141,87,0.25);}
+.reticle::before,.reticle::after{content:"";position:absolute;background:var(--gold-dim);}
+.reticle::before{left:50%;top:-12px;bottom:-12px;width:1.5px;transform:translateX(-50%);}
+.reticle::after{top:50%;left:-12px;right:-12px;height:1.5px;transform:translateY(-50%);}
+.reticle .dot{position:absolute;inset:0;margin:auto;width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange);}
+.reticle .tk{position:absolute;width:7px;height:7px;border:2px solid var(--gold);}
+.reticle .tk.a{top:6px;left:6px;border-right:0;border-bottom:0}
+.reticle .tk.b{top:6px;right:6px;border-left:0;border-bottom:0}
+.reticle .tk.c{bottom:6px;left:6px;border-right:0;border-top:0}
+.reticle .tk.d{bottom:6px;right:6px;border-left:0;border-top:0}
+.dz-main{font-family:"Saira Condensed";font-weight:600;font-size:20px;letter-spacing:1px;color:var(--text);text-align:center;padding:0 16px;}
+.dz-sub{font-family:"Saira Condensed";font-size:14px;letter-spacing:3px;color:var(--text-dim);text-transform:uppercase;}
+
+/* evidence frame (filled state) */
+.evidence{display:none;cursor:pointer;}
+.evidence.on{display:block;animation:fadein .35s ease;}
+.ev-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;
+  background:linear-gradient(180deg,#1c2110,#0e1107);border:1px solid rgba(199,176,116,0.25);border-bottom:0;
+  border-radius:8px 8px 0 0;}
+.ev-head .ttl{font-family:"Stardos Stencil";font-weight:700;letter-spacing:3px;font-size:14px;color:var(--gold);text-transform:uppercase;}
+.ev-head .ref{font-family:"Saira Condensed";font-size:12px;letter-spacing:2px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%;}
+.ev-body{position:relative;padding:18px;background:repeating-linear-gradient(45deg,#0a0d06,#0a0d06 9px,#0d1108 9px,#0d1108 18px);
+  border:1px solid rgba(199,176,116,0.25);border-radius:0 0 8px 8px;overflow:hidden;}
+.ev-doc{position:relative;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,0.6);transform:rotate(-0.6deg);}
+.ev-doc img{display:block;width:100%;height:auto;border-radius:6px;}
+/* RECEIVED stamp + clip */
+.stamp{position:absolute;font-family:"Stardos Stencil";font-weight:700;letter-spacing:3px;text-transform:uppercase;
+  color:var(--stamp-red);border:3px solid var(--stamp-red);padding:5px 11px;font-size:18px;
+  border-radius:4px;opacity:0.82;mix-blend-mode:multiply;filter:contrast(1.2);}
+.stamp.received{right:14px;top:14px;transform:rotate(-13deg);z-index:5;}
+.clip{position:absolute;left:50%;top:-9px;transform:translateX(-50%);width:30px;height:54px;border:4px solid #b9bcae;
+  border-radius:14px 14px 6px 6px;z-index:6;box-shadow:0 2px 4px rgba(0,0,0,0.5);}
+.clip::after{content:"";position:absolute;inset:6px 6px 18px;border:3px solid #9a9d90;border-radius:9px 9px 0 0;}
+@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+
+/* scan-sweep overlay (loops over the document for the whole analysis) */
+.scan{position:absolute;inset:18px;pointer-events:none;opacity:0;z-index:7;border-radius:6px;overflow:hidden;transform:rotate(-0.6deg);}
+.scan.on{opacity:1;}
+.scan .line{position:absolute;left:0;right:0;height:46px;top:-46px;
+  background:linear-gradient(180deg,transparent, rgba(120,255,150,0.0) 30%, rgba(120,255,150,0.28) 50%, rgba(120,255,150,0.0) 70%, transparent);
+  box-shadow:0 0 22px rgba(120,255,150,0.5);}
+.scan.on .line{animation:sweep 1.7s linear infinite;}
+.scan .grid-lines{position:absolute;inset:0;opacity:0.25;mix-blend-mode:screen;
+  background-image:linear-gradient(rgba(120,255,150,0.5) 1px,transparent 1px),linear-gradient(90deg,rgba(120,255,150,0.5) 1px,transparent 1px);
+  background-size:26px 26px;}
+@keyframes sweep{0%{top:-46px}100%{top:100%}}
+
+/* ---------- commence button ---------- */
+.commence{position:relative;margin-top:4px;width:100%;border:0;cursor:pointer;border-radius:40px;padding:18px;
+  font-family:"Stardos Stencil";font-weight:700;font-size:21px;letter-spacing:6px;text-transform:uppercase;color:#3a2305;
+  background:linear-gradient(180deg,var(--orange-hi),var(--orange) 55%,var(--orange-dk));
+  box-shadow:0 8px 0 #6f3f0c, 0 12px 22px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.45);
+  transition:transform .07s, box-shadow .07s;}
+.commence:hover:not(:disabled){filter:brightness(1.05)}
+.commence:active:not(:disabled){transform:translateY(5px);box-shadow:0 3px 0 #6f3f0c, 0 6px 12px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.4);}
+.commence:disabled{filter:grayscale(0.4) brightness(0.8);cursor:progress;}
+.commence .ico{display:inline-block;width:14px;height:14px;border-radius:50%;border:3px solid #3a2305;vertical-align:middle;margin-right:12px;}
+
+/* ---------- field report ---------- */
+.report-idle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
+  min-height:200px;color:var(--text-dim);}
+.report-idle .radar{position:relative;width:96px;height:96px;border-radius:50%;border:1px solid rgba(120,200,140,0.3);
+  background:radial-gradient(circle,rgba(60,120,70,0.16),transparent 70%);overflow:hidden;}
+.report-idle .radar::before{content:"";position:absolute;inset:0;border-radius:50%;
+  background:conic-gradient(from 0deg, rgba(120,255,150,0.0) 0deg, rgba(120,255,150,0.35) 40deg, transparent 60deg);
+  animation:spin 2.6s linear infinite;}
+.report-idle .radar::after{content:"";position:absolute;inset:0;margin:auto;width:5px;height:5px;border-radius:50%;
+  background:var(--teletype);box-shadow:0 0 8px var(--teletype);}
+.report-idle .rings{position:absolute;inset:0;border-radius:50%;
+  background:radial-gradient(circle, transparent 30%, rgba(120,200,140,0.18) 31%, transparent 32%, transparent 60%, rgba(120,200,140,0.18) 61%, transparent 62%);}
+.report-idle span{font-family:"Saira Condensed";letter-spacing:5px;text-transform:uppercase;font-size:14px;}
+@keyframes spin{to{transform:rotate(360deg)}}
+
+.report-body{font-family:"Special Elite",monospace;font-size:15px;line-height:1.62;color:var(--teletype);
+  min-height:200px;white-space:pre-wrap;word-break:break-word;letter-spacing:0.3px;
+  text-shadow:0 0 6px rgba(120,255,150,0.15);}
+@keyframes report-pulse{0%,100%{opacity:1}50%{opacity:0.45}}
+.report-body.pulse{color:var(--gold-bright);letter-spacing:1px;animation:report-pulse 1.2s ease-in-out infinite;}
+.report-body.alert{color:#e0683c;text-shadow:none;}
+
+/* ---------- resupply manifest ---------- */
+.manifest-box{min-height:120px;font-family:"Saira Condensed";font-size:15px;}
+.manifest-box .idle-m{font-style:italic;color:var(--text-dim);letter-spacing:2px;padding:10px 2px;}
+#manifest ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;}
+#manifest li{padding:10px 13px;border-radius:9px;background:rgba(10,13,6,0.6);
+  border:1px solid rgba(199,176,116,0.16);box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
+  color:var(--text);line-height:1.4;}
+#manifest a{color:var(--orange-hi);text-decoration:none;font-weight:600;}
+#manifest a:hover{text-decoration:underline;}
+#manifest p{color:var(--text-dim);font-style:italic;letter-spacing:2px;padding:10px 2px;}
+
+/* ---------- inventory badge ---------- */
+#manifest li.owned{border-color:rgba(100,160,80,0.30);background:rgba(8,14,6,0.75);}
+.owned-badge{
+  display:inline-block;
+  font-family:"Stardos Stencil",sans-serif;font-weight:700;
+  font-size:10px;letter-spacing:2px;text-transform:uppercase;
+  color:#8ec98e;border:1px solid rgba(100,160,80,0.45);
+  padding:2px 7px;border-radius:3px;
+  background:rgba(30,50,18,0.7);
+  vertical-align:middle;margin-left:6px;
+}
+.owned-status{
+  display:block;margin-top:3px;
+  font-family:"Saira Condensed";font-size:11px;letter-spacing:2.5px;
+  color:rgba(142,201,142,0.55);text-transform:uppercase;
+}
+
+.footnote{margin-top:30px;text-align:center;font-family:"Stardos Stencil",sans-serif;font-weight:700;
+  font-size:16px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;
+  text-shadow:0 1px 3px rgba(0,0,0,0.6);}
+.footnote .heart{color:var(--stamp-red);text-transform:none;font-size:17px;
+  text-shadow:0 0 6px rgba(168,54,44,0.5);}
+
+/* ---------- sample thumbnails ---------- */
+.samples{margin-top:14px;text-align:center;}
+.samples-label{font-family:"Saira Condensed";font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--text-dim);}
+.samples-groups{display:flex;gap:16px;justify-content:center;margin-top:8px;}
+.smp-group{display:flex;flex-direction:column;align-items:center;gap:5px;}
+.smp-group-label{font-family:"Saira Condensed";font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-dim);}
+.samples-row{display:flex;gap:8px;}
+.smp{width:68px;height:50px;background-size:cover;background-position:center;background-color:transparent;
+  border:1px solid rgba(199,176,116,0.28);border-radius:6px;cursor:pointer;
+  filter:sepia(0.5) brightness(0.85);transition:filter .18s,border-color .18s;padding:0;}
+.smp:hover{filter:sepia(0) brightness(1);border-color:var(--orange);}
+.smp:active{transform:scale(0.96);}
+
+@media(prefers-reduced-motion:reduce){
+  .report-body.pulse{animation:none;}
+  .evidence.on{animation:none;}
+  .report-idle .radar::before{animation:none;}
+  .scan.on .line{animation:none;display:none;}
+}
+@media(max-width:880px){
+  .grid{grid-template-columns:1fr}
+  .subtitle{font-size:18px;letter-spacing:6px}
+  .page-stamp{display:none}
+}
+</style>
+</head>
+<body>
+<div class="page-stamp tl">Classified</div>
+<div class="page-stamp br">Eyes Only</div>
+
+<div class="wrap">
+  <header class="hero">
+    <div class="emblem">
+      <span class="rivet"></span><span class="rivet"></span><span class="rivet"></span><span class="rivet"></span>
+      <span class="star">★</span>
+      <span class="word">PAINT MATCH</span>
+    </div>
+    <div class="subtitle">Colour Identification Unit</div>
+    <div class="refline">Ref · PM-1940-X &nbsp;//&nbsp; Sortie Log Active</div>
+  </header>
+
+  <div class="grid">
+    <!-- LEFT COLUMN -->
+    <div class="col">
+      <section class="panel">
+        <span class="b3"></span><span class="b4"></span>
+        <div class="phead"><span class="tick"></span><h2>Document Classification</h2></div>
+        <div class="select">
+          <select id="format">
+            <option value="airfix_instruction">Airfix paper instruction sheet</option>
+            <option value="airfix_shop">Airfix shop screenshot</option>
+          </select>
+        </div>
+      </section>
+
+      <section class="panel">
+        <span class="b3"></span><span class="b4"></span>
+        <div class="phead"><span class="tick"></span><h2>Upload Document</h2></div>
+
+        <input type="file" id="file" accept="image/*" class="vh-input">
+
+        <!-- empty state -->
+        <label class="dropzone" id="dropzone" for="file">
+          <div class="reticle">
+            <span class="dot"></span>
+            <span class="tk a"></span><span class="tk b"></span><span class="tk c"></span><span class="tk d"></span>
+          </div>
+          <div class="dz-main">Drop recon photo here or click to acquire</div>
+          <div class="dz-sub">JPG · PNG · WEBP — Max 10MB</div>
+        </label>
+
+        <!-- filled / evidence state -->
+        <label class="evidence" id="evidence" for="file">
+          <div class="ev-head">
+            <span class="ttl">Exhibit A — Recovered Document</span>
+            <span class="ref" id="src-name">SRC: —</span>
+          </div>
+          <div class="ev-body">
+            <div class="clip"></div>
+            <div class="ev-doc">
+              <img id="preview" alt="Recovered document">
+              <div class="stamp received">Received</div>
+            </div>
+            <div class="scan" id="scan"><div class="grid-lines"></div><div class="line"></div></div>
+          </div>
+        </label>
+
+        <div class="samples">
+          <span class="samples-label">— or load sample —</span>
+          <div class="samples-groups">
+            <div class="smp-group">
+              <span class="smp-group-label">Instructions</span>
+              <div class="samples-row">
+                <button class="smp"></button>
+                <button class="smp"></button>
+              </div>
+            </div>
+            <div class="smp-group">
+              <span class="smp-group-label">Shop</span>
+              <div class="samples-row">
+                <button class="smp"></button>
+                <button class="smp"></button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <button class="commence" id="analyze" type="button"><span class="ico"></span>Commence Analysis</button>
+    </div>
+
+    <!-- RIGHT COLUMN -->
+    <div class="col">
+      <section class="panel">
+        <span class="b3"></span><span class="b4"></span>
+        <div class="phead"><span class="tick"></span><h2>Field Report</h2></div>
+        <div class="report-idle" id="reportIdle">
+          <div class="radar"><div class="rings"></div></div>
+          <span>Standby — awaiting field report</span>
+        </div>
+        <div class="report-body" id="report" style="display:none"></div>
+      </section>
+
+      <section class="panel">
+        <span class="b3"></span><span class="b4"></span>
+        <div class="phead"><span class="tick"></span><h2>Resupply Manifest</h2></div>
+        <div class="manifest-box" id="manifest">
+          <div class="idle-m">Awaiting resupply manifest…</div>
+        </div>
+      </section>
+    </div>
+  </div>
+
+  <div class="footnote">— Built with <span class="heart">♥</span> in tribute to <a href="https://en.wikipedia.org/wiki/Airfix_Dogfighter" target="_blank" style="color:inherit;text-decoration:underline;text-underline-offset:3px;opacity:0.8;">Airfix&nbsp;Dogfighter</a> —</div>
+</div>
+<script type="module" src="app.js"></script>
+</body>
+</html>

inventory.py

@@ -0,0 +1,27 @@
+import json
+import logging
+import os
+
+logger = logging.getLogger(__name__)
+
+
+def _load() -> frozenset:
+    sa_json = os.environ.get("GOOGLE_SERVICE_ACCOUNT_JSON", "")
+    sheet_id = os.environ.get("GOOGLE_SHEET_ID", "")
+    if not sa_json or not sheet_id:
+        logger.warning("inventory: env vars missing — inventory disabled")
+        return frozenset()
+    try:
+        import gspread
+        gc = gspread.service_account_from_dict(json.loads(sa_json))
+        ws = gc.open_by_key(sheet_id).sheet1
+        rows = ws.get_all_values()
+        codes = {row[0].strip().upper().replace("-", "") for row in rows[1:] if row and row[0].strip()}
+        logger.info("inventory: loaded %d codes", len(codes))
+        return frozenset(codes)
+    except Exception as exc:
+        logger.warning("inventory: failed to load (%s) — inventory disabled", exc)
+        return frozenset()
+
+
+OWNED: frozenset = _load()

requirements.txt

@@ -0,0 +1,3 @@
+requests
+pillow
+gspread

server.py

@@ -0,0 +1,73 @@
+import os
+import PIL.Image
+import gradio as gr
+from starlette.middleware.base import BaseHTTPMiddleware
+from starlette.responses import FileResponse
+
+from app import analyze as _analyze  # existing generator: yields (status, "") then (raw, manifest_html)
+
+FRONTEND_DIR = os.path.join(os.path.dirname(__file__), "frontend")
+
+app = gr.Server(title="Paint Match")
+
+
+@app.api(name="analyze", stream_every=0.5)
+def analyze(image: PIL.Image.Image, format_id: str) -> tuple[str, str]:
+    """Stream rotating status lines, then the final (field report, resupply manifest HTML).
+
+    gr.Server delivers `image` as a Gradio FileData dict (the PIL type hint is not
+    coerced). Accept both a dict (production: open the path) and a real PIL image
+    (so unit tests can pass one directly); None falls through to app.analyze's guard.
+    """
+    if isinstance(image, dict):
+        image = PIL.Image.open(image["path"])
+    yield from _analyze(image, format_id)
+
+
+# ---------------------------------------------------------------------------
+# Frontend middleware — intercepts /, /app.js, /assets/* BEFORE Gradio's
+# routes win.  Middleware runs before the router, so ordering of route
+# registration does not matter.
+# ---------------------------------------------------------------------------
+_ASSETS_DIR   = os.path.join(FRONTEND_DIR, "assets")
+_EXAMPLES_DIR = os.path.join(os.path.dirname(__file__), "examples")
+
+class FrontendMiddleware(BaseHTTPMiddleware):
+    async def dispatch(self, request, call_next):
+        path = request.url.path
+
+        if path == "/" or path == "":
+            return FileResponse(os.path.join(FRONTEND_DIR, "index.html"))
+
+        if path == "/app.js":
+            return FileResponse(
+                os.path.join(FRONTEND_DIR, "app.js"),
+                media_type="text/javascript",
+            )
+
+        if path.startswith("/assets/"):
+            asset_rel = path[len("/assets/"):]
+            assets_root = os.path.realpath(_ASSETS_DIR)
+            full = os.path.realpath(os.path.join(assets_root, asset_rel))
+            if (full == assets_root or full.startswith(assets_root + os.sep)) and os.path.isfile(full):
+                return FileResponse(full)
+
+        if path.startswith("/examples/"):
+            rel = path[len("/examples/"):]
+            examples_root = os.path.realpath(_EXAMPLES_DIR)
+            full = os.path.realpath(os.path.join(examples_root, rel))
+            if (full == examples_root or full.startswith(examples_root + os.sep)) and os.path.isfile(full):
+                return FileResponse(full)
+
+        return await call_next(request)
+
+
+app.add_middleware(FrontendMiddleware)
+
+
+if __name__ == "__main__":
+    app.launch(
+        server_name="0.0.0.0",
+        server_port=int(os.environ.get("PORT", "7860")),
+        allowed_paths=[FRONTEND_DIR],
+    )

tests/test_app.py

@@ -0,0 +1,249 @@
+import sys, os
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
+
+from app import tamiya_shop_url, _load_humbrol_tamiya
+
+
+def test_url_xf_series():
+    assert tamiya_shop_url("XF17", "Sea Blue") == \
+        "https://www.mojehobby.pl/products/XF-17-Sea-Blue.html"
+
+
+def test_url_x_series():
+    assert tamiya_shop_url("X5", "Green") == \
+        "https://www.mojehobby.pl/products/X-5-Green.html"
+
+
+def test_url_multiword_name():
+    assert tamiya_shop_url("XF25", "Light Sea Grey") == \
+        "https://www.mojehobby.pl/products/XF-25-Light-Sea-Grey.html"
+
+
+def test_url_dotted_name():
+    assert tamiya_shop_url("XF12", "J.N. Grey") == \
+        "https://www.mojehobby.pl/products/XF-12-JN-Grey.html"
+
+
+def test_loader_returns_name():
+    table = _load_humbrol_tamiya()
+    code, name = table["104"]
+    assert code == "XF17"
+    assert name == "Sea Blue"
+
+
+def test_loader_empty_tamiya_returns_empty_strings():
+    table = _load_humbrol_tamiya()
+    code, name = table["9"]
+    assert code == ""
+    assert name == ""
+
+
+def test_loader_path_uses_data_dir():
+    """_load_humbrol_tamiya must read from data/ subdirectory."""
+    import inspect
+    source = inspect.getsource(_load_humbrol_tamiya)
+    assert '"data"' in source, "loader must reference data/ subdirectory"
+    table = _load_humbrol_tamiya()
+    assert len(table) > 100
+
+
+def test_shop_format_parses_plain_code_list():
+    """Regression: the model returns a plain '- code: name' list even under the
+    shop format. The unified regex must parse it (the old shop regex matched none)."""
+    from app import FORMATS, strip_parens, parse_entries
+    raw = ("The paint codes from the product list are:\n\n"
+           "- 11: Silver\n- 33: Matt Black\n"
+           "- 118+34: Matt Desert Sand (4 parts 118, 3 parts 34)")
+    entries = parse_entries(strip_parens(raw), FORMATS["airfix_shop"]["regex"])
+    assert [e["code"] for e in entries] == ["11", "33", "118+34"]
+
+
+def test_parser_handles_noisy_shop_output():
+    """Real shop-screenshot output: the model echoes the full product line and
+    appends a literal 'CODE: N - Name'. The tolerant parser must still extract
+    code+name and dedupe the repeated code on each line."""
+    from app import FORMATS, strip_parens, parse_entries, expand_codes
+    raw = (
+        "- Acrylic Paint 11 - Silver - Metallic - (14ml) - CODE: 11 - Silver\n"
+        "- Acrylic Paint 33 - Black - Matt - (14ml) - CODE: 33 - Black\n"
+        "- Acrylic Paint 168 - Hemp/Camouflage Beige - Matt - (14ml) - CODE: 168 - Hemp/Camouflage Beige"
+    )
+    expanded = expand_codes(parse_entries(strip_parens(raw), FORMATS["airfix_shop"]["regex"]))
+    by_code = {e["code"]: e["name"] for e in expanded}
+    assert by_code == {"11": "Silver", "33": "Black", "168": "Hemp/Camouflage Beige"}
+
+
+def test_json_parser_extracts_code_name():
+    """json_schema mode returns a JSON array; parse_json_entries pulls code+name."""
+    from app import parse_json_entries
+    raw = '[{"code": "11", "name": "Silver"}, {"code": "118+34", "name": "Desert Sand"}]'
+    entries = parse_json_entries(raw)
+    assert [(e["code"], e["name"]) for e in entries] == \
+        [("11", "Silver"), ("118+34", "Desert Sand")]
+
+
+def test_json_parser_drops_malformed_codes():
+    """Non-numeric / junk codes are filtered; a non-array yields nothing."""
+    from app import parse_json_entries
+    raw = '[{"code": "33", "name": "Black"}, {"code": "n/a"}, {"name": "no code"}]'
+    assert [e["code"] for e in parse_json_entries(raw)] == ["33"]
+    assert parse_json_entries('not json at all') == []
+    assert parse_json_entries('{"code": "11"}') == []  # object, not array
+
+
+def test_json_parser_extracts_code_from_polluted_field():
+    """json_schema enforces shape but not semantics: the 2B model dumps the whole
+    echoed product line into `code`. The parser must pull the numeric code out."""
+    from app import parse_json_entries
+    raw = ('[{"code": "Acrylic Paint 11 - Silver - Metallic", "name": "Silver - Metallic"},'
+           ' {"code": "Acrylic Paint 118+34 - Desert Sand", "name": "Desert Sand"}]')
+    assert [e["code"] for e in parse_json_entries(raw)] == ["11", "118+34"]
+
+
+def test_json_parser_feeds_expand_codes():
+    """The JSON path plugs into the shared downstream: composite split + dedupe."""
+    from app import parse_json_entries, expand_codes
+    raw = '[{"code": "118+34", "name": "Mix"}, {"code": "11", "name": "Silver"}]'
+    expanded = expand_codes(parse_json_entries(raw))
+    assert [e["code"] for e in expanded] == ["118", "34", "11"]
+
+
+def test_is_paint_name_filters_decals_and_junk():
+    """Decal/stencil refs, bare numbers and years are not paints; colour names and
+    a missing name (code still matters) are kept."""
+    from app import is_paint_name
+    assert is_paint_name("Silver - Metallic") is True
+    assert is_paint_name("Gun Metal") is True
+    assert is_paint_name(None) is True
+    assert is_paint_name("") is True
+    assert is_paint_name("Decal No. 87 May 1991") is False
+    assert is_paint_name("Stencil 12") is False
+    assert is_paint_name("11") is False          # name is just a number
+    assert is_paint_name("May 1991") is False     # year
+
+
+def test_extract_entries_drops_decal_entries():
+    """End-to-end on a JSON payload mimicking paper.JPG: decal/junk rows fall out,
+    real paint rows survive."""
+    import app
+    raw = ('[{"code": "87", "name": "Decal No. 87 May 1991"},'
+           ' {"code": "70", "name": "11"},'
+           ' {"code": "53", "name": "Gun Metal"},'
+           ' {"code": "11", "name": "Silver"}]')
+    orig = app.OUTPUT_MODE
+    app.OUTPUT_MODE = "json"
+    try:
+        entries = app.extract_entries(raw, app.CODE_REGEX)
+    finally:
+        app.OUTPUT_MODE = orig
+    assert [e["code"] for e in entries] == ["53", "11"]
+
+
+def test_json_parser_salvages_truncated_array():
+    """max_tokens can cut the JSON mid-entry; the parser must still recover the
+    complete objects before the break instead of losing everything."""
+    from app import parse_json_entries
+    truncated = ('[\n  {"code": "11", "name": "Silver"},\n'
+                 '  {"code": "33", "name": "Black"},\n'
+                 '  {"code": "Acrylic Paint')  # cut off mid-entry, no closing ]
+    assert [e["code"] for e in parse_json_entries(truncated)] == ["11", "33"]
+
+
+def test_meng_format_dropped():
+    """Meng is out of scope for the hackathon (codes don't map to Tamiya)."""
+    from app import FORMATS
+    assert "meng_color_reference" not in FORMATS
+
+
+def test_analyze_final_yield_is_two_value_tuple():
+    """analyze() is a generator (status updates, then a final (raw_str, html_str))."""
+    from unittest.mock import patch
+    from PIL import Image
+    import numpy as np
+    from app import analyze
+
+    img = Image.fromarray(np.zeros((10, 10, 3), dtype=np.uint8))
+    with patch("app.call_llama", return_value="- 33: Flat Black\n- 98: Sky Grey"):
+        updates = list(analyze(img, "airfix_instruction"))
+
+    final = updates[-1]
+    assert isinstance(final, tuple)
+    assert len(final) == 2
+    raw, html = final
+    assert isinstance(raw, str)
+    assert isinstance(html, str)
+
+
+def test_encode_image_applies_exif_orientation():
+    """Phone photos carry an EXIF orientation flag; encode_image must straighten
+    them. server.py opens raw files (PIL.Image.open) which bypass Gradio's own
+    exif_transpose, so the correction has to live in encode_image itself."""
+    import base64, io
+    from PIL import Image
+    from app import encode_image
+
+    # Portrait 100x200 stored sideways with orientation=6 (rotate to view as landscape).
+    img = Image.new("RGB", (100, 200), "white")
+    exif = img.getexif()
+    exif[274] = 6  # tag 274 = Orientation
+    buf = io.BytesIO()
+    img.save(buf, format="JPEG", exif=exif)
+    buf.seek(0)
+    reopened = Image.open(buf)  # mirrors PIL.Image.open(path) in server.py
+
+    decoded = Image.open(io.BytesIO(base64.b64decode(encode_image(reopened))))
+    # After exif_transpose the displayed image is landscape: width > height.
+    assert decoded.width > decoded.height
+
+
+def test_llama_server_defaults_to_lan(monkeypatch):
+    import importlib, app
+    monkeypatch.delenv("LLAMA_SERVER", raising=False)
+    importlib.reload(app)
+    assert app.LLAMA_SERVER == "http://192.168.68.119:8088"
+
+
+def test_llama_server_reads_env(monkeypatch):
+    import importlib, app
+    monkeypatch.setenv("LLAMA_SERVER", "https://tunnel.example.com")
+    try:
+        importlib.reload(app)
+        assert app.LLAMA_SERVER == "https://tunnel.example.com"
+    finally:
+        monkeypatch.delenv("LLAMA_SERVER", raising=False)
+        importlib.reload(app)
+
+
+def test_manifest_shows_badge_for_owned_paint(monkeypatch):
+    """When a Tamiya code is in OWNED, the manifest li must carry class='owned'."""
+    import inventory, app
+    monkeypatch.setattr(inventory, "OWNED", frozenset({"XF17"}))  # no dash, matches lookup format
+
+    from unittest.mock import patch as mpatch
+    from PIL import Image
+    img = Image.new("RGB", (10, 10))
+
+    # JSON_SCHEMA produces a bare array. Humbrol 104 → XF17 Sea Blue.
+    fake_raw = '[{"code": "104", "name": "Sea Blue"}]'
+    with mpatch.object(app, "call_llama", return_value=fake_raw):
+        raw, html = app._run_analysis(img, "airfix_shop")
+
+    assert 'class="owned"' in html, f"Expected owned badge, got: {html}"
+    assert "mojehobby" not in html, f"Shop link should not appear for owned paint"
+
+
+def test_manifest_shows_shop_link_for_unowned_paint(monkeypatch):
+    """When a Tamiya code is NOT in OWNED, the manifest li must contain a shop link."""
+    import inventory, app
+    monkeypatch.setattr(inventory, "OWNED", frozenset())
+
+    from unittest.mock import patch as mpatch
+    from PIL import Image
+    img = Image.new("RGB", (10, 10))
+
+    fake_raw = '[{"code": "104", "name": "Sea Blue"}]'
+    with mpatch.object(app, "call_llama", return_value=fake_raw):
+        raw, html = app._run_analysis(img, "airfix_shop")
+
+    assert "mojehobby" in html, f"Expected shop link, got: {html}"
+    assert 'class="owned"' not in html

tests/test_inventory.py

@@ -0,0 +1,46 @@
+import sys, os
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
+
+import importlib
+from unittest.mock import MagicMock, patch
+
+
+def make_sheet_rows(*codes):
+    return [[c] for c in codes]
+
+
+def test_owned_is_frozenset():
+    import inventory
+    assert isinstance(inventory.OWNED, frozenset)
+
+
+def test_owned_empty_when_env_missing(monkeypatch):
+    monkeypatch.delenv("GOOGLE_SERVICE_ACCOUNT_JSON", raising=False)
+    monkeypatch.delenv("GOOGLE_SHEET_ID", raising=False)
+    import inventory
+    importlib.reload(inventory)
+    assert inventory.OWNED == frozenset()
+
+
+def test_owned_normalises_to_uppercase(monkeypatch):
+    monkeypatch.setenv("GOOGLE_SERVICE_ACCOUNT_JSON", '{"type":"service_account"}')
+    monkeypatch.setenv("GOOGLE_SHEET_ID", "fake-id")
+    fake_ws = MagicMock()
+    fake_ws.get_all_values.return_value = make_sheet_rows("Kod", "x-25", "XF-24", " XF-2 ")
+    fake_gc = MagicMock()
+    fake_gc.open_by_key.return_value.sheet1 = fake_ws
+    with patch("gspread.service_account_from_dict", return_value=fake_gc):
+        import inventory
+        importlib.reload(inventory)
+    assert "X25" in inventory.OWNED
+    assert "XF24" in inventory.OWNED
+    assert "XF2" in inventory.OWNED
+
+
+def test_owned_empty_on_auth_error(monkeypatch):
+    monkeypatch.setenv("GOOGLE_SERVICE_ACCOUNT_JSON", '{"type":"service_account"}')
+    monkeypatch.setenv("GOOGLE_SHEET_ID", "fake-id")
+    with patch("gspread.service_account_from_dict", side_effect=Exception("auth failed")):
+        import inventory
+        importlib.reload(inventory)
+    assert inventory.OWNED == frozenset()

tests/test_server.py

@@ -0,0 +1,32 @@
+import sys, os
+sys.path.insert(0, os.path.dirname(os.path.dirname(__file__)))
+
+import PIL.Image
+import server
+
+
+def test_analyze_opens_filedata_dict_and_returns_manifest(monkeypatch, tmp_path):
+    # gr.Server delivers the image as a FileData dict {"path": ...}, not a PIL image.
+    # This covers server.analyze's dict-unwrap branch (its only novel logic).
+    # Force the regex parser so the line-format mock parses regardless of the
+    # default OUTPUT_MODE — this test is about the dict unwrap, not the constraint.
+    monkeypatch.setattr("app.OUTPUT_MODE", "free")
+    monkeypatch.setattr(
+        "app.call_llama",
+        lambda img_b64, prompt: "- 33: Black",
+    )
+    img_path = tmp_path / "swatch.png"
+    PIL.Image.new("RGB", (32, 32), "white").save(img_path)
+
+    updates = list(server.analyze({"path": str(img_path)}, "airfix_shop"))
+
+    assert len(updates) >= 1
+    raw, manifest = updates[-1]
+    assert "33" in raw
+    assert "Humbrol 33" in manifest
+    assert manifest.startswith("<ul>")
+
+
+def test_analyze_handles_no_image():
+    updates = list(server.analyze(None, "airfix_shop"))
+    assert updates[-1] == ("No image provided.", "")

ui.py

@@ -0,0 +1,265 @@
+import base64
+import io
+import os
+import gradio as gr
+from PIL import Image
+
+from app import analyze, FORMATS
+
+# ---------- Assets ----------
+
+def _load_asset_b64(filename: str, max_px: int | None = None) -> str:
+    path = os.path.join(os.path.dirname(__file__), "assets", filename)
+    if max_px:
+        img = Image.open(path)
+        if max(img.size) > max_px:
+            img.thumbnail((max_px, max_px))
+        buf = io.BytesIO()
+        fmt = "JPEG" if filename.lower().endswith((".jpg", ".jpeg")) else "PNG"
+        save_kw = {"quality": 85} if fmt == "JPEG" else {}
+        img.save(buf, format=fmt, **save_kw)
+        return base64.b64encode(buf.getvalue()).decode()
+    with open(path, "rb") as f:
+        return base64.b64encode(f.read()).decode()
+
+_TEXTURE_B64 = _load_asset_b64("green_metal_rust_diff_4k.jpg", max_px=600)
+_LOGO_B64 = _load_asset_b64("logo-kopia.png")
+
+# ---------- CSS ----------
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&display=swap');
+
+/* ── Theme overrides ── */
+:root {
+    --body-background-fill: #c8b878;
+    --body-text-color: #a8b080;
+    --body-text-weight: 400;
+    --background-fill-primary: rgba(38,44,26,0.92);
+    --background-fill-secondary: rgba(28,34,16,0.96);
+    --block-background-fill: rgba(38,44,26,0.92);
+    --block-border-color: #5a6840;
+    --block-border-width: 1.5px;
+    --block-label-text-color: #b8c090;
+    --block-label-text-size: var(--text-sm);
+    --block-label-text-weight: 600;
+    --block-label-background-fill: linear-gradient(180deg, rgba(48,56,32,0.98) 0%, rgba(28,34,16,0.98) 100%);
+    --block-label-border-color: #485830;
+    --input-background-fill: rgba(18,24,10,0.78);
+    --input-border-color: rgba(70,90,45,0.55);
+    --neutral-950: rgba(18,24,10,0.99);
+    --neutral-900: rgba(22,28,14,0.99);
+    --neutral-800: rgba(28,34,18,0.97);
+    --neutral-700: rgba(35,42,22,0.95);
+    --button-primary-background-fill: linear-gradient(180deg, #e09030 0%, #b06010 55%, #904800 100%);
+    --button-primary-background-fill-hover: linear-gradient(180deg, #f0a040 0%, #c07020 55%, #a05800 100%);
+    --button-primary-border-color: #c07020;
+    --button-primary-border-color-hover: #d08030;
+    --button-primary-text-color: #fff8e0;
+    --button-primary-shadow: 0 4px 10px rgba(0,0,0,0.5);
+}
+
+/* ── Font ── */
+*, *::before, *::after {
+    font-family: 'Barlow', sans-serif !important;
+}
+
+/* ── Page background (texture + fallback colour) ── */
+body, gradio-app {
+    background-image: url('data:image/jpeg;base64,TEXTURE_DATA_URI') !important;
+    background-size: 400px !important;
+    background-repeat: repeat !important;
+    background-color: #c8b878 !important;
+}
+
+/* ── Max-width and centering ── */
+.app.svelte-182fdeq, .app {
+    max-width: 900px !important;
+    margin: 0 auto !important;
+    padding: 16px !important;
+}
+
+/* ── Label uppercase + letter-spacing ── */
+label > span, .block label span {
+    text-transform: uppercase !important;
+    letter-spacing: 2px !important;
+}
+
+/* ── Button pill ── */
+#analyze-btn button {
+    border-radius: 26px !important;
+    font-size: 14px !important;
+    font-weight: 600 !important;
+    letter-spacing: 3px !important;
+    padding: 14px 0 !important;
+    width: 100% !important;
+}
+
+/* ── Header: transparent — elem_id is the direct element (container=False) ── */
+#app-header {
+    background: transparent !important;
+    background-color: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+}
+
+/* ── Olive block backgrounds — correct container class for Gradio 6.16 ── */
+.gradio-container-6-16-0 .block,
+.gradio-container-6-16-0 .form {
+    background: rgba(38,44,26,0.92) !important;
+}
+
+/* ── Gradient label strips — correct selectors from Gradio 6 source ── */
+label[data-testid="block-label"],
+button.label-wrap {
+    background: linear-gradient(180deg, rgba(48,56,32,0.98) 0%, rgba(28,34,16,0.98) 100%) !important;
+    border-bottom: 1px solid #485830 !important;
+}
+
+/* ── Consistent label font ── */
+label[data-testid="block-label"] span,
+button.label-wrap > span:first-child {
+    font-size: 11px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 2px !important;
+    font-weight: 600 !important;
+    color: #b8c090 !important;
+}
+
+/* ── Unified section headings (gr.HTML, one mechanism for all three) ── */
+.sec-head {
+    color: #b8c090 !important;
+    font-size: 13px !important;
+    font-weight: 600 !important;
+    letter-spacing: 2px !important;
+    text-align: left !important;
+    padding: 2px 0 !important;
+    margin: 0 !important;
+}
+
+/* ── Dropdown options popup ── */
+.options, ul[role="listbox"] {
+    background: rgba(28,34,16,0.98) !important;
+    border-color: #485830 !important;
+}
+
+/* ── Empty manifest: collapse when no content ── */
+#manifest { min-height: 0 !important; padding: 0 !important; }
+
+/* ── Manifest text (match Field report olive); links stay orange below ── */
+#manifest, #manifest li {
+    color: #a8b080 !important;
+}
+/* ── Manifest list: plain lines (no bullets), comfortable rhythm ── */
+#manifest ul {
+    list-style: none !important;
+    margin: 0 !important;
+    padding: 2px 0 !important;
+}
+#manifest li {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    align-items: baseline !important;
+    gap: 0.3em !important;
+    line-height: 1.7 !important;
+    margin: 0 !important;
+}
+/* ── Field report: same looser line spacing ── */
+#raw-output textarea {
+    line-height: 1.7 !important;
+}
+/* ── Manifest links ── */
+#manifest a {
+    color: #e09030 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+.in-stock {
+    color: #a0c890 !important;
+}
+
+/* ── Input text colour ── */
+input, textarea, select {
+    color: #a8b080 !important;
+    border-radius: 7px !important;
+}
+
+/* ── Mobile: stack columns vertically ── */
+@media (max-width: 768px) {
+    .gap-4 { flex-direction: column !important; }
+    .gap-4 > * { width: 100% !important; min-width: 100% !important; }
+}
+
+/* ── Upload zone: custom emoji icon ── */
+#img-upload .wrap::before {
+    content: "📂";
+    font-size: 30px;
+    display: block;
+    text-align: center;
+    padding: 14px 0 2px;
+    line-height: 1;
+}
+#img-upload .wrap svg { display: none !important; }
+@media (max-width: 768px) {
+    #img-upload .wrap::before { content: "📸"; }
+}
+"""
+CSS = CSS.replace("TEXTURE_DATA_URI", _TEXTURE_B64)
+
+# ---------- Header HTML ----------
+
+HEADER_HTML = f"""
+<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&display=swap" rel="stylesheet">
+<div style="text-align:center; padding: 20px 0 8px;">
+    <img src="data:image/png;base64,{_LOGO_B64}"
+         style="height:130px; width:auto; max-width:85%; display:block; margin:0 auto;"
+         alt="Paint Match">
+    <div style="font-family:'Barlow',sans-serif; color:#b0a878; font-size:13px; letter-spacing:5px; font-weight:700;
+                margin-top:-42px; position:relative; z-index:1; padding-bottom:20px;">
+        COLOUR IDENTIFICATION UNIT
+    </div>
+</div>
+"""
+
+# ---------- Layout ----------
+
+with gr.Blocks(title="Paint Match") as demo:
+    gr.HTML(HEADER_HTML, elem_id="app-header")
+
+    with gr.Row():
+        with gr.Column():
+            with gr.Group():
+                gr.HTML("<div class='sec-head'>Document classification</div>")
+                format_in = gr.Dropdown(
+                    choices=[(cfg["label"], fid) for fid, cfg in FORMATS.items()],
+                    value="airfix_shop",
+                    show_label=False,
+                    elem_id="format-dropdown",
+                )
+            img_in = gr.Image(type="pil", label="Upload Document", elem_id="img-upload")
+            btn = gr.Button("◉  COMMENCE ANALYSIS", variant="primary", elem_id="analyze-btn")
+
+        with gr.Column():
+            with gr.Group():
+                gr.HTML("<div class='sec-head'>Field report</div>")
+                raw_out = gr.Textbox(
+                    show_label=False,
+                    lines=8,
+                    elem_id="raw-output",
+                    placeholder="Intelligence report — commence analysis to populate.",
+                )
+            with gr.Group():
+                gr.HTML("<div class='sec-head'>Resupply manifest</div>")
+                codes_out = gr.HTML(elem_id="manifest")
+
+    btn.click(
+        analyze,
+        inputs=[img_in, format_in],
+        outputs=[raw_out, codes_out],
+        show_progress="hidden",
+    )
+
+if __name__ == "__main__":
+    os.environ.setdefault("GRADIO_DEFAULT_LOCALE", "en")
+    demo.launch(css=CSS, allowed_paths=["assets/"])