🤖 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",["D",1787071823332],"branchVersion","label",[18],"pulls","branches","forks","envVars",{"_181":26,"_183":26},"connections",{"_181":26,"_182":26},"count","unfilledCount","emptyCount",{"_33":212,"_13":213,"_66":214,"_43":-5,"_35":36,"_171":40,"_191":95,"_37":215,"_39":26,"_68":21,"_168":216,"_69":24,"_172":-5,"_197":217,"_17":218},{"_33":203,"_13":204,"_66":205,"_43":-5,"_35":36,"_171":118,"_191":95,"_37":206,"_39":207,"_68":208,"_168":209,"_69":24,"_172":-5,"_197":210,"_17":211},{"_33":167,"_13":18,"_66":67,"_43":-5,"_35":36,"_171":75,"_191":95,"_37":200,"_39":40,"_68":21,"_168":169,"_69":24,"_172":-5,"_197":201,"_17":202},{"_33":188,"_13":189,"_66":93,"_43":-5,"_35":36,"_171":190,"_191":95,"_37":192,"_39":193,"_68":194,"_168":195,"_69":24,"_172":196,"_197":198,"_17":199},"f2f3c437-8b28-4f2a-899c-8b4ea3dd3c35","main.ts",25,"latest",["D",1787075167558],4,"http","import { staticHTTPServer } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\n\nconst HORDE = \"https://aihorde.net/api/v2\";\nconst JOB_TTL_MS = 2 * 60 * 60 * 1000; // jobs expire after 2h\n// Always-available baseline model used if a pinned model is rejected.\nconst ANON_FALLBACK_MODEL = \"stable_diffusion\";\n// Reduces the classic Stable Diffusion artifacts (extra fingers, text, blur).\nconst NEGATIVE_PROMPT = \"text, watermark, signature, logo, blurry, low quality, deformed, extra fingers, extra limbs, bad anatomy, distorted face, cropped, jpeg artifacts, nsfw, duplicate face, repeated character, clone, doppelganger, multiple identical people, twin, split screen, split panel, multiple copies of the same person, extra people, comic grid, storyboard, collage, multiple panels in one image, single panel layout\";\n\n// AI Horde requires dimensions to be multiples of 64, and the anonymous key is\n// capped at 850x850 (a registered key can go much larger). Scale the requested\n// size down to fit `maxDim` while preserving aspect ratio, then snap to 64.\nfunction fitDims(w: number, h: number, maxDim: number): [number, number] {\n const scale = Math.min(1, maxDim / Math.max(w, h));\n let nw = Math.max(64, Math.round((w * scale) / 64) * 64);\n let nh = Math.max(64, Math.round((h * scale) / 64) * 64);\n while (nw > maxDim) nw -= 64;\n while (nh > maxDim) nh -= 64;\n return [nw, nh];\n}\n\nfunction hordeKey() {\n // `0000000000` is the shared anonymous key; a registered key gets higher priority.\n return Deno.env.get(\"AI_HORDE_KEY\") || \"0000000000\";\n}\n\n// Lookup handler: return a Response for API routes, else defer to the static server.\nasync function api(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname === \"/api/generate\" && req.method === \"POST\") return startJob(req);\n if (url.pathname === \"/api/status\") return jobStatus(url.searchParams.get(\"job\") || \"\");\n return null;\n}\n\nexport default staticHTTPServer(import.meta.url, api);\n\n// ---- ASYNC JOB FLOW (works within the free-tier 1-minute request timeout) ----\n// startJob submits every panel to AI Horde (each submit is a fast HTTP POST)\n// and returns a jobId immediately. The client polls /api/status, which ticks\n// each Horde job forward. No single server request blocks for generation.\n\nasync function startJob(req: Request): Promise {\n try {\n const body = await req.json();\n const prompts: string[] = Array.isArray(body.prompts) ? body.prompts : [];\n const apikey = hordeKey();\n const maxDim = apikey === \"0000000000\" ? 832 : 2048;\n const [width, height] = fitDims(Number(body.width) || 720, Number(body.height) || 1280, maxDim);\n\n const jobId = crypto.randomUUID();\n const items = [];\n const requestedModel = String(body.model || \"\").trim();\n for (const p of prompts) {\n try {\n const hordeId = await submitWithRetry(p, width, height, apikey, requestedModel || undefined);\n items.push({ hordeId, done: false, failed: false, url: null, prompt: p, retried: false });\n } catch (e) {\n console.error(\"Horde submit failed:\", (e && e.message) || e);\n items.push({ hordeId: null, done: false, failed: true, url: null, prompt: p, retried: false });\n }\n // Anonymous AI Horde rate-limits to ~2 submits/sec — pace the loop so\n // the later panels aren't rejected with 429.\n await new Promise((r) => setTimeout(r, 550));\n }\n await blob.setJSON(\"job:\" + jobId, { id: jobId, items, createdAt: Date.now(), width, height, model: requestedModel });\n cleanup(); // fire-and-forget old jobs\n return Response.json({ jobId, count: prompts.length });\n } catch (e) {\n return Response.json({ error: String((e && e.message) || e) }, { status: 500 });\n }\n}\n\nasync function jobStatus(jobId: string): Promise {\n if (!jobId) return Response.json({ error: \"missing job\" }, { status: 400 });\n const job = await blob.getJSON(\"job:\" + jobId).catch(() => null);\n if (!job) return Response.json({ error: \"not found\" }, { status: 404 });\n\n const apikey = hordeKey();\n for (const it of job.items) {\n if (it.done) continue;\n // AUTO-RETRY: a faulted/dropped panel (common on the anonymous tier) is\n // resubmitted once so it still reaches the target panel count.\n if (it.failed) {\n if (it.prompt && !it.retried) {\n it.retried = true; it.failed = false; it.hordeId = null;\n try {\n it.hordeId = await submitWithRetry(it.prompt, job.width || 720, job.height || 1280, apikey, job.model || undefined);\n } catch (e) {\n it.failed = true;\n console.error(\"Panel retry failed:\", (e && e.message) || e);\n }\n }\n continue;\n }\n if (!it.hordeId) continue;\n try {\n const data = await hordeStatus(it.hordeId, apikey);\n if (data && data.done) {\n const img = data.generations && data.generations[0] && data.generations[0].img;\n if (img) {\n // Horde returns raw base64, a data URL, or a signed R2 URL. Always\n // produce a same-origin data URL so the client canvas isn't tainted.\n it.url = img.startsWith(\"data:\") ? img\n : img.startsWith(\"http\") ? await toDataURL(img)\n : \"data:image/jpeg;base64,\" + img;\n }\n it.done = true;\n } else if (data && data.faulted) {\n it.failed = true; // picked up by next poll's auto-retry\n }\n } catch {\n // keep pending; we try again on the next poll\n }\n }\n await blob.setJSON(\"job:\" + jobId, job);\n\n const pending = job.items.filter((i) => !i.done && !i.failed).length;\n const errors = job.items.filter((i) => i.failed).length;\n return Response.json({\n done: pending === 0,\n urls: job.items.map((i) => i.url),\n total: job.items.length,\n pending,\n errors,\n });\n}\n\nasync function hordeSubmit(prompt: string, width: number, height: number, apikey: string, model?: string): Promise {\n const res = await fetch(HORDE + \"/generate/async\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\", apikey },\n body: JSON.stringify({\n prompt,\n params: { width, height, n: 1, steps: 28, cfg_scale: 7, sampler_name: \"k_euler_a\", negative_prompt: NEGATIVE_PROMPT },\n ...(model ? { models: [model] } : {}),\n }),\n });\n if (!res.ok) {\n const txt = await res.text().catch(() => \"\");\n throw new Error(\"Horde async HTTP \" + res.status + (txt ? \" \" + txt.slice(0, 150) : \"\"));\n }\n const data = await res.json();\n if (!data.id) throw new Error(\"Horde returned no job id\");\n return data.id;\n}\n\n// Submit a prompt to AI Horde, handling the anonymous 429 rate limit\n// (retry with a short wait) and falling back to the baseline model if a\n// pinned model is rejected (e.g. needs more kudos than anonymous).\nasync function submitWithRetry(prompt: string, width: number, height: number, apikey: string, model?: string): Promise {\n const attempts = 3;\n for (let a = 0; a < attempts; a++) {\n try {\n return await hordeSubmit(prompt, width, height, apikey, model);\n } catch (e) {\n const msg = String((e && e.message) || e);\n // Rate limit -> wait and retry the same submission.\n if (msg.includes(\"429\")) {\n await new Promise((r) => setTimeout(r, 800));\n continue;\n }\n // Model rejected -> retry once on the always-available baseline.\n if (model && model !== ANON_FALLBACK_MODEL) {\n return await hordeSubmit(prompt, width, height, apikey, ANON_FALLBACK_MODEL);\n }\n throw e;\n }\n }\n throw new Error(\"Horde submit rate-limited after retries\");\n}\n\n// Single status check — called once per /api/status poll. (No blocking loop.)\nasync function hordeStatus(id: string, apikey: string): Promise {\n const res = await fetch(HORDE + \"/generate/status/\" + id, { headers: { apikey } });\n if (!res.ok) throw new Error(\"Horde status HTTP \" + res.status);\n return res.json();\n}\n\n// Fetch a remote image and re-serve it as a base64 data URL (canvas-safe).\nasync function toDataURL(url: string): Promise {\n const res = await fetch(url);\n if (!res.ok) throw new Error(\"image fetch HTTP \" + res.status);\n const mime = res.headers.get(\"content-type\") || \"image/jpeg\";\n const bytes = new Uint8Array(await res.arrayBuffer());\n let bin = \"\";\n const CHUNK = 0x8000;\n for (let i = 0; i < bytes.length; i += CHUNK) {\n bin += String.fromCharCode(...bytes.subarray(i, i + CHUNK));\n }\n return `data:${mime};base64,${btoa(bin)}`;\n}\n\nasync function cleanup() {\n try {\n const entries = await blob.list(\"job:\");\n const cutoff = Date.now() - JOB_TTL_MS;\n for (const e of entries) {\n const lm = new Date(e.lastModified as any).getTime();\n if (lm < cutoff) await blob.delete(e.key);\n }\n } catch {\n // best effort\n }\n}\n","manhwa-recap-robot-42","children",[],[189],["D",1787071823332],[],[18],"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",[],[204],"ea679129-d115-4619-adaf-3a13f9f98927","README.md","01a015c7-94b8-743d-8138-fcc43af5f7bb",["D",1787071796347],"# 🤖 Manhwa Recap Robot\n\nTurn a one-line premise into a complete **AI manhwa recap video**: original story narration → AI Horde images → TTS voice → Ken Burns motion MP4.\n\n**Live:** https://manhwa-recap-robot.val.run/\n\n## Files\n\n| File | Purpose |\n|------|---------|\n| `main.ts` | HTTP server. Serves `index.html`/`app.js` (via `staticHTTPServer`) and the `POST /api/generate` AI Horde image backend. |\n| `index.html` | The app UI. |\n| `app.js` | All client logic — story writing, **strict scripting engine**, image/voice/video compilation. |\n\n## The Strict Scripting Engine\n\nInstead of recapping real manhwa pages, the tool writes an **original story from a premise** and enforces a hard line-level style:\n\n- **Present tense, active voice**\n- **8–12 words per line**\n- **One action per sentence**\n- **No filler or meta-commentary**\n\nHow it's enforced in `app.js`:\n\n- `validateLine(line)` — heuristic validator that returns `{ ok, words, issues[] }`. It **flags** violations (past-tense verbs, passive `…by…`, chained actions, filler phrases) rather than silently rewriting text, since programmatic grammar conversion is unreliable.\n- `renderValidation(lines)` — paints each line in the storyboard green/red with its word count and the exact issue, plus a summary note.\n- `writeStory` — after an LLM call, if **more than ~30% of lines fail** validation, it **retries the LLM up to 2×**, feeding back the precise list of failing lines (\"Line 2 (14w): 14 words…\") so the model corrects itself. One or fewer bad lines is tolerated.\n- `defaultStory()` — the no-key offline fallback. **Fixed bug**: the original returned a hard-coded 5 lines regardless of the panel count, so narration repeated verbatim. It now builds exactly `count` distinct lines via combinatorial slot-filling (`NARR_OPEN` × `NARR_WHERE` × `NARR_THREAT`), validated in place, so 12 panels never repeat.\n\n## Keys\n\nAll keyed services are optional (click **🔑 Keys** in the app and save → stored in your browser's `localStorage`):\n\n- **LLM Key** — any OpenAI-compatible endpoint (`sk-…` from OpenAI/OpenRouter/Groq) for AI story writing.\n- **AI Horde Key** — server-side secret for images. Optional (anonymous works, with lower queue priority). Set the val's `AI_HORDE_KEY` env var.\n- **Murf AI Key** — paid TTS; leave blank to use the free TTS proxy (`tts-proxy`).\n\n## Image backend\n\n`main.ts` generates one image per panel on [AI Horde](https://aihorde.net) as same-origin data URLs (so the canvas is never tainted), polling until done with a 2‑min/panel cap. Every panel shows a canvas placeholder instantly, then real art swaps in as each URL resolves.\n\nNotes on the AI Horde integration (these were the bugs that blocked image generation):\n\n- **Dimensions must be multiples of 64** — the backend snaps them.\n- **An `apikey` header is required on every request** — it defaults to the shared anonymous key `0000000000`.\n- **Anonymous is capped at 850×850** — the backend scales the requested size down to fit while preserving aspect ratio. Setting a registered `AI_HORDE_KEY` lifts the cap to 2048 (full 720p/1080p quality).\n",[],[213],["D",1787071796347],{"_11":12,"_134":72},{"_11":12,"_129":130,"_71":72,"_30":70,"_131":132,"_133":24},{"_39":118,"_13":16,"_33":36,"_119":83,"_120":63,"_121":64,"_122":87,"_123":124,"_125":126,"_127":14,"_128":12},"ctx",{"_52":-5,"_155":256,"_257":258,"_259":260,"_261":24,"_262":24,"_263":24,"_264":95,"_265":-5,"_266":-7,"_267":-7,"_268":26,"_269":24,"_270":24,"_271":-5,"_272":24,"_273":24,"_274":24,"_275":-5},"ENV",{"_227":228,"_229":230,"_231":16,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255},"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 · index.html