Remove MVTec AD example images (CC BY-NC-SA); upload-only demo
Browse files- examples/bottle_broken_large.png +0 -3
- examples/bottle_good.png +0 -3
- examples/grid_bent.png +0 -3
- examples/grid_good.png +0 -3
- examples/metal_nut_bent.png +0 -3
- examples/metal_nut_good.png +0 -3
- index.html +332 -330
examples/bottle_broken_large.png
DELETED
Git LFS Details
|
examples/bottle_good.png
DELETED
Git LFS Details
|
examples/grid_bent.png
DELETED
Git LFS Details
|
examples/grid_good.png
DELETED
Git LFS Details
|
examples/metal_nut_bent.png
DELETED
Git LFS Details
|
examples/metal_nut_good.png
DELETED
Git LFS Details
|
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">
|
| 139 |
-
<
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
<div
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
<div class="view"><canvas id="
|
| 150 |
-
<div class="empty" id="
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
<div class="
|
| 155 |
-
|
| 156 |
-
<div class="
|
| 157 |
-
|
| 158 |
-
|
| 159 |
-
|
| 160 |
-
<section
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
<div><div class="n">
|
| 164 |
-
|
| 165 |
-
</
|
| 166 |
-
|
| 167 |
-
<
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
</
|
| 171 |
-
|
| 172 |
-
<
|
| 173 |
-
|
| 174 |
-
//
|
| 175 |
-
|
| 176 |
-
|
| 177 |
-
const
|
| 178 |
-
const
|
| 179 |
-
const
|
| 180 |
-
const
|
| 181 |
-
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
|
| 187 |
-
|
| 188 |
-
|
| 189 |
-
|
| 190 |
-
|
| 191 |
-
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
| 195 |
-
|
| 196 |
-
const
|
| 197 |
-
|
| 198 |
-
const
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
| 203 |
-
|
| 204 |
-
|
| 205 |
-
|
| 206 |
-
|
| 207 |
-
|
| 208 |
-
|
| 209 |
-
|
| 210 |
-
|
| 211 |
-
}
|
| 212 |
-
|
| 213 |
-
|
| 214 |
-
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
| 219 |
-
|
| 220 |
-
|
| 221 |
-
|
| 222 |
-
}
|
| 223 |
-
|
| 224 |
-
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
if (!
|
| 228 |
-
|
| 229 |
-
|
| 230 |
-
|
| 231 |
-
|
| 232 |
-
|
| 233 |
-
|
| 234 |
-
const
|
| 235 |
-
const
|
| 236 |
-
const
|
| 237 |
-
|
| 238 |
-
$("
|
| 239 |
-
|
| 240 |
-
|
| 241 |
-
|
| 242 |
-
|
| 243 |
-
|
| 244 |
-
|
| 245 |
-
|
| 246 |
-
|
| 247 |
-
|
| 248 |
-
|
| 249 |
-
const
|
| 250 |
-
|
| 251 |
-
|
| 252 |
-
|
| 253 |
-
|
| 254 |
-
|
| 255 |
-
|
| 256 |
-
|
| 257 |
-
|
| 258 |
-
|
| 259 |
-
|
| 260 |
-
img.data[i * 4
|
| 261 |
-
img.data[i * 4 +
|
| 262 |
-
|
| 263 |
-
|
| 264 |
-
|
| 265 |
-
|
| 266 |
-
|
| 267 |
-
|
| 268 |
-
v
|
| 269 |
-
|
| 270 |
-
|
| 271 |
-
|
| 272 |
-
needle
|
| 273 |
-
|
| 274 |
-
|
| 275 |
-
|
| 276 |
-
|
| 277 |
-
|
| 278 |
-
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
const
|
| 286 |
-
const
|
| 287 |
-
const
|
| 288 |
-
|
| 289 |
-
|
| 290 |
-
|
| 291 |
-
|
| 292 |
-
|
| 293 |
-
|
| 294 |
-
|
| 295 |
-
}
|
| 296 |
-
|
| 297 |
-
|
| 298 |
-
|
| 299 |
-
|
| 300 |
-
|
| 301 |
-
|
| 302 |
-
|
| 303 |
-
|
| 304 |
-
|
| 305 |
-
|
| 306 |
-
|
| 307 |
-
|
| 308 |
-
|
| 309 |
-
|
| 310 |
-
|
| 311 |
-
|
| 312 |
-
btn
|
| 313 |
-
|
| 314 |
-
btn.
|
| 315 |
-
|
| 316 |
-
|
| 317 |
-
}
|
| 318 |
-
|
| 319 |
-
|
| 320 |
-
|
| 321 |
-
|
| 322 |
-
|
| 323 |
-
|
| 324 |
-
|
| 325 |
-
|
| 326 |
-
drop
|
| 327 |
-
drop.addEventListener("
|
| 328 |
-
|
| 329 |
-
|
| 330 |
-
</
|
|
|
|
|
|
|
|
|
| 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 & 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>
|