Hugging Face's logo

Spaces:
Logolabs
/
inkvec
Running

App Files Community
inkvec
File size: 53,663 Bytes
8b468fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1863845
 
 
 
 
8b468fc
 
 
 
 
 
 
 
 
 
 
1863845
 
 
8b468fc
 
 
 
 
 
1863845
8b468fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1863845
 
 
 
 
8b468fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1863845
8b468fc
5a686ae
8b468fc
5a686ae
 
 
 
 
 
 
 
8b468fc
5a686ae
 
1863845
5a686ae
 
 
 
 
 
 
 
8b468fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f4e273a
8b468fc
 
 
 
 
 
 
 
 
 
 
 
 
 
5a686ae
 
 
8b468fc
 
 
 
 
 
 
f4e273a
8b468fc
 
 
 
 
 
 
 
f4e273a
8b468fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
721cf84
5a686ae
8b468fc
 
 
 
 
 
 
 
 
 
721cf84
8b468fc
 
 
 
 
c2b84fb
8b468fc
 
 
 
 
 
 
 
 
721cf84
8b468fc
 
 
 
 
 
 
 
1863845
 
 
 
 
 
 
 
5a686ae
 
1863845
5a686ae
1863845
 
 
8b468fc
1863845
 
 
 
 
 
 
 
 
 
 
 
 
 
8b468fc
1863845
 
 
 
8b468fc
 
1863845
8b468fc
1863845
f4e273a
8b468fc
f4e273a
8b468fc
1863845
 
 
 
 
 
 
 
 
8b468fc
1863845
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8b468fc
 
 
 
 
f4e273a
1863845
8b468fc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f4e273a
 
 
8b468fc
 
 
 
 
 
f4e273a
 
 
 
 
8b468fc
 
 
 
5a686ae
 
f4e273a
5a686ae
 
721cf84
 
5a686ae
 
 
 
f4e273a
 
 
 
8b468fc
 
f4e273a
8b468fc
 
5a686ae
 
 
 
 
 
 
 
 
 
 
 
 
f4e273a
5a686ae
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f4e273a
8b468fc
 
 
 
 
 
 
 
 
5a686ae
8b468fc
f4e273a
 
 
8b468fc
 
5a686ae
721cf84
8b468fc
 
 
 
 
 
721cf84
 
8b468fc
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
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
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inkvec</title>
<meta name="description" content="Inkvec by LogoLabs traces logos, icons and flat artwork to exact SVG. Inkvec Studio Lite runs the whole editor in your browser; nothing is uploaded.">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<style>
/* LogoLabs design system: warm charcoal ramp, one copper accent, Playfair Display + Inter.
   The fonts are the Studio's own subset copies, served from this site: the page makes no
   request to anyone else. */
@font-face{font-family:"Inter Studio";src:url("fonts/inter-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Playfair Studio";src:url("fonts/playfair-latin.woff2") format("woff2");font-weight:400 900;font-display:swap}
:root{
  --paper:#1a1816;--card:#211f1c;--stage:#141210;--void:#0c0a09;--surface:#2a2724;--highlight:#35322e;
  --ink:#faf8f5;--dim:rgba(250,248,245,.75);--faint:rgba(250,248,245,.55);--muted:rgba(250,248,245,.4);
  --rule:rgba(250,248,245,.08);--rule2:#2a2724;
  --accent:#c9754a;--accent-hover:#d4896a;--accent-ink:#1a1816;--accent-soft:rgba(201,117,74,.12);--accent-subtle:rgba(201,117,74,.08);
  /* Copper as text on a copper-tinted ground (a pressed toggle, the chosen gallery case):
     --accent-soft over --card composites to #352922, where --accent is 4.1:1 and fails WCAG 2.2
     SC 1.4.3 (4.5:1 below 24 px; r2-product's axe run). The lighter copper is 5.1:1 there and
     5.9:1 on --card. */
  --accent-text:#d4896a;
  --gold:#b8976c;
  --good:#34d399;--goodbg:rgba(52,211,153,.15);--bad:#f87171;--check:#2a2724;
  --anchor:#f87171;--handle:#b8976c;--wire:#faf8f5;
  --shadow:0 8px 24px -4px rgba(12,10,9,.5);--shadow-lg:0 20px 50px -12px rgba(12,10,9,.6);
  --glow:0 0 30px rgba(201,117,74,.25);
  --font-display:"Playfair Studio","Playfair Display",Georgia,serif;--font-body:"Inter Studio",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --radius:12px;--radius-sm:8px;--radius-lg:16px;--radius-full:9999px}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover);text-decoration:underline}
/* A link inside a sentence is underlined, not told apart by its colour alone (WCAG 2.2 SC
   1.4.1); navigation, buttons and tiles keep their own shapes. */
