使用java对接chatgpt（含全部代码）-Toy模板网

这篇具有很好参考价值的文章主要介绍了使用java对接chatgpt（含全部代码）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用java对接chatgpt（含全部代码）

因为对vscode不熟悉，前段界面我也是在idea里写的，先看一下效果图是这样，比较简陋

我直接上代码，关于chatgpt前端的html，对了因为这个是我用之前写的匿名群聊改的，可能有多余的就是样式没去掉，如果有人用的话自己看着可以优化下
前端这方面还有两个问题还没有优化我说一下，就是chatgpt返回的有markdown样式的话不能正常解析，二一个是换行有问题
不过不影响大方面使用，后期我会优化的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>chatgpt问答</title>
    <link rel="icon" href="./../images/favico.ico">
    <!--不同屏幕尺寸根字体设置-->
    <script src="./../js/base.js"></script>
    <!--element-ui的样式-->
    <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css"/>
    <!--引入vant样式-->
    <link rel="stylesheet" href="../styles/vant.min.css"/>
    <!-- 引入样式  -->
    <!--<link rel="stylesheet" href="../styles/index.css"/>-->
    <!--本页面内容的样式-->
    <link rel="stylesheet" href="./../styles/login.css"/>

    <style scoped>
        .chat {
            font-size: 20px;
            padding-left: 5%;
            padding-right: 5%;
            padding-top: 20px;
            position: absolute;
            height: 75%;
            width: 90%;
            /*height: 500px; !* 设置内容高度 *!*/
            overflow-y: scroll; /* 启用垂直滚动 */
            overflow-x: hidden; /* 禁用水平滚动 */
        }

        .chat-header .back-btn {
            margin-right: 16px;
            cursor: pointer;
        }

        .chat-header .user-avatar {
            margin-right: 12px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
        }

        .message-user img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        .chat-input {
            flex: 1;
            /*height: 40px;*/
            /*margin-right: 10px;*/
            padding-bottom: 10px;
        }

        form {
            position: fixed;
            /*padding-top: 20px;*/
            /*padding-left: 5%;*/
            bottom: 0;
            width: 90%
            /*padding-right: 5%;*/
        }

        p {
            color: black;
            font-size: 15px;
            margin-bottom: 10px;
        }

        .el-textarea {
            padding-right: 20px;
            display: inline-block;
            width: 70%;
        }

        .chat-input .el-button el-button--primary {
            margin-left: 10px;
        }

        .message-body img {
            width: 50%;
            height: 50%;
            object-fit: cover;
        }

        .avatar {
            margin-right: 12px;
            /*width: 40px;*/
            /*height: 40px;*/
            /*border-radius: 50%;*/
            overflow: hidden;
            float: left; /* 将用户头像框浮动到左侧 */
            margin-top: 5px; /* 稍微调整一下上边距，使其垂直居中 */
        }
        .message-content {
            overflow: hidden;
        }
        .message-content span{
            vertical-align: super;
        }
        .avatar img {
            width: 46px;
            height: auto;
        }

        .el-message-box {
            width: 300px;
        }

        [v-cloak] {
            display: none;
        }
    </style>


</head>
<body>

    <div class="chat" id="login" >
        <div class="chat-history" v-cloak>
            <div class="chat-bubble" v-for="message in messages" :key="message.id">
                <div class="message-content" v-if='message.role=="assistant"'>
                    <img :src="'./../images/1.ico'" alt="请等待">
                    <span>{{message.name}}</span>
                    <div class="content">{{message.content}}</div>
                </div>
                <div class="message-content" v-else>
                    <img :src="'./../images/2.ico'">
                    <span style="color: blue">{{message.name}}</span>
                    <div class="content">{{message.content}}</div>

                </div>
                <hr/>
            </div>
            <a id="myElement"></a>
        </div>

        <form>
            <div class="chat-input">
                <el-input :disabled="isButtonDisabled"
                          type="textarea"
                          placeholder="发送消息对chatgpt提问..."
                          v-model="input"
                ></el-input>
                <el-button type="primary"  @click="sendMessage">发送</el-button>
            </div>
        </form>
    </div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../backend/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../backend/plugins/element-ui/index.js"></script>
<!-- 引入vant样式 -->
<script src="./../js/vant.min.js"></script>
<!-- 引入axios -->
<script src="../../backend/plugins/axios/axios.min.js"></script>
<script src="./../js/request.js"></script>
<script src="./../api/login.js"></script>

