[{"_1":2,"_170":-5,"_171":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":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","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":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},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","2677517008ad9dd1731fff30f772d80c0e798433","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",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":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",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_148":149,"_167":168,"_169":-5},"handle","kutay25","name","comic-book-translate","path","main.tsx","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":20,"_115":-5,"_116":-5,"_117":32,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":128,"_131":132,"_134":135,"_147":20},"id","41901042-866d-11f0-bac5-0224a6c84d84","createdAt",["D",1756646425796],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","e7b68add-4fea-4942-a27b-edd073dadfa4","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","add29797-168a-46d3-82b2-6344c65004aa","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_129":130},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybDIzQXVETWxDVk5pNG1Ndld3NkR6bXVCMEoifQ","org",{"_94":95,"_133":130,"_12":112},"avatar","branch",{"_136":137,"_96":44,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":97,"_146":95},"version",46,"4190604c-866d-11f0-bac5-0224a6c84d84","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":150,"_96":99,"_151":152,"_153":-5,"_154":138,"_155":137,"_156":157,"_104":158,"_136":159,"_160":161,"_162":163,"_164":20,"_165":-5,"_98":166},"146b0fa6-868e-11f0-b9ce-0224a6c84d84","fileId","41957668-866d-11f0-bac5-0224a6c84d84","parentId","branchId","branchVersion","latest",true,["D",1756660523437],45,"fileType","email","content","// Minimal image->translated-image email handler for Val Town\n// Hardened against bad OCR boxes (Infinity/NaN) to avoid WASM OOM/Bounds errors.\nimport { email as sendEmail } from \"https://esm.town/v/std/email\";\nimport {\n decode,\n Image,\n TextLayout,\n} from \"https://deno.land/x/imagescript@1.3.0/mod.ts\"; // RGBA is NOT exported\n// Docs: https://imagescript.matmen.dev/global and https://imagescript.matmen.dev/Image\nimport { fetch } from \"https://esm.town/v/std/fetch\";\n\n// Downloads (Font)\nconst FONT_URL =\n \"https://cdn.jsdelivr.net/gh/google/fonts@main/ofl/kalam/Kalam-Regular.ttf\";\n\nlet FONT_BYTES: Uint8Array | null = null;\nasync function getFont(): Promise {\n if (FONT_BYTES) return FONT_BYTES;\n const res = await fetch(FONT_URL, { redirect: \"follow\" });\n if (!res.ok) throw new Error(`Font fetch failed: ${res.status}`);\n FONT_BYTES = new Uint8Array(await res.arrayBuffer());\n return FONT_BYTES;\n}\n\ntype Email = {\n from: string;\n subject?: string;\n attachments?: File[];\n};\n\n// --- Config ---\nconst API_KEY = Deno.env.get(\"GOOGLE_API_KEY\")!;\nconst TARGET_LANG = \"tr\";\n\n// --- Types for Vision response (subset) ---\ntype VisionVertex = { x?: number; y?: number };\n\ntype DetectedBreak = {\n type?: \"SPACE\" | \"SURE_SPACE\" | \"EOL_SURE_SPACE\" | \"HYPHEN\" | \"LINE_BREAK\";\n};\ntype VisionSymbol = {\n text?: string;\n property?: { detectedBreak?: DetectedBreak };\n};\ntype VisionWord = {\n symbols?: VisionSymbol[];\n boundingBox?: { vertices?: VisionVertex[] };\n};\ntype VisionParagraph = {\n boundingBox?: { vertices?: VisionVertex[] };\n words?: VisionWord[];\n};\ntype VisionBlock = {\n boundingBox?: { vertices?: VisionVertex[] };\n paragraphs?: VisionParagraph[];\n};\ntype VisionPage = { blocks?: VisionBlock[] };\ntype VisionResponse = { fullTextAnnotation?: { pages?: VisionPage[] } };\n\n// --- Utils ---\nfunction assertEnv() {\n if (!API_KEY) throw new Error(\"Missing GOOGLE_API_KEY env var\");\n}\n\nfunction base64Encode(bytes: Uint8Array): string {\n let bin = \"\";\n const chunk = 0x8000;\n for (let i = 0; i < bytes.length; i += chunk) {\n bin += String.fromCharCode(...bytes.subarray(i, i + chunk));\n }\n return btoa(bin);\n}\n\nfunction decodeHtmlEntities(s: string) {\n return s\n .replaceAll(\"&\", \"&\")\n .replaceAll(\"<\", \"<\")\n .replaceAll(\">\", \">\")\n .replaceAll(\""\", '\"')\n .replaceAll(\"'\", \"'\");\n}\n\n// Return a rect or null if verts are missing/invalid.\nfunction safeRectFromVertices(verts?: VisionVertex[] | null): {\n x: number;\n y: number;\n w: number;\n h: number;\n} | null {\n if (!verts || verts.length === 0) return null;\n const xs = verts.map((v) => (Number.isFinite(v.x) ? (v.x as number) : 0));\n const ys = verts.map((v) => (Number.isFinite(v.y) ? (v.y as number) : 0));\n if (xs.length === 0 || ys.length === 0) return null;\n\n const minXRaw = Math.min(...xs);\n const minYRaw = Math.min(...ys);\n const maxXRaw = Math.max(...xs);\n const maxYRaw = Math.max(...ys);\n\n // Guard against weird cases\n if (\n !Number.isFinite(minXRaw) || !Number.isFinite(minYRaw) ||\n !Number.isFinite(maxXRaw) || !Number.isFinite(maxYRaw)\n ) {\n return null;\n }\n const w = Math.max(0, maxXRaw - minXRaw);\n const h = Math.max(0, maxYRaw - minYRaw);\n if (!(w > 0 && h > 0)) return null;\n\n return { x: Math.max(0, minXRaw), y: Math.max(0, minYRaw), w, h };\n}\n\n// Union only over valid rects; return null if none\nfunction unionRects(rects: { x: number; y: number; w: number; h: number }[]) {\n const valid = rects.filter(\n (r) =>\n Number.isFinite(r.x) &&\n Number.isFinite(r.y) &&\n Number.isFinite(r.w) &&\n Number.isFinite(r.h) &&\n r.w > 0 &&\n r.h > 0,\n );\n if (valid.length === 0) return null;\n\n const minX = Math.min(...valid.map((r) => r.x));\n const minY = Math.min(...valid.map((r) => r.y));\n const maxX = Math.max(...valid.map((r) => r.x + r.w));\n const maxY = Math.max(...valid.map((r) => r.y + r.h));\n return {\n x: minX,\n y: minY,\n w: Math.max(1, maxX - minX),\n h: Math.max(1, maxY - minY),\n };\n}\n\nfunction appendSymbol(buf: string, s: VisionSymbol): string {\n const ch = s.text ?? \"\";\n // If punctuation, avoid a leading space before it\n const punct = /[.,!?;:)\\]\\}…\"’”]/.test(ch);\n if (punct && buf.endsWith(\" \")) buf = buf.slice(0, -1);\n buf += ch;\n const br = s.property?.detectedBreak?.type;\n if (br === \"SPACE\" || br === \"SURE_SPACE\") buf += \" \";\n // Keep idioms intact: don't force newlines; space is safer for translation\n if (br === \"EOL_SURE_SPACE\" || br === \"LINE_BREAK\") buf += \" \";\n return buf;\n}\n\nfunction textAndRectOfParagraph(\n p: VisionParagraph,\n): {\n text: string;\n rect: { x: number; y: number; w: number; h: number } | null;\n} {\n let out = \"\";\n const rects: { x: number; y: number; w: number; h: number }[] = [];\n\n for (const w of p.words ?? []) {\n for (const s of w.symbols ?? []) out = appendSymbol(out, s);\n const wr = safeRectFromVertices(w.boundingBox?.vertices ?? null);\n if (wr) rects.push(wr);\n }\n let rect = unionRects(rects);\n if (!rect) {\n rect = safeRectFromVertices(p.boundingBox?.vertices ?? null);\n }\n return { text: out.trim(), rect: rect ?? null };\n}\n\n// --- Google APIs ---\n// Block-level OCR to keep idioms together (e.g., \"Per favore!\" => \"Lütfen!\")\nasync function visionOCRBlocks(base64Image: string): Promise<\n { text: string; rect: { x: number; y: number; w: number; h: number } }[]\n> {\n const url = `https://vision.googleapis.com/v1/images:annotate?key=${API_KEY}`;\n const body = {\n requests: [{\n image: { content: base64Image },\n features: [{ type: \"DOCUMENT_TEXT_DETECTION\" }],\n }],\n };\n\n const r = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n if (!r.ok) throw new Error(`Vision error: ${r.status} ${await r.text()}`);\n\n const json = (await r.json()) as { responses: VisionResponse[] };\n const resp = json.responses?.[0];\n\n const out: {\n text: string;\n rect: { x: number; y: number; w: number; h: number };\n }[] = [];\n const pages = resp?.fullTextAnnotation?.pages ?? [];\n for (const page of pages) {\n for (const block of page.blocks ?? []) {\n const paraResults: {\n text: string;\n rect: { x: number; y: number; w: number; h: number } | null;\n }[] = [];\n for (const p of block.paragraphs ?? []) {\n const pr = textAndRectOfParagraph(p);\n // Keep only paragraphs that actually have text\n if (pr.text) paraResults.push(pr);\n }\n if (!paraResults.length) continue;\n\n const validParaRects = paraResults\n .map((pr) => pr.rect)\n .filter((r): r is { x: number; y: number; w: number; h: number } =>\n !!r\n );\n\n const blockRect = unionRects(validParaRects);\n const blockText = paraResults.map((pr) => pr.text).join(\" \").trim();\n\n if (blockText && blockRect) {\n out.push({ text: blockText, rect: blockRect });\n }\n }\n }\n\n // --- Post-processing: merge horizontally adjacent blocks that likely\n // belong to the same speech bubble or sentence (e.g., \"Per\" + \"favore!\").\n // Heuristic: significant vertical overlap and horizontal gap smaller than\n // the taller block.\n out.sort((a, b) => a.rect.y - b.rect.y || a.rect.x - b.rect.x);\n\n const merged: typeof out = [];\n for (const blk of out) {\n const last = merged[merged.length - 1];\n if (last) {\n const a = last.rect;\n const b = blk.rect;\n const vertOverlap = Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y);\n const minHeight = Math.min(a.h, b.h);\n const verticalGap = b.y >= a.y + a.h\n ? b.y - (a.y + a.h)\n : a.y >= b.y + b.h\n ? a.y - (b.y + b.h)\n : 0;\n const vOk = vertOverlap > 0.3 * minHeight ||\n verticalGap <= 0.3 * minHeight;\n // Horizontal separation (0 if overlapping)\n const horizGap = Math.max(\n 0,\n Math.max(a.x, b.x) - Math.min(a.x + a.w, b.x + b.w),\n );\n const gapOk = horizGap < Math.max(minHeight, 20);\n if (vOk && gapOk) {\n // merge texts with space, union rects\n last.text = `${last.text} ${blk.text}`.trim();\n last.rect = unionRects([a, b])!;\n continue; // do not push new block\n }\n }\n merged.push({ ...blk });\n }\n\n return merged;\n}\n\nasync function translateV2(texts: string[], target: string): Promise {\n if (texts.length === 0) return [];\n const url =\n `https://translation.googleapis.com/language/translate/v2?key=${API_KEY}`;\n const payload = { q: texts, target, format: \"text\" };\n\n const r = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n if (!r.ok) {\n const errorText = await r.text();\n throw new Error(`Translate error: ${r.status} ${errorText}`);\n }\n\n const json = await r.json();\n return (json?.data?.translations ?? []).map((t: any) =>\n decodeHtmlEntities(String(t.translatedText ?? \"\"))\n );\n}\n\n// --- Imaging with ImageScript ---\nasync function overlayTranslationsWithImageScript(\n inputFile: File,\n blocks: {\n text: string;\n rect: { x: number; y: number; w: number; h: number };\n }[],\n translated: string[],\n): Promise<\n { filename: string; mime: string; bytes: Uint8Array; debug: string }\n> {\n const LAYOUT_CAP = 2048;\n\n // Load image\n const originalBytes = new Uint8Array(await inputFile.arrayBuffer());\n const decoded = await decode(originalBytes); // global decode() returns Image|GIF\n if (!(decoded instanceof Image)) {\n throw new Error(\"Unsupported image type after decode\");\n }\n const img = decoded;\n\n // Draw white boxes and translated text\n\n const dbg: string[] = [];\n dbg.push(`IMAGE ${inputFile.name} size=${img.width}x${img.height}`);\n dbg.push(`BLOCKS: ${blocks.length}`);\n for (let i = 0; i < blocks.length; i++) {\n const { rect } = blocks[i];\n const text = translated[i] || blocks[i].text;\n dbg.push(`Block ${i}: rect=(${rect.x},${rect.y},${rect.w},${rect.h})`);\n dbg.push(` OCR=\"${blocks[i].text}\"`);\n dbg.push(` TL =\"${translated[i] || \"\"}\"`);\n if (!text) continue;\n\n let { x, y, w, h } = rect;\n\n // Validate rect numbers\n if (\n !Number.isFinite(x) || !Number.isFinite(y) ||\n !Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0\n ) {\n continue;\n }\n\n // Clamp rect to image\n x = Math.max(0, Math.min(x, img.width - 1));\n y = Math.max(0, Math.min(y, img.height - 1));\n w = Math.max(1, Math.min(w, img.width - x));\n h = Math.max(1, Math.min(h, img.height - y));\n\n // Skip boxes that are too tiny to ever hold text\n const pad = 4;\n const innerX = x + pad;\n const innerY = y + pad;\n const innerW = Math.max(1, w - pad * 2);\n const innerH = Math.max(1, h - pad * 2);\n if (innerW < 6 || innerH < 8) continue;\n\n // Background box\n try {\n img.drawBox(x, y, w, h, 0xffffffff);\n } catch {\n // If draw fails (shouldn't), skip this block\n continue;\n }\n\n // Layout (cap to avoid giant allocations)\n const layout = new TextLayout({\n maxWidth: Math.max(1, Math.min(innerW, LAYOUT_CAP)),\n maxHeight: LAYOUT_CAP, // allow full paragraph height; we'll down-scale later if needed\n wrapStyle: \"word\",\n wrapHardBreaks: true,\n });\n\n // Conservative font sizing\n const fontSize = Math.max(\n 8,\n Math.min(\n Math.floor(innerH - 2),\n Math.floor(innerW * 0.20),\n ),\n );\n\n let textImg: Image | undefined;\n try {\n textImg = await Image.renderText(\n await getFont(),\n fontSize,\n text,\n 0x000000ff,\n layout,\n );\n } catch {\n // Fallback: try half-size\n try {\n const fs2 = Math.max(8, Math.floor(fontSize / 2));\n textImg = await Image.renderText(\n await getFont(),\n fs2,\n text,\n 0x000000ff,\n layout,\n );\n } catch {\n continue;\n }\n }\n\n // Ensure the rendered text bitmap fits within the target area; if it\n // would overflow, down-scale it proportionally to stay inside the\n // bounds. This avoids writes outside the destination buffer that would\n // otherwise crash the ImageScript WASM module.\n if (textImg && (textImg.width > innerW || textImg.height > innerH)) {\n const scale = Math.min(innerW / textImg.width, innerH / textImg.height);\n dbg.push(` resize scale=${scale.toFixed(3)}`);\n try {\n textImg = textImg.resize(\n Math.max(1, Math.floor(textImg.width * scale)),\n Math.max(1, Math.floor(textImg.height * scale)),\n );\n } catch {\n console.log(\"textImg boundary issue:\", textImg);\n continue;\n }\n }\n\n try {\n img.composite(textImg, innerX, innerY);\n dbg.push(\n ` rendered ${textImg?.width}x${textImg?.height} at (${innerX},${innerY})`,\n );\n } catch {\n // If composite fails due to coords, skip\n continue;\n }\n }\n\n // Encode back in the original format & MIME\n const mime = inputFile.type ||\n (/\\.(png)$/i.test(inputFile.name) ? \"image/png\" : \"image/jpeg\");\n let outBytes: Uint8Array;\n if (/png/i.test(mime)) {\n outBytes = await img.encode(); // PNG\n } else {\n outBytes = await img.encodeJPEG(90); // JPEG\n }\n\n return {\n filename: inputFile.name,\n mime,\n bytes: outBytes,\n debug: dbg.join(\"\\n\"),\n };\n}\n\n// --- Email handler ---\nexport default async function (e: Email) {\n try {\n assertEnv();\n\n const imgs = (e.attachments || []).filter(\n (f) =>\n /image\\/(png|jpeg)/i.test(f.type) ||\n /\\.(png|jpe?g)$/i.test(f.name || \"\"),\n );\n\n if (imgs.length === 0) {\n await sendEmail({\n // to: e.from,\n subject: `Re: ${e.subject || \"No images found\"}`,\n text:\n \"Please attach PNG or JPEG files. (Total inbound size must be under 30MB.)\",\n });\n return;\n }\n\n const results: { filename: string; mime: string; bytes: Uint8Array }[] = [];\n const debugBuffers: string[] = [];\n\n for (const file of imgs) {\n try {\n // 1) OCR (block-level, idiom-friendly, safe rects)\n const b64 = base64Encode(new Uint8Array(await file.arrayBuffer()));\n const blocks = await visionOCRBlocks(b64);\n\n // 2) Translate\n const texts = blocks.map((p) => p.text);\n const translated = await translateV2(texts, TARGET_LANG);\n\n // 3) Overlay (ImageScript) with strong guards\n const outWithDbg = await overlayTranslationsWithImageScript(\n file,\n blocks,\n translated,\n );\n const { debug, ...out } = outWithDbg;\n results.push(out);\n debugBuffers.push(debug);\n } catch (err) {\n console.error(`Failed on ${file.name}:`, err);\n // Continue other images\n }\n }\n\n await sendEmail({\n // to: e.from,\n subject: `Re: ${e.subject || \"Translated images\"}`,\n text: results.length > 0\n ? `Attached: ${\n results.map((r) => r.filename).join(\", \")\n }\\nTarget language: ${TARGET_LANG}`\n : \"Sorry, there was an error processing your images.\",\n attachments: [\n ...results.map((r) => ({\n content: base64Encode(r.bytes),\n filename: r.filename,\n type: r.mime,\n disposition: \"attachment\",\n })),\n // Debug info attachment\n {\n content: base64Encode(\n new TextEncoder().encode(debugBuffers.join(\"\\n\\n\")),\n ),\n filename: \"debug_info.txt\",\n type: \"text/plain\",\n disposition: \"attachment\",\n },\n ],\n });\n } catch (error: any) {\n console.error(\"Handler error:\", error?.message || error);\n try {\n await sendEmail({\n // to: e.from,\n subject: `Re: ${e.subject || \"Translation Error\"}`,\n text: `Sorry, there was an error processing your images: ${\n error?.message || error\n }`,\n });\n } catch {\n // ignore\n }\n }\n}","deleted","label",[99],"permalink","https://www.val.town/x/kutay25/comic-book-translate/code/main.tsx","extension","actionData","errors"]