\n {/* Client bundle that hydrates the Preact app */}\n \n \n \n );\n}",[133],"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);",[141],"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

Branches1

Branches
1