VUE开发接入ChatGpt教程分析
3998
页面仿照微信聊天界面,点击机器人图标,弹出聊天框,消息分为用户消息,机器人消息两种,每次用户发送消息,请求后端接口获取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教程分析
申明:如有侵犯,请 联系我们 删除。
您还没有登录,请 登录 后发表评论!
提示:请勿发布广告垃圾评论,否则封号处理!!