yandyassine commited on
Commit
64597de
·
verified ·
1 Parent(s): 6d72096

Remove MVTec AD example images (CC BY-NC-SA); upload-only demo

Browse files
examples/bottle_broken_large.png DELETED

Git LFS Details

  • SHA256: 11a691a06a33dd78c5fcab6a822caa48c0d72f27f660e19f5abd9b5aa392b0eb
  • Pointer size: 131 Bytes
  • Size of remote file: 526 kB
examples/bottle_good.png DELETED

Git LFS Details

  • SHA256: 9e7bfe658efe9b6db2607a96405b4ac6880936eaf93b89c85bcd311122ceb57b
  • Pointer size: 131 Bytes
  • Size of remote file: 533 kB
examples/grid_bent.png DELETED

Git LFS Details

  • SHA256: 20a158b8868f08156ea79cabd42b1ff174b2d69adbe08b2f46737a851847e8bc
  • Pointer size: 131 Bytes
  • Size of remote file: 506 kB
examples/grid_good.png DELETED

Git LFS Details

  • SHA256: 4b5d0ff80b6b5a8444d795c4823b46d32df1900e83e107205ed7b1b3538b62ce
  • Pointer size: 131 Bytes
  • Size of remote file: 470 kB
examples/metal_nut_bent.png DELETED

Git LFS Details

  • SHA256: 602cceb099d5aa10a416f31cd6370ef9d8c810118f4ada9dbc9c28e91a889e0b
  • Pointer size: 131 Bytes
  • Size of remote file: 499 kB
examples/metal_nut_good.png DELETED

Git LFS Details

  • SHA256: d7ca543f04733fb91ac02e18d0fbf06dcff554a1b1ad754173c42d10bb026bb6
  • Pointer size: 131 Bytes
  • Size of remote file: 508 kB
