20｜如何实现插图和听书功能
月影
你好，我是月影。
回顾上一节课，我们实现了波波熊学伴的主体流程，这样从用户输入好奇心问题，到最后生成文字内容的全过程就已经完整了。
但是，因为波波熊学伴是给孩子使用的产品，而对于低年龄的孩子来说，太多的文字会让他们觉得内容过于深奥，从而影响他们的学习效果。
因此我们希望波波熊学伴不只是文字，而且能够有一些图片和语音，甚至在将来，还能够在页面上多一些互动。
那我们先来看图片和语音功能具体如何设计和实现。
实现独立的“插图”功能
如果你仔细学习了前面的课程，一定会发现我们其实为段落生成了插图提示词，但是我们没有在工作流中将图片直接生成出来，这是为什么呢？
其实这是产品为了控制成本的权衡，因为相较于文字来说，生成图片的成本较高，目前大概每张图 1-2 角钱。如果我们给每一个问题都生成了好几张图片，那么回答一个问题的成本就要是现在的好几倍，所以我们做了一个权衡，当用户主动要求生成图片的时候，才让 AI 为用户生成图片。
那么我们现在来看如何实现这一功能。
我们还是用 Trae 打开 Bearbobo Discovery 项目。
首先，我们要在 server.ts 文件里添加一个独立的生成插画的接口，因为我们在主工作流中已经用到了，generate-image.ts 模块来生成封面图，在前面的课程里我们已经完成了它的封装，所以 server.ts 里，实现的接口就非常简单，代码如下：
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
1. 实现独立的“插图”功能，通过控制成本，只有当用户主动要求生成图片时，才让AI为用户生成图片。 2. 调整前端逻辑，实现文章配图功能，包括在每个段落的标题后加上配图按钮，根据图片URL展示图片，并通过CSS样式控制图片在奇数段落和偶数段落的位置。 3. 实现“听书”功能，将语音转换流程添加到主工作流中，但该功能只对付费订阅的用户开放，以控制成本。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学前端智能体开发》，新⼈⾸单¥59
《跟月影学前端智能体开发》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
精选留言
由作者筛选后的优质留言将会公开显示，欢迎踊跃留言。
收起评论