.note a,.lede a,.cta-note a,.caption a,.how a,footer a{text-decoration:underline;text-underline-offset:2px}
button,.btn{font:600 13.5px/1 var(--font-body);color:var(--ink);background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-sm);padding:10px 14px;cursor:pointer;transition:border-color .15s,background .15s,transform .1s,box-shadow .15s;display:inline-flex;align-items:center;gap:8px;text-decoration:none}
button:hover,.btn:hover{border-color:rgba(250,248,245,.18);text-decoration:none;color:var(--ink)}button:active,.btn:active{transform:translateY(1px) scale(.98)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:15px 28px;font-size:16px;border-radius:var(--radius-full)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--glow);transform:translateY(-1px);color:var(--accent-ink)}
.btn.big{padding:15px 24px;font-size:15px;border-radius:var(--radius-full)}
.btn svg{width:18px;height:18px}
button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
code{font-family:var(--font-mono);font-size:.92em}
h1,h2,h3{font-family:var(--font-display)}
h2{font-size:clamp(22px,3vw,30px);letter-spacing:-.02em;font-weight:600;margin:0 0 6px;text-wrap:balance}
.sec{margin-top:72px}
[hidden]{display:none!important}
/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--rule);background:var(--card)}
.top .mark{width:28px;height:28px;color:var(--accent)}
.top .name{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.top .by{color:var(--dim);font-size:13px}
.top nav{margin-left:auto;display:flex;gap:18px;font-size:13.5px;font-weight:600;align-items:center}
.top nav a{color:var(--dim)}
.top nav a:hover{color:var(--accent)}
.top nav a.go{color:var(--accent)}
main{max-width:1180px;margin:0 auto;padding:30px 22px 80px}
/* hero */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:center;padding:28px 0 8px}
@media (max-width:900px){.hero{grid-template-columns:1fr}}
h1{font-size:clamp(32px,4.6vw,52px);line-height:1.06;letter-spacing:-.025em;font-weight:700;margin:0 0 14px;text-wrap:balance}
.lede{color:var(--dim);max-width:62ch;margin:0 0 24px;font-size:16.5px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cta-note{color:var(--faint);font-size:13px;margin:14px 0 0;max-width:60ch}
.cta-note b{color:var(--dim)}
.drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:250px;padding:26px;border:1.5px dashed var(--rule);border-radius:var(--radius-lg);background:var(--card);cursor:pointer;transition:border-color .12s,background .12s;text-align:center}
.drop:hover,.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.drop:focus-within{outline:2px solid var(--accent);outline-offset:3px}
.drop .big{font-weight:700;font-size:17px}
.drop .small{color:var(--dim);font-size:13.5px;max-width:44ch}
.drop svg{width:34px;height:34px;color:var(--accent)}
.samples{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.samples a{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border:1px solid var(--rule);border-radius:999px;color:var(--dim);font-size:12.5px;font-weight:600;background:var(--stage)}
.samples a:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}
.samples img{width:22px;height:22px;border-radius:50%;background:#fff;object-fit:contain}
.drop.holding{cursor:default}
.drop.holding > :not(.handoff):not(input){display:none}
.handoff{display:flex;flex-direction:column;align-items:center;gap:8px}
.handoff .acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.handoff .btn.primary{padding:12px 22px;font-size:15px}
/* what's new */
.newgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:18px}
.new{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.new h3{margin:0 0 6px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.new p{margin:0;color:var(--dim);font-size:13.5px}
.tag{display:inline-block;font:700 10.5px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
/* viewer */
.viewer{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.viewer.single{grid-template-columns:1fr}
@media (max-width:720px){.viewer{grid-template-columns:1fr}}
.pane{position:relative;aspect-ratio:1;max-height:600px;background:var(--stage);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);cursor:grab;touch-action:none;user-select:none}
.viewer.single .pane{aspect-ratio:auto;height:min(70vh,600px)}
.pane:active{cursor:grabbing}
.pane .checker{position:absolute;inset:0;z-index:0;background-image:linear-gradient(45deg,var(--check) 25%,transparent 25%),linear-gradient(-45deg,var(--check) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--check) 75%),linear-gradient(-45deg,transparent 75%,var(--check) 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
.pane .cam{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;z-index:1}
.pane .layer{position:absolute;inset:0}
.pane .layer>*{position:absolute;inset:0;width:100%;height:100%}
.pane .layer img{object-fit:contain;display:block}
.pane .layer svg{display:block}
.pane .rightwrap{position:absolute;inset:0;z-index:2}
.pane .rightwrap .cam{z-index:auto}
.pane svg.wire path,.pane svg.wire circle,.pane svg.wire ellipse,.pane svg.wire rect,.pane svg.wire polygon{fill:none!important;stroke:var(--wire);stroke-width:1px;vector-effect:non-scaling-stroke;stroke-opacity:.9}
.pane svg.ov{pointer-events:none}
.pane svg.ov .h{stroke:var(--handle);stroke-width:1px;vector-effect:non-scaling-stroke;fill:none;stroke-opacity:.85}
.pane svg.ov .hd{stroke:var(--handle);stroke-width:3.5px;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}
.pane svg.ov .a{stroke:var(--anchor);stroke-width:6px;vector-effect:non-scaling-stroke;stroke-linecap:round;fill:none}
.pane .divider{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--accent);z-index:4;cursor:ew-resize;transform:translateX(-1px)}
.pane .divider::before{content:"";position:absolute;top:0;bottom:0;left:-14px;right:-14px}
.pane .divider::after{content:"";position:absolute;top:50%;left:50%;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);box-shadow:0 2px 10px rgba(12,10,9,.4)}
.pane .ptag{position:absolute;top:10px;left:10px;z-index:3;font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:6px;background:rgba(250,248,245,.92);color:var(--accent-ink);pointer-events:none}
.pane .ptag.r{left:auto;right:10px}
.zoomlbl{position:absolute;right:10px;bottom:10px;z-index:4;font:500 11px var(--font-mono);padding:4px 7px;border-radius:6px;background:rgba(250,248,245,.92);color:var(--accent-ink);pointer-events:none}
.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0}
.tools .lbl{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:0 2px 0 4px}
.tools .legend{display:flex;gap:12px;color:var(--dim);font-size:12.5px;margin-left:auto}
.tools .legend i{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px;margin-right:5px}
.seg{display:inline-flex;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-full);padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:transparent;border-radius:var(--radius-full);padding:7px 10px;font-size:12.5px;color:var(--dim)}
.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-text)}
/* gallery */
.gal{display:grid;grid-template-columns:300px 1fr;gap:16px;margin-top:18px;align-items:start}
@media (max-width:820px){.gal{grid-template-columns:1fr}}
/* Every example in one panel that scrolls inside itself, as tall as the viewer beside it
   (set from the viewer's own height), a section per set. On a narrow screen, one strip. */
