🤖 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",[],[191],"c17653e5-5d39-4d5e-82b1-0076996fe0b9","app.js","01a015c7-94b8-743d-8139-002a54ae64da",["D",1787075174402],20,"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 $(\"styleLock\").value = pick(\"rr.styleLock\", \"\");\n $(\"model\").value = pick(\"rr.model\", \"Dreamshaper\");\n $(\"charLock\").value = pick(\"rr.charLock\", \"\");\n $(\"artLock\").value = pick(\"rr.artLock\", \"\");\n $(\"envLock\").value = pick(\"rr.envLock\", \"\");\n $(\"scriptStyle\").value = pick(\"rr.scriptStyle\", \"punchy\");\n})();\n\nfunction saveKeys() {\n const put = (k, v) => { try { localStorage.setItem(k, v); } catch (e) {} };\n put(\"rr.proxy\", $(\"proxyUrl\").value.trim());\n put(\"rr.murf\", $(\"murfKey\").value.trim());\n put(\"rr.llmKey\", $(\"llmKey\").value.trim());\n put(\"rr.llmBase\", $(\"llmBase\").value.trim());\n put(\"rr.llmModel\", $(\"llmModel\").value.trim());\n put(\"rr.styleLock\", $(\"styleLock\").value.trim());\n put(\"rr.model\", $(\"model\").value.trim());\n put(\"rr.charLock\", $(\"charLock\").value.trim());\n put(\"rr.artLock\", $(\"artLock\").value.trim());\n put(\"rr.envLock\", $(\"envLock\").value.trim());\n put(\"rr.scriptStyle\", $(\"scriptStyle\").value);\n setStatus(\"Settings saved.\", \"warn\");\n}\n\nfunction proxy() { return $(\"proxyUrl\").value.trim() || \"https://tts-proxy.val.run/\"; }\nfunction panelCount() { return Math.max(3, Math.min(12, parseInt($(\"panels\").value) || 5)); }\nfunction secPerPanel() { return Math.max(1, parseInt($(\"secPerPanel\").value) || 6); }\n\nfunction updateEst() {\n const total = panelCount() * secPerPanel();\n $(\"est\").textContent = \"Panels \" + panelCount() + \" · Sec/panel \" + secPerPanel() + \" · Est total \" + fmt(total);\n}\nfunction fmt(s) { const m = Math.floor(s/60), r = s%60; return `${m}m ${r.toString().padStart(2,\"0\")}s`; }\nupdateEst();\n[\"panels\", \"secPerPanel\"].forEach(id => $(id).addEventListener(\"change\", updateEst));\n\nfunction but(btn, busy) { if (btn) btn.disabled = !!busy; }\n\n// =====================================================================\n// STRICT SCRIPTING ENGINE\n// Rules: present-tense active voice · 8-12 words per line ·\n// one action per sentence · no filler/meta-commentary\n// =====================================================================\nconst MIN_WORDS = 8;\nconst MAX_WORDS = 12;\n\nconst PAST_VERBS = /\\b(was|were|had|did|went|became|awakened|realized|realised|felt|said|told|saw|came|made|took|got|grew|began|started|fought|knew|left|walked|ran|stopped|looked|returned|chose|found|held|kept|thought|won|gave|lost|swung|wrote|read|heard|spoke|showed)\\b/i;\nconst PASSIVE_BY = /\\b(is|are|was|were|been|being)\\b[^.]*\\bby\\b/i;\nconst FILLER = /\\b(here is|let me|now let|in this story|this is a story|i will|we will|imagine|remember that|basically|so basically|you see)\\b/i;\nconst EXTRA_ACTION = /\\b(and then|, and then|then |while he also|while she|, but |however)\\b/i;\n\nfunction validateLine(line) {\n const issues = [];\n const words = (line || \"\").trim().split(/\\s+/).filter(Boolean);\n const n = words.length;\n if (n < MIN_WORDS) issues.push(`only ${n} words (need ${MIN_WORDS}-${MAX_WORDS})`);\n else if (n > MAX_WORDS) issues.push(`${n} words (need ${MIN_WORDS}-${MAX_WORDS})`);\n if (PAST_VERBS.test(line)) issues.push(\"past tense — use present tense active voice\");\n if (PASSIVE_BY.test(line)) issues.push(\"passive voice (…by…)\");\n if (EXTRA_ACTION.test(line)) issues.push(\"more than one action — split it\");\n if (FILLER.test(line)) issues.push(\"filler / meta-commentary\");\n return { ok: issues.length === 0, words: n, issues };\n}\nfunction validateAll(lines) { return lines.map(validateLine); }\n\nfunction renderValidation(lines) {\n const el = $(\"validatorNote\");\n if (!el) return;\n const res = validateAll(lines);\n const bad = res.filter(r => !r.ok).length;\n el.textContent = bad\n ? `Strict engine: ${bad}/${lines.length} line(s) violate rules (red). Fix the story config or press Write again.`\n : `Strict engine: all ${lines.length} lines pass (8-12 words · present active voice · one action).`;\n el.style.color = bad ? \"#f26d6d\" : \"#7fd38a\";\n}\n\n// =====================================================================\n// BLUEPRINT: CHARACTER CONSISTENCY\n// The #1 secret in the blueprint — the same character in every panel.\n// =====================================================================\nfunction characterBlock() {\n const cl = $(\"charLock\") ? $(\"charLock\").value.trim() : \"\";\n if (cl) return cl;\n const lock = $(\"styleLock\") ? $(\"styleLock\").value.trim() : \"\";\n if (lock) return lock;\n const mc = $(\"mc\").value || \"a young hunter\";\n return `The same protagonist: ${mc}, a fixed character with the same face, hairstyle, skin tone, build and outfit in every panel.`;\n}\nconst CONSISTENCY = \"Maintain the same character design, consistent face, consistent hairstyle, consistent skin tone, same facial structure and same body proportions.\";\n\n// Blueprint camera angles (Chapter 6 / Bonus section).\nconst CAMERAS = [\"wide shot\", \"close-up\", \"medium shot\", \"low angle\", \"over-the-shoulder\",\n \"reaction shot\", \"high angle\", \"side profile\", \"POV\", \"overhead shot\", \"drone shot\", \"cinematic medium shot\"];\n\n// ONE art style for the WHOLE story (the blueprint's #1 rule: never mix\n// styles panel to panel). Change it via the 🎨 Art Style Lock, or the Style\n// box, or the Art Model dropdown.\nconst DEFAULT_STYLE = \"semi-realistic premium 3D animated style inspired by Disney and DreamWorks, expressive eyes, detailed skin textures, cinematic lighting, ray-traced global illumination, Unreal Engine 5 quality, vibrant colours, ultra-sharp details, Netflix animated film quality\";\n\n// =====================================================================\n// ART MODEL -> STYLE MAP\n// Each Art Model dropdown choice must drive the STYLE text in the image\n// prompt too. Without this the dropdown was sent to AI Horde but the\n// prompt always said \"semi-realistic 3D\", so the selected model never\n// truly took effect in the generated look.\n// =====================================================================\nconst ART_MODEL_STYLES = {\n \"Dreamshaper\": \"cinematic Dreamshaper style, semi-realistic premium 3D animated style inspired by Disney and DreamWorks, expressive eyes, detailed skin textures, cinematic lighting, ray-traced global illumination, ultra-sharp details\",\n \"Anything v5\": \"clean anime style, Anything v5, crisp cel-shaded anime art, expressive eyes, vibrant colors, clean linework, detailed\",\n \"Deliberate\": \"semi-realistic painterly style, Deliberate model, refined detailed rendering, cinematic lighting, lifelike textures\",\n \"Realistic Vision\": \"photorealistic style, Realistic Vision model, realistic skin texture, cinematic photography, depth of field, detailed\",\n \"MeinaMix\": \"clean anime style, MeinaMix model, soft cel-anime rendering, bright colors, clean composition, detailed\",\n \"Comic-Diffusion\": \"webtoon / comic ink-line style, Comic-Diffusion model, bold outlines, black-and-white halftone shading, dramatic comic panel framing, high contrast\",\n};\n\n// Full art-style text used inside every image prompt.\nfunction artStyleFor() {\n const al = $(\"artLock\") ? $(\"artLock\").value.trim() : \"\";\n if (al) return al;\n const st = $(\"style\") ? $(\"style\").value.trim() : \"\";\n if (st) return st;\n const m = $(\"model\") ? $(\"model\").value.trim() : \"\";\n return ART_MODEL_STYLES[m] || DEFAULT_STYLE;\n}\n// Short label (the model name) used in the Image Bible / reports.\nfunction artModelLabel() { return ($(\"model\") && $(\"model\").value.trim()) || \"Auto\"; }\n\n// =====================================================================\n// 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: `The system flashes; ${mc} hurls a cracking, desperate punch.`,\n s: `The protagonist drives a punch into a stone pillar, knuckles splitting, as a glowing blue window flickers before him.`,\n e: \"bare stone training chamber, dust in the air, single shaft of light\",\n m: \"desperate\", c: \"close-up, dynamic angle\" },\n { n: `${mc} clashes blades with a goblin chief, sparks flying.`,\n s: `The protagonist locks blades with a snarling goblin chief, sparks bursting where steel meets steel, both straining.`,\n e: \"underground dungeon, 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 storyText = scenes.map(s => s.text).join(\"\\n\\n\");\n // build panels + narration from the story scenes\n panels = [];\n narration = [];\n for (let i = 0; i < count; i++) {\n const sc = scenes[i] || scenes[scenes.length - 1];\n const prompt = promptFor(i, sc);\n panels.push({ prompt, scene: sc.scene, env: sc.env, camera: sc.camera, mood: sc.mood, img: null });\n narration.push({ text: sc.text });\n }\n ready = false;\n $(\"readyBtn\").textContent = \"✅ Ready\";\n $(\"readyBtn\").disabled = false;\n renderStoryboard();\n renderValidation(panels.map(p => narration[panels.indexOf(p)].text));\n renderPreview(true);\n fillMeta();\n setStatus(\"Story written: \" + count + \" panels (\" + ($(\"llmKey\").value.trim() ? \"AI\" : \"template\") + \"). Generate images next.\", \"\");\n } catch (e) {\n setStatus(\"Story error: \" + (e && e.message ? e.message : e), \"err\");\n } finally { but(btn, false); }\n}\n\n// ---- BLUEPRINT: enrich AI-written scenes with micro-detail ----\n// The LLM returns NARRATION+SCENE but not env/mood/camera, so AI-story panel\n// prompts used to come out generic. This backfills each scene's environment,\n// mood and camera from the rising-arc beat templates — so every panel keeps\n// the same cinematic micro-level detail as the offline template.\nfunction enrichScenes(scenes) {\n const beats = buildBeats();\n return scenes.map((sc, i) => {\n const b = beats[i % beats.length];\n return {\n ...sc,\n env: (sc.env || \"\").trim() || b.e,\n mood: (sc.mood || \"\").trim() || b.m,\n camera: (sc.camera || \"\").trim() || b.c,\n };\n });\n}\n\n// ---- BLUEPRINT: build the image prompt from the SCENE ----\n// character consistency + scene (who/what/where) + environment + camera +\n// mood + chosen style + the blueprint's consistency instruction. This is what\n// makes the panel match the story instead of contradicting it.\nfunction promptFor(i, sc) {\n const art = artStyleFor();\n const char = characterBlock().trim().replace(/\\.+$/, \"\"); // strip trailing period\n const envLock = $(\"envLock\") ? $(\"envLock\").value.trim() : \"\";\n const camera = sc.camera || CAMERAS[i % CAMERAS.length];\n const mood = sc.mood || \"cinematic\";\n const scene = sc.scene || sc.text;\n const env = [envLock, sc.env].filter(Boolean).join(\", \");\n 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 return `${char}. ${scene}${env ? \", \" + env : \"\"}. ${mood} mood, ${camera}, ${art}. ${SINGLE_SUBJECT} ${CONSISTENCY}${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 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 const title = ($(\"metaTitle\").value || $(\"mc\").value || \"RECAP\").split(\" — \")[0].slice(0, 22).toUpperCase();\n const g = x.createLinearGradient(0, H * 0.58, 0, H);\n g.addColorStop(0, \"rgba(0,0,0,0)\");\n g.addColorStop(1, \"rgba(0,0,0,.85)\");\n x.fillStyle = g; x.fillRect(0, H * 0.58, W, H * 0.42);\n x.textAlign = \"center\"; x.textBaseline = \"middle\";\n x.shadowColor = \"rgba(0,0,0,.9)\"; x.shadowBlur = Math.floor(W / 40); x.shadowOffsetY = Math.floor(W / 90);\n x.font = `900 ${Math.floor(W / 8)}px Arial Black, system-ui, sans-serif`;\n x.fillStyle = \"#fff\"; x.fillText(title, W / 2, H * 0.70);\n x.shadowBlur = 0; x.shadowOffsetY = 0;\n x.fillStyle = \"#e11\"; x.fillRect(W * 0.30, H * 0.82, W * 0.40, Math.max(4, Math.floor(H / 70)));\n x.font = `800 ${Math.floor(W / 16)}px Arial Black, system-ui, sans-serif`;\n x.fillStyle = \"#ffe14d\"; x.fillText(\"FULL RECAP\", W / 2, H * 0.90);\n\n const a = document.createElement(\"a\");\n a.download = \"thumbnail.png\";\n a.href = c.toDataURL(\"image/png\");\n a.click();\n setStatus(\"High-CTR thumbnail downloaded (best-contrast panel + hook text).\", \"\");\n}\n\nfunction scoreContrast(img) {\n const c = document.createElement(\"canvas\"); c.width = 64; c.height = 64;\n const x = c.getContext(\"2d\");\n try { x.drawImage(img, 0, 0, 64, 64); } catch (e) { return 0; }\n let data;\n try { data = x.getImageData(0, 0, 64, 64).data; } catch (e) { return 0; }\n let sum = 0, sum2 = 0, n = 0;\n for (let i = 0; i < data.length; i += 4) {\n const l = 0.2126 * data[i] + 0.7152 * data[i + 1] + 0.0722 * data[i + 2];\n sum += l; sum2 += l * l; n++;\n }\n const mean = sum / n;\n return Math.sqrt(sum2 / n - mean * mean);\n}\n\nfunction esc(s) { return (s||\"\").replace(/[&<>\"']/g, c => ({\"&\":\"&\",\"<\":\"<\",\">\":\">\",'\"':\""\",\"'\":\"'\"}[c])); }\nfunction sleep(ms) { return new Promise(r => setTimeout(r, ms)); }\n// =====================================================================\n// THUMBNAIL MICRO ANALYSIS — improve the outcome of the thumbnail\n// The thumbnail is the ONE image that decides the click. This report\n// breaks the thumbnail down at a micro level (like the Image Bible) so\n// you can send the highest-signal thumbnail prompt to your image model\n// and keep tracking what works.\n// =====================================================================\nfunction downloadThumbnailMicroAnalysis() {\n if (!panels.length) { setStatus(\"Write a story first, then get the Thumbnail Micro Analysis.\", \"warn\"); return; }\n\n const mc = $(\"mc\").value || \"Sung Jin-Woo\";\n const power = $(\"power\").value || \"rises from the weakest Hunter to a Monarch\";\n const goal = $(\"goal\").value || \"to save humanity from the Monarchs\";\n const world = $(\"world\").value || \"gates linking Earth to dungeons\";\n\n // Hook title = the most clickable beat, capped to the first (short) part.\n const rawTitle = ($(\"metaTitle\").value || mc + \" — \" + goal);\n const hook = rawTitle.split(\" — \")[0].slice(0, 22).toUpperCase();\n\n // Which panel is (or would be) the thumbnail base? Pick the highest-contrast panel.\n let bestIdx = -1, bestScore = -1;\n panels.forEach((p, i) => { if (p.img) { const s = scoreContrast(p.img); if (s > bestScore) { bestScore = s; bestIdx = i; } } });\n if (bestIdx < 0) bestIdx = 0;\n const base = panels[bestIdx];\n const baseStory = (narration[bestIdx] && narration[bestIdx].text) || base.scene || \"\";\n\n const charLockText = ($(\"charLock\").value.trim() ||\n (function(){ try { return characterBlock(); } catch(e){ return \"The protagonist\"; } })());\n const artText = 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",[],[199],["D",1787071796347],[],[18],["D",1787071796347],{"_11":12,"_124":71},{"_11":12,"_119":120,"_70":71,"_30":69,"_121":122,"_123":24},{"_38":108,"_13":16,"_32":35,"_109":73,"_110":62,"_111":63,"_112":77,"_113":114,"_115":116,"_117":14,"_118":12},"ctx",{"_51":-5,"_145":247,"_248":249,"_250":251,"_252":24,"_253":24,"_254":24,"_255":85,"_256":-5,"_257":-7,"_258":-7,"_259":26,"_260":24,"_261":24,"_262":-5,"_263":24,"_264":24,"_265":24,"_266":-5},"ENV",{"_218":219,"_220":221,"_222":16,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246},"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"]

History · README.md