[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_174":175,"_176":177},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":36,"_13":14,"_103":-5,"_11":104,"_105":106,"_107":108,"_109":110,"_111":112,"_20":-5,"_113":-5,"_114":-5,"_115":25,"_116":117,"_118":25,"_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",{"_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",7,"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}","createdAt",["D",1769436292413],"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":170,"_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":171,"_78":172,"_80":173,"_82":25},"tree",[157,158,159],"files",[157,158,159],"counts",{"_147":60,"_148":144,"_149":60,"_150":151,"_152":153},"contents",[123,124,125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":141,"_32":142,"_30":143,"_129":-5,"_41":42,"_40":144,"_131":25,"_38":145,"_13":60,"_33":34,"_35":36,"_24":25,"_136":-5,"_27":146},{"_43":138,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_131":25,"_38":139,"_13":134,"_33":34,"_35":37,"_24":25,"_136":-5,"_27":140},{"_43":126,"_32":127,"_30":128,"_129":-5,"_41":42,"_40":130,"_131":132,"_38":133,"_13":134,"_33":34,"_35":135,"_24":25,"_136":-5,"_27":137},"fafe898e-fabf-11f0-b9e7-42dde27851f2","types.ts","e2e355fa-fabf-11f0-b871-42dde27851f2","parentId",6,"latest",true,["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",[127],"fc218118-fabf-11f0-be0a-42dde27851f2",["D",1769436292413],[28],"d95a810c-fabf-11f0-a929-42dde27851f2","main.ts","d95a8364-fabf-11f0-a929-42dde27851f2",1,["D",1769436234023],[142],"pulls","branches","forks","envVars",{"_154":60,"_156":60},"connections",{"_154":60,"_155":60},"count","unfilledCount","emptyCount",{"_43":141,"_32":142,"_30":143,"_129":-5,"_41":42,"_40":144,"_131":25,"_38":167,"_13":60,"_33":34,"_35":36,"_24":25,"_136":-5,"_161":168,"_27":169},{"_43":138,"_32":28,"_30":31,"_129":-5,"_41":42,"_40":14,"_131":25,"_38":164,"_13":134,"_33":34,"_35":37,"_24":25,"_136":-5,"_161":165,"_27":166},{"_43":126,"_32":127,"_30":128,"_129":-5,"_41":42,"_40":130,"_131":132,"_38":160,"_13":134,"_33":34,"_35":135,"_24":25,"_136":-5,"_161":162,"_27":163},["D",1769436290502],"children",[],[127],["D",1769436292413],[],[28],["D",1769436234023],[],[142],["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,"_120":207,"_208":209,"_210":211,"_212":25,"_213":25,"_214":25,"_215":132,"_216":-5,"_217":-7,"_218":-7,"_219":60,"_220":25,"_221":25,"_222":-5,"_223":25,"_224":25,"_225":25,"_226":-5},"ENV",{"_178":179,"_180":181,"_182":84,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204,"_205":206},"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 · v7