欢迎！我白天是个邮递员，晚上就是个有抱负的演员。这是我的网站。我住在天朝的帝都，有条叫做Jack的狗。
页面仿照微信聊天界面，点击机器人图标，弹出聊天框，消息分为用户消息，机器人消息两种，每次用户发送消息，请求后端接口获取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二次封装服务实现 */@Servicepublic 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@CrossOriginpublic 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()); } } }}
相关专题
