SpringBoot 整合ChatGPT API项目实战

news2024/12/23 0:25:03

准备工作

(1)已成功注册 OpenAI 的账号。
(2)创建 API KEY,这个 API KEY 是用于 HTTP 请求身份验证的,可以创建多个。
注意这个创建之后需要马上复制好保存,关闭弹框之后就看不到了。
(3)官方 API 文档链接:
https://platform.openai.com/docs/api-reference/authentication
(4)注意 API 调用是收费的,但是 OpenAI 已经为我们免费提供了18美元的用量,足够大家放心使用。

补全接口示例

该接口功能较多,支持最常用的问答功能。
(1)请求方式,Post
(2)url:https://api.openai.com/v1/completions
(3)请求体 (json){
  "model": "text-davinci-003",
  "prompt": "Say this is a test",
  "max_tokens": 7,
  "temperature": 0,
  "top_p": 1,
  "n": 1,
  "stream": false
}

(4)接口文档
https://platform.openai.com/docs/api-reference/completions/create

请求参数解析:
字段                说明
model               可选参教。语言模型,这里选择的是text-davinci-003
prompt              必选参数。即用户的输入。
max_tokens          可选参数,默认值为 16。最大分词数,会影响返回结果的长度.
temperature         可选参数,默认值为 1,取值 0-2。该值越大每次返回的结果越随机,即相似度越小。
top_p               可选参数,与temperature类似。
n                   可选参数,默认值为 1。表示对每条prompt生成多少条结果
stream              可选参数,默认值为false。表示是否回流部分结果

申请API-KEY

访问地址:
https://platform.openai.com/account/api-keys
登录账号,然后创建API KEY:
这个 API KEY 是用于 HTTP 请求身份验证的,可以创建多个。
注意这个创建之后需要马上复制好保存,关闭弹框之后就看不到了。

在这里插入图片描述

JavaScript调用API

直接可以使用js+html开发一个对话,具体的源码如下:

<!doctype html>
<html class="no-js" lang="">

   <head>
      <meta charset="utf-8">
      <meta http-equiv="x-ua-compatible" content="ie=edge">
      <title>Ai - Chat</title>
      <meta name="description" content="">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <style>
         #chatgpt-response {
            font-family: "宋体";
            font-size: 20px;
            color: #0000FF;
            font-weight: bold;
         }
</style>

      <script>
         async function callCHATGPT() {
            var responseText1 = document.getElementById("chatgpt-response");
            responseText1.innerHTML = ""

            function printMessage(message) {
               var responseText = document.getElementById("chatgpt-response");
               var index = 0;

               // 创建一个定时器,每隔一段时间打印一个字符
               var interval = setInterval(function() {
                     responseText.innerHTML += message[index];
                     index++;

                     // 当打印完成时,清除定时器
                     if (index >= message.length) {
                        clearInterval(interval);
                     }
                  },
                  150); // 每隔50毫秒打印一个字符
            }
            var xhr = new XMLHttpRequest();
            var url = "https://api.openai.com/v1/completions";
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.setRequestHeader("Authorization", "Bearer API-KEY");
            xhr.onreadystatechange = function() {
               if (xhr.readyState === 4 && xhr.status === 200) {
                  var json = JSON.parse(xhr.responseText);
                  var response = json.choices[0].text;

                  // 将CHATGPT的返回值输出到文本框
                  var responseText = document.getElementById("chatgpt-response");
                  var index = 0;

                  // 创建一个定时器,每隔一段时间打印一个字符
                  var interval = setInterval(function() {
                        responseText.innerHTML += response[index];
                        index++;

                        // 当打印完成时,清除定时器
                        if (index >= response.length) {
                           clearInterval(interval);
                        }
                     },
                     50); // 每隔50毫秒打印一个字符
               }
            };

            var data = JSON.stringify({
               "prompt": document.getElementById("chat-gpt-input").value,
               "max_tokens": 2048,
               "temperature": 0.5,
               "top_p": 1,
               "frequency_penalty": 0,
               "presence_penalty": 0,
               "model": "text-davinci-003"
            });
            console.log(data);
            await printMessage('正在思考,请等待......');
            await xhr.send(data);
         }
</script>
   </head>

   <body>

      <div class="filter-menu text-center mb-40">
         <h4>与Ai对话,请描述您的需求-支持中文、英语、日本语等</h4>
      </div>

      <textarea class="form-control" id="chat-gpt-input" placeholder="输入描述" rows="3" resize="none"
         style="width: 135%; margin: 0 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 12px;"></textarea>
      <button onclick="callCHATGPT()" autocomplete="off" class="btn btn-large" href="#"
         style="background-color: #333; color: #f4f4f4; border-radius: 10px">
         <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>回答
      </button>
      <textarea class="form-control" id="chatgpt-response"
         placeholder="请耐心等待回答 Ai生成它很快,但是由于网络问题我们需要等待,通常内容越长等待越久 如果长时间没反应请刷新页面重试" rows="26" resize="none"
         style="width: 150%;height: auto; margin: 0 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 10px; overflow: scroll;"
         readonly="true"></textarea>