.cases{height:560px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--rule);border-radius:var(--radius);background:var(--card);padding:0 10px 10px;scrollbar-width:thin}
.sethead{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:baseline;padding:10px 2px 8px;background:var(--card);font:700 11px/1 var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.sethead span{color:var(--faint);font-weight:600;letter-spacing:.02em;text-transform:none}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:6px}
.case{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:5px;border-radius:var(--radius-sm);text-align:left;background:var(--stage);min-width:0;overflow:hidden}
.case .th{aspect-ratio:1;width:100%;border-radius:5px;background:#fff;overflow:hidden;display:grid;place-items:center}
.case .th img{width:100%;height:100%;object-fit:contain}
.case .nm{width:100%;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dim)}
.case[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.case[aria-pressed="true"] .nm{color:var(--accent-text)}
.caption{margin:8px 0 0;font-size:13px;color:var(--dim)}
.caption b{color:var(--ink)}
@media (max-width:820px){
  .cases{height:auto!important;max-height:none;display:flex;align-items:stretch;gap:8px;overflow-x:auto;overflow-y:hidden;padding:8px}
  .sethead{position:sticky;left:0;writing-mode:vertical-rl;transform:rotate(180deg);padding:4px;justify-content:center;gap:6px}
  .tiles{display:flex;gap:6px;margin:0}
  .case{width:84px;flex:none}
}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{display:inline-flex;gap:6px;align-items:baseline;font-size:12.5px;padding:5px 9px;border-radius:999px;background:var(--rule2);color:var(--dim)}
.chip b{color:var(--ink);font-weight:700}
.chip.win{background:var(--goodbg);color:var(--good)}.chip.win b{color:var(--good)}
.chip.vt{border:1px solid var(--rule);background:transparent}
/* versus */
.versus{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;margin-top:18px}
.bignums{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.bignums{grid-template-columns:repeat(2,1fr)}}
.bignum{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.bignum .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.bignum .v{font-family:var(--font-display);font-size:32px;font-weight:600;letter-spacing:-.01em;line-height:1.1;margin:6px 0 2px;color:var(--accent)}
.bignum .v small{font-family:var(--font-body);font-size:15px;color:var(--dim);font-weight:500}
.bignum .s{font-size:12.5px;color:var(--dim)}
.bars{background:var(--card);border:1px solid var(--rule);border-radius:var(--radius);padding:6px 16px 14px;box-shadow:var(--shadow);overflow-x:auto}
.bars table{width:100%;margin-bottom:10px;border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.bars caption{text-align:left;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:12px 0 8px}
.bars th,.bars td{padding:8px 8px;text-align:right;border-bottom:1px solid var(--rule2)}
.bars th:first-child,.bars td:first-child{text-align:left;white-space:normal;min-width:170px}
.bars thead th{color:var(--faint);font-weight:600;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.bars tbody tr:last-child td{border-bottom:0}
.bars tr.win td{color:var(--ink)}
.bars tr.win td:first-child{color:var(--accent);font-weight:600}
.note{color:var(--faint);font-size:12.5px;margin-top:10px;max-width:110ch}
.how{max-width:74ch}
.how p{color:var(--dim);margin:0 0 10px}
.desk{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--card);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:20px 22px;box-shadow:var(--shadow)}
.desk p{margin:4px 0 0;color:var(--dim);font-size:14px;max-width:70ch}
footer{margin:60px auto 0;max-width:1180px;padding:0 22px 30px;color:var(--faint);font-size:12.5px;display:flex;gap:16px;flex-wrap:wrap}
footer .v{margin-left:auto}
/* Inside Hugging Face's frame, a gap in the page's own dark between their header and ours. */
html.framed body{border-top:6px solid var(--void)}
html.framed .top{box-shadow:0 -6px 0 var(--void),inset 0 1px 0 rgba(201,117,74,.35)}
@media (max-width:640px){.top nav a:not(.go){display:none}.bignums{grid-template-columns:1fr}.tools .legend{margin-left:0}}
</style>
</head>
<body>
<header class="top">
  <svg class="mark" viewBox="254.5 140.5 514.25 742.25" fill="currentColor" aria-hidden="true"><path d="M511.3 140.6c-23.3 79.8-103 178.5-144.9 232.75L335.45 415.4a467.73 467.73 0 00-64.8 115.4c-65.5 193.1 80.8 351.3 237.85 351.7 21.26 1.1 42.56-1.3 63.06-7 90.8-18.87 211.87-120.04 195.47-280.9-17.9-164.8-187.55-272.65-251.8-443.84Zm10.2 374.9a61.05 61.05 0 00-67.1 81.6 61.05 61.05 0 00104.3 17.26 61.05 61.05 0 00-37.2-98.86ZM511.4 817.65l177.16-201.3-43-.15a44.56 44.56 0 00-36.2 18.47l-97.8 111.67-102.2-116.67c-16.06-18.94-38.06-12-74.9-13.4 5.7 7.3 159.75 179.73 176.93 201.4Z" fill-rule="evenodd"/></svg>
  <span class="name">Inkvec</span><span class="by">by LogoLabs</span>
  <nav><a href="#new">What's new</a><a href="#showcase">Before &amp; after</a><a href="#versus">Results</a><a href="#how">How it works</a><a href="https://github.com/logolabs/inkvec" target="_blank" rel="noopener noreferrer">GitHub</a><a class="go" href="studio/index.html">Open the Studio &rarr;</a></nav>
</header>
<main>

<section class="hero">
  <div>
    <h1>Exact vectors from your logo, in your browser.</h1>
    <p class="lede">Inkvec traces logos, icons and flat artwork to SVG the way an artist would draw them: edges where the anti-aliasing says they are, circles as circles, one clean path per colour, gradients as gradients. <b>Inkvec Studio Lite</b> is the whole editor, running here as WebAssembly on your own processor. Nothing is uploaded.</p>
    <div class="ctas">
      <a class="btn primary" id="open" href="studio/index.html"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6"/></svg>Open Inkvec Studio Lite</a>
      <a class="btn big" href="https://github.com/logolabs/inkvec/releases" target="_blank" rel="noopener noreferrer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>Desktop app</a>
    </div>
    <p class="cta-note" id="ctanote">Best on a laptop or desktop screen. Inside the Studio, <b>Full screen</b> is in the top bar.</p>
  </div>
  <label class="drop" id="drop">
    <input type="file" id="file" accept="image/png,image/jpeg,image/webp,image/gif,image/bmp,image/tiff,image/svg+xml,.svg">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4m0 0l-4 4m4-4l4 4"/><path d="M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3"/></svg>
    <div class="big">Drop a logo to open it in the Studio</div>
    <div class="small">PNG, JPEG, WebP, GIF, BMP, TIFF or SVG. It is handed to the Studio inside this browser and traced there.</div>
    <div class="samples" id="samples"></div>
  </label>
</section>

<section class="sec" id="new">
  <h2>What's new in 0.2.0</h2>
  <p class="lede">The Studio grew from a tracer with a report into an editor for the whole job, and it now runs in the browser as well as on the desktop.</p>
  <div class="newgrid">
    <div class="new"><span class="tag">Palette</span><h3>Colour groups, gradients included</h3><p>Drag one ink onto another and they are drawn as one: the shapes between them join instead of keeping a traced seam. A group can become a chosen colour or one of its members, and a gradient member is extended over the whole group. Suggestions for near-duplicate inks are offered, never applied unasked.</p></div>
    <div class="new"><span class="tag">Opening an image</span><h3>Auto, or a short Custom wizard</h3><p>Every image is traced at once. A card offers to keep that, or to walk through what the image is, clean-up, colours, detail and shape, with a live preview of each choice beside Auto's trace.</p></div>
    <div class="new"><span class="tag">Fabricate</span><h3>Ready for cutters and lasers</h3><p>Layered vinyl with registration marks, inlay, print-then-cut stickers, stencils with bridges, and single-line paths for pens, scoring blades and lasers, in millimetres. A preflight shows what will not cut before anything is cut. SVG, DXF with true arcs, and GRBL G-code.</p></div>
    <div class="new"><span class="tag">Honesty</span><h3>Certainty bands</h3><p>Where each traced boundary could be, measured from the pixels, drawn over the trace: sure, soft and unsure edges at a glance. On a clean 128-px emoji the median edge uncertainty is 0.09 px; the same image as a JPEG at quality 20 reads 0.50 px.</p></div>
    <div class="new"><span class="tag">Transparency</span><h3>Clear ground stays clear</h3><p>Transparent images are traced as they are, and the clear ground no longer takes a slot from a colour cap: on ten emoji at four colours, mean dE00 went from 0.457 to 0.186. Side-by-side fills no longer let a hairline of background through.</p></div>
    <div class="new"><span class="tag">Speed</span><h3>Faster, with identical output</h3><p>The curve fit and the ring repair run in parallel blocks, the palette and the boundary solve do only the work they read, and the Studio measures in parallel: on large images the slowest stages take a third to 70% less time, every change checked byte for byte against the build before.</p></div>
  </div>
  <p class="note">Full list, with the measurements behind each figure: the <a href="https://github.com/logolabs/inkvec/blob/main/CHANGELOG.md" target="_blank" rel="noopener noreferrer">changelog</a>.</p>
</section>

<section class="sec" id="showcase">
  <h2>Before and after, with the geometry showing</h2>
  <p class="lede" id="showlede">Every example in one scrolling panel: real brand logos, the benchmark's cases and more icons and emoji, each rendered from its source file at 1024&nbsp;px on white and traced from that raster by Inkvec (the current build) and by the other engines. Pick one to open it. The raster on the left, a trace on the right, moving together as you zoom. Switch the right side between engines, or the view to a wipe or an A/B flick. <b>Anchors</b> shows every on-curve point; <b>Handles</b> adds each curve's control points with their tangents.</p>
  <div class="gal"><div class="cases" id="cases"></div><div><div class="tools" id="galtools"></div><div class="viewer" id="galview"></div><p class="caption" id="galcap"></p><div class="chips" id="galchips"></div></div></div>
</section>

<section class="sec" id="versus">
  <h2>Inkvec vs the field</h2>
  <p class="lede" id="versuslede"></p>
  <div class="versus">
    <div class="bignums" id="bignums"></div>
    <div class="bars" id="bars"></div>
  </div>
  <p class="note" id="vtnote"></p>
  <p class="note" id="tmnote" style="margin-top:14px;border-top:1px solid var(--rule);padding-top:12px"><b>Trademark notice &amp; nominative fair-use disclaimer:</b> All third-party trademarks, logos, brand names, and company marks displayed in this showcase are the property of their respective owners. Their depiction is strictly for nominative, non-commercial educational benchmarking and comparative vectorization demonstration. Inkvec and LogoLabs are not affiliated with, sponsored by, or endorsed by these trademark holders.</p>
</section>

<section class="sec how" id="how">
  <h2>How it works</h2>
  <p>Inkvec decides the geometry from the evidence in the pixels. It finds the inks by minimum description length, builds a planar map where every boundary is shared by exactly two shapes so there are never gaps, solves every boundary at once against an exact coverage render of the image, then fits lines, arcs, curves, circles and gradients priced in parameters. The result carries the artist's structure: a word is one path, a circle is a <code>&lt;circle&gt;</code>, and the number of coordinates follows the artwork rather than a tolerance slider.</p>
  <p>Inkvec Studio Lite is the desktop app's own interface and code: the Studio's Rust core compiled to WebAssembly, run in a Web Worker on a pool of threads, one per core (where the browser allows it: a page opened in its own tab does). The trained denoiser for JPEG and screenshot damage is downloaded once, in the background as the Studio opens, and runs on your GPU through ONNX Runtime Web.</p>
</section>

<section class="sec">
  <div class="desk">
    <div><h2 style="margin:0">Inkvec Studio for the desktop</h2><p>The same editor for Windows, macOS and Linux, with folders of images traced in one batch, the <code>inkvec</code> command line, the right-click menu and traces up to 16384 px. Free and open source (Apache-2.0).</p></div>
    <a class="btn big" href="https://github.com/logolabs/inkvec/releases" target="_blank" rel="noopener noreferrer">Download from GitHub</a>
  </div>
</section>
</main>
<footer><span>Everything runs in your browser. Nothing is uploaded.</span><span>Inkvec is built by LogoLabs for its work on <a href="https://logolabs.org">logo generation using AI</a></span><span><a href="studio/guide/index.html">User guide</a></span><span>All trademarks property of respective owners (nominative fair use).</span><span>&copy; LogoLabs</span><span class="v mono" id="ver"></span></footer>

<script type="module">
const $ = id => document.getElementById(id);
const fmt = (v, d) => (v === undefined || v === null || Number.isNaN(v)) ? "—" : Number(v).toFixed(d);
const el = (tag, cls, html) => { const e = document.createElement(tag); if (cls) e.className = cls; if (html !== undefined) e.innerHTML = html; return e; };
const esc = s => String(s).replace(/[&<>"]/g, c => ({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;"}[c]));

// ---------------------------------------------------------------- the way into the Studio
// Hugging Face shows this page inside an iframe on huggingface.co, which sends no isolation
// headers, and a frame is cross-origin isolated only if every page above it is (web.dev,
// "Making your website cross-origin isolated using COOP and COEP"; MDN, crossOriginIsolated).
// A Studio opened inside the frame therefore runs on one core and without the denoiser,
// while the same address in a tab of its own is isolated, since the static host sends the
// headers itself: 2048 px Quality traces 1.7-3.5x faster there (r2-product, measured). So
// inside the frame every way into the Studio opens it in a tab of its own. At the static
// host's own address the page is isolated and the Studio opens in this tab, as before.
const framed = (() => { try { return window.self !== window.top; } catch { return true; } })() ||
  [...(location.ancestorOrigins || [])].some(o => /(^|\.)huggingface\.co(:\d+)?$/.test(o.replace(/^[a-z]+:\/\//, '')));
const ownTab = framed && !self.crossOriginIsolated;
document.documentElement.classList.toggle('framed', framed);
if (ownTab) {
  $("ctanote").innerHTML = `Best on a laptop or desktop screen. The Studio opens in a tab of its own, where it runs on every core and can use the denoiser.`;
  for (const a of document.querySelectorAll('a[href^="studio/index.html"]')) a.target = "_blank";
}

// A dropped, chosen or pasted file never leaves the machine. At the static host's own
// address it is handed over through this origin's IndexedDB and the Studio opens in this
// tab. Inside Hugging Face's frame neither storage nor messages reach the Studio's own tab:
// the frame's storage is partitioned under huggingface.co (the tab cannot read it), and the
// Studio's isolation (COOP same-origin) puts its tab in another browsing context group, which
// cuts it off from this frame. Measured in a framed stand-in: the window.open handle reads
// closed once the Studio loads, a postMessage to it is dropped, the tab's window.opener is
// null, and BroadcastChannel is partitioned too. What does cross is the address, so the file
// rides in the URL fragment, which is never sent to any server (RFC 3986, section 3.5).
// Not from the literature: the fragment as a hand-off between a partitioned frame and an
// isolated tab; see also: WHATWG HTML, "Cross-origin opener policies" (browsing context
// group switches), and Chromium's storage partitioning (third-party storage keyed by the
// top-level site).
const HANDOFF_DB = "inkvec-handoff";
// The largest file that fits: base64 makes 1.5 MB into 2,000,000 characters, inside
// Chromium's 2 MiB limit on a URL (url::kMaxURLChars); a longer one opens as about:blank.
const HANDOFF_MAX = 1_500_000;
function handOffHere(name, bytes){
  const req = indexedDB.open(HANDOFF_DB, 1);
  req.onupgradeneeded = () => req.result.createObjectStore("files");
  req.onsuccess = () => {
    const tx = req.result.transaction("files", "readwrite");
    tx.objectStore("files").put({ name, bytes }, "open");
    tx.oncomplete = () => { location.href = "studio/index.html?open=handoff"; };
  };
  req.onerror = () => { location.href = "studio/index.html"; };
}
// base64url (RFC 4648, section 5), in slices so a large file never builds one huge argument list.
function base64url(bytes){
  let s = "";
  for (let i = 0; i < bytes.length; i += 0x8000) s += String.fromCharCode.apply(null, bytes.subarray(i, i + 0x8000));
  return btoa(s).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
}
function handOffUrl(name, bytes){
  return bytes.length <= HANDOFF_MAX ? `studio/index.html#open=${base64url(bytes)}&name=${encodeURIComponent(name)}` : null;
}
const drop = $("drop");
function release(){
  drop.classList.remove("holding");
  $("handoff")?.remove();
}
// Inside the frame: the file goes to a tab of its own. A browser lets a page open a tab only
// just after a click or a key press (transient user activation); choosing a file or pressing
// Ctrl+V leaves one, a file dropped from another application does not. Without one, the
// drop zone holds the file and offers the tab as a button, whose click is the activation.
function holdForTab(name, bytes, url){
  release();
  const mb = (bytes.length / 1e6).toFixed(1);
  const card = el("div", "handoff");
  card.id = "handoff";
  card.setAttribute("role", "group");
  card.setAttribute("aria-label", "Open the file in the Studio");
  card.append(el("div", "big", url ? `${esc(name)} is ready to open` : `${esc(name)} is ${mb} MB`));
  card.append(el("div", "small", url
    ? "It opens in a tab of its own, where the Studio runs on every core and can use the denoiser."
    : `From inside Hugging Face's page, a file can reach a tab of its own only inside the page address, which holds up to ${(HANDOFF_MAX / 1e6).toFixed(1)} MB. Open the Studio in its own tab and drop the file there, or open it here, on one core.`));
  const acts = el("div", "acts");
  const tab = el("button", "btn primary", url ? "Open in its own tab" : "Open the Studio in its own tab");
  tab.type = "button";
  tab.dataset.act = "tab";
  tab.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); window.open(url || "studio/index.html", "_blank"); release(); });
  const here = el("button", "btn", "Open here, on one core");
  here.type = "button";
  here.dataset.act = "here";
  here.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); handOffHere(name, bytes); });
  const other = el("button", "btn", "Another file");
  other.type = "button";
  other.dataset.act = "cancel";
  other.addEventListener("click", e => { e.preventDefault(); e.stopPropagation(); release(); });
  acts.append(tab, here, other);
  card.append(acts);
  drop.classList.add("holding");
  drop.append(card);
  tab.focus();
}
async function handOff(file){
  const name = file.name || "pasted image";
  const bytes = new Uint8Array(await file.arrayBuffer());
  if (!ownTab) return handOffHere(name, bytes);
  const url = handOffUrl(name, bytes);
  if (url && navigator.userActivation?.isActive && window.open(url, "_blank")) return;
  holdForTab(name, bytes, url);
}
$("file").addEventListener("change", e => { const f = e.target.files[0]; e.target.value = ""; if (f) handOff(f); });
drop.addEventListener("click", e => { if (drop.classList.contains("holding")) e.preventDefault(); });
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"); const f = e.dataTransfer.files[0]; if (f) handOff(f); });
document.addEventListener("paste", e => { const f = [...(e.clipboardData?.files || [])][0]; if (f) handOff(f); });
for (const [file, label] of [["flat-logo.png", "Flat logo"], ["crest-filigree.png", "Crest"], ["signature-bw.png", "Signature"]]){
  const a = el("a"); a.href = `studio/index.html?sample=${file}`; a.innerHTML = `<img src="studio/samples/${file}" alt="">${label}`;
  if (ownTab) a.target = "_blank";
  a.addEventListener("click", e => e.stopPropagation());
  $("samples").appendChild(a);
}

