Back to Details

storyboard-generator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Storyboard Generator - 分镜图/视频生成器

Storyboard Generator - Storyboard Image & Video Generator

基于用户的 idea 或故事描述，自动拆解为多个场景/镜头，批量生成对应图片和视频，并以分镜表形式呈现。
Based on users' ideas or story descriptions, it automatically disassembles into multiple scenes/shots, generates corresponding images and videos in batches, and presents them in the form of a storyboard.

核心能力

Core Capabilities

1. 批量图片生成

1. Batch Image Generation

  • 根据故事拆解，一次性生成 4-12 张连贯的分镜图
  • 保持系列图片风格一致性
  • 支持不同宽高比适配不同镜头类型
  • Generate 4-12 coherent storyboard images in one go based on story breakdown
  • Maintain style consistency across the series of images
  • Support different aspect ratios to adapt to different shot types

2. 批量视频生成

2. Batch Video Generation

  • 基于分镜图批量生成视频片段
  • 支持三种视频生成模式：
    • 文生视频: 纯文字描述生成视频
    • 首帧图生视频: 使用分镜图作为视频首帧
    • 首尾帧生视频: 指定首帧和尾帧图片，生成过渡视频
  • Generate video clips in batches based on storyboard images
  • Support three video generation modes:
    • Text-to-Video: Generate videos from pure text descriptions
    • First Frame to Video: Use storyboard images as the first frame of the video
    • First & Last Frame to Video: Specify the first and last frame images to generate transition videos

3. 单镜头重新生成

3. Single Shot Regeneration

  • 对不满意的单个镜头重新生成图片或视频
  • 保持与其他镜头的风格一致性
  • 支持微调提示词后重新生成
  • Regenerate images or videos for unsatisfactory individual shots
  • Maintain style consistency with other shots
  • Support regeneration after fine-tuning prompts

工作流程

Workflow

Step 1: 理解用户创意

Step 1: Understand User's Creativity

  • 分析用户提供的 idea、故事、脚本或概念
  • 确定整体风格基调（写实、卡通、赛博朋克、水彩等）
  • 确定输出类型：纯图片分镜 / 图片+视频 / 纯视频
  • Analyze the ideas, stories, scripts or concepts provided by users
  • Determine the overall style tone (realistic, cartoon, cyberpunk, watercolor, etc.)
  • Determine the output type: pure image storyboard / image + video / pure video

Step 2: 拆解分镜

Step 2: Disassemble into Storyboard Shots

将创意拆解为 4-12 个镜头，每个镜头包含：
字段说明示例
shot_id镜头编号Shot 01
shot_type镜头类型远景/全景/中景/近景/特写
description场景描述城市全景，黄昏时分
prompt图片生成提示词cinematic shot, city skyline...
video_prompt视频生成提示词（可选）camera slowly pushing in...
duration建议时长3s
ratio宽高比16:9
camera_move运镜方式缓慢推进/固定/摇镜
transition转场效果淡入/切/叠化
notes备注配合环境音乐
Disassemble the creativity into 4-12 shots, each shot includes:
FieldDescriptionExample
shot_idShot IDShot 01
shot_typeShot TypeLong Shot/Full Shot/Medium Shot/Close-Up/Extreme Close-Up
descriptionScene DescriptionPanoramic view of the city at dusk
promptImage Generation Promptcinematic shot, city skyline...
video_promptVideo Generation Prompt (Optional)camera slowly pushing in...
durationSuggested Duration3s
ratioAspect Ratio16:9
camera_moveCamera MovementSlow Push-In/Fixed/Pan
transitionTransition EffectFade In/Cut/Dissolve
notesNotesCoordinate with ambient music

Step 3: 批量生成图片

Step 3: Batch Generate Images

为每个镜头调用 
draw_one_image
工具：
python
draw_one_image(
    prompt="[风格前缀], [镜头类型], [场景描述], [风格后缀]",
    reference_image_ids=[],  # 可选参考图
    ratio="16:9"  # 根据镜头类型选择
)
宽高比选择指南：
镜头类型推荐比例适用场景
远景/全景16:9, 21:9环境交代、大场面
中景4:3, 3:2人物互动、对话
近景/特写1:1, 3:4情绪表达、细节
竖版9:16手机/短视频
Call the 
draw_one_image
tool for each shot:
python
draw_one_image(
    prompt="[Style Prefix], [Shot Type], [Subject Description], [Action/State], [Environment/Background], [Lighting/Atmosphere], [Style Suffix]",
    reference_image_ids=[],  # Optional reference images
    ratio="16:9"  # Select based on shot type
)
Aspect Ratio Selection Guide:
Shot TypeRecommended RatioApplicable Scenario
Long Shot/Full Shot16:9, 21:9Environment exposition, large scenes
Medium Shot4:3, 3:2Character interaction, dialogue
Close-Up/Extreme Close-Up1:1, 3:4Emotional expression, details
Vertical9:16Mobile/Short Video

Step 4: 批量生成视频（可选）

Step 4: Batch Generate Videos (Optional)

