首页 建站教程 前端学院

VUE开发接入ChatGpt教程分析

页面仿照微信聊天界面,点击机器人图标,弹出聊天框,消息分为用户消息,机器人消息两种,每次用户发送消息,请求后端接口获取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());
            }
        }
    }
}


评论(0)条

提示:请勿发布广告垃圾评论,否则封号处理!!

    猜你喜欢
    AI问答手ChatGPT3.1小程序源码/自带流量主版本

    AI问答手ChatGPT3.1小程序源码/自带流量主版本

     2023-03-01 1207

    AI问答手ChatGPT3.1小程序,自带流量主版本,里面又详细的搭建教程。最近ChatGPT真的是非常火,有兴趣的可以研究研究,这东西智者见智!

    最新ChatGPT小程序美化版/全新UI/超快回复速度

    最新ChatGPT小程序美化版/全新UI/超快回复速度

     2023-03-22 533

    最新ChatGPT小程序美化版,全新UI,超快回复速度。教程1、拉取项目后执行命令 npm install2、使用Hb工具打开项目 并中找到util包下的env.js修改相应配置3、点击根目录下的 manifest.json 找到要部署平台

    ChatGPT中文网页版带PHP接口源码

    ChatGPT中文网页版带PHP接口源码

     2023-02-12 443

    ChatGPT 中文网页版带PHP接口源码,分享一个ChatGPT中文站附PHP接口源码,让AI回答你的任何问题!ChatGPT 是 OpenAI 开发的一款专门从事对话的人工智能聊天机器人原型。聊天机器人是一种大型语言模型,采用

    ChatGPT3.0小程序源码/Uni-app云开发无需服务器开源vue自带接口!

    ChatGPT3.0小程序源码/Uni-app云开发无需服务器开源vue自带接口!

     2023-02-27 1534

    ChatGPT3.0小程序源码,Uni-app源码云开发无需服务器开源vue自带接口!后续会更新流量主版本!

    全开源chatGPT聊天机器人商业版源码/支持魔改/完全开放源代码

    全开源chatGPT聊天机器人商业版源码/支持魔改/完全开放源代码

     2023-05-08 892

    全开源ChatGPT聊天机器人商业版源码,支持魔改,完全开放源代码。CHATGPT商业源码、支持魔改、全开源、无后门、随意改!

    火爆全网的ChatGPT智能AI机器人微信小程序源码

    火爆全网的ChatGPT智能AI机器人微信小程序源码

     2023-02-16 856

    火爆全网的ChatGPT智能AI机器人微信小程序源码,最近ChatGPT智能AI聊天突然爆火了,ChatGPT 是 OpenAI 开发的一款专门从事对话的人工智能聊天机器人原型。聊天机器人是一种大型语言模型,采用监督学习和强化学习技术。Ch