以下內容属于 ‘前端开发示例’ 便签：

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

使用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 (more...)