Blame for index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>quantity-lab showcase</title>
<meta name="description" content="How small floor-plan geometry errors distort room areas and counts: oracle rooms, controlled errors and a classical OpenCV baseline.">
<style>
:root { --bg: #f7f7f5; --panel: #ffffff; --fg: #1d1d1b; --muted: #6b6b66; --line: #e2e2dc; --accent: #4338ca; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #141413; --panel: #1d1d1b; --fg: #ecece6; --muted: #a3a39b; --line: #33332f; --accent: #a5b4fc; }
}
:root[data-theme="dark"] { --bg: #141413; --panel: #1d1d1b; --fg: #ecece6; --muted: #a3a39b; --line: #33332f; --accent: #a5b4fc; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1200px; margin: 0 auto; padding: 24px 16px 48px; }
h1 { font-size: 26px; margin: 0 0 4px; }
h2 { font-size: 17px; margin: 0 0 10px; }
p { margin: 0 0 8px; }
a { color: var(--accent); }
.muted { color: var(--muted); }
pre { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 8px 0 0; font: 13px ui-monospace, Menlo, monospace; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; min-width: 0; }
.row { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-top: 16px; align-items: start; }
@media (max-width: 860px) { .row { grid-template-columns: 1fr; } }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pills button { border: 1px solid var(--line); background: var(--panel); color: var(--fg); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer; }
.pills button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.stat b { display: block; font-size: 22px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12px; color: var(--muted); }
#overlay { width: 100%; height: auto; display: block; background: #fff; border-radius: 6px; margin-top: 12px; }
.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { color: var(--muted); font-weight: 600; }
main > section.panel + section.panel { margin-top: 16px; }
footer { margin-top: 28px; font-size: 13px; color: var(--muted); }
</style>
</head>
<body>
<main>
  <h1>Right total, wrong rooms: what overlap scores miss in floor-plan takeoffs</h1>
  <p class="muted">quantity-lab measures room area, perimeter and count on floor plans three ways: the annotated rooms (oracle), the same rooms with a controlled error, and two real room finders: a classical OpenCV baseline that labels the free space between walls, and the pretrained CubiCasa5K segmentation model. Units are image pixels; no physical scale is claimed.</p>
  <pre>uv run python -m quantity_lab --input plan.pdf --annotations model.svg --mode perturbed --perturbation erode --pixels 2 --output out/plan</pre>
  <p class="muted" style="margin-top:8px">Code (MIT): <a href="https://github.com/dzakybd/quantity-lab">github.com/dzakybd/quantity-lab</a>. Write-up: <a href="https://dzaky.ai.id/en/blog/quantity-lab-takeoff-errors">dzaky.ai.id</a>. Results were computed ahead of time; this page runs no model.</p>

  <div class="row">
    <section class="panel">
      <h2>Synthetic plan</h2>
      <div class="pills" id="plans" role="group" aria-label="Plan"></div>
      <div class="pills" id="views" role="group" aria-label="Mode"></div>
      <img id="overlay" alt="">
      <p class="muted" style="font-size:12px;margin-top:8px">Coloured fill: measured rooms, one colour per room. Dark outline: the reference rooms.</p>
    </section>
    <section class="panel">
      <h2 id="scoreTitle">Score</h2>
      <div class="stats" id="stats"></div>
      <p class="muted" style="font-size:12px;margin-top:10px">Rooms match one-to-one at IoU ≥ 0.5. Room area error is the mean signed error over matched rooms; total area compares the sums.</p>
    </section>
  </div>

  <section class="panel" style="margin-top:16px">
    <h2>Controlled errors on ten held-out CubiCasa5K plans (ranges; numbers only)</h2>
    <p class="muted" style="font-size:13px">Ranges over the ten plans: mean signed room-area error, total-area error and room F1.</p>
    <div class="scroll"><table id="perturb"></table></div>
  </section>
  <section class="panel">
    <h2>Two room finders on the same plans</h2>
    <p class="muted" style="font-size:13px">OpenCV baseline tuned on three train plans; the trained model's pixel-to-room step tuned on ten validation plans. Both frozen before these plans were scored. High pixel overlap (IoU) does not mean the rooms are right.</p>
    <div class="scroll"><table id="pred"></table></div>
  </section>

  <footer>CubiCasa5K: Kalervo et al., SCIA 2019, <a href="https://zenodo.org/records/2613548">zenodo.org/records/2613548</a> (CC BY-NC-SA 4.0). No CubiCasa5K image is shown or included here; every picture is a synthetic plan made for this project.</footer>
</main>
<script>
const VIEWS = { "oracle": "Oracle", "perturbed_erode_2": "Pulled in 2 px", "perturbed_erode_5": "Pulled in 5 px", "perturbed_dilate_5": "Pushed out 5 px", "perturbed_merge_20": "Missing divider", "perturbed_split_3": "Spurious line", "predicted": "OpenCV baseline", "segmented": "Trained model" };
const ERRS = { "erode_2": "Pulled in 2 px", "erode_5": "Pulled in 5 px", "dilate_2": "Pushed out 2 px", "dilate_5": "Pushed out 5 px", "shift_5": "Shifted 5 px", "scale_2": "Scale +2%", "merge_20": "Missing divider", "split_3": "Spurious line" };
let data, cur = { p: 0, v: "oracle" };
const fmt = (v, d = 1) => v === null || v === undefined ? "—" : (v > 0 ? "+" : "") + Number(v).toFixed(d);
function pills(el, items, on, click) {
  el.innerHTML = "";
  items.forEach(([k, t]) => { const b = document.createElement("button"); b.textContent = t; b.setAttribute("aria-pressed", on(k)); b.onclick = () => click(k); el.appendChild(b); });
}
function render() {
  const p = data.plans[cur.p], s = p.scores[cur.v];
  pills(document.getElementById("plans"), data.plans.map((x, i) => [i, x.title]), i => i === cur.p, i => { cur.p = i; render(); });
  pills(document.getElementById("views"), Object.entries(VIEWS), k => k === cur.v, k => { cur.v = k; render(); });
  const img = document.getElementById("overlay");
  img.src = `data/${p.id}/${cur.v}.png`;
  img.alt = `${p.title}, ${VIEWS[cur.v]}: measured rooms filled in colour over the reference outlines`;
  document.getElementById("scoreTitle").textContent = `${p.title} · ${VIEWS[cur.v]}`;
  document.getElementById("stats").innerHTML = [
    [s.count_f1.toFixed(2), "room count F1"], [fmt(s.area_signed_err_pct_mean) + "%", "room area error (matched)"],
    [fmt(s.total_area_err_pct) + "%", "total area error"], [cur.v === "oracle" ? p.rooms : (s.pred_rooms ?? "—"), cur.v === "oracle" ? "reference rooms" : "rooms found"],
  ].map(([b, t]) => `<div class="stat"><b>${b}</b><span>${t}</span></div>`).join("");
}
function range(rows, key, digits = 1, signed = true) {
  const values = rows.map(r => parseFloat(r[key])).filter(Number.isFinite);
  const f = v => signed ? fmt(v, digits) : v.toFixed(digits);
  return values.length ? `${f(Math.min(...values))} to ${f(Math.max(...values))}` : "—";
}
function tables() {
  const by = {};
  data.perturbations.forEach(r => { (by[`${r.perturbation}_${r.pixels}`] ||= []).push(r); });
  document.getElementById("perturb").innerHTML = "<tr><th>Error</th><th>Room area</th><th>Total area</th><th>Count F1</th></tr>" +
    Object.entries(ERRS).filter(([k]) => by[k]).map(([k, t]) => `<tr><td>${t}</td><td>${range(by[k], "area_signed_err_pct_mean")}%</td><td>${range(by[k], "total_area_err_pct")}%</td><td>${range(by[k], "count_f1", 2, false)}</td></tr>`).join("");
  const names = { "high_quality_488": "Simple", "high_quality_architectural_9453": "Medium (open kitchen)", "high_quality_architectural_6276": "Dense (two floors)" };
  document.getElementById("pred").innerHTML = "<tr><th>Plan</th><th>Rooms</th><th>OpenCV F1</th><th>OpenCV IoU</th><th>Model found</th><th>Model matched</th><th>Model F1</th><th>Model IoU</th><th>Model total area</th></tr>" +
    Object.entries(data.held_out).map(([k, v]) => { const p = v.predicted, m = v.segmented; return `<tr><td>${names[k] || k}</td><td>${p.gt_rooms}</td><td>${p.count_f1.toFixed(2)}</td><td>${p.mask_iou.toFixed(2)}</td><td>${m.pred_rooms}</td><td>${m.matched}</td><td>${m.count_f1.toFixed(2)}</td><td>${m.mask_iou.toFixed(2)}</td><td>${fmt(m.total_area_err_pct)}%</td></tr>`; }).join("");
}
fetch("data/results.json").then(r => r.json()).then(j => { data = j; render(); tables(); });
</script>
</body>
</html>