ChatGpt接入个人的web平台作为对话智能聊天机器人

从去年就注册chatgpt后一直吃灰，最近突然就火了，铺天盖地的消息，把自己的账号利用起来，把它接到自己开发的web平台上面使用，很是方便。

案例展示-实现方案

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

前端工程代码：

<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 class="msg-area" id="msgarea" >
                <div v-for="msg in msgList" :key="msg">
                    <div class="user-msg" v-if="msg.isUser">
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
                        <el-card shadow="always" class="msg-card-user"> {{ msg.content }} </el-card>
                    </div>
                    <div class="robot-msg" v-else>
                        <el-avatar src="https://s1.ax1x.com/2023/02/09/pSWy9QU.png" />
                        <el-card shadow="always" class="msg-card-robot"> {{ msg.content }} </el-card>
                    </div>
                </div>
 
 
            </div>
            <template #footer>
                <span class="dialog-footer" 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 lang="ts">
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>

后端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 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");
        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;
    }
}

后端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());
            }
        }
    }
}