页面仿照微信聊天界面，点击机器人图标，弹出聊天框，消息分为用户消息，机器人消息两种，每次用户发送消息，请求后端接口获取chatgpt返回的信息，添加到消息列表中，推送给用户。
不直接通过前端请求chatgpt官方接口，否则会泄露个人的api-key，在官方接口的基础上封装一层，并添加rsa加密，前端请求时进行rsa加密，后端查取数据前，进行rsa解密，防止恶意请求（加密的字符根据个人而定，比如我加密当前时间戳，解密后比较时间戳和当前时间，时差在一分钟之内则有效）
官方接口示例
curl --location --request POST 'https://api.openai.com/v1/completions' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer 这里用注册chatgpt后个人的api-key替换' \
--data-raw '{"prompt": "讲个故事", "max_tokens": 2048, "model": "text-davinci-003"}'VUE前端示例
<template>
<div>
<el-avatar @click="viewClick" :size="50" src="https://s1.ax1x.com/2023/02/09/pSWy9QU.png"></el-avatar>
<el-dialog v-model="viewStatus" title="聊天机器人" width="40%">
<div id="msgarea" >
<div v-for="msg in msgList" :key="msg">
<div v-if="msg.isUser">
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
<el-card shadow="always"> {{ msg.content }} </el-card>
</div>
<div v-else>
<el-avatar src="https://s1.ax1x.com/2023/02/09/pSWy9QU.png" />
<el-card shadow="always"> {{ msg.content }} </el-card>
</div>
</div>
</div>
<template #footer>
<span v-loading="loading">
<el-input v-model="input" placeholder="please input" />
<el-button type="primary" @click="sendMsg">
send
</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue'
import { encryptMI } from '@/type/rsa'
import { sendChat } from '@/request/api'
import { requestResultNoti } from '@/request/resultNotification';
interface MessageInterface {
id?: number,
type?: string,
isUser: boolean,
content: string
}
export default defineComponent({
setup() {
const data = reactive({
viewStatus: false,
icon: "../asset/robot.png",
input: "",
count: 0,
loading: false,
msgList: [
{
"id": 0,
"isUser": false,
"content": "我是您的智能助手，请输入一个问题"
}
] as Array<MessageInterface>,
publicKey: '这里是rsa公钥'
})
const viewClick = () => {
data.viewStatus = !data.viewStatus
}
const scrollToEnd = () => {
console.log("滚动展示最新消息");
const element = document.getElementById('msgarea')
if (element !== null) {
element.scrollTop = element.scrollHeight
}
}
const sendMsg = () => {
if (data.input == "") return
const msg = {
"id": ++data.count,
"isUser": true,
"content": data.input
}
data.msgList.push(msg)
setTimeout(() => {
scrollToEnd()
}, 1000);
scrollToEnd()
const sendmsg = data.input
data.input = ""
data.loading = true
sendChat({
prompt: sendmsg,
token: encryptMI(new Date().getTime().toString(), data.publicKey) as string
}).then(
res => {
requestResultNoti(res);
if (res.data.content == undefined) {
data.loading = false
}
else {
const msgRobot = {
"id": ++data.count,
"isUser": res.data.isUser,
"content": res.data.content
}
data.msgList.push(msgRobot)
data.loading = false
setTimeout(() => {
scrollToEnd()
}, 2000);
}
})
}
return {
...toRefs(data),
viewClick,
sendMsg
}
}
})
</script>
<style scoped>
.user-msg {
margin-top: 15px;
margin-bottom: 15px;
display: inline;
float: right;
}
.msg-card-user {
width: 550px;
float: right;
}
.robot-msg {
margin-top: 15px;
margin-bottom: 15px;
text-align: left;
float: left;
}
.msg-card-robot {
width: 550px;
float: left;
}
.msg-area {
height: 580px;
overflow-x: hidden;
overflow-y: auto;
}
</style>Java后端示例
seivice层
package com.guojian.student.home.service.impl;/**
* Created on 2023/2/10.
*
* [url=home.php?mod=space&uid=686208]@AuThor[/url] GuoJian
* -version 1.0.0
*/
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.guojian.student.home.model.param.ChatParam;
import com.guojian.student.home.model.vo.ChatVO;
import com.guojian.student.home.service.ChatGptService;
import com.guojian.student.home.util.RSAUtils;
import org.apache.http.HttpEntity;
import org.apache.http.HttpStatus;
import org.apache.http.client.ClientProtocolException;
import org.apache.http.client.config.RequestConfig;
import org.apache.http.client.methods.CloseableHttpResponse;
import org.apache.http.client.methods.HttpPost;
import org.apache.http.entity.ContentType;
import org.apache.http.entity.StringEntity;
import org.apache.http.impl.client.CloseableHttpClient;
import org.apache.http.impl.client.HttpClients;
import org.apache.http.util.EntityUtils;
import org.springframework.stereotype.Service;
import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.security.NoSuchAlgorithmException;
import java.security.spec.InvalidKeySpecException;
import java.util.*;
/**
* @ClassName：ChatGptServiceImpl
* @Author: GuoJian
* @Date: 2023/2/10 8:57
* @Description: chatGpt二次封装服务实现
*/
@Service
public class ChatGptServiceImpl implements ChatGptService {
@Override
public ChatVO request(ChatParam chatParam){
String url = "https://api.openai.com/v1/completions";
Map<String,Object> jparam = new HashMap<>();
jparam.put("prompt", chatParam.getPrompt());
jparam.put("max_tokens", 2048);
jparam.put("model","text-davinci-003");
Map<String,String> headParams = new HashMap<>();
headParams.put("Content-Type","application/json");
headParams.put("Authorization","Bearer 个人aipkey替换这里");
String resultJson = doPostJson(url, JSONObject.toJSONString(jparam),headParams);
JSONObject jsonObject = JSON.parseObject(resultJson);
ChatVO result = new ChatVO();
result.setContent(jsonObject.getJSONArray("choices").getJSONObject(0).getString("text"));
result.setIsUser(false);
return result;
}
@Override
public String decipherin(String ciphertext) throws NoSuchAlgorithmException, InvalidKeySpecException {
String privateKey = "这里是私钥";
String decodedData = RSAUtils.privateDecrypt(ciphertext, RSAUtils.getPrivateKey(privateKey)); //传入密文和私钥,得到明文
return decodedData;
}
public static String doPostJson(String url, String params, Map<String,String> headParams) {
String result = null;
//1. 获取httpclient对象
CloseableHttpClient httpClient = HttpClients.createDefault();
CloseableHttpResponse response = null;
try {
//2. 创建post请求
HttpPost httpPost = new HttpPost(url);
//3.设置请求和传输超时时间
RequestConfig requestConfig = RequestConfig.custom().setSocketTimeout(120000).setConnectTimeout(120000).build();
httpPost.setConfig(requestConfig);
//4.提交参数发送请求
httpPost.setEntity(new StringEntity(params, ContentType.create("application/json", "utf-8")));
//设置请求头
for (String head : headParams.keySet()) {
httpPost.addHeader(head,headParams.get(head));
}
response = httpClient.execute(httpPost);
System.out.println(response);
//5.得到响应信息
int statusCode = response.getStatusLine().getStatusCode();
//6. 判断响应信息是否正确
if (HttpStatus.SC_OK != statusCode) {
//结束请求并抛出异常
httpPost.abort();
throw new RuntimeException("HttpClient,error status code :" + statusCode);
}
//7. 转换成实体类
HttpEntity entity = response.getEntity();
if (null != entity) {
result = EntityUtils.toString(entity, "UTF-8");
}
EntityUtils.consume(entity);
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
} catch (ClientProtocolException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
//8. 关闭所有资源连接
if (null != response) {
try {
response.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (null != httpClient) {
try {
httpClient.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
return result;
}
}Java后端代码示例
controller层
package com.guojian.student.home.controller;/**
* Created on 2023/2/10.
*
* @author GuoJian
* -version 1.0.0
*/
import com.guojian.student.home.common.ResponseBean;
import com.guojian.student.home.model.param.ChatParam;
import com.guojian.student.home.service.ChatGptService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.security.NoSuchAlgorithmException;
import java.security.spec.InvalidKeySpecException;
/**
* @ClassName：ChatGptController
* @Author: GuoJian
* @Date: 2023/2/10 9:56
* @Description: chatgpt二次封装controller
*/
@RestController
@RequestMapping("/student/home/api")
@Slf4j
@CrossOrigin
public class ChatGptController {
@Autowired
ChatGptService chatGptService;
@RequestMapping(value = "/chatgpt/send", method = RequestMethod.POST)
public ResponseBean chat(@RequestBody ChatParam param) throws NoSuchAlgorithmException, InvalidKeySpecException {
if (System.currentTimeMillis() - Long.parseLong(chatGptService.decipherin(param.getToken())) >= 60000) {
return ResponseBean.fail("无效的token");
} else {
try {
return ResponseBean.success(chatGptService.request(param));
} catch (Exception e) {
log.error("请求失败：", e);
return ResponseBean.fail("请求失败：" + e.getMessage());
}
}
}
}相关专题
ChatGPT
2023-02-13 201ChatGPT是一款最近非常火的人工智能系统,我的站长站为了体验一下ChatGPT的强大,在网络上收集了许多关于ChatGPT的信息,分享给大家.包含大家最关系的ChatGPT注册方...
- chatgpt连续对话本地搭建源码 [2024-02-07]
- ChatGPT+AI实战智能虚拟数字人项目教程 [2024-01-26]
- nodejs框架Nine AI ChatGPT系统网站源码2.4.2 [2024-01-16]
- GPT4All Chat一建本地部署Chatgpt [2023-12-31]
- ChatGpt从0开始学习人工智能 [2023-12-22]