注意:需要替换自己的api-key,修改这一行代码:
xhr.setRequestHeader(“Authorization”, “Bearer API-KEY”)。

SpringBoot使用ChatGPT API

(1)构建一个Spring Boot项目,这里使用的是2.7.6版本;
(2)引入依赖:
<dependency>
    <groupId>com.theokanning.openai-gpt3-java</groupId>
    <artifactId>service</artifactId>
    <version>0.10.0</version>
</dependency>

(3)请求代码:
String token = "API-KEY ";//System.getenv("OPENAI_TOKEN");
OpenAiService service = new OpenAiService(token);
CompletionRequest completionRequest = CompletionRequest.builder()
        .model("text-davinci-003")
        .prompt("今天天气怎么样?")
        .temperature(0.5)
        .maxTokens(2048)
        .topP(1D)
        .frequencyPenalty(0D)
        .presencePenalty(0D)
        .build();
service.createCompletion(completionRequest).getChoices().forEach(System.out::println);

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/433164.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

excel的导入导出的两种方案 (1 EasyExcel 2 Hutool工具类)

文章目录 前言1 EasyExcel的导入导出导出1 导入依赖2 项目中的CourseEntity实体类3 CoureseVo VO类 (对CourseEntity进行EasyExcel导入导出操作)4 导出代码的编写 并最终测试导出效果5 (前端内容 可选)通过vue按钮点击 导出 导入1 导入依赖 跟导出相同2 创建回调监听器3 编写导…

1、Typescript基础入门与环境搭建

1、开发工具安装与基本配置 1.1、软件下载安装 如果你还没有使用过VSCode&#xff0c;当然先要去官网下载了。下载完成后双击安装&#xff0c;一直下一步即可。 1.2、编辑器汉化 如果你英语不是很好&#xff0c;配置中文版界面是很有必要的&#xff0c;安装个插件就可以了。打…

虚化背景 - 基于镜头模糊滤镜的深度映射

镜头模糊 Lens Blur等滤镜可以使用深度映射 Depth Map来设置像素在视觉上的前后关系。因此&#xff0c;常利用深度映射来创建真实感虚化效果&#xff0c;或者进行超越镜头的任意虚化处理。 ◆ ◆ ◆ 基于 Alpha 通道的深度映射关系 一般可通过建立 Alpha 通道或图层蒙版来创建…

【算法基础】DP第三弹 —— 竞赛篇

一、计数问题 (一)Question 1. 问题描述 2. Input 输入包含多组测试数据。每组测试数据占一行,包含两个整数 a 和 b。当读入一行为 0 0 时,表示输入终止,且该行不作处理。(0 < a, b < 100000000) 3. Output 每组数据输出一个结果,每个结果占一行。每个结果包…

MIPI D-PHYv2.5笔记(21) -- Forward High-Speed Data Transmission Timing

声明&#xff1a;作者是做嵌入式软件开发的&#xff0c;并非专业的硬件设计人员&#xff0c;笔记内容根据自己的经验和对协议的理解输出&#xff0c;肯定存在有些理解和翻译不到位的地方&#xff0c;有疑问请参考原始规范看 DDR时钟差分信号和Data差分信号的时序关系如下图所示…

计及调度经济性的光热电站储热容量配置方法【IEEE30节点】(Matlab代码实现)

&#x1f4a5; &#x1f4a5; &#x1f49e; &#x1f49e; 欢迎来到本博客 ❤️ ❤️ &#x1f4a5; &#x1f4a5; &#x1f3c6; 博主优势&#xff1a; &#x1f31e; &#x1f31e; &#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 …

计算机网络简史

ARPANET的发展 互联网最早的雏形 1931-ARPANET设计 互联网名人堂 1965-packet switching(分包交换) 1969 第一个RFC(Request for Comments)(开始通过APPANET发布)第一个接口信息处理单元&#xff08;Interface Message Processor&#xff09;&#xff08;下图&#xff0c;节…

ChatGPT时代:我们可能站到了自然语言编程的大门口

ChatGPT大火&#xff0c;我现在有种感觉&#xff1a;我们可能站到了自然语言编程的门口&#xff0c;一脚下去&#xff0c;也许能把门踹开。 当然&#xff0c;也可能会踢到一块铁板。 回顾我们的编程之路&#xff0c;基本上就是一个编程门槛不断降低的历史。 最早的一批前辈们…

wireshark抓包工具的使用

前言 ①wireshark是非常流行的网络封包分析软件&#xff0c;功能十分强大。可以截取各种网络封包&#xff0c;显示网络封包的详细信息。 ②使用wireshark的人必须了解网络协议&#xff0c;否则就看不懂wireshark。 ③为了安全考虑&#xff0c;wireshark只能查看封包&#xff…

