[{"_1":2,"_175":-5,"_176":-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,"_172":173,"_174":-5},"handle","getflourish","name","font-identification","path","compare.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":142,"_161":162,"_105":163,"_141":164,"_165":166,"_167":168,"_169":20,"_170":-5,"_99":171},"dbf60b50-0016-11f1-85b9-42dde27851f2","fileId","3f3608a2-0015-11f1-bda7-42dde27851f2","parentId","branchId","branchVersion","latest",true,["D",1770023360464],4,"fileType","http","content","// Val Town HTTP val\n// POST JSON:\n//\n// Option 1 (URLs):\n// {\n// \"imageUrl1\": \"https://.../a.png\",\n// \"imageUrl2\": \"https://.../b.png\",\n// \"threshold\": 1.5\n// }\n//\n// Option 2 (raw grayscale buffers):\n// {\n// \"width\": 200,\n// \"height\": 200,\n// \"image1\": number[] | string, // length=width*height, values 0..255 OR base64/raw-bytes\n// \"image2\": number[] | string,\n// \"threshold\": 1.5\n// }\n//\n// Returns JSON stats (distance map not returned; only shape).\n\nimport { Image } from \"npm:imagescript@1.3.0\";\n\nconst INF = 1e15;\n\ntype Stats = {\n intersectionPixels: number;\n xorPixels: number;\n img1OnlyPixels: number;\n img2OnlyPixels: number;\n maxDistance: number;\n meanDistance: number;\n threshold: number;\n pixelsAboveThreshold: number;\n percentageAboveThreshold: number;\n img1PixelsAboveThreshold: number;\n img1PercentageAboveThreshold: number;\n img2PixelsAboveThreshold: number;\n img2PercentageAboveThreshold: number;\n distanceMapShape: string;\n};\n\nfunction normalizeBase64(s: string): string {\n // strip data URL prefix if present\n if (s.startsWith(\"data:\")) s = s.slice(s.indexOf(\",\") + 1);\n // base64url -> base64\n s = s.replace(/-/g, \"+\").replace(/_/g, \"/\");\n // pad\n const pad = s.length % 4;\n if (pad !== 0) s += \"=\".repeat(4 - pad);\n return s;\n}\n\nfunction decodeRawGray(\n input: number[] | string,\n width: number,\n height: number,\n): Uint8Array {\n const n = width * height;\n\n if (typeof input === \"string\") {\n const s = normalizeBase64(input);\n let bin: string;\n try {\n bin = atob(s);\n } catch {\n throw new Error(\n \"Failed to decode base64 (check base64url/padding/data-url)\",\n );\n }\n const bytes = Uint8Array.from(bin, (c) => c.charCodeAt(0));\n if (bytes.length !== n) {\n throw new Error(\n `decoded length ${bytes.length} ≠ width*height ${n} (you likely sent PNG bytes, not raw pixels)`,\n );\n }\n return bytes;\n }\n\n if (!Array.isArray(input) || input.length !== n) {\n throw new Error(\n `image array length mismatch: got ${input?.length}, expected ${n}`,\n );\n }\n\n const out = new Uint8Array(n);\n for (let i = 0; i < n; i++) out[i] = input[i] & 0xff;\n return out;\n}\n\n// Fetch URL image and convert to grayscale pixel buffer (0..255)\nasync function fetchUrlAsGray(\n url: string,\n): Promise<{ gray: Uint8Array; width: number; height: number }> {\n const res = await fetch(url);\n if (!res.ok) throw new Error(`Failed to fetch ${url}: ${res.status}`);\n const bytes = new Uint8Array(await res.arrayBuffer());\n\n const img = await Image.decode(bytes); // supports PNG/JPEG/etc\n const { width, height } = img;\n\n const gray = new Uint8Array(width * height);\n const rgba = img.bitmap; // RGBA bytes\n\n for (let i = 0, p = 0; i < rgba.length; i += 4, p++) {\n const r = rgba[i], g = rgba[i + 1], b = rgba[i + 2];\n // luma\n gray[p] = Math.round(0.299 * r + 0.587 * g + 0.114 * b);\n }\n\n return { gray, width, height };\n}\n\n// grayscale -> binary 0/1 with threshold 127\nfunction toBinary(gray: Uint8Array): Uint8Array {\n const out = new Uint8Array(gray.length);\n for (let i = 0; i < gray.length; i++) out[i] = gray[i] > 127 ? 1 : 0;\n return out;\n}\n\n// 1D squared EDT (Felzenszwalb/Huttenlocher)\nfunction edt1d(f: Float64Array): Float64Array {\n const n = f.length;\n const d = new Float64Array(n);\n const v = new Int32Array(n);\n const z = new Float64Array(n + 1);\n\n let k = 0;\n v[0] = 0;\n z[0] = -INF;\n z[1] = INF;\n\n const sq = (x: number) => x * x;\n\n for (let q = 1; q < n; q++) {\n let s = ((f[q] + sq(q)) - (f[v[k]] + sq(v[k]))) / (2 * (q - v[k]));\n while (s <= z[k]) {\n k--;\n s = ((f[q] + sq(q)) - (f[v[k]] + sq(v[k]))) / (2 * (q - v[k]));\n }\n k++;\n v[k] = q;\n z[k] = s;\n z[k + 1] = INF;\n }\n\n k = 0;\n for (let q = 0; q < n; q++) {\n while (z[k + 1] < q) k++;\n const dx = q - v[k];\n d[q] = sq(dx) + f[v[k]];\n }\n return d;\n}\n\n// Exact 2D distance to nearest intersection pixel (Euclidean)\nfunction distanceToIntersection(\n intersection: Uint8Array,\n width: number,\n height: number,\n): Float64Array {\n const n = width * height;\n\n // pass 1: columns\n const colTmp = new Float64Array(n); // squared\n for (let x = 0; x < width; x++) {\n const f = new Float64Array(height);\n for (let y = 0; y < height; y++) {\n const idx = y * width + x;\n f[y] = intersection[idx] === 1 ? 0 : INF;\n }\n const dcol = edt1d(f);\n for (let y = 0; y < height; y++) colTmp[y * width + x] = dcol[y];\n }\n\n // pass 2: rows\n const out = new Float64Array(n); // euclidean\n for (let y = 0; y < height; y++) {\n const f = new Float64Array(width);\n for (let x = 0; x < width; x++) f[x] = colTmp[y * width + x];\n const drow = edt1d(f); // squared\n for (let x = 0; x < width; x++) out[y * width + x] = Math.sqrt(drow[x]);\n }\n\n return out;\n}\n\nfunction computeStats(\n gray1: Uint8Array,\n gray2: Uint8Array,\n width: number,\n height: number,\n threshold: number,\n): Stats {\n const img1 = toBinary(gray1);\n const img2 = toBinary(gray2);\n const n = width * height;\n\n const intersection = new Uint8Array(n);\n const xor = new Uint8Array(n);\n const img1Only = new Uint8Array(n);\n const img2Only = new Uint8Array(n);\n\n let intersectionPixels = 0;\n let xorPixels = 0;\n let img1OnlyPixels = 0;\n let img2OnlyPixels = 0;\n\n for (let i = 0; i < n; i++) {\n const a = img1[i];\n const b = img2[i];\n\n const inter = (a & b) as 0 | 1;\n const x = (a ^ b) as 0 | 1;\n const aOnly = (a & (b ^ 1)) as 0 | 1;\n const bOnly = (b & (a ^ 1)) as 0 | 1;\n\n intersection[i] = inter;\n xor[i] = x;\n img1Only[i] = aOnly;\n img2Only[i] = bOnly;\n\n intersectionPixels += inter;\n xorPixels += x;\n img1OnlyPixels += aOnly;\n img2OnlyPixels += bOnly;\n }\n\n const dist = distanceToIntersection(intersection, width, height);\n\n let maxDist = 0;\n let sumDist = 0;\n let pixelsAbove = 0;\n let img1Above = 0;\n let img2Above = 0;\n\n for (let i = 0; i < n; i++) {\n if (xor[i] === 1) {\n const d = dist[i];\n if (d > maxDist) maxDist = d;\n sumDist += d;\n if (d > threshold) {\n pixelsAbove++;\n if (img1Only[i] === 1) img1Above++;\n if (img2Only[i] === 1) img2Above++;\n }\n }\n }\n\n const meanDist = xorPixels > 0 ? sumDist / xorPixels : 0;\n const pctAbove = xorPixels > 0 ? (pixelsAbove / xorPixels) * 100 : 0;\n const img1PctAbove = img1OnlyPixels > 0\n ? (img1Above / img1OnlyPixels) * 100\n : 0;\n const img2PctAbove = img2OnlyPixels > 0\n ? (img2Above / img2OnlyPixels) * 100\n : 0;\n\n return {\n intersectionPixels,\n xorPixels,\n img1OnlyPixels,\n img2OnlyPixels,\n maxDistance: maxDist,\n meanDistance: meanDist,\n threshold,\n pixelsAboveThreshold: pixelsAbove,\n percentageAboveThreshold: pctAbove,\n img1PixelsAboveThreshold: img1Above,\n img1PercentageAboveThreshold: img1PctAbove,\n img2PixelsAboveThreshold: img2Above,\n img2PercentageAboveThreshold: img2PctAbove,\n distanceMapShape: `${height}x${width}`,\n };\n}\n\nexport default async function handler(req: Request): Promise {\n if (req.method !== \"POST\") {\n return Response.json(\n {\n ok: false,\n usage:\n \"POST { imageUrl1, imageUrl2, threshold? } OR { width, height, image1, image2, threshold? }\",\n },\n { status: 405 },\n );\n }\n\n try {\n const body = await req.json();\n const threshold = body.threshold == null ? 1.5 : Number(body.threshold);\n if (!Number.isFinite(threshold) || threshold < 0) {\n throw new Error(\"Invalid threshold\");\n }\n\n let width: number, height: number;\n let gray1: Uint8Array, gray2: Uint8Array;\n\n if (body.imageUrl1 && body.imageUrl2) {\n const a = await fetchUrlAsGray(String(body.imageUrl1));\n const b = await fetchUrlAsGray(String(body.imageUrl2));\n if (a.width !== b.width || a.height !== b.height) {\n throw new Error(\n `Image sizes differ: ${a.width}x${a.height} vs ${b.width}x${b.height}`,\n );\n }\n width = a.width;\n height = a.height;\n gray1 = a.gray;\n gray2 = b.gray;\n } else {\n width = Number(body.width);\n height = Number(body.height);\n if (\n !Number.isFinite(width) || !Number.isFinite(height) || width <= 0 ||\n height <= 0\n ) {\n throw new Error(\"Invalid width/height\");\n }\n gray1 = decodeRawGray(body.image1, width, height);\n gray2 = decodeRawGray(body.image2, width, height);\n }\n\n const stats = computeStats(gray1, gray2, width, height, threshold);\n return Response.json({ ok: true, width, height, ...stats });\n } catch (e) {\n return Response.json(\n { ok: false, message: e instanceof Error ? e.message : String(e) },\n { status: 400 },\n );\n }\n}","deleted","label",[100],"permalink","https://www.val.town/x/getflourish/font-identification/code/compare.ts","extension","actionData","errors"]