ChatGPT火爆的同时，国内访问限制较多，其他对接过的产品前提也是有次数限制，有很多小伙伴没法痛快的玩耍。想通过此文手把手从0开始，让我们通过Springboot+uniapp+uview2对接OpenAI-Java，复刻出一个我们自己的chatGPT，并支持H5/APP/小程序多端发布。
通过uniapp+uview2 完成基本注册登录页，实现聊天界面，并模仿ChatGPT实现打字机打印效果
通过SpringBoot对接OpenAI接口，实现ChatGpt聊天基本流程
通过接口对接，实现全流程，并通过uniapp打包测试与AI聊天
自制ChatGPT 聊天gif动图
登录注册图
聊天图
关注公众号【JavaDog程序狗】，发送【ChatGPT源码】即可无套路获得
需要API keys管理的SECRET KEY，作为调用接口的参数
关于如何注册账号？请参考本狗文章【ChatGPT】手摸手，带你玩转ChatGPT
| 工具 | 版本 | 用途 |
|---|---|---|
| IDEA | 2021.3.2 | Java开发工具 |
| HBuilder X | 3.6.18.20230117 | 前端开发者服务的通用 IDE |
| 账号 | 功能 | key |
|---|---|---|
| openai | API keys | SECRET KEY |
| 插件 | 版本 | 用途 |
|---|---|---|
| uview-ui | ^2.0.31 | 多平台快速开发的UI框架 |
| mescroll-uni | 1.3.7 | mescroll高性能的下拉刷新上拉加载组件 |
| 插件 | 版本 | 用途 |
|---|---|---|
| jdk | 1.8 | java环境 |
| lombok | 1.18.16 | 代码简化插件 |
| maven | 3.6.3 | 包管理工具 |
| druid | 1.1.24 | JDBC组件 |
| hutool | 5.7.20 | Java工具类库 |
| mybatis-plus | 3.4.1 | 基于 MyBatis 增强工具 |
| mysql | 8.0 / 5.7 | 数据库 |
| openai-gpt3-java | 0.10.0 | OpenAI提供的 API |
什么是openai-gpt3-java？
面向Java的openai gpt3模型的封装依赖，目前OpenAI只开放了GPT3模型的相关API，经过实际验证，GPT3模型的API，在回答问题的水平上已经接近ChatGPT 70~80%的水平，但与官网模型还是稍有差异，功能性不全。
后端：提供用户登录，注册，聊天等接口，对接openai-gpt3-java。
前端：画出登录，注册，聊天页面，消息分页，下拉加载历史数据，AI消息打印展现效果等页面操作。
对接：前后端对接，实现模仿ChatGPT与智能AI聊天基本功能。
具体搭建此处省略，如有疑问请参考【SpringBoot】还不会SpringBoot项目模块分层？来这手把手教你 完全跟着复制分层即可。还有doc文件夹下有DB脚本，别忘跑！
引入openai-gpt3-java依赖，版本为 <openai.version>0.10.0</openai.version>
<!-- 导入openai依赖 -->
<dependency>
<groupId>com.theokanning.openai-gpt3-java</groupId>
<artifactId>client</artifactId>
<version>${openai.version}</version>
</dependency>调用openai-gpt3-java方法
// 调用openai-gpt3-java方法
OpenAiService service = new OpenAiService(OPENAPI_TOKEN, TIMEOUT);
CompletionRequest.CompletionRequestBuilder builder = CompletionRequest.builder()
.model(MODEL)
.prompt(String.format(PROMPT, message.getMsgContent()))
.temperature(TEMPERATURE)
.maxTokens(1000)
.topP(TOPP)
.frequencyPenalty(FREQUENCYPENALTY)
.presencePenalty(PRESENCEPENALTY);
CompletionRequest completionRequest = builder.build();
List<CompletionChoice> questionAnswer = service.createCompletion(completionRequest).getChoices();
String endQuestionAnswer = "";
for (CompletionChoice completionChoice : questionAnswer) {
endQuestionAnswer = endQuestionAnswer.concat(completionChoice.getText());
}
return endQuestionAnswer;参考github文档https://github.com/TheoKanning/openai-java
参数分析
- OPENAPI_TOKEN
访问https://platform.openai.com/account/api-keys，在openai 账号管理API keys中找到SECRET KEY，这个是调用接口凭据
- TIMEOUT
超时时间，毫秒为单位，本狗写了30000，共30秒
- MODEL
模型，本狗写入text-davinci-003，模型是AI聊天
- PROMPT
对话，与AI接口交互的内容，如【你是谁？】
- TEMPERATURE
模型将承担风险的高低，如0.9
- TOPP
情绪采样，如1.0
- FREQUENCYPENALTY
频率处罚系数，如0.0
- PRESENCEPENALTY
重复处罚系数，如0.6
如何实现打字机效果？
原理就是采用定时器，每次截取一个字节进行内容填充
// interval
intervalFunc(){
// 深拷贝内容
let content = uni.$u.deepClone(this.targetContent);
// 记录次数
this.times++;
if(this.times == content.length){
clearInterval(this.interval)
}
this.targetMsg.msgContent = content.substring(0,this.times);
this.$set(this.msgList, this.msgList.length-1, this.targetMsg);
this.$nextTick(function () {
this.mescroll.scrollTo(99999, 0)
})
},例：AI返回的数据为【我真的好喜欢你！】 每次substring截取一个字符，然后进行填充渲染结果为 我 我真 我真的 我真的好 ...
这样就可以实现简单的打字机效果，网上还有通过CSS形式实现的，都可参考
修改环境变量
直接在IDEA运行启动
先在项目目录中执行 npm i ，下载依赖
修改环境变量，在/common/config/env.js下
然后再HBuilder X工具中点击运行即可
本文简单实现了OpenAI-Java接口对接，模仿ChatGPT做了一个简易AI聊天，其中功能较为简单，适用于学习练手，其中略过了很多基础的搭建环节，大家如果对从零一步一步搭建项目比较感兴趣或期望较高，请再评论区留言，反响多的话我会再出一版从零开始，手把手搭建项目的文章。
欢迎大家关注公众号【JavaDog程序狗】，任何留言需要我都会及时回复，希望我们一同进步