// ---------------------------------------------------------------- geometry overlays
function parsePath(d, tx, ty){
  const toks = d.match(/[MLHVCSQTAZmlhvcsqtaz]|-?\d*\.?\d+(?:e[-+]?\d+)?/gi) || [];
  const anchors = [], handles = [];
  let i = 0, cx = 0, cy = 0, sx = 0, sy = 0, cmd = null, pc = null, pcx = 0, pcy = 0;
  const num = () => parseFloat(toks[i++]);
  const push = (x,y) => anchors.push([x+tx, y+ty]);
  const hd = (ax,ay,bx,by) => handles.push([[ax+tx,ay+ty],[bx+tx,by+ty]]);
  while (i < toks.length){
    const t = toks[i];
    if (/[A-Za-z]/.test(t)){ cmd = t; i++; if (cmd==='Z'||cmd==='z'){ cx = sx; cy = sy; pc = null; continue; } }
    if (!cmd) break;
    const rel = cmd === cmd.toLowerCase(); const C = cmd.toUpperCase();
    if (C === 'M'){ let x = num(), y = num(); if (rel){x+=cx;y+=cy;} cx=x;cy=y;sx=x;sy=y; push(x,y); cmd = rel?'l':'L'; pc=null; continue; }
    if (C === 'L'){ let x = num(), y = num(); if (rel){x+=cx;y+=cy;} cx=x;cy=y; push(x,y); pc=null; continue; }
    if (C === 'H'){ let x = num(); if (rel) x+=cx; cx=x; push(cx,cy); pc=null; continue; }
    if (C === 'V'){ let y = num(); if (rel) y+=cy; cy=y; push(cx,cy); pc=null; continue; }
    if (C === 'C'){ let x1=num(),y1=num(),x2=num(),y2=num(),x=num(),y=num(); if (rel){x1+=cx;y1+=cy;x2+=cx;y2+=cy;x+=cx;y+=cy;} hd(cx,cy,x1,y1); hd(x,y,x2,y2); cx=x;cy=y; push(x,y); pc='C'; pcx=x2; pcy=y2; continue; }
    if (C === 'S'){ let x2=num(),y2=num(),x=num(),y=num(); if (rel){x2+=cx;y2+=cy;x+=cx;y+=cy;} const x1 = pc==='C' ? 2*cx-pcx : cx, y1 = pc==='C' ? 2*cy-pcy : cy; hd(cx,cy,x1,y1); hd(x,y,x2,y2); cx=x;cy=y; push(x,y); pc='C'; pcx=x2; pcy=y2; continue; }
    if (C === 'Q'){ let x1=num(),y1=num(),x=num(),y=num(); if (rel){x1+=cx;y1+=cy;x+=cx;y+=cy;} hd(cx,cy,x1,y1); hd(x,y,x1,y1); cx=x;cy=y; push(x,y); pc='Q'; pcx=x1; pcy=y1; continue; }
    if (C === 'T'){ let x=num(),y=num(); if (rel){x+=cx;y+=cy;} const x1 = pc==='Q' ? 2*cx-pcx : cx, y1 = pc==='Q' ? 2*cy-pcy : cy; hd(cx,cy,x1,y1); hd(x,y,x1,y1); cx=x;cy=y; push(x,y); pc='Q'; pcx=x1; pcy=y1; continue; }
    if (C === 'A'){ num();num();num();num();num(); let x=num(),y=num(); if (rel){x+=cx;y+=cy;} cx=x;cy=y; push(x,y); pc=null; continue; }
    i++;
  }
  return {anchors, handles};
}
// The translation of an element and its groups: the only transform these tracers write.
const offsetOf = e => { let x = 0, y = 0; for (let n = e; n && n.tagName.toLowerCase() !== 'svg'; n = n.parentElement){ const m = (n.getAttribute('transform')||'').match(/translate\(\s*(-?[\d.e+-]+)[ ,]*(-?[\d.e+-]+)?\s*\)/i); if (m){ x += parseFloat(m[1]); y += parseFloat(m[2]||'0'); } } return [x, y]; };
function svgEl(text){
  const s = new DOMParser().parseFromString(text, 'image/svg+xml').documentElement;
  if (!s || s.tagName.toLowerCase() !== 'svg') return null;
  // Some engines write only a width and a height; the pane needs a viewBox to scale into.
  if (!s.getAttribute('viewBox')){ const w = parseFloat(s.getAttribute('width')), h = parseFloat(s.getAttribute('height')); if (w > 0 && h > 0) s.setAttribute('viewBox', `0 0 ${w} ${h}`); }
  s.removeAttribute('width'); s.removeAttribute('height'); s.setAttribute('preserveAspectRatio','xMidYMid meet');
  return document.importNode(s, true);
}
function overlay(src){
  const ns = 'http://www.w3.org/2000/svg';
  const ov = document.createElementNS(ns, 'svg'); ov.setAttribute('viewBox', src.getAttribute('viewBox') || '0 0 100 100'); ov.setAttribute('class','ov'); ov.setAttribute('preserveAspectRatio','xMidYMid meet');
  let Aa = '', H = '', HD = '', n = 0;
  for (const e of src.querySelectorAll('path')){
    const [tx, ty] = offsetOf(e);
    const {anchors, handles} = parsePath(e.getAttribute('d')||'', tx, ty); n += anchors.length;
    for (const [x,y] of anchors) Aa += `M${x.toFixed(2)} ${y.toFixed(2)}h0.001`;
    for (const [a,b] of handles){ H += `M${a[0].toFixed(2)} ${a[1].toFixed(2)}L${b[0].toFixed(2)} ${b[1].toFixed(2)}`; HD += `M${b[0].toFixed(2)} ${b[1].toFixed(2)}h0.001`; }
  }
  for (const e of src.querySelectorAll('circle, ellipse')){ const [tx, ty] = offsetOf(e); Aa += `M${(parseFloat(e.getAttribute('cx'))+tx).toFixed(2)} ${(parseFloat(e.getAttribute('cy'))+ty).toFixed(2)}h0.001`; n++; }
  const mk = (d, cls) => { const p = document.createElementNS(ns,'path'); p.setAttribute('d', d||'M0 0'); p.setAttribute('class', cls); return p; };
  const h = mk(H,'h'), hdp = mk(HD,'hd'), a = mk(Aa,'a'); ov.append(h, hdp, a);
  return {ov, h, hd: hdp, a, n};
}
function vectorLayer(svgText){
  const fill = svgEl(svgText); const wire = svgEl(svgText); wire.classList.add('wire');
  const o = overlay(fill);
  const root = el('div', 'layer'); root.append(fill, wire, o.ov);
  const set = L => { root.dataset.layer = L; fill.style.display = L === 'wire' ? 'none' : ''; fill.style.opacity = (L==='anchor'||L==='handle') ? '.35' : '1'; wire.style.display = L === 'fill' ? 'none' : ''; o.a.style.display = (L==='anchor'||L==='handle') ? '' : 'none'; o.h.style.display = o.hd.style.display = (L==='handle') ? '' : 'none'; };
  set('fill');
  return {root, set, anchors: o.n};
}
const imgLayer = src => { const w = el('div', 'layer'); const im = document.createElement('img'); im.src = src; im.alt = ''; w.appendChild(im); return w; };

