VUE开发接入ChatGpt教程分析
3783
页面仿照微信聊天界面，点击机器人图标，弹出聊天框，消息分为用户消息，机器人消息两种，每次用户发送消息，请求后端接口获取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());
}
}
}
}本文网址：https://www.zztuku.com/index.php/detail-13813.html
站长图库 - VUE开发接入ChatGpt教程分析
申明：如有侵犯，请 联系我们 删除。
您还没有登录，请 登录 后发表评论！
提示：请勿发布广告垃圾评论，否则封号处理！！