[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_179":180,"_181":182},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",11,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","processImage.ts","latestPath","fileId","e22b74c6-fabf-11f0-892a-42dde27851f2","name","fileType","script","content","import { AnalysisResult, ColorThresholds } from \"../types\";\n\n/**\n * Contextual Distance Transform with Scalable SVG Output.\n * Generates an SVG string containing:\n * - A black background.\n * - Faint underlay of the original image (10% opacity).\n * - Red probe points (heatmap-style) as vector paths.\n * - High-precision white vectors (lines with SVG markers) connecting probes to references.\n */\n\nexport async function processImage(\n imageData: ImageData,\n thresholds: ColorThresholds,\n originalImageUri: string,\n onProgress: (p: number) => void,\n): Promise {\n const { width, height, data } = imageData;\n const targetPoints: [number, number][] = [];\n const whitePoints: [number, number][] = [];\n const blackPoints: [number, number][] = [];\n\n const isWhiteMask = new Uint8Array(width * height);\n const diagonal = Math.sqrt(width * width + height * height);\n const maxVisualDistance = diagonal * 0.03;\n\n // 1. Classification Pass\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const idx = (y * width + x) * 4;\n const r = data[idx];\n const g = data[idx + 1];\n const b = data[idx + 2];\n const brightness = (r + g + b) / 3;\n\n const isRed = r > thresholds.red.r - thresholds.red.tolerance &&\n g < thresholds.red.g + thresholds.red.tolerance &&\n b < thresholds.red.b + thresholds.red.tolerance;\n\n if (isRed) targetPoints.push([x, y]);\n if (brightness >= thresholds.white.brightness) {\n whitePoints.push([x, y]);\n isWhiteMask[y * width + x] = 1;\n }\n if (brightness <= thresholds.black.brightness) blackPoints.push([x, y]);\n }\n if (y % 50 === 0) onProgress((y / height) * 0.1);\n }\n\n if (targetPoints.length === 0) throw new Error(\"No red pixels found.\");\n if (whitePoints.length === 0 && blackPoints.length === 0) {\n throw new Error(\"No reference pixels (B/W) found.\");\n }\n\n const distances: number[] = [];\n let sumDist = 0;\n let maxDist = 0;\n let minDist = Infinity;\n\n // Collection for vector lines\n const vectorLines: string[] = [];\n const probePathBuckets: string[] = Array(10).fill(\"\");\n\n const isNearWhite = (px: number, py: number) => {\n const r = 2;\n for (let dy = -r; dy <= r; dy++) {\n for (let dx = -r; dx <= r; dx++) {\n const nx = px + dx;\n const ny = py + dy;\n if (nx >= 0 && nx < width && ny >= 0 && ny < height) {\n if (isWhiteMask[ny * width + nx]) return true;\n }\n }\n }\n return false;\n };\n\n // 2. Distance Computation & Geometry Construction\n // Sample vectors to maintain SVG performance (max ~8000 lines)\n const vectorStep = Math.max(1, Math.floor(targetPoints.length / 8000));\n\n for (let i = 0; i < targetPoints.length; i++) {\n const [tx, ty] = targetPoints[i];\n const onWhite = isNearWhite(tx, ty);\n const referenceSet = onWhite ? blackPoints : whitePoints;\n\n let minD = Infinity;\n let closestPt: [number, number] | null = null;\n\n for (let j = 0; j < referenceSet.length; j++) {\n const [rx, ry] = referenceSet[j];\n const dx = tx - rx;\n const dy = ty - ry;\n const dSq = dx * dx + dy * dy;\n if (dSq < minD * minD) {\n minD = Math.sqrt(dSq);\n closestPt = [rx, ry];\n }\n if (minD < 0.5) {\n minD = 0;\n closestPt = [rx, ry];\n break;\n }\n }\n\n distances.push(minD);\n sumDist += minD;\n if (minD > maxDist) maxDist = minD;\n if (minD < minDist) minDist = minD;\n\n // Build vector lines with marker reference\n if (closestPt && i % vectorStep === 0) {\n const [rx, ry] = closestPt;\n // Only draw arrowhead if distance is >= 2px\n const markerAttr = minD >= 2 ? ' marker-end=\"url(#arrowhead)\"' : \"\";\n vectorLines.push(\n ``,\n );\n }\n\n // Add to probe path bucket (all probes represented)\n const alphaLevel = Math.min(9, Math.floor((minD / maxVisualDistance) * 10));\n probePathBuckets[alphaLevel] += `M${tx},${ty}h0.1`;\n\n if (i % 2000 === 0) onProgress(0.1 + (i / targetPoints.length) * 0.8);\n }\n\n // 3. Assemble SVG String\n let probeElements = \"\";\n probePathBuckets.forEach((path, i) => {\n if (path) {\n const opacity = (i + 1) / 10;\n probeElements +=\n ``;\n }\n });\n\n const svgString = `\n \n `.trim();\n\n const base64Svg = btoa(unescape(encodeURIComponent(svgString)));\n const processedImageUrl = `data:image/svg+xml;base64,${base64Svg}`;\n\n onProgress(1.0);\n\n return {\n distances,\n averageDistance: sumDist / targetPoints.length,\n maxDistance: maxDist,\n minDistance: minDist === Infinity ? 0 : minDist,\n targetPixelCount: targetPoints.length,\n processedImageUrl,\n imageWidth: width,\n imageHeight: height,\n };\n}","import { AnalysisResult, ColorThresholds } from \"./types\";\n\n/**\n * Contextual Distance Transform with Scalable SVG Output.\n * Generates an SVG string containing:\n * - A black background.\n * - Faint underlay of the original image (10% opacity).\n * - Red probe points (heatmap-style) as vector paths.\n * - High-precision white vectors (lines with SVG markers) connecting probes to references.\n */\n\nexport async function processImage(\n imageData: ImageData,\n thresholds: ColorThresholds,\n originalImageUri: string,\n onProgress: (p: number) => void,\n): Promise {\n const { width, height, data } = imageData;\n const targetPoints: [number, number][] = [];\n const whitePoints: [number, number][] = [];\n const blackPoints: [number, number][] = [];\n\n const isWhiteMask = new Uint8Array(width * height);\n const diagonal = Math.sqrt(width * width + height * height);\n const maxVisualDistance = diagonal * 0.03;\n\n // 1. Classification Pass\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const idx = (y * width + x) * 4;\n const r = data[idx];\n const g = data[idx + 1];\n const b = data[idx + 2];\n const brightness = (r + g + b) / 3;\n\n const isRed = r > thresholds.red.r - thresholds.red.tolerance &&\n g < thresholds.red.g + thresholds.red.tolerance &&\n b < thresholds.red.b + thresholds.red.tolerance;\n\n if (isRed) targetPoints.push([x, y]);\n if (brightness >= thresholds.white.brightness) {\n whitePoints.push([x, y]);\n isWhiteMask[y * width + x] = 1;\n }\n if (brightness <= thresholds.black.brightness) blackPoints.push([x, y]);\n }\n if (y % 50 === 0) onProgress((y / height) * 0.1);\n }\n\n if (targetPoints.length === 0) throw new Error(\"No red pixels found.\");\n if (whitePoints.length === 0 && blackPoints.length === 0) {\n throw new Error(\"No reference pixels (B/W) found.\");\n }\n\n const distances: number[] = [];\n let sumDist = 0;\n let maxDist = 0;\n let minDist = Infinity;\n\n // Collection for vector lines\n const vectorLines: string[] = [];\n const probePathBuckets: string[] = Array(10).fill(\"\");\n\n const isNearWhite = (px: number, py: number) => {\n const r = 2;\n for (let dy = -r; dy <= r; dy++) {\n for (let dx = -r; dx <= r; dx++) {\n const nx = px + dx;\n const ny = py + dy;\n if (nx >= 0 && nx < width && ny >= 0 && ny < height) {\n if (isWhiteMask[ny * width + nx]) return true;\n }\n }\n }\n return false;\n };\n\n // 2. Distance Computation & Geometry Construction\n // Sample vectors to maintain SVG performance (max ~8000 lines)\n const vectorStep = Math.max(1, Math.floor(targetPoints.length / 8000));\n\n for (let i = 0; i < targetPoints.length; i++) {\n const [tx, ty] = targetPoints[i];\n const onWhite = isNearWhite(tx, ty);\n const referenceSet = onWhite ? blackPoints : whitePoints;\n\n let minD = Infinity;\n let closestPt: [number, number] | null = null;\n\n for (let j = 0; j < referenceSet.length; j++) {\n const [rx, ry] = referenceSet[j];\n const dx = tx - rx;\n const dy = ty - ry;\n const dSq = dx * dx + dy * dy;\n if (dSq < minD * minD) {\n minD = Math.sqrt(dSq);\n closestPt = [rx, ry];\n }\n if (minD < 0.5) {\n minD = 0;\n closestPt = [rx, ry];\n break;\n }\n }\n\n distances.push(minD);\n sumDist += minD;\n if (minD > maxDist) maxDist = minD;\n if (minD < minDist) minDist = minD;\n\n // Build vector lines with marker reference\n if (closestPt && i % vectorStep === 0) {\n const [rx, ry] = closestPt;\n // Only draw arrowhead if distance is >= 2px\n const markerAttr = minD >= 2 ? ' marker-end=\"url(#arrowhead)\"' : \"\";\n vectorLines.push(\n ``,\n );\n }\n\n // Add to probe path bucket (all probes represented)\n const alphaLevel = Math.min(9, Math.floor((minD / maxVisualDistance) * 10));\n probePathBuckets[alphaLevel] += `M${tx},${ty}h0.1`;\n\n if (i % 2000 === 0) onProgress(0.1 + (i / targetPoints.length) * 0.8);\n }\n\n // 3. Assemble SVG String\n let probeElements = \"\";\n probePathBuckets.forEach((path, i) => {\n if (path) {\n const opacity = (i + 1) / 10;\n probeElements +=\n ``;\n }\n });\n\n const svgString = `\n \n `.trim();\n\n const base64Svg = btoa(unescape(encodeURIComponent(svgString)));\n const processedImageUrl = `data:image/svg+xml;base64,${base64Svg}`;\n\n onProgress(1.0);\n\n return {\n distances,\n averageDistance: sumDist / targetPoints.length,\n maxDistance: maxDist,\n minDistance: minDist === Infinity ? 0 : minDist,\n targetPixelCount: targetPoints.length,\n processedImageUrl,\n imageWidth: width,\n imageHeight: height,\n };\n}","createdAt",["D",1769436338840],"branchVersion","branchId","d950b348-fabf-11f0-a929-42dde27851f2","id","d94fb31c-fabf-11f0-a929-42dde27851f2","font-identification",["D",1769436233995],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","6a4c0930-29db-11f0-b58d-e3db2f179d77","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","00603770-e43d-45d9-b81a-1fd887072742","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned",17,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","getflourish","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yd2dmanRHVERSOUJuZnBNQ3NMWkM4WEZKeHoifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":175,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":176,"_78":177,"_80":178,"_82":25},"tree",[162,163,164],"files",[162,163,164],"counts",{"_151":60,"_152":153,"_154":60,"_155":156,"_157":158},"contents",[125,126,127],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":143,"_32":144,"_30":145,"_131":-5,"_41":42,"_40":146,"_133":120,"_38":147,"_13":141,"_33":148,"_35":149,"_24":25,"_137":-5,"_27":150},{"_43":139,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_133":25,"_38":140,"_13":141,"_33":34,"_35":37,"_24":25,"_137":-5,"_27":142},{"_43":128,"_32":129,"_30":130,"_131":-5,"_41":42,"_40":132,"_133":120,"_38":134,"_13":135,"_33":34,"_35":136,"_24":25,"_137":-5,"_27":138},"fafe898e-fabf-11f0-b9e7-42dde27851f2","types.ts","e2e355fa-fabf-11f0-b871-42dde27851f2","parentId",6,"latest",["D",1769436290502],2,"export interface ColorThresholds {\n red: { r: number; g: number; b: number; tolerance: number };\n black: { brightness: number };\n white: { brightness: number };\n}\n\nexport interface AnalysisResult {\n distances: number[];\n averageDistance: number;\n maxDistance: number;\n minDistance: number;\n targetPixelCount: number;\n processedImageUrl: string;\n imageWidth: number;\n imageHeight: number;\n}\n\nexport interface ProcessingState {\n status: \"idle\" | \"processing\" | \"completed\" | \"error\";\n progress: number;\n message?: string;\n}","label",[129],"17ce428e-fac0-11f0-be6c-42dde27851f2",["D",1769436338840],3,[28],"122ea878-fac0-11f0-ab56-42dde27851f2","main.ts","d95a8364-fabf-11f0-a929-42dde27851f2",10,["D",1769436329408],"http","// @ts-ignore - Val Town is Deno runtime\nimport { processImage } from \"./processImage.ts\"; // put your function in another val/module\nimport type { ColorThresholds } from \"./types.ts\";\n\n// Reasonable defaults (override via POST body)\nconst DEFAULT_THRESHOLDS: ColorThresholds = {\n red: { r: 255, g: 0, b: 0, tolerance: 40 },\n white: { brightness: 240 },\n black: { brightness: 20 },\n};\n\nfunction withCors(resp: Response) {\n const h = new Headers(resp.headers);\n h.set(\"Access-Control-Allow-Origin\", \"*\");\n h.set(\"Access-Control-Allow-Methods\", \"GET,POST,OPTIONS\");\n h.set(\"Access-Control-Allow-Headers\", \"Content-Type\");\n return new Response(resp.body, { status: resp.status, headers: h });\n}\n\nasync function fetchImageAsDataUrl(\n url: string,\n): Promise<{ blob: Blob; dataUrl: string }> {\n const r = await fetch(url);\n if (!r.ok) {\n throw new Error(`Failed to fetch image: ${r.status} ${r.statusText}`);\n }\n\n const contentType = r.headers.get(\"content-type\") ||\n \"application/octet-stream\";\n const bytes = new Uint8Array(await r.arrayBuffer());\n const blob = new Blob([bytes], { type: contentType });\n\n // Create a data URL for underlay in your SVG\n // (keeps SVG self-contained even if the original URL is private/expiring)\n const b64 = btoa(String.fromCharCode(...bytes));\n const dataUrl = `data:${contentType};base64,${b64}`;\n return { blob, dataUrl };\n}\n\nasync function decodeToImageData(blob: Blob): Promise {\n // Deno supports canvas primitives; we use createImageBitmap + OffscreenCanvas.\n // Docs: Canvas/ImageBitmapSource, etc. :contentReference[oaicite:2]{index=2}\n const bmp = await createImageBitmap(blob);\n const canvas = new OffscreenCanvas(bmp.width, bmp.height);\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"No 2D canvas context available\");\n\n ctx.drawImage(bmp, 0, 0);\n return ctx.getImageData(0, 0, bmp.width, bmp.height);\n}\n\nexport default async function handler(req: Request): Promise {\n if (req.method === \"OPTIONS\") {\n return withCors(new Response(null, { status: 204 }));\n }\n\n try {\n let url: string | null = null;\n let thresholds: ColorThresholds = DEFAULT_THRESHOLDS;\n\n if (req.method === \"GET\") {\n const u = new URL(req.url);\n url = u.searchParams.get(\"url\");\n } else if (req.method === \"POST\") {\n const body = await req.json().catch(() => ({}));\n url = body?.url ?? null;\n thresholds = body?.thresholds ?? thresholds;\n } else {\n return withCors(\n Response.json({ error: \"Use GET or POST.\" }, { status: 405 }),\n );\n }\n\n if (!url) {\n return withCors(\n Response.json(\n {\n error: \"Missing image url\",\n usage: {\n get: \"GET ?url=https://example.com/image.png\",\n post: {\n url: \"https://example.com/image.png\",\n thresholds: DEFAULT_THRESHOLDS,\n },\n },\n },\n { status: 400 },\n ),\n );\n }\n\n // Fetch + decode\n const { blob, dataUrl: originalImageUri } = await fetchImageAsDataUrl(url);\n const imageData = await decodeToImageData(blob);\n\n // Progress is optional; you can also stream/log this instead\n let lastProgress = 0;\n const onProgress = (p: number) => {\n // keep it cheap\n if (p - lastProgress >= 0.05 || p === 1) lastProgress = p;\n };\n\n const result = await processImage(\n imageData,\n thresholds,\n originalImageUri,\n onProgress,\n );\n\n return withCors(Response.json(result));\n } catch (e) {\n return withCors(\n Response.json(\n { error: e instanceof Error ? e.message : String(e) },\n { status: 500 },\n ),\n );\n }\n}",[144],"pulls","branches",1,"forks","envVars",{"_159":60,"_161":60},"connections",{"_159":60,"_160":60},"count","unfilledCount","emptyCount",{"_43":143,"_32":144,"_30":145,"_131":-5,"_41":42,"_40":146,"_133":120,"_38":172,"_13":141,"_33":148,"_35":149,"_24":25,"_137":-5,"_166":173,"_27":174},{"_43":139,"_32":28,"_30":31,"_131":-5,"_41":42,"_40":14,"_133":25,"_38":169,"_13":141,"_33":34,"_35":37,"_24":25,"_137":-5,"_166":170,"_27":171},{"_43":128,"_32":129,"_30":130,"_131":-5,"_41":42,"_40":132,"_133":120,"_38":165,"_13":135,"_33":34,"_35":136,"_24":25,"_137":-5,"_166":167,"_27":168},["D",1769436290502],"children",[],[129],["D",1769436338840],[],[28],["D",1769436329408],[],[144],["D",1769436233995],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_76":-5,"_122":212,"_213":214,"_215":216,"_217":25,"_218":25,"_219":25,"_220":120,"_221":-5,"_222":-7,"_223":-7,"_224":60,"_225":25,"_226":25,"_227":-5,"_228":25,"_229":25,"_230":25,"_231":-5},"ENV",{"_183":184,"_185":186,"_187":84,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v11