1. 开篇与引言
想象一下，有一本书可以教你任何你想要的，同时又充满乐趣。这就是我想要带给你的。在这个视频中，你可以看到有史以来最聪明的书。这本书实际上隐藏在科幻小说里，写于 1995 年，距今已有近 30 年。它已经可以产生无限的故事与图片和旁白融为一体，实时插入你作为主角。
2. 学习与设计
假设我在学习 Python，它可以帮助我以有趣和简单的方式学习数据构建。它的特点是像朋友一样与你互动。对于插图入门书，这个项目主要由人工智能驱动。AI 接受故事和提示，输出自己的故事以保持真实性。我需要这些故事也可以提供叙述，作为视觉和文字内容的一部分。
3. 设计构思与原型
我在 iPad 上创建了一些草图，主要设计了三个页面：
- 欢迎页面。
- 输入用户姓名和想学习内容的页面。
- 包含课程内容及生成插图的页面。
接着，我在 Figma 中开始高保真设计，挑选了合适的字体与边框风格，并设计了一些交互性的视觉效果。
4. 项目构建与工具使用
为了构建这个项目，我使用了 Next.js 的最新版本，结合 React 19 和 Tailwind CSS。对于后端，我选择了使用 LangChain 和 LangFlow，通过 Python 构建 AI 模型和数据库，进行嵌入、检索和生成。
LangFlow 是一款优秀的工具，它将复杂的代码转化为可视化流程，让开发变得更加直观。
5. 数据处理与存储
我通过以下步骤处理数据：
- 使用文件加载器上传数据。
- 使用文本分割助手将数据拆分为更小的部分。
- 使用 OpenAI 的文本嵌入模型进行嵌入。
- 将嵌入结果存储到 Astra DB 数据库中。
通过这些步骤，我构建了一个可用于检索和生成内容的数据库。
6. AI 流程与提示生成
接下来，我创建了一个聊天输入流，用户可以输入提示，系统会从数据库中检索相关内容，并通过 AI 模型生成个性化的故事。这一流程通过连接 LangFlow 中的组件实现，包括提示创建、数据库检索和 OpenAI 接口的调用。
7. 前端设计与整合
为了测试和展示，我在 Next.js 中实现了基本的前端设计，包括：
- 一个登陆页面。
- 一个输入提示的页面。
- 一个显示生成内容的主页面。
这些页面都与后端 AI 流程相连，实现了完整的交互功能。
8. 测试与结果
在测试中，系统生成了基于用户提示的独特故事。例如：
艾米莉尝试学习 Python，她打开了一本名为“密码王国”的书，开始了她的第一次编译器之旅。
整个流程顺利完成，我也将代码托管在 GitHub 上，供大家使用。