</body>

<script>
    new Vue({
        el: "#login",
        data() {
            return {
                lock:true,
                input:'',
                messages:[
                ],
                isButtonDisabled: false,
                isInteger: 0
            };
        },
        created() {
            let uuid = localStorage.getItem('uuid');
            if (uuid == null) {
                uuid = Math.random().toString(36).substring(2, 10);
                localStorage.setItem('uuid', uuid);
            }
        },
        watch: {
            messages(value) {
                if (this.isInteger != value.length) {
                    this.isInteger = value.length;
                    this.scrollToEnd();
                }
            },
        },
        methods:{
            async sendMessage(){
                if (this.isButtonDisabled) {
                    return;
                }
                this.isButtonDisabled = true;

                let uuid = localStorage.getItem('uuid');
                if(this.input!=null&&this.input!=''&&this.lock==true){
                    this.lock=false;
                    this.messages.push({role:"user",content:this.input,name:"笨笨的杰瑞"});

                    $axios.post("/chatgpt", { userId: uuid, message: this.input })
                        .then((res) => {
                            this.messages.push({role:'assistant',content:res,name:"聪明的汤姆"});
                            this.lock=true;
                            this.isButtonDisabled = false;
                        });
                    this.input='';
                }
            },
            scrollToEnd() {
                const element = document.getElementById('myElement');
                element.scrollIntoView(false);
            }
        }
    });
</script>
</html>

后端代码如下

@RestController
@RequestMapping("/chatgpt")
public class chatgptController {
    private final String OPENAI_API_KEY = "你的sk";
    private final String OPENAI_API_URL = "https://api.openai.com/v1/chat/completions";
    private Map<String, List<String>> userSessions = new HashMap<>();

    @PostMapping
    public String chatWithGPT(@RequestBody ChatRequest chatRequest) {

        //获取用户的标识和消息
        String userId = chatRequest.getUserId();
        String message = chatRequest.getMessage();
        // 检查用户会话是否存在
        if (!userSessions.containsKey(userId)) {
            //第一次进来肯定不存在会话中，这时候我们放进去
            userSessions.put(userId, new ArrayList<>());
        }
        //把发送的消息扔进这个人的list中
        List<String> sessionMessages = userSessions.get(userId);
        sessionMessages.add(message);

        // 构建请求头
        HttpHeaders headers = new HttpHeaders();
        headers.setContentType(MediaType.APPLICATION_JSON);
        headers.setBearerAuth(OPENAI_API_KEY);

        // 构建请求体
        String requestBody = buildRequestBody(userId, sessionMessages);

        // 发送请求
        RestTemplate restTemplate = new RestTemplate();
        SimpleClientHttpRequestFactory factory = new SimpleClientHttpRequestFactory();
        //我用的呆里端口33210，这个要改
        factory.setProxy(new Proxy(Proxy.Type.HTTP, new InetSocketAddress("127.0.0.1", 33210)));
        restTemplate.setRequestFactory(factory);

        HttpEntity<String> request = new HttpEntity<>(requestBody, headers);
        ResponseEntity<String> response = restTemplate.postForEntity(OPENAI_API_URL,request, String.class);
        // 提取回复消息
        String responseBody = response.getBody();
        String reply = extractReplyFromResponse(responseBody);
        System.out.println("-------------------"+reply+"--------------------");

        //把回复消息也存进当前用户的的list中，方便上下文记忆
        sessionMessages.add(reply);

        return reply;
    }

    private String buildRequestBody(String userId, List<String> sessionMessages) {
        JSONArray messagesArray = new JSONArray();
        for (String message : sessionMessages) {
            JSONObject messageObj = new JSONObject();
            messageObj.put("role", "user");
            messageObj.put("content", message);
            messagesArray.add(messageObj);
        }

        JSONObject requestBodyObj = new JSONObject();
        requestBodyObj.put("model", "gpt-3.5-turbo");
        requestBodyObj.put("messages", messagesArray);

        return requestBodyObj.toString();
    }

    private String extractReplyFromResponse(String response) {
        JSONObject jsonObject = JSONUtil.parseObj(response);
        JSONArray choices = jsonObject.getJSONArray("choices");
        JSONObject firstChoice = choices.getJSONObject(0);
        JSONObject message = firstChoice.getJSONObject("message");
        String reply = message.getStr("content");

        return reply;
    }
}