// ---------------------------------------------------------------- viewer: side by side, wipe, flick
function viewer(host){
  host.innerHTML = '';
  const mkPane = () => { const p = el('div', 'pane'); const chk = el('div', 'checker'); const cam = el('div', 'cam'); const tag = el('span', 'ptag'); const zl = el('span', 'zoomlbl', '1.0×'); p.append(chk, cam, tag, zl); return {p, cam, tag, zl}; };
  const L = mkPane(), R = mkPane();
  const rightWrap = el('div', 'rightwrap'); const camW = el('div', 'cam'); rightWrap.appendChild(camW);
  const tagR2 = el('span', 'ptag r'); const divider = el('div', 'divider');
  L.p.append(rightWrap, tagR2, divider);
  host.append(L.p, R.p);
  const st = {z:1, x:0, y:0, split:0.5, mode:'side', flick:'left'};
  let rightNode = null;
  // Zoom resizes the camera box (the SVG re-renders at the new size, so it stays crisp at
  // any magnification); only the pan is a transform.
  const view = () => { const t = `translate(${st.x}px,${st.y}px)`; const sz = (st.z * 100) + '%'; for (const c of [L.cam, R.cam, camW]){ c.style.transform = t; c.style.width = sz; c.style.height = sz; } L.zl.textContent = R.zl.textContent = st.z.toFixed(1) + '×'; };
  const setSplit = f => { st.split = Math.min(1, Math.max(0, f)); const px = st.split * L.p.getBoundingClientRect().width; rightWrap.style.clipPath = `inset(0 0 0 ${px}px)`; divider.style.left = px + 'px'; };
  function layout(){
    host.classList.toggle('single', st.mode !== 'side');
    R.p.style.display = st.mode === 'side' ? '' : 'none';
    divider.style.display = st.mode === 'wipe' ? '' : 'none';
    rightWrap.style.display = st.mode === 'side' ? 'none' : '';
    tagR2.style.display = st.mode === 'wipe' ? '' : 'none';
    if (rightNode){ (st.mode === 'side' ? R.cam : camW).appendChild(rightNode); }
    if (st.mode === 'wipe'){ setSplit(st.split); L.cam.style.visibility = ''; rightWrap.style.visibility = ''; }
    else if (st.mode === 'flick'){ rightWrap.style.clipPath = 'none'; L.cam.style.visibility = st.flick === 'left' ? '' : 'hidden'; rightWrap.style.visibility = st.flick === 'right' ? '' : 'hidden'; L.tag.textContent = 'showing ' + (st.flick === 'left' ? L.tag.dataset.n : R.tag.dataset.n); }
    else { L.cam.style.visibility = ''; L.tag.textContent = L.tag.dataset.n || ''; }
  }
  let drag = null, onDiv = false;
  for (const P of [L.p, R.p]){
    P.addEventListener('wheel', ev => { ev.preventDefault(); const r = P.getBoundingClientRect(), mx = ev.clientX - r.left, my = ev.clientY - r.top; const f = Math.exp(-ev.deltaY * 0.0015), nz = Math.min(40, Math.max(1, st.z * f)), k = nz / st.z; st.x = mx - (mx - st.x) * k; st.y = my - (my - st.y) * k; st.z = nz; view(); }, {passive:false});
    P.addEventListener('pointerdown', ev => { onDiv = !!ev.target.closest('.divider'); drag = [ev.clientX - st.x, ev.clientY - st.y]; P.setPointerCapture(ev.pointerId); });
    P.addEventListener('pointermove', ev => { if (!drag) return; if (onDiv){ const r = L.p.getBoundingClientRect(); setSplit((ev.clientX - r.left) / r.width); return; } st.x = ev.clientX - drag[0]; st.y = ev.clientY - drag[1]; view(); });
    const up = () => { drag = null; onDiv = false; }; P.addEventListener('pointerup', up); P.addEventListener('pointercancel', up);
    P.addEventListener('dblclick', () => { st.z = 1; st.x = 0; st.y = 0; view(); });
  }
  window.addEventListener('resize', () => { if (st.mode === 'wipe') setSplit(st.split); });
  layout(); view();
  return {
    setLeft(node, label){ L.cam.innerHTML = ''; if (node) L.cam.appendChild(node); L.tag.dataset.n = label || ''; L.tag.textContent = label || ''; },
    setRight(node, label){ rightNode = node; R.cam.innerHTML = ''; camW.innerHTML = ''; if (node) (st.mode === 'side' ? R.cam : camW).appendChild(node); R.tag.dataset.n = label || ''; R.tag.textContent = label || ''; tagR2.textContent = label || ''; layout(); },
    setMode(m){ st.mode = m; layout(); },
    flick(side){ st.flick = side; if (st.mode === 'flick') layout(); },
    zoom(z){ const r = L.p.getBoundingClientRect(); st.x = (r.width - r.width*z)/2; st.y = (r.height - r.height*z)/2; st.z = z; view(); },
  };
}
function seg(items, on){
  const s = el('div', 'seg');
  for (const [key, label, pressed] of items){ const b = el('button', '', label); b.dataset.k = key; b.setAttribute('aria-pressed', !!pressed); b.addEventListener('click', () => { for (const o of s.children) o.setAttribute('aria-pressed','false'); b.setAttribute('aria-pressed','true'); on(key); }); s.appendChild(b); }
  return s;
}
// Space flicks the gallery while the pointer is over it.
let hot = null;
document.addEventListener('keydown', e => { if (e.code === 'Space' && hot && !e.repeat){ e.preventDefault(); hot.flick('right'); } });
document.addEventListener('keyup', e => { if (e.code === 'Space' && hot) hot.flick('left'); });

