voxflow 1.15.0 → 1.15.1

package/lib/commands/picstory-templates.js

@@ -0,0 +1,276 @@
+/**
+ * PicStory visual templates — image prompt builders and LLM system prompts.
+ *
+ * Card-type styles (use structured heading/keyPoints schema):
+ *   sketchnote        — hand-drawn bullet journal cards (default)
+ *   neon_noir         — cyberpunk dark cards with neon glow
+ *   minimal_3d        — soft 3D clay renders on pastel gradients (popular on 小红书)
+ *   chalkboard        — white chalk illustrations on dark green board
+ *
+ * Scene-type styles (use free-form sceneDesc schema):
+ *   photo             — cinematic illustration
+ *   manga_panel       — Japanese manga panels with ink linework
+ *   vintage_newspaper — 1940s broadsheet editorial illustration
+ */
+
+// ─── Resolution map ───────────────────────────────────────────────────────────
+
+const RATIO_CONFIG = {
+  portrait:  { w: 1080, h: 1920, label: '1080×1920 (9:16)' },
+  landscape: { w: 1920, h: 1080, label: '1920×1080 (16:9)' },
+  square:    { w: 1080, h: 1080, label: '1080×1080 (1:1)' },
+};
+
+const VALID_RATIOS = Object.keys(RATIO_CONFIG);
+
+const CARD_STYLES  = new Set(['sketchnote', 'neon_noir', 'minimal_3d', 'chalkboard']);
+const SCENE_STYLES = new Set(['photo', 'manga_panel', 'vintage_newspaper']);
+const VALID_STYLES = [...CARD_STYLES, ...SCENE_STYLES];
+
+const isCardStyle = style => CARD_STYLES.has(style);
+
+// ─── LLM System Prompts ───────────────────────────────────────────────────────
+
+function buildSystemPrompt(style) {
+  if (!isCardStyle(style)) {
+    return [
+      'You are a visual storytelling expert. Generate a picstory script as JSON.',
+      'Return ONLY valid JSON, no markdown fences, no explanation.',
+      'Format:',
+      '{',
+      '  "title": "story title",',
+      '  "scenes": [',
+      '    {',
+      '      "sceneDesc": "detailed visual scene description for AI image generation, no text in image",',
+      '      "narration": "2-3 sentence natural spoken narration (30-70 words)"',
+      '    }',
+      '  ]',
+      '}',
+    ].join('\n');
+  }
+
+  return [
+    'You are a visual sketchnote expert. Generate a picstory script for knowledge card videos.',
+    'Return ONLY valid JSON, no markdown fences, no explanation.',
+    'Format:',
+    '{',
+    '  "title": "video title (concise, punchy)",',
+    '  "scenes": [',
+    '    {',
+    '      "heading": "01 Section heading (8-20 chars, with 01/02/03 prefix)",',
+    '      "keyPoints": ["point A", "point B", "point C"],',
+    '      "subheadings": [',
+    '        { "label": "sublabel", "content": "short description" }',
+    '      ],',
+    '      "summary": "One-line insight or takeaway (20-40 chars)",',
+    '      "narration": "Natural spoken explanation of this card (30-70 words)"',
+    '    }',
+    '  ]',
+    '}',
+    '',
+    'Rules:',
+    '- heading: include "01 ", "02 " prefix; short and punchy',
+    '- keyPoints: 2-4 items, 5-20 chars each, concise actionable phrases',
+    '- subheadings: 0-3 items, optional deeper breakdown',
+    '- summary: memorable insight or quote for the card footer',
+    '- narration: natural speech, explains the card content',
+    '- Use the SAME language as the topic/input text',
+  ].join('\n');
+}
+
+// ─── Card-type Prompt Builders ────────────────────────────────────────────────
+
+function buildSketchnotePrompt(scene, ratio) {
+  const isPortrait = ratio !== 'landscape';
+  const orientation = isPortrait ? 'vertical 9:16 portrait' : 'horizontal 16:9 landscape';
+  const { heading, keyPoints = [], subheadings = [], summary } = scene;
+
+  const contentLines = [];
+  keyPoints.forEach((p, i) => contentLines.push(`  Point ${String(i + 1).padStart(2, '0')}: ${p}`));
+  (subheadings || []).forEach(s => contentLines.push(`  [${s.label}]: ${s.content}`));
+  if (summary) contentLines.push(`  Footer insight: "${summary}"`);
+
+  return [
+    'Create a colorful hand-drawn educational sketchnote card in Japanese stationery / bullet-journal style.',
+    `Orientation: ${orientation}, white or very light warm paper background.`,
+    '',
+    'Card structure (top to bottom):',
+    `  TITLE BOX (top): Bold title text in a rounded colorful border: "${heading}"`,
+    '  CONTENT AREA (middle):',
+    ...contentLines,
+    '',
+    'Visual style requirements:',
+    '  - Colorful marker-pen borders: mix of coral red, sky blue, mint green, warm orange',
+    '  - Hand-drawn look with slight imperfections (not too perfect)',
+    '  - Cute small icons or simple illustrations next to each key point',
+    '  - Hand-drawn arrows or dividers between sections',
+    '  - Slightly decorated borders and doodle elements (stars, dots, small sketches)',
+    '  - Clear, legible text — render ALL text content exactly as provided',
+    "  - Warm, inviting feel — like a student's creative study notes",
+    '',
+    'IMPORTANT: Render all text faithfully in the same language as the content. No watermarks. No extra text.',
+  ].join('\n');
+}
+
+function buildNeonNoirPrompt(scene, ratio) {
+  const orientation = ratio === 'landscape' ? 'horizontal 16:9 landscape' : 'vertical 9:16 portrait';
+  const { heading, keyPoints = [], summary } = scene;
+
+  const contentLines = keyPoints.map(p => `  ★ ${p}`);
+  if (summary) contentLines.push(`  ▸ ${summary}`);
+
+  return [
+    'Create a cyberpunk-style knowledge card with neon glow aesthetic, dark mode.',
+    `Orientation: ${orientation}.`,
+    '',
+    'Card content to render:',
+    `  HEADER: "${heading}"`,
+    ...contentLines,
+    '',
+    'Visual style:',
+    '  - Very dark background (#0a0a0f), atmospheric depth',
+    '  - Neon glow text: header in bright cyan (#00f5ff) or hot magenta (#ff00aa)',
+    '  - Key points in electric purple or lime neon, with glowing bullet icons',
+    '  - Subtle neon grid lines or digital rain texture in background',
+    '  - Glowing neon-lit border frame with corner accent marks',
+    '  - Cinematic HUD display aesthetic, cyberpunk city atmosphere',
+    '  - Footer in dim amber/gold text',
+    '',
+    'IMPORTANT: Render all text faithfully. No watermarks.',
+  ].join('\n');
+}
+
+function buildMinimal3dPrompt(scene, ratio) {
+  const orientation = ratio === 'landscape' ? 'horizontal 16:9 landscape' : 'vertical 9:16 portrait';
+  const { heading, keyPoints = [], summary } = scene;
+
+  const contentLines = keyPoints.map(p => `  • ${p}`);
+  if (summary) contentLines.push(`  ✦ ${summary}`);
+
+  return [
+    'Create a 小红书 / Instagram-style knowledge card with soft 3D clay aesthetic.',
+    `Orientation: ${orientation}.`,
+    '',
+    'Card content to render:',
+    `  TITLE: "${heading}"`,
+    ...contentLines,
+    '',
+    'Visual style:',
+    '  - Soft pastel gradient background (lavender-to-peach, mint-to-sky, or cream-to-rose)',
+    '  - 3D clay-rendered decorative objects floating near edges (books, stars, diamonds, capsules)',
+    '  - Smooth surfaces with gentle soft-box studio lighting, subtle shadows',
+    '  - Clean rounded typography on white frosted card panel',
+    '  - Friendly, premium aesthetic popular on 小红书 knowledge cards',
+    '  - Harmonious pastel color scheme throughout',
+    '',
+    'IMPORTANT: Render all text faithfully. No watermarks.',
+  ].join('\n');
+}
+
+function buildChalkboardPrompt(scene, ratio) {
+  const orientation = ratio === 'landscape' ? 'horizontal 16:9 landscape' : 'vertical 9:16 portrait';
+  const { heading, keyPoints = [], subheadings = [], summary } = scene;
+
+  const contentLines = keyPoints.map(p => `  → ${p}`);
+  (subheadings || []).forEach(s => contentLines.push(`  [${s.label}] ${s.content}`));
+  if (summary) contentLines.push(`  ✎ ${summary}`);
+
+  return [
+    'Create a hand-drawn chalkboard educational card.',
+    `Orientation: ${orientation}.`,
+    '',
+    'Card content to render:',
+    `  TITLE (underlined): "${heading}"`,
+    ...contentLines,
+    '',
+    'Visual style:',
+    '  - Dark forest green chalkboard texture background',
+    '  - White chalk handwritten text, slightly rough and organic',
+    '  - Simple chalk-drawn diagrams, arrows, and decorative underlines',
+    '  - Color chalk accents: yellow for titles, pink/blue for highlights',
+    "  - Academic feel — like a teacher's classroom blackboard",
+    '  - Hand-drawn boxes, circles, and connector arrows for structure',
+    '',
+    'IMPORTANT: Render all text faithfully in the same language as the content. No watermarks.',
+  ].join('\n');
+}
+
+// ─── Scene-type Prompt Builders ───────────────────────────────────────────────
+
+function buildPhotoPrompt(scene, ratio) {
+  const orientation = ratio === 'landscape' ? '16:9 widescreen landscape' : '9:16 vertical portrait';
+  return [
+    `Create a stunning, high-quality ${orientation} illustration:`,
+    '',
+    scene.sceneDesc,
+    '',
+    'Style: cinematic, dramatic lighting, vivid colors, professional quality.',
+    `Technical: ${orientation} aspect ratio, sharp details, atmospheric depth.`,
+    'No text, no watermarks, no logos.',
+  ].join('\n');
+}
+
+function buildMangaPanelPrompt(scene, ratio) {
+  const orientation = ratio === 'landscape' ? '16:9 landscape manga panel' : '9:16 portrait manga panel';
+  return [
+    `Create a Japanese manga-style panel illustration, ${orientation}:`,
+    '',
+    scene.sceneDesc,
+    '',
+    'Visual style:',
+    '  - Clean manga ink linework with bold black outlines',
+    '  - Speed lines, dynamic composition, manga perspective',
+    '  - Screentone dot/line texture for depth and shadow',
+    '  - Mostly black and white, with one vivid accent color (red or blue)',
+    '  - Dramatic, expressive, high-energy framing',
+    '  - Professional manga quality, Shonen Jump style',
+    'No text overlays. No watermarks.',
+  ].join('\n');
+}
+
+function buildVintageNewspaperPrompt(scene, ratio) {
+  const orientation = ratio === 'landscape' ? '16:9 widescreen landscape' : '9:16 portrait';
+  return [
+    `Create a vintage 1940s newspaper-style editorial illustration, ${orientation}:`,
+    '',
+    scene.sceneDesc,
+    '',
+    'Visual style:',
+    '  - Aged yellowed newsprint texture with paper grain',
+    '  - Halftone dot pattern overlay, classic editorial aesthetic',
+    '  - Black, white, and sepia tones with period-accurate details',
+    '  - Classic editorial illustration style, reportage journalism feel',
+    '  - Historical, atmospheric, early-20th-century newspaper graphic',
+    'No text overlays. No watermarks.',
+  ].join('\n');
+}
+
+// ─── Dispatcher ───────────────────────────────────────────────────────────────
+
+const PROMPT_BUILDERS = {
+  sketchnote:        buildSketchnotePrompt,
+  neon_noir:         buildNeonNoirPrompt,
+  minimal_3d:        buildMinimal3dPrompt,
+  chalkboard:        buildChalkboardPrompt,
+  photo:             buildPhotoPrompt,
+  manga_panel:       buildMangaPanelPrompt,
+  vintage_newspaper: buildVintageNewspaperPrompt,
+};
+
+function buildImagePrompt(scene, style, ratio) {
+  const builder = PROMPT_BUILDERS[style] || buildSketchnotePrompt;
+  return builder(scene, ratio);
+}
+
+module.exports = {
+  RATIO_CONFIG, VALID_RATIOS, VALID_STYLES,
+  CARD_STYLES, SCENE_STYLES, isCardStyle,
+  buildSystemPrompt, buildImagePrompt,
+  buildSketchnotePrompt, buildPhotoPrompt,
+  _test: {
+    buildSketchnotePrompt, buildPhotoPrompt,
+    buildNeonNoirPrompt, buildMinimal3dPrompt, buildChalkboardPrompt,
+    buildMangaPanelPrompt, buildVintageNewspaperPrompt,
+    buildSystemPrompt,
+  },
+};