🤖 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 AI Horde Key (registered — faster & full-res images)\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\n",[104],"ef88d8f55c52683bb8ad6669588c393132bfe03dfd43415102f1b6909fa41342","f8cd5f52-60ff-4bcd-9454-629a735e663f","01a016ca-0ae9-7248-a934-66c9a35850bc",["D",1787088734583],0,"\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\n",[104],"bf750edef20ed1c3f45d1518916912705034fccdbd1f20beae919afc58513e87","app.js",{"_32":135,"_13":123,"_81":136,"_83":-5,"_84":33,"_85":111,"_86":50,"_34":137,"_40":100,"_88":131,"_90":138,"_67":50,"_92":-5,"_93":-7,"_74":139,"_95":140},{"_32":126,"_13":123,"_81":127,"_83":-5,"_84":59,"_85":128,"_86":26,"_34":129,"_40":130,"_88":131,"_90":132,"_67":50,"_92":-5,"_93":-7,"_74":133,"_95":134},"1ac82b06-ba32-43d0-aaa9-4ccb283b7c96","01a01710-5615-71cb-a4dd-d09f18636726",26,["D",1787095299621],10,"script","\"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 $(\"hordeKey\").value = pick(\"rr.horde\", \"\");\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.horde\", $(\"hordeKey\").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(500, 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// =====================================================================\n// Gender-by-name: maps known manhwa character names to gender so the\n// generated art ALWAYS matches the character (no more \"labels a man,\n// draws a woman\"). Add any character you recap here.\nconst CHARACTER_GENDERS = {\n \"sung jin-woo\": \"male\", \"sung jinwoo\": \"male\", \"jin-woo\": \"male\", \"jinwoo\": \"male\",\n \"suho\": \"male\", \"suho kim\": \"male\",\n \"cha hae-in\": \"female\", \"hae-in\": \"female\",\n \"jinah\": \"female\", \"sung jinah\": \"female\",\n \"esil\": \"female\",\n \"igris\": \"male\", \"beru\": \"male\", \"ashborn\": \"male\", \"antares\": \"male\",\n \"go gun-hee\": \"male\", \"baek yoonho\": \"male\", \"woo jin-chul\": \"male\", \"choi jong-in\": \"male\",\n \"lloyd\": \"male\", \"lloyd frontera\": \"male\", \"javier\": \"male\",\n};\nfunction genderOf(name) {\n const n = (name || \"\").toLowerCase().trim();\n if (CHARACTER_GENDERS[n]) return CHARACTER_GENDERS[n];\n // Heuristic fallback for Korean names not in the table.\n const last = n.split(/[\\s-]+/).pop() || \"\";\n if (/(ah|a|e|eo|yeo|i|y|na|ra|mi|jin|sun|soo|hee|in)$/.test(last)) return \"female\";\n return \"male\";\n}\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 const g = genderOf(mc);\n const n = mc.toLowerCase();\n // Canonical default for the Solo Leveling protagonist — a clearly MALE\n // Shadow Monarch, so the thumbnail/panels never render him as a woman.\n if (/(jin-?woo|sung jin)/.test(n)) {\n return \"The same protagonist: a MALE young man with a sharp masculine jawline and defined brow, short spiky black hair, sharp dark eyes that glow pale violet, wearing sleek black-and-navy Shadow Monarch armor with glowing purple energy and a dark ethereal aura. NOT female, NOT androgynous.\";\n }\n // Gender-correct default for every other character.\n const gdesc = g === \"female\"\n ? \"a FEMALE young woman with graceful feminine features and longer hair\"\n : \"a MALE young man with a clearly masculine face, chiseled jawline, broad shoulders and short masculine hair. NOT female, NOT androgynous\";\n return `The same protagonist: ${gdesc} named ${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// Pacing / continuity rule: each panel must be a DIRECT consequence of the\n// one before it — same enemy, same location, same ongoing action until the\n// scene resolves. No unexplained teleports or enemies appearing out of nowhere.\nconst TRANSITION_RULE = \"Continuity: this panel is a direct consequence of the previous one — keep the same enemy, same location and same ongoing action until the scene resolves. No unexplained location or enemy changes without a bridging beat.\";\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\": \"professional manhwa webtoon art style, clean bold black ink lineart, black-and-white screentone halftone shading, expressive dramatic facial expressions, stylized manhwa proportions, bold high-contrast panel composition, crisp crisp digital illustration. NOT 3D rendered, NOT photorealistic, NOT anime, NOT Disney\",\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// GLOBAL MODEL PRINCIPLE — a style \"outline\" that applies to EVERY panel\n// and the thumbnail. Choose one standout look and hold it across the whole\n// video so every frame is unmistakably consistent (the blueprint's #1 rule,\n// taken further). Add a principle per model; active when that model is picked.\n// =====================================================================\nconst MODEL_PRINCIPLES = {\n \"Comic-Diffusion\":\n \"Comic-Diffusion Principle (applies to ALL panels): one shared webtoon outline language — bold black ink contour lines, clean black-and-white halftone shading, dramatic comic panel composition, strong contrast, decisive exaggerated expressions, zero clutter or background noise.\",\n \"Anything v5\":\n \"Anime Principle (applies to ALL panels): one shared clean cel-anime look — crisp linework, bright saturated colors, expressive eyes, clean flat backgrounds, consistent character model everywhere.\",\n \"MeinaMix\":\n \"Clean-Anime Principle (applies to ALL panels): one shared soft cel-anime look — smooth shading, clear bright palette, tidy composition, consistent character model everywhere.\",\n \"Dreamshaper\":\n \"Cinematic Principle (applies to ALL panels): one shared cinematic 3D-animated look — filmic lighting, ray-traced detail, consistent character model and world across every frame.\",\n};\n\n// Returns the global principle for the currently selected model (or \"\" if none).\nfunction modelPrinciple() {\n const m = ($(\"model\") && $(\"model\").value.trim()) || \"\";\n return MODEL_PRINCIPLES[m] || \"\";\n}\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 // ACTION + INTERACTION beats: every panel is a dynamic scene where the MC\n // clashes, dodges, shields, or reacts against another character — never a\n // static solo pose. Narrations stay 8-12 words + one action so the strict\n // validator keeps them (no generic fallback).\n return [\n { n: `${mc} stands tense as elite hunters sneer and mock him.`,\n s: `The protagonist stands tense as elite hunters shove past and sneer, one pointing and laughing in his face.`,\n e: \"modern hunter guild hall, glass walls, holographic rank displays, cold blue lighting\",\n m: \"somber\", c: \"wide shot\" },\n { n: `Hunters shout warnings as ${mc} nears the glowing gate.`,\n s: `The protagonist strides forward as hunters grab at his arm and shout, the towering gate flaring behind him.`,\n e: \"city street at dusk, a massive glowing portal, swirling energy, scattered onlookers\",\n m: \"mysterious\", c: \"low angle\" },\n { n: `A beast lunges; ${mc} dives aside, barely dodging its claws.`,\n s: `The protagonist dives and rolls as a monstrous beast's claws slash past his head, dust exploding behind him.`,\n e: \"cramped dungeon tunnel, jagged rocks, dust and debris flying\",\n m: \"tense\", c: \"action shot, motion blur\" },\n { n: `A system window flashes; the beast lunges again, jaws snapping.`,\n s: `A glowing blue system window flashes before the protagonist mid-roll as the wounded beast lunges again, jaws snapping shut inches from his face.`,\n e: \"cramped dungeon tunnel, jagged rocks, dust and debris flying\",\n m: \"desperate\", c: \"close-up, dynamic angle\" },\n { n: `The beast's torn hide peels back to reveal a goblin chief.`,\n s: `The protagonist grabs a fallen blade and counters as the beast's torn hide peels back to reveal a snarling goblin chief beneath.`,\n e: \"cramped dungeon tunnel, jagged rocks, glowing monster eyes in the dark\",\n m: \"violent\", c: \"over-the-shoulder, impact frame\" },\n { n: `${mc} raises his hand; shadow soldiers surge to swarm the enemy.`,\n s: `The protagonist thrusts out his palm as shadow soldiers erupt from the ground and charge the enemy ranks around him.`,\n e: \"open battlefield at night, ranks of dark silhouettes, pale moonlight\",\n m: \"epic\", c: \"drone shot\" },\n { n: `A Monarch's fist smashes; ${mc} blocks it with his blade.`,\n s: `The protagonist braces his sword overhead as a colossal Monarch's fist crashes down, shockwave rippling outward.`,\n e: \"burning city, smoke columns, debris, a colossal dark figure\",\n m: \"menacing\", c: \"high angle, impact frame\" },\n { n: `${mc} shields a falling civilian as debris rains down.`,\n s: `The protagonist throws himself over a terrified civilian, raising a barrier as rubble and fire rain down on them.`,\n e: \"city street, panicking crowd, a colossal rift in the clouds\",\n m: \"desperate\", c: \"overhead shot\" },\n { n: `Hunters level weapons at ${mc}; he faces them down.`,\n s: `The protagonist stands firm as armed hunters circle and level weapons at him, their eyes wide with fear and anger.`,\n e: \"government plaza, armored vehicles, flashing lights, tense crowd\",\n m: \"foreboding\", c: \"reaction shot\" },\n { n: `${mc} and his shadow army charge the Monarch's forces.`,\n s: `The protagonist charges forward, sword raised, his shadow soldiers surging beside him into the Monarch's army.`,\n e: \"ash-covered battlefield, banners torn, storm clouds, distant army\",\n m: \"violent\", c: \"POV, charging action\" },\n { n: `${mc} trades blow for blow with the Monarch, energy bursting.`,\n s: `The protagonist and the Monarch clash mid-air, blades and power colliding in a blinding burst of energy.`,\n e: \"shattered battlefield, arcs of purple energy, storm-lit sky\",\n m: \"triumphant\", c: \"low angle, action impact\" },\n { n: `${mc} stands over the fallen Monarch, the city saved.`,\n s: `The protagonist stands over the defeated Monarch, sword lowered, as allies gather and the city lights flicker back on.`,\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.\nconst LLM_CHUNK = 25; // story is written in chunks so huge panel counts fit max_tokens\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 url = base.replace(/\\/+$/, \"\") + \"/chat/completions\";\n const RULES = \"Rules: never use past tense (no was/were/had/awakened). Every NARRATION is 8-12 words. Every SCENE is a DYNAMIC ACTION scene: the protagonist CLASHES, dodges, blocks, shields, or reacts against another character (enemy, ally, or crowd) — NEVER a static standing pose; always two characters interacting and one clear action. Draw exactly ONE protagonist in the frame. No preamble, no closing note.\";\n const out = [];\n for (let start = 0; start < count; start += LLM_CHUNK) {\n const n = Math.min(LLM_CHUNK, count - start);\n const range = n === 1 ? `panel ${start + 1}` : `panels ${start + 1} to ${start + n}`;\n const sys = \"You are an award-winning manhwa screenwriter. Write \" + range +\n \" of a \" + count + \"-panel RISING STORY ARC (opening hook, escalating stakes, cliffhanger ending). For EACH panel output a strict block numbered from \" + (start + 1) + \":\\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 +\n (feedback ? \"\\n\\nYour previous attempt was REJECTED. Keep these corrections in mind:\\n\" + feedback : \"\");\n const user = `MC: ${mc}\\nPower: ${power}\\nGoal: ${goal}\\nWorld: ${world}\\n\\nWrite ${range} (numbered ${start + 1} to ${start + n}, of ${count} total).`;\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: Math.max(1200, n * 140) }),\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 out.push(...parseScenes(content, n));\n }\n return out; // exactly `count` scenes\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 scenes = enforceEmotionalArc(scenes); // auto-correct any emotional regression (>2pt drop)\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 char = characterBlock().trim().replace(/\\.[ \\t]*$/, \"\"); // strip trailing period\n const art = artStyleFor();\n const camera = sc.camera || CAMERAS[i % CAMERAS.length];\n const mood = sc.mood || \"cinematic\";\n const scene = (sc.scene || sc.text || \"\").trim();\n const envLock = $(\"envLock\") ? $(\"envLock\").value.trim() : \"\";\n const env = [envLock, sc.env].filter(Boolean).join(\", \");\n\n // SCENE FIRST, then the \"no distortion / single panel\" guard rails right\n // after it. The old version put the scene in the middle of a ~900-char mega\n // prompt, and the backend truncated the anti-distortion + single-panel rules\n // off the end — that's why panels came out off-script and distorted. Keeping\n // it lean means nothing important gets cut.\n return [\n `${scene}${env ? \", \" + env : \"\"}.`,\n `Character: ${char}.`,\n `${mood} mood, ${camera}.`,\n `Style: ${art}.`,\n \"Single isolated panel. Frame one protagonist only. Strictly good anatomy: no extra fingers, no deformed or duplicated face, no twisted limbs or warped body. No text, no speech bubbles, no comic grid, no watermark, no collage.\",\n ].join(\" \");\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(), hordeKey: $(\"hordeKey\").value.trim(), llmKey: $(\"llmKey\").value.trim(), llmBase: $(\"llmBase\").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() + Math.max(12 * 60 * 1000, count * 10 * 1000); // poll up to 12 min, more for large jobs\n let st = null;\n let idleSince = Date.now();\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 let changed = false;\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]); changed = true; }\n }\n if (changed) idleSince = Date.now();\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 // If nothing has changed in the last 60s, the job may be wedged — keep\n // polling anyway since the server auto-retries dropped panels.\n if (Date.now() - idleSince > 60 * 1000) idleSince = Date.now();\n }\n if (!st || !st.done) {\n setStatus(\"Still generating — the server auto-retries dropped panels, so wait a bit longer or reload. 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() || artModelLabel()));\n lines.push(\" GLOBAL PRINCIPLE: \" + (modelPrinciple() || \"(none — scene defaults)\"));\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() || artModelLabel()));\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\nasync function buildVideo(narrationUrls) {\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 // Decode every narration voice FIRST so each panel is sized to fit its own\n // voice (fixes voices overlapping into the next panel) and so we can fade\n // smooth transitions between voices.\n const buffers = [];\n for (const url of narrationUrls) {\n let buf = null;\n if (url) {\n try {\n const ab = await fetch(url).then(r => r.arrayBuffer());\n buf = await ac.decodeAudioData(ab);\n } catch (e) { /* skip */ }\n }\n buffers.push(buf);\n }\n\n // Panel duration = max(secPerPanel, voice length + 0.6s gap) so a voice\n // always finishes before the next panel's voice starts — no overlap.\n const secs = panels.map((_, i) => {\n const d = buffers[i] ? buffers[i].duration : 0;\n return Math.max(secPerPanel(), d + 0.6);\n });\n const totalSec = secs.reduce((a, b) => a + b, 0);\n const totalMs = totalSec * 1000;\n\n // Schedule each voice with a fade-in and fade-out so the transition between\n // one narration and the next is smooth, never a hard cut or overlap.\n let t = ac.currentTime + 0.1;\n let scheduledAny = false;\n for (let i = 0; i < buffers.length; i++) {\n if (buffers[i]) {\n const src = ac.createBufferSource();\n src.buffer = buffers[i];\n const gain = ac.createGain();\n const dur = buffers[i].duration;\n gain.gain.setValueAtTime(0, t);\n gain.gain.linearRampToValueAtTime(1, t + 0.08); // fade in\n gain.gain.setValueAtTime(1, t + Math.max(0, dur - 0.3)); // hold\n gain.gain.linearRampToValueAtTime(0, t + dur); // fade out\n src.connect(gain); gain.connect(dest);\n src.start(t);\n scheduledAny = true;\n }\n t += secs[i];\n }\n\n return new Promise((resolve, reject) => {\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 // Thumbnail hook = 1-2 words ONLY (the MC name), never the full goal line —\n // cluttered text kills CTR on mobile. Face should dominate ~40% of the frame.\n const hookWords = ($(\"metaTitle\").value || $(\"mc\").value || \"RECAP\").split(\" — \")[0].split(\" \").slice(0, 2).join(\" \");\n const title = (hookWords || \"RECAP\").slice(0, 14).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 // Anti-repetition: the bottom label is this video's unique hook (the goal /\n // second half of the title) instead of the same \"FULL RECAP\" on every video,\n // so the channel list never looks copy-pasted.\n const hook = ($(\"metaTitle\").value || \"\").split(\" — \")[1] || \"FULL RECAP\";\n x.font = `800 ${Math.floor(W / 16)}px Arial Black, system-ui, sans-serif`;\n x.fillStyle = \"#ffe14d\"; x.fillText(hook.slice(0, 18).toUpperCase(), 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 = artStyleFor();\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 principle = modelPrinciple();\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 principle,\n \"Hook title text \\\"\" + hook + \"\\\" rendered huge and bold in the dark negative space; no extra text, no clutter.\",\n ].filter(Boolean).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(\" GLOBAL PRINCIPLE: \" + (principle || \"(none)\"));\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\n// =====================================================================\n// SCRIPT MICRO ANALYSIS — emotional linearity + originality\n// Breaks the script down per panel into micro-emotions, traces the\n// emotional ARC across the video (should build linearly to a climax),\n// flags repetition / flat spots, and saves it all to a text file.\n// =====================================================================\nconst EMOTION_MAP = {\n somber: [\"resentful\", 2],\n mysterious: [\"awed\", 3],\n tense: [\"fearful\", 4],\n desperate: [\"fearful\", 5],\n violent: [\"furious\", 7],\n menacing: [\"threatened\", 6],\n foreboding: [\"dreadful\", 6],\n epic: [\"empowered\", 8],\n triumphant: [\"exultant\", 9],\n \"awe-inspiring\": [\"transcendent\", 10],\n};\nfunction emotionOf(mood) {\n const m = (mood || \"\").toLowerCase().trim();\n return EMOTION_MAP[m] || [\"engaged\", 5];\n}\n\n// Moods ordered by intensity, used to auto-lift a panel that drops too hard.\nconst MOOD_BY_INTENSITY = [\n [\"somber\", 2], [\"mysterious\", 3], [\"tense\", 4], [\"desperate\", 5],\n [\"foreboding\", 6], [\"menacing\", 6], [\"violent\", 7], [\"epic\", 8],\n [\"triumphant\", 9], [\"awe-inspiring\", 10],\n];\n\n// ENFORCE the emotional arc: no panel may drop more than 2 intensity points\n// from the one before it. If one does, lift its mood to keep the line rising\n// (the blueprint's \"No drop of more than 2 points between panels\" rule).\nfunction enforceEmotionalArc(scenes) {\n const out = scenes.map(s => ({ ...s }));\n for (let i = 1; i < out.length; i++) {\n const prev = emotionOf(out[i - 1].mood)[1];\n const cur = emotionOf(out[i].mood)[1];\n if (cur < prev - 2) {\n const target = Math.max(1, prev - 1);\n const m = MOOD_BY_INTENSITY.find(x => x[1] === target) || MOOD_BY_INTENSITY[target - 1] || [\"tense\", 4];\n out[i].mood = m[0];\n }\n }\n return out;\n}\n\nfunction downloadScriptMicroAnalysis() {\n if (!panels.length) { setStatus(\"Write a story first, then get the Script Micro Analysis.\", \"warn\"); return; }\n\n const lines = [];\n lines.push(\"MANHWA RECAP ROBOT — SCRIPT MICRO ANALYSIS (emotional linearity + originality)\");\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: \" + panels.length + \" · Script style: \" + $(\"scriptStyle\").value);\n lines.push(\"\");\n\n // Per-panel micro-emotion breakdown.\n lines.push(\"PER-PANEL MICRO-EMOTION\");\n lines.push(\"-----------------------\");\n const arc = [];\n panels.forEach((p, i) => {\n const t = (narration[i] && narration[i].text) || \"\";\n const [emotion, intensity] = emotionOf(p.mood);\n arc.push(intensity);\n const bar = \"█\".repeat(intensity) + \"░\".repeat(10 - intensity);\n lines.push(\"\");\n lines.push(\"PANEL \" + (i + 1) + \" · \" + emotion.toUpperCase() + \" [\" + intensity + \"/10] \" + bar);\n lines.push(\" NARRATION: \" + t);\n lines.push(\" SCENE: \" + (p.scene || t));\n lines.push(\" MOOD: \" + (p.mood || \"cinematic\"));\n });\n\n // Emotional linearity / arc analysis.\n lines.push(\"\");\n lines.push(\"EMOTIONAL ARC (linearity)\");\n lines.push(\"------------------------\");\n lines.push(\" Intensity curve: \" + arc.join(\" → \"));\n const first = arc[0], last = arc[arc.length - 1];\n const peak = Math.max.apply(null, arc);\n const peakIdx = arc.indexOf(peak) + 1;\n lines.push(\" Start: \" + first + \"/10 · Peak: \" + peak + \"/10 (Panel \" + peakIdx + \") · End: \" + last + \"/10\");\n lines.push(\" Direction: \" + (last > first ? \"RISING (builds to a payoff — good for retention)\" : last < first ? \"FALLING (ends weaker than it starts — weak hook)\" : \"FLAT (no emotional growth)\"));\n if (peakIdx === arc.length) lines.push(\" Climax lands on the FINAL panel — ideal cliffhanger pacing.\");\n else if (peakIdx < arc.length - 1) lines.push(\" ⚠️ Peak is at Panel \" + peakIdx + \" — the ending drops off after the climax; consider a stronger final beat.\");\n\n // Flag sudden emotional regressions (drops > 2) that break linearity.\n const regressions = [];\n for (let i = 1; i < arc.length; i++) {\n if (arc[i] < arc[i - 1] - 2) regressions.push(\"Panel \" + (i + 1) + \" drops \" + (arc[i - 1] - arc[i]) + \" pts after Panel \" + i);\n }\n if (regressions.length) {\n lines.push(\" ⚠️ Sudden regressions (break linear flow):\");\n regressions.forEach(r => lines.push(\" - \" + r));\n } else {\n lines.push(\" ✅ No sudden emotional regressions — the arc flows linearly.\");\n }\n\n // Originality / repetition checks.\n lines.push(\"\");\n lines.push(\"ORIGINALITY & REPETITION CHECK\");\n lines.push(\"------------------------------\");\n const texts = narration.map(n => (n.text || \"\").toLowerCase().trim());\n const seen = new Map();\n const dupes = [];\n texts.forEach((t, i) => {\n if (!t) return;\n if (seen.has(t)) dupes.push(\"Panel \" + (i + 1) + \" repeats Panel \" + (seen.get(t) + 1) + \" verbatim\");\n else seen.set(t, i);\n });\n if (dupes.length) { lines.push(\" ⚠️ Duplicate narration lines:\"); dupes.forEach(d => lines.push(\" - \" + d)); }\n else lines.push(\" ✅ No verbatim repeated narration lines.\");\n\n const flat = arc.filter(v => v === arc[0]).length;\n if (flat >= arc.length - 1) lines.push(\" ⚠️ Emotion barely changes across panels — reads as flat/generic. Vary the stakes per panel.\");\n else lines.push(\" ✅ Emotion varies across panels — reads as a produced narrative, not batch-spam.\");\n\n const uniqueWords = new Set(texts.join(\" \").split(/\\s+/).filter(Boolean));\n lines.push(\" Unique words in narration: \" + uniqueWords.size + \" (higher = more original phrasing).\");\n lines.push(\"\");\n\n lines.push(\"HOW TO IMPROVE THE EMOTIONAL LINE\");\n lines.push(\"---------------------------------\");\n lines.push(\" - Keep the intensity curve mostly rising; end on the peak or a cliffhanger.\");\n lines.push(\" - No panel should drop more than ~2 intensity points from the one before it.\");\n lines.push(\" - Vary the emotion (fear → fury → empowerment → transcendence), don't stay flat.\");\n lines.push(\" - Never repeat a narration line verbatim — rephrase or advance the action.\");\n\n downloadText(\"manhwa-script-micro-analysis.txt\", lines.join(\"\\n\"));\n setStatus(\"Script micro analysis saved — emotional arc + originality report ready.\", \"warn\");\n}\n",[123],"d26380e317fbd6427fb94c78fb3c1c37d45c3e444afdc4b35e1fcef818d6ea4f","bcdd3935-934f-4d91-a650-8f7fdd654a93","01a016ca-0ae9-7248-a934-621fee5ed3f4",["D",1787088885694],"\"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// =====================================================================\n// Gender-by-name: maps known manhwa character names to gender so the\n// generated art ALWAYS matches the character (no more \"labels a man,\n// draws a woman\"). Add any character you recap here.\nconst CHARACTER_GENDERS = {\n \"sung jin-woo\": \"male\", \"sung jinwoo\": \"male\", \"jin-woo\": \"male\", \"jinwoo\": \"male\",\n \"suho\": \"male\", \"suho kim\": \"male\",\n \"cha hae-in\": \"female\", \"hae-in\": \"female\",\n \"jinah\": \"female\", \"sung jinah\": \"female\",\n \"esil\": \"female\",\n \"igris\": \"male\", \"beru\": \"male\", \"ashborn\": \"male\", \"antares\": \"male\",\n \"go gun-hee\": \"male\", \"baek yoonho\": \"male\", \"woo jin-chul\": \"male\", \"choi jong-in\": \"male\",\n \"lloyd\": \"male\", \"lloyd frontera\": \"male\", \"javier\": \"male\",\n};\nfunction genderOf(name) {\n const n = (name || \"\").toLowerCase().trim();\n if (CHARACTER_GENDERS[n]) return CHARACTER_GENDERS[n];\n // Heuristic fallback for Korean names not in the table.\n const last = n.split(/[\\s-]+/).pop() || \"\";\n if (/(ah|a|e|eo|yeo|i|y|na|ra|mi|jin|sun|soo|hee|in)$/.test(last)) return \"female\";\n return \"male\";\n}\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 const g = genderOf(mc);\n const n = mc.toLowerCase();\n // Canonical default for the Solo Leveling protagonist — a clearly MALE\n // Shadow Monarch, so the thumbnail/panels never render him as a woman.\n if (/(jin-?woo|sung jin)/.test(n)) {\n return \"The same protagonist: a MALE young man with a sharp masculine jawline and defined brow, short spiky black hair, sharp dark eyes that glow pale violet, wearing sleek black-and-navy Shadow Monarch armor with glowing purple energy and a dark ethereal aura. NOT female, NOT androgynous.\";\n }\n // Gender-correct default for every other character.\n const gdesc = g === \"female\"\n ? \"a FEMALE young woman with graceful feminine features and longer hair\"\n : \"a MALE young man with a clearly masculine face, chiseled jawline, broad shoulders and short masculine hair. NOT female, NOT androgynous\";\n return `The same protagonist: ${gdesc} named ${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// Pacing / continuity rule: each panel must be a DIRECT consequence of the\n// one before it — same enemy, same location, same ongoing action until the\n// scene resolves. No unexplained teleports or enemies appearing out of nowhere.\nconst TRANSITION_RULE = \"Continuity: this panel is a direct consequence of the previous one — keep the same enemy, same location and same ongoing action until the scene resolves. No unexplained location or enemy changes without a bridging beat.\";\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// GLOBAL MODEL PRINCIPLE — a style \"outline\" that applies to EVERY panel\n// and the thumbnail. Choose one standout look and hold it across the whole\n// video so every frame is unmistakably consistent (the blueprint's #1 rule,\n// taken further). Add a principle per model; active when that model is picked.\n// =====================================================================\nconst MODEL_PRINCIPLES = {\n \"Comic-Diffusion\":\n \"Comic-Diffusion Principle (applies to ALL panels): one shared webtoon outline language — bold black ink contour lines, clean black-and-white halftone shading, dramatic comic panel composition, strong contrast, decisive exaggerated expressions, zero clutter or background noise.\",\n \"Anything v5\":\n \"Anime Principle (applies to ALL panels): one shared clean cel-anime look — crisp linework, bright saturated colors, expressive eyes, clean flat backgrounds, consistent character model everywhere.\",\n \"MeinaMix\":\n \"Clean-Anime Principle (applies to ALL panels): one shared soft cel-anime look — smooth shading, clear bright palette, tidy composition, consistent character model everywhere.\",\n \"Dreamshaper\":\n \"Cinematic Principle (applies to ALL panels): one shared cinematic 3D-animated look — filmic lighting, ray-traced detail, consistent character model and world across every frame.\",\n};\n\n// Returns the global principle for the currently selected model (or \"\" if none).\nfunction modelPrinciple() {\n const m = ($(\"model\") && $(\"model\").value.trim()) || \"\";\n return MODEL_PRINCIPLES[m] || \"\";\n}\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 // ACTION + INTERACTION beats: every panel is a dynamic scene where the MC\n // clashes, dodges, shields, or reacts against another character — never a\n // static solo pose. Narrations stay 8-12 words + one action so the strict\n // validator keeps them (no generic fallback).\n return [\n { n: `${mc} stands tense as elite hunters sneer and mock him.`,\n s: `The protagonist stands tense as elite hunters shove past and sneer, one pointing and laughing in his face.`,\n e: \"modern hunter guild hall, glass walls, holographic rank displays, cold blue lighting\",\n m: \"somber\", c: \"wide shot\" },\n { n: `Hunters shout warnings as ${mc} nears the glowing gate.`,\n s: `The protagonist strides forward as hunters grab at his arm and shout, the towering gate flaring behind him.`,\n e: \"city street at dusk, a massive glowing portal, swirling energy, scattered onlookers\",\n m: \"mysterious\", c: \"low angle\" },\n { n: `A beast lunges; ${mc} dives aside, barely dodging its claws.`,\n s: `The protagonist dives and rolls as a monstrous beast's claws slash past his head, dust exploding behind him.`,\n e: \"cramped dungeon tunnel, jagged rocks, dust and debris flying\",\n m: \"tense\", c: \"action shot, motion blur\" },\n { n: `A system window flashes; the beast lunges again, jaws snapping.`,\n s: `A glowing blue system window flashes before the protagonist mid-roll as the wounded beast lunges again, jaws snapping shut inches from his face.`,\n e: \"cramped dungeon tunnel, jagged rocks, dust and debris flying\",\n m: \"desperate\", c: \"close-up, dynamic angle\" },\n { n: `The beast's torn hide peels back to reveal a goblin chief.`,\n s: `The protagonist grabs a fallen blade and counters as the beast's torn hide peels back to reveal a snarling goblin chief beneath.`,\n e: \"cramped dungeon tunnel, jagged rocks, glowing monster eyes in the dark\",\n m: \"violent\", c: \"over-the-shoulder, impact frame\" },\n { n: `${mc} raises his hand; shadow soldiers surge to swarm the enemy.`,\n s: `The protagonist thrusts out his palm as shadow soldiers erupt from the ground and charge the enemy ranks around him.`,\n e: \"open battlefield at night, ranks of dark silhouettes, pale moonlight\",\n m: \"epic\", c: \"drone shot\" },\n { n: `A Monarch's fist smashes; ${mc} blocks it with his blade.`,\n s: `The protagonist braces his sword overhead as a colossal Monarch's fist crashes down, shockwave rippling outward.`,\n e: \"burning city, smoke columns, debris, a colossal dark figure\",\n m: \"menacing\", c: \"high angle, impact frame\" },\n { n: `${mc} shields a falling civilian as debris rains down.`,\n s: `The protagonist throws himself over a terrified civilian, raising a barrier as rubble and fire rain down on them.`,\n e: \"city street, panicking crowd, a colossal rift in the clouds\",\n m: \"desperate\", c: \"overhead shot\" },\n { n: `Hunters level weapons at ${mc}; he faces them down.`,\n s: `The protagonist stands firm as armed hunters circle and level weapons at him, their eyes wide with fear and anger.`,\n e: \"government plaza, armored vehicles, flashing lights, tense crowd\",\n m: \"foreboding\", c: \"reaction shot\" },\n { n: `${mc} and his shadow army charge the Monarch's forces.`,\n s: `The protagonist charges forward, sword raised, his shadow soldiers surging beside him into the Monarch's army.`,\n e: \"ash-covered battlefield, banners torn, storm clouds, distant army\",\n m: \"violent\", c: \"POV, charging action\" },\n { n: `${mc} trades blow for blow with the Monarch, energy bursting.`,\n s: `The protagonist and the Monarch clash mid-air, blades and power colliding in a blinding burst of energy.`,\n e: \"shattered battlefield, arcs of purple energy, storm-lit sky\",\n m: \"triumphant\", c: \"low angle, action impact\" },\n { n: `${mc} stands over the fallen Monarch, the city saved.`,\n s: `The protagonist stands over the defeated Monarch, sword lowered, as allies gather and the city lights flicker back on.`,\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 a DYNAMIC ACTION scene: the protagonist CLASHES, dodges, blocks, shields, or reacts against another character (enemy, ally, or crowd) — NEVER a static standing pose; always two characters interacting and one clear action. Draw exactly ONE protagonist in the frame. 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 scenes = enforceEmotionalArc(scenes); // auto-correct any emotional regression (>2pt drop)\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 char = characterBlock().trim().replace(/\\.[ \\t]*$/, \"\"); // strip trailing period\n const art = artStyleFor();\n const camera = sc.camera || CAMERAS[i % CAMERAS.length];\n const mood = sc.mood || \"cinematic\";\n const scene = (sc.scene || sc.text || \"\").trim();\n const envLock = $(\"envLock\") ? $(\"envLock\").value.trim() : \"\";\n const env = [envLock, sc.env].filter(Boolean).join(\", \");\n\n // SCENE FIRST, then the \"no distortion / single panel\" guard rails right\n // after it. The old version put the scene in the middle of a ~900-char mega\n // prompt, and the backend truncated the anti-distortion + single-panel rules\n // off the end — that's why panels came out off-script and distorted. Keeping\n // it lean means nothing important gets cut.\n return [\n `${scene}${env ? \", \" + env : \"\"}.`,\n `Character: ${char}.`,\n `${mood} mood, ${camera}.`,\n `Style: ${art}.`,\n \"Single isolated panel. Frame one protagonist only. Strictly good anatomy: no extra fingers, no deformed or duplicated face, no twisted limbs or warped body. No text, no speech bubbles, no comic grid, no watermark, no collage.\",\n ].join(\" \");\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() + 12 * 60 * 1000; // keep polling up to 12 min (auto-retries handle dropped panels)\n let st = null;\n let idleSince = Date.now();\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 let changed = false;\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]); changed = true; }\n }\n if (changed) idleSince = Date.now();\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 // If nothing has changed in the last 60s, the job may be wedged — keep\n // polling anyway since the server auto-retries dropped panels.\n if (Date.now() - idleSince > 60 * 1000) idleSince = Date.now();\n }\n if (!st || !st.done) {\n setStatus(\"Still generating — the server auto-retries dropped panels, so wait a bit longer or reload. 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}

Compare

Mergegreenlandk/mainintopanelprophet/main

app.js+32-22

index.html+3-1

Hmain.ts+95-36