由Gemini驱动的多分支视觉叙事工具#Branchlight#banana黑客松项目解读

项目ID: 7289

这是一个提示到故事板的工具，使用Gemini 2.5 Flash生成文本和视觉效果，并具有可定制的分支叙事。

项目描述

讲故事很少是线性的，创造力也不会沿着直线发展。Branchlight，构建了一个交互式讲故事的工具，让用户能够从单个提示快速生成多分支视觉叙事。

其核心是nano banana （ Gemini 2.5 Flash Image Preview ），它能够在单次操作中生成图像和文本。以前，这需要整合多个模型。而使用 nano banana，可以通过一次调用生成完整的场景卡片，包括一致的视觉效果、连贯的文本和角色完整性。

Branchlight设计了一个分支引擎，用户可以探索从任何场景出发的多条路径。创作者不必局限于单一的故事线，而是可以使用 ✚ 来探索各种可能，同时保持叙事的连贯性。这提供了对故事方向更多的控制权。

工作原理

整个应用是基于 React 和 TypeScript 构建的单页应用，其工作流程可以分解为以下几个步骤：

1 用户输入:

用户在主屏幕的输入框中输入一个故事的创意或点子，例如“一只会说话的猫的太空冒险”。

2 生成初始故事板:

当用户点击生成按钮后，会根据用户的输入，精心构造一个初始 Prompt（后面会详细解释）。

然后，它会向 nano banana API 发送请求。

核心亮点: 这里使用的是一个多模态模型，并且在请求中指定了需要返回文本和图片。这使得我们可以在一次 API 调用中同时获得故事的文字描述和与之匹配的图片，极大地提升了效率和体验。

3 解析与渲染:

模型的响应包含一个文本部分和多个图片部分。代码会首先解析文本部分，按照预先设计的格式（例如 SCENE 1, TITLE:,DESCRIPTION:）将其分割成独立的场景数据。

然后，它会将解析出的每个场景的文字（标题、描述）与返回的图片一一对应起来。

每个场景渲染成一个可拖拽的卡片，并画出它们之间的连接线。

4 创建分支故事:

用户可以在任何一个场景卡片上点击 + 按钮来创建分支。

它会收集从故事开头到当前这个父场景的所有内容，形成一个“故事上下文”。

接着，它会基于这个上下文构造一个新的、用于生成分支的 Prompt。

同样，它会调用 banana 。模型会根据已有故事，创造性地生成几个不同的、可能的后续发展。

5 交互与编辑:

用户可以在画布上自由地缩放、平移画布，还可以拖动每个场景卡片到任意位置。

用户也可以直接在场景卡片上编辑标题和描述，修改会实时保存。

连接线会根据卡片位置的改变而动态重绘。

关键的 Prompt 设计

Prompt 的设计是这个应用能否成功的核心。它直接决定了 AI 模型能否理解我们的意图，并返回结构清晰、易于解析的数据。主要设计了两类关键 Prompt：

初始故事板生成 Prompt

```

用户希望获得一个关于“${prompt}”的分镜头脚本。

请为这个故事生成一系列场景。

每个场景需包含：

• 标题：[场景标题]
• 描述：[一段描述该场景的文字]
• 图像：[与该场景相符的图像]

请以场景列表形式返回输出，每个场景包含标题、描述和图像。不要包含任何超出场景内容的文本。

格式如下：

场景 1

标题：...

描述：...

图像：...

场景 2

标题：...

描述：...

图像：...

...```;

设计思想解析:

明确意图 (Clear Intent): 开头直接告诉模型用户的目标是创建一个故事板 (storyboard)。

任务分解 (Task Decomposition): 要求模型为每个场景提供三个关键信息：

TITLE, DESCRIPTION,IMAGE。

IMAGE 这个指令是给多模态模型看的，告诉它这里需要生成一张图片。

结构化输出 (Structured Output): 最关键的部分是 Format指令。通过提供一个清晰的、带有分隔符 (SCENE 1, SCENE 2) 和键值对 (TITLE: ...) 的示例，我们强制模型按照这个格式来返回文本。这使得后续的程序解析变得非常稳定和可靠。

约束条件 (Constraints): Do not include any text outside the scenes

这句话可以有效减少模型返回多余的问候语或总结，让输出更“干净”。

分支场景生成 Prompt

```

${storyContext}

生成至少3个创意且不同于主线的替代后续场景。每个分支需包含：

• 标题：[场景的标题]
• 描述：[一段描述该场景的段落]
• 图像：[与该场景相匹配的图像]

请以列表形式返回所有分支，每个分支均包含标题、描述和图像。不要在分支之外添加任何其他文字。

格式：

BRANCH 1 TITLE: ... DESCRIPTION: ... IMAGE: ...

BRANCH 2 TITLE: ... DESCRIPTION: ... IMAGE: ...

```

设计思想解析:

提供上下文 (Provide Context): Prompt 的开头是 storyContext，它包含了到目前为止的故事梗概。这对于生成连贯、相关的分支至关重要。

精确指令 (Precise Command): 指令非常具体——

Generate at least 3 creative and alternative next scenes that diverge from the main path

(生成至少3个有创意的、偏离主线的备选后续场景)。这里明确了数量（至少3个）、质量（有创意的、备选的）和目的（偏离主线）。

复用结构 (Re-use Structure): 它复用了与初始 Prompt 类似的结构化输出格式，只是将分隔符从 SCENE 换成了 BRANCH。这同样是为了方便程序进行解析，并且保持了设计的一致性。