Initial layered RMBG editor

.gitattributes

@@ -0,0 +1 @@
+dist/**/*.wasm filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+.playwright-cli
+output

README.md

@@ -0,0 +1,41 @@
+---
+title: RMBG Layers
+emoji: 🪄
+colorFrom: orange
+colorTo: yellow
+sdk: static
+app_file: dist/index.html
+pinned: false
+---
+
+# RMBG Layers
+
+Browser-based image and video compositor for simple hide-behind-object effects. It uses
+`onnxruntime-web` on `WebGPU` with BRIA RMBG-1.4 loaded directly from Hugging Face.
+
+## Features
+
+- Remove the background from a still image or a short video entirely in the browser.
+- Add text layers with editable size, style, weight, family, and color.
+- Insert extra image layers between the original source and the foreground cutout.
+- Drag text and image layers directly on the preview.
+- Export a final composite as `PNG` for images or `WebM` for videos.
+
+## Local development
+
+```bash
+bun install
+bun run dev
+```
+
+Build for production:
+
+```bash
+bun run build
+```
+
+## Model
+
+The app uses `BRIA RMBG-1.4 FP16` from `briaai/RMBG-1.4`. It is WebGPU-only and does not include a
+WASM fallback. Inference uses the reference `1024×1024` input size, then reapplies the predicted
+mask at the original image or video frame size.

bun.lock

