ai-teacher:一个 ChatGPT 的前端开发示例,可以当作代码参考

ai-teacher
使用ChatGPT开发一款语言学习助手。

项目功能
项目参考 ChatGPT 的 UI 布局,分三个模块,助理管理、会话列表、消息列表,左右布局,左边是会话列表,右边是消息列表,
助理管理其实是 OpenAI 官方的 接口配置,具体参数的含义请参考官网,这里不细说。通过配置不同的指令及其他参数实现不同的模式,如英语学习、语文学习、英语翻译等模式
支持发送文字,支持打字效果、支持 markdown 渲染、支持中断回复。
支持语音功能,类似微信语音,使用 indexedDB 存储,可回放。注意:官方并不支持直接语音,需要通过文字转语音,语音再转文字的接口中转
支持主题切换
ios safari支持 (因苹果限制,语音不支持自动播放,需手动点击)
支持朗读模式(帮助小孩读题,小朋友通过微信拍照识别图片文字,复制的这里,AI读题)

项目中使用了一些设计模式
单例模式: 语音播放、发送消息(对 fetch 的封装)
发布订阅模式: 使用 EventEmitter 用于一些非父子组件间的通信
门面模式:解决兼容性问题
流水线模式:关于业务逻辑的处理采用 pipeline 模式,逻辑清晰

视频效果:https://static.warmplace.cn/ai-teacher.mp4
在线链接:https://static.warmplace.cn/ai-teacher

此文章的评论已关闭.