// ---------------------------------------------------------------- showcase + results
// Every number below is read from showcase.json, which tools/showcase_data.py writes: Inkvec
// traced afresh by the build named in it, the other engines' traces and scores from their
// recorded runs. A case's raster and SVGs are in showcase/<key>.json, fetched when opened.
const SHORT = {"inkvec": "Inkvec", "vtracer-1.0-simplify": "VTracer 1.0, best flags", "trazor-auto": "Trazor", "vtracer-1.0-default": "VTracer 1.0", "vtracer-default": "VTracer 0.6"};
async function load(){
  let d;
  try { d = await (await fetch('showcase.json')).json(); } catch (e) { $("showlede").textContent = 'The showcase data could not be loaded.'; return; }
  gallery(d); results(d);
}
const caseData = new Map();
function fetchCase(key){
  if (!caseData.has(key)) caseData.set(key, fetch(`showcase/${key}.json`).then(r => r.json()));
  return caseData.get(key);
}
function gallery(d){
  const v = viewer($("galview"));
  $("galview").addEventListener('pointerenter', () => hot = v);
  $("galview").addEventListener('pointerleave', () => hot = null);
  let cur = d.sets[0].cases[0], other = 'inkvec', layer = 'fill', layers = null, token = 0;
  const tiles = new Map();
  const apply = async () => {
    const c = cur, mine = ++token;
    for (const [key, b] of tiles) b.setAttribute('aria-pressed', String(key === c.key));
    const isBrand = c.what.includes("brand") || c.key.startsWith("brand");
    $("galcap").innerHTML = `<b>${esc(c.label)}</b> &middot; ${esc(c.what)}` + (isBrand ? ` <span style="color:var(--faint);font-size:11px" title="Nominative benchmark demonstration. All trademarks belong to their respective owners.">(nominative benchmark)</span>` : '');
    const m = c.m.inkvec, w = c.m[other];
    $("galchips").innerHTML = `<span class="chip win">Inkvec dE00 <b>${fmt(m.de1024,3)}</b></span><span class="chip win"><b>${m.paths}</b> paths · <b>${m.coordinates}</b> coordinates · <b>${(m.bytes/1024).toFixed(1)} KB</b></span>` +
      (other === 'inkvec' ? '' : `<span class="chip vt">${esc(SHORT[other])} dE00 <b>${fmt(w.de1024,3)}</b></span><span class="chip vt"><b>${w.paths}</b> paths · <b>${w.coordinates}</b> coordinates · <b>${(w.bytes/1024).toFixed(1)} KB</b></span>`) +
      `<span class="chip vt">the artist's file: <b>${c.artist.paths}</b> paths · <b>${c.artist.coordinates}</b> coordinates</span>`;
    const body = await fetchCase(c.key);
    if (mine !== token) return;
    const ours = vectorLayer(body.svg.inkvec);
    const right = other === 'inkvec' ? ours : vectorLayer(body.svg[other]);
    layers = other === 'inkvec' ? [ours] : [ours, right];
    for (const x of layers) x.set(layer);
    if (other === 'inkvec'){ v.setLeft(imgLayer(body.input), 'raster'); v.setRight(ours.root, `inkvec · ${ours.anchors} anchors`); }
    else { v.setLeft(ours.root, `inkvec · ${ours.anchors} anchors`); v.setRight(right.root, `${SHORT[other]} · ${right.anchors} anchors`); }
  };
  // Every set in one panel that scrolls inside itself; thumbnails come with the index, a
  // case's pictures only when it is opened.
  const panel = $("cases"), order = [];
  new ResizeObserver(() => { const h = $("galview").getBoundingClientRect().height; if (h > 200) panel.style.height = h + 'px'; }).observe($("galview"));
  const pick = (c, focus) => {
    cur = c; apply();
    const b = tiles.get(c.key);
    // Scroll the panel, never the page: the selected case stays in view inside the list.
    const pr = panel.getBoundingClientRect(), br = b.getBoundingClientRect(), head = 34;
    if (br.top < pr.top + head) panel.scrollTop -= pr.top + head - br.top;
    else if (br.bottom > pr.bottom) panel.scrollTop += br.bottom - pr.bottom + 6;
    if (br.left < pr.left) panel.scrollLeft -= pr.left - br.left + 30; else if (br.right > pr.right) panel.scrollLeft += br.right - pr.right + 6;
    if (focus) b.focus({preventScroll: true});
  };
  panel.addEventListener('keydown', e => {
    const at = order.findIndex(c => c.key === cur.key), cols = getComputedStyle(panel).display === 'flex' ? 1 : 3;
    const step = {ArrowDown: cols, ArrowUp: -cols, ArrowRight: 1, ArrowLeft: -1, Home: -at, End: order.length - 1 - at}[e.key];
    if (step === undefined) return;
    e.preventDefault();
    pick(order[Math.min(order.length - 1, Math.max(0, at + step))], true);
  });
  for (const s of d.sets){
    $("cases").append(el('div', 'sethead', `${esc(s.label)}<span>${s.cases.length}</span>`));
    const grid = el('div', 'tiles');
    for (const c of s.cases){
      const b = el('button', 'case', `<span class="th"><img src="${c.thumb}" alt="" loading="lazy"></span><span class="nm">${esc(c.label)}</span>`);
      b.title = `${c.label} · ${c.what}`;
      b.dataset.key = c.key;
      b.addEventListener('click', () => pick(c, false));
      tiles.set(c.key, b); order.push(c);
      grid.appendChild(b);
    }
    $("cases").appendChild(grid);
  }
  const engines = d.gallery_engines;
  const t = $("galtools");
  t.append(el('span', 'lbl', 'compare'), seg([['inkvec', 'raster · inkvec', true], ...engines.filter(e => e !== 'inkvec').map(e => [e, 'inkvec · ' + SHORT[e]])], k => { other = k; apply(); }));
  t.append(el('span', 'lbl', 'view'), seg([['side','Side by side',true],['wipe','Wipe'],['flick','A / B']], m => v.setMode(m)));
  const fl = el('button', '', 'Flick'); fl.title = 'Hold to show the other side (or hold Space over the viewer)';
  fl.addEventListener('pointerdown', () => v.flick('right')); fl.addEventListener('pointerup', () => v.flick('left')); fl.addEventListener('pointerleave', () => v.flick('left'));
  t.append(fl);
  t.append(el('span', 'lbl', 'show'), seg([['fill','Fill',true],['wire','Wireframe'],['anchor','Anchors'],['handle','Handles']], L => { layer = L; for (const x of layers || []) x.set(L); }));
  const z = el('div', 'seg'); for (const k of [1, 4, 12]){ const b = el('button', '', k + '×'); b.addEventListener('click', () => v.zoom(k)); z.appendChild(b); } t.append(el('span', 'lbl', 'zoom'), z);
  t.append(el('span', 'legend', '<span><i style="background:var(--anchor)"></i>anchor</span><span><i style="background:var(--handle)"></i>control point &amp; tangent</span>'));
  apply();
}
const table = (rows, caption) => `<table><caption>${caption}</caption><thead><tr><th>engine</th><th>mean dE00</th><th>median dE00</th><th>DISTS</th><th>DINO</th><th>geometry</th><th>coords</th><th>seconds</th></tr></thead><tbody>` +
  rows.map(r => `<tr class="${r.id === 'inkvec' ? 'win' : ''}"><td>${esc(r.name)}</td><td class="mono">${fmt(r.de_mean,3)}</td><td class="mono">${fmt(r.de_median,3)}</td><td class="mono">${fmt(r.dists,4)}</td><td class="mono">${fmt(r.dino,4)}</td><td class="mono">${fmt(r.geometry_mean,2)}&times;</td><td class="mono">${Math.round(r.coordinates)}</td><td class="mono">${fmt(r.seconds_median,2)}</td></tr>`).join('') +
  `</tbody></table>`;
