docs: Binary image segmentation example

apps/typegpu-docs/astro.config.mjs

@@ -46,7 +46,10 @@ export default defineConfig({
       'process.env.NODE_DEBUG_NATIVE': '""',
     },
     optimizeDeps: {
-      exclude: ['@rolldown/browser'],
+      exclude: [
+        '@rolldown/browser',
+        'onnxruntime-web',
+      ],
     },
     // Allowing query params, for invalidation
     plugins: [
@@ -65,6 +68,7 @@ export default defineConfig({
       noExternal: [
         'wgsl-wasm-transpiler-bundler',
         '@rolldown/browser',
+        'onnxruntime-web',
       ],
     },
   },

apps/typegpu-docs/package.json

@@ -37,11 +37,13 @@
     "fuse.js": "catalog:frontend",
     "jotai": "^2.15.0",
     "jotai-location": "^0.6.2",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.536.0",
     "lz-string": "^1.5.0",
     "monaco-editor": "^0.53.0",
     "morphcharts": "^1.3.2",
     "motion": "^12.23.24",
+    "onnxruntime-web": "1.23.0-dev.20250917-21fbad8a65",
     "pathe": "^2.0.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -65,8 +67,8 @@
     "@types/babel__standalone": "^7.1.9",
     "@types/babel__template": "^7.4.4",
     "@types/babel__traverse": "^7.20.7",
-    "@types/node": "^24.7.0",
     "@types/dom-mediacapture-record": "^1.0.22",
+    "@types/node": "^24.7.0",
     "@vitejs/plugin-basic-ssl": "^2.1.0",
     "@webgpu/types": "catalog:types",
     "astro-vtbot": "^2.1.6",

apps/typegpu-docs/src/examples/image-processing/background-segmentation/index.html

@@ -0,0 +1,44 @@
+<canvas></canvas>
+<video autoplay playsinline></video>
+
+<style>
+  /* Keep the video "painted" so Safari continues decoding frames. */
+  video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  #attribution {
+    opacity: 0;
+    position: absolute;
+    margin: 0 auto;
+    text-align: left;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 0.625rem;
+    border-radius: 0.625rem;
+    user-select: none;
+    transition: opacity 0.5s;
+  }
+</style>
+
+<div id="attribution">
+  <h3 class="controls-header">Attribution (click to dismiss)</h3>
+  Background segmentation uses the
+  <a
+    href="https://github.com/xuebinqin/U-2-Net"
+    target="_blank"
+    style="color: #7cd9ff"
+  >u2netp</a> model by Xuebin Qin et&nbsp;al., licensed under the
+  <a
+    href="https://www.apache.org/licenses/LICENSE-2.0"
+    target="_blank"
+    style="color: #7cd9ff"
+  >Apache&nbsp;License&nbsp;2.0</a>.
+</div>