为需要动态效果的镜头调用 
draw_one_video
工具：
python
undefined
Call the 
draw_one_video
tool for shots that require dynamic effects:
python
undefined

模式1: 文生视频

Mode 1: Text-to-Video

draw_one_video( prompt="视频描述，包含运镜和动作", reference_image_ids=[] )
draw_one_video( prompt="Video description, including camera movement and actions", reference_image_ids=[] )

模式2: 首帧图生视频（推荐）

Mode 2: First Frame to Video (Recommended)

draw_one_video( prompt="视频描述", reference_image_ids=["首帧图片URL"] )
draw_one_video( prompt="Video description", reference_image_ids=["First Frame Image URL"] )

模式3: 首尾帧生视频

Mode 3: First & Last Frame to Video

draw_one_video( prompt="过渡描述", reference_image_ids=["首帧URL", "尾帧URL"] )
undefined
draw_one_video( prompt="Transition description", reference_image_ids=["First Frame URL", "Last Frame URL"] )
undefined

Step 5: 生成分镜表

Step 5: Generate Storyboard

使用 
template/storyboard.html
模板展示结果。
Use the 
template/storyboard.html
template to display the results.

单镜头重新生成

Single Shot Regeneration

当用户对某个镜头不满意时：
  1. 识别目标镜头: 根据用户指定的镜头编号（如 "重新生成 Shot 03"）
  2. 获取上下文: 保持与前后镜头的风格一致性
  3. 调整提示词: 根据用户反馈微调
  4. 重新生成: 调用对应工具生成新内容
  5. 更新分镜表: 替换对应镜头的图片/视频
重新生成示例对话：
用户: Shot 03 的人物表情不够坚定，重新生成一下
助手: 好的，我来重新生成 Shot 03，加强人物坚定的神情...
      [调用 draw_one_image，微调 prompt 强调表情]
When users are unsatisfied with a certain shot:
  1. Identify Target Shot: According to the shot number specified by the user (e.g., "Regenerate Shot 03")
  2. Obtain Context: Maintain style consistency with the previous and subsequent shots
  3. Adjust Prompt: Fine-tune based on user feedback
  4. Regenerate: Call the corresponding tool to generate new content
  5. Update Storyboard: Replace the image/video of the corresponding shot
Regeneration Example Dialogue:
User: The character's expression in Shot 03 is not firm enough, please regenerate it
Assistant: Sure, I will regenerate Shot 03 to enhance the character's firm expression...
      [Call draw_one_image, fine-tune the prompt to emphasize the expression]

提示词模板

Prompt Templates

风格一致性前缀（选择一种风格，全程使用）

Style Consistency Prefix (Choose one style and use it throughout)

电影感:
cinematic photography, 35mm film, anamorphic lens, warm color grading, 
dramatic lighting, shallow depth of field
动画风格:
anime style, studio ghibli inspired, soft colors, detailed background,
cel shading, beautiful lighting
赛博朋克:
cyberpunk aesthetic, neon lights, rain-soaked streets, holographic displays,
dark atmosphere, high contrast, blade runner style
写实摄影:
professional photography, natural lighting, realistic textures,
high detail, 8k resolution, photorealistic
Cinematic:
cinematic photography, 35mm film, anamorphic lens, warm color grading, 
dramatic lighting, shallow depth of field
Animation Style:
anime style, studio ghibli inspired, soft colors, detailed background,
cel shading, beautiful lighting
Cyberpunk:
cyberpunk aesthetic, neon lights, rain-soaked streets, holographic displays,
dark atmosphere, high contrast, blade runner style
Realistic Photography:
professional photography, natural lighting, realistic textures,
high detail, 8k resolution, photorealistic

提示词结构

Prompt Structure

[风格前缀], [镜头类型 shot], [主体描述], [动作/状态], 
[环境/背景], [光线/氛围], [风格后缀]
[Style Prefix], [Shot Type], [Subject Description], [Action/State], 
[Environment/Background], [Lighting/Atmosphere], [Style Suffix]

输出格式

Output Format

生成完成后，输出结构化的分镜数据：
json
{
  "project_title": "项目标题",
  "style": "电影感/写实",
  "total_shots": 6,
  "total_duration": "15s",
  "shots": [
    {
      "shot_id": "Shot 01",
      "shot_type": "远景",
      "description": "城市全景，黄昏时分",
      "image_url": "生成的图片URL",
      "video_url": "生成的视频URL（可选）",
      "duration": "3s",
      "ratio": "16:9",
      "camera_move": "缓慢推进",
      "transition": "淡入",
      "prompt": "使用的提示词",
      "notes": "开场镜头"
    }
  ]
}
After generation, output structured storyboard data:
json
{
  "project_title": "Project Title",
  "style": "Cinematic/Realistic",
  "total_shots": 6,
  "total_duration": "15s",
  "shots": [
    {
      "shot_id": "Shot 01",
      "shot_type": "Long Shot",
      "description": "Panoramic view of the city at dusk",
      "image_url": "Generated Image URL",
      "video_url": "Generated Video URL (Optional)",
      "duration": "3s",
      "ratio": "16:9",
      "camera_move": "Slow Push-In",
      "transition": "Fade In",
      "prompt": "Prompt Used",
      "notes": "Opening Shot"
    }
  ]
}

