
LLM Chat Replay

2025.03.03
0
TypeScript聊天回放可视化工具内容生成
LLM Chat Replay 是一个基于 React 的应用程序,用于可视化回放 LLM(大型语言模型)聊天记录。它支持拖放上传 Markdown 文件,并提供播放控制、速度调节、进度条拖动等功能,适用于 AI 助手对话的回放。
View on GitHub
Overview
基本能力
产品定位
LLM Chat Replay 是一个用于回放和可视化 LLM 聊天记录的工具,特别适用于 AI 助手对话的回放和分析。
核心功能
- 拖放上传 Markdown 文件
- 播放控制(播放/暂停)
- 速度控制(0.5x 到 4x)
- 进度条拖动
- 自动滚动的聊天窗口
- 区分人类和助手的消息气泡
- 助手消息的打字动画
- 自动提取并显示对话标题
适用场景
- AI 助手对话的回放和分析
- 教学演示
- 对话记录的存档和分享
工具列表
- React + Vite:前端框架
- TypeScript:类型安全的 JavaScript
- Tailwind CSS:CSS 框架
- Typed.js:打字动画库
常见问题解答
- 如何创建兼容的 Markdown 文件?
- 确保文件格式为 "Human:" 和 "Assistant:" 开头
- 使用标准的 Markdown 格式
- 避免特殊字符
使用教程
使用依赖
- Node.js (v16+)
- npm 或 yarn
安装教程
git clone https://github.com/yourusername/llm-chat-replay.git
cd llm-chat-replay
npm install
npm run dev
调试方式
- 启动应用程序:
npm run dev
- 拖放 Markdown 文件到界面或点击浏览
- 使用播放控制回放对话
- 调整速度
- 使用进度条跳转到特定部分