[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_206":207,"_208":209},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_154":-5,"_20":155,"_22":156,"_157":158,"_159":160,"_25":161,"_24":-5,"_162":-5,"_163":-5,"_164":56,"_165":166,"_167":56,"_168":-5,"_169":-5,"_170":171},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","themichaellai","name","image-inpainting","branchName","main","version","path","","project",{"_36":100,"_13":14,"_48":101,"_102":-5,"_103":56,"_104":105,"_106":105,"_107":-5,"_108":-5,"_109":110,"_111":-5,"_112":47,"_113":-5,"_114":-5,"_115":116,"_117":118,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":124,"_125":124,"_126":127,"_128":127,"_129":127,"_130":124,"_131":124,"_132":133,"_134":135,"_136":137,"_138":56},"tree",[83,84,85,86],"file","contents",[32,33,34,35],"upstream","pull","ahead","behind","envVars",{"_36":75,"_13":76,"_39":77,"_41":-5,"_42":43,"_44":78,"_46":47,"_48":79,"_17":80,"_51":52,"_53":81,"_55":56,"_57":-5,"_18":82},{"_36":67,"_13":68,"_39":69,"_41":-5,"_42":43,"_44":70,"_46":47,"_48":71,"_17":72,"_51":52,"_53":73,"_55":56,"_57":-5,"_18":74},{"_36":59,"_13":60,"_39":61,"_41":-5,"_42":43,"_44":62,"_46":47,"_48":63,"_17":64,"_51":52,"_53":65,"_55":56,"_57":-5,"_18":66},{"_36":37,"_13":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":58},"id","18677aba-29c1-11f0-9ec7-569c3dd06744","main.tsx","fileId","5a1e5998-29c0-11f0-865c-569c3dd06744","parentId","branchId","8fa8c6f0-29bd-11f0-b631-569c3dd06744","branchVersion",28,"latest",true,"createdAt",["D",1746456976318],9,"fileType","script","content","/** @jsxImportSource https://esm.sh/preact */\nimport { render } from \"npm:preact-render-to-string\";\n\n// import { h } from \"npm:preact\";\nimport { HTML } from \"./html.tsx\";\n\n/**\n * Val Town HTTP val – returns the mask-editor page.\n */\nexport default async function(req: Request): Promise {\n const body = \"\" + render();\n return new Response(body, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}","deleted",false,"label",[38],"fe8ebe32-29c0-11f0-ab89-569c3dd06744","html.tsx","67509a40-29c0-11f0-9fe4-569c3dd06744",26,["D",1746456932962],4,"/** @jsxImportSource https://esm.sh/preact */\nimport { render } from \"npm:preact-render-to-string\";\n\n// import { h } from \"preact\";\n\nexport function HTML() {\n return (\n \n \n \n \n Mask Editor • Val Town\n\n {/* Basic styles */}\n \n\n {/* Import-map so the browser can import Preact & friends */}\n \n \n\n \n

\n {/* Client bundle that hydrates the Preact app */}\n \n \n \n );\n}",[60],"d212030a-29c0-11f0-a769-569c3dd06744","client.ts","7bfea036-29c0-11f0-b296-569c3dd06744",20,["D",1746456858324],5,"/** @jsxImportSource https://esm.sh/preact */\nimport { render } from \"npm:preact-render-to-string\";\n\n// import { h, render } from \"preact\";\nimport App from \"./App.tsx\";\n\nconst container = document.getElementById(\"app\")!;\nrender(, container);",[68],"09efe2c4-29c1-11f0-9b07-569c3dd06744","App.tsx","9484e890-29c0-11f0-8962-569c3dd06744",27,["D",1746456952052],3,"/** @jsxImportSource preact */\n// import { h } from \"preact\";\nimport { useEffect, useRef, useState } from \"npm:preact/hooks\";\n\nexport default function App() {\n const [imageSrc, setImageSrc] = useState(null);\n const [ready, setReady] = useState(false);\n\n // Canvas refs\n const baseCanvas = useRef(null); // shows uploaded image\n const drawCanvas = useRef(null); // red overlay for drawing\n const maskCanvas = useRef(null); // hidden, true mask (white bg, transparent strokes)\n\n const drawing = useRef(false); // pointer state\n\n /** Handle file upload -> DataURL */\n const onFileChange = (e: Event) => {\n const file = (e.target as HTMLInputElement).files?.[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = () => {\n setImageSrc(reader.result as string);\n setReady(false); // will flip true once image is loaded\n };\n reader.readAsDataURL(file);\n };\n\n /** Once imageSrc changes, draw it onto baseCanvas and size all canvases */\n useEffect(() => {\n if (!imageSrc) return;\n const img = new Image();\n img.src = imageSrc;\n img.onload = () => {\n const { width, height } = img;\n [baseCanvas, drawCanvas, maskCanvas].forEach((ref) => {\n const c = ref.current!;\n c.width = width;\n c.height = height;\n });\n\n // Draw uploaded image\n baseCanvas.current!.getContext(\"2d\")!.drawImage(img, 0, 0);\n\n // Prepare mask canvas: opaque white everywhere to start\n const mctx = maskCanvas.current!.getContext(\"2d\")!;\n mctx.fillStyle = \"white\";\n mctx.fillRect(0, 0, width, height);\n\n drawCanvas.current!.getContext(\"2d\")!.clearRect(0, 0, width, height);\n setReady(true);\n };\n }, [imageSrc]);\n\n /* Helper: convert pointer to canvas coords */\n const pos = (e: PointerEvent) => {\n const rect = drawCanvas.current!.getBoundingClientRect();\n return { x: e.clientX - rect.left, y: e.clientY - rect.top };\n };\n\n /* Start drawing */\n const pointerDown = (e: PointerEvent) => {\n if (!ready) return;\n drawing.current = true;\n const { x, y } = pos(e);\n\n const overlay = drawCanvas.current!.getContext(\"2d\")!;\n overlay.lineWidth = 20;\n overlay.lineCap = \"round\";\n overlay.strokeStyle = \"rgba(255,0,0,0.6)\";\n overlay.beginPath();\n overlay.moveTo(x, y);\n\n const mctx = maskCanvas.current!.getContext(\"2d\")!;\n mctx.lineWidth = 20;\n mctx.lineCap = \"round\";\n mctx.globalCompositeOperation = \"destination-out\"; // make strokes transparent\n mctx.beginPath();\n mctx.moveTo(x, y);\n\n drawCanvas.current!.setPointerCapture(e.pointerId);\n };\n\n /* Continue drawing */\n const pointerMove = (e: PointerEvent) => {\n if (!drawing.current) return;\n const { x, y } = pos(e);\n\n drawCanvas.current!.getContext(\"2d\")!.lineTo(x, y);\n drawCanvas.current!.getContext(\"2d\")!.stroke();\n\n const mctx = maskCanvas.current!.getContext(\"2d\")!;\n mctx.lineTo(x, y);\n mctx.stroke();\n };\n\n /* End drawing */\n const pointerUp = (e: PointerEvent) => {\n if (!drawing.current) return;\n drawing.current = false;\n\n drawCanvas.current!.getContext(\"2d\")!.closePath();\n const mctx = maskCanvas.current!.getContext(\"2d\")!;\n mctx.closePath();\n mctx.globalCompositeOperation = \"source-over\";\n\n drawCanvas.current!.releasePointerCapture(e.pointerId);\n };\n\n /* Attach pointer listeners once canvas exists */\n useEffect(() => {\n const canvas = drawCanvas.current;\n if (!canvas) return;\n canvas.addEventListener(\"pointerdown\", pointerDown);\n canvas.addEventListener(\"pointermove\", pointerMove);\n canvas.addEventListener(\"pointerup\", pointerUp);\n return () => {\n canvas.removeEventListener(\"pointerdown\", pointerDown);\n canvas.removeEventListener(\"pointermove\", pointerMove);\n canvas.removeEventListener(\"pointerup\", pointerUp);\n };\n }, [ready]);\n\n /* Export mask.png – white + transparent regions */\n const exportMask = () => {\n if (!ready) return;\n const link = document.createElement(\"a\");\n link.download = \"mask.png\";\n link.href = maskCanvas.current!.toDataURL(\"image/png\");\n link.click();\n };\n\n /* Clear mask & overlay */\n const clearMask = () => {\n if (!ready) return;\n const { width, height } = maskCanvas.current!;\n drawCanvas.current!.getContext(\"2d\")!.clearRect(0, 0, width, height);\n const mctx = maskCanvas.current!.getContext(\"2d\")!;\n mctx.fillStyle = \"white\";\n mctx.fillRect(0, 0, width, height);\n };\n\n return (\n

OpenAI In-painting Mask Editor

\n\n \n\n {imageSrc && (\n \n

\n )}\n\n {imageSrc && (\n

\n \n \n

\n )}\n\n {/* Hidden canvas that stores the real PNG mask */}\n

Code