使用场景

Application Scenarios

场景推荐配置
抖音/短视频6-8镜头, 9:16竖版, 图+视频
广告创意8-12镜头, 16:9横版, 图+视频
动画分镜8-12镜头, 16:9, 纯图片
故事绘本6-10镜头, 1:1或4:3, 纯图片
游戏CG6-8镜头, 21:9超宽, 图+视频
音乐MV10-15镜头, 16:9, 图+视频
ScenarioRecommended Configuration
TikTok/Short Video6-8 shots, 9:16 vertical, image + video
Advertising Creativity8-12 shots, 16:9 horizontal, image + video
Animation Storyboard8-12 shots, 16:9, pure image
Story Picture Book6-10 shots, 1:1 or 4:3, pure image
Game CG6-8 shots, 21:9 ultra-wide, image + video
Music MV10-15 shots, 16:9, image + video

注意事项

Notes

  1. 单次建议不超过 12 个镜头，避免生成时间过长
  2. 视频生成较慢（约30-60秒/个），可先生成全部图片再按需生成视频
  3. 首尾帧生视频时，两帧图片风格和内容需要有合理的过渡关系
  4. 重新生成时保持风格前缀一致，仅调整具体描述
  5. 如需角色高度一致，建议用户提供参考图
  1. It is recommended not to exceed 12 shots at a time to avoid excessive generation time
  2. Video generation is slow (about 30-60 seconds per video), you can generate all images first and then generate videos on demand
  3. When generating videos from first and last frames, the style and content of the two frames need to have a reasonable transition relationship
  4. Keep the style prefix consistent during regeneration, only adjust the specific description
  5. For high character consistency, it is recommended that users provide reference images

常见问题与踩坑记录

Common Issues & Pitfalls

1. HTML 模板中 JavaScript 字符串引号问题

1. JavaScript String Quotation Mark Issue in HTML Template

问题现象: 分镜表 HTML 页面只显示标题，镜头卡片不渲染。
原因: 在 JavaScript 的 
storyboardData
对象中，
description
或 
dialogue
字段包含中文双引号 
"..."
时，会破坏 JS 字符串语法，导致整个脚本解析失败。
错误示例:
javascript
{ description: "上面写着"发愿"。", ... }  // ❌ 中文引号破坏字符串
正确做法:
javascript
{ description: "上面写着「发愿」。", ... }  // ✅ 使用中文书名括号
{ description: "上面写着'发愿'。", ... }   // ✅ 使用单引号
{ description: "上面写着\"发愿\"。", ... } // ✅ 转义双引号
排查方法:
bash
undefined
Problem Phenomenon: The storyboard HTML page only displays the title, and the shot cards are not rendered.
Cause: When the 
description
or 
dialogue
field in the JavaScript 
storyboardData
object contains Chinese double quotes 
"..."
, it will break the JS string syntax, causing the entire script to fail to parse.
Wrong Example:
javascript
{ description: "It says "Make a Wish" on it.", ... }  // ❌ Chinese quotes break the string
Correct Approach:
javascript
{ description: "It says 「Make a Wish」 on it.", ... }  // ✅ Use Chinese book brackets
{ description: "It says 'Make a Wish' on it.", ... }   // ✅ Use single quotes
{ description: "It says \"Make a Wish\" on it.", ... } // ✅ Escape double quotes
Troubleshooting Method:
bash
undefined

使用 Node.js 检查 JS 语法

Use Node.js to check JS syntax

node -e " const fs = require('fs'); const html = fs.readFileSync('storyboard.html', 'utf8'); const scriptMatch = html.match(/<script>([\s\S]*?)</script>/); if (scriptMatch) { try { new Function(scriptMatch[1]); console.log('JavaScript syntax OK'); } catch(e) { console.log('JavaScript error:', e.message); } } "
undefined
node -e " const fs = require('fs'); const html = fs.readFileSync('storyboard.html', 'utf8'); const scriptMatch = html.match(/<script>([\s\S]*?)</script>/); if (scriptMatch) { try { new Function(scriptMatch[1]); console.log('JavaScript syntax OK'); } catch(e) { console.log('JavaScript error:', e.message); } } "
undefined

2. 占位图片服务

2. Placeholder Image Service

当实际图片尚未生成时，可使用 
picsum.photos
作为占位图：
html
<img src="https://picsum.photos/seed/shot${shot_id}/640/360" alt="Shot">
  • seed/shot${shot_id}
    确保同一镜头每次显示相同的随机图片
  • 可添加 
    filter: grayscale(100%)
    使占位图呈现黑白效果，与未生成状态区分
When the actual image has not been generated yet, you can use 
picsum.photos
as a placeholder:
html
<img src="https://picsum.photos/seed/shot${shot_id}/640/360" alt="Shot">
  • seed/shot${shot_id}
    ensures the same random image is displayed for the same shot every time
  • You can add 
    filter: grayscale(100%)
    to make the placeholder image appear in black and white, distinguishing it from the ungenerated state