Visual Story-Writing

写作，尤其是叙事性写作，本质上是对时间、空间与人物关系的组织。传统方式中，作者需在脑海中构建场景、梳理逻辑，再通过文字逐字表达——这一过程容易遗漏细节、打乱节奏，甚至陷入“写完才发现结构混乱”的困境。

Visual Story-Writing 提出了一种全新的解决思路:把故事变成可操作的视觉图谱，像编辑流程图一样修改情节。

这项由研究团队开发的原型系统，允许作者通过拖动角色、连接互动、重排时间线等方式，直接操作故事的视觉表示，并由 AI 自动生成对应的文本修改建议。它不是简单的写作辅助工具，而是一次对“创作界面”的重新构想。

核心理念：从“线性文本”到“可交互叙事图谱”

传统写作是线性的：你从第一句写到最后一句。Visual Story-Writing 则将故事解构为可编辑的视觉元素：

• 角色 → 可移动的节点
• 动作 → 节点间的连线
• 地点 → 空间布局图
• 事件 → 时间轴上的标记

任何对这些视觉元素的操作，都会触发 AI 对文本的智能重构。

✨ 例如：

• 把“A 走向 B”改为“A 拥抱 B” → 系统建议添加情感描写
• 将“争吵”事件前移 → 建议调整前文铺垫
• 拖动角色进入房间 → 自动更新位置描述

这种“所见即所改”的方式，极大降低了叙事结构调整的认知负担。

系统三大视图：结构化呈现故事要素

系统提供三个核心视图，分别对应故事的不同维度。

1. 实体与动作视图（Entity & Action View）

展示故事中所有角色、物体及其互动关系。

• 每个角色是一个节点，动作是连接线（如“对话”、“追逐”）
• 支持添加/删除实体，修改属性（如情绪、状态）
• 连接两个角色时，系统会建议新增互动情节

💡 适用场景：设计人物关系网、发现逻辑断层

2. 地点与空间视图（Location & Space View）

以简化的地图形式呈现故事发生的物理空间。

• 房间、街道、建筑以区块表示
• 可拖动角色在不同地点间移动
• 移动后，系统建议更新文本中的位置描述

📌 示例：将“主角站在门口”改为“主角走进客厅”，系统自动生成过渡句：“他推开门，径直走向沙发。”

3. 事件时间线视图（Event Timeline View）

按时间顺序排列所有关键事件。

• 鼠标悬停可预览事件内容与角色状态
• 支持拖拽重排事件顺序
• 重新排序后，系统分析因果链并建议文本调整

🔄 示例：将“发现尸体”提前至“进入房间”之前，系统提示：“需增加悬念铺垫，例如‘他一进门就闻到一股异味’。”

双向编辑：视觉操作 ↔ 文本同步

系统采用双向同步机制：

• 在视觉界面修改 → 自动生成文本建议
• 在文本框修改 → 视觉图谱实时更新

这意味着你可以：

• 从一段文字自动生成结构图
• 在图上调整结构后，获得优化后的文本输出
• 在两者之间自由切换，无需手动同步

⚙️ 技术实现：依赖 GPT-4o 进行语义解析与生成，确保视觉与文本语义一致。

如何运行与使用

1. 环境准备

系统基于现代前端技术栈构建：

• 语言：TypeScript
• 框架：React + Vite
• 浏览器支持：Google Chrome 或 Firefox 最新版

安装步骤：

# 安装依赖
npm install

# 启动开发服务器
npm run dev

系统在本地运行，所有数据不上传，仅向 OpenAI API 发送必要请求。

2. API 密钥配置

由于系统依赖 GPT-4o 进行信息提取与文本生成，需提供 OpenAI API 密钥。

获取方式：

1. 登录 OpenAI 官网
2. 进入 API Keys 页面创建新密钥
3. 在系统启动界面输入密钥

🔐 安全说明：

• 密钥仅存储在浏览器本地
• 不会被系统记录或传输至第三方
• 若输入错误，功能受限但界面仍可操作

3. 使用方式

快速体验：

• 输入密钥后，使用预设示例故事测试交互功能
• 尝试拖动角色、连接节点、重排时间线，观察文本变化

深度使用：

• 导入自己的叙事文本
• 系统自动解析角色、事件、地点并生成可视化图谱
• 通过视觉操作进行修订，接收 AI 生成的文本建议

教程与研究资料

系统内置完整的研究流程与教学视频：

• 点击“开始研究”可体验论文中参与者的真实操作路径
• 所有教程视频位于 public/videos 目录，可直接访问
• 包含：基础操作、高级编辑、案例分析等

📚 适合教育、写作教学、AI 交互设计等领域参考。

系统特点总结

🌐 应用场景

❓ 常见问题

Q：能否不使用 API 密钥？

A：不能。系统依赖 GPT-4o 进行语义解析与生成。无有效密钥时，仅能浏览界面，无法执行核心功能。

Q：支持中文吗？

A：系统可处理中文文本，但建议使用清晰、结构化的叙述以获得最佳解析效果。

Q：是否支持导出？

A：支持导出修改后的文本，可视化图谱可截图保存，未来可能增加导出 JSON 结构功能。