【Linux】进程通信之管道通信详解

&#x1f34e;作者&#xff1a;阿润菜菜 &#x1f4d6;专栏&#xff1a;Linux系统编程 一、什么是管道通信 1. 管道通信是一种在进程间传递数据的方法 其实管道通信是Unix中最古老的进程间通信的形式了&#xff1a; 管道通信是一种进程间通信的方式&#xff0c;它可以让一个进…

聚观早报|马斯克将TruthGPT挑战ChatGPT;腾讯披露自研芯片新进展

今日要闻&#xff1a;马斯克将TruthGPT挑战ChatGPT&#xff1b;苹果在印度年销售额近60亿美元&#xff1b;腾讯披露自研芯片沧海最新进展&#xff1b;特斯拉中国工厂普通工人月薪约1万元&#xff1b;飞猪将直接向阿里CEO张勇汇报 马斯克将TruthGPT挑战ChatGPT 4 月 18 日消息&…

Pytorch深度学习笔记(四)梯度向下算法

课程推荐&#xff1a;03.梯度下降算法_哔哩哔哩_bilibili 优化问题&#xff1a;求误差值函数最小的权重w &#xff08;1&#xff09;梯度向下算法思想 在绝大多数的情况下&#xff0c;损失函数是很复杂的&#xff08;比如逻辑回归&#xff09;&#xff0c;根本无法得到参数估计…

从输入url到页面展现(三)通过DNS将域名解析为IP地址以及dns-prefetch的好处

前言 上一节我们用直白的话讲了一下浏览器解析url&#xff0c;而浏览器并不具备发送网络消息的能力&#xff0c;所以委托操作系统发送&#xff0c;而这里的第一步&#xff0c;就是去找到对应web服务器的ip地址&#xff0c;并且对互联网和小子网有了一个认识。 这一节呢说一下我…

换个角度使用Redis去解决跨域存取Session问题

系列文章目录 Redis缓存穿透、击穿、雪崩问题及解决方法 Spring Cache的使用–快速上手篇 分页查询–Java项目实战篇 全局异常处理–Java实战项目篇 该系列文章持续更新&#xff0c;更多的文章请点击我的主页查看哦&#xff01; 文章目录 系列文章目录前言一、遇到的情况二、解…

golang 云效私有模块依赖拉取配置

相关文档 阿里官方文档 go 环境变量配置 export GOPRIVATEcodeup.aliyun.com 凭证设置 非常找重要,https密码配置克隆账户和克隆密码后续会用到 在 可以在 netrc 文件中指定凭据 Linux\MacOS 文件应该存放在执行账户的根目录下&#xff0c;即&#xff1a;~/.netrc sudo v…

SAS 9.3软件安装包下载及安装教程 办公软件

SAS 9.3软件简介&#xff1a; SAS 9.3是目前行业软件中的一款专业的数据统计分析软件&#xff0c;其核心功能包括高级分析、商业智能、客户智能、数据管理、风险管理和欺诈与安全智能六大模块&#xff0c;通过sas软件提供创新的分析、商业智能和数据管理软件与服务&#xff0c…

3Dsmax丨3dsmax2016软件下载安装教程 含全版本软件详细安装流程

大家好~随着计算机技术的发展&#xff0c;3D建模在各个行业中被广泛应用。以游戏行业为例&#xff0c;通过3D建模模型制作、灯光制作、材质渲染、细节润色、渲染合成等能够制作出游戏原神、王者荣耀、和平精英、英雄联盟、明日之后、光遇、哈利波特、剑网3、我的世界、第五人格…

SQL——关于bjpowernode.sql的33道经典例题之1-17

目录 1 查询每个部门最高薪水的人员名称 2 查询哪些人的薪水在部门平均薪水之上 3 查询每个部门的平均薪水等级 3.1 每个部门的平均薪水的等级 3.2 每个部门的平均的薪水等级 4 查询最高薪水&#xff08;不用max函数&#xff09; 5 查询平均薪水最高的部门的部门编号 …

如何使用 GPT-4 为博客目录页打造炫酷前端效果

前不久我用 cmd markdown 写了篇文章《项目 TO 的自我修养》&#xff0c;文章的目录如下&#xff1a; 当我把它发布到线上后&#xff0c;目录却只展示出了二级标题&#xff1a; 这哪行&#xff01;我猜这个可能就是加个配置啥的就能修复。于是马上就问 GPT-4 怎么办&#xff1f…

25.SSM-SpringMVC延续--拦截器与异常处理思想

目录 一、拦截器。 &#xff08;1&#xff09;拦截器的作用。 &#xff08;2&#xff09;拦截器与过滤器的区别。 &#xff08;3&#xff09;拦截器的方法。 &#xff08;4&#xff09;拦截器的快速入门。 &#xff08;5&#xff09;多拦截器。 &#xff08;5.1&#xf…