|
| 1 | +#!/usr/bin/env node |
| 2 | +/** |
| 3 | + * CodingCat.dev AI Video Storyboard & Script Generator |
| 4 | + * |
| 5 | + * Inspired by: |
| 6 | + * - Better Stack: High-touch, high-pain developer problem solving (costs, downtime, benchmarks). |
| 7 | + * - Cleo Abram: Kinetic visual metaphors, 3-beat narrative arc, fast-paced animations, 10s curiosity hook. |
| 8 | + * |
| 9 | + * Powered by Google Gemini 1.5 Pro (via Google AI / OpenRouter). |
| 10 | + */ |
| 11 | + |
| 12 | +const topic = process.argv.slice(2).join(" "); |
| 13 | + |
| 14 | +if (!topic) { |
| 15 | + console.log(` |
| 16 | +Usage: node scripts/generate-video-storyboard.mjs "<Topic, Repository, or Architecture Problem>" |
| 17 | +
|
| 18 | +Example: |
| 19 | + node scripts/generate-video-storyboard.mjs "Dockerless Serverless GPUs: Cutting AI inference cost by 90% with RunPod Flash" |
| 20 | +`); |
| 21 | + process.exit(1); |
| 22 | +} |
| 23 | + |
| 24 | +const openRouterKey = process.env.OPENROUTER_API_KEY; |
| 25 | + |
| 26 | +if (!openRouterKey) { |
| 27 | + console.error("Error: OPENROUTER_API_KEY environment variable is required."); |
| 28 | + process.exit(1); |
| 29 | +} |
| 30 | + |
| 31 | +const SYSTEM_PROMPT = `You are the Lead Creative Director & Tech Scriptwriter for CodingCat.dev, producing top-tier developer educational videos. |
| 32 | +
|
| 33 | +Your mission is to blend two elite creator playbooks: |
| 34 | +1. THE BETTER STACK CONTENT STRATEGY: |
| 35 | + - Target genuine developer pain, extreme cost optimization, performance benchmarks, and production post-mortems. |
| 36 | + - Ground everything in real metrics, architecture trade-offs, and actionable code. |
| 37 | +2. THE CLEO ABRAM (Huge If True) VISUAL STYLE: |
| 38 | + - THE 10-SECOND HOOK: Start with a surprising contradiction, visual mystery, or bold curiosity question. Never start with "Hey guys, welcome back". |
| 39 | + - 3-BEAT NARRATIVE ARC: |
| 40 | + * Beat 1: The Frustrating Status Quo (Why the standard way is broken/expensive/slow). |
| 41 | + * Beat 2: The Secret Mechanism (Under the hood breakdown using visual metaphors). |
| 42 | + * Beat 3: The Proof & Benchmark ("Huge If True" - The live test, savings, or live demo). |
| 43 | + - DENSE VISUAL CHOREOGRAPHY: Never stay on talking head or a static screen for more than 4-5 seconds. Alternate with: |
| 44 | + * Kinetic isometric server/network diagrams |
| 45 | + * Code punch-ins (highlighting 2-3 key lines, not full files) |
| 46 | + * Side-by-side racing clocks or dollar meters |
| 47 | + * Tactile UI sound effects (foley pops, whooshes, mechanical keyboard clicks) |
| 48 | +
|
| 49 | +OUTPUT FORMAT: |
| 50 | +Generate a complete, ready-to-produce production document in Markdown with the following sections: |
| 51 | +
|
| 52 | +# [Video Title: 3 High-CTR Options] |
| 53 | +
|
| 54 | +## Video Metadata |
| 55 | +- **Target Audience:** |
| 56 | +- **Core Frustration Solved:** |
| 57 | +- **The "North Star" Metric:** (e.g. "$0.03 -> $0.0003 per image", "150ms -> 12ms TTFB") |
| 58 | +- **YouTube Description & Key Moments:** |
| 59 | +
|
| 60 | +## Act 1: The 10-Second Hook (0:00 - 0:30) |
| 61 | +Format as a 2-column table: |
| 62 | +| Timestamp | Visual Director & Animation Notes (Cleo Style) | Spoken Audio / Voiceover | Sound Design (SFX) | |
| 63 | +
|
| 64 | +## Act 2: The Hidden Mechanism & Architecture (0:30 - 3:30) |
| 65 | +Format as a 2-column table with precise animation prompts (e.g., Motion Canvas / Remotion code prompts, isometric SVG descriptions). |
| 66 | +
|
| 67 | +## Act 3: Live Benchmark & The Code (3:30 - 6:00) |
| 68 | +Format as a 2-column table showing code highlights and race/cost comparison. |
| 69 | +
|
| 70 | +## Act 4: The Takeaway & Call to Action (6:00 - 7:00) |
| 71 | +Direct punchy conclusion pointing to the canonical CodingCat.dev article and GitHub repo. |
| 72 | +
|
| 73 | +## Reusable Animation Prompts (For Motion Canvas / Remotion / After Effects) |
| 74 | +Provide 2-3 exact TypeScript or motion graphic prompt specifications that can be fed into Motion Canvas or Remotion to generate the key graphics. |
| 75 | +`; |
| 76 | + |
| 77 | +async function run() { |
| 78 | + console.log(`\n🚀 Generating Cleo-style / Better Stack Storyboard for: "${topic}"\nUsing Gemini 1.5 Pro...\n`); |
| 79 | + |
| 80 | + try { |
| 81 | + const response = await fetch("https://openrouter.ai/api/v1/chat/completions", { |
| 82 | + method: "POST", |
| 83 | + headers: { |
| 84 | + "Authorization": `Bearer ${openRouterKey}`, |
| 85 | + "Content-Type": "application/json", |
| 86 | + "HTTP-Referer": "https://codingcat.dev", |
| 87 | + "X-Title": "CodingCat Video Storyboard Generator", |
| 88 | + }, |
| 89 | + body: JSON.stringify({ |
| 90 | + model: "google/gemini-pro-1.5", |
| 91 | + messages: [ |
| 92 | + { role: "system", content: SYSTEM_PROMPT }, |
| 93 | + { role: "user", content: `Create a complete video storyboard and script for: ${topic}` }, |
| 94 | + ], |
| 95 | + temperature: 0.7, |
| 96 | + }), |
| 97 | + }); |
| 98 | + |
| 99 | + if (!response.ok) { |
| 100 | + const err = await response.text(); |
| 101 | + throw new Error(`OpenRouter API error (${response.status}): ${err}`); |
| 102 | + } |
| 103 | + |
| 104 | + const data = await response.json(); |
| 105 | + const result = data.choices?.[0]?.message?.content; |
| 106 | + |
| 107 | + console.log(result); |
| 108 | + } catch (err) { |
| 109 | + console.error("Generation failed:", err.message); |
| 110 | + process.exit(1); |
| 111 | + } |
| 112 | +} |
| 113 | + |
| 114 | +run(); |
0 commit comments