[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_212":213,"_214":215},"routes/_app.x.$handle.$name",{"_107":106,"_38":51,"_116":93,"_33":117,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_26":-5,"_128":129,"_130":131,"_132":31,"_133":134,"_135":65,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":31},"version",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","682e59a1-3100-48b8-b8b6-461c201c0e2f","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","app.js","latestPath","fileId","01a015c7-94b8-743d-8139-002a54ae64da","name","fileType","script","content","\"use strict\";\n\nconst $ = (id) => document.getElementById(id);\n\n// ---- guarded status updater (fixes setStatus null error) ----\nfunction setStatus(msg, kind) {\n const el = $(\"status\");\n if (!el) return;\n el.textContent = msg || \"\";\n el.className = kind || \"\";\n}\n\n// ---- state ----\nlet panels = []; // [{ prompt, scene, img:Image|null }]\nlet narration = []; // [{ text }]\nlet storyText = \"\";\nlet ready = false;\n\n// load saved settings\n(function () {\n const pick = (k, def) => { try { const v = localStorage.getItem(k); return v ? v : def; } catch (e) { return def; } };\n $(\"proxyUrl\").value = pick(\"rr.proxy\", \"https://tts-proxy.val.run/\");\n $(\"murfKey\").value = pick(\"rr.murf\", \"\");\n $(\"llmKey\").value = pick(\"rr.llmKey\", \"\");\n $(\"llmBase\").value = pick(\"rr.llmBase\", \"https://api.openai.com/v1\");\n $(\"llmModel\").value = pick(\"rr.llmModel\", \"gpt-4o-mini\");\n $(\"styleLock\").value = pick(\"rr.styleLock\", \"\");\n $(\"model\").value = pick(\"rr.model\", \"Dreamshaper\");\n $(\"charLock\").value = pick(\"rr.charLock\", \"\");\n $(\"artLock\").value = pick(\"rr.artLock\", \"\");\n $(\"envLock\").value = pick(\"rr.envLock\", \"\");\n $(\"scriptStyle\").value = pick(\"rr.scriptStyle\", \"punchy\");\n})();\n\nfunction saveKeys() {\n const put = (k, v) => { try { localStorage.setItem(k, v); } catch (e) {} };\n put(\"rr.proxy\", $(\"proxyUrl\").value.trim());\n put(\"rr.murf\", $(\"murfKey\").value.trim());\n put(\"rr.llmKey\", $(\"llmKey\").value.trim());\n put(\"rr.llmBase\", $(\"llmBase\").value.trim());\n put(\"rr.llmModel\", $(\"llmModel\").value.trim());\n put(\"rr.styleLock\", $(\"styleLock\").value.trim());\n put(\"rr.model\", $(\"model\").value.trim());\n put(\"rr.charLock\", $(\"charLock\").value.trim());\n put(\"rr.artLock\", $(\"artLock\").value.trim());\n put(\"rr.envLock\", $(\"envLock\").value.trim());\n put(\"rr.scriptStyle\", $(\"scriptStyle\").value);\n setStatus(\"Settings saved.\", \"warn\");\n}\n\nfunction proxy() { return $(\"proxyUrl\").value.trim() || \"https://tts-proxy.val.run/\"; }\nfunction panelCount() { return Math.max(3, Math.min(12, parseInt($(\"panels\").value) || 5)); }\nfunction secPerPanel() { return Math.max(1, parseInt($(\"secPerPanel\").value) || 6); }\n\nfunction updateEst() {\n const total = panelCount() * secPerPanel();\n $(\"est\").textContent = \"Panels \" + panelCount() + \" · Sec/panel \" + secPerPanel() + \" · Est total \" + fmt(total);\n}\nfunction fmt(s) { const m = Math.floor(s/60), r = s%60; return `${m}m ${r.toString().padStart(2,\"0\")}s`; }\nupdateEst();\n[\"panels\", \"secPerPanel\"].forEach(id => $(id).addEventListener(\"change\", updateEst));\n\nfunction but(btn, busy) { if (btn) btn.disabled = !!busy; }\n\n// =====================================================================\n// STRICT SCRIPTING ENGINE\n// Rules: present-tense active voice · 8-12 words per line ·\n// one action per sentence · no filler/meta-commentary\n// =====================================================================\nconst MIN_WORDS = 8;\nconst MAX_WORDS = 12;\n\nconst PAST_VERBS = /\\b(was|were|had|did|went|became|awakened|realized|realised|felt|said|told|saw|came|made|took|got|grew|began|started|fought|knew|left|walked|ran|stopped|looked|returned|chose|found|held|kept|thought|won|gave|lost|swung|wrote|read|heard|spoke|showed)\\b/i;\nconst PASSIVE_BY = /\\b(is|are|was|were|been|being)\\b[^.]*\\bby\\b/i;\nconst FILLER = /\\b(here is|let me|now let|in this story|this is a story|i will|we will|imagine|remember that|basically|so basically|you see)\\b/i;\nconst EXTRA_ACTION = /\\b(and then|, and then|then |while he also|while she|, but |however)\\b/i;\n\nfunction validateLine(line) {\n const issues = [];\n const words = (line || \"\").trim().split(/\\s+/).filter(Boolean);\n const n = words.length;\n if (n < MIN_WORDS) issues.push(`only ${n} words (need ${MIN_WORDS}-${MAX_WORDS})`);\n else if (n > MAX_WORDS) issues.push(`${n} words (need ${MIN_WORDS}-${MAX_WORDS})`);\n if (PAST_VERBS.test(line)) issues.push(\"past tense — use present tense active voice\");\n if (PASSIVE_BY.test(line)) issues.push(\"passive voice (…by…)\");\n if (EXTRA_ACTION.test(line)) issues.push(\"more than one action — split it\");\n if (FILLER.test(line)) issues.push(\"filler / meta-commentary\");\n return { ok: issues.length === 0, words: n, issues };\n}\nfunction validateAll(lines) { return lines.map(validateLine); }\n\nfunction renderValidation(lines) {\n const el = $(\"validatorNote\");\n if (!el) return;\n const res = validateAll(lines);\n const bad = res.filter(r => !r.ok).length;\n el.textContent = bad\n ? `Strict engine: ${bad}/${lines.length} line(s) violate rules (red). Fix the story config or press Write again.`\n : `Strict engine: all ${lines.length} lines pass (8-12 words · present active voice · one action).`;\n el.style.color = bad ? \"#f26d6d\" : \"#7fd38a\";\n}\n\n// =====================================================================\n// BLUEPRINT: CHARACTER CONSISTENCY\n// The #1 secret in the blueprint — the same character in every panel.\n// =====================================================================\nfunction characterBlock() {\n const cl = $(\"charLock\") ? $(\"charLock\").value.trim() : \"\";\n if (cl) return cl;\n const lock = $(\"styleLock\") ? $(\"styleLock\").value.trim() : \"\";\n if (lock) return lock;\n const mc = $(\"mc\").value || \"a young hunter\";\n return `The same protagonist: ${mc}, a fixed character with the same face, hairstyle, skin tone, build and outfit in every panel.`;\n}\nconst CONSISTENCY = \"Maintain the same character design, consistent face, consistent hairstyle, consistent skin tone, same facial structure and same body proportions.\";\n\n// Blueprint camera angles (Chapter 6 / Bonus section).\nconst CAMERAS = [\"wide shot\", \"close-up\", \"medium shot\", \"low angle\", \"over-the-shoulder\",\n \"reaction shot\", \"high angle\", \"side profile\", \"POV\", \"overhead shot\", \"drone shot\", \"cinematic medium shot\"];\n\n// ONE art style for the WHOLE story (the blueprint's #1 rule: never mix\n// styles panel to panel). Change it via the 🎨 Art Style Lock, or the Style\n// box, or the Art Model dropdown.\nconst DEFAULT_STYLE = \"semi-realistic premium 3D animated style inspired by Disney and DreamWorks, expressive eyes, detailed skin textures, cinematic lighting, ray-traced global illumination, Unreal Engine 5 quality, vibrant colours, ultra-sharp details, Netflix animated film quality\";\n\n// =====================================================================\n// ART MODEL -> STYLE MAP\n// Each Art Model dropdown choice must drive the STYLE text in the image\n// prompt too. Without this the dropdown was sent to AI Horde but the\n// prompt always said \"semi-realistic 3D\", so the selected model never\n// truly took effect in the generated look.\n// =====================================================================\nconst ART_MODEL_STYLES = {\n \"Dreamshaper\": \"cinematic Dreamshaper style, semi-realistic premium 3D animated style inspired by Disney and DreamWorks, expressive eyes, detailed skin textures, cinematic lighting, ray-traced global illumination, ultra-sharp details\",\n \"Anything v5\": \"clean anime style, Anything v5, crisp cel-shaded anime art, expressive eyes, vibrant colors, clean linework, detailed\",\n \"Deliberate\": \"semi-realistic painterly style, Deliberate model, refined detailed rendering, cinematic lighting, lifelike textures\",\n \"Realistic Vision\": \"photorealistic style, Realistic Vision model, realistic skin texture, cinematic photography, depth of field, detailed\",\n \"MeinaMix\": \"clean anime style, MeinaMix model, soft cel-anime rendering, bright colors, clean composition, detailed\",\n \"Comic-Diffusion\": \"webtoon / comic ink-line style, Comic-Diffusion model, bold outlines, black-and-white halftone shading, dramatic comic panel framing, high contrast\",\n};\n\n// Full art-style text used inside every image prompt.\nfunction artStyleFor() {\n const al = $(\"artLock\") ? $(\"artLock\").value.trim() : \"\";\n if (al) return al;\n const st = $(\"style\") ? $(\"style\").value.trim() : \"\";\n if (st) return st;\n const m = $(\"model\") ? $(\"model\").value.trim() : \"\";\n return ART_MODEL_STYLES[m] || DEFAULT_STYLE;\n}\n// Short label (the model name) used in the Image Bible / reports.\nfunction artModelLabel() { return ($(\"model\") && $(\"model\").value.trim()) || \"Auto\"; }\n\n// =====================================================================\n// BLUEPRINT: STORY ARC AS SCENES\n// Each beat is a real scene: narration (strict) + who/what/where +\n// environment + mood + camera. Panels follow a rising arc: hook → stakes →\n// cliffhanger. The image prompt is built FROM the scene, so it never\n// contradicts the narration.\n// =====================================================================\nfunction buildBeats() {\n const mc = $(\"mc\").value || \"Sung Jin-Woo\";\n const world = $(\"world\").value || \"gates linking Earth to dungeons\";\n const power = $(\"power\").value || \"rises from the weakest Hunter to a Monarch\";\n const goal = $(\"goal\").value || \"to save humanity from the Monarchs\";\n return [\n { n: `${mc} stands as the weakest hunter, mocked by the guild elite.`,\n s: `The protagonist stands alone in a crowded hunter guild hall while elite hunters sneer and point at him.`,\n e: \"modern hunter guild hall, glass walls, holographic rank displays, cold blue lighting\",\n m: \"somber\", c: \"wide shot\" },\n { n: `${mc} steps into ${world}, alone and unarmed.`,\n s: `The protagonist walks alone toward a towering glowing gate that tears open in the city street.`,\n e: \"city street at dusk, a massive glowing portal, swirling energy, scattered onlookers\",\n m: \"mysterious\", c: \"low angle\" },\n { n: `A hidden system awakens inside ${mc}, granting him new power.`,\n s: `A glowing blue interface flickers before the protagonist as a surge of energy wraps around him.`,\n e: \"dark dungeon chamber, floating holographic system windows, drifting embers\",\n m: \"awe-inspiring\", c: \"close-up\" },\n { n: `${mc} grinds in secret, training until his body breaks.`,\n s: `The protagonist trains alone in a dark chamber, sweat dripping as he strikes a stone pillar.`,\n e: \"bare stone training chamber, dust in the air, single shaft of light\",\n m: \"desperate\", c: \"medium shot\" },\n { n: `A monster lunges, and ${mc} strikes back for the first time.`,\n s: `The protagonist faces a towering beast in a dungeon, raising his blade as it charges.`,\n e: \"underground dungeon, jagged rocks, glowing monster eyes in the dark\",\n m: \"tense\", c: \"over-the-shoulder\" },\n { n: `${mc} unleashes his aura, and the dungeon trembles.`,\n s: `A blinding aura erupts around the protagonist as the ground cracks beneath his feet.`,\n e: \"shattered dungeon floor, rising dust, arcs of purple energy\",\n m: \"triumphant\", c: \"low angle\" },\n { n: `A shadow army rises behind ${mc}, answering his call.`,\n s: `The protagonist stands before a rising tide of shadow soldiers that kneel to him.`,\n e: \"open battlefield at night, ranks of dark silhouettes, pale moonlight\",\n m: \"epic\", c: \"drone shot\" },\n { n: `${mc} confronts a Monarch who towers above the ruined city.`,\n s: `The protagonist faces a colossal armored Monarch looming over a burning city skyline.`,\n e: \"burning city, smoke columns, debris, a colossal dark figure\",\n m: \"menacing\", c: \"high angle\" },\n { n: `The guilds turn on ${mc}, calling him a threat.`,\n s: `The protagonist stands surrounded by armed hunters who level weapons at him.`,\n e: \"government plaza, armored vehicles, flashing lights, tense crowd\",\n m: \"foreboding\", c: \"reaction shot\" },\n { n: `${mc} shields the city as the sky splits open.`,\n s: `The protagonist raises a barrier over a terrified crowd as a rift tears the sky.`,\n e: \"city street, panicking crowd, a colossal rift in the clouds\",\n m: \"desperate\", c: \"overhead shot\" },\n { n: `${power}, ${mc} charges into the final battle.`,\n s: `The protagonist charges forward, power blazing, toward the Monarch's army.`,\n e: \"ash-covered battlefield, banners torn, storm clouds, distant army\",\n m: \"violent\", c: \"POV\" },\n { n: `${mc} stands alone, ready to ${goal}.`,\n s: `The protagonist stands on a cliff edge above the battlefield, eyes glowing, facing the horizon.`,\n e: \"cliff above a war-torn plain, dramatic storm light, wind-blown coat\",\n m: \"awe-inspiring\", c: \"silhouette against blinding light\" },\n ];\n}\n\n// ---- offline template ----\n// Builds exactly `count` distinct scenes (a real rising arc), each validated\n// against the strict rules. Never repeats narration.\nfunction defaultScenes() {\n const beats = buildBeats();\n const count = panelCount();\n const scenes = [];\n for (let i = 0; i < count; i++) {\n const b = beats[i % beats.length];\n scenes.push({ text: b.n, scene: b.s, env: b.e, mood: b.m, camera: b.c });\n }\n // Validate narration; rebuild any over-long line in a tighter shape.\n return scenes.map((sc, i) => {\n const res = validateLine(sc.text);\n if (res.ok) return sc;\n const b = beats[i % beats.length];\n const tight = `${$(\"mc\").value || \"Sung Jin-Woo\"} ${[\"fights\",\"leaps\",\"surges\",\"stands\",\"charges\",\"rises\"][i % 6]} into the battle.`;\n return { ...sc, text: validateLine(tight).ok ? tight : sc.text };\n });\n}\n\n// ---- LLM call: returns structured scenes ----\n// Asks the LLM for per-panel NARRATION + SCENE so the image prompt is built\n// from the story, not random slots.\nasync function callLLM(feedback) {\n const key = $(\"llmKey\").value.trim();\n const base = $(\"llmBase\").value.trim() || \"https://api.openai.com/v1\";\n const model = $(\"llmModel\").value.trim() || \"gpt-4o-mini\";\n const mc = $(\"mc\").value, power = $(\"power\").value, goal = $(\"goal\").value, world = $(\"world\").value;\n const count = panelCount();\n const sys = \"You are an award-winning manhwa screenwriter. Plan a RISING STORY ARC of exactly \" + count +\n \" panels: opening hook, escalating stakes, cliffhanger ending. For EACH panel output a strict block:\\n\" +\n \"PANEL \\nNARRATION: \\n\" +\n \"SCENE: <2-3 sentences describing WHO is in the shot, WHAT they are doing, and WHERE — a vivid visual scene>\\n\\n\" +\n \"Rules: never use past tense (no was/were/had/awakened). Every NARRATION is 8-12 words. Every SCENE is visual and story-based. No preamble, no closing note.\" +\n (feedback ? \"\\n\\nYour previous attempt was REJECTED. Fix these and re-output all \" + count + \" blocks:\\n\" + feedback : \"\");\n const user = `MC: ${mc}\\nPower: ${power}\\nGoal: ${goal}\\nWorld: ${world}\\n\\nWrite ${count} panels as a rising manhwa recap story.`;\n const url = base.replace(/\\/+$/, \"\") + \"/chat/completions\";\n const res = await fetch(url, {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\", \"authorization\": \"Bearer \" + key },\n body: JSON.stringify({ model, messages: [{ role: \"system\", content: sys }, { role: \"user\", content: user }], temperature: 0.9, max_tokens: 1200 }),\n });\n if (!res.ok) {\n const txt = await res.text().catch(() => \"\");\n throw new Error(\"LLM HTTP \" + res.status + (txt ? \" — \" + txt.slice(0, 200) : \"\"));\n }\n const data = await res.json();\n const content = (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) || \"\";\n return parseScenes(content, count);\n}\n\n// Parse the LLM's PANEL/NARRATION/SCENE blocks into scene objects.\nfunction parseScenes(content, count) {\n const out = [];\n const blocks = content.split(/\\n\\s*\\n/);\n for (const block of blocks) {\n const n = block.match(/NARRATION:\\s*(.+)/i);\n const s = block.match(/SCENE:\\s*([\\s\\S]+)/i);\n if (n && n[1]) {\n out.push({\n text: n[1].trim(),\n scene: (s && s[1] ? s[1].trim() : \"\"),\n env: \"\", mood: \"\", camera: \"\",\n });\n }\n }\n // Fallback: if the model ignored the format, treat non-empty lines as narration.\n if (!out.length) {\n const lines = content.split(/\\n+/).map(x => x.replace(/^\\s*\\d+[\\.\\)]?\\s*/, \"\").trim()).filter(Boolean);\n for (const l of lines) out.push({ text: l, scene: \"\", env: \"\", mood: \"\", camera: \"\" });\n }\n // Pad/trim to exactly `count`.\n while (out.length < count) out.push({ text: out[0] ? out[0].text : \"The battle begins.\", scene: \"\", env: \"\", mood: \"\", camera: \"\" });\n return out.slice(0, count);\n}\n\n// ---- write story with validation + smart retry ----\nasync function writeStory(btn) {\n but(btn, true);\n setStatus(\"Writing story…\", \"warn\");\n try {\n const count = panelCount();\n let scenes;\n if ($(\"llmKey\").value.trim()) {\n setStatus(\"Calling LLM to write story…\", \"warn\");\n scenes = await callLLM();\n const MAX_RETRIES = 2;\n for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {\n const lines = scenes.map(s => s.text);\n const res = validateAll(lines);\n const bad = res.filter(r => !r.ok);\n if (bad.length <= Math.max(1, Math.floor(count * 0.3))) break;\n const feedback = res.map((r, i) => `Panel ${i + 1} (${r.words}w): ${r.issues.join(\"; \") || \"ok\"}`).join(\"\\n\");\n setStatus(\"Strict retry \" + (attempt + 1) + \"/\" + MAX_RETRIES + \" — \" + bad.length + \" line(s) violated rules…\", \"warn\");\n scenes = await callLLM(feedback);\n }\n } else {\n scenes = defaultScenes();\n }\n scenes = enrichScenes(scenes); // ensure every panel has cinematic env/mood/camera\n storyText = scenes.map(s => s.text).join(\"\\n\\n\");\n // build panels + narration from the story scenes\n panels = [];\n narration = [];\n for (let i = 0; i < count; i++) {\n const sc = scenes[i] || scenes[scenes.length - 1];\n const prompt = promptFor(i, sc);\n panels.push({ prompt, scene: sc.scene, env: sc.env, camera: sc.camera, mood: sc.mood, img: null });\n narration.push({ text: sc.text });\n }\n ready = false;\n $(\"readyBtn\").textContent = \"✅ Ready\";\n $(\"readyBtn\").disabled = false;\n renderStoryboard();\n renderValidation(panels.map(p => narration[panels.indexOf(p)].text));\n renderPreview(true);\n fillMeta();\n setStatus(\"Story written: \" + count + \" panels (\" + ($(\"llmKey\").value.trim() ? \"AI\" : \"template\") + \"). Generate images next.\", \"\");\n } catch (e) {\n setStatus(\"Story error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { but(btn, false); }\n}\n\n// ---- BLUEPRINT: enrich AI-written scenes with micro-detail ----\n// The LLM returns NARRATION+SCENE but not env/mood/camera, so AI-story panel\n// prompts used to come out generic. This backfills each scene's environment,\n// mood and camera from the rising-arc beat templates — so every panel keeps\n// the same cinematic micro-level detail as the offline template.\nfunction enrichScenes(scenes) {\n const beats = buildBeats();\n return scenes.map((sc, i) => {\n const b = beats[i % beats.length];\n return {\n ...sc,\n env: (sc.env || \"\").trim() || b.e,\n mood: (sc.mood || \"\").trim() || b.m,\n camera: (sc.camera || \"\").trim() || b.c,\n };\n });\n}\n\n// ---- BLUEPRINT: build the image prompt from the SCENE ----\n// character consistency + scene (who/what/where) + environment + camera +\n// mood + chosen style + the blueprint's consistency instruction. This is what\n// makes the panel match the story instead of contradicting it.\nfunction promptFor(i, sc) {\n const art = artStyleFor();\n const char = characterBlock().trim().replace(/\\.+$/, \"\"); // strip trailing period\n const envLock = $(\"envLock\") ? $(\"envLock\").value.trim() : \"\";\n const camera = sc.camera || CAMERAS[i % CAMERAS.length];\n const mood = sc.mood || \"cinematic\";\n const scene = sc.scene || sc.text;\n const env = [envLock, sc.env].filter(Boolean).join(\", \");\n return `${char}. ${scene}${env ? \", \" + env : \"\"}. ${mood} mood, ${camera}, ${art}. ${CONSISTENCY}`;\n}\n\nfunction renderStoryboard() {\n const el = $(\"storyboard\");\n if (!panels.length) { el.textContent = \"Write a new story first.\"; el.style.color = \"#9aa0ab\"; return; }\n el.style.color = \"#e8e8e8\";\n const full = $(\"scriptStyle\") && $(\"scriptStyle\").value === \"full\";\n el.innerHTML = panels.map((p, i) => {\n const t = narration[i] ? narration[i].text : \"\";\n const res = validateLine(t);\n const wc = `${res.words}w${res.ok ? \" ✓\" : \" ⚠️ \" + res.issues.join(\"; \")}`;\n const scene = full && p.scene ? `

🎬 ${esc(p.scene)}

` : \"\";\n return `Panel ${i + 1} · ${wc}${esc(t)}${scene}`;\n }).join(\"\\n\");\n}\n\n// ---------- PLACEHOLDER + IMAGE GEN (guarantees every panel has an image) ----------\nfunction makePlaceholder(prompt, w, h) {\n const c = document.createElement(\"canvas\");\n c.width = w; c.height = h;\n const x = c.getContext(\"2d\");\n const hue = (prompt.length * 37) % 360;\n const g = x.createLinearGradient(0, 0, c.width, c.height);\n g.addColorStop(0, `hsl(${hue},45%,16%)`);\n g.addColorStop(1, `hsl(${(hue+60)%360},55%,26%)`);\n x.fillStyle = g; x.fillRect(0, 0, c.width, c.height);\n x.fillStyle = \"rgba(255,255,255,.75)\";\n x.font = `bold ${Math.floor(c.width/18)}px system-ui`;\n x.textAlign = \"center\"; x.textBaseline = \"middle\";\n wrapText(x, prompt, c.width/2, c.height/2, c.width*0.8, Math.floor(c.width/18));\n const img = new Image();\n img.src = c.toDataURL(\"image/jpeg\", 0.8);\n return img;\n}\nfunction wrapText(x, text, cx, cy, maxW, lh) {\n const words = text.split(/ /); let line = \"\"; let y = cy;\n for (const w of words) {\n const t = line ? line + \" \" + w : w;\n if (x.measureText(t).width > maxW && line) { x.fillText(line, cx, y); line = w; y += lh; }\n else line = t;\n }\n x.fillText(line, cx, y);\n}\n\n// Async image generation: submit a job, then poll /api/status until the\n// panels are ready. The button is re-enabled right after submit so it never\n// gets stuck.\nasync function generateImages(btn) {\n but(btn, true);\n setStatus(\"Preparing panels…\", \"warn\");\n try {\n if (!panels.length) await writeStory(null);\n const w = $(\"format\").value === \"long\" ? 1280 : 720;\n const h = $(\"format\").value === \"long\" ? 720 : 1280;\n panels.forEach(p => { if (!p.img) p.img = makePlaceholder(p.prompt, w, h); });\n renderPreview(false);\n but(btn, false); // release the button — generation now runs in the background\n\n const res = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ prompts: panels.map(p => p.prompt), width: w, height: h, model: $(\"model\").value.trim() }),\n });\n if (!res.ok) throw new Error(\"server HTTP \" + res.status);\n const { jobId, count } = await res.json();\n setStatus(\"Image job submitted — polls every ~3s (may take a minute or two).\", \"warn\");\n\n const deadline = Date.now() + 6 * 60 * 1000; // give up after 6 min\n let st = null;\n while (Date.now() < deadline) {\n await sleep(3000);\n const sr = await fetch(`/api/status?job=${encodeURIComponent(jobId)}`);\n if (!sr.ok) continue;\n st = await sr.json();\n // swap in any finished panels\n if (Array.isArray(st.urls)) {\n for (let i = 0; i < st.urls.length; i++) {\n if (st.urls[i] && !(panels[i] && panels[i].img && panels[i].img.src === st.urls[i])) swapImage(i, st.urls[i]);\n }\n const doneCount = st.total - st.pending;\n setStatus(st.done\n ? `Panels ready (${doneCount}/${st.total}${st.errors ? \", \" + st.errors + \" failed\" : \"\"}).`\n : `Generating images… ${doneCount}/${st.total} ready.`, \"warn\");\n }\n if (st && st.done) break;\n }\n if (!st || !st.done) {\n setStatus(\"Still generating — wait a bit or reload the page. A registered AI Horde key speeds this up a lot.\", \"warn\");\n }\n } catch (e) {\n setStatus(\"Image gen error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { but(btn, false); }\n}\n\nfunction swapImage(i, src) {\n const img = new Image();\n img.decoding = \"async\";\n img.onload = () => { panels[i].img = img; renderPreview(false); };\n img.onerror = () => { /* keep placeholder */ };\n img.src = src;\n}\n\nfunction renderPreview(clear) {\n const el = $(\"previewPanels\");\n if (clear && !panels.length) { el.innerHTML = \"\"; return; }\n if (!panels.length) return;\n el.innerHTML = panels.map((p, i) =>\n `

${p.img ? `

` : `

Panel ${i + 1}

`).join(\"\");\n}\n\n// ---------- VOICE / TTS ----------\nasync function proxyTTS(text, lang) {\n const base = proxy();\n if (!base) throw new Error(\"No TTS proxy URL set\");\n const sep = base.includes(\"?\") ? \"&\" : \"?\";\n const url = base + sep + \"text=\" + encodeURIComponent(text) + \"&lang=\" + encodeURIComponent(lang || \"en\");\n const res = await fetch(url);\n if (!res.ok) throw new Error(\"Proxy TTS HTTP \" + res.status);\n const blob = await res.blob();\n return URL.createObjectURL(blob);\n}\n\nasync function previewVoice(btn) {\n but(btn, true);\n setStatus(\"Generating voice preview…\", \"warn\");\n try {\n if (!narration.length) await writeStory(null);\n const txt = narration[0] && narration[0].text ? narration[0].text : (storyText || \"Hello\");\n const url = await proxyTTS(txt, \"en\");\n const au = document.createElement(\"audio\");\n au.src = url; au.controls = true; au.style.width = \"100%\";\n au.onended = () => au.remove();\n $(\"previewPanels\").insertAdjacentElement(\"afterend\", au);\n au.play().catch(() => {});\n setStatus(\"Voice preview ready (Proxy TTS).\", \"\");\n } catch (e) {\n setStatus(\"Proxy TTS failed (\" + (e.message||e) + \"). Using browser voice.\", \"warn\");\n try { speechSynthesis.cancel(); speechSynthesis.speak(new SpeechSynthesisUtterance(narration[0].text)); } catch (_) {}\n } finally { but(btn, false); }\n}\n\n// ---------- READY / metadata ----------\nfunction markReady() {\n ready = true;\n $(\"readyBtn\").textContent = \"✅ Ready\";\n $(\"readyBtn\").disabled = true;\n setStatus(\"Ready to compile.\", \"\");\n}\n\nfunction fillMeta() {\n if (!panels.length) return;\n const title = $(\"mc\").value + \" — \" + $(\"goal\").value;\n $(\"metaTitle\").value = title.slice(0, 100);\n $(\"metaTags\").value = \"manhwa, \" + $(\"mc\").value.toLowerCase().split(\" \")[0] + \", recap, korean webtoon, ai\";\n $(\"metaHashtags\").value = \"#manhwa #recap #anime #webtoon\";\n const lines = storyText ? storyText.split(\"\\n\") : [];\n $(\"metaDesc\").value = title + \"\\n\\n\" + (lines.slice(0, 3).join(\"\\n\")) + \"\\n\\nSubscribe for more recaps!\";\n}\n\nfunction copyMeta(which) {\n const map = { title: \"metaTitle\", desc: \"metaDesc\", tags: \"metaTags\", hashtags: \"metaHashtags\" };\n const val = $(map[which]).value;\n navigator.clipboard.writeText(val).then(() => setStatus(\"Copied: \" + which, \"warn\")).catch(() => setStatus(\"Copy failed\", \"err\"));\n}\n\n// ---- SAFE LOCK: save how all images look to a text file ----\nfunction saveLockFile() {\n const mc = $(\"mc\").value, power = $(\"power\").value, goal = $(\"goal\").value, world = $(\"world\").value;\n const txt = [\n \"MANHWA RECAP ROBOT — IMAGE LOCK (how every panel looks)\",\n \"========================================================\",\n \"\",\n \"PREMISE (always used in the story):\",\n \" MC: \" + mc,\n \" Power: \" + power,\n \" Goal: \" + goal,\n \" World: \" + world,\n \"\",\n \"1) CHARACTER LOCK:\",\n \" \" + ($(\"charLock\").value.trim() || characterBlock()),\n \"\",\n \"2) ART STYLE LOCK:\",\n \" \" + ($(\"artLock\").value.trim() || \"Auto (see the Art Model dropdown)\"),\n \"\",\n \"3) ENVIRONMENT LOCK:\",\n \" \" + ($(\"envLock\").value.trim() || \"(none — each scene sets its own)\"),\n \"\",\n \"CONSISTENCY RULE applied to every image:\",\n \" \" + CONSISTENCY,\n ].join(\"\\n\");\n downloadText(\"manhwa-image-lock.txt\", txt);\n setStatus(\"Image lock saved to file — that's exactly how all images will look.\", \"warn\");\n}\n\n// ---- send the issue back so it can be fixed ----\nfunction downloadIssueReport() {\n const lines = [];\n lines.push(\"MANHWA RECAP ROBOT — ISSUE REPORT\");\n lines.push(\"Generated: \" + new Date().toISOString());\n lines.push(\"=========================================================\");\n lines.push(\"\");\n lines.push(\"PREMISE\");\n lines.push(\" MC: \" + $(\"mc\").value);\n lines.push(\" Power: \" + $(\"power\").value);\n lines.push(\" Goal: \" + $(\"goal\").value);\n lines.push(\" World: \" + $(\"world\").value);\n lines.push(\" Panels: \" + panelCount() + \" · Sec/panel: \" + secPerPanel());\n lines.push(\" Art Model: \" + $(\"model\").value);\n lines.push(\" Script Style: \" + $(\"scriptStyle\").value);\n lines.push(\"\");\n lines.push(\"CHARACTER LOCK: \" + ($(\"charLock\").value.trim() || \"(none)\"));\n lines.push(\"ART STYLE LOCK: \" + ($(\"artLock\").value.trim() || \"(none)\"));\n lines.push(\"ENVIRONMENT LOCK: \" + ($(\"envLock\").value.trim() || \"(none)\"));\n lines.push(\"\");\n lines.push(\"STORY (narration per panel):\");\n narration.forEach((n, i) => lines.push(\" Panel \" + (i + 1) + \": \" + n.text));\n lines.push(\"\");\n lines.push(\"PANEL IMAGE PROMPTS:\");\n panels.forEach((p, i) => lines.push(\" Panel \" + (i + 1) + \": \" + p.prompt));\n lines.push(\"\");\n lines.push(\"LAST STATUS: \" + ($(\"status\").textContent || \"(none)\"));\n downloadText(\"manhwa-issue-report.txt\", lines.join(\"\\n\"));\n setStatus(\"Issue report saved — send this file back so I can fix it.\", \"warn\");\n}\n\n// ---- IMAGE BIBLE: every image explained at a micro level ----\n// A per-panel breakdown (narration, scene who/what/where, character,\n// environment, camera, mood, art style, full prompt) so every panel's image\n// is described consistently and the whole story stays coherent.\nfunction downloadImageBible() {\n if (!panels.length) { setStatus(\"Write a story first, then download the Image Bible.\", \"warn\"); return; }\n const lines = [];\n lines.push(\"MANHWA RECAP ROBOT — IMAGE BIBLE (every image at a micro level)\");\n lines.push(\"==================================================================\");\n lines.push(\"\");\n lines.push(\"PREMISE\");\n lines.push(\" MC: \" + $(\"mc\").value);\n lines.push(\" Power: \" + $(\"power\").value);\n lines.push(\" Goal: \" + $(\"goal\").value);\n lines.push(\" World: \" + $(\"world\").value);\n lines.push(\" Panels: \" + panelCount() + \" · Art Model: \" + $(\"model\").value);\n lines.push(\"\");\n lines.push(\"GLOBAL (applied to every panel):\");\n lines.push(\" CHARACTER: \" + ($(\"charLock\").value.trim() || characterBlock()));\n lines.push(\" ART STYLE: \" + ($(\"artLock\").value.trim() || \"Auto\"));\n lines.push(\" ENVIRONMENT:\" + ($(\"envLock\").value.trim() ? \" \" + $(\"envLock\").value.trim() : \" (none)\"));\n lines.push(\"\");\n lines.push(\"PER-PANEL MICRO BREAKDOWN\");\n lines.push(\"-------------------------\");\n panels.forEach((p, i) => {\n const t = narration[i] ? narration[i].text : \"\";\n lines.push(\"\");\n lines.push(\"PANEL \" + (i + 1));\n lines.push(\" NARRATION: \" + t);\n lines.push(\" SCENE (who/what/where): \" + (p.scene || t));\n lines.push(\" CHARACTER: \" + ($(\"charLock\").value.trim() || characterBlock()));\n lines.push(\" ENVIRONMENT: \" + ([$(\"envLock\").value.trim(), p.env].filter(Boolean).join(\", \") || \"(scene default)\"));\n lines.push(\" CAMERA: \" + (p.camera || \"cinematic\"));\n lines.push(\" MOOD: \" + (p.mood || \"cinematic\"));\n lines.push(\" ART STYLE: \" + ($(\"artLock\").value.trim() || \"Auto\"));\n lines.push(\" FULL PROMPT: \" + p.prompt);\n });\n downloadText(\"manhwa-image-bible.txt\", lines.join(\"\\n\"));\n setStatus(\"Image Bible saved — every image explained at a micro level for consistency.\", \"warn\");\n}\n\nfunction downloadText(name, text) {\n const a = document.createElement(\"a\");\n a.download = name;\n a.href = \"data:text/plain;charset=utf-8,\" + encodeURIComponent(text);\n a.click();\n}\n\n// ---------- COMPILE ----------\nasync function compileVideo(btn) {\n but(btn, true);\n setStatus(\"Compiling video…\", \"warn\");\n try {\n if (!panels.length) await writeStory(null);\n const bufs = [];\n for (let i = 0; i < narration.length; i++) {\n const txt = narration[i].text || \"Panel \" + (i+1);\n let url = null;\n try { url = await proxyTTS(txt, \"en\"); } catch (e) { /* silent fallback */ }\n bufs.push(url);\n }\n const mp4Blob = await buildVideo(bufs);\n const videoEl = $(\"video\");\n videoEl.src = URL.createObjectURL(mp4Blob);\n videoEl.controls = true;\n const dl = $(\"downloadBtn\");\n dl.style.display = \"inline-block\";\n dl.href = URL.createObjectURL(mp4Blob);\n dl.download = \"recap-\" + Date.now() + (mp4Blob.type.includes(\"mp4\") ? \".mp4\" : \".webm\");\n setStatus(\"Video compiled and ready. Use Thumbnail + Download.\", \"\");\n } catch (e) {\n setStatus(\"Compile error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { but(btn, false); }\n}\n\nfunction buildVideo(narrationUrls) {\n return new Promise((resolve, reject) => {\n const isShort = $(\"format\").value === \"short\";\n const W = isShort ? 720 : 1280, H = isShort ? 1280 : 720;\n const canvas = document.createElement(\"canvas\");\n canvas.width = W; canvas.height = H;\n canvas.style.cssText = \"position:fixed;left:-10000px;top:0;\";\n document.body.appendChild(canvas);\n const ctx = canvas.getContext(\"2d\");\n\n const ac = new (window.AudioContext || window.webkitAudioContext)();\n const dest = ac.createMediaStreamDestination();\n const videoStream = canvas.captureStream(30);\n\n const secs = panels.map((_, i) => secPerPanel());\n const totalSec = secs.reduce((a, b) => a + b, 0);\n const totalMs = totalSec * 1000;\n\n let t = ac.currentTime + 0.1;\n let scheduledAny = false;\n (async () => {\n for (let i = 0; i < secs.length; i++) {\n if (narrationUrls[i]) {\n try {\n const buf = await fetch(narrationUrls[i]).then(r => r.arrayBuffer()).then(b => ac.decodeAudioData(b));\n const src = ac.createBufferSource();\n src.buffer = buf;\n src.connect(dest);\n src.start(t);\n scheduledAny = true;\n } catch (e) { /* skip */ }\n }\n t += secs[i];\n }\n if (!scheduledAny) { /* silent audio continues */ }\n })();\n\n const tracks = [videoStream.getVideoTracks()[0], dest.stream.getAudioTracks()[0]];\n const media = new MediaStream(tracks);\n const mime = pickMime();\n const rec = new MediaRecorder(media, mime);\n const chunks = [];\n rec.ondataavailable = e => { if (e.data && e.data.size) chunks.push(e.data); };\n let resolved = false;\n const finish = (err) => {\n clearTimeout(safety);\n if (resolved) return;\n resolved = true;\n try { if (rec.state !== \"inactive\") rec.stop(); } catch (e) {}\n try { ac.close(); } catch (e) {}\n if (canvas.parentNode) canvas.parentNode.removeChild(canvas);\n if (err) reject(err);\n else resolve(new Blob(chunks, { type: mime.mimeType || \"video/webm\" }));\n };\n rec.onerror = (ev) => finish(new Error(\"Recorder error: \" + ((ev.error && ev.error.message) || ev.error || \"unknown\")));\n rec.onstop = () => finish(null);\n const safety = setTimeout(() => finish(new Error(\"Compile timed out — no video data captured. Try fewer panels / shorter seconds, stay on the tab.\")), totalMs + 9000);\n\n const start = performance.now();\n function frame(now) {\n if (now - start >= totalMs) { rec.stop(); return; }\n draw(now - start);\n requestAnimationFrame(frame);\n }\n function draw(ms) {\n ctx.fillStyle = \"#000\"; ctx.fillRect(0, 0, W, H);\n let acc = 0;\n for (let i = 0; i < panels.length; i++) {\n const segMs = secs[i] * 1000;\n if (ms < acc + segMs) {\n const p = Math.min(1, (ms - acc) / segMs);\n drawPanel(ctx, panels[i].img, p, W, H);\n const fade = 500;\n if (i + 1 < panels.length && ms >= segMs - fade) {\n const a = (ms - (segMs - fade)) / fade;\n ctx.globalAlpha = a;\n drawPanel(ctx, panels[i + 1].img, 0, W, H);\n ctx.globalAlpha = 1;\n }\n break;\n }\n acc += segMs;\n }\n }\n function drawPanel(ctx, img, p, W, H) {\n if (!img) { ctx.fillStyle = \"#123\"; ctx.fillRect(0,0,W,H); return; }\n const zoom = 1 + 0.12 * p;\n const iw = img.naturalWidth || W, ih = img.naturalHeight || H;\n const s = Math.max(W / iw, H / ih) * zoom;\n const dw = iw * s, dh = ih * s;\n ctx.drawImage(img, (W - dw) / 2, (H - dh) / 2, dw, dh);\n }\n function pickMime() {\n for (const t of [\"video/mp4;codecs=avc1\", \"video/webm;codecs=vp9\", \"video/webm\"]) {\n if (MediaRecorder.isTypeSupported(t)) return { mimeType: t };\n }\n return {};\n }\n draw(0);\n rec.start(100);\n ac.resume().catch(()=>{}).finally(() => requestAnimationFrame(frame));\n });\n}\n\nfunction generateThumbnail() {\n if (!panels.length) { setStatus(\"Write a story first.\", \"warn\"); return; }\n const isShort = $(\"format\").value === \"short\";\n const W = isShort ? 720 : 1280, H = isShort ? 1280 : 720;\n let best = null, bestScore = -1;\n for (const p of panels) {\n if (!p.img) continue;\n const s = scoreContrast(p.img);\n if (s > bestScore) { bestScore = s; best = p.img; }\n }\n if (!best) best = panels[0] && panels[0].img;\n\n const c = document.createElement(\"canvas\"); c.width = W; c.height = H;\n const x = c.getContext(\"2d\");\n x.fillStyle = \"#000\"; x.fillRect(0, 0, W, H);\n if (best) {\n const s = Math.max(W / (best.naturalWidth || W), H / (best.naturalHeight || H));\n x.drawImage(best, (W - best.naturalWidth * s) / 2, (H - best.naturalHeight * s) / 2, best.naturalWidth * s, best.naturalHeight * s);\n }\n const title = ($(\"metaTitle\").value || $(\"mc\").value || \"RECAP\").split(\" — \")[0].slice(0, 22).toUpperCase();\n const g = x.createLinearGradient(0, H * 0.58, 0, H);\n g.addColorStop(0, \"rgba(0,0,0,0)\");\n g.addColorStop(1, \"rgba(0,0,0,.85)\");\n x.fillStyle = g; x.fillRect(0, H * 0.58, W, H * 0.42);\n x.textAlign = \"center\"; x.textBaseline = \"middle\";\n x.shadowColor = \"rgba(0,0,0,.9)\"; x.shadowBlur = Math.floor(W / 40); x.shadowOffsetY = Math.floor(W / 90);\n x.font = `900 ${Math.floor(W / 8)}px Arial Black, system-ui, sans-serif`;\n x.fillStyle = \"#fff\"; x.fillText(title, W / 2, H * 0.70);\n x.shadowBlur = 0; x.shadowOffsetY = 0;\n x.fillStyle = \"#e11\"; x.fillRect(W * 0.30, H * 0.82, W * 0.40, Math.max(4, Math.floor(H / 70)));\n x.font = `800 ${Math.floor(W / 16)}px Arial Black, system-ui, sans-serif`;\n x.fillStyle = \"#ffe14d\"; x.fillText(\"FULL RECAP\", W / 2, H * 0.90);\n\n const a = document.createElement(\"a\");\n a.download = \"thumbnail.png\";\n a.href = c.toDataURL(\"image/png\");\n a.click();\n setStatus(\"High-CTR thumbnail downloaded (best-contrast panel + hook text).\", \"\");\n}\n\nfunction scoreContrast(img) {\n const c = document.createElement(\"canvas\"); c.width = 64; c.height = 64;\n const x = c.getContext(\"2d\");\n try { x.drawImage(img, 0, 0, 64, 64); } catch (e) { return 0; }\n let data;\n try { data = x.getImageData(0, 0, 64, 64).data; } catch (e) { return 0; }\n let sum = 0, sum2 = 0, n = 0;\n for (let i = 0; i < data.length; i += 4) {\n const l = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];\n sum += l; sum2 += l * l; n++;\n }\n const mean = sum / n;\n return Math.sqrt(sum2 / n - mean * mean);\n}\n\nfunction esc(s) { return (s||\"\").replace(/[&<>\"']/g, c => ({\"&\":\"&\",\"<\":\"<\",\">\":\">\",'\"':\""\",\"'\":\"'\"}[c])); }\nfunction sleep(ms) { return new Promise(r => setTimeout(r, ms)); }\n// =====================================================================\n// THUMBNAIL MICRO ANALYSIS — improve the outcome of the thumbnail\n// The thumbnail is the ONE image that decides the click. This report\n// breaks the thumbnail down at a micro level (like the Image Bible) so\n// you can send the highest-signal thumbnail prompt to your image model\n// and keep tracking what works.\n// =====================================================================\nfunction downloadThumbnailMicroAnalysis() {\n if (!panels.length) { setStatus(\"Write a story first, then get the Thumbnail Micro Analysis.\", \"warn\"); return; }\n\n const mc = $(\"mc\").value || \"Sung Jin-Woo\";\n const power = $(\"power\").value || \"rises from the weakest Hunter to a Monarch\";\n const goal = $(\"goal\").value || \"to save humanity from the Monarchs\";\n const world = $(\"world\").value || \"gates linking Earth to dungeons\";\n\n // Hook title = the most clickable beat, capped to the first (short) part.\n const rawTitle = ($(\"metaTitle\").value || mc + \" — \" + goal);\n const hook = rawTitle.split(\" — \")[0].slice(0, 22).toUpperCase();\n\n // Which panel is (or would be) the thumbnail base? Pick the highest-contrast panel.\n let bestIdx = -1, bestScore = -1;\n panels.forEach((p, i) => { if (p.img) { const s = scoreContrast(p.img); if (s > bestScore) { bestScore = s; bestIdx = i; } } });\n if (bestIdx < 0) bestIdx = 0;\n const base = panels[bestIdx];\n const baseStory = (narration[bestIdx] && narration[bestIdx].text) || base.scene || \"\";\n\n const charLockText = ($(\"charLock\").value.trim() ||\n (function(){ try { return characterBlock(); } catch(e){ return \"The protagonist\"; } })());\n const artText = ($(\"artLock\").value.trim() || ($(\"style\").value.trim() || DEFAULT_STYLE));\n const envText = $(\"envLock\").value.trim();\n\n const subject = `MC face (${mc}) dead-center, ~40% of the frame (reads at tiny mobile size).`;\n const expression = \"One undeniable expression at the story's turning point — fierce, wide-eyed, before power reveals itself.\";\n const composition = \"Medium close-up (chest-up), subject sharp, background blurred for depth; base panel from Panel \" + (bestIdx + 1) + \": \\\"\" + baseStory.slice(0, 110) + \"\\\".\";\n const lighting = \"Rim light behind MC separating subject from background; subject cold-blue (system energy) vs warm-orange backdrop for max contrast.\";\n const palette = \"Two clashing dominant colors (electric blue vs gold-orange), high saturation, no mid-grey mud.\";\n const negativeSpace = \"Top-left and bottom-right kept dark/empty so the \\\"\" + hook + \"\\\" title text and face both pop uncluttered.\";\n\n const fullThumbPrompt = [\n \"YouTube thumbnail for a manhwa recap,\", artText + \". Model:\", ($(\"model\").value || \"Dreamshaper\") + \".\",\n subject, expression, composition, lighting, palette, negativeSpace,\n \"Character lock:\", charLockText + \".\", CONSISTENCY,\n \"Hook title text \\\"\" + hook + \"\\\" rendered huge and bold in the dark negative space; no extra text, no clutter.\",\n ].join(\" \");\n\n // Self-assessment of the thumbnail the app currently auto-generates.\n const contrastNote = bestScore > 0\n ? \"Auto-thumbnail picked Panel \" + (bestIdx + 1) + \" (highest contrast ≈ \" + bestScore.toFixed(0) + \").\"\n : \"No generated panel images yet — best-contrast pick will work after you Generate Images.\";\n\n const lines = [];\n lines.push(\"MANHWA RECAP ROBOT — THUMBNAIL MICRO ANALYSIS\");\n lines.push(\"Generated: \" + new Date().toISOString());\n lines.push(\"===========================================================================\");\n lines.push(\"\");\n lines.push(\"PREMISE\");\n lines.push(\" MC: \" + mc);\n lines.push(\" Power: \" + power);\n lines.push(\" Goal: \" + goal);\n lines.push(\" World: \" + world);\n lines.push(\" Panels: \" + panels.length + \" · Art Model: \" + ($(\"model\").value || \"Auto\"));\n lines.push(\"\");\n lines.push(\"THUMBNAIL (the one frame that decides the click)\");\n lines.push(\"\");\n lines.push(\" STATUS: \" + contrastNote);\n lines.push(\" HOOK TITLE: \" + hook);\n lines.push(\" SUBJECT: \" + subject);\n lines.push(\" EXPRESSION: \" + expression);\n lines.push(\" COMPOSITION: \" + composition);\n lines.push(\" LIGHTING: \" + lighting);\n lines.push(\" PALETTE: \" + palette);\n lines.push(\" NEGATIVE SPACE:\" + negativeSpace);\n lines.push(\" CHARACTER LOCK:\" + charLockText);\n lines.push(\" ENVIRONMENT: \" + (envText || \"(scene default)\"));\n lines.push(\"\");\n lines.push(\"FULL THUMBNAIL PROMPT (send this to your image model):\");\n lines.push(\" \" + fullThumbPrompt);\n lines.push(\"\");\n lines.push(\"HOW TO IMPROVE NEXT RUN:\");\n lines.push(\" - Keep the face dead-center and less than half the frame = strongest CTR.\");\n lines.push(\" - One 1-3 word hook beats a full sentence: \\\"\" + hook.slice(0, 12) + \"…\\\" works.\");\n lines.push(\" - Clash 2 colors (blue vs orange) for tiny-size readability.\");\n lines.push(\" - Never crop the face; leave dark corners for the title.\");\n\n downloadText(\"manhwa-thumbnail-micro-analysis.txt\", lines.join(\"\\n\"));\n setStatus(\"Thumbnail micro analysis saved — high-signal thumbnail prompt ready.\", \"warn\");\n}\n","\"use strict\";\n\nconst $ = (id) => document.getElementById(id);\n\n// ---- guarded status updater (fixes setStatus null error) ----\nfunction setStatus(msg, kind) {\n const el = $(\"status\");\n if (!el) return;\n el.textContent = msg || \"\";\n el.className = kind || \"\";\n}\n\n// ---- state ----\nlet panels = []; // [{ prompt, scene, img:Image|null }]\nlet narration = []; // [{ text }]\nlet storyText = \"\";\nlet ready = false;\n\n// load saved settings\n(function () {\n const pick = (k, def) => { try { const v = localStorage.getItem(k); return v ? v : def; } catch (e) { return def; } };\n $(\"proxyUrl\").value = pick(\"rr.proxy\", \"https://tts-proxy.val.run/\");\n $(\"murfKey\").value = pick(\"rr.murf\", \"\");\n $(\"llmKey\").value = pick(\"rr.llmKey\", \"\");\n $(\"llmBase\").value = pick(\"rr.llmBase\", \"https://api.openai.com/v1\");\n $(\"llmModel\").value = pick(\"rr.llmModel\", \"gpt-4o-mini\");\n $(\"styleLock\").value = pick(\"rr.styleLock\", \"\");\n $(\"model\").value = pick(\"rr.model\", \"Dreamshaper\");\n $(\"charLock\").value = pick(\"rr.charLock\", \"\");\n $(\"artLock\").value = pick(\"rr.artLock\", \"\");\n $(\"envLock\").value = pick(\"rr.envLock\", \"\");\n $(\"scriptStyle\").value = pick(\"rr.scriptStyle\", \"punchy\");\n})();\n\nfunction saveKeys() {\n const put = (k, v) => { try { localStorage.setItem(k, v); } catch (e) {} };\n put(\"rr.proxy\", $(\"proxyUrl\").value.trim());\n put(\"rr.murf\", $(\"murfKey\").value.trim());\n put(\"rr.llmKey\", $(\"llmKey\").value.trim());\n put(\"rr.llmBase\", $(\"llmBase\").value.trim());\n put(\"rr.llmModel\", $(\"llmModel\").value.trim());\n put(\"rr.styleLock\", $(\"styleLock\").value.trim());\n put(\"rr.model\", $(\"model\").value.trim());\n put(\"rr.charLock\", $(\"charLock\").value.trim());\n put(\"rr.artLock\", $(\"artLock\").value.trim());\n put(\"rr.envLock\", $(\"envLock\").value.trim());\n put(\"rr.scriptStyle\", $(\"scriptStyle\").value);\n setStatus(\"Settings saved.\", \"warn\");\n}\n\nfunction proxy() { return $(\"proxyUrl\").value.trim() || \"https://tts-proxy.val.run/\"; }\nfunction panelCount() { return Math.max(3, Math.min(12, parseInt($(\"panels\").value) || 5)); }\nfunction secPerPanel() { return Math.max(1, parseInt($(\"secPerPanel\").value) || 6); }\n\nfunction updateEst() {\n const total = panelCount() * secPerPanel();\n $(\"est\").textContent = \"Panels \" + panelCount() + \" · Sec/panel \" + secPerPanel() + \" · Est total \" + fmt(total);\n}\nfunction fmt(s) { const m = Math.floor(s/60), r = s%60; return `${m}m ${r.toString().padStart(2,\"0\")}s`; }\nupdateEst();\n[\"panels\", \"secPerPanel\"].forEach(id => $(id).addEventListener(\"change\", updateEst));\n\nfunction but(btn, busy) { if (btn) btn.disabled = !!busy; }\n\n// =====================================================================\n// STRICT SCRIPTING ENGINE\n// Rules: present-tense active voice · 8-12 words per line ·\n// one action per sentence · no filler/meta-commentary\n// =====================================================================\nconst MIN_WORDS = 8;\nconst MAX_WORDS = 12;\n\nconst PAST_VERBS = /\\b(was|were|had|did|went|became|awakened|realized|realised|felt|said|told|saw|came|made|took|got|grew|began|started|fought|knew|left|walked|ran|stopped|looked|returned|chose|found|held|kept|thought|won|gave|lost|swung|wrote|read|heard|spoke|showed)\\b/i;\nconst PASSIVE_BY = /\\b(is|are|was|were|been|being)\\b[^.]*\\bby\\b/i;\nconst FILLER = /\\b(here is|let me|now let|in this story|this is a story|i will|we will|imagine|remember that|basically|so basically|you see)\\b/i;\nconst EXTRA_ACTION = /\\b(and then|, and then|then |while he also|while she|, but |however)\\b/i;\n\nfunction validateLine(line) {\n const issues = [];\n const words = (line || \"\").trim().split(/\\s+/).filter(Boolean);\n const n = words.length;\n if (n < MIN_WORDS) issues.push(`only ${n} words (need ${MIN_WORDS}-${MAX_WORDS})`);\n else if (n > MAX_WORDS) issues.push(`${n} words (need ${MIN_WORDS}-${MAX_WORDS})`);\n if (PAST_VERBS.test(line)) issues.push(\"past tense — use present tense active voice\");\n if (PASSIVE_BY.test(line)) issues.push(\"passive voice (…by…)\");\n if (EXTRA_ACTION.test(line)) issues.push(\"more than one action — split it\");\n if (FILLER.test(line)) issues.push(\"filler / meta-commentary\");\n return { ok: issues.length === 0, words: n, issues };\n}\nfunction validateAll(lines) { return lines.map(validateLine); }\n\nfunction renderValidation(lines) {\n const el = $(\"validatorNote\");\n if (!el) return;\n const res = validateAll(lines);\n const bad = res.filter(r => !r.ok).length;\n el.textContent = bad\n ? `Strict engine: ${bad}/${lines.length} line(s) violate rules (red). Fix the story config or press Write again.`\n : `Strict engine: all ${lines.length} lines pass (8-12 words · present active voice · one action).`;\n el.style.color = bad ? \"#f26d6d\" : \"#7fd38a\";\n}\n\n// =====================================================================\n// BLUEPRINT: CHARACTER CONSISTENCY\n// The #1 secret in the blueprint — the same character in every panel.\n// =====================================================================\nfunction characterBlock() {\n const cl = $(\"charLock\") ? $(\"charLock\").value.trim() : \"\";\n if (cl) return cl;\n const lock = $(\"styleLock\") ? $(\"styleLock\").value.trim() : \"\";\n if (lock) return lock;\n const mc = $(\"mc\").value || \"a young hunter\";\n return `The same protagonist: ${mc}, a fixed character with the same face, hairstyle, skin tone, build and outfit in every panel.`;\n}\nconst CONSISTENCY = \"Maintain the same character design, consistent face, consistent hairstyle, consistent skin tone, same facial structure and same body proportions.\";\n\n// Blueprint camera angles (Chapter 6 / Bonus section).\nconst CAMERAS = [\"wide shot\", \"close-up\", \"medium shot\", \"low angle\", \"over-the-shoulder\",\n \"reaction shot\", \"high angle\", \"side profile\", \"POV\", \"overhead shot\", \"drone shot\", \"cinematic medium shot\"];\n\n// ONE art style for the WHOLE story (the blueprint's #1 rule: never mix\n// styles panel to panel). Change it via the 🎨 Art Style Lock, or the Style\n// box, or the Art Model dropdown.\nconst DEFAULT_STYLE = \"semi-realistic premium 3D animated style inspired by Disney and DreamWorks, expressive eyes, detailed skin textures, cinematic lighting, ray-traced global illumination, Unreal Engine 5 quality, vibrant colours, ultra-sharp details, Netflix animated film quality\";\n\n// =====================================================================\n// ART MODEL -> STYLE MAP\n// Each Art Model dropdown choice must drive the STYLE text in the image\n// prompt too. Without this the dropdown was sent to AI Horde but the\n// prompt always said \"semi-realistic 3D\", so the selected model never\n// truly took effect in the generated look.\n// =====================================================================\nconst ART_MODEL_STYLES = {\n \"Dreamshaper\": \"cinematic Dreamshaper style, semi-realistic premium 3D animated style inspired by Disney and DreamWorks, expressive eyes, detailed skin textures, cinematic lighting, ray-traced global illumination, ultra-sharp details\",\n \"Anything v5\": \"clean anime style, Anything v5, crisp cel-shaded anime art, expressive eyes, vibrant colors, clean linework, detailed\",\n \"Deliberate\": \"semi-realistic painterly style, Deliberate model, refined detailed rendering, cinematic lighting, lifelike textures\",\n \"Realistic Vision\": \"photorealistic style, Realistic Vision model, realistic skin texture, cinematic photography, depth of field, detailed\",\n \"MeinaMix\": \"clean anime style, MeinaMix model, soft cel-anime rendering, bright colors, clean composition, detailed\",\n \"Comic-Diffusion\": \"webtoon / comic ink-line style, Comic-Diffusion model, bold outlines, black-and-white halftone shading, dramatic comic panel framing, high contrast\",\n};\n\n// Full art-style text used inside every image prompt.\nfunction artStyleFor() {\n const al = $(\"artLock\") ? $(\"artLock\").value.trim() : \"\";\n if (al) return al;\n const st = $(\"style\") ? $(\"style\").value.trim() : \"\";\n if (st) return st;\n const m = $(\"model\") ? $(\"model\").value.trim() : \"\";\n return ART_MODEL_STYLES[m] || DEFAULT_STYLE;\n}\n// Short label (the model name) used in the Image Bible / reports.\nfunction artModelLabel() { return ($(\"model\") && $(\"model\").value.trim()) || \"Auto\"; }\n\n// =====================================================================\n// BLUEPRINT: STORY ARC AS SCENES\n// Each beat is a real scene: narration (strict) + who/what/where +\n// environment + mood + camera. Panels follow a rising arc: hook → stakes →\n// cliffhanger. The image prompt is built FROM the scene, so it never\n// contradicts the narration.\n// =====================================================================\nfunction buildBeats() {\n const mc = $(\"mc\").value || \"Sung Jin-Woo\";\n const world = $(\"world\").value || \"gates linking Earth to dungeons\";\n const power = $(\"power\").value || \"rises from the weakest Hunter to a Monarch\";\n const goal = $(\"goal\").value || \"to save humanity from the Monarchs\";\n return [\n { n: `${mc} stands as the weakest hunter, mocked by the guild elite.`,\n s: `The protagonist stands alone in a crowded hunter guild hall while elite hunters sneer and point at him.`,\n e: \"modern hunter guild hall, glass walls, holographic rank displays, cold blue lighting\",\n m: \"somber\", c: \"wide shot\" },\n { n: `${mc} steps into ${world}, alone and unarmed.`,\n s: `The protagonist walks alone toward a towering glowing gate that tears open in the city street.`,\n e: \"city street at dusk, a massive glowing portal, swirling energy, scattered onlookers\",\n m: \"mysterious\", c: \"low angle\" },\n { n: `A hidden system awakens inside ${mc}, granting him new power.`,\n s: `A glowing blue interface flickers before the protagonist as a surge of energy wraps around him.`,\n e: \"dark dungeon chamber, floating holographic system windows, drifting embers\",\n m: \"awe-inspiring\", c: \"close-up\" },\n { n: `${mc} grinds in secret, training until his body breaks.`,\n s: `The protagonist trains alone in a dark chamber, sweat dripping as he strikes a stone pillar.`,\n e: \"bare stone training chamber, dust in the air, single shaft of light\",\n m: \"desperate\", c: \"medium shot\" },\n { n: `A monster lunges, and ${mc} strikes back for the first time.`,\n s: `The protagonist faces a towering beast in a dungeon, raising his blade as it charges.`,\n e: \"underground dungeon, jagged rocks, glowing monster eyes in the dark\",\n m: \"tense\", c: \"over-the-shoulder\" },\n { n: `${mc} unleashes his aura, and the dungeon trembles.`,\n s: `A blinding aura erupts around the protagonist as the ground cracks beneath his feet.`,\n e: \"shattered dungeon floor, rising dust, arcs of purple energy\",\n m: \"triumphant\", c: \"low angle\" },\n { n: `A shadow army rises behind ${mc}, answering his call.`,\n s: `The protagonist stands before a rising tide of shadow soldiers that kneel to him.`,\n e: \"open battlefield at night, ranks of dark silhouettes, pale moonlight\",\n m: \"epic\", c: \"drone shot\" },\n { n: `${mc} confronts a Monarch who towers above the ruined city.`,\n s: `The protagonist faces a colossal armored Monarch looming over a burning city skyline.`,\n e: \"burning city, smoke columns, debris, a colossal dark figure\",\n m: \"menacing\", c: \"high angle\" },\n { n: `The guilds turn on ${mc}, calling him a threat.`,\n s: `The protagonist stands surrounded by armed hunters who level weapons at him.`,\n e: \"government plaza, armored vehicles, flashing lights, tense crowd\",\n m: \"foreboding\", c: \"reaction shot\" },\n { n: `${mc} shields the city as the sky splits open.`,\n s: `The protagonist raises a barrier over a terrified crowd as a rift tears the sky.`,\n e: \"city street, panicking crowd, a colossal rift in the clouds\",\n m: \"desperate\", c: \"overhead shot\" },\n { n: `${power}, ${mc} charges into the final battle.`,\n s: `The protagonist charges forward, power blazing, toward the Monarch's army.`,\n e: \"ash-covered battlefield, banners torn, storm clouds, distant army\",\n m: \"violent\", c: \"POV\" },\n { n: `${mc} stands alone, ready to ${goal}.`,\n s: `The protagonist stands on a cliff edge above the battlefield, eyes glowing, facing the horizon.`,\n e: \"cliff above a war-torn plain, dramatic storm light, wind-blown coat\",\n m: \"awe-inspiring\", c: \"silhouette against blinding light\" },\n ];\n}\n\n// ---- offline template ----\n// Builds exactly `count` distinct scenes (a real rising arc), each validated\n// against the strict rules. Never repeats narration.\nfunction defaultScenes() {\n const beats = buildBeats();\n const count = panelCount();\n const scenes = [];\n for (let i = 0; i < count; i++) {\n const b = beats[i % beats.length];\n scenes.push({ text: b.n, scene: b.s, env: b.e, mood: b.m, camera: b.c });\n }\n // Validate narration; rebuild any over-long line in a tighter shape.\n return scenes.map((sc, i) => {\n const res = validateLine(sc.text);\n if (res.ok) return sc;\n const b = beats[i % beats.length];\n const tight = `${$(\"mc\").value || \"Sung Jin-Woo\"} ${[\"fights\",\"leaps\",\"surges\",\"stands\",\"charges\",\"rises\"][i % 6]} into the battle.`;\n return { ...sc, text: validateLine(tight).ok ? tight : sc.text };\n });\n}\n\n// ---- LLM call: returns structured scenes ----\n// Asks the LLM for per-panel NARRATION + SCENE so the image prompt is built\n// from the story, not random slots.\nasync function callLLM(feedback) {\n const key = $(\"llmKey\").value.trim();\n const base = $(\"llmBase\").value.trim() || \"https://api.openai.com/v1\";\n const model = $(\"llmModel\").value.trim() || \"gpt-4o-mini\";\n const mc = $(\"mc\").value, power = $(\"power\").value, goal = $(\"goal\").value, world = $(\"world\").value;\n const count = panelCount();\n const sys = \"You are an award-winning manhwa screenwriter. Plan a RISING STORY ARC of exactly \" + count +\n \" panels: opening hook, escalating stakes, cliffhanger ending. For EACH panel output a strict block:\\n\" +\n \"PANEL \\nNARRATION: \\n\" +\n \"SCENE: <2-3 sentences describing WHO is in the shot, WHAT they are doing, and WHERE — a vivid visual scene>\\n\\n\" +\n \"Rules: never use past tense (no was/were/had/awakened). Every NARRATION is 8-12 words. Every SCENE is visual and story-based. No preamble, no closing note.\" +\n (feedback ? \"\\n\\nYour previous attempt was REJECTED. Fix these and re-output all \" + count + \" blocks:\\n\" + feedback : \"\");\n const user = `MC: ${mc}\\nPower: ${power}\\nGoal: ${goal}\\nWorld: ${world}\\n\\nWrite ${count} panels as a rising manhwa recap story.`;\n const url = base.replace(/\\/+$/, \"\") + \"/chat/completions\";\n const res = await fetch(url, {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\", \"authorization\": \"Bearer \" + key },\n body: JSON.stringify({ model, messages: [{ role: \"system\", content: sys }, { role: \"user\", content: user }], temperature: 0.9, max_tokens: 1200 }),\n });\n if (!res.ok) {\n const txt = await res.text().catch(() => \"\");\n throw new Error(\"LLM HTTP \" + res.status + (txt ? \" — \" + txt.slice(0, 200) : \"\"));\n }\n const data = await res.json();\n const content = (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) || \"\";\n return parseScenes(content, count);\n}\n\n// Parse the LLM's PANEL/NARRATION/SCENE blocks into scene objects.\nfunction parseScenes(content, count) {\n const out = [];\n const blocks = content.split(/\\n\\s*\\n/);\n for (const block of blocks) {\n const n = block.match(/NARRATION:\\s*(.+)/i);\n const s = block.match(/SCENE:\\s*([\\s\\S]+)/i);\n if (n && n[1]) {\n out.push({\n text: n[1].trim(),\n scene: (s && s[1] ? s[1].trim() : \"\"),\n env: \"\", mood: \"\", camera: \"\",\n });\n }\n }\n // Fallback: if the model ignored the format, treat non-empty lines as narration.\n if (!out.length) {\n const lines = content.split(/\\n+/).map(x => x.replace(/^\\s*\\d+[\\.\\)]?\\s*/, \"\").trim()).filter(Boolean);\n for (const l of lines) out.push({ text: l, scene: \"\", env: \"\", mood: \"\", camera: \"\" });\n }\n // Pad/trim to exactly `count`.\n while (out.length < count) out.push({ text: out[0] ? out[0].text : \"The battle begins.\", scene: \"\", env: \"\", mood: \"\", camera: \"\" });\n return out.slice(0, count);\n}\n\n// ---- write story with validation + smart retry ----\nasync function writeStory(btn) {\n but(btn, true);\n setStatus(\"Writing story…\", \"warn\");\n try {\n const count = panelCount();\n let scenes;\n if ($(\"llmKey\").value.trim()) {\n setStatus(\"Calling LLM to write story…\", \"warn\");\n scenes = await callLLM();\n const MAX_RETRIES = 2;\n for (let attempt = 0; attempt < MAX_RETRIES; attempt++) {\n const lines = scenes.map(s => s.text);\n const res = validateAll(lines);\n const bad = res.filter(r => !r.ok);\n if (bad.length <= Math.max(1, Math.floor(count * 0.3))) break;\n const feedback = res.map((r, i) => `Panel ${i + 1} (${r.words}w): ${r.issues.join(\"; \") || \"ok\"}`).join(\"\\n\");\n setStatus(\"Strict retry \" + (attempt + 1) + \"/\" + MAX_RETRIES + \" — \" + bad.length + \" line(s) violated rules…\", \"warn\");\n scenes = await callLLM(feedback);\n }\n } else {\n scenes = defaultScenes();\n }\n scenes = enrichScenes(scenes); // ensure every panel has cinematic env/mood/camera\n storyText = scenes.map(s => s.text).join(\"\\n\\n\");\n // build panels + narration from the story scenes\n panels = [];\n narration = [];\n for (let i = 0; i < count; i++) {\n const sc = scenes[i] || scenes[scenes.length - 1];\n const prompt = promptFor(i, sc);\n panels.push({ prompt, scene: sc.scene, env: sc.env, camera: sc.camera, mood: sc.mood, img: null });\n narration.push({ text: sc.text });\n }\n ready = false;\n $(\"readyBtn\").textContent = \"✅ Ready\";\n $(\"readyBtn\").disabled = false;\n renderStoryboard();\n renderValidation(panels.map(p => narration[panels.indexOf(p)].text));\n renderPreview(true);\n fillMeta();\n setStatus(\"Story written: \" + count + \" panels (\" + ($(\"llmKey\").value.trim() ? \"AI\" : \"template\") + \"). Generate images next.\", \"\");\n } catch (e) {\n setStatus(\"Story error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { but(btn, false); }\n}\n\n// ---- BLUEPRINT: enrich AI-written scenes with micro-detail ----\n// The LLM returns NARRATION+SCENE but not env/mood/camera, so AI-story panel\n// prompts used to come out generic. This backfills each scene's environment,\n// mood and camera from the rising-arc beat templates — so every panel keeps\n// the same cinematic micro-level detail as the offline template.\nfunction enrichScenes(scenes) {\n const beats = buildBeats();\n return scenes.map((sc, i) => {\n const b = beats[i % beats.length];\n return {\n ...sc,\n env: (sc.env || \"\").trim() || b.e,\n mood: (sc.mood || \"\").trim() || b.m,\n camera: (sc.camera || \"\").trim() || b.c,\n };\n });\n}\n\n// ---- BLUEPRINT: build the image prompt from the SCENE ----\n// character consistency + scene (who/what/where) + environment + camera +\n// mood + chosen style + the blueprint's consistency instruction. This is what\n// makes the panel match the story instead of contradicting it.\nfunction promptFor(i, sc) {\n const art = artStyleFor();\n const char = characterBlock().trim().replace(/\\.+$/, \"\"); // strip trailing period\n const envLock = $(\"envLock\") ? $(\"envLock\").value.trim() : \"\";\n const camera = sc.camera || CAMERAS[i % CAMERAS.length];\n const mood = sc.mood || \"cinematic\";\n const scene = sc.scene || sc.text;\n const env = [envLock, sc.env].filter(Boolean).join(\", \");\n return `${char}. ${scene}${env ? \", \" + env : \"\"}. ${mood} mood, ${camera}, ${art}. ${CONSISTENCY}`;\n}\n\nfunction renderStoryboard() {\n const el = $(\"storyboard\");\n if (!panels.length) { el.textContent = \"Write a new story first.\"; el.style.color = \"#9aa0ab\"; return; }\n el.style.color = \"#e8e8e8\";\n const full = $(\"scriptStyle\") && $(\"scriptStyle\").value === \"full\";\n el.innerHTML = panels.map((p, i) => {\n const t = narration[i] ? narration[i].text : \"\";\n const res = validateLine(t);\n const wc = `${res.words}w${res.ok ? \" ✓\" : \" ⚠️ \" + res.issues.join(\"; \")}`;\n const scene = full && p.scene ? `

🎬 ${esc(p.scene)}

${p.img ? `

` : `

Panel ${i + 1}

`).join(\"\");\n}\n\n// ---------- VOICE / TTS ----------\nasync function proxyTTS(text, lang) {\n const base = proxy();\n if (!base) throw new Error(\"No TTS proxy URL set\");\n const sep = base.includes(\"?\") ? \"&\" : \"?\";\n const url = base + sep + \"text=\" + encodeURIComponent(text) + \"&lang=\" + encodeURIComponent(lang || \"en\");\n const res = await fetch(url);\n if (!res.ok) throw new Error(\"Proxy TTS HTTP \" + res.status);\n const blob = await res.blob();\n return URL.createObjectURL(blob);\n}\n\nasync function previewVoice(btn) {\n but(btn, true);\n setStatus(\"Generating voice preview…\", \"warn\");\n try {\n if (!narration.length) await writeStory(null);\n const txt = narration[0] && narration[0].text ? narration[0].text : (storyText || \"Hello\");\n const url = await proxyTTS(txt, \"en\");\n const au = document.createElement(\"audio\");\n au.src = url; au.controls = true; au.style.width = \"100%\";\n au.onended = () => au.remove();\n $(\"previewPanels\").insertAdjacentElement(\"afterend\", au);\n au.play().catch(() => {});\n setStatus(\"Voice preview ready (Proxy TTS).\", \"\");\n } catch (e) {\n setStatus(\"Proxy TTS failed (\" + (e.message||e) + \"). Using browser voice.\", \"warn\");\n try { speechSynthesis.cancel(); speechSynthesis.speak(new SpeechSynthesisUtterance(narration[0].text)); } catch (_) {}\n } finally { but(btn, false); }\n}\n\n// ---------- READY / metadata ----------\nfunction markReady() {\n ready = true;\n $(\"readyBtn\").textContent = \"✅ Ready\";\n $(\"readyBtn\").disabled = true;\n setStatus(\"Ready to compile.\", \"\");\n}\n\nfunction fillMeta() {\n if (!panels.length) return;\n const title = $(\"mc\").value + \" — \" + $(\"goal\").value;\n $(\"metaTitle\").value = title.slice(0, 100);\n $(\"metaTags\").value = \"manhwa, \" + $(\"mc\").value.toLowerCase().split(\" \")[0] + \", recap, korean webtoon, ai\";\n $(\"metaHashtags\").value = \"#manhwa #recap #anime #webtoon\";\n const lines = storyText ? storyText.split(\"\\n\") : [];\n $(\"metaDesc\").value = title + \"\\n\\n\" + (lines.slice(0, 3).join(\"\\n\")) + \"\\n\\nSubscribe for more recaps!\";\n}\n\nfunction copyMeta(which) {\n const map = { title: \"metaTitle\", desc: \"metaDesc\", tags: \"metaTags\", hashtags: \"metaHashtags\" };\n const val = $(map[which]).value;\n navigator.clipboard.writeText(val).then(() => setStatus(\"Copied: \" + which, \"warn\")).catch(() => setStatus(\"Copy failed\", \"err\"));\n}\n\n// ---- SAFE LOCK: save how all images look to a text file ----\nfunction saveLockFile() {\n const mc = $(\"mc\").value, power = $(\"power\").value, goal = $(\"goal\").value, world = $(\"world\").value;\n const txt = [\n \"MANHWA RECAP ROBOT — IMAGE LOCK (how every panel looks)\",\n \"========================================================\",\n \"\",\n \"PREMISE (always used in the story):\",\n \" MC: \" + mc,\n \" Power: \" + power,\n \" Goal: \" + goal,\n \" World: \" + world,\n \"\",\n \"1) CHARACTER LOCK:\",\n \" \" + ($(\"charLock\").value.trim() || characterBlock()),\n \"\",\n \"2) ART STYLE LOCK:\",\n \" \" + ($(\"artLock\").value.trim() || \"Auto (see the Art Model dropdown)\"),\n \"\",\n \"3) ENVIRONMENT LOCK:\",\n \" \" + ($(\"envLock\").value.trim() || \"(none — each scene sets its own)\"),\n \"\",\n \"CONSISTENCY RULE applied to every image:\",\n \" \" + CONSISTENCY,\n ].join(\"\\n\");\n downloadText(\"manhwa-image-lock.txt\", txt);\n setStatus(\"Image lock saved to file — that's exactly how all images will look.\", \"warn\");\n}\n\n// ---- send the issue back so it can be fixed ----\nfunction downloadIssueReport() {\n const lines = [];\n lines.push(\"MANHWA RECAP ROBOT — ISSUE REPORT\");\n lines.push(\"Generated: \" + new Date().toISOString());\n lines.push(\"=========================================================\");\n lines.push(\"\");\n lines.push(\"PREMISE\");\n lines.push(\" MC: \" + $(\"mc\").value);\n lines.push(\" Power: \" + $(\"power\").value);\n lines.push(\" Goal: \" + $(\"goal\").value);\n lines.push(\" World: \" + $(\"world\").value);\n lines.push(\" Panels: \" + panelCount() + \" · Sec/panel: \" + secPerPanel());\n lines.push(\" Art Model: \" + $(\"model\").value);\n lines.push(\" Script Style: \" + $(\"scriptStyle\").value);\n lines.push(\"\");\n lines.push(\"CHARACTER LOCK: \" + ($(\"charLock\").value.trim() || \"(none)\"));\n lines.push(\"ART STYLE LOCK: \" + ($(\"artLock\").value.trim() || \"(none)\"));\n lines.push(\"ENVIRONMENT LOCK: \" + ($(\"envLock\").value.trim() || \"(none)\"));\n lines.push(\"\");\n lines.push(\"STORY (narration per panel):\");\n narration.forEach((n, i) => lines.push(\" Panel \" + (i + 1) + \": \" + n.text));\n lines.push(\"\");\n lines.push(\"PANEL IMAGE PROMPTS:\");\n panels.forEach((p, i) => lines.push(\" Panel \" + (i + 1) + \": \" + p.prompt));\n lines.push(\"\");\n lines.push(\"LAST STATUS: \" + ($(\"status\").textContent || \"(none)\"));\n downloadText(\"manhwa-issue-report.txt\", lines.join(\"\\n\"));\n setStatus(\"Issue report saved — send this file back so I can fix it.\", \"warn\");\n}\n\n// ---- IMAGE BIBLE: every image explained at a micro level ----\n// A per-panel breakdown (narration, scene who/what/where, character,\n// environment, camera, mood, art style, full prompt) so every panel's image\n// is described consistently and the whole story stays coherent.\nfunction downloadImageBible() {\n if (!panels.length) { setStatus(\"Write a story first, then download the Image Bible.\", \"warn\"); return; }\n const lines = [];\n lines.push(\"MANHWA RECAP ROBOT — IMAGE BIBLE (every image at a micro level)\");\n lines.push(\"==================================================================\");\n lines.push(\"\");\n lines.push(\"PREMISE\");\n lines.push(\" MC: \" + $(\"mc\").value);\n lines.push(\" Power: \" + $(\"power\").value);\n lines.push(\" Goal: \" + $(\"goal\").value);\n lines.push(\" World: \" + $(\"world\").value);\n lines.push(\" Panels: \" + panelCount() + \" · Art Model: \" + $(\"model\").value);\n lines.push(\"\");\n lines.push(\"GLOBAL (applied to every panel):\");\n lines.push(\" CHARACTER: \" + ($(\"charLock\").value.trim() || characterBlock()));\n lines.push(\" ART STYLE: \" + ($(\"artLock\").value.trim() || artModelLabel()));\n lines.push(\" ENVIRONMENT:\" + ($(\"envLock\").value.trim() ? \" \" + $(\"envLock\").value.trim() : \" (none)\"));\n lines.push(\"\");\n lines.push(\"PER-PANEL MICRO BREAKDOWN\");\n lines.push(\"-------------------------\");\n panels.forEach((p, i) => {\n const t = narration[i] ? narration[i].text : \"\";\n lines.push(\"\");\n lines.push(\"PANEL \" + (i + 1));\n lines.push(\" NARRATION: \" + t);\n lines.push(\" SCENE (who/what/where): \" + (p.scene || t));\n lines.push(\" CHARACTER: \" + ($(\"charLock\").value.trim() || characterBlock()));\n lines.push(\" ENVIRONMENT: \" + ([$(\"envLock\").value.trim(), p.env].filter(Boolean).join(\", \") || \"(scene default)\"));\n lines.push(\" CAMERA: \" + (p.camera || \"cinematic\"));\n lines.push(\" MOOD: \" + (p.mood || \"cinematic\"));\n lines.push(\" ART STYLE: \" + ($(\"artLock\").value.trim() || \"Auto\"));\n lines.push(\" FULL PROMPT: \" + p.prompt);\n });\n downloadText(\"manhwa-image-bible.txt\", lines.join(\"\\n\"));\n setStatus(\"Image Bible saved — every image explained at a micro level for consistency.\", \"warn\");\n}\n\nfunction downloadText(name, text) {\n const a = document.createElement(\"a\");\n a.download = name;\n a.href = \"data:text/plain;charset=utf-8,\" + encodeURIComponent(text);\n a.click();\n}\n\n// ---------- COMPILE ----------\nasync function compileVideo(btn) {\n but(btn, true);\n setStatus(\"Compiling video…\", \"warn\");\n try {\n if (!panels.length) await writeStory(null);\n const bufs = [];\n for (let i = 0; i < narration.length; i++) {\n const txt = narration[i].text || \"Panel \" + (i+1);\n let url = null;\n try { url = await proxyTTS(txt, \"en\"); } catch (e) { /* silent fallback */ }\n bufs.push(url);\n }\n const mp4Blob = await buildVideo(bufs);\n const videoEl = $(\"video\");\n videoEl.src = URL.createObjectURL(mp4Blob);\n videoEl.controls = true;\n const dl = $(\"downloadBtn\");\n dl.style.display = \"inline-block\";\n dl.href = URL.createObjectURL(mp4Blob);\n dl.download = \"recap-\" + Date.now() + (mp4Blob.type.includes(\"mp4\") ? \".mp4\" : \".webm\");\n setStatus(\"Video compiled and ready. Use Thumbnail + Download.\", \"\");\n } catch (e) {\n setStatus(\"Compile error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { but(btn, false); }\n}\n\nfunction buildVideo(narrationUrls) {\n return new Promise((resolve, reject) => {\n const isShort = $(\"format\").value === \"short\";\n const W = isShort ? 720 : 1280, H = isShort ? 1280 : 720;\n const canvas = document.createElement(\"canvas\");\n canvas.width = W; canvas.height = H;\n canvas.style.cssText = \"position:fixed;left:-10000px;top:0;\";\n document.body.appendChild(canvas);\n const ctx = canvas.getContext(\"2d\");\n\n const ac = new (window.AudioContext || window.webkitAudioContext)();\n const dest = ac.createMediaStreamDestination();\n const videoStream = canvas.captureStream(30);\n\n const secs = panels.map((_, i) => secPerPanel());\n const totalSec = secs.reduce((a, b) => a + b, 0);\n const totalMs = totalSec * 1000;\n\n let t = ac.currentTime + 0.1;\n let scheduledAny = false;\n (async () => {\n for (let i = 0; i < secs.length; i++) {\n if (narrationUrls[i]) {\n try {\n const buf = await fetch(narrationUrls[i]).then(r => r.arrayBuffer()).then(b => ac.decodeAudioData(b));\n const src = ac.createBufferSource();\n src.buffer = buf;\n src.connect(dest);\n src.start(t);\n scheduledAny = true;\n } catch (e) { /* skip */ }\n }\n t += secs[i];\n }\n if (!scheduledAny) { /* silent audio continues */ }\n })();\n\n const tracks = [videoStream.getVideoTracks()[0], dest.stream.getAudioTracks()[0]];\n const media = new MediaStream(tracks);\n const mime = pickMime();\n const rec = new MediaRecorder(media, mime);\n const chunks = [];\n rec.ondataavailable = e => { if (e.data && e.data.size) chunks.push(e.data); };\n let resolved = false;\n const finish = (err) => {\n clearTimeout(safety);\n if (resolved) return;\n resolved = true;\n try { if (rec.state !== \"inactive\") rec.stop(); } catch (e) {}\n try { ac.close(); } catch (e) {}\n if (canvas.parentNode) canvas.parentNode.removeChild(canvas);\n if (err) reject(err);\n else resolve(new Blob(chunks, { type: mime.mimeType || \"video/webm\" }));\n };\n rec.onerror = (ev) => finish(new Error(\"Recorder error: \" + ((ev.error && ev.error.message) || ev.error || \"unknown\")));\n rec.onstop = () => finish(null);\n const safety = setTimeout(() => finish(new Error(\"Compile timed out — no video data captured. Try fewer panels / shorter seconds, stay on the tab.\")), totalMs + 9000);\n\n const start = performance.now();\n function frame(now) {\n if (now - start >= totalMs) { rec.stop(); return; }\n draw(now - start);\n requestAnimationFrame(frame);\n }\n function draw(ms) {\n ctx.fillStyle = \"#000\"; ctx.fillRect(0, 0, W, H);\n let acc = 0;\n for (let i = 0; i < panels.length; i++) {\n const segMs = secs[i] * 1000;\n if (ms < acc + segMs) {\n const p = Math.min(1, (ms - acc) / segMs);\n drawPanel(ctx, panels[i].img, p, W, H);\n const fade = 500;\n if (i + 1 < panels.length && ms >= segMs - fade) {\n const a = (ms - (segMs - fade)) / fade;\n ctx.globalAlpha = a;\n drawPanel(ctx, panels[i + 1].img, 0, W, H);\n ctx.globalAlpha = 1;\n }\n break;\n }\n acc += segMs;\n }\n }\n function drawPanel(ctx, img, p, W, H) {\n if (!img) { ctx.fillStyle = \"#123\"; ctx.fillRect(0,0,W,H); return; }\n const zoom = 1 + 0.12 * p;\n const iw = img.naturalWidth || W, ih = img.naturalHeight || H;\n const s = Math.max(W / iw, H / ih) * zoom;\n const dw = iw * s, dh = ih * s;\n ctx.drawImage(img, (W - dw) / 2, (H - dh) / 2, dw, dh);\n }\n function pickMime() {\n for (const t of [\"video/mp4;codecs=avc1\", \"video/webm;codecs=vp9\", \"video/webm\"]) {\n if (MediaRecorder.isTypeSupported(t)) return { mimeType: t };\n }\n return {};\n }\n draw(0);\n rec.start(100);\n ac.resume().catch(()=>{}).finally(() => requestAnimationFrame(frame));\n });\n}\n\nfunction generateThumbnail() {\n if (!panels.length) { setStatus(\"Write a story first.\", \"warn\"); return; }\n const isShort = $(\"format\").value === \"short\";\n const W = isShort ? 720 : 1280, H = isShort ? 1280 : 720;\n let best = null, bestScore = -1;\n for (const p of panels) {\n if (!p.img) continue;\n const s = scoreContrast(p.img);\n if (s > bestScore) { bestScore = s; best = p.img; }\n }\n if (!best) best = panels[0] && panels[0].img;\n\n const c = document.createElement(\"canvas\"); c.width = W; c.height = H;\n const x = c.getContext(\"2d\");\n x.fillStyle = \"#000\"; x.fillRect(0, 0, W, H);\n if (best) {\n const s = Math.max(W / (best.naturalWidth || W), H / (best.naturalHeight || H));\n x.drawImage(best, (W - best.naturalWidth * s) / 2, (H - best.naturalHeight * s) / 2, best.naturalWidth * s, best.naturalHeight * s);\n }\n const title = ($(\"metaTitle\").value || $(\"mc\").value || \"RECAP\").split(\" — \")[0].slice(0, 22).toUpperCase();\n const g = x.createLinearGradient(0, H * 0.58, 0, H);\n g.addColorStop(0, \"rgba(0,0,0,0)\");\n g.addColorStop(1, \"rgba(0,0,0,.85)\");\n x.fillStyle = g; x.fillRect(0, H * 0.58, W, H * 0.42);\n x.textAlign = \"center\"; x.textBaseline = \"middle\";\n x.shadowColor = \"rgba(0,0,0,.9)\"; x.shadowBlur = Math.floor(W / 40); x.shadowOffsetY = Math.floor(W / 90);\n x.font = `900 ${Math.floor(W / 8)}px Arial Black, system-ui, sans-serif`;\n x.fillStyle = \"#fff\"; x.fillText(title, W / 2, H * 0.70);\n x.shadowBlur = 0; x.shadowOffsetY = 0;\n x.fillStyle = \"#e11\"; x.fillRect(W * 0.30, H * 0.82, W * 0.40, Math.max(4, Math.floor(H / 70)));\n x.font = `800 ${Math.floor(W / 16)}px Arial Black, system-ui, sans-serif`;\n x.fillStyle = \"#ffe14d\"; x.fillText(\"FULL RECAP\", W / 2, H * 0.90);\n\n const a = document.createElement(\"a\");\n a.download = \"thumbnail.png\";\n a.href = c.toDataURL(\"image/png\");\n a.click();\n setStatus(\"High-CTR thumbnail downloaded (best-contrast panel + hook text).\", \"\");\n}\n\nfunction scoreContrast(img) {\n const c = document.createElement(\"canvas\"); c.width = 64; c.height = 64;\n const x = c.getContext(\"2d\");\n try { x.drawImage(img, 0, 0, 64, 64); } catch (e) { return 0; }\n let data;\n try { data = x.getImageData(0, 0, 64, 64).data; } catch (e) { return 0; }\n let sum = 0, sum2 = 0, n = 0;\n for (let i = 0; i < data.length; i += 4) {\n const l = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];\n sum += l; sum2 += l * l; n++;\n }\n const mean = sum / n;\n return Math.sqrt(sum2 / n - mean * mean);\n}\n\nfunction esc(s) { return (s||\"\").replace(/[&<>\"']/g, c => ({\"&\":\"&\",\"<\":\"<\",\">\":\">\",'\"':\""\",\"'\":\"'\"}[c])); }\nfunction sleep(ms) { return new Promise(r => setTimeout(r, ms)); }\n// =====================================================================\n// THUMBNAIL MICRO ANALYSIS — improve the outcome of the thumbnail\n// The thumbnail is the ONE image that decides the click. This report\n// breaks the thumbnail down at a micro level (like the Image Bible) so\n// you can send the highest-signal thumbnail prompt to your image model\n// and keep tracking what works.\n// =====================================================================\nfunction downloadThumbnailMicroAnalysis() {\n if (!panels.length) { setStatus(\"Write a story first, then get the Thumbnail Micro Analysis.\", \"warn\"); return; }\n\n const mc = $(\"mc\").value || \"Sung Jin-Woo\";\n const power = $(\"power\").value || \"rises from the weakest Hunter to a Monarch\";\n const goal = $(\"goal\").value || \"to save humanity from the Monarchs\";\n const world = $(\"world\").value || \"gates linking Earth to dungeons\";\n\n // Hook title = the most clickable beat, capped to the first (short) part.\n const rawTitle = ($(\"metaTitle\").value || mc + \" — \" + goal);\n const hook = rawTitle.split(\" — \")[0].slice(0, 22).toUpperCase();\n\n // Which panel is (or would be) the thumbnail base? Pick the highest-contrast panel.\n let bestIdx = -1, bestScore = -1;\n panels.forEach((p, i) => { if (p.img) { const s = scoreContrast(p.img); if (s > bestScore) { bestScore = s; bestIdx = i; } } });\n if (bestIdx < 0) bestIdx = 0;\n const base = panels[bestIdx];\n const baseStory = (narration[bestIdx] && narration[bestIdx].text) || base.scene || \"\";\n\n const charLockText = ($(\"charLock\").value.trim() ||\n (function(){ try { return characterBlock(); } catch(e){ return \"The protagonist\"; } })());\n const artText = ($(\"artLock\").value.trim() || ($(\"style\").value.trim() || DEFAULT_STYLE));\n const envText = $(\"envLock\").value.trim();\n\n const subject = `MC face (${mc}) dead-center, ~40% of the frame (reads at tiny mobile size).`;\n const expression = \"One undeniable expression at the story's turning point — fierce, wide-eyed, before power reveals itself.\";\n const composition = \"Medium close-up (chest-up), subject sharp, background blurred for depth; base panel from Panel \" + (bestIdx + 1) + \": \\\"\" + baseStory.slice(0, 110) + \"\\\".\";\n const lighting = \"Rim light behind MC separating subject from background; subject cold-blue (system energy) vs warm-orange backdrop for max contrast.\";\n const palette = \"Two clashing dominant colors (electric blue vs gold-orange), high saturation, no mid-grey mud.\";\n const negativeSpace = \"Top-left and bottom-right kept dark/empty so the \\\"\" + hook + \"\\\" title text and face both pop uncluttered.\";\n\n const fullThumbPrompt = [\n \"YouTube thumbnail for a manhwa recap,\", artText + \". Model:\", ($(\"model\").value || \"Dreamshaper\") + \".\",\n subject, expression, composition, lighting, palette, negativeSpace,\n \"Character lock:\", charLockText + \".\", CONSISTENCY,\n \"Hook title text \\\"\" + hook + \"\\\" rendered huge and bold in the dark negative space; no extra text, no clutter.\",\n ].join(\" \");\n\n // Self-assessment of the thumbnail the app currently auto-generates.\n const contrastNote = bestScore > 0\n ? \"Auto-thumbnail picked Panel \" + (bestIdx + 1) + \" (highest contrast ≈ \" + bestScore.toFixed(0) + \").\"\n : \"No generated panel images yet — best-contrast pick will work after you Generate Images.\";\n\n const lines = [];\n lines.push(\"MANHWA RECAP ROBOT — THUMBNAIL MICRO ANALYSIS\");\n lines.push(\"Generated: \" + new Date().toISOString());\n lines.push(\"===========================================================================\");\n lines.push(\"\");\n lines.push(\"PREMISE\");\n lines.push(\" MC: \" + mc);\n lines.push(\" Power: \" + power);\n lines.push(\" Goal: \" + goal);\n lines.push(\" World: \" + world);\n lines.push(\" Panels: \" + panels.length + \" · Art Model: \" + ($(\"model\").value || \"Auto\"));\n lines.push(\"\");\n lines.push(\"THUMBNAIL (the one frame that decides the click)\");\n lines.push(\"\");\n lines.push(\" STATUS: \" + contrastNote);\n lines.push(\" HOOK TITLE: \" + hook);\n lines.push(\" SUBJECT: \" + subject);\n lines.push(\" EXPRESSION: \" + expression);\n lines.push(\" COMPOSITION: \" + composition);\n lines.push(\" LIGHTING: \" + lighting);\n lines.push(\" PALETTE: \" + palette);\n lines.push(\" NEGATIVE SPACE:\" + negativeSpace);\n lines.push(\" CHARACTER LOCK:\" + charLockText);\n lines.push(\" ENVIRONMENT: \" + (envText || \"(scene default)\"));\n lines.push(\"\");\n lines.push(\"FULL THUMBNAIL PROMPT (send this to your image model):\");\n lines.push(\" \" + fullThumbPrompt);\n lines.push(\"\");\n lines.push(\"HOW TO IMPROVE NEXT RUN:\");\n lines.push(\" - Keep the face dead-center and less than half the frame = strongest CTR.\");\n lines.push(\" - One 1-3 word hook beats a full sentence: \\\"\" + hook.slice(0, 12) + \"…\\\" works.\");\n lines.push(\" - Clash 2 colors (blue vs orange) for tiny-size readability.\");\n lines.push(\" - Never crop the face; leave dark corners for the title.\");\n\n downloadText(\"manhwa-thumbnail-micro-analysis.txt\", lines.join(\"\\n\"));\n setStatus(\"Thumbnail micro analysis saved — high-signal thumbnail prompt ready.\", \"warn\");\n}\n","createdAt",["D",1787072180189],"branchVersion","branchId","3e31b6b1-7079-4f5e-88ba-802389deccd8","id","22105ad8-254f-4b2b-bf0e-07393d6a9260","manhwa-recap-robot",["D",1787071796347],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI manhwa recap video generator with thumbnail micro analysis","imageUrl","00de319e-99a2-4563-81e5-21dd97a2afa3","pinnedFileId","01a015c7-94b8-743d-8139-0b0ba40e75ef","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a015c1-67bd-766b-b976-2a6534c126ed","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_115":111},"org",{"_107":106,"_108":109,"_110":111,"_19":61,"_112":113,"_114":31},"branch",{"_13":92,"_38":93,"_49":48,"_94":50,"_95":96,"_97":98,"_99":56,"_100":101,"_102":103,"_104":51,"_105":106},"isOwned",26,"main","projectId","forkedBranchId","c57926c8-7beb-40b3-8ba7-ec90b7b687c6","forkedBranchVersion",41,"forkedProjectPrivacy","forkedProjectId","4dee7cf8-684b-4c18-acea-6c23e5c8235c","forkedProjectOrgId","01a01566-4382-718a-880f-71ab27c0faa9","projectName","userHandle","Numbmanhwa","handle","displayName","Numb Manhwa","avatar","https://lh3.googleusercontent.com/a/ACg8ocJaQh5Nww6BPtFHhJC2hQOo3Crkrd2fw_vns5kbdqQKEyWYug=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":208,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":209,"_87":210,"_89":211,"_91":31},"tree",[191,192,193,194],"files",[191,192,193,194],"counts",{"_181":69,"_182":156,"_183":156,"_184":185,"_186":187},"contents",[149,150,151,152],"upstreamProject",{"_49":101,"_38":51,"_58":146,"_60":-5,"_55":56,"_85":147},"upstreamBranch",{"_49":96,"_44":140,"_141":142,"_38":93,"_94":101,"_13":98,"_95":-5,"_97":-5,"_143":144,"_53":-5,"_91":31,"_55":56,"_105":145,"_70":103,"_104":51},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1787066813597],"updatedAt",["D",1787069104948],"lockfileKey","1787069105058-esm.town_v_Ianime_manhwa-recap-robot@41-main","Ianime","AI manhwa recap video generator with strict story engine",{"_107":145,"_115":148},"https://lh3.googleusercontent.com/a/ACg8ocJ1orBRUaEC0KHR7oxxxMvjf-ROwLNq2SVj__jNetdCRJBuBw=s96-c",{"_49":175,"_38":176,"_36":177,"_155":-5,"_47":48,"_46":156,"_157":65,"_44":178,"_13":69,"_39":26,"_41":179,"_30":31,"_161":-5,"_33":180},{"_49":171,"_38":34,"_36":37,"_155":-5,"_47":48,"_46":14,"_157":31,"_44":172,"_13":173,"_39":40,"_41":43,"_30":31,"_161":-5,"_33":174},{"_49":164,"_38":165,"_36":166,"_155":-5,"_47":48,"_46":167,"_157":65,"_44":168,"_13":156,"_39":26,"_41":169,"_30":31,"_161":-5,"_33":170},{"_49":153,"_38":154,"_36":63,"_155":-5,"_47":48,"_46":156,"_157":31,"_44":158,"_13":69,"_39":159,"_41":160,"_30":31,"_161":162,"_33":163},"ec84377a-a65b-41d8-b888-4502360c4f3f","main.ts","parentId",1,"latest",["D",1787071796347],"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nconst HORDE = \"https://aihorde.net/api/v2\";\nconst JOB_TTL_MS = 2 * 60 * 60 * 1000; // jobs expire after 2h\n// Always-available baseline model used if a pinned model is rejected.\nconst ANON_FALLBACK_MODEL = \"stable_diffusion\";\n// Reduces the classic Stable Diffusion artifacts (extra fingers, text, blur).\nconst NEGATIVE_PROMPT = \"text, watermark, signature, logo, blurry, low quality, deformed, extra fingers, extra limbs, bad anatomy, distorted face, cropped, jpeg artifacts, nsfw\";\n\n// AI Horde requires dimensions to be multiples of 64, and the anonymous key is\n// capped at 850x850 (a registered key can go much larger). Scale the requested\n// size down to fit `maxDim` while preserving aspect ratio, then snap to 64.\nfunction fitDims(w: number, h: number, maxDim: number): [number, number] {\n const scale = Math.min(1, maxDim / Math.max(w, h));\n let nw = Math.max(64, Math.round((w * scale) / 64) * 64);\n let nh = Math.max(64, Math.round((h * scale) / 64) * 64);\n while (nw > maxDim) nw -= 64;\n while (nh > maxDim) nh -= 64;\n return [nw, nh];\n}\n\nfunction hordeKey() {\n // `0000000000` is the shared anonymous key; a registered key gets higher priority.\n return Deno.env.get(\"AI_HORDE_KEY\") || \"0000000000\";\n}\n\n// Lookup handler: return a Response for API routes, else defer to the static server.\nasync function api(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname === \"/api/generate\" && req.method === \"POST\") return startJob(req);\n if (url.pathname === \"/api/status\") return jobStatus(url.searchParams.get(\"job\") || \"\");\n return null;\n}\n\nexport default staticHTTPServer(import.meta.url, api);\n\n// ---- ASYNC JOB FLOW (works within the free-tier 1-minute request timeout) ----\n// startJob submits every panel to AI Horde (each submit is a fast HTTP POST)\n// and returns a jobId immediately. The client polls /api/status, which ticks\n// each Horde job forward. No single server request blocks for generation.\n\nasync function startJob(req: Request): Promise {\n try {\n const body = await req.json();\n const prompts: string[] = Array.isArray(body.prompts) ? body.prompts : [];\n const apikey = hordeKey();\n const maxDim = apikey === \"0000000000\" ? 832 : 2048;\n const [width, height] = fitDims(Number(body.width) || 720, Number(body.height) || 1280, maxDim);\n\n const jobId = crypto.randomUUID();\n const items = [];\n const requestedModel = String(body.model || \"\").trim();\n for (const p of prompts) {\n try {\n const hordeId = await submitWithRetry(p, width, height, apikey, requestedModel || undefined);\n items.push({ hordeId, done: false, failed: false, url: null });\n } catch (e) {\n console.error(\"Horde submit failed:\", (e && e.message) || e);\n items.push({ hordeId: null, done: false, failed: true, url: null });\n }\n // Anonymous AI Horde rate-limits to ~2 submits/sec — pace the loop so\n // the later panels aren't rejected with 429.\n await new Promise((r) => setTimeout(r, 550));\n }\n await blob.setJSON(\"job:\" + jobId, { id: jobId, items, createdAt: Date.now() });\n cleanup(); // fire-and-forget old jobs\n return Response.json({ jobId, count: prompts.length });\n } catch (e) {\n return Response.json({ error: String((e && e.message) || e) }, { status: 500 });\n }\n}\n\nasync function jobStatus(jobId: string): Promise {\n if (!jobId) return Response.json({ error: \"missing job\" }, { status: 400 });\n const job = await blob.getJSON(\"job:\" + jobId).catch(() => null);\n if (!job) return Response.json({ error: \"not found\" }, { status: 404 });\n\n const apikey = hordeKey();\n for (const it of job.items) {\n if (it.done || it.failed || !it.hordeId) continue;\n try {\n const data = await hordeStatus(it.hordeId, apikey);\n if (data && data.done) {\n const img = data.generations && data.generations[0] && data.generations[0].img;\n if (img) {\n // Horde returns raw base64, a data URL, or a signed R2 URL. Always\n // produce a same-origin data URL so the client canvas isn't tainted.\n it.url = img.startsWith(\"data:\") ? img\n : img.startsWith(\"http\") ? await toDataURL(img)\n : \"data:image/jpeg;base64,\" + img;\n }\n it.done = true;\n } else if (data && data.faulted) {\n it.failed = true;\n }\n } catch {\n // keep pending; we try again on the next poll\n }\n }\n await blob.setJSON(\"job:\" + jobId, job);\n\n const pending = job.items.filter((i) => !i.done && !i.failed).length;\n const errors = job.items.filter((i) => i.failed).length;\n return Response.json({\n done: pending === 0,\n urls: job.items.map((i) => i.url),\n total: job.items.length,\n pending,\n errors,\n });\n}\n\nasync function hordeSubmit(prompt: string, width: number, height: number, apikey: string, model?: string): Promise {\n const res = await fetch(HORDE + \"/generate/async\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\", apikey },\n body: JSON.stringify({\n prompt,\n params: { width, height, n: 1, steps: 28, cfg_scale: 7, sampler_name: \"k_euler_a\", negative_prompt: NEGATIVE_PROMPT },\n ...(model ? { models: [model] } : {}),\n }),\n });\n if (!res.ok) {\n const txt = await res.text().catch(() => \"\");\n throw new Error(\"Horde async HTTP \" + res.status + (txt ? \" \" + txt.slice(0, 150) : \"\"));\n }\n const data = await res.json();\n if (!data.id) throw new Error(\"Horde returned no job id\");\n return data.id;\n}\n\n// Submit a prompt to AI Horde, handling the anonymous 429 rate limit\n// (retry with a short wait) and falling back to the baseline model if a\n// pinned model is rejected (e.g. needs more kudos than anonymous).\nasync function submitWithRetry(prompt: string, width: number, height: number, apikey: string, model?: string): Promise {\n const attempts = 3;\n for (let a = 0; a < attempts; a++) {\n try {\n return await hordeSubmit(prompt, width, height, apikey, model);\n } catch (e) {\n const msg = String((e && e.message) || e);\n // Rate limit -> wait and retry the same submission.\n if (msg.includes(\"429\")) {\n await new Promise((r) => setTimeout(r, 800));\n continue;\n }\n // Model rejected -> retry once on the always-available baseline.\n if (model && model !== ANON_FALLBACK_MODEL) {\n return await hordeSubmit(prompt, width, height, apikey, ANON_FALLBACK_MODEL);\n }\n throw e;\n }\n }\n throw new Error(\"Horde submit rate-limited after retries\");\n}\n\n// Single status check — called once per /api/status poll. (No blocking loop.)\nasync function hordeStatus(id: string, apikey: string): Promise {\n const res = await fetch(HORDE + \"/generate/status/\" + id, { headers: { apikey } });\n if (!res.ok) throw new Error(\"Horde status HTTP \" + res.status);\n return res.json();\n}\n\n// Fetch a remote image and re-serve it as a base64 data URL (canvas-safe).\nasync function toDataURL(url: string): Promise {\n const res = await fetch(url);\n if (!res.ok) throw new Error(\"image fetch HTTP \" + res.status);\n const mime = res.headers.get(\"content-type\") || \"image/jpeg\";\n const bytes = new Uint8Array(await res.arrayBuffer());\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 `data:${mime};base64,${btoa(bin)}`;\n}\n\nasync function cleanup() {\n try {\n const entries = await blob.list(\"job:\");\n const cutoff = Date.now() - JOB_TTL_MS;\n for (const e of entries) {\n const lm = new Date(e.lastModified as any).getTime();\n if (lm < cutoff) await blob.delete(e.key);\n }\n } catch {\n // best effort\n }\n}\n","label","manhwa-recap-robot-42",[154],"9be1f4e3-2493-4d1e-93e4-75a18f631814","index.html","01a015c7-94b8-743d-8139-059ee7930194",3,["D",1787071823332],"\n\n\n\n\nManhwa Recap Robot\n\n\n\n

🤖 Manhwa Recap Robot

Murf AI Voice · AI Horde Images · Ken Burns Motion

\n\n \n

Settings

🔑 Keys (optional)

\n Murf AI Key\n \n LLM API Key (OpenAI-compatible) — for AI story writing\n \n LLM Base URL\n \n LLM Model\n \n Free TTS Proxy (Val Town proxy URL)\n \n

\n \n

\n\n \n

🔒 Safe Lock · Image Look

Describe the look ONCE — it's applied to EVERY panel. Save it to a text file to see exactly how all images will appear, and download an issue report to send back for fixes.

\n 1 · Character Lock (the protagonist's exact look)\n \n 2 · Art Style Lock (the art style for every image)\n \n 3 · Environment Lock (the world/setting for every image)\n \n

\n \n \n \n

\n\n \n

01 · Premise

MC Name

Power

Goal

World

\n Format\n \n

\n Panels\n \n

\n Sec/panel\n \n

\n 🎨 Art Model\n \n

\n 📜 Script Style\n \n

\n Style (optional)\n \n 🎨 Style Lock (fixed character + art style — applied to EVERY panel for consistency)\n \n

\n \n \n \n \n \n

\n\n \n

02 · Story Metadata

\n Title\n Description\n

03 · Storyboard

Write a new story first.

\n\n \n

04 · Compile (720p High Quality)

\n \n \n \n \n

\n\n\n\n\n",[165],"3e753ec7-c739-4fe8-bb57-5236077d5abc",["D",1787072180189],6,[34],"ea679129-d115-4619-adaf-3a13f9f98927","README.md","01a015c7-94b8-743d-8138-fcc43af5f7bb",["D",1787071796347],"# 🤖 Manhwa Recap Robot\n\nTurn a one-line premise into a complete **AI manhwa recap video**: original story narration → AI Horde images → TTS voice → Ken Burns motion MP4.\n\n**Live:** https://manhwa-recap-robot.val.run/\n\n## Files\n\n| File | Purpose |\n|------|---------|\n| `main.ts` | HTTP server. Serves `index.html`/`app.js` (via `staticHTTPServer`) and the `POST /api/generate` AI Horde image backend. |\n| `index.html` | The app UI. |\n| `app.js` | All client logic — story writing, **strict scripting engine**, image/voice/video compilation. |\n\n## The Strict Scripting Engine\n\nInstead of recapping real manhwa pages, the tool writes an **original story from a premise** and enforces a hard line-level style:\n\n- **Present tense, active voice**\n- **8–12 words per line**\n- **One action per sentence**\n- **No filler or meta-commentary**\n\nHow it's enforced in `app.js`:\n\n- `validateLine(line)` — heuristic validator that returns `{ ok, words, issues[] }`. It **flags** violations (past-tense verbs, passive `…by…`, chained actions, filler phrases) rather than silently rewriting text, since programmatic grammar conversion is unreliable.\n- `renderValidation(lines)` — paints each line in the storyboard green/red with its word count and the exact issue, plus a summary note.\n- `writeStory` — after an LLM call, if **more than ~30% of lines fail** validation, it **retries the LLM up to 2×**, feeding back the precise list of failing lines (\"Line 2 (14w): 14 words…\") so the model corrects itself. One or fewer bad lines is tolerated.\n- `defaultStory()` — the no-key offline fallback. **Fixed bug**: the original returned a hard-coded 5 lines regardless of the panel count, so narration repeated verbatim. It now builds exactly `count` distinct lines via combinatorial slot-filling (`NARR_OPEN` × `NARR_WHERE` × `NARR_THREAT`), validated in place, so 12 panels never repeat.\n\n## Keys\n\nAll keyed services are optional (click **🔑 Keys** in the app and save → stored in your browser's `localStorage`):\n\n- **LLM Key** — any OpenAI-compatible endpoint (`sk-…` from OpenAI/OpenRouter/Groq) for AI story writing.\n- **AI Horde Key** — server-side secret for images. Optional (anonymous works, with lower queue priority). Set the val's `AI_HORDE_KEY` env var.\n- **Murf AI Key** — paid TTS; leave blank to use the free TTS proxy (`tts-proxy`).\n\n## Image backend\n\n`main.ts` generates one image per panel on [AI Horde](https://aihorde.net) as same-origin data URLs (so the canvas is never tainted), polling until done with a 2‑min/panel cap. Every panel shows a canvas placeholder instantly, then real art swaps in as each URL resolves.\n\nNotes on the AI Horde integration (these were the bugs that blocked image generation):\n\n- **Dimensions must be multiples of 64** — the backend snaps them.\n- **An `apikey` header is required on every request** — it defaults to the shared anonymous key `0000000000`.\n- **Anonymous is capped at 850×850** — the backend scales the requested size down to fit while preserving aspect ratio. Setting a registered `AI_HORDE_KEY` lifts the cap to 2048 (full 720p/1080p quality).\n",[176],"pulls","branches","forks","envVars",{"_188":69,"_190":69},"connections",{"_188":69,"_189":69},"count","unfilledCount","emptyCount",{"_49":175,"_38":176,"_36":177,"_155":-5,"_47":48,"_46":156,"_157":65,"_44":205,"_13":69,"_39":26,"_41":179,"_30":31,"_161":-5,"_196":206,"_33":207},{"_49":171,"_38":34,"_36":37,"_155":-5,"_47":48,"_46":14,"_157":31,"_44":202,"_13":173,"_39":40,"_41":43,"_30":31,"_161":-5,"_196":203,"_33":204},{"_49":164,"_38":165,"_36":166,"_155":-5,"_47":48,"_46":167,"_157":65,"_44":199,"_13":156,"_39":26,"_41":169,"_30":31,"_161":-5,"_196":200,"_33":201},{"_49":153,"_38":154,"_36":63,"_155":-5,"_47":48,"_46":156,"_157":31,"_44":195,"_13":69,"_39":159,"_41":160,"_30":31,"_161":162,"_196":197,"_33":198},["D",1787071796347],"children",[],[154],["D",1787071823332],[],[165],["D",1787072180189],[],[34],["D",1787071796347],[],[176],["D",1787071796347],{"_107":106,"_115":111},{"_107":106,"_108":109,"_110":111,"_19":61,"_112":113,"_114":31},{"_13":92,"_38":93,"_49":48,"_94":50,"_95":96,"_97":98,"_99":56,"_100":101,"_102":103,"_104":51,"_105":106},"ctx",{"_85":-5,"_137":245,"_246":247,"_248":249,"_250":31,"_251":31,"_252":31,"_253":65,"_254":-5,"_255":-7,"_256":-7,"_257":69,"_258":31,"_259":31,"_260":-5,"_261":31,"_262":31,"_263":31,"_264":-5},"ENV",{"_216":217,"_218":219,"_220":93,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244},"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 · v8