Upload console/app.js with huggingface_hub

console/app.js

@@ -0,0 +1,420 @@
+// Operator console front end: no framework, talks to console_server.py.
+"use strict";
+
+const $ = (sel) => document.querySelector(sel);
+const STATUS = {
+  ready_to_paint: ["Ready to paint", "The gate passes. Check the green area, then approve."],
+  prep_required: ["Prep first", "Damage must be scraped/treated and primed, then the wall rescanned before the coat."],
+  touch_up_only: ["Touch-up only", "The wall is signed off; only small unconfirmed patches remain."],
+  complete: ["Complete", "The wall is signed off. Nothing to paint."],
+  blocked: ["Blocked", "The safety gate stops this job. Fix or confirm the reasons below."],
+  approved: ["Approved", "This work order is frozen and recorded."],
+};
+const RELEVANT = { not_wallpaper: /wallpaper/i, depth_waived: /depth/i, uncertainty_reviewed: /uncertain|re-observ/i,
+                   colour_checked: /colour|ΔE00|tin/i };
+
+let health = null;
+let job = null;
+let tool = "none";
+let dirty = false;
+let drawing = false;
+const editCanvas = $("#edits");
+const ectx = editCanvas.getContext("2d");
+
+function esc(s) {
+  return String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+}
+function sqft(mm2) {
+  const ft = mm2 / 92903.04;
+  return ft < 0.1 ? "< 0.1 sq ft" : `${fmt(ft, ft < 10 ? 1 : 0)} sq ft`;
+}
+function fmt(n, digits = 0) {
+  return n == null ? "—" : Number(n).toLocaleString(undefined, { maximumFractionDigits: digits });
+}
+async function api(path, options = {}) {
+  const res = await fetch(path, options);
+  const body = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(body.error || `${res.status} ${res.statusText}`);
+  return body;
+}
+function store(key, value) {
+  try { value === undefined ? localStorage.getItem(key) : localStorage.setItem(key, value); } catch (_) { /* private mode */ }
+}
+function recall(key) {
+  try { return localStorage.getItem(key) || ""; } catch (_) { return ""; }
+}
+
+// ------------------------------------------------------------------ boot
+async function boot() {
+  $("#operator").value = recall("pv.operator");
+  $("#operator").addEventListener("change", (e) => store("pv.operator", e.target.value.trim()));
+  try {
+    health = await api("/api/health");
+    const m = health.model || {};
+    $("#model").textContent = `${m.checkpoint || "model"} · ${m.arch || ""} · ${m.device || ""}`;
+    if ((m.warnings || []).length) {
+      $("#banner").hidden = false;
+      $("#banner").textContent = "Model not fully calibrated: " + m.warnings.join(" · ");
+    }
+  } catch (err) {
+    $("#model").textContent = "console offline: " + err.message;
+  }
+  renderConfirmations();
+  await refreshJobs();
+  const id = new URLSearchParams(location.hash.slice(1)).get("job");
+  if (id) openJob(id);
+}
+
+async function refreshJobs() {
+  const jobs = await api("/api/jobs").catch(() => []);
+  const list = $("#job-list");
+  list.innerHTML = "";
+  for (const j of jobs) {
+    const li = document.createElement("li");
+    const b = document.createElement("button");
+    const status = j.approved ? "approved" : j.status;
+    b.innerHTML = `<span class="name">${esc(j.wall_id || j.filename || j.id)}</span>
+      <span class="small muted">${esc(new Date(j.created).toLocaleString())}</span>
+      <span class="pill ${esc(status)}">${esc((STATUS[status] || [status])[0])}</span>`;
+    if (job && job.id === j.id) b.classList.add("active");
+    b.addEventListener("click", () => openJob(j.id));
+    li.appendChild(b);
+    list.appendChild(li);
+  }
+}
+
+// ------------------------------------------------------------------ upload
+async function upload(file) {
+  if (!file) return;
+  const status = $("#upload-status");
+  status.textContent = `Analysing ${file.name}… (about 10–20 s on CPU)`;
+  try {
+    const q = new URLSearchParams({ filename: file.name, wall_id: $("#wall-id").value.trim() });
+    const created = await api(`/api/jobs?${q}`, { method: "POST", body: file, headers: { "Content-Type": file.type || "application/octet-stream" } });
+    status.textContent = "";
+    $("#wall-id").value = "";
+    showJob(created);
+    refreshJobs();
+  } catch (err) {
+    status.textContent = "Upload failed: " + err.message;
+  }
+}
+$("#file").addEventListener("change", (e) => upload(e.target.files[0]));
+const drop = $("#drop");
+["dragenter", "dragover"].forEach((t) => drop.addEventListener(t, (e) => { e.preventDefault(); drop.classList.add("over"); }));
+["dragleave", "drop"].forEach((t) => drop.addEventListener(t, (e) => { e.preventDefault(); drop.classList.remove("over"); }));
+drop.addEventListener("drop", (e) => upload(e.dataTransfer.files[0]));
+
+// ------------------------------------------------------------------ job view
+async function openJob(id) {
+  try { showJob(await api(`/api/jobs/${encodeURIComponent(id)}`)); } catch (err) { alert(err.message); }
+}
+
+function showJob(j) {
+  job = j;
+  history.replaceState(null, "", `#job=${j.id}`);
+  const v = `?v=${encodeURIComponent(j.updated || j.created)}`;
+  $("#empty").hidden = true;
+  $("#stage").hidden = false;
+  const photo = $("#photo");
+  photo.src = `/api/jobs/${j.id}/photo.jpg`;
+  for (const name of ["paint", "keepout", "uncertain", "touchup"]) {
+    document.querySelector(`img.layer[data-layer="${name}"]`).src = `/api/jobs/${j.id}/layer_${name}.png${v}`;
+  }
+  editCanvas.width = j.width;
+  editCanvas.height = j.height;
+  ectx.clearRect(0, 0, j.width, j.height);
+  if (j.has_edits) {
+    const img = new Image();
+    img.onload = () => ectx.drawImage(img, 0, 0);
+    img.src = `/api/jobs/${j.id}/layer_edits.png${v}`;
+  }
+  setDirty(false);
+  renderVector();
+  renderPanel();
+  applyLayerToggles();
+  document.querySelectorAll(".job-list button").forEach((b) => b.classList.remove("active"));
+  refreshJobs();
+}
+
+function svgEl(name, attrs) {
+  const el = document.createElementNS("http://www.w3.org/2000/svg", name);
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  return el;
+}
+const pts = (poly) => (poly || []).map(([x, y]) => `${x},${y}`).join(" ");
+
+function renderVector() {
+  const svg = $("#vector");
+  svg.innerHTML = "";
+  svg.setAttribute("viewBox", `0 0 ${job.width} ${job.height}`);
+  svg.setAttribute("preserveAspectRatio", "none");
+  const damage = svgEl("g", { "data-layer": "damage" });
+  (job.regions || []).forEach((r, i) => {
+    if (r.prep_zone_xy && r.prep_zone_xy.length > 2) damage.appendChild(svgEl("polygon", { points: pts(r.prep_zone_xy), class: "prep-zone" }));
+    if (r.outline_xy && r.outline_xy.length > 2) damage.appendChild(svgEl("polygon", { points: pts(r.outline_xy), class: "damage", "data-region": i }));
+  });
+  svg.appendChild(damage);
+  const paths = svgEl("g", { "data-layer": "paths" });
+  const lines = (strokes, cls) => (strokes || []).forEach(([[x0, y0], [x1, y1]]) =>
+    paths.appendChild(svgEl("line", { x1: x0, y1: y0, x2: x1, y2: y1, class: cls })));
+  for (const step of (job.work_order || {}).steps || []) {
+    if (step.step === "paint" && step.plan) {
+      lines(step.plan.plan.strokes, "roller");
+      lines(step.plan.plan.trim.strokes, "trim");
+    }
+    if (step.step === "prep") step.tasks.forEach((t) => lines(t.strokes_px, "prep-path"));
+    if (step.step === "touch_up") step.tasks.forEach((t) => lines(t.strokes_px, "touch-path"));
+  }
+  svg.appendChild(paths);
+}
+
+function renderPanel() {
+  const order = job.work_order || {};
+  const status = job.approved ? "approved" : order.status;
+  const [title, text] = STATUS[status] || [status || "—", ""];
+  const decision = $("#decision");
+  decision.className = `decision ${status}`;
+  decision.innerHTML = `<h3>${esc(title)}</h3><p>${esc(text)}</p>`;
+
+  const reasons = (order.gate || {}).reasons || [];
+  const warnings = order.warnings || [];
+  $("#reasons").innerHTML = reasons.length || warnings.length
+    ? `<ul class="reasons">${reasons.map((r) => `<li class="bad">${esc(r)}</li>`).join("")}${warnings.map((w) => `<li class="warn">${esc(w)}</li>`).join("")}</ul>`
+    : "";
+
+  // Confirmations: check the ones already signed; highlight the ones a reason asks for.
+  const signed = new Set((order.confirmations || []).map((c) => c.name));
+  document.querySelectorAll("#confirmations input").forEach((box) => {
+    box.checked = signed.has(box.value);
+    const label = box.closest("label");
+    label.classList.toggle("relevant", reasons.some((r) => (RELEVANT[box.value] || /$^/).test(r)));
+    box.disabled = !!job.approved;
+  });
+
+  const s = order.summary || {};
+  const scale = order.scale || {};
+  const areaFt = s.paint_area_ft2 != null ? `${fmt(s.paint_area_ft2, 1)} sq ft` : `${fmt(s.paint_area_px)} px`;
+  const m = (job.measurements || {}).faces || [];
+  // What colour is on the wall (and does it match the spec), and what equipment is on site.
+  const colour = job.paint_color || {};
+  const objects = job.site_objects || {};
+  const coat = colour.dominant;
+  const spec = colour.reference;
+  const coatCell = coat
+    ? `<span class="swatch" style="background:${esc(coat.hex)}"></span> ${esc(coat.name)}
+       <span class="muted">${esc(coat.hex)}</span>${spec ? ` · spec
+       <b class="${spec.verdict === "match" ? "" : "warn"}">${esc(spec.verdict)}</b>
+       <span class="muted">ΔE00 ${fmt(spec.delta_e, 1)}</span>` : ""}`
+    : "not reported";
+  const seen = (objects.present || []).map((n) => n.replace(/_/g, " "));
+  const equipmentCell = objects.status
+    ? `${seen.length ? esc(seen.join(", ")) : "none seen"}${(objects.missing_tools || []).length
+        ? ` <span class="warn">· missing ${esc(objects.missing_tools.join(", ").replace(/_/g, " "))}</span>` : ""}`
+    : "not reported";
+  $("#areas").innerHTML = `
+    <dt>Paint area</dt><dd>${areaFt}</dd>
+    <dt>Coat colour</dt><dd class="small">${coatCell}</dd>
+    <dt>Equipment seen</dt><dd class="small">${equipmentCell}</dd>
+    <dt>Prep regions</dt><dd>${fmt(s.prep_regions)}</dd>
+    <dt>Touch-up patches</dt><dd>${fmt(s.touch_up_patches)}</dd>
+    <dt>Wall faces measured</dt><dd>${fmt(m.length)}</dd>
+    <dt>Scale</dt><dd class="small">${scale.mm_per_px ? `${fmt(scale.mm_per_px, 2)} mm/px` : "none"}</dd>
+    ${scale.source ? `<dd class="small muted full">${esc(scale.source.replace(/_/g, " "))}</dd>` : ""}`;
+
+  const steps = $("#steps");
+  steps.innerHTML = "";
+  for (const step of order.steps || []) {
+    const li = document.createElement("li");
+    let inner = `<span class="step-name">${esc(step.step.replace("_", " "))}</span>`;
+    if (step.skipped) inner += ` <span class="small muted">— ${esc(step.skipped)}</span>`;
+    if (step.provisional) inner += ` <span class="small warn">provisional until rescan</span>`;
+    if (step.hold_minutes) inner += ` <span class="small muted">· hold ${fmt(step.hold_minutes)} min</span>`;
+    if (step.step === "rescan") inner += `<div class="small muted">${esc(step.reason)}</div>`;
+    if (step.plan) {
+      const p = step.plan.plan;
+      inner += `<div class="small muted">${fmt(p.passes)} roller passes · ${fmt(p.trim.segments)} trim strokes</div>`;
+    }
+    if (step.step === "setup") {
+      // What has to be on site before any paint: tools the plan needs, colour check, clutter.
+      inner += "<ul>" + step.tasks.map((t) => `<li class="task"><b>${esc(String(t.task).replace(/-/g, " "))}</b>
+        <div class="muted">${esc(t.detail || "")}</div></li>`).join("") + "</ul>";
+    } else if (step.step === "spot_prime") {
+      // One line per primer: the zones are the prep zones above.
+      const groups = {};
+      step.tasks.forEach((t) => {
+        const g = (groups[t.primer] = groups[t.primer] || { n: 0, mm2: 0, px: 0 });
+        g.n += 1; g.mm2 += t.zone_area_mm2 || 0; g.px += t.zone_area_px || 0;
+      });
+      inner += "<ul>" + Object.entries(groups).map(([primer, g]) => `<li class="task"><b>${esc(primer)}</b>
+        <div class="muted">${g.n} zone${g.n > 1 ? "s" : ""} · ${g.mm2 ? sqft(g.mm2) : fmt(g.px) + " px"}</div></li>`).join("") + "</ul>";
+    } else if (step.tasks) {
+      const card = (t, i) => `<li class="task" data-task="${i}" data-step="${esc(step.step)}">
+        <b>${esc(t.type ? t.type.replace("_", " ") : t.task)}</b>
+        ${t.method ? `<div>${esc(t.method)}</div>` : ""}
+        <div class="muted">${t.zone_area_mm2 || t.area_mm2 ? sqft(t.zone_area_mm2 || t.area_mm2) : fmt(t.zone_area_px ?? t.area_px) + " px"}
+        ${t.confidence ? ` · conf ${fmt(t.confidence.mean, 2)}` : ""}</div></li>`;
+      // Largest first for display (the order itself stays in travel order).
+      const ranked = step.tasks.map((t, i) => [t, i]).sort((a, b) => (b[0].zone_area_px ?? b[0].area_px) - (a[0].zone_area_px ?? a[0].area_px));
+      const head = ranked.slice(0, 3).map(([t, i]) => card(t, i)).join("");
+      const rest = ranked.slice(3).map(([t, i]) => card(t, i)).join("");
+      inner += `<ul>${head}</ul>` + (rest ? `<details class="more"><summary class="small">Show ${ranked.length - 3} more</summary><ul>${rest}</ul></details>` : "");
+    }
+    li.innerHTML = inner;
+    steps.appendChild(li);
+  }
+  // Hovering a prep/prime task highlights its damage region (tasks are in travel order; match by centre).
+  steps.querySelectorAll(".task").forEach((el) => {
+    const step = (order.steps || []).find((s) => s.step === el.dataset.step);
+    const task = step && step.tasks[+el.dataset.task];
+    const region = task && regionFor(task);
+    el.addEventListener("mouseenter", () => highlight(region, true));
+    el.addEventListener("mouseleave", () => highlight(region, false));
+  });
+
+  const locked = !!job.approved;
+  $("#replan").disabled = locked;
+  $("#approve").disabled = locked || order.status === "blocked";
+  $("#approve").title = order.status === "blocked" ? "The safety gate blocks this order" : "";
+  $("#download").hidden = false;
+  $("#download").href = `/api/jobs/${job.id}/work_order.json?download=1`;
+  $("#approved").innerHTML = locked
+    ? `Approved by <b>${esc(job.approved.by)}</b> at ${esc(new Date(job.approved.at).toLocaleString())}<br><span class="muted">registry ${esc(job.approved.registry_hash.slice(0, 16))}…</span>`
+    : "";
+  document.querySelectorAll("[data-tool]").forEach((b) => (b.disabled = locked && b.dataset.tool !== "none"));
+  $("#clear-edits").disabled = locked;
+}
+
+function regionFor(task) {
+  const poly = JSON.stringify(task.zone_polygon_px || null);
+  return (job.regions || []).findIndex((r) => JSON.stringify(r.prep_zone_xy || null) === poly);
+}
+function highlight(index, on) {
+  if (index == null || index < 0) return;
+  const el = document.querySelector(`#vector [data-region="${index}"]`);
+  if (el) el.classList.toggle("hl", on);
+}
+
+function renderConfirmations() {
+  const box = $("#confirmations");
+  box.innerHTML = "";
+  for (const [name, meaning] of Object.entries((health && health.confirmations) || {})) {
+    const label = document.createElement("label");
+    label.innerHTML = `<input type="checkbox" value="${esc(name)}"><span>${esc(meaning)}</span>`;
+    label.querySelector("input").addEventListener("change", () => setDirty(true));
+    box.appendChild(label);
+  }
+}
+
+// ------------------------------------------------------------------ layers
+function applyLayerToggles() {
+  const opacity = $("#opacity").value / 100;
+  document.querySelectorAll("#layer-toggles input").forEach((box) => {
+    const name = box.dataset.layer;
+    document.querySelectorAll(`[data-layer="${name}"]:not(input)`).forEach((el) => {
+      if (el instanceof SVGElement) el.style.display = box.checked ? "" : "none";   // .hidden is HTML-only
+      else el.hidden = !box.checked;
+      if (el.tagName === "IMG") el.style.opacity = opacity;
+    });
+  });
+}
+document.querySelectorAll("#layer-toggles input").forEach((b) => b.addEventListener("change", applyLayerToggles));
+$("#opacity").addEventListener("input", applyLayerToggles);
+
+// ------------------------------------------------------------------ brush
+document.querySelectorAll("[data-tool]").forEach((b) => b.addEventListener("click", () => {
+  tool = b.dataset.tool;
+  document.querySelectorAll("[data-tool]").forEach((x) => {
+    x.classList.toggle("on", x === b);
+    x.setAttribute("aria-pressed", String(x === b));
+  });
+  $("#stage").classList.toggle("drawing", tool !== "none");
+  if (tool !== "none") {
+    const edits = document.querySelector('#layer-toggles input[data-layer="edits"]');
+    edits.checked = true;
+    applyLayerToggles();
+  }
+}));
+
+function toImage(e) {
+  const r = editCanvas.getBoundingClientRect();
+  return { x: (e.clientX - r.left) * (editCanvas.width / r.width), y: (e.clientY - r.top) * (editCanvas.height / r.height), scale: editCanvas.width / r.width };
+}
+function dab(e) {
+  if (!editCanvas.getBoundingClientRect().width || !$("#photo").complete) return;   // photo not laid out yet
+  const { x, y, scale } = toImage(e);
+  const radius = ($("#brush").value / 2) * scale;
+  ectx.globalCompositeOperation = tool === "erase" ? "destination-out" : "source-over";
+  ectx.fillStyle = tool === "add" ? "rgb(0,255,0)" : "rgb(255,0,0)";
+  ectx.beginPath();
+  ectx.arc(x, y, radius, 0, Math.PI * 2);
+  ectx.fill();
+  setDirty(true);
+}
+function moveCursor(e) {
+  const cursor = $("#cursor");
+  const stage = $("#stage").getBoundingClientRect();
+  cursor.hidden = tool === "none";
+  const size = $("#brush").value;
+  cursor.style.width = cursor.style.height = `${size}px`;
+  cursor.style.left = `${e.clientX - stage.left}px`;
+  cursor.style.top = `${e.clientY - stage.top}px`;
+}
+editCanvas.addEventListener("pointerdown", (e) => {
+  if (tool === "none" || (job && job.approved)) return;
+  drawing = true;
+  editCanvas.setPointerCapture(e.pointerId);
+  dab(e);
+});
+editCanvas.addEventListener("pointermove", (e) => { moveCursor(e); if (drawing) dab(e); });
+editCanvas.addEventListener("pointerup", () => (drawing = false));
+editCanvas.addEventListener("pointerleave", () => ($("#cursor").hidden = true));
+$("#clear-edits").addEventListener("click", () => { ectx.clearRect(0, 0, editCanvas.width, editCanvas.height); setDirty(true); });
+
+function setDirty(on) {
+  dirty = on;
+  $("#dirty").hidden = !on;
+}
+function editsPayload() {
+  const data = ectx.getImageData(0, 0, editCanvas.width, editCanvas.height).data;
+  for (let i = 3; i < data.length; i += 4) if (data[i]) return editCanvas.toDataURL("image/png");
+  return "";
+}
+
+// ------------------------------------------------------------------ actions
+$("#replan").addEventListener("click", async () => {
+  if (!job) return;
+  const confirmations = [...document.querySelectorAll("#confirmations input:checked")].map((b) => b.value);
+  const btn = $("#replan");
+  btn.disabled = true;
+  btn.textContent = "Planning…";
+  try {
+    showJob(await api(`/api/jobs/${job.id}/plan`, {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ edits_png: editsPayload(), confirmations, operator: $("#operator").value.trim() }),
+    }));
+  } catch (err) {
+    alert(err.message);
+  } finally {
+    btn.textContent = "Re-plan";
+    btn.disabled = !!(job && job.approved);
+  }
+});
+
+$("#approve").addEventListener("click", async () => {
+  if (!job) return;
+  if (dirty) { alert("Re-plan first: your edits or confirmations are not in this work order yet."); return; }
+  const operator = $("#operator").value.trim();
+  if (!operator) { $("#operator").focus(); alert("Enter your name to approve."); return; }
+  if (!confirm(`Approve this work order as ${operator}? It will be frozen and recorded.`)) return;
+  try {
+    showJob(await api(`/api/jobs/${job.id}/approve`, {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ operator, note: $("#note").value }),
+    }));
+  } catch (err) {
+    alert(err.message);
+  }
+});
+
+boot();