🤖 Manhwa Recap Robot

Pick images ➜ press Make Video. It slots your panels, writes the story, and renders the video.

\n\n \n

\n \n

Tap this, pick your manhwa images (from your phone gallery / saved files), and they'll be slotted as panels. That's it.

\n\n

\n \n Reads each panel and writes matching narration (needs an LLM key in Advanced → Keys).\n

\n\n

\n \n

Renders every panel with smooth transitions + your story narration, then shows the MP4 below.

\n\n

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

⚙️ Advanced (story, AI images, settings, export)

\n\n \n

🔑 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

AI Comic (auto story + AI images)

Set a premise, then press Auto Make Comic to generate both the story and the AI images automatically.

MC Name

Power

Goal

World

\n Format\n \n

Panels

Sec/panel

\n 🎨 Art Model\n \n

\n 📜 Script Style\n \n

\n Style (optional)\n \n 🎨 Style Lock (fixed character + art style)\n \n

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

\n\n \n

Manual Panels (paste image URLs)

Paste one per line: IMAGE_URL || one-line narration || seconds

\n \n

\n\n \n

Image Look & Tools

\n 1 · Character Lock\n \n 2 · Art Style Lock\n \n 3 · Environment Lock\n \n

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

\n\n \n

Story Metadata

\n Title\n Description\n

Storyboard

Write a story first.

\n\n \n

🧩 Developer

\n \n

\n\n\n\n\n",[140],"aef12f7d-331a-4247-b612-ef0f08156a25","app.js","01a01797-0364-7031-af7e-8040a7620197",38,["D",1787348707213],22,"\"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 panelSecs = []; // per-panel seconds (Manual mode); null = use Sec/panel\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. detailed face, detailed eyes, detailed skin texture.`;\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, countOverride) {\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 = countOverride || 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 if (btn) 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(narration.map(n => n.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 { if (btn) but(btn, false); }\n}\n\n// ---- BLUEPRINT: enrich AI-written scenes with micro-detail ----\n// The LLM returns NARRATION+SCENE but not env/mood/camera, so AI-story panel\n// prompts used to come out generic. This backfills each scene's environment,\n// mood and camera from the rising-arc beat templates — so every panel keeps\n// the same cinematic micro-level detail as the offline template.\nfunction enrichScenes(scenes) {\n const beats = buildBeats();\n return scenes.map((sc, i) => {\n const b = beats[i % beats.length];\n return {\n ...sc,\n env: (sc.env || \"\").trim() || b.e,\n mood: (sc.mood || \"\").trim() || b.m,\n camera: (sc.camera || \"\").trim() || b.c,\n };\n });\n}\n\n// ---- BLUEPRINT: build the image prompt from the SCENE ----\n// character consistency + scene (who/what/where) + environment + camera +\n// mood + chosen style + the blueprint's consistency instruction. This is what\n// makes the panel match the story instead of contradicting it.\nfunction promptFor(i, sc) {\n const art = artStyleFor();\n const char = characterBlock().trim().replace(/\\.+$/, \"\"); // strip trailing period\n const envLock = $(\"envLock\") ? $(\"envLock\").value.trim() : \"\";\n const camera = sc.camera || CAMERAS[i % CAMERAS.length];\n const mood = sc.mood || \"cinematic\";\n const scene = sc.scene || sc.text;\n const env = [envLock, sc.env].filter(Boolean).join(\", \");\n const principle = modelPrinciple();\n const SINGLE_SUBJECT = \"Exactly one protagonist in the frame, in a single panel — never duplicate faces, twin copies, split-panel clones, multiple identical people, comic grids, storyboards, or collages.\";\n // Quality tokens LEAD the prompt (Stable Diffusion reads left→right, so the\n // most important cues carry the most weight). Lighting + face/background\n // detail boosters make the images POP without adding noise.\n const QUALITY = \"masterpiece, best quality, highly detailed, 8k uhd, sharp focus, dramatic cinematic lighting, volumetric lighting, rim light, shallow depth of field, film grain, detailed face, detailed eyes, detailed skin texture, highly detailed environment\";\n return `${QUALITY}, ${char}. ${scene}${env ? \", \" + env : \"\"}. ${mood} mood, ${camera}, ${art}. ${SINGLE_SUBJECT} ${CONSISTENCY} ${TRANSITION_RULE}${principle ? \" \" + principle : \"\"}`;\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}