@@ -0,0 +1,263 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "webrmbg",
+      "dependencies": {
+        "onnxruntime-web": "^1.22.0",
+        "vue": "^3.5.13",
+        "webm-muxer": "^5.1.4",
+      },
+      "devDependencies": {
+        "@vitejs/plugin-vue": "^5.2.1",
+        "typescript": "^5.8.2",
+        "vite": "^6.2.0",
+        "vue-tsc": "^2.2.8",
+      },
+    },
+  },
+  "packages": {
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/parser": ["@babel/parser@7.29.0", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww=="],
+
+    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.25.12", "", { "os": "aix", "cpu": "ppc64" }, "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.25.12", "", { "os": "android", "cpu": "arm" }, "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.25.12", "", { "os": "android", "cpu": "arm64" }, "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.25.12", "", { "os": "android", "cpu": "x64" }, "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.25.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.25.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.25.12", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.25.12", "", { "os": "freebsd", "cpu": "x64" }, "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.25.12", "", { "os": "linux", "cpu": "arm" }, "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.25.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.25.12", "", { "os": "linux", "cpu": "ia32" }, "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.25.12", "", { "os": "linux", "cpu": "ppc64" }, "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.25.12", "", { "os": "linux", "cpu": "none" }, "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.25.12", "", { "os": "linux", "cpu": "s390x" }, "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.25.12", "", { "os": "linux", "cpu": "x64" }, "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw=="],
+
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.25.12", "", { "os": "none", "cpu": "arm64" }, "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.25.12", "", { "os": "none", "cpu": "x64" }, "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ=="],
+
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.25.12", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.25.12", "", { "os": "openbsd", "cpu": "x64" }, "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw=="],
+
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.25.12", "", { "os": "none", "cpu": "arm64" }, "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.25.12", "", { "os": "sunos", "cpu": "x64" }, "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.25.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.25.12", "", { "os": "win32", "cpu": "ia32" }, "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ=="],
+
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.25.12", "", { "os": "win32", "cpu": "x64" }, "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@protobufjs/aspromise": ["@protobufjs/aspromise@1.1.2", "", {}, "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ=="],
+
+    "@protobufjs/base64": ["@protobufjs/base64@1.1.2", "", {}, "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg=="],
+
+    "@protobufjs/codegen": ["@protobufjs/codegen@2.0.4", "", {}, "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg=="],
+
+    "@protobufjs/eventemitter": ["@protobufjs/eventemitter@1.1.0", "", {}, "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q=="],
+
+    "@protobufjs/fetch": ["@protobufjs/fetch@1.1.0", "", { "dependencies": { "@protobufjs/aspromise": "^1.1.1", "@protobufjs/inquire": "^1.1.0" } }, "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ=="],
+
+    "@protobufjs/float": ["@protobufjs/float@1.0.2", "", {}, "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ=="],
+
+    "@protobufjs/inquire": ["@protobufjs/inquire@1.1.0", "", {}, "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q=="],
+
+    "@protobufjs/path": ["@protobufjs/path@1.1.2", "", {}, "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA=="],
+
+    "@protobufjs/pool": ["@protobufjs/pool@1.1.0", "", {}, "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw=="],
+
+    "@protobufjs/utf8": ["@protobufjs/utf8@1.1.0", "", {}, "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="],
+
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.59.0", "", { "os": "android", "cpu": "arm" }, "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.59.0", "", { "os": "android", "cpu": "arm64" }, "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.59.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.59.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w=="],
+
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.59.0", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA=="],
+
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.59.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg=="],
+
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.59.0", "", { "os": "linux", "cpu": "arm" }, "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw=="],
+
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.59.0", "", { "os": "linux", "cpu": "arm" }, "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA=="],
+
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.59.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA=="],
+
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.59.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA=="],
+
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.59.0", "", { "os": "linux", "cpu": "none" }, "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg=="],
+
+    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.59.0", "", { "os": "linux", "cpu": "none" }, "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q=="],
+
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.59.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA=="],
+
+    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.59.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.59.0", "", { "os": "linux", "cpu": "none" }, "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.59.0", "", { "os": "linux", "cpu": "none" }, "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.59.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.59.0", "", { "os": "linux", "cpu": "x64" }, "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.59.0", "", { "os": "linux", "cpu": "x64" }, "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg=="],
+
+    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.59.0", "", { "os": "openbsd", "cpu": "x64" }, "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ=="],
+
+    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.59.0", "", { "os": "none", "cpu": "arm64" }, "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.59.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.59.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA=="],
+
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.59.0", "", { "os": "win32", "cpu": "x64" }, "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.59.0", "", { "os": "win32", "cpu": "x64" }, "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA=="],
+
+    "@types/dom-webcodecs": ["@types/dom-webcodecs@0.1.18", "", {}, "sha512-vAvE8C9DGWR+tkb19xyjk1TSUlJ7RUzzp4a9Anu7mwBT+fpyePWK1UxmH14tMO5zHmrnrRIMg5NutnnDztLxgg=="],
+
+    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
+
+    "@types/node": ["@types/node@25.5.0", "", { "dependencies": { "undici-types": "~7.18.0" } }, "sha512-jp2P3tQMSxWugkCUKLRPVUpGaL5MVFwF8RDuSRztfwgN1wmqJeMSbKlnEtQqU8UrhTmzEmZdu2I6v2dpp7XIxw=="],
+
+    "@types/wicg-file-system-access": ["@types/wicg-file-system-access@2020.9.8", "", {}, "sha512-ggMz8nOygG7d/stpH40WVaNvBwuyYLnrg5Mbyf6bmsj/8+gb6Ei4ZZ9/4PNpcPNTT8th9Q8sM8wYmWGjMWLX/A=="],
+
+    "@vitejs/plugin-vue": ["@vitejs/plugin-vue@5.2.4", "", { "peerDependencies": { "vite": "^5.0.0 || ^6.0.0", "vue": "^3.2.25" } }, "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA=="],
+
+    "@volar/language-core": ["@volar/language-core@2.4.15", "", { "dependencies": { "@volar/source-map": "2.4.15" } }, "sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA=="],
+
+    "@volar/source-map": ["@volar/source-map@2.4.15", "", {}, "sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg=="],
+
+    "@volar/typescript": ["@volar/typescript@2.4.15", "", { "dependencies": { "@volar/language-core": "2.4.15", "path-browserify": "^1.0.1", "vscode-uri": "^3.0.8" } }, "sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg=="],
+
+    "@vue/compiler-core": ["@vue/compiler-core@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/shared": "3.5.30", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-s3DfdZkcu/qExZ+td75015ljzHc6vE+30cFMGRPROYjqkroYI5NV2X1yAMX9UeyBNWB9MxCfPcsjpLS11nzkkw=="],
+
+    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.30", "", { "dependencies": { "@vue/compiler-core": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-eCFYESUEVYHhiMuK4SQTldO3RYxyMR/UQL4KdGD1Yrkfdx4m/HYuZ9jSfPdA+nWJY34VWndiYdW/wZXyiPEB9g=="],
+
+    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.30", "", { "dependencies": { "@babel/parser": "^7.29.0", "@vue/compiler-core": "3.5.30", "@vue/compiler-dom": "3.5.30", "@vue/compiler-ssr": "3.5.30", "@vue/shared": "3.5.30", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.8", "source-map-js": "^1.2.1" } }, "sha512-LqmFPDn89dtU9vI3wHJnwaV6GfTRD87AjWpTWpyrdVOObVtjIuSeZr181z5C4PmVx/V3j2p+0f7edFKGRMpQ5A=="],
+
+    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.30", "", { "dependencies": { "@vue/compiler-dom": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-NsYK6OMTnx109PSL2IAyf62JP6EUdk4Dmj6AkWcJGBvN0dQoMYtVekAmdqgTtWQgEJo+Okstbf/1p7qZr5H+bA=="],
+
+    "@vue/compiler-vue2": ["@vue/compiler-vue2@2.7.16", "", { "dependencies": { "de-indent": "^1.0.2", "he": "^1.2.0" } }, "sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A=="],
+
+    "@vue/language-core": ["@vue/language-core@2.2.12", "", { "dependencies": { "@volar/language-core": "2.4.15", "@vue/compiler-dom": "^3.5.0", "@vue/compiler-vue2": "^2.7.16", "@vue/shared": "^3.5.0", "alien-signals": "^1.0.3", "minimatch": "^9.0.3", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA=="],
+
+    "@vue/reactivity": ["@vue/reactivity@3.5.30", "", { "dependencies": { "@vue/shared": "3.5.30" } }, "sha512-179YNgKATuwj9gB+66snskRDOitDiuOZqkYia7mHKJaidOMo/WJxHKF8DuGc4V4XbYTJANlfEKb0yxTQotnx4Q=="],
+
+    "@vue/runtime-core": ["@vue/runtime-core@3.5.30", "", { "dependencies": { "@vue/reactivity": "3.5.30", "@vue/shared": "3.5.30" } }, "sha512-e0Z+8PQsUTdwV8TtEsLzUM7SzC7lQwYKePydb7K2ZnmS6jjND+WJXkmmfh/swYzRyfP1EY3fpdesyYoymCzYfg=="],
+
+    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.30", "", { "dependencies": { "@vue/reactivity": "3.5.30", "@vue/runtime-core": "3.5.30", "@vue/shared": "3.5.30", "csstype": "^3.2.3" } }, "sha512-2UIGakjU4WSQ0T4iwDEW0W7vQj6n7AFn7taqZ9Cvm0Q/RA2FFOziLESrDL4GmtI1wV3jXg5nMoJSYO66egDUBw=="],
+
+    "@vue/server-renderer": ["@vue/server-renderer@3.5.30", "", { "dependencies": { "@vue/compiler-ssr": "3.5.30", "@vue/shared": "3.5.30" }, "peerDependencies": { "vue": "3.5.30" } }, "sha512-v+R34icapydRwbZRD0sXwtHqrQJv38JuMB4JxbOxd8NEpGLny7cncMp53W9UH/zo4j8eDHjQ1dEJXwzFQknjtQ=="],
+
+    "@vue/shared": ["@vue/shared@3.5.30", "", {}, "sha512-YXgQ7JjaO18NeK2K9VTbDHaFy62WrObMa6XERNfNOkAhD1F1oDSf3ZJ7K6GqabZ0BvSDHajp8qfS5Sa2I9n8uQ=="],
+
+    "alien-signals": ["alien-signals@1.0.13", "", {}, "sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg=="],
+
+    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+
+    "brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "de-indent": ["de-indent@1.0.2", "", {}, "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="],
+
+    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
+
+    "esbuild": ["esbuild@0.25.12", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.25.12", "@esbuild/android-arm": "0.25.12", "@esbuild/android-arm64": "0.25.12", "@esbuild/android-x64": "0.25.12", "@esbuild/darwin-arm64": "0.25.12", "@esbuild/darwin-x64": "0.25.12", "@esbuild/freebsd-arm64": "0.25.12", "@esbuild/freebsd-x64": "0.25.12", "@esbuild/linux-arm": "0.25.12", "@esbuild/linux-arm64": "0.25.12", "@esbuild/linux-ia32": "0.25.12", "@esbuild/linux-loong64": "0.25.12", "@esbuild/linux-mips64el": "0.25.12", "@esbuild/linux-ppc64": "0.25.12", "@esbuild/linux-riscv64": "0.25.12", "@esbuild/linux-s390x": "0.25.12", "@esbuild/linux-x64": "0.25.12", "@esbuild/netbsd-arm64": "0.25.12", "@esbuild/netbsd-x64": "0.25.12", "@esbuild/openbsd-arm64": "0.25.12", "@esbuild/openbsd-x64": "0.25.12", "@esbuild/openharmony-arm64": "0.25.12", "@esbuild/sunos-x64": "0.25.12", "@esbuild/win32-arm64": "0.25.12", "@esbuild/win32-ia32": "0.25.12", "@esbuild/win32-x64": "0.25.12" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg=="],
+
+    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "flatbuffers": ["flatbuffers@25.9.23", "", {}, "sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "guid-typescript": ["guid-typescript@1.0.9", "", {}, "sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ=="],
+
+    "he": ["he@1.2.0", "", { "bin": { "he": "bin/he" } }, "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="],
+
+    "long": ["long@5.3.2", "", {}, "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA=="],
+
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "minimatch": ["minimatch@9.0.9", "", { "dependencies": { "brace-expansion": "^2.0.2" } }, "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg=="],
+
+    "muggle-string": ["muggle-string@0.4.1", "", {}, "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "onnxruntime-common": ["onnxruntime-common@1.24.3", "", {}, "sha512-GeuPZO6U/LBJXvwdaqHbuUmoXiEdeCjWi/EG7Y1HNnDwJYuk6WUbNXpF6luSUY8yASul3cmUlLGrCCL1ZgVXqA=="],
+
+    "onnxruntime-web": ["onnxruntime-web@1.24.3", "", { "dependencies": { "flatbuffers": "^25.1.24", "guid-typescript": "^1.0.9", "long": "^5.2.3", "onnxruntime-common": "1.24.3", "platform": "^1.3.6", "protobufjs": "^7.2.4" } }, "sha512-41dDq7fxtTm0XzGE7N0d6m8FcOY8EWtUA65GkOixJPB/G7DGzBmiDAnVVXHznRw9bgUZpb+4/1lQK/PNxGpbrQ=="],
+
+    "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
+
+    "platform": ["platform@1.3.6", "", {}, "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg=="],
+
+    "postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
+
+    "protobufjs": ["protobufjs@7.5.4", "", { "dependencies": { "@protobufjs/aspromise": "^1.1.2", "@protobufjs/base64": "^1.1.2", "@protobufjs/codegen": "^2.0.4", "@protobufjs/eventemitter": "^1.1.0", "@protobufjs/fetch": "^1.1.0", "@protobufjs/float": "^1.0.2", "@protobufjs/inquire": "^1.1.0", "@protobufjs/path": "^1.1.2", "@protobufjs/pool": "^1.1.0", "@protobufjs/utf8": "^1.1.0", "@types/node": ">=13.7.0", "long": "^5.0.0" } }, "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg=="],
+
+    "rollup": ["rollup@4.59.0", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.59.0", "@rollup/rollup-android-arm64": "4.59.0", "@rollup/rollup-darwin-arm64": "4.59.0", "@rollup/rollup-darwin-x64": "4.59.0", "@rollup/rollup-freebsd-arm64": "4.59.0", "@rollup/rollup-freebsd-x64": "4.59.0", "@rollup/rollup-linux-arm-gnueabihf": "4.59.0", "@rollup/rollup-linux-arm-musleabihf": "4.59.0", "@rollup/rollup-linux-arm64-gnu": "4.59.0", "@rollup/rollup-linux-arm64-musl": "4.59.0", "@rollup/rollup-linux-loong64-gnu": "4.59.0", "@rollup/rollup-linux-loong64-musl": "4.59.0", "@rollup/rollup-linux-ppc64-gnu": "4.59.0", "@rollup/rollup-linux-ppc64-musl": "4.59.0", "@rollup/rollup-linux-riscv64-gnu": "4.59.0", "@rollup/rollup-linux-riscv64-musl": "4.59.0", "@rollup/rollup-linux-s390x-gnu": "4.59.0", "@rollup/rollup-linux-x64-gnu": "4.59.0", "@rollup/rollup-linux-x64-musl": "4.59.0", "@rollup/rollup-openbsd-x64": "4.59.0", "@rollup/rollup-openharmony-arm64": "4.59.0", "@rollup/rollup-win32-arm64-msvc": "4.59.0", "@rollup/rollup-win32-ia32-msvc": "4.59.0", "@rollup/rollup-win32-x64-gnu": "4.59.0", "@rollup/rollup-win32-x64-msvc": "4.59.0", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.18.2", "", {}, "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w=="],
+
+    "vite": ["vite@6.4.1", "", { "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", "picomatch": "^4.0.2", "postcss": "^8.5.3", "rollup": "^4.34.9", "tinyglobby": "^0.2.13" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "jiti": ">=1.21.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g=="],
+
+    "vscode-uri": ["vscode-uri@3.1.0", "", {}, "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="],
+
+    "vue": ["vue@3.5.30", "", { "dependencies": { "@vue/compiler-dom": "3.5.30", "@vue/compiler-sfc": "3.5.30", "@vue/runtime-dom": "3.5.30", "@vue/server-renderer": "3.5.30", "@vue/shared": "3.5.30" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-hTHLc6VNZyzzEH/l7PFGjpcTvUgiaPK5mdLkbjrTeWSRcEfxFrv56g/XckIYlE9ckuobsdwqd5mk2g1sBkMewg=="],
+
+    "vue-tsc": ["vue-tsc@2.2.12", "", { "dependencies": { "@volar/typescript": "2.4.15", "@vue/language-core": "2.2.12" }, "peerDependencies": { "typescript": ">=5.0.0" }, "bin": { "vue-tsc": "./bin/vue-tsc.js" } }, "sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw=="],
+
+    "webm-muxer": ["webm-muxer@5.1.4", "", { "dependencies": { "@types/dom-webcodecs": "^0.1.4", "@types/wicg-file-system-access": "^2020.9.5" } }, "sha512-ditzgFVFbfqPaugkIr4mGhAdob5K9HY6Rzlh7TRsA368yA1sp/m5O7nQCcMLdgFDeNGtFPg8B+MeXLtpzKWX6Q=="],
+  }
+}

index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Static Hugging Face Space for browser-side background removal with ONNX Runtime Web and BRIA RMBG-1.4."
+    />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <title>RMBG Layers</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "rmbglayers",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "packageManager": "bun@1.2.23",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "onnxruntime-web": "^1.22.0",
+    "vue": "^3.5.13",
+    "webm-muxer": "^5.1.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.1",
+    "typescript": "^5.8.2",
+    "vite": "^6.2.0",
+    "vue-tsc": "^2.2.8"
+  }
+}

src/App.vue

@@ -0,0 +1,2811 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import * as ort from "onnxruntime-web";
+import { ArrayBufferTarget, Muxer } from "webm-muxer";
+import ortWasmThreadedMjsUrl from "/node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.mjs?url";
+import ortWasmThreadedWasmUrl from "/node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.wasm?url";
+import ortWasmThreadedJsepMjsUrl from "/node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.jsep.mjs?url";
+import ortWasmThreadedJsepWasmUrl from "/node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.jsep.wasm?url";
+
+const MODEL_DIMENSION = 1024;
+const VIDEO_CAPTURE_FPS = 30;
+const ACCEPTED_FILE_TYPES = [
+  "image/png",
+  "image/jpeg",
+  "image/webp",
+  "video/mp4",
+  "video/webm",
+  "video/quicktime",
+  "video/x-m4v",
+].join(",");
+const FONT_FAMILY_OPTIONS = [
+  "Space Grotesk",
+  "Georgia",
+  "Impact",
+  "Courier New",
+  "Trebuchet MS",
+  "Times New Roman",
+  "Verdana",
+];
+const FONT_WEIGHT_OPTIONS = [300, 400, 500, 600, 700, 800];
+
+type PreviewUrlKind = "source" | "result";
+type MediaKind = "image" | "video";
+
+interface ModelOption {
+  id: string;
+  label: string;
+  source: string;
+  url: string;
+  sizeLabel: string;
+}
+
+interface FileSummary {
+  kind: MediaKind;
+  name: string;
+  size: string;
+  dimensions: string;
+  duration?: string;
+  fps?: string;
+}
+
+interface ResultSummary {
+  duration: string;
+  backend: string;
+  output: string;
+  fps?: string;
+  frames?: string;
+  note?: string;
+}
+
+interface CachedModelData {
+  bytes: Uint8Array;
+  url: string;
+}
+
+interface FramePipeline {
+  inputCanvas: HTMLCanvasElement;
+  inputContext: CanvasRenderingContext2D;
+  rawMaskCanvas: HTMLCanvasElement;
+  rawMaskContext: CanvasRenderingContext2D;
+  scaledMaskCanvas: HTMLCanvasElement;
+  scaledMaskContext: CanvasRenderingContext2D;
+  outputCanvas: HTMLCanvasElement;
+  outputContext: CanvasRenderingContext2D;
+}
+
+interface StageSize {
+  width: number;
+  height: number;
+}
+
+interface ProcessedVideoMeta {
+  width: number;
+  height: number;
+  startFrame: number;
+  targetFrames: number;
+}
+
+interface LayerBase {
+  id: string;
+  type: "text" | "image";
+  name: string;
+  visible: boolean;
+  placement: "middle" | "front";
+  x: number;
+  y: number;
+  scale: number;
+  rotation: number;
+}
+
+interface TextLayer extends LayerBase {
+  type: "text";
+  text: string;
+  fontSize: number;
+  fontStyle: "normal" | "italic";
+  fontWeight: number;
+  fontFamily: string;
+  color: string;
+}
+
+interface ImageLayer extends LayerBase {
+  type: "image";
+  url: string;
+  width: number;
+  height: number;
+  naturalWidth: number;
+  naturalHeight: number;
+}
+
+type EditorLayer = TextLayer | ImageLayer;
+
+interface DragState {
+  layerId: string;
+  pointerId: number;
+  mode: "move" | "scale" | "rotate";
+  moved: boolean;
+  wasSelected: boolean;
+  offsetX: number;
+  offsetY: number;
+  startScale: number;
+  startRotation: number;
+  startDistance: number;
+  startAngle: number;
+  startPointerX: number;
+  startPointerY: number;
+}
+
+const RMBG_MODEL: ModelOption = {
+  id: "bria-rmbg-1.4-fp16",
+  label: "BRIA RMBG-1.4 FP16",
+  source: "briaai/RMBG-1.4",
+  url: "https://huggingface.co/briaai/RMBG-1.4/resolve/main/onnx/model_fp16.onnx",
+  sizeLabel: "88 MB",
+};
+
+const fileInput = ref<HTMLInputElement | null>(null);
+const layerImageInput = ref<HTMLInputElement | null>(null);
+const editorViewportRef = ref<HTMLElement | null>(null);
+const stageFrameRef = ref<HTMLElement | null>(null);
+const sourcePreviewVideoRef = ref<HTMLVideoElement | null>(null);
+const resultPreviewCanvasRef = ref<HTMLCanvasElement | null>(null);
+const session = ref<ort.InferenceSession | null>(null);
+const isBusy = ref(false);
+const isExporting = ref(false);
+const isModelLoading = ref(false);
+const isDragging = ref(false);
+const isPreviewPlaying = ref(false);
+const statusText = ref("Drop an image or video, then load the model.");
+const errorText = ref("");
+const activeBackend = ref("pending");
+const selectedFile = ref<File | null>(null);
+const selectedMediaKind = ref<MediaKind | null>(null);
+const loadedModelId = ref<string | null>(null);
+const sourcePreviewUrl = ref("");
+const resultPreviewUrl = ref("");
+const sourceSummary = ref<FileSummary | null>(null);
+const resultSummary = ref<ResultSummary | null>(null);
+const sourceDurationSeconds = ref<number | null>(null);
+const stageSize = ref<StageSize | null>(null);
+const progressPercent = ref<number | null>(null);
+const startFrameInput = ref("");
+const videoFrameCapInput = ref("");
+const processedVideoMeta = ref<ProcessedVideoMeta | null>(null);
+const processedVideoFrames = ref<ImageBitmap[]>([]);
+const editorViewportSize = ref<StageSize>({ width: 0, height: 0 });
+const userLayers = ref<EditorLayer[]>([]);
+const selectedLayerId = ref<string | null>(null);
+const modelDataCache = new Map<string, CachedModelData>();
+const pendingModelLoads = new Map<string, Promise<Uint8Array>>();
+let resizeObserver: ResizeObserver | null = null;
+let dragState: DragState | null = null;
+let lastLayerInteraction: { layerId: string; wasSelected: boolean; moved: boolean; mode: DragState["mode"] } | null = null;
+let layerSequence = 0;
+let measurementCanvas: HTMLCanvasElement | null = null;
+let previewForegroundRafId: number | null = null;
+
+const loadButtonDisabled = computed(() => isModelLoading.value || isBusy.value || isExporting.value);
+const isReady = computed(() => session.value !== null && loadedModelId.value === RMBG_MODEL.id);
+const hasSource = computed(() => sourcePreviewUrl.value.length > 0 && stageSize.value !== null);
+const hasForeground = computed(() => (
+  selectedMediaKind.value === "video"
+    ? processedVideoFrames.value.length > 0
+    : resultPreviewUrl.value.length > 0
+));
+const hasVideoSource = computed(() => selectedMediaKind.value === "video");
+const modelStateLabel = computed(() => {
+  if (isReady.value) {
+    return "Ready";
+  }
+
+  if (isModelLoading.value) {
+    return "Loading";
+  }
+
+  if (isBusy.value) {
+    return "Running";
+  }
+
+  return "Not loaded";
+});
+const progressLabel = computed(() => (
+  progressPercent.value === null ? "—" : `${Math.round(progressPercent.value)}%`
+));
+const selectedMediaLabel = computed(() => {
+  if (selectedMediaKind.value === "video") {
+    return "video";
+  }
+
+  return "image";
+});
+const frameCapValue = computed<number | null>(() => {
+  const trimmed = videoFrameCapInput.value.trim();
+  if (!trimmed) {
+    return null;
+  }
+
+  if (!/^\d+$/.test(trimmed)) {
+    return Number.NaN;
+  }
+
+  const parsed = Number.parseInt(trimmed, 10);
+  return parsed > 0 ? parsed : Number.NaN;
+});
+const startFrameValue = computed<number>(() => {
+  const trimmed = startFrameInput.value.trim();
+  if (!trimmed) {
+    return 0;
+  }
+
+  if (!/^\d+$/.test(trimmed)) {
+    return Number.NaN;
+  }
+
+  return Number.parseInt(trimmed, 10);
+});
+const hasValidFrameCap = computed(() => frameCapValue.value === null || Number.isFinite(frameCapValue.value));
+const hasValidStartFrame = computed(() => Number.isFinite(startFrameValue.value));
+const canRun = computed(
+  () => selectedFile.value !== null
+    && isReady.value
+    && !isBusy.value
+    && !isModelLoading.value
+    && hasValidFrameCap.value
+    && hasValidStartFrame.value,
+);
+const canExport = computed(() => {
+  if (!hasSource.value || isBusy.value || isModelLoading.value || isExporting.value) {
+    return false;
+  }
+
+  if (selectedMediaKind.value === "video") {
+    return hasForeground.value && processedVideoMeta.value !== null;
+  }
+
+  return true;
+});
+const previewStartSeconds = computed<number>(() => {
+  if (selectedMediaKind.value !== "video" || !Number.isFinite(startFrameValue.value)) {
+    return 0;
+  }
+
+  const duration = sourceDurationSeconds.value;
+  const startSeconds = startFrameValue.value / VIDEO_CAPTURE_FPS;
+  if (!duration || !Number.isFinite(duration)) {
+    return startSeconds;
+  }
+
+  return Math.min(duration, startSeconds);
+});
+const previewCapDurationSeconds = computed<number | null>(() => {
+  if (selectedMediaKind.value !== "video") {
+    return null;
+  }
+
+  const cap = frameCapValue.value;
+  const duration = sourceDurationSeconds.value;
+  const startSeconds = previewStartSeconds.value;
+  if (!duration || !Number.isFinite(duration)) {
+    return cap === null || !Number.isFinite(cap) ? null : startSeconds + cap / VIDEO_CAPTURE_FPS;
+  }
+
+  if (cap === null || !Number.isFinite(cap)) {
+    return duration;
+  }
+
+  return Math.min(duration, startSeconds + cap / VIDEO_CAPTURE_FPS);
+});
+const stageScale = computed(() => {
+  if (!stageSize.value) {
+    return 1;
+  }
+
+  const widthRatio = editorViewportSize.value.width > 0
+    ? editorViewportSize.value.width / stageSize.value.width
+    : 1;
+  const heightRatio = editorViewportSize.value.height > 0
+    ? editorViewportSize.value.height / stageSize.value.height
+    : 1;
+
+  return Math.max(0.1, Math.min(widthRatio, heightRatio, 1));
+});
+const stageFrameStyle = computed(() => {
+  if (!stageSize.value) {
+    return {};
+  }
+
+  return {
+    width: `${stageSize.value.width * stageScale.value}px`,
+    height: `${stageSize.value.height * stageScale.value}px`,
+  };
+});
+const stageSurfaceStyle = computed(() => {
+  if (!stageSize.value) {
+    return {};
+  }
+
+  return {
+    width: `${stageSize.value.width}px`,
+    height: `${stageSize.value.height}px`,
+    transform: `scale(${stageScale.value})`,
+  };
+});
+const selectedLayer = computed(() => (
+  userLayers.value.find((layer) => layer.id === selectedLayerId.value) ?? null
+));
+const selectedTextLayer = computed(() => (
+  selectedLayer.value?.type === "text" ? selectedLayer.value : null
+));
+const selectedImageLayer = computed(() => (
+  selectedLayer.value?.type === "image" ? selectedLayer.value : null
+));
+const middleLayers = computed(() => (
+  userLayers.value.filter((layer) => layer.visible && layer.placement === "middle")
+));
+const frontLayers = computed(() => (
+  userLayers.value.filter((layer) => layer.visible && layer.placement === "front")
+));
+const selectedLayerOutlineStyle = computed<Record<string, string> | null>(() => {
+  if (!selectedLayer.value) {
+    return null;
+  }
+
+  const bounds = measureLayerBase(selectedLayer.value);
+  return {
+    left: `${selectedLayer.value.x}px`,
+    top: `${selectedLayer.value.y}px`,
+    width: `${bounds.width}px`,
+    height: `${bounds.height}px`,
+    transform: `rotate(${selectedLayer.value.rotation}deg) scale(${selectedLayer.value.scale})`,
+    transformOrigin: "center center",
+  };
+});
+const stageDimensionsLabel = computed(() => (
+  stageSize.value ? `${stageSize.value.width}×${stageSize.value.height}` : "No source"
+));
+const processLabel = computed(() => {
+  if (isBusy.value) {
+    return selectedMediaKind.value === "video" ? "Processing video…" : "Removing background…";
+  }
+
+  if (selectedMediaKind.value === "video") {
+    return hasForeground.value ? "Refresh foreground clip" : "Process video";
+  }
+
+  return hasForeground.value ? "Refresh cutout" : "Remove background";
+});
+const exportLabel = computed(() => "Export");
+
+watch(userLayers, (nextLayers) => {
+  if (!nextLayers.some((layer) => layer.id === selectedLayerId.value)) {
+    selectedLayerId.value = nextLayers[0]?.id ?? null;
+  }
+}, { deep: true });
+
+watch(editorViewportRef, (nextElement, previousElement) => {
+  if (!resizeObserver) {
+    return;
+  }
+
+  if (previousElement) {
+    resizeObserver.unobserve(previousElement);
+  }
+
+  if (nextElement) {
+    resizeObserver.observe(nextElement);
+    syncViewportSize(nextElement);
+  }
+});
+
+watch(previewCapDurationSeconds, (nextCap) => {
+  const sourceVideo = sourcePreviewVideoRef.value;
+  if (!sourceVideo) {
+    return;
+  }
+
+  if (!nextCap) {
+    queueForegroundPreviewFrame();
+    return;
+  }
+
+  if (sourceVideo.currentTime >= nextCap) {
+    restartPreviewLoop(false);
+    return;
+  }
+
+  queueForegroundPreviewFrame();
+});
+
+watch(previewStartSeconds, (nextStart) => {
+  const sourceVideo = sourcePreviewVideoRef.value;
+  if (!sourceVideo) {
+    return;
+  }
+
+  const wasPlaying = !sourceVideo.paused;
+  sourceVideo.currentTime = nextStart;
+
+  if (wasPlaying) {
+    void sourceVideo.play().catch(() => {
+      // Ignore autoplay failures.
+    });
+  }
+
+  queueForegroundPreviewFrame();
+});
+
+watch([stageSize, () => processedVideoFrames.value.length, selectedMediaKind], () => {
+  if (selectedMediaKind.value !== "video" || processedVideoFrames.value.length === 0) {
+    clearResultPreviewCanvas();
+    return;
+  }
+
+  queueForegroundPreviewFrame();
+}, { deep: true });
+
+watch([startFrameInput, videoFrameCapInput], ([nextStart, nextCap], [previousStart, previousCap]) => {
+  if (selectedMediaKind.value !== "video" || !processedVideoMeta.value) {
+    return;
+  }
+
+  if (nextStart === previousStart && nextCap === previousCap) {
+    return;
+  }
+
+  clearProcessedOutput();
+  statusText.value = "Video range changed. Refresh the cutout to export the updated clip.";
+});
+
+onMounted(() => {
+  syncIdleStatus();
+
+  resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0];
+    if (!entry) {
+      return;
+    }
+
+    editorViewportSize.value = {
+      width: entry.contentRect.width,
+      height: entry.contentRect.height,
+    };
+  });
+
+  if (editorViewportRef.value) {
+    resizeObserver.observe(editorViewportRef.value);
+    syncViewportSize(editorViewportRef.value);
+  }
+
+  window.addEventListener("pointermove", onWindowPointerMove);
+  window.addEventListener("pointerup", stopLayerDrag);
+  window.addEventListener("pointercancel", stopLayerDrag);
+  window.addEventListener("keydown", onWindowKeyDown);
+});
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
+  resizeObserver = null;
+  stopForegroundPreviewLoop();
+  window.removeEventListener("pointermove", onWindowPointerMove);
+  window.removeEventListener("pointerup", stopLayerDrag);
+  window.removeEventListener("pointercancel", stopLayerDrag);
+  window.removeEventListener("keydown", onWindowKeyDown);
+  stopPreviewVideos();
+  void resetSession();
+  clearObjectUrl("source");
+  clearObjectUrl("result");
+  clearLayerImageUrls();
+});
+
+function syncViewportSize(element: HTMLElement): void {
+  const rect = element.getBoundingClientRect();
+  editorViewportSize.value = {
+    width: rect.width,
+    height: rect.height,
+  };
+}
+
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) {
+    return `${bytes}B`;
+  }
+
+  const kilobytes = bytes / 1024;
+  if (kilobytes < 1024) {
+    return `${kilobytes.toFixed(1)}KB`;
+  }
+
+  return `${(kilobytes / 1024).toFixed(1)}MB`;
+}
+
+function formatDuration(durationMs: number): string {
+  if (durationMs < 1000) {
+    return `${Math.round(durationMs)}ms`;
+  }
+
+  return `${(durationMs / 1000).toFixed(2)}s`;
+}
+
+function formatMediaDuration(durationSeconds: number): string {
+  if (!Number.isFinite(durationSeconds)) {
+    return "unknown";
+  }
+
+  if (durationSeconds < 60) {
+    return `${durationSeconds.toFixed(durationSeconds >= 10 ? 0 : 1)}s`;
+  }
+
+  const roundedSeconds = Math.round(durationSeconds);
+  const minutes = Math.floor(roundedSeconds / 60);
+  const seconds = roundedSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+
+function clampPercent(value: number): number {
+  return Math.min(100, Math.max(0, value));
+}
+
+function getCanvasContext(
+  canvas: HTMLCanvasElement,
+  options?: CanvasRenderingContext2DSettings,
+): CanvasRenderingContext2D {
+  const context = canvas.getContext("2d", options);
+  if (!context) {
+    throw new Error("Could not get a 2D canvas context.");
+  }
+
+  return context;
+}
+
+function getMeasurementContext(): CanvasRenderingContext2D {
+  measurementCanvas ??= document.createElement("canvas");
+  return getCanvasContext(measurementCanvas);
+}
+
+function createFramePipeline(width: number, height: number): FramePipeline {
+  const inputCanvas = document.createElement("canvas");
+  inputCanvas.width = MODEL_DIMENSION;
+  inputCanvas.height = MODEL_DIMENSION;
+
+  const rawMaskCanvas = document.createElement("canvas");
+  rawMaskCanvas.width = MODEL_DIMENSION;
+  rawMaskCanvas.height = MODEL_DIMENSION;
+
+  const scaledMaskCanvas = document.createElement("canvas");
+  scaledMaskCanvas.width = width;
+  scaledMaskCanvas.height = height;
+
+  const outputCanvas = document.createElement("canvas");
+  outputCanvas.width = width;
+  outputCanvas.height = height;
+
+  return {
+    inputCanvas,
+    inputContext: getCanvasContext(inputCanvas, { willReadFrequently: true }),
+    rawMaskCanvas,
+    rawMaskContext: getCanvasContext(rawMaskCanvas),
+    scaledMaskCanvas,
+    scaledMaskContext: getCanvasContext(scaledMaskCanvas, { willReadFrequently: true }),
+    outputCanvas,
+    outputContext: getCanvasContext(outputCanvas, { willReadFrequently: true }),
+  };
+}
+
+function ensureFramePipelineSize(pipeline: FramePipeline, width: number, height: number): void {
+  if (pipeline.scaledMaskCanvas.width !== width || pipeline.scaledMaskCanvas.height !== height) {
+    pipeline.scaledMaskCanvas.width = width;
+    pipeline.scaledMaskCanvas.height = height;
+  }
+
+  if (pipeline.outputCanvas.width !== width || pipeline.outputCanvas.height !== height) {
+    pipeline.outputCanvas.width = width;
+    pipeline.outputCanvas.height = height;
+  }
+}
+
+function clearObjectUrl(kind: PreviewUrlKind): void {
+  const current = kind === "source" ? sourcePreviewUrl.value : resultPreviewUrl.value;
+
+  if (current) {
+    URL.revokeObjectURL(current);
+  }
+
+  if (kind === "source") {
+    sourcePreviewUrl.value = "";
+    return;
+  }
+
+  resultPreviewUrl.value = "";
+}
+
+function setObjectUrl(kind: PreviewUrlKind, blob: Blob | File): void {
+  clearObjectUrl(kind);
+  const nextUrl = URL.createObjectURL(blob);
+
+  if (kind === "source") {
+    sourcePreviewUrl.value = nextUrl;
+    return;
+  }
+
+  resultPreviewUrl.value = nextUrl;
+}
+
+function clearLayerImageUrls(): void {
+  for (const layer of userLayers.value) {
+    if (layer.type === "image") {
+      URL.revokeObjectURL(layer.url);
+    }
+  }
+}
+
+function clearProcessedVideoFrames(): void {
+  for (const frame of processedVideoFrames.value) {
+    frame.close();
+  }
+
+  processedVideoFrames.value = [];
+}
+
+function clearEditorLayers(): void {
+  clearLayerImageUrls();
+  userLayers.value = [];
+  selectedLayerId.value = null;
+}
+
+function clearProcessedOutput(): void {
+  resultSummary.value = null;
+  progressPercent.value = null;
+  processedVideoMeta.value = null;
+  clearProcessedVideoFrames();
+  stopForegroundPreviewLoop();
+  clearResultPreviewCanvas();
+  clearObjectUrl("result");
+}
+
+function stopPreviewVideos(): void {
+  stopForegroundPreviewLoop();
+  sourcePreviewVideoRef.value?.pause();
+  clearResultPreviewCanvas();
+  isPreviewPlaying.value = false;
+}
+
+function syncIdleStatus(): void {
+  if (isModelLoading.value || isBusy.value || isExporting.value) {
+    return;
+  }
+
+  if (isReady.value) {
+    if (!selectedFile.value) {
+      statusText.value = "Ready on webgpu. Drop an image or video to start.";
+      return;
+    }
+
+    if (selectedMediaKind.value === "video") {
+      statusText.value = hasForeground.value
+        ? "Foreground clip ready. Adjust layers, preview, then export the final WebM."
+        : "Ready on webgpu. Process the video to build the foreground layer.";
+      return;
+    }
+
+    statusText.value = hasForeground.value
+      ? "Foreground cutout ready. Move layers and export the composite PNG."
+      : "Ready on webgpu. Remove the background when you want the front cutout.";
+    return;
+  }
+
+  statusText.value = selectedFile.value
+    ? `${selectedMediaLabel.value[0].toUpperCase()}${selectedMediaLabel.value.slice(1)} loaded. Click Load model.`
+    : "Drop an image or video, then load the model.";
+}
+
+function detectMediaKind(file: File): MediaKind {
+  if (file.type.startsWith("image/")) {
+    return "image";
+  }
+
+  if (file.type.startsWith("video/")) {
+    return "video";
+  }
+
+  const lowerName = file.name.toLowerCase();
+  if (/\.(png|jpe?g|webp)$/.test(lowerName)) {
+    return "image";
+  }
+
+  if (/\.(mp4|webm|mov|m4v)$/.test(lowerName)) {
+    return "video";
+  }
+
+  throw new Error("Unsupported file type. Choose PNG, JPG, WebP, MP4, WebM, MOV, or M4V.");
+}
+
+async function loadDetachedVideo(source: string): Promise<HTMLVideoElement> {
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    const onLoadedMetadata = () => {
+      cleanup();
+      resolve(video);
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("The video could not be decoded."));
+    };
+    const cleanup = () => {
+      video.removeEventListener("loadedmetadata", onLoadedMetadata);
+      video.removeEventListener("error", onError);
+    };
+
+    video.preload = "auto";
+    video.muted = true;
+    video.playsInline = true;
+    video.src = source;
+    video.addEventListener("loadedmetadata", onLoadedMetadata, { once: true });
+    video.addEventListener("error", onError, { once: true });
+    video.load();
+  });
+}
+
+async function seekVideo(video: HTMLVideoElement, timeSeconds: number): Promise<void> {
+  const clampedTime = Math.max(0, Math.min(timeSeconds, Math.max(0, video.duration || timeSeconds)));
+  if (Math.abs(video.currentTime - clampedTime) < 0.001) {
+    return;
+  }
+
+  await new Promise<void>((resolve, reject) => {
+    const onSeeked = () => {
+      cleanup();
+      resolve();
+    };
+    const onError = () => {
+      cleanup();
+      reject(new Error("The video could not seek to the requested frame."));
+    };
+    const cleanup = () => {
+      video.removeEventListener("seeked", onSeeked);
+      video.removeEventListener("error", onError);
+    };
+
+    video.addEventListener("seeked", onSeeked, { once: true });
+    video.addEventListener("error", onError, { once: true });
+    video.currentTime = clampedTime;
+  });
+}
+
+async function loadImageElement(source: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.decoding = "async";
+    image.onload = () => resolve(image);
+    image.onerror = () => reject(new Error("The image could not be decoded."));
+    image.src = source;
+  });
+}
+
+async function pickVideoEncoderConfig(
+  width: number,
+  height: number,
+  options?: { preserveAlpha?: boolean },
+): Promise<{ encoderConfig: VideoEncoderConfig; muxerCodec: "V_VP9" | "V_VP8" }> {
+  const preserveAlpha = options?.preserveAlpha ?? false;
+  const candidates: Array<{ encoderConfig: VideoEncoderConfig; muxerCodec: "V_VP9" | "V_VP8" }> = [
+    {
+      encoderConfig: {
+        codec: "vp09.00.10.08",
+        width,
+        height,
+        bitrate: 8_000_000,
+        framerate: VIDEO_CAPTURE_FPS,
+        ...(preserveAlpha ? { alpha: "keep" } : {}),
+      },
+      muxerCodec: "V_VP9",
+    },
+    {
+      encoderConfig: {
+        codec: "vp8",
+        width,
+        height,
+        bitrate: 8_000_000,
+        framerate: VIDEO_CAPTURE_FPS,
+        ...(preserveAlpha ? { alpha: "keep" } : {}),
+      },
+      muxerCodec: "V_VP8",
+    },
+  ];
+
+  if (typeof VideoEncoder.isConfigSupported !== "function") {
+    return candidates[0];
+  }
+
+  for (const candidate of candidates) {
+    const support = await VideoEncoder.isConfigSupported(candidate.encoderConfig);
+    if (support.supported) {
+      return candidate;
+    }
+  }
+
+  throw new Error("No supported WebCodecs encoder configuration was found for WebM export.");
+}
+
+function clearResultPreviewCanvas(): void {
+  const canvas = resultPreviewCanvasRef.value;
+  if (!canvas) {
+    return;
+  }
+
+  const context = getCanvasContext(canvas);
+  context.clearRect(0, 0, canvas.width, canvas.height);
+}
+
+function syncResultPreviewCanvasSize(): HTMLCanvasElement | null {
+  const canvas = resultPreviewCanvasRef.value;
+  const size = stageSize.value;
+  if (!canvas || !size) {
+    return canvas;
+  }
+
+  if (canvas.width !== size.width || canvas.height !== size.height) {
+    canvas.width = size.width;
+    canvas.height = size.height;
+  }
+
+  return canvas;
+}
+
+function renderForegroundPreviewFrame(): void {
+  const canvas = syncResultPreviewCanvasSize();
+  const sourceVideo = sourcePreviewVideoRef.value;
+  const meta = processedVideoMeta.value;
+  if (!canvas) {
+    return;
+  }
+
+  const context = getCanvasContext(canvas);
+  context.clearRect(0, 0, canvas.width, canvas.height);
+
+  if (!sourceVideo || !meta || processedVideoFrames.value.length === 0) {
+    return;
+  }
+
+  const relativeFrame = Math.round((sourceVideo.currentTime * VIDEO_CAPTURE_FPS) - meta.startFrame);
+  const frameIndex = Math.min(
+    processedVideoFrames.value.length - 1,
+    Math.max(0, relativeFrame),
+  );
+  const frame = processedVideoFrames.value[frameIndex];
+  if (!frame) {
+    return;
+  }
+
+  try {
+    context.drawImage(frame, 0, 0, canvas.width, canvas.height);
+  } catch {
+    // Ignore transient draw failures while the browser catches up after a seek.
+  }
+}
+
+function stopForegroundPreviewLoop(): void {
+  if (previewForegroundRafId !== null) {
+    window.cancelAnimationFrame(previewForegroundRafId);
+    previewForegroundRafId = null;
+  }
+}
+
+function queueForegroundPreviewFrame(): void {
+  if (previewForegroundRafId !== null) {
+    return;
+  }
+
+  previewForegroundRafId = window.requestAnimationFrame(() => {
+    previewForegroundRafId = null;
+    renderForegroundPreviewFrame();
+
+    const sourceVideo = sourcePreviewVideoRef.value;
+    const shouldContinue = Boolean(
+      sourceVideo
+      && processedVideoFrames.value.length > 0
+      && !sourceVideo.paused
+      && !sourceVideo.ended,
+    );
+
+    if (shouldContinue) {
+      queueForegroundPreviewFrame();
+    }
+  });
+}
+
+async function fetchModelBytes(): Promise<Uint8Array> {
+  const cacheKey = RMBG_MODEL.id;
+  const cached = modelDataCache.get(cacheKey);
+  if (cached && cached.url === RMBG_MODEL.url) {
+    return cached.bytes;
+  }
+
+  const existingLoad = pendingModelLoads.get(cacheKey);
+  if (existingLoad) {
+    return existingLoad;
+  }
+
+  const loadPromise = (async () => {
+    const response = await fetch(RMBG_MODEL.url);
+    if (!response.ok) {
+      throw new Error(`Failed to fetch model: HTTP ${response.status}`);
+    }
+
+    const bytes = new Uint8Array(await response.arrayBuffer());
+    modelDataCache.set(cacheKey, {
+      bytes,
+      url: RMBG_MODEL.url,
+    });
+    return bytes;
+  })();
+
+  pendingModelLoads.set(cacheKey, loadPromise);
+
+  try {
+    return await loadPromise;
+  } finally {
+    pendingModelLoads.delete(cacheKey);
+  }
+}
+
+function applyOrtWasmPaths(useJsepRuntime: boolean): void {
+  ort.env.wasm.wasmPaths = useJsepRuntime
+    ? {
+        mjs: ortWasmThreadedJsepMjsUrl,
+        wasm: ortWasmThreadedJsepWasmUrl,
+      }
+    : {
+        mjs: ortWasmThreadedMjsUrl,
+        wasm: ortWasmThreadedWasmUrl,
+      };
+}
+
+async function initializeSession(): Promise<void> {
+  if (session.value) {
+    return;
+  }
+
+  isModelLoading.value = true;
+  errorText.value = "";
+  statusText.value = `Loading ${RMBG_MODEL.label}…`;
+
+  ort.env.wasm.proxy = false;
+  ort.env.wasm.simd = true;
+  ort.env.wasm.numThreads = 1;
+  ort.env.logLevel = "error";
+
+  const hasWebGpu = typeof navigator !== "undefined" && "gpu" in navigator;
+  if (!hasWebGpu) {
+    throw new Error("WebGPU is required for this app. No WASM fallback is enabled.");
+  }
+
+  try {
+    const modelBytes = await fetchModelBytes();
+    applyOrtWasmPaths(true);
+    session.value = await ort.InferenceSession.create(modelBytes, {
+      executionProviders: ["webgpu"],
+      graphOptimizationLevel: "all",
+    });
+    loadedModelId.value = RMBG_MODEL.id;
+    activeBackend.value = "webgpu";
+  } finally {
+    isModelLoading.value = false;
+    syncIdleStatus();
+  }
+}
+
+async function resetSession(): Promise<void> {
+  const currentSession = session.value;
+  session.value = null;
+  loadedModelId.value = null;
+  activeBackend.value = "pending";
+
+  if (currentSession) {
+    await currentSession.release();
+  }
+}
+
+async function loadSelectedModel(): Promise<void> {
+  await resetSession();
+  errorText.value = "";
+
+  try {
+    await initializeSession();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    errorText.value = message;
+    statusText.value = "The model could not be loaded.";
+  }
+}
+
+function float32ToFloat16(value: number): number {
+  const floatView = new Float32Array(1);
+  const intView = new Int32Array(floatView.buffer);
+
+  floatView[0] = value;
+  const x = intView[0];
+
+  let bits = (x >> 16) & 0x8000;
+  let mantissa = (x >> 12) & 0x07ff;
+  const exponent = (x >> 23) & 0xff;
+
+  if (exponent < 103) {
+    return bits;
+  }
+
+  if (exponent > 142) {
+    bits |= 0x7c00;
+    bits |= exponent === 255 && (x & 0x007fffff) !== 0 ? 1 : 0;
+    return bits;
+  }
+
+  if (exponent < 113) {
+    mantissa |= 0x0800;
+    bits |= (mantissa >> (114 - exponent)) + ((mantissa >> (113 - exponent)) & 1);
+    return bits;
+  }
+
+  bits |= ((exponent - 112) << 10) | (mantissa >> 1);
+  bits += mantissa & 1;
+  return bits;
+}
+
+function float16ToFloat32(value: number): number {
+  const sign = (value & 0x8000) >> 15;
+  const exponent = (value & 0x7c00) >> 10;
+  const fraction = value & 0x03ff;
+
+  if (exponent === 0) {
+    if (fraction === 0) {
+      return sign ? -0 : 0;
+    }
+
+    return (sign ? -1 : 1) * 2 ** -14 * (fraction / 1024);
+  }
+
+  if (exponent === 31) {
+    return fraction === 0 ? (sign ? -Infinity : Infinity) : Number.NaN;
+  }
+
+  return (sign ? -1 : 1) * 2 ** (exponent - 15) * (1 + fraction / 1024);
+}
+
+function normalizeTensorData(tensor: ort.Tensor): Float32Array {
+  if (tensor.type === "float16") {
+    const source = tensor.data as Uint16Array;
+    const output = new Float32Array(source.length);
+
+    for (let index = 0; index < source.length; index += 1) {
+      output[index] = float16ToFloat32(source[index]);
+    }
+
+    return output;
+  }
+
+  if (tensor.data instanceof Float32Array) {
+    return tensor.data;
+  }
+
+  return Float32Array.from(tensor.data as ArrayLike<number>);
+}
+
+function createInputTensor(
+  imageData: ImageData,
+  inputType: string | undefined,
+): ort.Tensor {
+  const planeSize = MODEL_DIMENSION * MODEL_DIMENSION;
+  const normalized = new Float32Array(planeSize * 3);
+
+  for (let index = 0; index < planeSize; index += 1) {
+    const pixelOffset = index * 4;
+    normalized[index] = imageData.data[pixelOffset] / 255 - 0.5;
+    normalized[planeSize + index] = imageData.data[pixelOffset + 1] / 255 - 0.5;
+    normalized[planeSize * 2 + index] = imageData.data[pixelOffset + 2] / 255 - 0.5;
+  }
+
+  if (inputType === "float16") {
+    const fp16 = new Uint16Array(normalized.length);
+    for (let index = 0; index < normalized.length; index += 1) {
+      fp16[index] = float32ToFloat16(normalized[index]);
+    }
+
+    return new ort.Tensor("float16", fp16, [1, 3, MODEL_DIMENSION, MODEL_DIMENSION]);
+  }
+
+  return new ort.Tensor("float32", normalized, [1, 3, MODEL_DIMENSION, MODEL_DIMENSION]);
+}
+
+async function blobFromCanvas(canvas: HTMLCanvasElement): Promise<Blob> {
+  return new Promise((resolve, reject) => {
+    canvas.toBlob((blob) => {
+      if (!blob) {
+        reject(new Error("Could not encode canvas as PNG."));
+        return;
+      }
+
+      resolve(blob);
+    }, "image/png");
+  });
+}
+
+async function processSourceToCanvas(
+  source: CanvasImageSource,
+  width: number,
+  height: number,
+  pipeline: FramePipeline,
+): Promise<HTMLCanvasElement> {
+  if (!session.value) {
+    throw new Error("Load the model on WebGPU before running inference.");
+  }
+
+  ensureFramePipelineSize(pipeline, width, height);
+
+  pipeline.inputContext.clearRect(0, 0, MODEL_DIMENSION, MODEL_DIMENSION);
+  pipeline.inputContext.drawImage(source, 0, 0, MODEL_DIMENSION, MODEL_DIMENSION);
+  const inputImage = pipeline.inputContext.getImageData(0, 0, MODEL_DIMENSION, MODEL_DIMENSION);
+
+  const inputName = session.value.inputNames[0];
+  const inputMetadata = (
+    session.value.inputMetadata as unknown as Record<string, { isTensor?: boolean; type?: string }>
+  )[inputName];
+  const inputTensor = createInputTensor(
+    inputImage,
+    inputMetadata?.isTensor ? inputMetadata.type : undefined,
+  );
+
+  const outputMap = await session.value.run({ [inputName]: inputTensor });
+  const outputName = session.value.outputNames[0];
+  const outputTensor = outputMap[outputName];
+  if (!outputTensor) {
+    throw new Error("The model did not return an output tensor.");
+  }
+
+  const outputShape = outputTensor.dims.map(Number);
+  const maskHeight = outputShape.at(-2) ?? MODEL_DIMENSION;
+  const maskWidth = outputShape.at(-1) ?? MODEL_DIMENSION;
+  const outputData = normalizeTensorData(outputTensor);
+
+  if (
+    pipeline.rawMaskCanvas.width !== maskWidth
+    || pipeline.rawMaskCanvas.height !== maskHeight
+  ) {
+    pipeline.rawMaskCanvas.width = maskWidth;
+    pipeline.rawMaskCanvas.height = maskHeight;
+  }
+
+  let min = Number.POSITIVE_INFINITY;
+  let max = Number.NEGATIVE_INFINITY;
+
+  for (let index = 0; index < outputData.length; index += 1) {
+    const value = outputData[index];
+    if (value < min) {
+      min = value;
+    }
+    if (value > max) {
+      max = value;
+    }
+  }
+
+  const range = max - min || 1;
+  const rawMaskImage = pipeline.rawMaskContext.createImageData(maskWidth, maskHeight);
+
+  for (let index = 0; index < outputData.length; index += 1) {
+    const alpha = Math.max(0, Math.min(255, Math.round(((outputData[index] - min) / range) * 255)));
+    const offset = index * 4;
+    rawMaskImage.data[offset] = alpha;
+    rawMaskImage.data[offset + 1] = alpha;
+    rawMaskImage.data[offset + 2] = alpha;
+    rawMaskImage.data[offset + 3] = 255;
+  }
+
+  pipeline.rawMaskContext.putImageData(rawMaskImage, 0, 0);
+
+  pipeline.scaledMaskContext.clearRect(0, 0, width, height);
+  pipeline.scaledMaskContext.imageSmoothingEnabled = true;
+  pipeline.scaledMaskContext.drawImage(pipeline.rawMaskCanvas, 0, 0, width, height);
+  const scaledMaskData = pipeline.scaledMaskContext.getImageData(0, 0, width, height);
+
+  pipeline.outputContext.clearRect(0, 0, width, height);
+  pipeline.outputContext.drawImage(source, 0, 0, width, height);
+  const resultImage = pipeline.outputContext.getImageData(0, 0, width, height);
+
+  for (let index = 0; index < width * height; index += 1) {
+    resultImage.data[index * 4 + 3] = scaledMaskData.data[index * 4];
+  }
+
+  pipeline.outputContext.putImageData(resultImage, 0, 0);
+  return pipeline.outputCanvas;
+}
+
+async function prepareFile(file: File): Promise<void> {
+  let imageBitmap: ImageBitmap | null = null;
+  let previewVideo: HTMLVideoElement | null = null;
+
+  try {
+    const mediaKind = detectMediaKind(file);
+
+    stopPreviewVideos();
+    errorText.value = "";
+    selectedFile.value = file;
+    selectedMediaKind.value = mediaKind;
+    sourceSummary.value = null;
+    resultSummary.value = null;
+    sourceDurationSeconds.value = null;
+    stageSize.value = null;
+    progressPercent.value = null;
+    clearEditorLayers();
+    clearProcessedOutput();
+    setObjectUrl("source", file);
+
+    if (mediaKind === "image") {
+      imageBitmap = await createImageBitmap(file);
+      stageSize.value = {
+        width: imageBitmap.width,
+        height: imageBitmap.height,
+      };
+      sourceSummary.value = {
+        kind: mediaKind,
+        name: file.name,
+        size: formatFileSize(file.size),
+        dimensions: `${imageBitmap.width}×${imageBitmap.height}`,
+      };
+    } else {
+      previewVideo = await loadDetachedVideo(sourcePreviewUrl.value);
+      stageSize.value = {
+        width: previewVideo.videoWidth,
+        height: previewVideo.videoHeight,
+      };
+      sourceSummary.value = {
+        kind: mediaKind,
+        name: file.name,
+        size: formatFileSize(file.size),
+        dimensions: `${previewVideo.videoWidth}×${previewVideo.videoHeight}`,
+        duration: formatMediaDuration(previewVideo.duration),
+        fps: `${VIDEO_CAPTURE_FPS} fps`,
+      };
+      sourceDurationSeconds.value = previewVideo.duration;
+    }
+
+    syncIdleStatus();
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    errorText.value = message;
+    statusText.value = "The file could not be prepared.";
+    selectedFile.value = null;
+    selectedMediaKind.value = null;
+    sourceSummary.value = null;
+    sourceDurationSeconds.value = null;
+    stageSize.value = null;
+    progressPercent.value = null;
+    clearEditorLayers();
+    clearProcessedOutput();
+    clearObjectUrl("source");
+  } finally {
+    imageBitmap?.close();
+    if (previewVideo) {
+      previewVideo.pause();
+      previewVideo.removeAttribute("src");
+      previewVideo.load();
+    }
+  }
+}
+
+async function processImageFile(file: File): Promise<void> {
+  let bitmap: ImageBitmap | null = null;
+
+  try {
+    if (!session.value) {
+      throw new Error("Load the model on WebGPU before running inference.");
+    }
+
+    statusText.value = "Decoding image…";
+    bitmap = await createImageBitmap(file);
+    const pipeline = createFramePipeline(bitmap.width, bitmap.height);
+
+    progressPercent.value = null;
+    statusText.value = "Running background removal…";
+    const startedAt = performance.now();
+    const resultCanvas = await processSourceToCanvas(bitmap, bitmap.width, bitmap.height, pipeline);
+    statusText.value = "Building the foreground cutout…";
+    const resultBlob = await blobFromCanvas(resultCanvas);
+
+    setObjectUrl("result", resultBlob);
+    resultSummary.value = {
+      duration: formatDuration(performance.now() - startedAt),
+      backend: activeBackend.value,
+      output: "Foreground PNG",
+    };
+    statusText.value = "Foreground ready. Move layers and export the composite PNG.";
+  } finally {
+    bitmap?.close();
+  }
+}
+
+async function processVideoFile(file: File): Promise<void> {
+  let processingVideo: HTMLVideoElement | null = null;
+  let temporaryVideoUrl = "";
+  const nextFrames: ImageBitmap[] = [];
+  let committedFrames = false;
+
+  try {
+    if (!session.value) {
+      throw new Error("Load the model on WebGPU before running inference.");
+    }
+
+    const resolvedFrameCap = frameCapValue.value;
+    const resolvedStartFrame = startFrameValue.value;
+    if (resolvedFrameCap !== null && !Number.isFinite(resolvedFrameCap)) {
+      throw new Error("Frame cap must be a whole number.");
+    }
+    if (!Number.isFinite(resolvedStartFrame)) {
+      throw new Error("Start frame must be a whole number.");
+    }
+
+    statusText.value = "Decoding video…";
+    temporaryVideoUrl = sourcePreviewUrl.value ? "" : URL.createObjectURL(file);
+    processingVideo = await loadDetachedVideo(sourcePreviewUrl.value || temporaryVideoUrl);
+    processingVideo.currentTime = 0;
+
+    const width = processingVideo.videoWidth;
+    const height = processingVideo.videoHeight;
+    const pipeline = createFramePipeline(width, height);
+    const estimatedTotalFrames = Math.max(1, Math.round(processingVideo.duration * VIDEO_CAPTURE_FPS));
+    const availableFrames = Math.max(0, estimatedTotalFrames - resolvedStartFrame);
+    if (availableFrames <= 0) {
+      throw new Error("Start frame is beyond the available video length.");
+    }
+    const targetFrames = resolvedFrameCap === null
+      ? availableFrames
+      : Math.max(1, Math.min(resolvedFrameCap, availableFrames));
+    const usesFrameCap = resolvedFrameCap !== null;
+    const frameDurationSeconds = 1 / VIDEO_CAPTURE_FPS;
+    const lastFrameTime = Math.max(0, processingVideo.duration - frameDurationSeconds / 2);
+
+    progressPercent.value = 0;
+
+    const updateVideoProgress = (processedFrames: number): void => {
+      progressPercent.value = clampPercent((processedFrames / targetFrames) * 100);
+      statusText.value = `Processing video… ${Math.round(progressPercent.value)}%`;
+    };
+
+    let processedFrames = 0;
+    const startedAt = performance.now();
+
+    for (let frameIndex = 0; frameIndex < targetFrames; frameIndex += 1) {
+      const targetTime = Math.min((resolvedStartFrame + frameIndex) * frameDurationSeconds, lastFrameTime);
+      await seekVideo(processingVideo, targetTime);
+      await processSourceToCanvas(processingVideo, width, height, pipeline);
+      nextFrames.push(await createImageBitmap(pipeline.outputCanvas));
+
+      processedFrames = frameIndex + 1;
+      updateVideoProgress(processedFrames);
+    }
+
+    processedVideoFrames.value = nextFrames;
+    committedFrames = true;
+    processedVideoMeta.value = {
+      width,
+      height,
+      startFrame: resolvedStartFrame,
+      targetFrames,
+    };
+    progressPercent.value = 100;
+    resultSummary.value = {
+      duration: formatDuration(performance.now() - startedAt),
+      backend: activeBackend.value,
+      output: "Foreground frames",
+      fps: `${VIDEO_CAPTURE_FPS} fps`,
+      frames: usesFrameCap
+        ? `${processedFrames}/${targetFrames} rendered`
+        : `${processedFrames} rendered`,
+      note: usesFrameCap
+        ? `Started at frame ${resolvedStartFrame} and stopped after the ${targetFrames}-frame cap.`
+        : `Processed from frame ${resolvedStartFrame} through the rest of the video and kept the RGBA frames in memory for preview/export.`,
+    };
+    statusText.value = "Foreground frames ready. Preview the layer stack and export the final WebM.";
+    queueForegroundPreviewFrame();
+  } finally {
+    if (!committedFrames) {
+      for (const frame of nextFrames) {
+        frame.close();
+      }
+    }
+
+    processingVideo?.pause();
+    if (processingVideo) {
+      processingVideo.removeAttribute("src");
+      processingVideo.load();
+    }
+
+    if (temporaryVideoUrl) {
+      URL.revokeObjectURL(temporaryVideoUrl);
+    }
+  }
+}
+
+async function processFile(file: File): Promise<void> {
+  isBusy.value = true;
+  errorText.value = "";
+
+  try {
+    if (selectedMediaKind.value === "video") {
+      await processVideoFile(file);
+    } else {
+      await processImageFile(file);
+    }
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    errorText.value = message;
+    progressPercent.value = null;
+    statusText.value = selectedMediaKind.value === "video"
+      ? "The video could not be processed."
+      : "The image could not be processed.";
+  } finally {
+    isBusy.value = false;
+    if (!errorText.value) {
+      syncIdleStatus();
+    }
+  }
+}
+
+function runInference(): void {
+  if (!selectedFile.value) {
+    statusText.value = "Choose an image or video first.";
+    return;
+  }
+
+  if (!isReady.value || activeBackend.value !== "webgpu") {
+    statusText.value = "Load the model on WebGPU before running inference.";
+    return;
+  }
+
+  clearProcessedOutput();
+  void processFile(selectedFile.value);
+}
+
+function openFilePicker(): void {
+  fileInput.value?.click();
+}
+
+function openLayerImagePicker(): void {
+  if (!stageSize.value) {
+    statusText.value = "Choose a base asset before adding overlay artwork.";
+    return;
+  }
+
+  layerImageInput.value?.click();
+}
+
+function onFileInputChanged(event: Event): void {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  target.value = "";
+
+  if (file) {
+    void prepareFile(file);
+  }
+}
+
+function onLayerImageInputChanged(event: Event): void {
+  const target = event.target as HTMLInputElement;
+  const file = target.files?.[0];
+  target.value = "";
+
+  if (file) {
+    void addImageLayer(file).catch((error: unknown) => {
+      errorText.value = error instanceof Error ? error.message : String(error);
+      statusText.value = "The overlay image could not be added.";
+    });
+  }
+}
+
+function onDragEnter(): void {
+  isDragging.value = true;
+}
+
+function onDragLeave(event: DragEvent): void {
+  const nextTarget = event.relatedTarget as Node | null;
+  if (!nextTarget || !event.currentTarget || !(event.currentTarget as Node).contains(nextTarget)) {
+    isDragging.value = false;
+  }
+}
+
+function onDrop(event: DragEvent): void {
+  isDragging.value = false;
+  const file = event.dataTransfer?.files?.[0];
+  if (file) {
+    void prepareFile(file);
+  }
+}
+
+function nextLayerId(prefix: string): string {
+  layerSequence += 1;
+  return `${prefix}-${layerSequence}`;
+}
+
+function fontDescriptor(layer: TextLayer): string {
+  return `${layer.fontStyle} ${layer.fontWeight} ${layer.fontSize}px ${layer.fontFamily}`;
+}
+
+function measureLayerBase(layer: EditorLayer): { width: number; height: number } {
+  if (layer.type === "image") {
+    return {
+      width: layer.width,
+      height: layer.height,
+    };
+  }
+
+  const context = getMeasurementContext();
+  context.font = fontDescriptor(layer);
+  const lines = layer.text.split(/\r?\n/);
+  const width = Math.max(
+    ...lines.map((line) => context.measureText(line || " ").width),
+    layer.fontSize * 0.6,
+  );
+  const lineHeight = layer.fontSize * 1.08;
+
+  return {
+    width,
+    height: Math.max(layer.fontSize, lineHeight * lines.length),
+  };
+}
+
+function measureLayer(layer: EditorLayer): { width: number; height: number } {
+  const bounds = measureLayerBase(layer);
+  return {
+    width: bounds.width * layer.scale,
+    height: bounds.height * layer.scale,
+  };
+}
+
+function getLayerCenter(layer: EditorLayer): { x: number; y: number } {
+  const bounds = measureLayerBase(layer);
+  return {
+    x: layer.x + bounds.width / 2,
+    y: layer.y + bounds.height / 2,
+  };
+}
+
+function clampLayerPosition(layer: EditorLayer, x: number, y: number): { x: number; y: number } {
+  if (!stageSize.value) {
+    return { x, y };
+  }
+
+  const bounds = measureLayer(layer);
+  return {
+    x: Math.min(stageSize.value.width - 18, Math.max(18 - bounds.width, x)),
+    y: Math.min(stageSize.value.height - 18, Math.max(18 - bounds.height, y)),
+  };
+}
+
+function createDefaultTextLayer(): TextLayer {
+  const width = stageSize.value?.width ?? 1200;
+  const height = stageSize.value?.height ?? 800;
+  const layer: TextLayer = {
+    id: nextLayerId("text"),
+    type: "text",
+    name: `Text ${userLayers.value.filter((item) => item.type === "text").length + 1}`,
+    visible: true,
+    placement: "middle",
+    x: width * 0.18,
+    y: height * 0.62,
+    scale: 1,
+    rotation: 0,
+    text: "Your text",
+    fontSize: Math.max(42, Math.round(width * 0.07)),
+    fontStyle: "normal",
+    fontWeight: 700,
+    fontFamily: "Space Grotesk",
+    color: "#f97316",
+  };
+  const bounds = measureLayer(layer);
+  layer.x = Math.max(20, Math.round((width - bounds.width) / 2));
+  return layer;
+}
+
+function addTextLayer(): void {
+  if (!stageSize.value) {
+    statusText.value = "Choose an image or video before adding text.";
+    return;
+  }
+
+  const layer = createDefaultTextLayer();
+  userLayers.value.push(layer);
+  selectedLayerId.value = layer.id;
+  statusText.value = "Text layer added. Drag it directly on the preview.";
+}
+
+async function addImageLayer(file: File): Promise<void> {
+  if (!stageSize.value) {
+    throw new Error("Choose a base asset before adding overlay artwork.");
+  }
+
+  const layerKind = detectMediaKind(file);
+  if (layerKind !== "image") {
+    throw new Error("Overlay layers must be PNG, JPG, or WebP images.");
+  }
+
+  let bitmap: ImageBitmap | null = null;
+
+  try {
+    bitmap = await createImageBitmap(file);
+    const maxWidth = stageSize.value.width * 0.45;
+    const width = Math.max(80, Math.min(maxWidth, bitmap.width));
+    const height = width * (bitmap.height / bitmap.width);
+    const layer: ImageLayer = {
+      id: nextLayerId("image"),
+      type: "image",
+      name: file.name.replace(/\.[^.]+$/, "") || `Image ${userLayers.value.filter((item) => item.type === "image").length + 1}`,
+      visible: true,
+      placement: "middle",
+      x: Math.round((stageSize.value.width - width) / 2),
+      y: Math.round((stageSize.value.height - height) / 2),
+      scale: 1,
+      rotation: 0,
+      url: URL.createObjectURL(file),
+      width,
+      height,
+      naturalWidth: bitmap.width,
+      naturalHeight: bitmap.height,
+    };
+
+    userLayers.value.push(layer);
+    selectedLayerId.value = layer.id;
+    statusText.value = `${layer.name} added between the source and the foreground layer.`;
+  } finally {
+    bitmap?.close();
+  }
+}
+
+function removeLayer(layerId: string): void {
+  const target = userLayers.value.find((layer) => layer.id === layerId);
+  if (target?.type === "image") {
+    URL.revokeObjectURL(target.url);
+  }
+
+  userLayers.value = userLayers.value.filter((layer) => layer.id !== layerId);
+}
+
+function moveLayer(layerId: string, direction: "up" | "down"): void {
+  const currentIndex = userLayers.value.findIndex((layer) => layer.id === layerId);
+  if (currentIndex === -1) {
+    return;
+  }
+
+  const targetIndex = direction === "up" ? currentIndex + 1 : currentIndex - 1;
+  if (targetIndex < 0 || targetIndex >= userLayers.value.length) {
+    return;
+  }
+
+  const nextLayers = [...userLayers.value];
+  const [moved] = nextLayers.splice(currentIndex, 1);
+  nextLayers.splice(targetIndex, 0, moved);
+  userLayers.value = nextLayers;
+}
+
+function duplicateSelectedTextLayer(): void {
+  if (!selectedTextLayer.value) {
+    return;
+  }
+
+  const clone: TextLayer = {
+    ...selectedTextLayer.value,
+    id: nextLayerId("text"),
+    name: `${selectedTextLayer.value.name} copy`,
+    x: selectedTextLayer.value.x + 24,
+    y: selectedTextLayer.value.y + 24,
+  };
+
+  userLayers.value.push(clone);
+  selectedLayerId.value = clone.id;
+}
+
+function getNaturalPoint(clientX: number, clientY: number): { x: number; y: number } | null {
+  const rect = stageFrameRef.value?.getBoundingClientRect() ?? editorViewportRef.value?.getBoundingClientRect();
+  if (!rect || !stageSize.value) {
+    return null;
+  }
+
+  const x = (clientX - rect.left) / stageScale.value;
+  const y = (clientY - rect.top) / stageScale.value;
+  return {
+    x: Math.min(stageSize.value.width, Math.max(0, x)),
+    y: Math.min(stageSize.value.height, Math.max(0, y)),
+  };
+}
+
+function startLayerDrag(event: PointerEvent, layerId: string): void {
+  const layer = userLayers.value.find((item) => item.id === layerId);
+  if (!layer) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  const wasSelected = selectedLayerId.value === layerId;
+  selectedLayerId.value = layerId;
+
+  const point = getNaturalPoint(event.clientX, event.clientY);
+  if (!point) {
+    return;
+  }
+
+  dragState = {
+    layerId,
+    pointerId: event.pointerId,
+    mode: "move",
+    moved: false,
+    wasSelected,
+    offsetX: point.x - layer.x,
+    offsetY: point.y - layer.y,
+    startScale: layer.scale,
+    startRotation: layer.rotation,
+    startDistance: 0,
+    startAngle: 0,
+    startPointerX: event.clientX,
+    startPointerY: event.clientY,
+  };
+}
+
+function startLayerTransform(
+  event: PointerEvent,
+  layerId: string,
+  mode: "scale" | "rotate",
+): void {
+  const layer = userLayers.value.find((item) => item.id === layerId);
+  if (!layer) {
+    return;
+  }
+
+  event.preventDefault();
+  event.stopPropagation();
+  const wasSelected = selectedLayerId.value === layerId;
+  selectedLayerId.value = layerId;
+
+  const point = getNaturalPoint(event.clientX, event.clientY);
+  if (!point) {
+    return;
+  }
+  const center = getLayerCenter(layer);
+
+  dragState = {
+    layerId,
+    pointerId: event.pointerId,
+    mode,
+    moved: false,
+    wasSelected,
+    offsetX: 0,
+    offsetY: 0,
+    startScale: layer.scale,
+    startRotation: layer.rotation,
+    startDistance: Math.max(1, Math.hypot(point.x - center.x, point.y - center.y)),
+    startAngle: Math.atan2(point.y - center.y, point.x - center.x),
+    startPointerX: event.clientX,
+    startPointerY: event.clientY,
+  };
+}
+
+function clampLayerScale(scale: number): number {
+  return Math.min(8, Math.max(0.1, scale));
+}
+
+function onWindowPointerMove(event: PointerEvent): void {
+  if (!dragState || dragState.pointerId !== event.pointerId) {
+    return;
+  }
+
+  const layer = userLayers.value.find((item) => item.id === dragState?.layerId);
+  if (!layer) {
+    dragState = null;
+    return;
+  }
+
+  const point = getNaturalPoint(event.clientX, event.clientY);
+  if (!point) {
+    return;
+  }
+
+  if (
+    !dragState.moved
+    && Math.hypot(event.clientX - dragState.startPointerX, event.clientY - dragState.startPointerY) > 3
+  ) {
+    dragState.moved = true;
+  }
+
+  if (dragState.mode === "move") {
+    const next = clampLayerPosition(
+      layer,
+      point.x - dragState.offsetX,
+      point.y - dragState.offsetY,
+    );
+    layer.x = next.x;
+    layer.y = next.y;
+    return;
+  }
+
+  if (dragState.mode === "scale") {
+    const center = getLayerCenter(layer);
+    const currentDistance = Math.max(1, Math.hypot(point.x - center.x, point.y - center.y));
+    layer.scale = clampLayerScale(dragState.startScale * (currentDistance / dragState.startDistance));
+    const next = clampLayerPosition(layer, layer.x, layer.y);
+    layer.x = next.x;
+    layer.y = next.y;
+    return;
+  }
+
+  const center = getLayerCenter(layer);
+  const currentAngle = Math.atan2(point.y - center.y, point.x - center.x);
+  const deltaDegrees = ((currentAngle - dragState.startAngle) * 180) / Math.PI;
+  layer.rotation = dragState.startRotation + deltaDegrees;
+}
+
+function stopLayerDrag(event?: PointerEvent): void {
+  if (!dragState) {
+    return;
+  }
+
+  if (event && dragState.pointerId !== event.pointerId) {
+    return;
+  }
+
+  lastLayerInteraction = {
+    layerId: dragState.layerId,
+    wasSelected: dragState.wasSelected,
+    moved: dragState.moved,
+    mode: dragState.mode,
+  };
+  dragState = null;
+}
+
+function onLayerClick(layerId: string): void {
+  if (!lastLayerInteraction || lastLayerInteraction.layerId !== layerId) {
+    selectedLayerId.value = selectedLayerId.value === layerId ? null : layerId;
+    return;
+  }
+
+  const shouldToggleOff = lastLayerInteraction.wasSelected
+    && !lastLayerInteraction.moved
+    && lastLayerInteraction.mode === "move";
+  if (shouldToggleOff) {
+    selectedLayerId.value = null;
+  } else {
+    selectedLayerId.value = layerId;
+  }
+
+  lastLayerInteraction = null;
+}
+
+function toggleLayerSelection(layerId: string): void {
+  selectedLayerId.value = selectedLayerId.value === layerId ? null : layerId;
+  lastLayerInteraction = null;
+}
+
+function clearSelection(): void {
+  selectedLayerId.value = null;
+}
+
+function layerStyle(layer: EditorLayer): Record<string, string> {
+  const bounds = measureLayerBase(layer);
+  const baseStyle: Record<string, string> = {
+    left: `${layer.x}px`,
+    top: `${layer.y}px`,
+    width: `${bounds.width}px`,
+    height: `${bounds.height}px`,
+    transform: `rotate(${layer.rotation}deg) scale(${layer.scale})`,
+    transformOrigin: "center center",
+  };
+
+  if (layer.type === "text") {
+    return {
+      ...baseStyle,
+      fontSize: `${layer.fontSize}px`,
+      fontStyle: layer.fontStyle,
+      fontWeight: String(layer.fontWeight),
+      fontFamily: layer.fontFamily,
+      color: layer.color,
+    };
+  }
+
+  return {
+    ...baseStyle,
+  };
+}
+
+function nudgeSelectedLayer(deltaX: number, deltaY: number): void {
+  if (!selectedLayer.value) {
+    return;
+  }
+
+  const next = clampLayerPosition(
+    selectedLayer.value,
+    selectedLayer.value.x + deltaX,
+    selectedLayer.value.y + deltaY,
+  );
+  selectedLayer.value.x = next.x;
+  selectedLayer.value.y = next.y;
+}
+
+function onStageKeyDown(event: KeyboardEvent): void {
+  if (!selectedLayer.value) {
+    return;
+  }
+
+  const step = event.shiftKey ? 10 : 1;
+  if (event.key === "ArrowLeft") {
+    event.preventDefault();
+    nudgeSelectedLayer(-step, 0);
+  } else if (event.key === "ArrowRight") {
+    event.preventDefault();
+    nudgeSelectedLayer(step, 0);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    nudgeSelectedLayer(0, -step);
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault();
+    nudgeSelectedLayer(0, step);
+  }
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  const tagName = target.tagName;
+  return target.isContentEditable
+    || tagName === "INPUT"
+    || tagName === "TEXTAREA"
+    || tagName === "SELECT";
+}
+
+function onWindowKeyDown(event: KeyboardEvent): void {
+  if (isEditableTarget(event.target)) {
+    return;
+  }
+
+  if (event.key === "Escape") {
+    clearSelection();
+    return;
+  }
+
+  onStageKeyDown(event);
+}
+
+function syncSelectedTextPosition(): void {
+  if (!selectedTextLayer.value) {
+    return;
+  }
+
+  const next = clampLayerPosition(
+    selectedTextLayer.value,
+    selectedTextLayer.value.x,
+    selectedTextLayer.value.y,
+  );
+  selectedTextLayer.value.x = next.x;
+  selectedTextLayer.value.y = next.y;
+}
+
+function syncSelectedLayerTransform(): void {
+  if (!selectedLayer.value) {
+    return;
+  }
+
+  selectedLayer.value.scale = clampLayerScale(selectedLayer.value.scale);
+  const next = clampLayerPosition(
+    selectedLayer.value,
+    selectedLayer.value.x,
+    selectedLayer.value.y,
+  );
+  selectedLayer.value.x = next.x;
+  selectedLayer.value.y = next.y;
+}
+
+function syncSelectedImageSize(): void {
+  if (!selectedImageLayer.value) {
+    return;
+  }
+
+  const safeWidth = Math.max(24, selectedImageLayer.value.width);
+  selectedImageLayer.value.width = safeWidth;
+  selectedImageLayer.value.height = safeWidth
+    * (selectedImageLayer.value.naturalHeight / selectedImageLayer.value.naturalWidth);
+
+  const next = clampLayerPosition(
+    selectedImageLayer.value,
+    selectedImageLayer.value.x,
+    selectedImageLayer.value.y,
+  );
+  selectedImageLayer.value.x = next.x;
+  selectedImageLayer.value.y = next.y;
+}
+
+function restartPreviewLoop(playAfterSeek: boolean): void {
+  const sourceVideo = sourcePreviewVideoRef.value;
+  const startSeconds = previewStartSeconds.value;
+
+  if (sourceVideo) {
+    sourceVideo.currentTime = startSeconds;
+  }
+
+  if (playAfterSeek && sourceVideo) {
+    void sourceVideo.play().catch(() => {
+      // Ignore autoplay failures.
+    });
+  }
+
+  queueForegroundPreviewFrame();
+}
+
+function onSourcePreviewLoaded(): void {
+  const sourceVideo = sourcePreviewVideoRef.value;
+  if (sourceVideo) {
+    sourceVideo.currentTime = previewStartSeconds.value;
+  }
+
+  isPreviewPlaying.value = false;
+  queueForegroundPreviewFrame();
+}
+
+function onSourcePreviewPlay(): void {
+  isPreviewPlaying.value = true;
+  queueForegroundPreviewFrame();
+}
+
+function onSourcePreviewPause(): void {
+  isPreviewPlaying.value = false;
+  queueForegroundPreviewFrame();
+}
+
+function onSourcePreviewTimeUpdate(): void {
+  const startSeconds = previewStartSeconds.value;
+  const capDuration = previewCapDurationSeconds.value;
+  const sourceVideo = sourcePreviewVideoRef.value;
+  if (sourceVideo && sourceVideo.currentTime < startSeconds) {
+    sourceVideo.currentTime = startSeconds;
+    return;
+  }
+
+  if (capDuration && sourceVideo && sourceVideo.currentTime >= capDuration) {
+    restartPreviewLoop(true);
+    return;
+  }
+
+  queueForegroundPreviewFrame();
+}
+
+function onSourcePreviewSeeking(): void {
+  const startSeconds = previewStartSeconds.value;
+  const capDuration = previewCapDurationSeconds.value;
+  const sourceVideo = sourcePreviewVideoRef.value;
+  if (sourceVideo && sourceVideo.currentTime < startSeconds) {
+    sourceVideo.currentTime = startSeconds;
+    return;
+  }
+
+  if (capDuration && sourceVideo && sourceVideo.currentTime > capDuration) {
+    sourceVideo.currentTime = Math.max(startSeconds, capDuration - 1 / VIDEO_CAPTURE_FPS);
+    return;
+  }
+
+  queueForegroundPreviewFrame();
+}
+
+function onSourcePreviewRateChange(): void {
+  queueForegroundPreviewFrame();
+}
+
+function togglePreviewPlayback(): void {
+  const sourceVideo = sourcePreviewVideoRef.value;
+  if (!sourceVideo) {
+    return;
+  }
+
+  if (sourceVideo.paused) {
+    void sourceVideo.play().catch(() => {
+      statusText.value = "Video playback was blocked by the browser.";
+    });
+    return;
+  }
+
+  sourceVideo.pause();
+}
+
+function resetPreviewPlayback(): void {
+  stopPreviewVideos();
+  const sourceVideo = sourcePreviewVideoRef.value;
+  if (sourceVideo) {
+    sourceVideo.currentTime = previewStartSeconds.value;
+  }
+
+  queueForegroundPreviewFrame();
+}
+
+async function preloadLayerImages(): Promise<Map<string, HTMLImageElement>> {
+  const cache = new Map<string, HTMLImageElement>();
+
+  for (const layer of userLayers.value) {
+    if (layer.type === "image" && layer.visible) {
+      cache.set(layer.id, await loadImageElement(layer.url));
+    }
+  }
+
+  return cache;
+}
+
+function drawTextLayer(context: CanvasRenderingContext2D, layer: TextLayer): void {
+  const bounds = measureLayerBase(layer);
+  context.save();
+  context.translate(layer.x + bounds.width / 2, layer.y + bounds.height / 2);
+  context.rotate((layer.rotation * Math.PI) / 180);
+  context.scale(layer.scale, layer.scale);
+  context.font = fontDescriptor(layer);
+  context.fillStyle = layer.color;
+  context.textBaseline = "top";
+
+  const lines = layer.text.split(/\r?\n/);
+  const lineHeight = layer.fontSize * 1.08;
+  let y = -bounds.height / 2;
+
+  for (const line of lines) {
+    context.fillText(line || " ", -bounds.width / 2, y);
+    y += lineHeight;
+  }
+
+  context.restore();
+}
+
+async function drawVisibleLayers(
+  context: CanvasRenderingContext2D,
+  imageCache: Map<string, HTMLImageElement>,
+  placement: "middle" | "front",
+): Promise<void> {
+  for (const layer of userLayers.value) {
+    if (!layer.visible || layer.placement !== placement) {
+      continue;
+    }
+
+    if (layer.type === "image") {
+      const image = imageCache.get(layer.id);
+      if (!image) {
+        continue;
+      }
+
+      const bounds = measureLayerBase(layer);
+      context.save();
+      context.translate(layer.x + bounds.width / 2, layer.y + bounds.height / 2);
+      context.rotate((layer.rotation * Math.PI) / 180);
+      context.scale(layer.scale, layer.scale);
+      context.drawImage(image, -bounds.width / 2, -bounds.height / 2, bounds.width, bounds.height);
+      context.restore();
+      continue;
+    }
+
+    drawTextLayer(context, layer);
+  }
+}
+
+async function renderCompositeImageCanvas(): Promise<HTMLCanvasElement> {
+  if (!stageSize.value || !sourcePreviewUrl.value) {
+    throw new Error("Choose a base image before exporting.");
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = stageSize.value.width;
+  canvas.height = stageSize.value.height;
+
+  const context = getCanvasContext(canvas);
+  const sourceImage = await loadImageElement(sourcePreviewUrl.value);
+  const imageCache = await preloadLayerImages();
+
+  context.drawImage(sourceImage, 0, 0, canvas.width, canvas.height);
+  await drawVisibleLayers(context, imageCache, "middle");
+
+  if (resultPreviewUrl.value) {
+    const foregroundImage = await loadImageElement(resultPreviewUrl.value);
+    context.drawImage(foregroundImage, 0, 0, canvas.width, canvas.height);
+  }
+
+  await drawVisibleLayers(context, imageCache, "front");
+
+  return canvas;
+}
+
+async function exportCompositeImage(): Promise<void> {
+  if (!sourceSummary.value) {
+    throw new Error("Choose a base image before exporting.");
+  }
+
+  const canvas = await renderCompositeImageCanvas();
+  const blob = await blobFromCanvas(canvas);
+  const link = document.createElement("a");
+  const sourceStem = sourceSummary.value.name.replace(/\.[^.]+$/, "") || "layered-image";
+  link.href = URL.createObjectURL(blob);
+  link.download = resultPreviewUrl.value
+    ? `${sourceStem}-layered.png`
+    : `${sourceStem}-preview.png`;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(link.href), 0);
+}
+
+async function exportCompositeVideo(): Promise<void> {
+  if (typeof VideoEncoder === "undefined") {
+    throw new Error("WebCodecs VideoEncoder is required to export composite videos in this browser.");
+  }
+
+  if (!sourceSummary.value || !sourcePreviewUrl.value || !processedVideoMeta.value || processedVideoFrames.value.length === 0) {
+    throw new Error("Process the video first so the foreground frames exist.");
+  }
+
+  let sourceVideo: HTMLVideoElement | null = null;
+
+  try {
+    const { width, height, startFrame, targetFrames } = processedVideoMeta.value;
+    const frameDurationUs = Math.round(1_000_000 / VIDEO_CAPTURE_FPS);
+    const frameDurationSeconds = 1 / VIDEO_CAPTURE_FPS;
+    const compositeCanvas = document.createElement("canvas");
+    compositeCanvas.width = width;
+    compositeCanvas.height = height;
+    const context = getCanvasContext(compositeCanvas);
+    const imageCache = await preloadLayerImages();
+
+    sourceVideo = await loadDetachedVideo(sourcePreviewUrl.value);
+
+    const sourceLastFrameTime = Math.max(0, sourceVideo.duration - frameDurationSeconds / 2);
+    const { encoderConfig, muxerCodec } = await pickVideoEncoderConfig(width, height);
+    const target = new ArrayBufferTarget();
+    const muxer = new Muxer({
+      target,
+      video: {
+        codec: muxerCodec,
+        width,
+        height,
+        frameRate: VIDEO_CAPTURE_FPS,
+      },
+      firstTimestampBehavior: "offset",
+    });
+
+    let encoderError: Error | null = null;
+    const encoder = new VideoEncoder({
+      output: (chunk, meta) => {
+        muxer.addVideoChunk(chunk, meta);
+      },
+      error: (error) => {
+        encoderError = error instanceof Error ? error : new Error(String(error));
+      },
+    });
+    encoder.configure(encoderConfig);
+
+    for (let frameIndex = 0; frameIndex < targetFrames; frameIndex += 1) {
+      if (encoderError) {
+        throw encoderError;
+      }
+
+      const sourceTime = Math.min((startFrame + frameIndex) * frameDurationSeconds, sourceLastFrameTime);
+
+      await seekVideo(sourceVideo, sourceTime);
+
+      context.clearRect(0, 0, width, height);
+      context.drawImage(sourceVideo, 0, 0, width, height);
+      await drawVisibleLayers(context, imageCache, "middle");
+      const foregroundFrame = processedVideoFrames.value[frameIndex];
+      if (foregroundFrame) {
+        context.drawImage(foregroundFrame, 0, 0, width, height);
+      }
+      await drawVisibleLayers(context, imageCache, "front");
+
+      const frame = new VideoFrame(compositeCanvas, {
+        timestamp: frameIndex * frameDurationUs,
+        duration: frameDurationUs,
+      });
+      encoder.encode(frame, { keyFrame: frameIndex % VIDEO_CAPTURE_FPS === 0 });
+      frame.close();
+
+      progressPercent.value = clampPercent(((frameIndex + 1) / targetFrames) * 100);
+      statusText.value = `Rendering composite video… ${Math.round(progressPercent.value)}%`;
+    }
+
+    await encoder.flush();
+    if (encoderError) {
+      throw encoderError;
+    }
+
+    encoder.close();
+    muxer.finalize();
+
+    const resultBlob = new Blob([target.buffer], { type: "video/webm" });
+    const link = document.createElement("a");
+    const sourceStem = sourceSummary.value.name.replace(/\.[^.]+$/, "") || "layered-video";
+    link.href = URL.createObjectURL(resultBlob);
+    link.download = `${sourceStem}-layered.webm`;
+    link.click();
+    setTimeout(() => URL.revokeObjectURL(link.href), 0);
+  } finally {
+    sourceVideo?.pause();
+    if (sourceVideo) {
+      sourceVideo.removeAttribute("src");
+      sourceVideo.load();
+    }
+  }
+}
+
+async function exportComposite(): Promise<void> {
+  if (!sourceSummary.value) {
+    statusText.value = "Choose an image or video first.";
+    return;
+  }
+
+  isExporting.value = true;
+  errorText.value = "";
+  progressPercent.value = null;
+  statusText.value = selectedMediaKind.value === "video"
+    ? "Preparing composite WebM export…"
+    : "Rendering composite PNG…";
+
+  try {
+    if (selectedMediaKind.value === "video") {
+      await exportCompositeVideo();
+      statusText.value = "Composite WebM exported.";
+      return;
+    }
+
+    await exportCompositeImage();
+    statusText.value = "Composite PNG exported.";
+  } catch (error) {
+    errorText.value = error instanceof Error ? error.message : String(error);
+    statusText.value = "The composite could not be exported.";
+  } finally {
+    isExporting.value = false;
+    if (!errorText.value) {
+      syncIdleStatus();
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="shell">
+    <aside class="sidebar">
+      <header class="hero hero-compact">
+        <h1>RMBG Layers</h1>
+      </header>
+
+      <section class="status-grid">
+        <div class="status-item">
+          <p class="label">Model</p>
+          <p class="value">{{ modelStateLabel }}</p>
+        </div>
+        <div class="status-item">
+          <p class="label">Backend</p>
+          <p class="value">{{ activeBackend }}</p>
+        </div>
+        <div class="status-item">
+          <p class="label">Canvas</p>
+          <p class="value">{{ stageDimensionsLabel }}</p>
+        </div>
+        <div class="status-item">
+          <p class="label">Progress</p>
+          <p class="value">{{ progressLabel }}</p>
+        </div>
+        <div class="status-item status-wide">
+          <p class="label">Status</p>
+          <p class="status-text">{{ statusText }}</p>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-row">
+          <p class="section-title">Source</p>
+          <button
+            class="button button-secondary"
+            type="button"
+            :disabled="loadButtonDisabled"
+            @click="loadSelectedModel"
+          >
+            {{ isModelLoading ? "Loading model…" : isReady ? "Reload model" : "Load model" }}
+          </button>
+        </div>
+
+        <div
+          class="dropzone"
+          :class="{ 'dropzone-active': isDragging }"
+          @dragenter.prevent="onDragEnter"
+          @dragover.prevent="isDragging = true"
+          @dragleave="onDragLeave"
+          @drop.prevent="onDrop"
+        >
+          <input
+            ref="fileInput"
+            hidden
+            type="file"
+            :accept="ACCEPTED_FILE_TYPES"
+            @change="onFileInputChanged"
+          />
+          <p class="dropzone-title">
+            {{ hasSource ? "Replace image or video" : "Drop an image or video here" }}
+          </p>
+          <p class="dropzone-copy">
+            PNG, JPG, WebP, MP4, WebM, MOV, and M4V are supported.
+          </p>
+          <button class="button button-secondary" type="button" @click.stop="openFilePicker">
+            Choose file
+          </button>
+        </div>
+
+      </section>
+
+      <section v-if="hasVideoSource" class="section">
+        <p class="section-title">Video</p>
+
+        <div class="field-grid">
+          <label class="field">
+            <span class="label">Start frame</span>
+            <input v-model="startFrameInput" class="field-input" type="text" inputmode="numeric" />
+          </label>
+          <label class="field">
+            <span class="label">Frame cap</span>
+            <input v-model="videoFrameCapInput" class="field-input" type="text" inputmode="numeric" placeholder="Full clip" />
+          </label>
+        </div>
+
+        <div class="button-row">
+          <button class="button button-secondary" type="button" :disabled="!hasSource" @click="togglePreviewPlayback">
+            {{ isPreviewPlaying ? "Pause preview" : "Play preview" }}
+          </button>
+          <button class="button button-secondary" type="button" :disabled="!hasSource" @click="resetPreviewPlayback">
+            Reset preview
+          </button>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="section-row">
+          <p class="section-title">Layers</p>
+          <button class="button button-primary" type="button" :disabled="!hasSource" @click="addTextLayer">
+            Add text
+          </button>
+          <button class="button button-secondary" type="button" :disabled="!hasSource" @click="openLayerImagePicker">
+            Add image
+          </button>
+        </div>
+
+        <input
+          ref="layerImageInput"
+          hidden
+          type="file"
+          accept="image/png,image/jpeg,image/webp"
+          @change="onLayerImageInputChanged"
+        />
+
+        <ul v-if="userLayers.length" class="layer-list">
+          <li
+            v-for="(layer, index) in userLayers"
+            :key="layer.id"
+            class="layer-row"
+            :class="{ 'layer-row-selected': selectedLayerId === layer.id }"
+            @click="toggleLayerSelection(layer.id)"
+          >
+            <button class="layer-main" type="button" @click.stop="toggleLayerSelection(layer.id)">
+              <span class="layer-name">{{ layer.name }}</span>
+              <span class="layer-kind">{{ layer.type }} · {{ layer.placement === "front" ? "above" : "behind" }}</span>
+            </button>
+            <div class="layer-actions">
+              <button class="icon-button" type="button" @click.stop="layer.visible = !layer.visible">
+                {{ layer.visible ? "Hide" : "Show" }}
+              </button>
+              <button class="icon-button" type="button" :disabled="index === 0" @click.stop="moveLayer(layer.id, 'down')">
+                Back
+              </button>
+              <button
+                class="icon-button"
+                type="button"
+                :disabled="index === userLayers.length - 1"
+                @click.stop="moveLayer(layer.id, 'up')"
+              >
+                Front
+              </button>
+              <button class="icon-button icon-danger" type="button" @click.stop="removeLayer(layer.id)">
+                Delete
+              </button>
+            </div>
+          </li>
+        </ul>
+
+        <p v-else class="empty-note">
+          No layers yet.
+        </p>
+      </section>
+
+      <section class="section">
+        <p class="section-title">Selected layer</p>
+
+        <div v-if="selectedTextLayer" class="inspector">
+          <label class="field">
+            <span class="label">Text</span>
+            <textarea
+              v-model="selectedTextLayer.text"
+              class="field-input field-textarea"
+              rows="4"
+              @input="syncSelectedTextPosition"
+            />
+          </label>
+          <div class="field-grid">
+            <label class="field">
+              <span class="label">Size</span>
+              <input
+                v-model.number="selectedTextLayer.fontSize"
+                class="field-input"
+                type="number"
+                min="12"
+                max="640"
+                @input="syncSelectedTextPosition"
+              />
+            </label>
+            <label class="field">
+              <span class="label">Weight</span>
+              <select v-model.number="selectedTextLayer.fontWeight" class="field-input">
+                <option v-for="weight in FONT_WEIGHT_OPTIONS" :key="weight" :value="weight">
+                  {{ weight }}
+                </option>
+              </select>
+            </label>
+          </div>
+          <div class="field-grid">
+            <label class="field">
+              <span class="label">Style</span>
+              <select v-model="selectedTextLayer.fontStyle" class="field-input">
+                <option value="normal">Normal</option>
+                <option value="italic">Italic</option>
+              </select>
+            </label>
+            <label class="field">
+              <span class="label">Color</span>
+              <input v-model="selectedTextLayer.color" class="field-input field-color" type="color" />
+            </label>
+          </div>
+          <div class="field-grid">
+            <label class="field">
+              <span class="label">Scale</span>
+              <input
+                v-model.number="selectedTextLayer.scale"
+                class="field-input"
+                type="number"
+                min="0.1"
+                max="8"
+                step="0.05"
+                @input="syncSelectedLayerTransform"
+              />
+            </label>
+            <label class="field">
+              <span class="label">Rotate</span>
+              <input
+                v-model.number="selectedTextLayer.rotation"
+                class="field-input"
+                type="number"
+                step="1"
+              />
+            </label>
+          </div>
+          <label class="field">
+            <span class="label">Family</span>
+            <select v-model="selectedTextLayer.fontFamily" class="field-input">
+              <option v-for="family in FONT_FAMILY_OPTIONS" :key="family" :value="family">
+                {{ family }}
+              </option>
+            </select>
+          </label>
+          <label class="field">
+            <span class="label">Placement</span>
+            <select v-model="selectedTextLayer.placement" class="field-input">
+              <option value="middle">Behind subject</option>
+              <option value="front">Above subject</option>
+            </select>
+          </label>
+          <div class="button-row">
+            <button class="button button-secondary" type="button" @click="duplicateSelectedTextLayer">
+              Duplicate text
+            </button>
+          </div>
+        </div>
+
+        <div v-else-if="selectedImageLayer" class="inspector">
+          <label class="field">
+            <span class="label">Layer name</span>
+            <input v-model="selectedImageLayer.name" class="field-input" type="text" />
+          </label>
+          <label class="field">
+            <span class="label">Width</span>
+            <input
+              v-model.number="selectedImageLayer.width"
+              class="field-input"
+              type="number"
+              min="24"
+              @input="syncSelectedImageSize"
+            />
+          </label>
+          <div class="field-grid">
+            <label class="field">
+              <span class="label">Scale</span>
+              <input
+                v-model.number="selectedImageLayer.scale"
+                class="field-input"
+                type="number"
+                min="0.1"
+                max="8"
+                step="0.05"
+                @input="syncSelectedLayerTransform"
+              />
+            </label>
+            <label class="field">
+              <span class="label">Rotate</span>
+              <input
+                v-model.number="selectedImageLayer.rotation"
+                class="field-input"
+                type="number"
+                step="1"
+              />
+            </label>
+          </div>
+          <label class="field">
+            <span class="label">Placement</span>
+            <select v-model="selectedImageLayer.placement" class="field-input">
+              <option value="middle">Behind subject</option>
+              <option value="front">Above subject</option>
+            </select>
+          </label>
+        </div>
+
+        <p v-else class="empty-note">
+          Select a layer.
+        </p>
+      </section>
+
+      <section class="section">
+        <div class="button-row">
+          <button class="button button-primary" type="button" :disabled="!canRun" @click="runInference">
+            {{ processLabel }}
+          </button>
+          <button class="button button-secondary" type="button" :disabled="!canExport" @click="exportComposite">
+            {{ isExporting ? "Exporting…" : exportLabel }}
+          </button>
+        </div>
+
+        <div v-if="resultSummary" class="meta-card">
+          <p><span>Output</span>{{ resultSummary.output }}</p>
+          <p><span>Backend</span>{{ resultSummary.backend }}</p>
+          <p><span>Time</span>{{ resultSummary.duration }}</p>
+          <p v-if="resultSummary.fps"><span>Frame rate</span>{{ resultSummary.fps }}</p>
+          <p v-if="resultSummary.frames"><span>Frames</span>{{ resultSummary.frames }}</p>
+          <p v-if="resultSummary.note" class="meta-note">{{ resultSummary.note }}</p>
+        </div>
+
+        <p v-if="errorText" class="error-text">{{ errorText }}</p>
+      </section>
+    </aside>
+
+    <main class="workspace">
+      <section class="panel editor-panel">
+        <div
+          ref="editorViewportRef"
+          class="editor-viewport"
+          tabindex="0"
+          @keydown="onStageKeyDown"
+        >
+          <div
+            v-if="hasSource && stageSize"
+            ref="stageFrameRef"
+            class="editor-stage-frame"
+            :style="stageFrameStyle"
+          >
+            <div class="editor-stage-surface" :style="stageSurfaceStyle" @pointerdown.self="clearSelection">
+              <img
+                v-if="selectedMediaKind === 'image'"
+                class="stage-media stage-base"
+                :src="sourcePreviewUrl"
+                alt="Base image"
+                draggable="false"
+              />
+              <video
+                v-else
+                ref="sourcePreviewVideoRef"
+                class="stage-media stage-base"
+                :src="sourcePreviewUrl"
+                muted
+                playsinline
+                preload="metadata"
+                @loadedmetadata="onSourcePreviewLoaded"
+                @play="onSourcePreviewPlay"
+                @pause="onSourcePreviewPause"
+                @timeupdate="onSourcePreviewTimeUpdate"
+                @seeking="onSourcePreviewSeeking"
+                @ratechange="onSourcePreviewRateChange"
+              />
+
+              <template v-for="layer in middleLayers" :key="layer.id">
+                <div
+                  class="stage-layer stage-layer-shell"
+                  :class="{ 'stage-layer-selected': selectedLayerId === layer.id }"
+                  :style="layerStyle(layer)"
+                  @pointerdown="startLayerDrag($event, layer.id)"
+                  @click.stop="onLayerClick(layer.id)"
+                >
+                  <img
+                    v-if="layer.type === 'image'"
+                    class="stage-layer-content stage-layer-image"
+                    :src="layer.url"
+                    :alt="layer.name"
+                    draggable="false"
+                  />
+                  <div v-else class="stage-layer-content stage-layer-text">
+                    {{ layer.text }}
+                  </div>
+                </div>
+              </template>
+
+              <img
+                v-if="selectedMediaKind === 'image' && hasForeground"
+                class="stage-media stage-foreground"
+                :src="resultPreviewUrl"
+                alt="Foreground cutout"
+                draggable="false"
+              />
+              <canvas
+                v-else-if="selectedMediaKind === 'video' && hasForeground"
+                ref="resultPreviewCanvasRef"
+                class="stage-media stage-foreground"
+              />
+
+              <template v-for="layer in frontLayers" :key="`${layer.id}-front`">
+                <div
+                  class="stage-layer stage-layer-shell"
+                  :class="{ 'stage-layer-selected': selectedLayerId === layer.id }"
+                  :style="layerStyle(layer)"
+                  @pointerdown="startLayerDrag($event, layer.id)"
+                  @click.stop="onLayerClick(layer.id)"
+                >
+                  <img
+                    v-if="layer.type === 'image'"
+                    class="stage-layer-content stage-layer-image"
+                    :src="layer.url"
+                    :alt="layer.name"
+                    draggable="false"
+                  />
+                  <div v-else class="stage-layer-content stage-layer-text">
+                    {{ layer.text }}
+                  </div>
+                </div>
+              </template>
+
+              <div
+                v-if="selectedLayerOutlineStyle"
+                class="stage-selection-overlay"
+                :style="selectedLayerOutlineStyle"
+              >
+                <div class="stage-selection-outline" />
+                <button
+                  class="layer-handle layer-handle-rotate"
+                  type="button"
+                  @click.stop
+                  @pointerdown="selectedLayer && startLayerTransform($event, selectedLayer.id, 'rotate')"
+                >
+                  ↻
+                </button>
+                <button
+                  class="layer-handle layer-handle-scale"
+                  type="button"
+                  @click.stop
+                  @pointerdown="selectedLayer && startLayerTransform($event, selectedLayer.id, 'scale')"
+                >
+                  ↘
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div v-else class="editor-empty">
+            <p>Drop a source to start.</p>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>

src/env.d.ts

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

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./style.css";
+
+createApp(App).mount("#app");

src/style.css

@@ -0,0 +1,547 @@
+:root {
+  color-scheme: light;
+  font-family:
+    "Space Grotesk",
+    "Avenir Next",
+    "Segoe UI",
+    sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  --paper: #f4f4f2;
+  --ink: #171717;
+  --muted: #666666;
+  --panel: rgba(250, 250, 248, 0.96);
+  --panel-strong: #ffffff;
+  --border: rgba(23, 23, 23, 0.14);
+  --accent: #2a2a2a;
+  --accent-strong: #111111;
+  --error: #8a1f1f;
+  background:
+    radial-gradient(circle at top, rgba(0, 0, 0, 0.04), transparent 42%),
+    linear-gradient(180deg, #fbfbfa 0%, #f0f0ed 100%);
+  color: var(--ink);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+button {
+  border: 0;
+  background: none;
+  color: inherit;
+}
+
+img,
+video {
+  display: block;
+  max-width: 100%;
+}
+
+.shell {
+  display: grid;
+  min-height: 100vh;
+  grid-template-columns: 360px minmax(0, 1fr);
+  gap: 14px;
+  padding: 14px;
+  align-items: start;
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 28px;
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.06);
+}
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: calc(100vh - 28px);
+  padding: 10px 4px 10px 6px;
+}
+
+.hero {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 6px 2px;
+}
+
+.hero h1 {
+  margin: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.hero-compact {
+  min-height: auto;
+}
+
+.dropzone-copy,
+.empty-note,
+.status-text,
+.editor-empty span,
+.meta-note {
+  margin: 0;
+  color: var(--muted);
+}
+
+.status-grid {
+  display: grid;
+  gap: 8px 14px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  padding: 8px 6px 10px;
+  border-block: 1px solid var(--border);
+}
+
+.status-wide {
+  grid-column: 1 / -1;
+}
+
+.label {
+  margin: 0 0 4px;
+  font-size: 0.76rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.value,
+.status-text {
+  margin: 0;
+}
+
+.value {
+  font-size: 0.95rem;
+}
+
+.section {
+  display: grid;
+  gap: 8px;
+  padding: 4px 6px 8px;
+}
+
+.section + .section {
+  border-top: 1px solid var(--border);
+  padding-top: 10px;
+}
+
+.section-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 0.82rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.dropzone {
+  display: grid;
+  place-items: center;
+  gap: 8px;
+  min-height: 148px;
+  padding: 16px;
+  border: 1.5px dashed rgba(23, 23, 23, 0.22);
+  border-radius: 24px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(245, 245, 243, 0.96));
+  text-align: center;
+  cursor: pointer;
+  transition:
+    transform 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease;
+}
+
+.dropzone-active {
+  border-color: rgba(23, 23, 23, 0.38);
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.07);
+}
+
+.dropzone-title {
+  margin: 0;
+  font-size: 1.15rem;
+  font-weight: 700;
+}
+
+.button-row,
+.layer-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.button,
+.icon-button {
+  border: 1px solid transparent;
+  border-radius: 999px;
+  padding: 10px 16px;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    transform 180ms ease,
+    opacity 180ms ease,
+    background 180ms ease;
+}
+
+.icon-button {
+  padding: 7px 11px;
+  font-size: 0.83rem;
+}
+
+.button:disabled,
+.icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.button:not(:disabled):hover,
+.icon-button:not(:disabled):hover {
+  transform: translateY(-1px);
+}
+
+.button-primary {
+  background: linear-gradient(180deg, #2a2a2a, #111111);
+  color: white;
+  border-color: rgba(0, 0, 0, 0.4);
+}
+
+.button-secondary,
+.icon-button {
+  background: rgba(255, 255, 255, 0.92);
+  border: 1px solid rgba(23, 23, 23, 0.18);
+  color: var(--ink);
+}
+
+.icon-danger {
+  color: var(--error);
+}
+
+.field,
+.inspector {
+  display: grid;
+  gap: 6px;
+}
+
+.field-grid {
+  display: grid;
+  gap: 6px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.field-input {
+  width: 100%;
+  border: 1px solid rgba(23, 23, 23, 0.18);
+  border-radius: 16px;
+  padding: 10px 12px;
+  background: rgba(255, 255, 255, 0.92);
+  color: var(--ink);
+}
+
+.field-textarea {
+  resize: vertical;
+  min-height: 88px;
+}
+
+.field-color {
+  min-height: 50px;
+  padding: 8px;
+}
+
+.meta-card {
+  display: grid;
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid rgba(23, 23, 23, 0.12);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.72);
+}
+
+.meta-card p {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+  margin: 0;
+}
+
+.meta-card .meta-note {
+  display: block;
+}
+
+.meta-card span {
+  color: var(--muted);
+}
+
+.layer-list {
+  display: grid;
+  gap: 8px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.layer-row {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid rgba(23, 23, 23, 0.12);
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.68);
+}
+
+.layer-row-selected {
+  border-color: rgba(23, 23, 23, 0.3);
+  box-shadow: inset 0 0 0 1px rgba(23, 23, 23, 0.08);
+}
+
+.layer-main {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  width: 100%;
+  padding: 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.layer-name {
+  font-weight: 700;
+}
+
+.layer-kind {
+  color: var(--muted);
+  text-transform: capitalize;
+}
+
+.error-text {
+  margin: 0;
+  color: var(--error);
+}
+
+.workspace {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-self: start;
+  position: sticky;
+  top: 14px;
+}
+
+.editor-panel {
+  display: grid;
+  height: calc(100vh - 28px);
+  padding: 8px;
+}
+
+.editor-viewport {
+  display: grid;
+  place-items: center;
+  position: relative;
+  overflow: hidden;
+  min-height: 0;
+  height: 100%;
+  padding: 10px;
+  border-radius: 20px;
+  background:
+    radial-gradient(circle at center, rgba(0, 0, 0, 0.035), transparent 56%),
+    rgba(255, 255, 255, 0.82);
+  outline: none;
+}
+
+.editor-stage-frame {
+  position: relative;
+  overflow: hidden;
+  border-radius: 20px;
+  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.08);
+}
+
+.editor-stage-surface {
+  position: absolute;
+  inset: 0 auto auto 0;
+  overflow: hidden;
+  transform-origin: top left;
+  background-color: #f7f7f7;
+  background-image:
+    linear-gradient(45deg, #e6e6e6 25%, transparent 25%),
+    linear-gradient(-45deg, #e6e6e6 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #e6e6e6 75%),
+    linear-gradient(-45deg, transparent 75%, #e6e6e6 75%);
+  background-position:
+    0 0,
+    0 10px,
+    10px -10px,
+    -10px 0;
+  background-size: 20px 20px;
+}
+
+.stage-media,
+.stage-layer {
+  position: absolute;
+}
+
+.stage-media {
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  user-select: none;
+  pointer-events: none;
+}
+
+.stage-layer {
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+  overflow: visible;
+}
+
+.stage-layer:active {
+  cursor: grabbing;
+}
+
+.stage-layer-shell {
+  display: inline-block;
+}
+
+.stage-layer-content {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.stage-layer-selected {
+  outline: 2px solid rgba(23, 23, 23, 0.7);
+  outline-offset: 2px;
+}
+
+.stage-selection-overlay {
+  position: absolute;
+  pointer-events: none;
+  z-index: 3;
+  overflow: visible;
+}
+
+.stage-selection-outline {
+  width: 100%;
+  height: 100%;
+  border: 2px solid rgba(23, 23, 23, 0.72);
+}
+
+.stage-layer-text {
+  display: inline-block;
+  min-width: 28px;
+  width: max-content;
+  max-width: none;
+  white-space: pre;
+  line-height: 1.08;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
+}
+
+.stage-layer-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.layer-handle {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border: 1px solid rgba(23, 23, 23, 0.18);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
+  font-size: 0.9rem;
+  line-height: 1;
+  cursor: pointer;
+  z-index: 2;
+  pointer-events: auto;
+}
+
+.layer-handle-rotate {
+  top: -14px;
+  right: -14px;
+  cursor: crosshair;
+}
+
+.layer-handle-scale {
+  right: -14px;
+  bottom: -14px;
+  cursor: nwse-resize;
+}
+
+.editor-empty {
+  display: grid;
+  gap: 6px;
+  max-width: 14rem;
+  text-align: center;
+}
+
+.editor-empty p {
+  margin: 0;
+  font-weight: 700;
+}
+
+@media (max-width: 1180px) {
+  .shell {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace {
+    position: static;
+  }
+
+  .sidebar,
+  .editor-panel {
+    min-height: auto;
+    height: auto;
+  }
+}
+
+@media (max-width: 720px) {
+  .shell {
+    padding: 10px;
+    gap: 10px;
+  }
+
+  .field-grid,
+  .status-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .editor-viewport {
+    min-height: 360px;
+    padding: 8px;
+  }
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "noEmit": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "vite.config.ts"]
+}

vite.config.ts

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