ChatGPT对话类项目开发 - 起步 & 分析

298 阅读3分钟

前端开发环境变更频率没有前几年那么快了,此时正是 技术选型固定,沉淀 最佳实践 的好时机,后续会在这个专栏中:

项目全流程开发纪实

持续更新 真实项目的分析、选型、调研 等内容,根本目的在于持续强化个人的产品分析能力,及 技术广度,记录中间过程,同时 分享 给有兴趣参考的各位。

背景

在使用了一段时间的 ChatGPT 后,我发现它能帮助我快速获取想要的内容,能极大节省信息检索的时间,会成为我后续开发中的长期伴侣。

虽然目前 ChatGPT 的最终形态未定,在其他平台中类似能力的产品也呈井喷式发布,但还是想自己开发一个简单的应用,方便后续个人功能的定制。

同时也想借这样的机会,多尝试使用下目前前端较流行,或个人感兴趣的 技术方案、工具 并上手体验下,最好能在部分场景下,沉淀自己的最佳实践。

先贴个项目地址:github.com/xyuanbuilds…

功能分析

从产品的功能分析开始,起初是觉得既然 ChatGPT 能快速获取内容,那如何能把获取的分块知识快速截取,归类,打上标记,再导出呢?这样就可以方便转移到其他笔记应用中归档或增加知识网络储备了。

功能分析

从产品的功能分析开始,起初是觉得既然 ChatGPT 能快速获取内容,那如何能把获取的分块知识快速截取,做一定修改,归类打上标记,再导出呢?这样就可以方便转移到其他笔记应用中归档或增加到其他知识网络储备中了。

所以据上述目标目前已知需要的产品功能大致有:

  • 流式对话请求并展示;
  • 对话分块结果可再次编辑加工;
  • 关键词提取可编辑;
  • 对话分块可选中,导出文件、或

面对这些需求,前端需要做如下功能的技术调研并实现:

  • openai 流式接口 请求、获取并解析展示 markdown;
  • Markdown 编辑并实时预览;
  • 关键词提取 功能实现(是否需要借助语言分析 embadding);
  • 结果导出至剪切板,生成文件导出;

项目会在 React 生态中开发,除了做重要功能的预研,由于是从零开始的项目,也需要做一些基础设施的选型,主要包括:

  • 开发脚手架,目前偏C端项目,可纯静态、暂不需server;
  • 状态管理方案,全局状态管理,轻量,心智负担轻为主;
  • 组件库接入,功能及设计体系的快速接入实现;
  • 样式管理方案确定,明暗主题方案,动画方案,做好一定的交互体验优化;
  • 部署方案,docker一键部署,或其他平台快速部署等;

后续的文章会依次解决以上问题,并给出中间过程。

目前已经开发了部分,效果如下(不懂设计,轻喷(能用就行😅)): image.png

流式及关键词提取效果,由于不知道怎么贴视频,想看可以到这里: www.yuque.com/jhonxy/summ…

下一篇预告:ChatGPT对话类项目开发 - 基础框架调研

本系列中间过程的记录:《chat 对话类项目开发实践》临时记录为主,比较杂,仅供参考;

另外还有个人的每日学习专栏,感兴趣可以关注 每日学习记录 更新频率一般