Gemma 4 multimodal WebGPU detection Space

.gitattributes

@@ -0,0 +1,36 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+*.tsbuildinfo
+.claude/
+CLAUDE.md

README.md

@@ -0,0 +1,22 @@
+---
+title: Gemma 4 WebGPU
+emoji: 💎
+colorFrom: indigo
+colorTo: blue
+sdk: static
+pinned: false
+app_file: dist/index.html
+short_description: Gemma 4 multimodal detection in your browser
+models:
+  - onnx-community/gemma-4-E2B-it-ONNX
+---
+
+# Gemma 4 Multimodal WebGPU
+
+Run [Gemma 4 E2B](https://huggingface.co/onnx-community/gemma-4-E2B-it-ONNX) directly in your browser with WebGPU acceleration via [Transformers.js](https://github.com/huggingface/transformers.js).
+
+Upload an image or pick a COCO example, and Gemma 4 will detect and describe objects with bounding box overlays.
+
+- **100% Private**: All inference runs locally in your browser
+- **No Server**: Static Space, no backend required
+- **WebGPU**: Hardware-accelerated multimodal AI

dist/assets/index-DLpffQqr.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-300:oklch(87.9% .169 91.605);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-600:oklch(66.6% .179 58.318);--color-amber-800:oklch(47.3% .137 46.201);--color-amber-900:oklch(41.4% .112 45.904);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--container-md:28rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wide:.025em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}html,body{color:#fff;background:#0a0a0a;height:100%;font-family:Google Sans,Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;overflow:hidden}#root{height:100%}*{scrollbar-width:thin;scrollbar-color:transparent transparent}:hover{scrollbar-color:#ffffff26 transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:0 0;border-radius:3px}:hover::-webkit-scrollbar-thumb{background:#fff3}:hover::-webkit-scrollbar-thumb:hover{background:#ffffff59}}@layer components;@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.end{inset-inline-end:var(--spacing)}.top-0{top:calc(var(--spacing) * 0)}.top-2{top:calc(var(--spacing) * 2)}.right-2{right:calc(var(--spacing) * 2)}.left-0{left:calc(var(--spacing) * 0)}.z-30{z-index:30}.mx-auto{margin-inline:auto}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.mb-10{margin-bottom:calc(var(--spacing) * 10)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.aspect-square{aspect-ratio:1}.h-1{height:calc(var(--spacing) * 1)}.h-2{height:calc(var(--spacing) * 2)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-16{height:calc(var(--spacing) * 16)}.h-full{height:100%}.h-screen{height:100vh}.max-h-\[200px\]{max-height:200px}.max-h-\[400px\]{max-height:400px}.max-h-\[500px\]{max-height:500px}.w-2{width:calc(var(--spacing) * 2)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-7{width:calc(var(--spacing) * 7)}.w-8{width:calc(var(--spacing) * 8)}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-full{width:100%}.w-screen{width:100vw}.max-w-4xl{max-width:var(--container-4xl)}.max-w-md{max-width:var(--container-md)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize{resize:both}.resize-none{resize:none}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[\#1a73e8\]{border-color:#1a73e8}.border-\[\#1a73e8\]\/40{border-color:oklab(57.3697% -.0409326 -.190249/.4)}.border-amber-500\/40{border-color:#f99c0066}@supports (color:color-mix(in lab, red, red)){.border-amber-500\/40{border-color:color-mix(in oklab, var(--color-amber-500) 40%, transparent)}}.border-white\/10{border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.border-white\/10{border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-\[\#0a0a0a\]{background-color:#0a0a0a}.bg-\[\#1a73e8\]{background-color:#1a73e8}.bg-\[\#1a73e8\]\/10{background-color:oklab(57.3697% -.0409326 -.190249/.1)}.bg-\[\#1a73e8\]\/15{background-color:oklab(57.3697% -.0409326 -.190249/.15)}.bg-amber-500\/10{background-color:#f99c001a}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/10{background-color:color-mix(in oklab, var(--color-amber-500) 10%, transparent)}}.bg-amber-500\/20{background-color:#f99c0033}@supports (color:color-mix(in lab, red, red)){.bg-amber-500\/20{background-color:color-mix(in oklab, var(--color-amber-500) 20%, transparent)}}.bg-black{background-color:var(--color-black)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab, red, red)){.bg-black\/40{background-color:color-mix(in oklab, var(--color-black) 40%, transparent)}}.bg-black\/60{background-color:#0009}@supports (color:color-mix(in lab, red, red)){.bg-black\/60{background-color:color-mix(in oklab, var(--color-black) 60%, transparent)}}.bg-red-500\/10{background-color:#fb2c361a}@supports (color:color-mix(in lab, red, red)){.bg-red-500\/10{background-color:color-mix(in oklab, var(--color-red-500) 10%, transparent)}}.bg-white\/5{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.bg-white\/5{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.bg-white\/10{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.bg-white\/10{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-black\/70{--tw-gradient-from:#000000b3}@supports (color:color-mix(in lab, red, red)){.from-black\/70{--tw-gradient-from:color-mix(in oklab, var(--color-black) 70%, transparent)}}.from-black\/70{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-10{padding:calc(var(--spacing) * 10)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.pb-10{padding-bottom:calc(var(--spacing) * 10)}.text-center{text-align:center}.font-mono{font-family:var(--font-mono)}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.break-words{overflow-wrap:break-word}.whitespace-pre-wrap{white-space:pre-wrap}.text-\[\#1a73e8\]{color:#1a73e8}.text-\[\#8bb4f0\]{color:#8bb4f0}.text-amber-200{color:var(--color-amber-200)}.text-amber-200\/70{color:#fee685b3}@supports (color:color-mix(in lab, red, red)){.text-amber-200\/70{color:color-mix(in oklab, var(--color-amber-200) 70%, transparent)}}.text-amber-400{color:var(--color-amber-400)}.text-red-400{color:var(--color-red-400)}.text-white{color:var(--color-white)}.text-white\/40{color:#fff6}@supports (color:color-mix(in lab, red, red)){.text-white\/40{color:color-mix(in oklab, var(--color-white) 40%, transparent)}}.text-white\/50{color:#ffffff80}@supports (color:color-mix(in lab, red, red)){.text-white\/50{color:color-mix(in oklab, var(--color-white) 50%, transparent)}}.text-white\/60{color:#fff9}@supports (color:color-mix(in lab, red, red)){.text-white\/60{color:color-mix(in oklab, var(--color-white) 60%, transparent)}}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab, red, red)){.text-white\/80{color:color-mix(in oklab, var(--color-white) 80%, transparent)}}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.capitalize{text-transform:capitalize}.placeholder-white\/30::placeholder{color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.placeholder-white\/30::placeholder{color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.opacity-0{opacity:0}.opacity-50{opacity:.5}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow\!{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-\[0_1px_6px_rgba\(0\,0\,0\,0\.5\)\]{--tw-drop-shadow-size:drop-shadow(0 1px 6px var(--tw-drop-shadow-color,#00000080));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.drop-shadow-\[0_2px_12px_rgba\(0\,0\,0\,0\.5\)\]{--tw-drop-shadow-size:drop-shadow(0 2px 12px var(--tw-drop-shadow-color,#00000080));--tw-drop-shadow:var(--tw-drop-shadow-size);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.duration-600{--tw-duration:.6s;transition-duration:.6s}.duration-700{--tw-duration:.7s;transition-duration:.7s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:scale-110:is(:where(.group):hover *){--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.hover\:border-\[\#1a73e8\]\/60:hover{border-color:oklab(57.3697% -.0409326 -.190249/.6)}.hover\:border-white\/30:hover{border-color:#ffffff4d}@supports (color:color-mix(in lab, red, red)){.hover\:border-white\/30:hover{border-color:color-mix(in oklab, var(--color-white) 30%, transparent)}}.hover\:bg-red-500\/20:hover{background-color:#fb2c3633}@supports (color:color-mix(in lab, red, red)){.hover\:bg-red-500\/20:hover{background-color:color-mix(in oklab, var(--color-red-500) 20%, transparent)}}.hover\:bg-red-500\/80:hover{background-color:#fb2c36cc}@supports (color:color-mix(in lab, red, red)){.hover\:bg-red-500\/80:hover{background-color:color-mix(in oklab, var(--color-red-500) 80%, transparent)}}.hover\:bg-white\/5:hover{background-color:#ffffff0d}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/5:hover{background-color:color-mix(in oklab, var(--color-white) 5%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-\[\#1a73e8\]\/20:hover{--tw-shadow-color:#1a73e833}@supports (color:color-mix(in lab, red, red)){.hover\:shadow-\[\#1a73e8\]\/20:hover{--tw-shadow-color:color-mix(in oklab, oklab(57.3697% -.0409326 -.190249/.2) var(--tw-shadow-alpha), transparent)}}}.focus\:border-\[\#1a73e8\]:focus{border-color:#1a73e8}.focus\:ring-1:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-\[\#1a73e8\]:focus{--tw-ring-color:#1a73e8}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:opacity-50:disabled{opacity:.5}@media (width>=40rem){.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:p-5{padding:calc(var(--spacing) * 5)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}}}@keyframes pulse-gentle{0%,to{opacity:.6}50%{opacity:1}}.animate-pulse-gentle{animation:2.5s ease-in-out infinite pulse-gentle}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.animate-fade-in{animation:.5s ease-out both fade-in}@keyframes shimmer-detection{0%{background-position:200% 0}to{background-position:-200% 0}}.detection-shimmer{-webkit-text-fill-color:transparent;background:linear-gradient(105deg,#8c8c94 0% 40%,#1a73e8 50%,#8c8c94 60% 100%) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;animation:2s ease-in-out infinite shimmer-detection}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@keyframes spin{to{transform:rotate(360deg)}}

dist/assets/ort-wasm-simd-threaded.asyncify-CtKKja6V.wasm

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1d6ee4ff60d7f0e6b6efa34469157d3bdcbe2f3b0dbcea2a645bb41361a85973
+size 23543806

dist/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
+    <title>Gemma 4 | In-Browser Multimodal Detection</title>
+    <script type="module" crossorigin src="/assets/index-WzmSvmGf.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DLpffQqr.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&display=swap" rel="stylesheet" />
+    <title>Gemma 4 | In-Browser Multimodal Detection</title>
+    <script type="module" src="/src/main.tsx"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package.json

@@ -0,0 +1,30 @@
+{
+  "name": "gemma4-webgpu",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@huggingface/transformers": "^4.0.0-next.3",
+    "@tailwindcss/vite": "^4.1.18",
+    "lucide-react": "^0.563.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwindcss": "^4.1.18"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "@webgpu/types": "^0.1.69",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0-beta.13"
+  },
+  "overrides": {
+    "vite": "^8.0.0-beta.13"
+  }
+}