index.html CHANGED
@@ -1,330 +1,332 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>PatchCore Defect Detection</title>
7
- <meta name="description" content="Find manufacturing defects without ever seeing one. PatchCore (CVPR 2022) reimplemented from scratch, running entirely in your browser.">
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <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">
11
- <style>
12
- :root {
13
- --bg: #0d0e10; --bg-2: #141518; --panel: #17191d; --line: #262930; --line-2: #33373f;
14
- --ink: #ecebe6; --ink-2: #a9a8a2; --ink-3: #6f6e6a;
15
- --signal: #ff5b1f; --signal-soft: rgba(255, 91, 31, 0.12); --ok: #7fd18b; --ok-soft: rgba(127, 209, 139, 0.12);
16
- --serif: "Instrument Serif", Georgia, serif; --sans: "Geist", ui-sans-serif, sans-serif;
17
- --mono: "Geist Mono", ui-monospace, monospace; --radius: 4px; color-scheme: dark;
18
- }
19
- @media (prefers-color-scheme: light) {
20
- :root:not([data-theme="dark"]) {
21
- --bg: #f4f2ec; --bg-2: #ece9e1; --panel: #fbfaf6; --line: #dcd8cd; --line-2: #c9c4b6;
22
- --ink: #17181a; --ink-2: #4c4b47; --ink-3: #85837c; --signal: #e0480f;
23
- --signal-soft: rgba(224, 72, 15, 0.10); --ok: #2f8a3e; --ok-soft: rgba(47, 138, 62, 0.10); color-scheme: light;
24
- }
25
- }
26
- * { box-sizing: border-box; }
27
- body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
28
- a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
29
- a:hover { text-decoration-color: var(--signal); }
30
- .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
31
- .mono { font-family: var(--mono); }
32
- header { border-bottom: 1px solid var(--line); }
33
- header .wrap { display: flex; justify-content: space-between; align-items: center; height: 52px; font: 500 13px var(--mono); color: var(--ink-2); }
34
- header .tag { color: var(--signal); }
35
- .hero { padding: 56px 0 28px; }
36
- .kicker { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
37
- h1 { font: 400 clamp(40px, 6vw, 68px)/1.02 var(--serif); margin: 14px 0 16px; letter-spacing: -0.01em; }
38
- h1 em { color: var(--signal); }
39
- .lede { max-width: 680px; color: var(--ink-2); font-size: 17px; margin: 0; }
40
- .stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
41
- .stat b { display: block; font: 400 30px/1 var(--serif); }
42
- .stat span { font: 12px var(--mono); color: var(--ink-3); }
43
-
44
- .lab { display: grid; grid-template-columns: 330px 1fr; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin: 24px 0 40px; }
45
- .controls { border-right: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 22px; }
46
- .label { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
47
- .seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
48
- .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); }
49
- .seg button:last-child { border-right: 0; }
50
- .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
51
- .seg button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
52
- .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; }
53
- .drop:hover, .drop.over { border-color: var(--signal); background: var(--signal-soft); }
54
- .drop b { color: var(--ink); font-weight: 500; }
55
- .examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
56
- .ex { all: unset; cursor: pointer; position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
57
- .ex img { width: 100%; height: 100%; object-fit: cover; display: block; }
58
- .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; }
59
- .ex:hover, .ex:focus-visible { border-color: var(--signal); outline: none; }
60
- .note { font-size: 13px; color: var(--ink-3); margin: 0; }
61
-
62
- .stage { padding: 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
63
- .views { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
64
- .view { position: relative; aspect-ratio: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
65
- .view canvas { width: 100%; height: 100%; display: block; }
66
- .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); }
67
- .view .empty[hidden] { display: none; }
68
- .view .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font: 13px var(--mono); text-align: center; padding: 20px; }
69
- .verdict { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-height: 44px; }
70
- .verdict .word { font: 400 38px/1 var(--serif); }
71
- .verdict.bad .word { color: var(--signal); }
72
- .verdict.good .word { color: var(--ok); }
73
- .verdict .detail { font: 13px var(--mono); color: var(--ink-2); }
74
- .gauge { position: relative; height: 34px; }
75
- .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); }
76
- .gauge .thr { position: absolute; left: 50%; top: 4px; bottom: 0; width: 1px; background: var(--ink-3); }
77
- .gauge .thr::after { content: "threshold"; position: absolute; top: 24px; left: 4px; font: 10px var(--mono); color: var(--ink-3); }
78
- .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; }
79
- .status { font: 12px var(--mono); color: var(--ink-3); display: flex; gap: 10px; align-items: center; min-height: 18px; }
80
- .bar { flex: 1; max-width: 220px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; display: none; }
81
- .bar i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .1s; }
82
- .scale { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--ink-3); }
83
- .scale i { flex: 0 0 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #00007f, #0000ff, #00ffff, #7fff7f, #ffff00, #ff0000, #7f0000); }
84
-
85
- .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding: 36px 0; }
86
- .how h3 { font: 400 24px/1.1 var(--serif); margin: 6px 0 8px; }
87
- .how p { margin: 0; color: var(--ink-2); font-size: 15px; }
88
- .how .n { font: 12px var(--mono); color: var(--signal); }
89
- footer { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 13px; color: var(--ink-3); }
90
- footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
91
-
92
- @media (max-width: 860px) {
93
- .lab { grid-template-columns: 1fr; }
94
- .controls { border-right: 0; border-bottom: 1px solid var(--line); }
95
- .how { grid-template-columns: 1fr; }
96
- }
97
- @media (max-width: 480px) {
98
- .wrap { padding: 0 16px; }
99
- .views { grid-template-columns: 1fr; }
100
- .examples { grid-template-columns: repeat(3, 1fr); }
101
- }
102
- </style>
103
- </head>
104
- <body>
105
- <header><div class="wrap"><span>yandyassine / <span class="tag">patchcore</span></span><span>runs in your browser · no server</span></div></header>
106
-
107
- <main class="wrap">
108
- <section class="hero">
109
- <div class="kicker">Unsupervised anomaly detection · MVTec AD</div>
110
- <h1>Find defects it has <em>never seen.</em></h1>
111
- <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
112
- every patch it has seen before. A from-scratch reimplementation of PatchCore (CVPR 2022), exported to ONNX and running
113
- here on your own device. Your image never leaves the browser.</p>
114
- <div class="stats">
115
- <div class="stat"><b>1.000</b><span>image AUROC · bottle</span></div>
116
- <div class="stat"><b>0.999</b><span>image AUROC · metal nut</span></div>
117
- <div class="stat"><b>0.977</b><span>image AUROC · grid</span></div>
118
- <div class="stat"><b>0</b><span>defect images used to fit</span></div>
119
- </div>
120
- </section>
121
-
122
- <section class="lab" aria-label="Demo">
123
- <div class="controls">
124
- <div>
125
- <div class="label">1 · Product</div>
126
- <div class="seg" role="group" aria-label="Product category">
127
- <button data-cat="bottle" aria-pressed="true">Bottle</button>
128
- <button data-cat="metal_nut" aria-pressed="false">Metal nut</button>
129
- <button data-cat="grid" aria-pressed="false">Grid</button>
130
- </div>
131
- </div>
132
- <div>
133
- <div class="label">2 · Image</div>
134
- <label class="drop" id="drop"><input type="file" id="file" accept="image/*" hidden>
135
- <b>Drop a photo</b> or click to upload</label>
136
- </div>
137
- <div>
138
- <div class="label">or try an MVTec test image</div>
139
- <div class="examples" id="examples"></div>
140
- </div>
141
- <p class="note">One model per product: each was fitted on that product's good parts. A photo of something else will
142
- (correctly) look anomalous everywhere.</p>
143
- </div>
144
-
145
- <div class="stage">
146
- <div class="views">
147
- <div class="view"><canvas id="cIn" width="224" height="224"></canvas><span class="cap">input · 224 px crop</span>
148
- <div class="empty" id="emptyIn">pick an example →</div></div>
149
- <div class="view"><canvas id="cOut" width="224" height="224"></canvas><span class="cap">anomaly heatmap</span>
150
- <div class="empty" id="emptyOut">red = unlike any good patch</div></div>
151
- </div>
152
- <div class="verdict" id="verdict"><span class="word" style="color:var(--ink-3)">Waiting</span>
153
- <span class="detail">for an image</span></div>
154
- <div class="gauge" aria-hidden="true"><div class="track"></div><div class="thr"></div><div class="needle" id="needle"></div></div>
155
- <div class="scale"><span>normal</span><i></i><span>anomalous</span></div>
156
- <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>
157
- </div>
158
- </section>
159
-
160
- <section class="how">
161
- <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>
162
- <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>
163
- <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>
164
- </section>
165
- </main>
166
-
167
- <footer><div class="wrap">
168
- <span>Code &amp; 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>
169
- <span>Data: MVTec AD (CC BY-NC-SA 4.0, non-commercial) · Roth et al., CVPR 2022</span>
170
- </div></footer>
171
-
172
- <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.webgpu.min.js"></script>
173
- <script>
174
- // Weights live in a Hugging Face model repo; a local copy is used when testing on localhost.
175
- const LOCAL = ["localhost", "127.0.0.1"].includes(location.hostname);
176
- const BASE = LOCAL ? "models/" : "https://huggingface.co/yandyassine/patchcore-mvtec-ad/resolve/main/";
177
- const EXAMPLES = ["bottle_good", "bottle_broken_large", "metal_nut_good", "metal_nut_bent", "grid_good", "grid_bent"];
178
- const NAMES = { bottle: "Bottle", metal_nut: "Metal nut", grid: "Grid" };
179
- const MEAN = [0.485, 0.456, 0.406], STD = [0.229, 0.224, 0.225];
180
- const $ = (id) => document.getElementById(id);
181
-
182
- let category = "bottle", thresholds = null, backbone = null, provider = null, current = null, busy = false;
183
- const knn = {};
184
-
185
- ort.env.wasm.numThreads = self.crossOriginIsolated ? Math.min(4, navigator.hardwareConcurrency || 1) : 1;
186
-
187
- function status(text, progress) {
188
- $("status").textContent = text;
189
- $("bar").style.display = progress == null ? "none" : "block";
190
- if (progress != null) $("bar").firstElementChild.style.width = `${Math.round(progress * 100)}%`;
191
- }
192
-
193
- async function download(file, label) {
194
- const res = await fetch(BASE + file);
195
- if (!res.ok) throw new Error(`${file}: HTTP ${res.status}`);
196
- const total = +res.headers.get("content-length") || 0;
197
- const reader = res.body.getReader();
198
- const chunks = [];
199
- let got = 0;
200
- for (;;) {
201
- const { done, value } = await reader.read();
202
- if (done) break;
203
- chunks.push(value);
204
- got += value.length;
205
- status(`Downloading ${label}… ${(got / 1e6).toFixed(0)}${total ? ` / ${(total / 1e6).toFixed(0)}` : ""} MB`, total ? got / total : null);
206
- }
207
- const buf = new Uint8Array(got);
208
- let off = 0;
209
- for (const c of chunks) { buf.set(c, off); off += c.length; }
210
- return buf;
211
- }
212
-
213
- async function session(bytes) {
214
- for (const ep of navigator.gpu ? ["webgpu", "wasm"] : ["wasm"]) {
215
- try {
216
- const s = await ort.InferenceSession.create(bytes, { executionProviders: [ep] });
217
- provider = provider || ep;
218
- return s;
219
- } catch (e) { console.warn(`${ep} failed, trying next`, e); }
220
- }
221
- throw new Error("Could not start ONNX Runtime in this browser.");
222
- }
223
-
224
- async function ensureModels(cat) {
225
- if (!thresholds) thresholds = await (await fetch(BASE + "thresholds.json")).json();
226
- if (!backbone) backbone = await session(await download("backbone.onnx", "feature extractor"));
227
- if (!knn[cat]) knn[cat] = await session(await download(`knn_${cat}.onnx`, `${NAMES[cat]} memory bank`));
228
- }
229
-
230
- // Same preprocessing as torchvision: resize shorter side to 256, center-crop 224, ImageNet normalization.
231
- async function preprocess(source) {
232
- const w = source.naturalWidth || source.width, h = source.naturalHeight || source.height;
233
- const s = 256 / Math.min(w, h);
234
- const rw = Math.round(w * s), rh = Math.round(h * s);
235
- const bmp = await createImageBitmap(source, { resizeWidth: rw, resizeHeight: rh, resizeQuality: "high" });
236
- const ctx = $("cIn").getContext("2d", { willReadFrequently: true });
237
- ctx.drawImage(bmp, -Math.floor((rw - 224) / 2), -Math.floor((rh - 224) / 2));
238
- $("emptyIn").hidden = true;
239
- const px = ctx.getImageData(0, 0, 224, 224).data;
240
- const x = new Float32Array(3 * 224 * 224);
241
- for (let i = 0; i < 224 * 224; i++)
242
- for (let c = 0; c < 3; c++) x[c * 50176 + i] = (px[i * 4 + c] / 255 - MEAN[c]) / STD[c];
243
- return { tensor: new ort.Tensor("float32", x, [1, 3, 224, 224]), pixels: px };
244
- }
245
-
246
- function jet(v) { // matplotlib "jet"
247
- const r = Math.min(Math.max(1.5 - Math.abs(4 * v - 3), 0), 1);
248
- const g = Math.min(Math.max(1.5 - Math.abs(4 * v - 2), 0), 1);
249
- const b = Math.min(Math.max(1.5 - Math.abs(4 * v - 1), 0), 1);
250
- return [r * 255, g * 255, b * 255];
251
- }
252
-
253
- function render(pixels, map, score, thr) {
254
- const ctx = $("cOut").getContext("2d");
255
- const img = ctx.createImageData(224, 224);
256
- for (let i = 0; i < 224 * 224; i++) {
257
- const [r, g, b] = jet(Math.min(Math.max(map[i] / (2 * thr), 0), 1)); // threshold sits mid-scale
258
- img.data[i * 4] = 0.55 * pixels[i * 4] + 0.45 * r;
259
- img.data[i * 4 + 1] = 0.55 * pixels[i * 4 + 1] + 0.45 * g;
260
- img.data[i * 4 + 2] = 0.55 * pixels[i * 4 + 2] + 0.45 * b;
261
- img.data[i * 4 + 3] = 255;
262
- }
263
- ctx.putImageData(img, 0, 0);
264
- $("emptyOut").hidden = true;
265
- const bad = score > thr;
266
- const v = $("verdict");
267
- v.className = `verdict ${bad ? "bad" : "good"}`;
268
- v.innerHTML = `<span class="word">${bad ? "Defect" : "No defect"}</span>` +
269
- `<span class="detail">score ${score.toFixed(2)} · threshold ${thr.toFixed(2)} (${NAMES[category]})</span>`;
270
- const needle = $("needle");
271
- needle.style.opacity = 1;
272
- needle.style.left = `${Math.min(Math.max(score / (2 * thr), 0.01), 0.99) * 100}%`;
273
- }
274
-
275
- async function run(source) {
276
- if (busy) return;
277
- busy = true;
278
- current = source;
279
- try {
280
- const { tensor, pixels } = await preprocess(source);
281
- await ensureModels(category);
282
- status(`Running on ${provider}…`);
283
- const t0 = performance.now();
284
- const feats = (await backbone.run({ image: tensor })).features;
285
- const t1 = performance.now();
286
- const out = await knn[category].run({ features: feats });
287
- const t2 = performance.now();
288
- render(pixels, out.map.data, out.score.data[0], thresholds[category].threshold);
289
- status(`${provider} · features ${Math.round(t1 - t0)} ms · nearest-neighbor search ${Math.round(t2 - t1)} ms`);
290
- } catch (e) {
291
- console.error(e);
292
- status(`Error: ${e.message}`);
293
- } finally {
294
- busy = false;
295
- }
296
- }
297
-
298
- function setCategory(cat) {
299
- category = cat;
300
- document.querySelectorAll(".seg button").forEach((b) => b.setAttribute("aria-pressed", b.dataset.cat === cat));
301
- }
302
-
303
- document.querySelectorAll(".seg button").forEach((b) => b.addEventListener("click", () => {
304
- setCategory(b.dataset.cat);
305
- if (current) run(current);
306
- }));
307
-
308
- for (const name of EXAMPLES) {
309
- const cat = Object.keys(NAMES).find((c) => name.startsWith(c + "_"));
310
- const btn = document.createElement("button");
311
- btn.className = "ex";
312
- btn.title = name.replace(`${cat}_`, `${NAMES[cat]}: `).replace(/_/g, " ");
313
- // crossorigin: on the Hub, image files redirect to a CDN; without it the canvas refuses to read their pixels.
314
- btn.innerHTML = `<img src="examples/${name}.png" alt="${btn.title}" loading="lazy" crossorigin="anonymous"><span>${name.slice(cat.length + 1).replace(/_/g, " ")}</span>`;
315
- btn.addEventListener("click", () => { setCategory(cat); run(btn.querySelector("img")); });
316
- $("examples").appendChild(btn);
317
- }
318
-
319
- async function fromFile(file) {
320
- if (!file || !file.type.startsWith("image/")) return;
321
- run(await createImageBitmap(file));
322
- }
323
- $("file").addEventListener("change", (e) => fromFile(e.target.files[0]));
324
- const drop = $("drop");
325
- drop.addEventListener("dragover", (e) => { e.preventDefault(); drop.classList.add("over"); });
326
- drop.addEventListener("dragleave", () => drop.classList.remove("over"));
327
- drop.addEventListener("drop", (e) => { e.preventDefault(); drop.classList.remove("over"); fromFile(e.dataTransfer.files[0]); });
328
- </script>
329
- </body>
330
- </html>
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>PatchCore Defect Detection</title>
7
+ <meta name="description" content="Find manufacturing defects without ever seeing one. PatchCore (CVPR 2022) reimplemented from scratch, running entirely in your browser.">
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <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">
11
+ <style>
12
+ :root {
13
+ --bg: #0d0e10; --bg-2: #141518; --panel: #17191d; --line: #262930; --line-2: #33373f;
14
+ --ink: #ecebe6; --ink-2: #a9a8a2; --ink-3: #6f6e6a;
15
+ --signal: #ff5b1f; --signal-soft: rgba(255, 91, 31, 0.12); --ok: #7fd18b; --ok-soft: rgba(127, 209, 139, 0.12);
16
+ --serif: "Instrument Serif", Georgia, serif; --sans: "Geist", ui-sans-serif, sans-serif;
17
+ --mono: "Geist Mono", ui-monospace, monospace; --radius: 4px; color-scheme: dark;
18
+ }
19
+ @media (prefers-color-scheme: light) {
20
+ :root:not([data-theme="dark"]) {
21
+ --bg: #f4f2ec; --bg-2: #ece9e1; --panel: #fbfaf6; --line: #dcd8cd; --line-2: #c9c4b6;
22
+ --ink: #17181a; --ink-2: #4c4b47; --ink-3: #85837c; --signal: #e0480f;
23
+ --signal-soft: rgba(224, 72, 15, 0.10); --ok: #2f8a3e; --ok-soft: rgba(47, 138, 62, 0.10); color-scheme: light;
24
+ }
25
+ }
26
+ * { box-sizing: border-box; }
27
+ body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
28
+ a { color: inherit; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
29
+ a:hover { text-decoration-color: var(--signal); }
30
+ .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
31
+ .mono { font-family: var(--mono); }
32
+ header { border-bottom: 1px solid var(--line); }
33
+ header .wrap { display: flex; justify-content: space-between; align-items: center; height: 52px; font: 500 13px var(--mono); color: var(--ink-2); }
34
+ header .tag { color: var(--signal); }
35
+ .hero { padding: 56px 0 28px; }
36
+ .kicker { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
37
+ h1 { font: 400 clamp(40px, 6vw, 68px)/1.02 var(--serif); margin: 14px 0 16px; letter-spacing: -0.01em; }
38
+ h1 em { color: var(--signal); }
39
+ .lede { max-width: 680px; color: var(--ink-2); font-size: 17px; margin: 0; }
40
+ .stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
41
+ .stat b { display: block; font: 400 30px/1 var(--serif); }
42
+ .stat span { font: 12px var(--mono); color: var(--ink-3); }
43
+
44
+ .lab { display: grid; grid-template-columns: 330px 1fr; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); margin: 24px 0 40px; }
45
+ .controls { border-right: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 22px; }
46
+ .label { font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
47
+ .seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
48
+ .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); }
49
+ .seg button:last-child { border-right: 0; }
50
+ .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
51
+ .seg button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
52
+ .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; }
53
+ .drop:hover, .drop.over { border-color: var(--signal); background: var(--signal-soft); }
54
+ .drop b { color: var(--ink); font-weight: 500; }
55
+ .examples { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
56
+ .ex { all: unset; cursor: pointer; position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
57
+ .ex img { width: 100%; height: 100%; object-fit: cover; display: block; }
58
+ .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; }
59
+ .ex:hover, .ex:focus-visible { border-color: var(--signal); outline: none; }
60
+ .note { font-size: 13px; color: var(--ink-3); margin: 0; }
61
+
62
+ .stage { padding: 20px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
63
+ .views { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
64
+ .view { position: relative; aspect-ratio: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
65
+ .view canvas { width: 100%; height: 100%; display: block; }
66
+ .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); }
67
+ .view .empty[hidden] { display: none; }
68
+ .view .empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink-3); font: 13px var(--mono); text-align: center; padding: 20px; }
69
+ .verdict { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-height: 44px; }
70
+ .verdict .word { font: 400 38px/1 var(--serif); }
71
+ .verdict.bad .word { color: var(--signal); }
72
+ .verdict.good .word { color: var(--ok); }
73
+ .verdict .detail { font: 13px var(--mono); color: var(--ink-2); }
74
+ .gauge { position: relative; height: 34px; }
75
+ .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); }
76
+ .gauge .thr { position: absolute; left: 50%; top: 4px; bottom: 0; width: 1px; background: var(--ink-3); }
77
+ .gauge .thr::after { content: "threshold"; position: absolute; top: 24px; left: 4px; font: 10px var(--mono); color: var(--ink-3); }
78
+ .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; }
79
+ .status { font: 12px var(--mono); color: var(--ink-3); display: flex; gap: 10px; align-items: center; min-height: 18px; }
80
+ .bar { flex: 1; max-width: 220px; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; display: none; }
81
+ .bar i { display: block; height: 100%; width: 0; background: var(--signal); transition: width .1s; }
82
+ .scale { display: flex; align-items: center; gap: 8px; font: 11px var(--mono); color: var(--ink-3); }
83
+ .scale i { flex: 0 0 120px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #00007f, #0000ff, #00ffff, #7fff7f, #ffff00, #ff0000, #7f0000); }
84
+
85
+ .how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding: 36px 0; }
86
+ .how h3 { font: 400 24px/1.1 var(--serif); margin: 6px 0 8px; }
87
+ .how p { margin: 0; color: var(--ink-2); font-size: 15px; }
88
+ .how .n { font: 12px var(--mono); color: var(--signal); }
89
+ footer { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 13px; color: var(--ink-3); }
90
+ footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
91
+
92
+ @media (max-width: 860px) {
93
+ .lab { grid-template-columns: 1fr; }
94
+ .controls { border-right: 0; border-bottom: 1px solid var(--line); }
95
+ .how { grid-template-columns: 1fr; }
96
+ }
97
+ @media (max-width: 480px) {
98
+ .wrap { padding: 0 16px; }
99
+ .views { grid-template-columns: 1fr; }
100
+ .examples { grid-template-columns: repeat(3, 1fr); }
101
+ }
102
+ </style>
103
+ </head>
104
+ <body>
105
+ <header><div class="wrap"><span>yandyassine / <span class="tag">patchcore</span></span><span>runs in your browser · no server</span></div></header>
106
+
107
+ <main class="wrap">
108
+ <section class="hero">
109
+ <div class="kicker">Unsupervised anomaly detection · MVTec AD</div>
110
+ <h1>Find defects it has <em>never seen.</em></h1>
111
+ <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
112
+ every patch it has seen before. A from-scratch reimplementation of PatchCore (CVPR 2022), exported to ONNX and running
113
+ here on your own device. Your image never leaves the browser.</p>
114
+ <div class="stats">
115
+ <div class="stat"><b>1.000</b><span>image AUROC · bottle</span></div>
116
+ <div class="stat"><b>0.999</b><span>image AUROC · metal nut</span></div>
117
+ <div class="stat"><b>0.977</b><span>image AUROC · grid</span></div>
118
+ <div class="stat"><b>0</b><span>defect images used to fit</span></div>
119
+ </div>
120
+ </section>
121
+
122
+ <section class="lab" aria-label="Demo">
123
+ <div class="controls">
124
+ <div>
125
+ <div class="label">1 · Product</div>
126
+ <div class="seg" role="group" aria-label="Product category">
127
+ <button data-cat="bottle" aria-pressed="true">Bottle</button>
128
+ <button data-cat="metal_nut" aria-pressed="false">Metal nut</button>
129
+ <button data-cat="grid" aria-pressed="false">Grid</button>
130
+ </div>
131
+ </div>
132
+ <div>
133
+ <div class="label">2 · Image</div>
134
+ <label class="drop" id="drop"><input type="file" id="file" accept="image/*" hidden>
135
+ <b>Drop a photo</b> or click to upload</label>
136
+ </div>
137
+ <div>
138
+ <div class="label">Test images</div>
139
+ <p class="note">No example images here: MVTec AD is CC BY-NC-SA 4.0, so its photos are not redistributed.
140
+ Download test images from the <a href="https://www.mvtec.com/company/research/datasets/mvtec-ad" target="_blank" rel="noopener">MVTec AD page</a>
141
+ (bottle, metal nut or grid) and upload one above.</p>
142
+ </div>
143
+ <p class="note">One model per product: each was fitted on that product's good parts. A photo of something else will
144
+ (correctly) look anomalous everywhere.</p>
145
+ </div>
146
+
147
+ <div class="stage">
148
+ <div class="views">
149
+ <div class="view"><canvas id="cIn" width="224" height="224"></canvas><span class="cap">input · 224 px crop</span>
150
+ <div class="empty" id="emptyIn">upload a photo ←</div></div>
151
+ <div class="view"><canvas id="cOut" width="224" height="224"></canvas><span class="cap">anomaly heatmap</span>
152
+ <div class="empty" id="emptyOut">red = unlike any good patch</div></div>
153
+ </div>
154
+ <div class="verdict" id="verdict"><span class="word" style="color:var(--ink-3)">Waiting</span>
155
+ <span class="detail">for an image</span></div>
156
+ <div class="gauge" aria-hidden="true"><div class="track"></div><div class="thr"></div><div class="needle" id="needle"></div></div>
157
+ <div class="scale"><span>normal</span><i></i><span>anomalous</span></div>
158
+ <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>
159
+ </div>
160
+ </section>
161
+
162
+ <section class="how">
163
+ <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>
164
+ <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>
165
+ <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>
166
+ </section>
167
+ </main>
168
+
169
+ <footer><div class="wrap">
170
+ <span>Code &amp; 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>
171
+ <span>Data: MVTec AD (CC BY-NC-SA 4.0, non-commercial) · Roth et al., CVPR 2022</span>
172
+ </div></footer>
173
+
174
+ <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.webgpu.min.js"></script>
175
+ <script>
176
+ // Weights live in a Hugging Face model repo; a local copy is used when testing on localhost.
177
+ const LOCAL = ["localhost", "127.0.0.1"].includes(location.hostname);
178
+ const BASE = LOCAL ? "models/" : "https://huggingface.co/yandyassine/patchcore-mvtec-ad/resolve/main/";
179
+ const EXAMPLES = []; // MVTec AD images are CC BY-NC-SA: not redistributed
180
+ const NAMES = { bottle: "Bottle", metal_nut: "Metal nut", grid: "Grid" };
181
+ const MEAN = [0.485, 0.456, 0.406], STD = [0.229, 0.224, 0.225];
182
+ const $ = (id) => document.getElementById(id);
183
+
184
+ let category = "bottle", thresholds = null, backbone = null, provider = null, current = null, busy = false;
185
+ const knn = {};
186
+
187
+ ort.env.wasm.numThreads = self.crossOriginIsolated ? Math.min(4, navigator.hardwareConcurrency || 1) : 1;
188
+
189
+ function status(text, progress) {
190
+ $("status").textContent = text;
191
+ $("bar").style.display = progress == null ? "none" : "block";
192
+ if (progress != null) $("bar").firstElementChild.style.width = `${Math.round(progress * 100)}%`;
193
+ }
194
+
195
+ async function download(file, label) {
196
+ const res = await fetch(BASE + file);
197
+ if (!res.ok) throw new Error(`${file}: HTTP ${res.status}`);
198
+ const total = +res.headers.get("content-length") || 0;
199
+ const reader = res.body.getReader();
200
+ const chunks = [];
201
+ let got = 0;
202
+ for (;;) {
203
+ const { done, value } = await reader.read();
204
+ if (done) break;
205
+ chunks.push(value);
206
+ got += value.length;
207
+ status(`Downloading ${label}… ${(got / 1e6).toFixed(0)}${total ? ` / ${(total / 1e6).toFixed(0)}` : ""} MB`, total ? got / total : null);
208
+ }
209
+ const buf = new Uint8Array(got);
210
+ let off = 0;
211
+ for (const c of chunks) { buf.set(c, off); off += c.length; }
212
+ return buf;
213
+ }
214
+
215
+ async function session(bytes) {
216
+ for (const ep of navigator.gpu ? ["webgpu", "wasm"] : ["wasm"]) {
217
+ try {
218
+ const s = await ort.InferenceSession.create(bytes, { executionProviders: [ep] });
219
+ provider = provider || ep;
220
+ return s;
221
+ } catch (e) { console.warn(`${ep} failed, trying next`, e); }
222
+ }
223
+ throw new Error("Could not start ONNX Runtime in this browser.");
224
+ }
225
+
226
+ async function ensureModels(cat) {
227
+ if (!thresholds) thresholds = await (await fetch(BASE + "thresholds.json")).json();
228
+ if (!backbone) backbone = await session(await download("backbone.onnx", "feature extractor"));
229
+ if (!knn[cat]) knn[cat] = await session(await download(`knn_${cat}.onnx`, `${NAMES[cat]} memory bank`));
230
+ }
231
+
232
+ // Same preprocessing as torchvision: resize shorter side to 256, center-crop 224, ImageNet normalization.
233
+ async function preprocess(source) {
234
+ const w = source.naturalWidth || source.width, h = source.naturalHeight || source.height;
235
+ const s = 256 / Math.min(w, h);
236
+ const rw = Math.round(w * s), rh = Math.round(h * s);
237
+ const bmp = await createImageBitmap(source, { resizeWidth: rw, resizeHeight: rh, resizeQuality: "high" });
238
+ const ctx = $("cIn").getContext("2d", { willReadFrequently: true });
239
+ ctx.drawImage(bmp, -Math.floor((rw - 224) / 2), -Math.floor((rh - 224) / 2));
240
+ $("emptyIn").hidden = true;
241
+ const px = ctx.getImageData(0, 0, 224, 224).data;
242
+ const x = new Float32Array(3 * 224 * 224);
243
+ for (let i = 0; i < 224 * 224; i++)
244
+ for (let c = 0; c < 3; c++) x[c * 50176 + i] = (px[i * 4 + c] / 255 - MEAN[c]) / STD[c];
245
+ return { tensor: new ort.Tensor("float32", x, [1, 3, 224, 224]), pixels: px };
246
+ }
247
+
248
+ function jet(v) { // matplotlib "jet"
249
+ const r = Math.min(Math.max(1.5 - Math.abs(4 * v - 3), 0), 1);
250
+ const g = Math.min(Math.max(1.5 - Math.abs(4 * v - 2), 0), 1);
251
+ const b = Math.min(Math.max(1.5 - Math.abs(4 * v - 1), 0), 1);
252
+ return [r * 255, g * 255, b * 255];
253
+ }
254
+
255
+ function render(pixels, map, score, thr) {
256
+ const ctx = $("cOut").getContext("2d");
257
+ const img = ctx.createImageData(224, 224);
258
+ for (let i = 0; i < 224 * 224; i++) {
259
+ const [r, g, b] = jet(Math.min(Math.max(map[i] / (2 * thr), 0), 1)); // threshold sits mid-scale
260
+ img.data[i * 4] = 0.55 * pixels[i * 4] + 0.45 * r;
261
+ img.data[i * 4 + 1] = 0.55 * pixels[i * 4 + 1] + 0.45 * g;
262
+ img.data[i * 4 + 2] = 0.55 * pixels[i * 4 + 2] + 0.45 * b;
263
+ img.data[i * 4 + 3] = 255;
264
+ }
265
+ ctx.putImageData(img, 0, 0);
266
+ $("emptyOut").hidden = true;
267
+ const bad = score > thr;
268
+ const v = $("verdict");
269
+ v.className = `verdict ${bad ? "bad" : "good"}`;
270
+ v.innerHTML = `<span class="word">${bad ? "Defect" : "No defect"}</span>` +
271
+ `<span class="detail">score ${score.toFixed(2)} · threshold ${thr.toFixed(2)} (${NAMES[category]})</span>`;
272
+ const needle = $("needle");
273
+ needle.style.opacity = 1;
274
+ needle.style.left = `${Math.min(Math.max(score / (2 * thr), 0.01), 0.99) * 100}%`;
275
+ }
276
+
277
+ async function run(source) {
278
+ if (busy) return;
279
+ busy = true;
280
+ current = source;
281
+ try {
282
+ const { tensor, pixels } = await preprocess(source);
283
+ await ensureModels(category);
284
+ status(`Running on ${provider}…`);
285
+ const t0 = performance.now();
286
+ const feats = (await backbone.run({ image: tensor })).features;
287
+ const t1 = performance.now();
288
+ const out = await knn[category].run({ features: feats });
289
+ const t2 = performance.now();
290
+ render(pixels, out.map.data, out.score.data[0], thresholds[category].threshold);
291
+ status(`${provider} · features ${Math.round(t1 - t0)} ms · nearest-neighbor search ${Math.round(t2 - t1)} ms`);
292
+ } catch (e) {
293
+ console.error(e);
294
+ status(`Error: ${e.message}`);
295
+ } finally {
296
+ busy = false;
297
+ }
298
+ }
299
+
300
+ function setCategory(cat) {
301
+ category = cat;
302
+ document.querySelectorAll(".seg button").forEach((b) => b.setAttribute("aria-pressed", b.dataset.cat === cat));
303
+ }
304
+
305
+ document.querySelectorAll(".seg button").forEach((b) => b.addEventListener("click", () => {
306
+ setCategory(b.dataset.cat);
307
+ if (current) run(current);
308
+ }));
309
+
310
+ for (const name of EXAMPLES) {
311
+ const cat = Object.keys(NAMES).find((c) => name.startsWith(c + "_"));
312
+ const btn = document.createElement("button");
313
+ btn.className = "ex";
314
+ btn.title = name.replace(`${cat}_`, `${NAMES[cat]}: `).replace(/_/g, " ");
315
+ // crossorigin: on the Hub, image files redirect to a CDN; without it the canvas refuses to read their pixels.
316
+ btn.innerHTML = `<img src="examples/${name}.png" alt="${btn.title}" loading="lazy" crossorigin="anonymous"><span>${name.slice(cat.length + 1).replace(/_/g, " ")}</span>`;
317
+ btn.addEventListener("click", () => { setCategory(cat); run(btn.querySelector("img")); });
318
+ $("examples").appendChild(btn);
319
+ }
320
+
321
+ async function fromFile(file) {
322
+ if (!file || !file.type.startsWith("image/")) return;
323
+ run(await createImageBitmap(file));
324
+ }
325
+ $("file").addEventListener("change", (e) => fromFile(e.target.files[0]));
326
+ const drop = $("drop");
327
+ drop.addEventListener("dragover", (e) => { e.preventDefault(); drop.classList.add("over"); });
328
+ drop.addEventListener("dragleave", () => drop.classList.remove("over"));
329
+ drop.addEventListener("drop", (e) => { e.preventDefault(); drop.classList.remove("over"); fromFile(e.dataTransfer.files[0]); });
330
+ </script>
331
+ </body>
332
+ </html>