function results(d){
  const us = d.engines.find(e => e.id === 'inkvec'), tz = d.engines.find(e => e.id === 'trazor-auto'), vt = d.engines.find(e => e.id === 'vtracer-default');
  const wins = d.best_de_wins.inkvec || 0, b = d.brands, bwins = b.best_de_wins.inkvec || 0, cp = d.corpus, cwins = cp.best_de_wins.inkvec || 0;
  $("versuslede").innerHTML = `${d.cases} benchmark cases &mdash; real icons and emoji across ${d.families.filter(f => f !== 'brands' && f !== 'synthetic').length} families, synthetic probes and real brand logos, the selection fixed from the seed <code>${esc(d.seed)}</code> &mdash; each rendered from its source SVG at ${d.size}&nbsp;px, traced by every engine from that raster and scored against the render: CIEDE2000 colour difference, DISTS and DINOv3 perceptual similarity, and geometry against the artist's own file (1.00&times; is exactly the artist's number of parameters). Inkvec had the lowest colour difference on <b>${wins} of ${d.cases}</b>; in the gallery's other sets, on <b>${bwins} of ${b.cases}</b> brand logos and <b>${cwins} of ${cp.cases}</b> more icons and emoji. VTracer is the widely used open-source tracer and the fastest thing here by far; that trade-off is shown too.`;
  $("bignums").innerHTML = [
    ['colour difference, dE00', `${fmt(us.de_mean,3)} <small>mean</small>`, `median ${fmt(us.de_median,3)}; ${(tz.de_mean/us.de_mean).toFixed(1)}&times; lower than Trazor, ${(vt.de_mean/us.de_mean).toFixed(0)}&times; lower than VTracer (under 1 is invisible)`],
    ['geometry vs the artist', `${fmt(us.geometry_mean,2)}&times; <small>mean</small>`, `median ${fmt(us.geometry_median,2)}&times;; Trazor ${fmt(tz.geometry_mean,2)}&times;, VTracer ${fmt(vt.geometry_mean,2)}&times; (1.00&times; is the artist's own file)`],
    ['DINOv3 similarity', `${fmt(us.dino,4)}`, `1 is identical; DISTS ${fmt(us.dists,4)} (Trazor ${fmt(tz.dists,4)}, VTracer ${fmt(vt.dists,4)}; lower is better)`],
    ['seconds per case', `${fmt(us.seconds_median,2)} <small>median</small>`, `native command line; VTracer ${fmt(vt.seconds_median,2)} s, Trazor ${fmt(tz.seconds_median,2)} s`],
  ].map(([k, val, sub]) => `<div class="bignum"><div class="k">${k}</div><div class="v">${val}</div><div class="s">${sub}</div></div>`).join('');
  $("bars").innerHTML = table(d.engines, `${d.cases} benchmark cases, re-run at ${d.size} px for this page`) + table(b.engines, `${b.cases} brand logos (the gallery's brand set)`) + table(cp.engines, `${cp.cases} more icons and emoji (the gallery's third set)`);
  $("vtnote").innerHTML = `Means over the cases, except seconds (median, measured on a machine doing other work at the same time; treat them as approximate). Every case is rendered at ${d.size}&nbsp;px, square, on white with a 4% margin, traced by every engine from that raster and scored at 1024&nbsp;px; the pictures above and these tables are the same traces. Inkvec was traced by the current build (<code>${esc(d.inkvec.git)}</code>, ${esc(d.traced)}); the other engines have not changed, and their traces were made once at this size. The benchmark of record is the ${esc(d.date)} run at 512&nbsp;px (<code>out/${esc(d.run)}/results.json</code>, <code>bench/crosscompare_competitors.py</code>, the README's results); this page re-runs its 21 cases at ${d.size}&nbsp;px, where a logo's fine detail survives, so its numbers differ from the README's. The brand logos are real marks from an external dataset, not part of the repository: the twenty this page showed before, and more picked by the seed <code>${esc(d.pick_seed)}</code> alone (hash order, a quota per kind: gradients, thin lines, multi-colour, flat), not by how any engine traces them. The third set is more files from the repository's icon and emoji corpora, picked the same way. All are rendered and scored as the benchmark is. All of it is computed by <code>tools/showcase_data.py</code>. Method and every case: the <a href="https://github.com/logolabs/inkvec#results" target="_blank" rel="noopener noreferrer">README</a>.`;
}
load();
</script>
</body>
</html>