src/App.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { GemmaIntro } from "./components/GemmaIntro";
+import { LoadingScreen } from "./components/LoadingScreen";
+import { DetectionApp } from "./components/DetectionApp";
+import { useLLM } from "./hooks/useLLM";
+
+function App() {
+  const { status, loadModel } = useLLM();
+
+  const [stage, setStage] = useState<"intro" | "loading" | "app">("intro");
+
+  const isReady = status.state === "ready";
+
+  // Move from loading → app once ready
+  useEffect(() => {
+    if (stage === "loading" && isReady) {
+      setStage("app");
+    }
+  }, [stage, isReady]);
+
+  const handleEnterFromIntro = () => {
+    setStage("loading");
+    loadModel();
+  };
+
+  return (
+    <div className="relative h-screen w-screen bg-[#0a0a0a] text-white">
+      {stage === "intro" && <GemmaIntro onEnter={handleEnterFromIntro} />}
+
+      {stage === "loading" && <LoadingScreen status={status} />}
+
+      {stage === "app" && <DetectionApp />}
+    </div>
+  );
+}
+
+export default App;

src/components/DetectionApp.tsx

@@ -0,0 +1,160 @@
+import { useState, useCallback } from "react";
+import { RotateCcw, AlertTriangle } from "lucide-react";
+import { useLLM } from "../hooks/useLLM";
+import { ImageUpload } from "./ImageUpload";
+import { ExampleGallery } from "./ExampleGallery";
+import { DetectionOverlay } from "./DetectionOverlay";
+import { ResultPanel } from "./ResultPanel";
+import { urlToDataUrl } from "../utils/image-utils";
+import { DEFAULT_DETECTION_PROMPT } from "../utils/coco-examples";
+
+export function DetectionApp() {
+  const { detect, isGenerating, tps, dtype, result, stop } = useLLM();
+  const [currentImage, setCurrentImage] = useState<string | null>(null);
+  const [prompt, setPrompt] = useState(DEFAULT_DETECTION_PROMPT);
+  const [loading, setLoading] = useState(false);
+
+  const handleImageSelect = useCallback(
+    (dataUrl: string) => {
+      if (!dataUrl) {
+        setCurrentImage(null);
+        return;
+      }
+      setCurrentImage(dataUrl);
+      detect(dataUrl, prompt);
+    },
+    [detect, prompt],
+  );
+
+  const handleExampleSelect = useCallback(
+    async (url: string, examplePrompt: string) => {
+      setLoading(true);
+      try {
+        const dataUrl = await urlToDataUrl(url);
+        setCurrentImage(dataUrl);
+        setPrompt(examplePrompt);
+        detect(dataUrl, examplePrompt);
+      } catch (err) {
+        console.error("[Gemma4] Failed to load example:", err);
+        alert(`Failed to load example image (likely CORS):\n${err instanceof Error ? err.message : String(err)}`);
+      }
+      setLoading(false);
+    },
+    [detect],
+  );
+
+  const handleRetry = useCallback(() => {
+    if (currentImage) {
+      detect(currentImage, prompt);
+    }
+  }, [currentImage, prompt, detect]);
+
+  return (
+    <div className="flex flex-col h-full bg-[#0a0a0a] text-white animate-fade-in">
+      {/* Header */}
+      <header className="flex items-center justify-between px-4 py-3 sm:px-6 border-b border-white/10">
+        <span className="text-sm font-medium tracking-tight">Gemma 4</span>
+
+        <div className="flex items-center gap-2">
+          {isGenerating && (
+            <button
+              onClick={stop}
+              className="px-3 py-1.5 text-xs font-medium rounded-lg bg-red-500/10 text-red-400 hover:bg-red-500/20 transition-colors cursor-pointer"
+            >
+              Stop
+            </button>
+          )}
+          {currentImage && !isGenerating && (
+            <button
+              onClick={handleRetry}
+              className="p-1.5 rounded-lg hover:bg-white/5 transition-colors text-white/60 hover:text-white cursor-pointer"
+              title="Retry detection"
+            >
+              <RotateCcw className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </header>
+
+      {/* Main content */}
+      <div className="flex-1 overflow-y-auto p-4 sm:p-6">
+        <div className="max-w-4xl mx-auto space-y-6">
+          {/* q4 slow-path warning */}
+          {dtype === "q4" && (
+            <div className="flex items-start gap-3 rounded-xl border border-amber-500/40 bg-amber-500/10 p-3 text-sm text-amber-200">
+              <AlertTriangle className="h-5 w-5 shrink-0 mt-0.5 text-amber-400" />
+              <div>
+                <p className="font-medium">Running on q4 (slow path) — inference may fail with OOM on 8GB GPUs.</p>
+                <p className="mt-1 text-amber-200/70 text-xs leading-relaxed">
+                  For faster, stabler inference, enable{" "}
+                  <code className="font-mono bg-amber-500/20 px-1 rounded">chrome://flags/#enable-unsafe-webgpu</code> and{" "}
+                  <code className="font-mono bg-amber-500/20 px-1 rounded">chrome://flags/#enable-vulkan</code>, then fully restart Chrome.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {/* Prompt input */}
+          <div>
+            <label className="block text-sm font-medium text-white/60 mb-2">
+              Prompt
+            </label>
+            <textarea
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              rows={2}
+              disabled={isGenerating}
+              className="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-white/30 focus:border-[#1a73e8] focus:outline-none focus:ring-1 focus:ring-[#1a73e8] resize-none disabled:opacity-50"
+              placeholder="Enter your prompt..."
+            />
+          </div>
+
+          {/* Image area */}
+          {currentImage ? (
+            <div className="space-y-4">
+              {result && result.detections.length > 0 ? (
+                <DetectionOverlay
+                  imageUrl={currentImage}
+                  detections={result.detections}
+                />
+              ) : (
+                <img
+                  src={currentImage}
+                  alt="Uploaded"
+                  className="w-full max-h-[500px] object-contain rounded-xl border border-white/10"
+                />
+              )}
+
+              <ResultPanel
+                result={result}
+                isGenerating={isGenerating}
+                tps={tps}
+              />
+
+              {!isGenerating && (
+                <button
+                  onClick={() => setCurrentImage(null)}
+                  className="w-full py-3 rounded-xl border border-white/10 text-sm font-medium text-white/60 hover:text-white hover:border-white/30 transition-colors cursor-pointer"
+                >
+                  Try another image
+                </button>
+              )}
+            </div>
+          ) : (
+            <div className="space-y-6">
+              <ImageUpload
+                onImageSelect={handleImageSelect}
+                currentImage={null}
+                disabled={isGenerating || loading}
+              />
+              <ExampleGallery
+                onSelect={handleExampleSelect}
+                disabled={isGenerating || loading}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/DetectionOverlay.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useRef } from "react";
+import type { Detection } from "../hooks/LLMContext";
+import { toPixelCoords, DETECTION_COLORS } from "../utils/detection-parser";
+
+interface DetectionOverlayProps {
+  imageUrl: string;
+  detections: Detection[];
+}
+
+export function DetectionOverlay({ imageUrl, detections }: DetectionOverlayProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    const img = imgRef.current;
+    if (!canvas || !img || !img.complete) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Match canvas size to displayed image size
+    const rect = img.getBoundingClientRect();
+    canvas.width = rect.width;
+    canvas.height = rect.height;
+
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Build unique label map for consistent colors
+    const labelSet = [...new Set(detections.map((d) => d.label))];
+
+    for (const det of detections) {
+      const [x1, y1, x2, y2] = toPixelCoords(
+        det.box_2d,
+        canvas.width,
+        canvas.height,
+      );
+      const colorIdx = labelSet.indexOf(det.label);
+      const color = DETECTION_COLORS[colorIdx % DETECTION_COLORS.length];
+
+      // Draw box
+      ctx.strokeStyle = color;
+      ctx.lineWidth = 2.5;
+      ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+
+      // Draw label background
+      ctx.font = "bold 13px 'Google Sans', sans-serif";
+      const textWidth = ctx.measureText(det.label).width;
+      const labelHeight = 20;
+      const labelY = Math.max(0, y1 - labelHeight);
+
+      ctx.fillStyle = color;
+      ctx.beginPath();
+      ctx.roundRect(x1, labelY, textWidth + 10, labelHeight, 4);
+      ctx.fill();
+
+      // Draw label text
+      ctx.fillStyle = "#ffffff";
+      ctx.fillText(det.label, x1 + 5, labelY + 14);
+    }
+  }, [detections]);
+
+  const handleImageLoad = () => {
+    // Re-trigger detection rendering once image loads
+    if (detections.length > 0) {
+      const canvas = canvasRef.current;
+      const img = imgRef.current;
+      if (!canvas || !img) return;
+
+      const ctx = canvas.getContext("2d");
+      if (!ctx) return;
+
+      const rect = img.getBoundingClientRect();
+      canvas.width = rect.width;
+      canvas.height = rect.height;
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const labelSet = [...new Set(detections.map((d) => d.label))];
+
+      for (const det of detections) {
+        const [x1, y1, x2, y2] = toPixelCoords(
+          det.box_2d,
+          canvas.width,
+          canvas.height,
+        );
+        const colorIdx = labelSet.indexOf(det.label);
+        const color = DETECTION_COLORS[colorIdx % DETECTION_COLORS.length];
+
+        ctx.strokeStyle = color;
+        ctx.lineWidth = 2.5;
+        ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+
+        ctx.font = "bold 13px 'Google Sans', sans-serif";
+        const textWidth = ctx.measureText(det.label).width;
+        const labelHeight = 20;
+        const labelY = Math.max(0, y1 - labelHeight);
+
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.roundRect(x1, labelY, textWidth + 10, labelHeight, 4);
+        ctx.fill();
+
+        ctx.fillStyle = "#ffffff";
+        ctx.fillText(det.label, x1 + 5, labelY + 14);
+      }
+    }
+  };
+
+  return (
+    <div className="relative inline-block w-full">
+      <img
+        ref={imgRef}
+        src={imageUrl}
+        alt="Detection result"
+        className="w-full max-h-[500px] object-contain rounded-xl"
+        onLoad={handleImageLoad}
+      />
+      <canvas
+        ref={canvasRef}
+        className="absolute top-0 left-0 w-full h-full pointer-events-none"
+        style={{ objectFit: "contain" }}
+      />
+    </div>
+  );
+}

src/components/ExampleGallery.tsx

@@ -0,0 +1,37 @@
+import { COCO_EXAMPLES } from "../utils/coco-examples";
+
+interface ExampleGalleryProps {
+  onSelect: (url: string, prompt: string) => void;
+  disabled?: boolean;
+}
+
+export function ExampleGallery({ onSelect, disabled }: ExampleGalleryProps) {
+  return (
+    <div className={disabled ? "opacity-50 pointer-events-none" : ""}>
+      <p className="text-sm font-medium text-white/60 mb-3">
+        Or try an example:
+      </p>
+      <div className="grid grid-cols-3 sm:grid-cols-6 gap-3">
+        {COCO_EXAMPLES.map((example) => (
+          <button
+            key={example.label}
+            onClick={() => onSelect(example.url, example.prompt)}
+            className="group relative overflow-hidden rounded-xl border border-white/10 bg-white/5 transition-all hover:border-[#1a73e8]/60 hover:shadow-lg hover:shadow-[#1a73e8]/20 cursor-pointer"
+          >
+            <div className="aspect-square overflow-hidden">
+              <img
+                src={example.url}
+                alt={example.label}
+                className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110"
+                loading="lazy"
+              />
+            </div>
+            <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2">
+              <span className="text-xs font-medium text-white">{example.label}</span>
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/GemmaIntro.tsx

@@ -0,0 +1,96 @@
+/**
+ * Liquid effect adapted from https://www.framer.com/@kevin-levron/
+ */
+import { useEffect, useRef, useCallback, useState } from "react";
+import LiquidBackground from "../utils/liquid1.min.js";
+
+type LiquidApp = ReturnType<typeof LiquidBackground>;
+
+interface GemmaIntroProps {
+  onEnter: () => void;
+}
+
+export function GemmaIntro({ onEnter }: GemmaIntroProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const appRef = useRef<LiquidApp | null>(null);
+  const [fading, setFading] = useState(false);
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    let disposed = false;
+
+    async function init() {
+      if (disposed || !canvasRef.current) return;
+
+      const app = LiquidBackground(canvasRef.current);
+      appRef.current = app;
+
+      app.loadImage("/gemma4.png");
+      app.liquidPlane.material.metalness = 0.82;
+      app.liquidPlane.material.roughness = 0.48;
+      app.liquidPlane.uniforms.displacementScale.value = 6;
+      app.setRain(false);
+
+      setTimeout(() => {
+        if (!disposed) setReady(true);
+      }, 300);
+    }
+
+    init();
+
+    return () => {
+      disposed = true;
+      if (appRef.current) {
+        appRef.current.dispose();
+        appRef.current = null;
+      }
+    };
+  }, []);
+
+  const handleClick = useCallback(() => {
+    if (fading) return;
+    setFading(true);
+    setTimeout(() => {
+      if (appRef.current) {
+        appRef.current.dispose();
+        appRef.current = null;
+      }
+      onEnter();
+    }, 600);
+  }, [fading, onEnter]);
+
+  return (
+    <div
+      className="absolute inset-0 z-30 cursor-pointer bg-black"
+      onClick={handleClick}
+    >
+      <canvas
+        ref={canvasRef}
+        className={`absolute inset-0 w-full h-full transition-opacity duration-700 ${
+          ready ? "opacity-100" : "opacity-0"
+        }`}
+      />
+
+      <div
+        className={`absolute inset-0 flex flex-col items-center justify-end transition-opacity duration-500 pb-10 ${
+          fading ? "opacity-0" : ready ? "opacity-100" : "opacity-0"
+        }`}
+      >
+        <h1 className="text-6xl sm:text-7xl font-bold tracking-tight select-none drop-shadow-[0_2px_12px_rgba(0,0,0,0.5)]">
+          <span className="text-white">Gemma 4</span>{" "}
+          <span className="text-white/90">WebGPU</span>
+        </h1>
+
+        <p className="mt-6 text-lg text-white/80 select-none animate-pulse-gentle drop-shadow-[0_1px_6px_rgba(0,0,0,0.5)]">
+          Click anywhere to start
+        </p>
+      </div>
+
+      <div
+        className={`absolute inset-0 bg-black transition-opacity duration-600 pointer-events-none ${
+          fading ? "opacity-100" : "opacity-0"
+        }`}
+      />
+    </div>
+  );
+}

src/components/ImageUpload.tsx

@@ -0,0 +1,123 @@
+import { useCallback, useRef, useState } from "react";
+import { Upload, ImageIcon, X } from "lucide-react";
+import { resizeImage } from "../utils/image-utils";
+
+interface ImageUploadProps {
+  onImageSelect: (dataUrl: string) => void;
+  currentImage: string | null;
+  disabled?: boolean;
+}
+
+export function ImageUpload({ onImageSelect, currentImage, disabled }: ImageUploadProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFile = useCallback(
+    async (file: File) => {
+      if (!file.type.startsWith("image/")) {
+        console.warn("[Gemma4] Ignoring non-image file:", file.type);
+        return;
+      }
+      try {
+        const dataUrl = await resizeImage(file);
+        onImageSelect(dataUrl);
+      } catch (err) {
+        console.error("[Gemma4] Failed to read image:", err);
+        alert(`Failed to read image: ${err instanceof Error ? err.message : String(err)}`);
+      }
+    },
+    [onImageSelect],
+  );
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
+      const file = e.dataTransfer.files[0];
+      if (file) handleFile(file);
+    },
+    [handleFile],
+  );
+
+  const handlePaste = useCallback(
+    (e: React.ClipboardEvent) => {
+      const items = e.clipboardData.items;
+      for (const item of items) {
+        if (item.type.startsWith("image/")) {
+          const file = item.getAsFile();
+          if (file) handleFile(file);
+          break;
+        }
+      }
+    },
+    [handleFile],
+  );
+
+  if (currentImage) {
+    return (
+      <div className="relative group">
+        <img
+          src={currentImage}
+          alt="Selected"
+          className="w-full max-h-[400px] object-contain rounded-xl border border-white/10"
+        />
+        {!disabled && (
+          <button
+            onClick={() => onImageSelect("")}
+            className="absolute top-2 right-2 p-1.5 rounded-lg bg-black/60 text-white/70 hover:text-white hover:bg-red-500/80 transition-colors opacity-0 group-hover:opacity-100"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onDragOver={(e) => {
+        e.preventDefault();
+        setIsDragging(true);
+      }}
+      onDragLeave={() => setIsDragging(false)}
+      onDrop={handleDrop}
+      onPaste={handlePaste}
+      tabIndex={0}
+      className={`flex flex-col items-center justify-center gap-4 rounded-2xl border-2 border-dashed p-10 transition-all cursor-pointer ${
+        isDragging
+          ? "border-[#1a73e8] bg-[#1a73e8]/10"
+          : "border-white/10 hover:border-white/30 bg-white/5"
+      } ${disabled ? "opacity-50 pointer-events-none" : ""}`}
+      onClick={() => fileInputRef.current?.click()}
+    >
+      <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#1a73e8]/10 border border-white/10">
+        {isDragging ? (
+          <Upload className="h-8 w-8 text-[#1a73e8]" />
+        ) : (
+          <ImageIcon className="h-8 w-8 text-[#1a73e8]" />
+        )}
+      </div>
+
+      <div className="text-center">
+        <p className="text-base font-medium text-white">
+          {isDragging ? "Drop image here" : "Upload an image"}
+        </p>
+        <p className="mt-1 text-sm text-white/60">
+          Drag & drop, click to browse, or paste from clipboard
+        </p>
+      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (file) handleFile(file);
+          e.target.value = "";
+        }}
+      />
+    </div>
+  );
+}

src/components/LoadingScreen.tsx

@@ -0,0 +1,73 @@
+import { Loader2 } from "lucide-react";
+import type { LoadingStatus } from "../hooks/LLMContext";
+
+interface LoadingScreenProps {
+  status: LoadingStatus;
+}
+
+export function LoadingScreen({ status }: LoadingScreenProps) {
+  const progress =
+    status.state === "ready"
+      ? 100
+      : status.state === "loading" && typeof status.progress === "number"
+      ? status.progress
+      : 0;
+
+  const message =
+    status.state === "loading"
+      ? status.message ?? "Loading model..."
+      : status.state === "error"
+      ? "Failed to load model"
+      : "Initializing...";
+
+  return (
+    <div className="absolute inset-0 flex items-center justify-center bg-[#0a0a0a] text-white animate-fade-in">
+      <div className="w-full max-w-md px-6 flex flex-col items-center">
+        <div className="mb-10 flex items-center gap-3">
+          <div className="w-9 h-9 rounded-lg bg-[#1a73e8] flex items-center justify-center">
+            <svg viewBox="0 0 100 100" className="w-5 h-5">
+              <polygon
+                points="50,10 85,35 72,85 28,85 15,35"
+                fill="rgba(255,255,255,0.95)"
+              />
+              <polygon
+                points="50,10 62,35 50,85 38,35"
+                fill="rgba(255,255,255,0.55)"
+              />
+            </svg>
+          </div>
+          <span className="text-lg font-medium tracking-tight">Gemma 4</span>
+        </div>
+
+        {status.state !== "error" && (
+          <Loader2 className="h-8 w-8 animate-spin text-[#1a73e8] mb-4" />
+        )}
+
+        <p
+          className={`text-sm tracking-wide ${
+            status.state === "error"
+              ? "text-red-400 font-medium"
+              : "text-white/70"
+          }`}
+        >
+          {message}
+        </p>
+
+        <div className="mt-6 h-1 w-full rounded-full bg-white/10 overflow-hidden">
+          <div
+            className="h-full rounded-full bg-[#1a73e8] transition-[width] duration-300 ease-out"
+            style={{ width: `${progress}%` }}
+          />
+        </div>
+
+        <p className="mt-4 text-xs text-white/40">
+          Cached after first load · Runs 100% offline
+        </p>
+
+        {status.state === "error" && (
+          <p className="mt-3 text-sm text-red-400 text-center">{status.error}</p>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/ResultPanel.tsx

@@ -0,0 +1,58 @@
+import { Loader2 } from "lucide-react";
+import type { DetectionResult } from "../hooks/LLMContext";
+
+interface ResultPanelProps {
+  result: DetectionResult | null;
+  isGenerating: boolean;
+  tps: number;
+}
+
+export function ResultPanel({ result, isGenerating, tps }: ResultPanelProps) {
+  if (!result && !isGenerating) return null;
+
+  return (
+    <div className="rounded-2xl border border-white/10 bg-white/5 p-4 sm:p-5">
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-sm font-medium text-white/60">
+          {isGenerating ? (
+            <span className="detection-shimmer">Analyzing image...</span>
+          ) : (
+            `${result?.detections.length ?? 0} object(s) detected`
+          )}
+        </h3>
+        {tps > 0 && (
+          <span className="text-xs text-white/50 font-mono">
+            {tps} tok/s
+          </span>
+        )}
+      </div>
+
+      {isGenerating && !result?.text && (
+        <div className="flex items-center gap-2 text-[#1a73e8]">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <span className="text-sm">Processing...</span>
+        </div>
+      )}
+
+      {result?.text && (
+        <pre className="text-sm text-white/80 whitespace-pre-wrap break-words font-mono leading-relaxed bg-black/40 rounded-xl p-3 max-h-[200px] overflow-y-auto">
+          {result.text}
+        </pre>
+      )}
+
+      {result && result.detections.length > 0 && !isGenerating && (
+        <div className="mt-3 flex flex-wrap gap-2">
+          {result.detections.map((det, i) => (
+            <span
+              key={i}
+              className="inline-flex items-center gap-1.5 rounded-lg bg-[#1a73e8]/15 border border-[#1a73e8]/40 px-2.5 py-1 text-xs font-medium text-[#8bb4f0]"
+            >
+              <span className="w-2 h-2 rounded-full bg-[#1a73e8]" />
+              {det.label}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/hooks/LLMContext.ts

@@ -0,0 +1,30 @@
+import { createContext } from "react";
+
+export interface Detection {
+  box_2d: [number, number, number, number]; // [y1, x1, y2, x2] normalized 0-1000
+  label: string;
+}
+
+export interface DetectionResult {
+  text: string;
+  detections: Detection[];
+}
+
+export type LoadingStatus =
+  | { state: "idle" }
+  | { state: "loading"; progress?: number; message?: string }
+  | { state: "ready" }
+  | { state: "error"; error: string };
+
+export interface LLMContextValue {
+  status: LoadingStatus;
+  isGenerating: boolean;
+  tps: number;
+  dtype: "q4f16" | "q4" | null;
+  result: DetectionResult | null;
+  loadModel: () => void;
+  detect: (image: string, prompt: string) => void;
+  stop: () => void;
+}
+
+export const LLMContext = createContext<LLMContextValue | null>(null);

src/hooks/LLMProvider.tsx

@@ -0,0 +1,207 @@
+import { useRef, useState, useCallback, type ReactNode } from "react";
+import {
+  AutoProcessor,
+  Gemma4ForConditionalGeneration,
+  TextStreamer,
+  load_image,
+} from "@huggingface/transformers";
+import { LLMContext, type LoadingStatus, type DetectionResult } from "./LLMContext";
+import { parseJsonDetection } from "../utils/detection-parser";
+
+const MODEL_ID = "onnx-community/gemma-4-E2B-it-ONNX";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyModel = any;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyProcessor = any;
+
+async function pickDtype(): Promise<"q4f16" | "q4"> {
+  try {
+    const adapter = await navigator.gpu?.requestAdapter({
+      powerPreference: "high-performance",
+    });
+    if (adapter) {
+      const features = [...adapter.features];
+      console.log("[Gemma4] WebGPU adapter features:", features);
+      console.log("[Gemma4] WebGPU adapter limits:", adapter.limits);
+      if (adapter.features.has("shader-f16")) {
+        console.log("[Gemma4] shader-f16 is AVAILABLE — using q4f16 (fast)");
+        return "q4f16";
+      }
+      console.log("[Gemma4] shader-f16 NOT available — falling back to q4 (slow)");
+    }
+  } catch (err) {
+    console.warn("[Gemma4] Adapter probe failed:", err);
+  }
+  return "q4";
+}
+
+export function LLMProvider({ children }: { children: ReactNode }) {
+  const modelRef = useRef<Promise<AnyModel> | null>(null);
+  const processorRef = useRef<AnyProcessor | null>(null);
+
+  const [status, setStatus] = useState<LoadingStatus>({ state: "idle" });
+  const [isGenerating, setIsGenerating] = useState(false);
+  const isGeneratingRef = useRef(false);
+  const [tps, setTps] = useState(0);
+  const [dtype, setDtype] = useState<"q4f16" | "q4" | null>(null);
+  const [result, setResult] = useState<DetectionResult | null>(null);
+  const abortRef = useRef(false);
+
+  isGeneratingRef.current = isGenerating;
+
+  const loadModel = useCallback(() => {
+    if (modelRef.current) return;
+
+    modelRef.current = (async () => {
+      setStatus({ state: "loading", message: "Loading processor..." });
+
+      try {
+        const pickedDtype = await pickDtype();
+        setDtype(pickedDtype);
+        console.log(`[Gemma4] Using dtype: ${pickedDtype}`);
+
+        const processor = await AutoProcessor.from_pretrained(MODEL_ID);
+        processorRef.current = processor;
+
+        setStatus({ state: "loading", message: "Downloading model..." });
+
+        const model = await Gemma4ForConditionalGeneration.from_pretrained(MODEL_ID, {
+          dtype: pickedDtype,
+          device: "webgpu",
+          progress_callback: (p: { status: string; progress?: number }) => {
+            // Use aggregated progress_total event for smooth, monotonic progress.
+            if (p.status === "progress_total" && typeof p.progress === "number") {
+              setStatus({
+                state: "loading",
+                progress: p.progress,
+                message: "Loading model...",
+              });
+            }
+          },
+        });
+
+        setStatus({ state: "ready" });
+        return model;
+      } catch (err) {
+        console.error("[Gemma4] Model loading failed:", err);
+        const msg = err instanceof Error ? err.message : String(err);
+        setStatus({ state: "error", error: msg });
+        modelRef.current = null;
+        throw err;
+      }
+    })();
+  }, []);
+
+  const detect = useCallback(async (imageUrl: string, prompt: string) => {
+    if (!modelRef.current) {
+      console.warn("[Gemma4] detect() called before model loaded");
+      return;
+    }
+    if (isGeneratingRef.current) {
+      console.warn("[Gemma4] detect() called while already generating");
+      return;
+    }
+
+    console.log("[Gemma4] Starting detection...");
+    setIsGenerating(true);
+    setTps(0);
+    setResult(null);
+    abortRef.current = false;
+
+    try {
+      const model = await modelRef.current;
+      const processor = processorRef.current!;
+
+      // Build multimodal message
+      const messages = [
+        {
+          role: "user",
+          content: [
+            { type: "image" as const },
+            { type: "text" as const, text: prompt },
+          ],
+        },
+      ];
+
+      // Apply chat template
+      const text = processor.apply_chat_template(messages, {
+        enable_thinking: false,
+        add_generation_prompt: true,
+      });
+
+      // Load and process image
+      const image = await load_image(imageUrl);
+      const inputs = await processor(text, image, null, {
+        add_special_tokens: false,
+      });
+
+      // Stream generation
+      let outputText = "";
+      let tokenCount = 0;
+      let firstTokenTime = 0;
+
+      const streamer = new TextStreamer(processor.tokenizer, {
+        skip_prompt: true,
+        skip_special_tokens: true,
+        callback_function: (token: string) => {
+          if (abortRef.current) return;
+          outputText += token;
+          const detections = parseJsonDetection(outputText);
+          setResult({ text: outputText, detections });
+        },
+        token_callback_function: () => {
+          tokenCount++;
+          if (tokenCount === 1) {
+            firstTokenTime = performance.now();
+          } else {
+            const elapsed = (performance.now() - firstTokenTime) / 1000;
+            if (elapsed > 0) {
+              setTps(Math.round(((tokenCount - 1) / elapsed) * 10) / 10);
+            }
+          }
+        },
+      });
+
+      await model.generate({
+        ...inputs,
+        max_new_tokens: 128,
+        do_sample: true,
+        temperature: 1.0,
+        top_p: 0.95,
+        top_k: 64,
+        streamer,
+      });
+
+      // Final parse
+      const detections = parseJsonDetection(outputText);
+      setResult({ text: outputText, detections });
+      console.log(`[Gemma4] Detection done. ${detections.length} objects found.`);
+    } catch (err) {
+      console.error("[Gemma4] Detection error:", err);
+      const rawMsg = err instanceof Error ? err.message : String(err);
+      const isOOM =
+        rawMsg.includes("OUT_OF_DEVICE_MEMORY") ||
+        rawMsg.includes("Invalid Buffer") ||
+        rawMsg.includes("Softmax");
+      const friendly = isOOM
+        ? "GPU ran out of memory. Enable chrome://flags/#enable-unsafe-webgpu and chrome://flags/#enable-vulkan, restart Chrome, and close other GPU-heavy tabs."
+        : rawMsg;
+      setResult({ text: `Error: ${friendly}`, detections: [] });
+    }
+
+    setIsGenerating(false);
+  }, []);
+
+  const stop = useCallback(() => {
+    abortRef.current = true;
+  }, []);
+
+  return (
+    <LLMContext.Provider
+      value={{ status, isGenerating, tps, dtype, result, loadModel, detect, stop }}
+    >
+      {children}
+    </LLMContext.Provider>
+  );
+}

src/hooks/useLLM.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { LLMContext } from "./LLMContext";
+
+export function useLLM() {
+  const ctx = useContext(LLMContext);
+  if (!ctx) throw new Error("useLLM must be used inside <LLMProvider>");
+  return ctx;
+}

src/index.css

@@ -0,0 +1,93 @@
+@import "tailwindcss";
+
+@layer base {
+  html,
+  body {
+    font-family:
+      "Google Sans",
+      Inter,
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      sans-serif;
+    font-size: 16px;
+    height: 100%;
+    overflow: hidden;
+    background: #0a0a0a;
+    color: #ffffff;
+  }
+
+  #root {
+    height: 100%;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+
+  *:hover {
+    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 3px;
+  }
+
+  *:hover::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  *:hover::-webkit-scrollbar-thumb:hover {
+    background: rgba(255, 255, 255, 0.35);
+  }
+}
+
+@keyframes pulse-gentle {
+  0%, 100% { opacity: 0.6; }
+  50%      { opacity: 1; }
+}
+
+.animate-pulse-gentle {
+  animation: pulse-gentle 2.5s ease-in-out infinite;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.animate-fade-in {
+  animation: fade-in 0.5s ease-out both;
+}
+
+@keyframes shimmer-detection {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.detection-shimmer {
+  background: linear-gradient(
+    105deg,
+    #8c8c94 0%,
+    #8c8c94 40%,
+    #1a73e8 50%,
+    #8c8c94 60%,
+    #8c8c94 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer-detection 2s ease-in-out infinite;
+}

src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { LLMProvider } from "./hooks/LLMProvider";
+import App from "./App";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <LLMProvider>
+      <App />
+    </LLMProvider>
+  </StrictMode>,
+);

src/utils/coco-examples.ts

@@ -0,0 +1,48 @@
+export interface CocoExample {
+  url: string;
+  prompt: string;
+  label: string;
+}
+
+export const DEFAULT_DETECTION_PROMPT =
+  'Detect all objects in this image. Return each detection as JSON: [{"box_2d": [y1, x1, y2, x2], "label": "object_name"}]';
+
+const DETECT_PROMPT = DEFAULT_DETECTION_PROMPT;
+const DESCRIBE_PROMPT =
+  "Describe this image in detail. What objects, people, and activities do you see?";
+
+// Verified existing images in the Xenova/transformers.js-docs dataset (CORS enabled, stable)
+const BASE = "https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main";
+
+export const COCO_EXAMPLES: CocoExample[] = [
+  {
+    url: `${BASE}/cats.jpg`,
+    prompt: DETECT_PROMPT,
+    label: "Cats",
+  },
+  {
+    url: `${BASE}/city-streets.jpg`,
+    prompt: DETECT_PROMPT,
+    label: "Streets",
+  },
+  {
+    url: `${BASE}/corgi.jpg`,
+    prompt: DETECT_PROMPT,
+    label: "Corgi",
+  },
+  {
+    url: `${BASE}/football-match.jpg`,
+    prompt: DETECT_PROMPT,
+    label: "Football",
+  },
+  {
+    url: `${BASE}/airport.jpg`,
+    prompt: DETECT_PROMPT,
+    label: "Airport",
+  },
+  {
+    url: `${BASE}/butterfly.jpg`,
+    prompt: DESCRIBE_PROMPT,
+    label: "Butterfly",
+  },
+];

src/utils/detection-parser.ts

@@ -0,0 +1,68 @@
+import type { Detection } from "../hooks/LLMContext";
+
+/**
+ * Parse JSON detection output from Gemma 4.
+ * Handles markdown code blocks, extra text, and partial output.
+ * Returns array of {box_2d: [y1,x1,y2,x2], label: string}.
+ */
+export function parseJsonDetection(text: string): Detection[] {
+  // Strip markdown code blocks
+  let cleaned = text.replace(/```json\s*/g, "").replace(/```\s*/g, "").trim();
+
+  // Try direct parse
+  try {
+    const result = JSON.parse(cleaned);
+    if (Array.isArray(result)) return validateDetections(result);
+  } catch {
+    // fall through
+  }
+
+  // Try to find a JSON array in the text
+  const match = cleaned.match(/\[[\s\S]*\]/);
+  if (match) {
+    try {
+      const result = JSON.parse(match[0]);
+      if (Array.isArray(result)) return validateDetections(result);
+    } catch {
+      // fall through
+    }
+  }
+
+  return [];
+}
+
+function validateDetections(arr: unknown[]): Detection[] {
+  return arr.filter(
+    (d): d is Detection =>
+      typeof d === "object" &&
+      d !== null &&
+      "box_2d" in d &&
+      Array.isArray((d as Detection).box_2d) &&
+      (d as Detection).box_2d.length === 4,
+  );
+}
+
+/**
+ * Convert Gemma 4 normalized coords (0-1000) to pixel coordinates.
+ * Input: [y1, x1, y2, x2] (Gemma format, Y-first)
+ * Output: [x1, y1, x2, y2] (canvas format, X-first)
+ */
+export function toPixelCoords(
+  box_2d: [number, number, number, number],
+  width: number,
+  height: number,
+): [number, number, number, number] {
+  const [y1Norm, x1Norm, y2Norm, x2Norm] = box_2d;
+  return [
+    (x1Norm / 1000) * width,
+    (y1Norm / 1000) * height,
+    (x2Norm / 1000) * width,
+    (y2Norm / 1000) * height,
+  ];
+}
+
+export const DETECTION_COLORS = [
+  "#ff6b6b", "#4ecdc4", "#45b7d1", "#f9ca24",
+  "#6c5ce7", "#a8e6cf", "#fd79a8", "#fdcb6e",
+  "#0984e3", "#00b894", "#e17055", "#74b9ff",
+];

src/utils/gemma-shader.ts

@@ -0,0 +1,361 @@
+/**
+ * Custom WebGPU crystal/gem particle animation for Gemma 4 intro.
+ * Uses compute shader for particle simulation + render pipeline for visualization.
+ */
+
+const PARTICLE_COUNT = 2000;
+
+const COMPUTE_SHADER = /* wgsl */ `
+struct Particle {
+  pos: vec2f,
+  vel: vec2f,
+  life: f32,
+  size: f32,
+  hue: f32,
+  _pad: f32,
+}
+
+struct Uniforms {
+  time: f32,
+  delta: f32,
+  width: f32,
+  height: f32,
+  mouseX: f32,
+  mouseY: f32,
+  _pad0: f32,
+  _pad1: f32,
+}
+
+@group(0) @binding(0) var<storage, read_write> particles: array<Particle>;
+@group(0) @binding(1) var<uniform> uniforms: Uniforms;
+
+fn hash(p: f32) -> f32 {
+  var s = fract(p * 0.1031);
+  s = s * (s + 33.33);
+  s = s * (s + s);
+  return fract(s);
+}
+
+@compute @workgroup_size(64)
+fn main(@builtin(global_invocation_id) id: vec3u) {
+  let i = id.x;
+  if (i >= ${PARTICLE_COUNT}u) { return; }
+
+  var p = particles[i];
+  let t = uniforms.time;
+  let dt = uniforms.delta;
+
+  // Update life
+  p.life -= dt * 0.15;
+
+  if (p.life <= 0.0) {
+    // Respawn from center with random direction
+    let seed = f32(i) + t * 7.31;
+    let angle = hash(seed) * 6.283185;
+    let speed = hash(seed + 1.0) * 0.3 + 0.1;
+    p.pos = vec2f(0.5, 0.5);
+    p.vel = vec2f(cos(angle) * speed, sin(angle) * speed);
+    p.life = hash(seed + 2.0) * 0.8 + 0.4;
+    p.size = hash(seed + 3.0) * 3.0 + 1.0;
+    p.hue = hash(seed + 4.0);
+  }
+
+  // Gentle attraction to mouse
+  let mousePos = vec2f(uniforms.mouseX / uniforms.width, uniforms.mouseY / uniforms.height);
+  let toMouse = mousePos - p.pos;
+  let dist = length(toMouse);
+  if (dist > 0.01) {
+    p.vel += normalize(toMouse) * 0.02 * dt / (dist + 0.2);
+  }
+
+  // Swirl effect
+  let center = vec2f(0.5, 0.5);
+  let toCenter = center - p.pos;
+  let perpendicular = vec2f(-toCenter.y, toCenter.x);
+  p.vel += perpendicular * 0.05 * dt;
+
+  // Damping
+  p.vel *= 0.995;
+
+  // Update position
+  p.pos += p.vel * dt;
+
+  // Soft boundary bounce
+  if (p.pos.x < 0.0 || p.pos.x > 1.0) { p.vel.x *= -0.5; p.pos.x = clamp(p.pos.x, 0.0, 1.0); }
+  if (p.pos.y < 0.0 || p.pos.y > 1.0) { p.vel.y *= -0.5; p.pos.y = clamp(p.pos.y, 0.0, 1.0); }
+
+  particles[i] = p;
+}
+`;
+
+const VERTEX_SHADER = /* wgsl */ `
+struct Particle {
+  pos: vec2f,
+  vel: vec2f,
+  life: f32,
+  size: f32,
+  hue: f32,
+  _pad: f32,
+}
+
+struct Uniforms {
+  time: f32,
+  delta: f32,
+  width: f32,
+  height: f32,
+  mouseX: f32,
+  mouseY: f32,
+  _pad0: f32,
+  _pad1: f32,
+}
+
+struct VSOut {
+  @builtin(position) pos: vec4f,
+  @location(0) alpha: f32,
+  @location(1) hue: f32,
+  @location(2) uv: vec2f,
+}
+
+@group(0) @binding(0) var<storage, read> particles: array<Particle>;
+@group(0) @binding(1) var<uniform> uniforms: Uniforms;
+
+// Quad vertices for instancing
+const quadVerts = array<vec2f, 6>(
+  vec2f(-1, -1), vec2f(1, -1), vec2f(-1, 1),
+  vec2f(-1, 1), vec2f(1, -1), vec2f(1, 1),
+);
+
+@vertex
+fn main(
+  @builtin(vertex_index) vi: u32,
+  @builtin(instance_index) ii: u32,
+) -> VSOut {
+  let p = particles[ii];
+  let qv = quadVerts[vi];
+
+  let aspect = uniforms.width / uniforms.height;
+  let size = p.size * 0.004 * (0.3 + p.life * 0.7);
+
+  var clipPos = vec2f(
+    (p.pos.x * 2.0 - 1.0) + qv.x * size / aspect,
+    (1.0 - p.pos.y * 2.0) + qv.y * size,
+  );
+
+  var out: VSOut;
+  out.pos = vec4f(clipPos, 0.0, 1.0);
+  out.alpha = p.life;
+  out.hue = p.hue;
+  out.uv = qv * 0.5 + 0.5;
+  return out;
+}
+`;
+
+const FRAGMENT_SHADER = /* wgsl */ `
+struct FSIn {
+  @location(0) alpha: f32,
+  @location(1) hue: f32,
+  @location(2) uv: vec2f,
+}
+
+fn hsl2rgb(h: f32, s: f32, l: f32) -> vec3f {
+  let c = (1.0 - abs(2.0 * l - 1.0)) * s;
+  let x = c * (1.0 - abs(((h * 6.0) % 2.0) - 1.0));
+  let m = l - c * 0.5;
+  var rgb: vec3f;
+  let h6 = h * 6.0;
+  if (h6 < 1.0) { rgb = vec3f(c, x, 0.0); }
+  else if (h6 < 2.0) { rgb = vec3f(x, c, 0.0); }
+  else if (h6 < 3.0) { rgb = vec3f(0.0, c, x); }
+  else if (h6 < 4.0) { rgb = vec3f(0.0, x, c); }
+  else if (h6 < 5.0) { rgb = vec3f(x, 0.0, c); }
+  else { rgb = vec3f(c, 0.0, x); }
+  return rgb + m;
+}
+
+@fragment
+fn main(in: FSIn) -> @location(0) vec4f {
+  // Soft circle
+  let d = length(in.uv - 0.5) * 2.0;
+  if (d > 1.0) { discard; }
+  let softEdge = 1.0 - smoothstep(0.4, 1.0, d);
+
+  // Gemma brand hue range: blue (0.6) → purple (0.75) → teal (0.47)
+  let h = mix(0.55, 0.78, in.hue);
+  let color = hsl2rgb(h, 0.85, 0.65);
+
+  let alpha = softEdge * in.alpha * 0.7;
+  return vec4f(color * alpha, alpha);
+}
+`;
+
+export interface GemmaParticleSystem {
+  render: () => void;
+  updateMouse: (x: number, y: number) => void;
+  resize: (w: number, h: number) => void;
+  destroy: () => void;
+}
+
+export async function createGemmaParticles(
+  canvas: HTMLCanvasElement,
+): Promise<GemmaParticleSystem | null> {
+  if (!navigator.gpu) return null;
+
+  const adapter = await navigator.gpu.requestAdapter();
+  if (!adapter) return null;
+
+  const device = await adapter.requestDevice();
+  const ctx = canvas.getContext("webgpu") as GPUCanvasContext | null;
+  if (!ctx) return null;
+
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  ctx.configure({ device, format, alphaMode: "premultiplied" });
+
+  // Particle buffer
+  const particleData = new Float32Array(PARTICLE_COUNT * 8); // 8 floats per particle
+  for (let i = 0; i < PARTICLE_COUNT; i++) {
+    const off = i * 8;
+    particleData[off + 0] = Math.random(); // pos.x
+    particleData[off + 1] = Math.random(); // pos.y
+    const angle = Math.random() * Math.PI * 2;
+    const speed = Math.random() * 0.2 + 0.05;
+    particleData[off + 2] = Math.cos(angle) * speed; // vel.x
+    particleData[off + 3] = Math.sin(angle) * speed; // vel.y
+    particleData[off + 4] = Math.random() * 0.8 + 0.2; // life
+    particleData[off + 5] = Math.random() * 3 + 1; // size
+    particleData[off + 6] = Math.random(); // hue
+    particleData[off + 7] = 0; // pad
+  }
+
+  const particleBuffer = device.createBuffer({
+    size: particleData.byteLength,
+    usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST,
+  });
+  device.queue.writeBuffer(particleBuffer, 0, particleData);
+
+  // Uniforms buffer: time, delta, width, height, mouseX, mouseY, pad, pad
+  const uniformData = new Float32Array([0, 0.016, canvas.width, canvas.height, canvas.width / 2, canvas.height / 2, 0, 0]);
+  const uniformBuffer = device.createBuffer({
+    size: uniformData.byteLength,
+    usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+  });
+  device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+
+  // Compute pipeline
+  const computePipeline = device.createComputePipeline({
+    layout: "auto",
+    compute: {
+      module: device.createShaderModule({ code: COMPUTE_SHADER }),
+      entryPoint: "main",
+    },
+  });
+
+  const computeBindGroup = device.createBindGroup({
+    layout: computePipeline.getBindGroupLayout(0),
+    entries: [
+      { binding: 0, resource: { buffer: particleBuffer } },
+      { binding: 1, resource: { buffer: uniformBuffer } },
+    ],
+  });
+
+  // Render pipeline
+  const renderPipeline = device.createRenderPipeline({
+    layout: "auto",
+    vertex: {
+      module: device.createShaderModule({ code: VERTEX_SHADER }),
+      entryPoint: "main",
+    },
+    fragment: {
+      module: device.createShaderModule({ code: FRAGMENT_SHADER }),
+      entryPoint: "main",
+      targets: [
+        {
+          format,
+          blend: {
+            color: { srcFactor: "one", dstFactor: "one-minus-src-alpha" },
+            alpha: { srcFactor: "one", dstFactor: "one-minus-src-alpha" },
+          },
+        },
+      ],
+    },
+    primitive: { topology: "triangle-list" },
+  });
+
+  const renderBindGroup = device.createBindGroup({
+    layout: renderPipeline.getBindGroupLayout(0),
+    entries: [
+      { binding: 0, resource: { buffer: particleBuffer } },
+      { binding: 1, resource: { buffer: uniformBuffer } },
+    ],
+  });
+
+  let mouseX = canvas.width / 2;
+  let mouseY = canvas.height / 2;
+  let time = 0;
+  let lastTime = performance.now();
+  let destroyed = false;
+
+  function render() {
+    if (destroyed) return;
+
+    const now = performance.now();
+    const dt = Math.min((now - lastTime) / 1000, 0.05);
+    lastTime = now;
+    time += dt;
+
+    uniformData[0] = time;
+    uniformData[1] = dt;
+    uniformData[2] = canvas.width;
+    uniformData[3] = canvas.height;
+    uniformData[4] = mouseX;
+    uniformData[5] = mouseY;
+    device.queue.writeBuffer(uniformBuffer, 0, uniformData);
+
+    const encoder = device.createCommandEncoder();
+
+    // Compute pass
+    const computePass = encoder.beginComputePass();
+    computePass.setPipeline(computePipeline);
+    computePass.setBindGroup(0, computeBindGroup);
+    computePass.dispatchWorkgroups(Math.ceil(PARTICLE_COUNT / 64));
+    computePass.end();
+
+    // Render pass
+    const textureView = ctx!.getCurrentTexture().createView();
+    const renderPass = encoder.beginRenderPass({
+      colorAttachments: [
+        {
+          view: textureView,
+          clearValue: { r: 0.039, g: 0.039, b: 0.102, a: 1 },
+          loadOp: "clear",
+          storeOp: "store",
+        },
+      ],
+    });
+    renderPass.setPipeline(renderPipeline);
+    renderPass.setBindGroup(0, renderBindGroup);
+    renderPass.draw(6, PARTICLE_COUNT);
+    renderPass.end();
+
+    device.queue.submit([encoder.finish()]);
+    requestAnimationFrame(render);
+  }
+
+  return {
+    render() {
+      requestAnimationFrame(render);
+    },
+    updateMouse(x: number, y: number) {
+      mouseX = x;
+      mouseY = y;
+    },
+    resize(w: number, h: number) {
+      canvas.width = w;
+      canvas.height = h;
+      ctx!.configure({ device, format, alphaMode: "premultiplied" });
+    },
+    destroy() {
+      destroyed = true;
+      device.destroy();
+    },
+  };
+}

src/utils/image-utils.ts

@@ -0,0 +1,59 @@
+const MAX_DIMENSION = 384;
+
+/**
+ * Resize an image to fit within MAX_DIMENSION while preserving aspect ratio.
+ * Returns a base64 data URL.
+ */
+export function resizeImage(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const img = new Image();
+      img.onload = () => {
+        let { width, height } = img;
+
+        if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
+          const scale = MAX_DIMENSION / Math.max(width, height);
+          width = Math.round(width * scale);
+          height = Math.round(height * scale);
+        }
+
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d")!;
+        ctx.drawImage(img, 0, 0, width, height);
+        resolve(canvas.toDataURL("image/jpeg", 0.9));
+      };
+      img.onerror = reject;
+      img.src = reader.result as string;
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}
+
+/**
+ * Load an image URL, resize to MAX_DIMENSION, return as base64 data URL.
+ */
+export async function urlToDataUrl(url: string): Promise<string> {
+  const response = await fetch(url);
+  if (!response.ok) throw new Error(`HTTP ${response.status} for ${url}`);
+  const blob = await response.blob();
+  const file = new File([blob], "image.jpg", { type: blob.type });
+  return resizeImage(file);
+}
+
+/**
+ * Get image dimensions from a data URL.
+ */
+export function getImageDimensions(
+  dataUrl: string,
+): Promise<{ width: number; height: number }> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve({ width: img.width, height: img.height });
+    img.onerror = reject;
+    img.src = dataUrl;
+  });
+}

src/utils/liquid1.min.d.ts

@@ -0,0 +1,17 @@
+interface LiquidApp {
+  liquidPlane: {
+    material: {
+      metalness: number;
+      roughness: number;
+    };
+    uniforms: {
+      displacementScale: { value: number };
+    };
+  };
+  loadImage(url: string): void;
+  setRain(enabled: boolean): void;
+  dispose(): void;
+}
+
+declare function LiquidBackground(canvas: HTMLCanvasElement): LiquidApp;
+export default LiquidBackground;

src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="@webgpu/types" />

tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+});