`).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 pv = (panelSecs && panelSecs[i]) ? Number(panelSecs[i]) : null;\n const d = buffers[i] ? buffers[i].duration : 0;\n const base = (pv && pv > 0) ? pv : secPerPanel();\n return Math.max(base, 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 // Include the audio track ONLY if voice was actually scheduled. Adding an\n // undefined track (when TTS fails for every panel) breaks the MediaRecorder\n // and would stop the video from generating — a real bug.\n const tracks = [videoStream.getVideoTracks()[0]];\n if (scheduledAny) tracks.push(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 = 650;\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 const backdropMap = new Map();\n function backdropFor(img, W, H) {\n if (!img) return null;\n if (backdropMap.has(img)) return backdropMap.get(img);\n const bcv = document.createElement(\"canvas\"); bcv.width = W; bcv.height = H;\n const bx = bcv.getContext(\"2d\");\n bx.filter = \"blur(30px) brightness(0.55) saturate(1.15)\";\n bx.drawImage(img, 0, 0, W, H);\n bx.filter = \"none\";\n backdropMap.set(img, bcv);\n return bcv;\n }\n function drawPanel(ctx, img, p, W, H) {\n if (!img) { ctx.fillStyle = \"#10141a\"; ctx.fillRect(0,0,W,H); return; }\n // Blurred backdrop fills the frame; the FULL image floats on top\n // (contain, never cropped), so the panel is always fully visible on a\n // soft matching background.\n const b = backdropFor(img, W, H);\n if (b) ctx.drawImage(b, 0, 0, W, H);\n const zoom = 1 + 0.05 * p;\n const iw = img.naturalWidth || W, ih = img.naturalHeight || H;\n const s = Math.min(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 // Blurred backdrop fills the frame, then the FULL image is drawn intact\n // (contain, not cover) so nothing is ever cropped off.\n const bcv = document.createElement(\"canvas\"); bcv.width = W; bcv.height = H;\n const bx = bcv.getContext(\"2d\");\n bx.filter = \"blur(26px) brightness(0.65)\"; bx.drawImage(best, 0, 0, W, H); bx.filter = \"none\";\n x.drawImage(bcv, 0, 0);\n const s = Math.min(W / (best.naturalWidth || W), H / (best.naturalHeight || H));\n const dw = (best.naturalWidth || W) * s, dh = (best.naturalHeight || H) * s;\n x.drawImage(best, (W - dw) / 2, (H - dh) / 2, dw, dh);\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// ---- DOWNLOAD FULL SOURCE (export all code for another AI) ----\nasync function downloadSource() {\n const pin = (window.prompt && prompt(\"🔒 Developer PIN (required to export source):\")) || \"\";\n if (!pin) { setStatus(\"Source export cancelled.\", \"\"); return; }\n setStatus(\"Preparing source export…\", \"warn\");\n try {\n const res = await fetch(\"/api/source?pin=\" + encodeURIComponent(pin));\n if (res.status === 401) { setStatus(\"Wrong PIN — source export blocked.\", \"err\"); return; }\n if (!res.ok) throw new Error(\"HTTP \" + res.status);\n const text = await res.text();\n downloadText(\"manhwa-recap-robot-source.txt\", text);\n setStatus(\"Full source code downloaded — paste it into another AI to fix bugs or improve the pipeline.\", \"\");\n } catch (e) {\n setStatus(\"Export error: \" + (e && e.message ? e.message : e), \"err\");\n }\n}\n// ---- MANUAL PANELS (paste your own images, one per line, 1-line narration each) ----\n// Format per line: IMAGE_URL || ONE-LINE narration || optional-seconds\n// Images are proxied to same-origin data URLs so the canvas is never tainted.\nfunction loadImage(src) {\n return new Promise((resolve, reject) => {\n const im = new Image();\n im.decoding = \"async\";\n im.onload = () => resolve(im);\n im.onerror = () => reject(new Error(\"Could not load image\"));\n im.src = src;\n });\n}\n\nasync function loadManualPanels(btn) {\n if (btn) but(btn, true);\n setStatus(\"Loading manual panels…\", \"warn\");\n try {\n const el = $(\"manualPanels\");\n const text = (el ? el.value : \"\") || \"\";\n const lines = text.split(\"\\n\").map(s => s.trim()).filter(Boolean);\n if (!lines.length) { setStatus(\"Paste at least one panel line: IMAGE_URL || narration || seconds\", \"err\"); if (btn) but(btn, false); return; }\n\n const newPanels = [], newNarration = [], newSecs = [];\n for (const line of lines) {\n const parts = line.split(\"||\").map(s => s.trim());\n let url = \"\", narration = \"\", secs = \"\";\n if (parts.length >= 3) { url = parts[0]; narration = parts[1]; secs = parts[2]; }\n else if (parts.length === 2) {\n if (/^(http|data:)/i.test(parts[0])) { url = parts[0]; narration = parts[1]; }\n else { narration = parts[0]; url = parts[1]; }\n } else { url = parts[0]; }\n if (!url) continue;\n\n let dataUrl = url;\n if (/^http/i.test(url)) {\n const r = await fetch(\"/api/img?url=\" + encodeURIComponent(url));\n const j = await r.json().catch(() => null);\n if (j && j.dataUrl) dataUrl = j.dataUrl;\n else { setStatus(\"Could not fetch: \" + url.slice(0, 60), \"err\"); continue; }\n }\n const img = await loadImage(dataUrl);\n newPanels.push({ prompt: dataUrl, img, scene: narration, env: \"\", camera: \"\", mood: \"\" });\n newNarration.push({ text: narration || \"Panel \" + (newPanels.length + 1) });\n const s = parseFloat(secs);\n newSecs.push(isFinite(s) && s > 0 ? s : null);\n }\n\n if (!newPanels.length) { setStatus(\"No panels loaded — check the URLs.\", \"err\"); if (btn) but(btn, false); return; }\n panels = newPanels;\n narration = newNarration;\n panelSecs = newSecs;\n ready = false;\n renderPreview(false);\n renderValidation(narration.map(n => n.text));\n fillMeta();\n setStatus(\"Loaded \" + panels.length + \" manual panels (\" + narration.length + \" narration lines). Set Sec/panel (or per-line seconds) and press Compile.\", \"\");\n } catch (e) {\n setStatus(\"Manual load error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { if (btn) but(btn, false); }\n}\n// ---- GALLERY PICKER: the ➕ button opens the phone/desktop gallery ----\n// Lets you select image files you saved from your website. They are read as\n// local data URLs, so they always load (never blocked, never cut off) and\n// never taint the canvas. Each picked image becomes one panel; the narration\n// line is auto-filled per image. Compare with paste-manual URL path (also fixed\n// to show images intact via the blurred-backdrop renderer).\nfunction pickFromGallery() {\n const input = $(\"galleryInput\");\n if (!input) return;\n input.value = \"\"; // reset so the same file can be picked again\n input.click();\n}\n\nlet gallerySeq = 0;\nasync function onGalleryPicked() {\n const input = $(\"galleryInput\");\n const files = (input && input.files) ? Array.from(input.files) : [];\n if (!files.length) return;\n but(gallerySeq = null, true);\n setStatus(\"Loading \" + files.length + \" gallery image(s)…\", \"warn\");\n const newPanels = [], newNarration = [], newSecs = [];\n for (const f of files) {\n try {\n const dataUrl = await readFileDataUrl(f);\n const img = await loadImage(dataUrl);\n newPanels.push({ prompt: dataUrl, img, scene: \"\", env: \"\", camera: \"\", mood: \"\" });\n newNarration.push({ text: \"\" }); // auto: leave blank; you can add later\n newSecs.push(null); // use global Sec/panel\n } catch (e) {\n setStatus(\"Could not load image \" + f.name + \": \" + (e && e.message ? e.message : e), \"err\");\n }\n }\n if (!newPanels.length) { setStatus(\"No gallery images loaded.\", \"err\"); but(gallerySeq = null, false); return; }\n // AUTO-STORY: write a narration line for every picked panel. If an LLM key\n // is set, the tool LOOKS at each image (vision) and writes a matching line;\n // otherwise it falls back to the built-in rising-arc template.\n try {\n let storyLines;\n if ($(\"llmKey\").value.trim()) {\n storyLines = await visionDescriptions(newPanels);\n } else {\n storyLines = await autoWriteStoryForPanels(newPanels.length);\n }\n newNarration.length = 0;\n for (const s of storyLines) newNarration.push({ text: (s && s.text) || \"Panel \" + (newNarration.length + 1) });\n } catch (e) { /* keep panel-number placeholders on error */ }\n panels = newPanels;\n narration = newNarration;\n panelSecs = newSecs;\n ready = false;\n renderPreview(false);\n renderValidation(narration.map(n => n.text));\n fillMeta();\n setStatus(\"Loaded \" + panels.length + \" panel(s) from your gallery. Add 1 narration line each (or leave blank), then 🎬 Compile Video. Every image shows full (blurred backdrop, never cropped).\", \"\");\n but(gallerySeq = null, false);\n}\n\nfunction readFileDataUrl(file) {\n return new Promise((resolve, reject) => {\n const r = new FileReader();\n r.onload = () => resolve(r.result);\n r.onerror = () => reject(new Error(\"read failed\"));\n r.readAsDataURL(file);\n });\n}\n\n// Wire the file input change once the DOM is ready.\n(function () {\n const gi = $(\"galleryInput\");\n if (gi) gi.addEventListener(\"change\", onGalleryPicked);\n})();\n// ---- AUTO MAKE COMIC: one click does everything ----\n// 1) writes the story automatically (narration + scenes),\n// 2) generates every AI comic panel (AI Horde) automatically,\n// 3) slots each generated panel into the panel grid automatically,\n// so you can go straight to 🎬 Compile Video.\nasync function autoMakeComic(btn) {\n if (btn) but(btn, true);\n setStatus(\"🤖 Auto-making comic: story → images → panel slots…\", \"warn\");\n try {\n await writeStory(null); // auto story (narration per panel)\n await generateImages(null); // auto images + slot into panel grid\n setStatus(\"Comic auto-made: story written, images generated, panels slotted. Press 🎬 Compile Video.\", \"\");\n } catch (e) {\n setStatus(\"Auto comic error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { if (btn) but(btn, false); }\n}\n// ---- AUTO-STORY for a set of panels ----\n// Writes exactly `count` narration lines (one per panel). Uses the LLM when a\n// key is set (fresh, on-arc, unique lines); otherwise the built-in rising-arc\n// blueprint template (cycling beats, regenerating any line that fails the\n// strict validator).\nasync function autoWriteStoryForPanels(count) {\n if ($(\"llmKey\").value.trim()) {\n try {\n const scenes = await callLLM(undefined, count);\n if (scenes && scenes.length) return scenes;\n } catch (e) { /* fall through to template */ }\n }\n const beats = buildBeats();\n const mc = ($(\"mc\") && $(\"mc\").value) || \"Sung Jin-Woo\";\n const out = [];\n for (let i = 0; i < count; i++) {\n const b = beats[i % beats.length];\n let text = b.n;\n if (!validateLine(text).ok) {\n const tight = `${mc} ${[\"fights\",\"leaps\",\"surges\",\"stands\",\"charges\",\"rises\"][i % 6]} into the battle.`;\n if (validateLine(tight).ok) text = tight;\n }\n out.push({ text });\n }\n return out;\n}\n// ---- VISION: read each panel image and write a matching narration line ----\n// Uses the LLM key + a vision-capable model (e.g. gpt-4o / gpt-4o-mini) set in\n// Advanced → Keys. Sends each panel's image and asks for ONE line describing\n// what's happening, in panel order.\nasync function visionDescriptions(panels) {\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 if (!key) throw new Error(\"No LLM key set (Advanced → Keys)\");\n const url = base.replace(/\\/+$/, \"\") + \"/chat/completions\";\n const sys = \"You are a manhwa recap narrator. Look at the panel image and write ONE short narration line (8-12 words, present tense, active voice, one action, no filler, no meta-commentary) describing exactly what is happening in the image. Reply with ONLY the line, nothing else.\";\n const lines = [];\n for (let i = 0; i < panels.length; i++) {\n const p = panels[i];\n if (!p.img) { lines.push({ text: \"Panel \" + (i + 1) }); continue; }\n setStatus(\"Reading panel \" + (i + 1) + \" of \" + panels.length + \"…\", \"warn\");\n const res = await fetch(url, {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\", \"authorization\": \"Bearer \" + key },\n body: JSON.stringify({\n model,\n messages: [\n { role: \"system\", content: sys },\n { role: \"user\", content: [\n { type: \"text\", text: \"Describe this manhwa panel:\" },\n { type: \"image_url\", image_url: { url: p.img.src } }\n ]}\n ],\n temperature: 0.8,\n max_tokens: 60,\n }),\n });\n if (!res.ok) {\n const txt = await res.text().catch(() => \"\");\n throw new Error(\"Vision HTTP \" + res.status + (txt ? \" — \" + txt.slice(0, 150) : \"\"));\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 lines.push({ text: content.trim() || \"Panel \" + (i + 1) });\n }\n return lines;\n}\n\n// Button: re-run vision on the currently loaded panels (after picking images).\nasync function autoScriptFromImages(btn) {\n if (btn) but(btn, true);\n try {\n if (!panels.length) { setStatus(\"Add images first (➕), then run this.\", \"err\"); return; }\n if (!$(\"llmKey\").value.trim()) { setStatus(\"Add an LLM key first (Advanced → Keys) so the tool can read the images.\", \"err\"); return; }\n setStatus(\"Reading each panel and writing the script…\", \"warn\");\n const storyLines = await visionDescriptions(panels);\n narration = storyLines.map(s => ({ text: (s && s.text) || \"Panel \" + (s && s.idx !== undefined ? s.idx + 1 : 1) }));\n renderValidation(narration.map(n => n.text));\n fillMeta();\n setStatus(\"Script written from your images — one line per panel, in order. Press 🎬 Make Video.\", \"\");\n } catch (e) {\n setStatus(\"Vision error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { if (btn) but(btn, false); }\n}\n",[147],"badce7ed-f28d-4bb7-8b42-308c82d79d07","README.md","01a01797-0364-7031-af7e-89ef291b9df2",2,["D",1787102167912],"# 🤖 Manhwa Recap Robot\n\nTurn a one-line premise into a complete **AI manhwa recap video**: original story narration → AI Horde images → TTS voice → Ken Burns motion MP4.\n\n**Live:** https://manhwa-recap-robot.val.run/\n\n## Files\n\n| File | Purpose |\n|------|---------|\n| `main.ts` | HTTP server. Serves `index.html`/`app.js` (via `staticHTTPServer`) and the `POST /api/generate` AI Horde image backend. |\n| `index.html` | The app UI. |\n| `app.js` | All client logic — story writing, **strict scripting engine**, image/voice/video compilation. |\n\n## The Strict Scripting Engine\n\nInstead of recapping real manhwa pages, the tool writes an **original story from a premise** and enforces a hard line-level style:\n\n- **Present tense, active voice**\n- **8–12 words per line**\n- **One action per sentence**\n- **No filler or meta-commentary**\n\nHow it's enforced in `app.js`:\n\n- `validateLine(line)` — heuristic validator that returns `{ ok, words, issues[] }`. It **flags** violations (past-tense verbs, passive `…by…`, chained actions, filler phrases) rather than silently rewriting text, since programmatic grammar conversion is unreliable.\n- `renderValidation(lines)` — paints each line in the storyboard green/red with its word count and the exact issue, plus a summary note.\n- `writeStory` — after an LLM call, if **more than ~30% of lines fail** validation, it **retries the LLM up to 2×**, feeding back the precise list of failing lines (\"Line 2 (14w): 14 words…\") so the model corrects itself. One or fewer bad lines is tolerated.\n- `defaultStory()` — the no-key offline fallback. **Fixed bug**: the original returned a hard-coded 5 lines regardless of the panel count, so narration repeated verbatim. It now builds exactly `count` distinct lines via combinatorial slot-filling (`NARR_OPEN` × `NARR_WHERE` × `NARR_THREAT`), validated in place, so 12 panels never repeat.\n\n## Keys\n\nAll keyed services are optional (click **🔑 Keys** in the app and save → stored in your browser's `localStorage`):\n\n- **LLM Key** — any OpenAI-compatible endpoint (`sk-…` from OpenAI/OpenRouter/Groq) for AI story writing.\n- **AI Horde Key** — server-side secret for images. Optional (anonymous works, with lower queue priority). Set the val's `AI_HORDE_KEY` env var.\n- **Murf AI Key** — paid TTS; leave blank to use the free TTS proxy (`tts-proxy`).\n\n## Image backend\n\n`main.ts` generates one image per panel on [AI Horde](https://aihorde.net) as same-origin data URLs (so the canvas is never tainted), polling until done with a 2‑min/panel cap. Every panel shows a canvas placeholder instantly, then real art swaps in as each URL resolves.\n\nNotes on the AI Horde integration (these were the bugs that blocked image generation):\n\n- **Dimensions must be multiples of 64** — the backend snaps them.\n- **An `apikey` header is required on every request** — it defaults to the shared anonymous key `0000000000`.\n- **Anonymous is capped at 850×850** — the backend scales the requested size down to fit while preserving aspect ratio. Setting a registered `AI_HORDE_KEY` lifts the cap to 2048 (full 720p/1080p quality).\n",[155],"pulls","branches","forks","envVars",{"_168":157,"_170":42},"connections",{"_168":42,"_169":42},"count","unfilledCount","emptyCount",{"_18":154,"_20":155,"_115":156,"_117":-5,"_118":68,"_119":157,"_121":38,"_22":189,"_65":42,"_123":97,"_125":159,"_127":26,"_128":-5,"_177":190,"_86":191},{"_18":146,"_20":147,"_115":148,"_117":-5,"_118":68,"_119":149,"_121":38,"_22":186,"_65":151,"_123":124,"_125":152,"_127":26,"_128":-5,"_177":187,"_86":188},{"_18":139,"_20":140,"_115":141,"_117":-5,"_118":68,"_119":66,"_121":38,"_22":183,"_65":143,"_123":97,"_125":144,"_127":26,"_128":-5,"_177":184,"_86":185},{"_18":130,"_20":131,"_115":36,"_117":-5,"_118":68,"_119":132,"_121":38,"_22":180,"_65":134,"_123":135,"_125":136,"_127":26,"_128":137,"_177":181,"_86":182},{"_18":113,"_20":114,"_115":116,"_117":-5,"_118":68,"_119":120,"_121":38,"_22":176,"_65":42,"_123":124,"_125":126,"_127":26,"_128":-5,"_177":178,"_86":179},["D",1787102155588],"children",[],[114],["D",1787345495158],[],[131],["D",1787348707280],[],[140],["D",1787348707213],[],[147],["D",1787102167912],[],[155],["D",1787101815947],{"_16":17,"_84":80},{"_16":17,"_77":78,"_79":80,"_33":34,"_81":82,"_83":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":21,"_76":17},"ctx",{"_58":-5,"_105":229,"_230":231,"_232":233,"_234":26,"_235":26,"_236":26,"_237":38,"_238":-5,"_239":-7,"_240":-7,"_241":42,"_242":26,"_243":26,"_244":-5,"_245":26,"_246":26,"_247":26,"_248":-5},"ENV",{"_200":201,"_202":203,"_204":67,"_205":206,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Search