[{"_1":2,"_176":-5,"_177":-5},"loaderData",{"_3":4,"_93":94},"root",{"_5":6,"_36":37,"_66":67},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":65},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","6050acf0705e6826bb1b68e27572c5b8979c5bd9","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","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","API_URL","https://api.val.town","clerkState",{"_68":69},"__internal_clerk_state",{"_70":71,"_72":47,"_73":74,"_75":74,"_76":20,"_77":74,"_78":74,"_79":74,"_80":74,"_81":82,"_91":20,"_92":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_83":20,"_19":20,"_84":74,"_85":86,"_87":74,"_88":47,"_89":20,"_90":74},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_95":96,"_97":98,"_99":100,"_101":102,"_153":154,"_173":174,"_175":-5},"handle","getflourish","name","font-identification","path","processImage.ts","project",{"_103":104,"_97":98,"_105":106,"_107":-5,"_108":20,"_109":110,"_111":-5,"_112":-5,"_12":113,"_114":-5,"_115":20,"_116":-5,"_117":-5,"_118":33,"_14":119,"_120":-5,"_121":-5,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":123,"_23":131,"_134":135,"_139":140,"_152":20},"id","d94fb31c-fabf-11f0-a929-42dde27851f2","createdAt",["D",1769436233995],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","6a4c0930-29db-11f0-b58d-e3db2f179d77","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","00603770-e43d-45d9-b81a-1fd887072742","tursoName","tursoHostname","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_95":96,"_132":133},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yd2dmanRHVERSOUJuZnBNQ3NMWkM4WEZKeHoifQ","org",{"_95":96,"_136":133,"_12":113,"_137":138},"avatar","tier","free","branch",{"_141":142,"_97":45,"_103":143,"_144":104,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":-5,"_150":98,"_151":96},"version",17,"d950b348-fabf-11f0-a929-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_103":155,"_97":100,"_156":157,"_158":-5,"_159":143,"_160":161,"_162":163,"_105":164,"_141":165,"_166":167,"_168":169,"_170":20,"_171":-5,"_99":172},"350a0b1c-fac0-11f0-ab56-42dde27851f2","fileId","e22b74c6-fabf-11f0-892a-42dde27851f2","parentId","branchId","branchVersion",12,"latest",true,["D",1769436387890],4,"fileType","script","content","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}","deleted","label",[100],"permalink","https://www.val.town/x/getflourish/font-identification/code/processImage.ts","extension","actionData","errors"]