| <!doctype html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="utf-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1">
|
| <title>PatchCore Defect Detection</title>
|
| <meta name="description" content="Find manufacturing defects without ever seeing one. PatchCore (CVPR 2022) reimplemented from scratch, running entirely in your browser.">
|
| <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=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
|
| <style>
|
| :root {
|
| --bg: #0d0e10; --bg-2: #141518; --panel: #17191d; --line: #262930; --line-2: #33373f;
|
| --ink: #ecebe6; --ink-2: #a9a8a2; --ink-3: #6f6e6a;
|
| --signal: #ff5b1f; --signal-soft: rgba(255, 91, 31, 0.12); --ok: #7fd18b; --ok-soft: rgba(127, 209, 139, 0.12);
|
| --serif: "Instrument Serif", Georgia, serif; --sans: "Geist", ui-sans-serif, sans-serif;
|
| --mono: "Geist Mono", ui-monospace, monospace; --radius: 4px; color-scheme: dark;
|
| }
|
| @media (prefers-color-scheme: light) {
|
| :root:not([data-theme="dark"]) {
|
| --bg: #f4f2ec; --bg-2: #ece9e1; --panel: #fbfaf6; --line: #dcd8cd; --line-2: #c9c4b6;
|
| --ink: #17181a; --ink-2: #4c4b47; --ink-3: #85837c; --signal: #e0480f;
|
| --signal-soft: rgba(224, 72, 15, 0.10); --ok: #2f8a3e; --ok-soft: rgba(47, 138, 62, 0.10); color-scheme: light;
|
| }
|
| }
|
| * { box-sizing: border-box; }
|
| body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
|
| a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
|
| a:hover { text-decoration-color: var(--signal); }
|
| .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
|
| .mono { font-family: var(--mono); }
|
| header { border-bottom: 1px solid var(--line); }
|
| header .wrap { display: flex; justify-content: space-between; align-items: center; height: 52px; font: 500 13px var(--mono); color: var(--ink-2); }
|
| header .tag { color: var(--signal); }
|
| .hero { padding: 56px 0 28px; }
|
| .kicker { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
|
| h1 { font: 400 clamp(40px, 6vw, 68px)/1.02 var(--serif); margin: 14px 0 16px; letter-spacing: -0.01em; }
|
| h1 em { color: var(--signal); }
|
| .lede { max-width: 680px; color: var(--ink-2); font-size: 17px; margin: 0; }
|
| .stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
|
| .stat b { display: block; font: 400 30px/1 var(--serif); }
|
| .stat span { font: 12px var(--mono); color: var(--ink-3); }
|
|
|
| .lab { display: grid; grid-template-columns: 330px 1fr; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin: 24px 0 40px; }
|
| .controls { border-right: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 22px; }
|
| .label { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
|
| .seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
|
| .seg button { all: unset; cursor: pointer; text-align: center; padding: 9px 4px; font: 500 13px var(--sans); color: var(--ink-2); border-right: 1px solid var(--line-2); }
|
| .seg button:last-child { border-right: 0; }
|
| .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
|
| .seg button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
|
| .drop { border: 1px dashed var(--line-2); border-radius: var(--radius); padding: 18px; text-align: center; cursor: pointer; color: var(--ink-2); font-size: 14px; transition: border-color .15s, background .15s; }
|
| .drop:hover, .drop.over { border-color: var(--signal); background: var(--signal-soft); }
|
| .drop b { color: var(--ink); font-weight: 500; }
|
| .examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
|
| .ex { all: unset; cursor: pointer; position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
|
| .ex img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
| .ex span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 5px; font: 10px var(--mono); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
| .ex:hover, .ex:focus-visible { border-color: var(--signal); outline: none; }
|
| .note { font-size: 13px; color: var(--ink-3); margin: 0; }
|
|
|
| .stage { padding: 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
|
| .views { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
| .view { position: relative; aspect-ratio: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
|
| .view canvas { width: 100%; height: 100%; display: block; }
|
| .view .cap { position: absolute; top: 8px; left: 8px; font: 500 11px var(--mono); padding: 2px 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2); }
|
| .view .empty[hidden] { display: none; }
|
| .view .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font: 13px var(--mono); text-align: center; padding: 20px; }
|
| .verdict { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-height: 44px; }
|
| .verdict .word { font: 400 38px/1 var(--serif); }
|
| .verdict.bad .word { color: var(--signal); }
|
| .verdict.good .word { color: var(--ok); }
|
| .verdict .detail { font: 13px var(--mono); color: var(--ink-2); }
|
| .gauge { position: relative; height: 34px; }
|
| .gauge .track { position: absolute; left: 0; right: 0; top: 12px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--ok-soft), var(--ok-soft) 50%, var(--signal-soft) 50%); border: 1px solid var(--line); }
|
| .gauge .thr { position: absolute; left: 50%; top: 4px; bottom: 0; width: 1px; background: var(--ink-3); }
|
| .gauge .thr::after { content: "threshold"; position: absolute; top: 24px; left: 4px; font: 10px var(--mono); color: var(--ink-3); }
|
| .gauge .needle { position: absolute; top: 6px; width: 3px; height: 20px; margin-left: -1px; background: var(--ink); border-radius: 2px; transition: left .5s cubic-bezier(.2,.8,.2,1); left: 0; opacity: 0; }
|
| .status { font: 12px var(--mono); color: var(--ink-3); display: flex; gap: 10px; align-items: center; min-height: 18px; }
|
| .bar { flex: 1; max-width: 220px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; display: none; }
|
| .bar i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .1s; }
|
| .scale { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--ink-3); }
|
| .scale i { flex: 0 0 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #00007f, #0000ff, #00ffff, #7fff7f, #ffff00, #ff0000, #7f0000); }
|
|
|
| .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding: 36px 0; }
|
| .how h3 { font: 400 24px/1.1 var(--serif); margin: 6px 0 8px; }
|
| .how p { margin: 0; color: var(--ink-2); font-size: 15px; }
|
| .how .n { font: 12px var(--mono); color: var(--signal); }
|
| footer { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 13px; color: var(--ink-3); }
|
| footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
|
|
|
| @media (max-width: 860px) {
|
| .lab { grid-template-columns: 1fr; }
|
| .controls { border-right: 0; border-bottom: 1px solid var(--line); }
|
| .how { grid-template-columns: 1fr; }
|
| }
|
| @media (max-width: 480px) {
|
| .wrap { padding: 0 16px; }
|
| .views { grid-template-columns: 1fr; }
|
| .examples { grid-template-columns: repeat(3, 1fr); }
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <header><div class="wrap"><span>yandyassine / <span class="tag">patchcore</span></span><span>runs in your browser · no server</span></div></header>
|
|
|
| <main class="wrap">
|
| <section class="hero">
|
| <div class="kicker">Unsupervised anomaly detection · MVTec AD</div>
|
| <h1>Find defects it has <em>never seen.</em></h1>
|
| <p class="lede">The model was fitted on photos of <b>good parts only</b>. It flags any patch of an image that looks unlike
|
| every patch it has seen before. A from-scratch reimplementation of PatchCore (CVPR 2022), exported to ONNX and running
|
| here on your own device. Your image never leaves the browser.</p>
|
| <div class="stats">
|
| <div class="stat"><b>1.000</b><span>image AUROC · bottle</span></div>
|
| <div class="stat"><b>0.999</b><span>image AUROC · metal nut</span></div>
|
| <div class="stat"><b>0.977</b><span>image AUROC · grid</span></div>
|
| <div class="stat"><b>0</b><span>defect images used to fit</span></div>
|
| </div>
|
| </section>
|
|
|
| <section class="lab" aria-label="Demo">
|
| <div class="controls">
|
| <div>
|
| <div class="label">1 · Product</div>
|
| <div class="seg" role="group" aria-label="Product category">
|
| <button data-cat="bottle" aria-pressed="true">Bottle</button>
|
| <button data-cat="metal_nut" aria-pressed="false">Metal nut</button>
|
| <button data-cat="grid" aria-pressed="false">Grid</button>
|
| </div>
|
| </div>
|
| <div>
|
| <div class="label">2 · Image</div>
|
| <label class="drop" id="drop"><input type="file" id="file" accept="image/*" hidden>
|
| <b>Drop a photo</b> or click to upload</label>
|
| </div>
|
| <div>
|
| <div class="label">Test images</div>
|
| <p class="note">No example images here: MVTec AD is CC BY-NC-SA 4.0, so its photos are not redistributed.
|
| Download test images from the <a href="https://www.mvtec.com/company/research/datasets/mvtec-ad" target="_blank" rel="noopener">MVTec AD page</a>
|
| (bottle, metal nut or grid) and upload one above.</p>
|
| </div>
|
| <p class="note">One model per product: each was fitted on that product's good parts. A photo of something else will
|
| (correctly) look anomalous everywhere.</p>
|
| </div>
|
|
|
| <div class="stage">
|
| <div class="views">
|
| <div class="view"><canvas id="cIn" width="224" height="224"></canvas><span class="cap">input · 224 px crop</span>
|
| <div class="empty" id="emptyIn">upload a photo ←</div></div>
|
| <div class="view"><canvas id="cOut" width="224" height="224"></canvas><span class="cap">anomaly heatmap</span>
|
| <div class="empty" id="emptyOut">red = unlike any good patch</div></div>
|
| </div>
|
| <div class="verdict" id="verdict"><span class="word" style="color:var(--ink-3)">Waiting</span>
|
| <span class="detail">for an image</span></div>
|
| <div class="gauge" aria-hidden="true"><div class="track"></div><div class="thr"></div><div class="needle" id="needle"></div></div>
|
| <div class="scale"><span>normal</span><i></i><span>anomalous</span></div>
|
| <div class="status"><span id="status">Models load on first use (~50 MB each, cached afterwards).</span><div class="bar" id="bar"><i></i></div></div>
|
| </div>
|
| </section>
|
|
|
| <section class="how">
|
| <div><div class="n">01</div><h3>Describe every patch</h3><p>A WideResNet-50 pretrained on ImageNet turns each image into 28 × 28 patch descriptors (mid-level layers 2 + 3, averaged over a 3 × 3 neighborhood).</p></div>
|
| <div><div class="n">02</div><h3>Remember the good ones</h3><p>Descriptors from defect-free training images go into a memory bank, shrunk to 10 % by greedy coreset sampling so it still covers every normal pattern.</p></div>
|
| <div><div class="n">03</div><h3>Score by distance</h3><p>Each test patch is scored by its distance to the nearest remembered patch. The image score is the worst patch; the threshold maximizes F1 on the MVTec test set.</p></div>
|
| </section>
|
| </main>
|
|
|
| <footer><div class="wrap">
|
| <span>Code & write-up: <a href="https://github.com/yandouziyassine/COMPUTER-VISION-PROJECT-LIBRARY/tree/main/13-anomaly-detection-patchcore">COMPUTER-VISION-PROJECT-LIBRARY / 13</a> · <a href="https://yandouziyassine.github.io">yandouziyassine.github.io</a></span>
|
| <span>Data: MVTec AD (CC BY-NC-SA 4.0, non-commercial) · Roth et al., CVPR 2022</span>
|
| </div></footer>
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.webgpu.min.js"></script>
|
| <script>
|
|
|
| const LOCAL = ["localhost", "127.0.0.1"].includes(location.hostname);
|
| const BASE = LOCAL ? "models/" : "https://huggingface.co/yandyassine/patchcore-mvtec-ad/resolve/main/";
|
| const EXAMPLES = [];
|
| const NAMES = { bottle: "Bottle", metal_nut: "Metal nut", grid: "Grid" };
|
| const MEAN = [0.485, 0.456, 0.406], STD = [0.229, 0.224, 0.225];
|
| const $ = (id) => document.getElementById(id);
|
|
|
| let category = "bottle", thresholds = null, backbone = null, provider = null, current = null, busy = false;
|
| const knn = {};
|
|
|
| ort.env.wasm.numThreads = self.crossOriginIsolated ? Math.min(4, navigator.hardwareConcurrency || 1) : 1;
|
|
|
| function status(text, progress) {
|
| $("status").textContent = text;
|
| $("bar").style.display = progress == null ? "none" : "block";
|
| if (progress != null) $("bar").firstElementChild.style.width = `${Math.round(progress * 100)}%`;
|
| }
|
|
|
| async function download(file, label) {
|
| const res = await fetch(BASE + file);
|
| if (!res.ok) throw new Error(`${file}: HTTP ${res.status}`);
|
| const total = +res.headers.get("content-length") || 0;
|
| const reader = res.body.getReader();
|
| const chunks = [];
|
| let got = 0;
|
| for (;;) {
|
| const { done, value } = await reader.read();
|
| if (done) break;
|
| chunks.push(value);
|
| got += value.length;
|
| status(`Downloading ${label}… ${(got / 1e6).toFixed(0)}${total ? ` / ${(total / 1e6).toFixed(0)}` : ""} MB`, total ? got / total : null);
|
| }
|
| const buf = new Uint8Array(got);
|
| let off = 0;
|
| for (const c of chunks) { buf.set(c, off); off += c.length; }
|
| return buf;
|
| }
|
|
|
| async function session(bytes) {
|
| for (const ep of navigator.gpu ? ["webgpu", "wasm"] : ["wasm"]) {
|
| try {
|
| const s = await ort.InferenceSession.create(bytes, { executionProviders: [ep] });
|
| provider = provider || ep;
|
| return s;
|
| } catch (e) { console.warn(`${ep} failed, trying next`, e); }
|
| }
|
| throw new Error("Could not start ONNX Runtime in this browser.");
|
| }
|
|
|
| async function ensureModels(cat) {
|
| if (!thresholds) thresholds = await (await fetch(BASE + "thresholds.json")).json();
|
| if (!backbone) backbone = await session(await download("backbone.onnx", "feature extractor"));
|
| if (!knn[cat]) knn[cat] = await session(await download(`knn_${cat}.onnx`, `${NAMES[cat]} memory bank`));
|
| }
|
|
|
|
|
| async function preprocess(source) {
|
| const w = source.naturalWidth || source.width, h = source.naturalHeight || source.height;
|
| const s = 256 / Math.min(w, h);
|
| const rw = Math.round(w * s), rh = Math.round(h * s);
|
| const bmp = await createImageBitmap(source, { resizeWidth: rw, resizeHeight: rh, resizeQuality: "high" });
|
| const ctx = $("cIn").getContext("2d", { willReadFrequently: true });
|
| ctx.drawImage(bmp, -Math.floor((rw - 224) / 2), -Math.floor((rh - 224) / 2));
|
| $("emptyIn").hidden = true;
|
| const px = ctx.getImageData(0, 0, 224, 224).data;
|
| const x = new Float32Array(3 * 224 * 224);
|
| for (let i = 0; i < 224 * 224; i++)
|
| for (let c = 0; c < 3; c++) x[c * 50176 + i] = (px[i * 4 + c] / 255 - MEAN[c]) / STD[c];
|
| return { tensor: new ort.Tensor("float32", x, [1, 3, 224, 224]), pixels: px };
|
| }
|
|
|
| function jet(v) {
|
| const r = Math.min(Math.max(1.5 - Math.abs(4 * v - 3), 0), 1);
|
| const g = Math.min(Math.max(1.5 - Math.abs(4 * v - 2), 0), 1);
|
| const b = Math.min(Math.max(1.5 - Math.abs(4 * v - 1), 0), 1);
|
| return [r * 255, g * 255, b * 255];
|
| }
|
|
|
| function render(pixels, map, score, thr) {
|
| const ctx = $("cOut").getContext("2d");
|
| const img = ctx.createImageData(224, 224);
|
| for (let i = 0; i < 224 * 224; i++) {
|
| const [r, g, b] = jet(Math.min(Math.max(map[i] / (2 * thr), 0), 1));
|
| img.data[i * 4] = 0.55 * pixels[i * 4] + 0.45 * r;
|
| img.data[i * 4 + 1] = 0.55 * pixels[i * 4 + 1] + 0.45 * g;
|
| img.data[i * 4 + 2] = 0.55 * pixels[i * 4 + 2] + 0.45 * b;
|
| img.data[i * 4 + 3] = 255;
|
| }
|
| ctx.putImageData(img, 0, 0);
|
| $("emptyOut").hidden = true;
|
| const bad = score > thr;
|
| const v = $("verdict");
|
| v.className = `verdict ${bad ? "bad" : "good"}`;
|
| v.innerHTML = `<span class="word">${bad ? "Defect" : "No defect"}</span>` +
|
| `<span class="detail">score ${score.toFixed(2)} · threshold ${thr.toFixed(2)} (${NAMES[category]})</span>`;
|
| const needle = $("needle");
|
| needle.style.opacity = 1;
|
| needle.style.left = `${Math.min(Math.max(score / (2 * thr), 0.01), 0.99) * 100}%`;
|
| }
|
|
|
| async function run(source) {
|
| if (busy) return;
|
| busy = true;
|
| current = source;
|
| try {
|
| const { tensor, pixels } = await preprocess(source);
|
| await ensureModels(category);
|
| status(`Running on ${provider}…`);
|
| const t0 = performance.now();
|
| const feats = (await backbone.run({ image: tensor })).features;
|
| const t1 = performance.now();
|
| const out = await knn[category].run({ features: feats });
|
| const t2 = performance.now();
|
| render(pixels, out.map.data, out.score.data[0], thresholds[category].threshold);
|
| status(`${provider} · features ${Math.round(t1 - t0)} ms · nearest-neighbor search ${Math.round(t2 - t1)} ms`);
|
| } catch (e) {
|
| console.error(e);
|
| status(`Error: ${e.message}`);
|
| } finally {
|
| busy = false;
|
| }
|
| }
|
|
|
| function setCategory(cat) {
|
| category = cat;
|
| document.querySelectorAll(".seg button").forEach((b) => b.setAttribute("aria-pressed", b.dataset.cat === cat));
|
| }
|
|
|
| document.querySelectorAll(".seg button").forEach((b) => b.addEventListener("click", () => {
|
| setCategory(b.dataset.cat);
|
| if (current) run(current);
|
| }));
|
|
|
| for (const name of EXAMPLES) {
|
| const cat = Object.keys(NAMES).find((c) => name.startsWith(c + "_"));
|
| const btn = document.createElement("button");
|
| btn.className = "ex";
|
| btn.title = name.replace(`${cat}_`, `${NAMES[cat]}: `).replace(/_/g, " ");
|
|
|
| btn.innerHTML = `<img src="examples/${name}.png" alt="${btn.title}" loading="lazy" crossorigin="anonymous"><span>${name.slice(cat.length + 1).replace(/_/g, " ")}</span>`;
|
| btn.addEventListener("click", () => { setCategory(cat); run(btn.querySelector("img")); });
|
| $("examples").appendChild(btn);
|
| }
|
|
|
| async function fromFile(file) {
|
| if (!file || !file.type.startsWith("image/")) return;
|
| run(await createImageBitmap(file));
|
| }
|
| $("file").addEventListener("change", (e) => fromFile(e.target.files[0]));
|
| const drop = $("drop");
|
| drop.addEventListener("dragover", (e) => { e.preventDefault(); drop.classList.add("over"); });
|
| drop.addEventListener("dragleave", () => drop.classList.remove("over"));
|
| drop.addEventListener("drop", (e) => { e.preventDefault(); drop.classList.remove("over"); fromFile(e.dataTransfer.files[0]); });
|
| </script>
|
| </body>
|
| </html>
|
|
|
