前言

🍊缘由

想让没体验过chatGPT的小伙伴，学习对接并复刻出自己的chatGPT

ChatGPT火爆的同时，国内访问限制较多，其他对接过的产品前提也是有次数限制，有很多小伙伴没法痛快的玩耍。想通过此文手把手从0开始，让我们通过Springboot+uniapp+uview2对接OpenAI-Java，复刻出一个我们自己的chatGPT，并支持H5/APP/小程序多端发布。

⏲️本文阅读时长

约20分钟

🎯主要目标

1.前端实现ChatGPT聊天页面

通过uniapp+uview2 完成基本注册登录页，实现聊天界面，并模仿ChatGPT实现打字机打印效果

2.后端与OpenAI实现对接

通过SpringBoot对接OpenAI接口，实现ChatGpt聊天基本流程

3.前后端接口对接

通过接口对接，实现全流程，并通过uniapp打包测试与AI聊天

🎨 水一波图

自制ChatGPT 聊天gif动图

登录注册图

聊天图

🍭体验地址

关注公众号【JavaDog程序狗】，即可获取在线体验

🍩源码

关注公众号【JavaDog程序狗】，发送【ChatGPT源码】即可无套路获得

🍪前置条件

拥有自己的openai 账号

需要API keys管理的SECRET KEY，作为调用接口的参数

关于如何注册账号？请参考本狗文章【ChatGPT】手摸手，带你玩转ChatGPT

🌰Tips: 如果没有账号可以关注公众号【JavaDog程序狗】回复【ChatGPT】即可获得账号

🍓猜你喜欢

1.【SpringBoot】还不会SpringBoot项目模块分层？来这手把手教你

2.【ChatGPT】手摸手，带你玩转ChatGPT

3.【Apifox Helper】自动生成接口文档，IDEA+Apifox懒人必备

正文

1.准备

开发工具

账号申请

主要组件

前端

后端

什么是openai-gpt3-java？

面向Java的openai gpt3模型的封装依赖，目前OpenAI只开放了GPT3模型的相关API，经过实际验证，GPT3模型的API，在回答问题的水平上已经接近ChatGPT 70~80%的水平，但与官网模型还是稍有差异，功能性不全。

2.功能分析

后端：提供用户登录，注册，聊天等接口，对接openai-gpt3-java。

前端：画出登录，注册，聊天页面，消息分页，下拉加载历史数据，AI消息打印展现效果等页面操作。

对接：前后端对接，实现模仿ChatGPT与智能AI聊天基本功能。

3.开发

后端代码总览

具体搭建此处省略，如有疑问请参考【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

参数分析

1. OPENAPI_TOKEN

访问https://platform.openai.com/account/api-keys，在openai 账号管理API keys中找到SECRET KEY，这个是调用接口凭据

2. TIMEOUT

超时时间，毫秒为单位，本狗写了30000，共30秒

3. MODEL

模型，本狗写入text-davinci-003，模型是AI聊天

4. PROMPT

对话，与AI接口交互的内容，如【你是谁？】

5. TEMPERATURE

模型将承担风险的高低，如0.9

6. TOPP

情绪采样，如1.0

7. FREQUENCYPENALTY

频率处罚系数，如0.0

8. 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形式实现的，都可参考

4.运行

后端

修改环境变量

直接在IDEA运行启动

前端

先在项目目录中执行 npm i ，下载依赖

修改环境变量，在/common/config/env.js下

然后再HBuilder X工具中点击运行即可

总结

本文简单实现了OpenAI-Java接口对接，模仿ChatGPT做了一个简易AI聊天，其中功能较为简单，适用于学习练手，其中略过了很多基础的搭建环节，大家如果对从零一步一步搭建项目比较感兴趣或期望较高，请再评论区留言，反响多的话我会再出一版从零开始，手把手搭建项目的文章。

写在最后

欢迎大家关注公众号【JavaDog程序狗】，任何留言需要我都会及时回复，希望我们一同进步