[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_190":191,"_192":193},"routes/_app.x.$handle.$name",{"_93":92,"_32":44,"_101":83,"_26":36,"_13":14,"_102":-5,"_11":103,"_104":105,"_106":107,"_108":109,"_110":111,"_20":-5,"_112":-5,"_113":-5,"_114":24,"_115":116,"_117":118,"_119":-5,"_120":-5,"_121":122},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":76,"_77":78,"_79":80,"_81":24},"version",13,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":29},"file",{"_30":31,"_32":27,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","new-file-4284.ts","latestPath","compare.ts","fileId","3f3608a2-0015-11f1-bda7-42dde27851f2","name","fileType","script","content","","createdAt",["D",1770022667994],"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",{"_93":92,"_100":96},"org",{"_93":92,"_94":-5,"_95":96,"_18":53,"_97":98,"_99":24},"branch",{"_13":82,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"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",{"_42":43,"_32":44,"_37":186,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":-5,"_65":-5,"_66":67,"_68":67,"_69":70,"_71":70,"_72":70,"_73":67,"_74":67,"_75":187,"_77":188,"_79":189,"_81":24},"tree",[169,170,171,172],"files",[169,170,171,172],"counts",{"_158":59,"_159":160,"_161":59,"_162":163,"_164":165},"contents",[123,124,125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":149,"_32":150,"_30":151,"_130":-5,"_40":41,"_39":152,"_132":118,"_37":153,"_13":154,"_33":155,"_35":156,"_23":24,"_136":-5,"_26":157},{"_42":146,"_32":27,"_30":31,"_130":-5,"_40":41,"_39":14,"_132":24,"_37":147,"_13":59,"_33":34,"_35":36,"_23":24,"_136":-5,"_26":148},{"_42":138,"_32":139,"_30":140,"_130":-5,"_40":41,"_39":141,"_132":118,"_37":142,"_13":143,"_33":34,"_35":144,"_23":24,"_136":-5,"_26":145},{"_42":127,"_32":128,"_30":129,"_130":-5,"_40":41,"_39":131,"_132":118,"_37":133,"_13":134,"_33":34,"_35":135,"_23":24,"_136":-5,"_26":137},"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",[128],"350a0b1c-fac0-11f0-ab56-42dde27851f2","processImage.ts","e22b74c6-fabf-11f0-892a-42dde27851f2",12,["D",1769436387890],4,"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}\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}",[139],"3f360802-0015-11f1-bda7-42dde27851f2",["D",1770022667994],[27],"122ea878-fac0-11f0-ab56-42dde27851f2","main.ts","d95a8364-fabf-11f0-a929-42dde27851f2",10,["D",1769436329408],3,"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}",[150],"pulls","branches",1,"forks","envVars",{"_166":59,"_168":59},"connections",{"_166":59,"_167":59},"count","unfilledCount","emptyCount",{"_42":149,"_32":150,"_30":151,"_130":-5,"_40":41,"_39":152,"_132":118,"_37":183,"_13":154,"_33":155,"_35":156,"_23":24,"_136":-5,"_174":184,"_26":185},{"_42":146,"_32":27,"_30":31,"_130":-5,"_40":41,"_39":14,"_132":24,"_37":180,"_13":59,"_33":34,"_35":36,"_23":24,"_136":-5,"_174":181,"_26":182},{"_42":138,"_32":139,"_30":140,"_130":-5,"_40":41,"_39":141,"_132":118,"_37":177,"_13":143,"_33":34,"_35":144,"_23":24,"_136":-5,"_174":178,"_26":179},{"_42":127,"_32":128,"_30":129,"_130":-5,"_40":41,"_39":131,"_132":118,"_37":173,"_13":134,"_33":34,"_35":135,"_23":24,"_136":-5,"_174":175,"_26":176},["D",1769436290502],"children",[],[128],["D",1769436387890],[],[139],["D",1770022667994],[],[27],["D",1769436329408],[],[150],["D",1769436233995],{"_93":92,"_100":96},{"_93":92,"_94":-5,"_95":96,"_18":53,"_97":98,"_99":24},{"_13":82,"_32":83,"_42":41,"_84":43,"_85":-5,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":44,"_91":92},"ctx",{"_75":-5,"_120":223,"_224":225,"_226":227,"_228":24,"_229":24,"_230":24,"_231":118,"_232":-5,"_233":-7,"_234":-7,"_235":59,"_236":24,"_237":24,"_238":-5,"_239":24,"_240":24,"_241":24,"_242":-5},"ENV",{"_194":195,"_196":197,"_198":83,"_199":200,"_201":202,"_203":204,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v13