当前位置:   article > 正文

SpringBoot 整合 ChatGPT API 项目实战,十分钟快速搞定!

springboot+chatgpt
 
 

往期热门文章:

 
 
  1. 110款低代码平台YYDS!
  2. 2、使用 @Autowired 为什么会被 IDEA 警告,应该怎么修改最佳?
  3. 3、每天 100 万次登陆请求,8G 内存该如何设置 JVM 参数?
  4. 412种接口优化的通用方案,我又偷偷学到一波~
  5. 5、如何搭建一台永久运行的个人服务器?

最近ChatGPTd大火,在体验到了ChatGPT的强大之后,那么我们会想,如果我们想基于ChatGPT开发一个自己的聊天机器人,这个能搞定吗?

ChatGPT平台已经为技术提供了一个入口了,作为一个Java程序员,我们第一时间想到的就是快速开发一个应用,接入ChatGPT的接口,很简单的就可以实现了。下面我们就开始用最熟悉的springboot框架进行快速开发吧

一、准备工作

(1)已成功注册 OpenAI 的账号。

(2)创建 API KEY,这个 API KEY 是用于 HTTP 请求身份验证的,可以创建多个。注意这个创建之后需要马上复制好保存,关闭弹框之后就看不到了。

(3)官方 API 文档链接:

https://platform.openai.com/docs/api-reference/authentication

(4)注意 API 调用是收费的,但是 OpenAI 已经为我们免费提供了18美元的用量,足够大家放心使用。

5a8733c71d2611f6117a0ea50e070f75.png

二、补全接口示例

该接口功能较多,支持最常用的问答功能。

(1)请求方式,Post

(2)url:https://api.openai.com/v1/completions

(3)请求体 (json)。

  1. {
  2.   "model""text-davinci-003",
  3.   "prompt""Say this is a test",
  4.   "max_tokens"7,
  5.   "temperature"0,
  6.   "top_p"1,
  7.   "n"1,
  8.   "stream"false
  9. }

(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:

d0f9c053cb21f7a29b215d416e611673.png

这个 API KEY 是用于 HTTP 请求身份验证的,可以创建多个。注意这个创建之后需要马上复制好保存,关闭弹框之后就看不到了。

四、JavaScript调用API

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

  1. <!doctype html>
  2. <html class="no-js" lang="">
  3.    <head>
  4.       <meta charset="utf-8">
  5.       <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.       <title>Ai - Chat</title>
  7.       <meta name="description" content="">
  8.       <meta name="viewport" content="width=device-width, initial-scale=1">
  9.       <style>
  10.          #chatgpt-response {
  11.             font-family: "宋体";
  12.             font-size: 20px;
  13.             color: #0000FF;
  14.             font-weight: bold;
  15.          }
  16. </style>
  17.       <script>
  18.          async function callCHATGPT() {
  19.             var responseText1 = document.getElementById("chatgpt-response");
  20.             responseText1.innerHTML = ""
  21.             function printMessage(message) {
  22.                var responseText = document.getElementById("chatgpt-response");
  23.                var index = 0;
  24.                // 创建一个定时器,每隔一段时间打印一个字符
  25.                var interval = setInterval(function() {
  26.                      responseText.innerHTML += message[index];
  27.                      index++;
  28.                      // 当打印完成时,清除定时器
  29.                      if (index >= message.length) {
  30.                         clearInterval(interval);
  31.                      }
  32.                   },
  33.                   150); // 每隔50毫秒打印一个字符
  34.             }
  35.             var xhr = new XMLHttpRequest();
  36.             var url = "https://api.openai.com/v1/completions";
  37.             xhr.open("POST", url, true);
  38.             xhr.setRequestHeader("Content-Type""application/json");
  39.             xhr.setRequestHeader("Authorization""Bearer API-KEY");
  40.             xhr.onreadystatechange = function() {
  41.                if (xhr.readyState === 4 && xhr.status === 200) {
  42.                   var json = JSON.parse(xhr.responseText);
  43.                   var response = json.choices[0].text;
  44.                   // 将CHATGPT的返回值输出到文本框
  45.                   var responseText = document.getElementById("chatgpt-response");
  46.                   var index = 0;
  47.                   // 创建一个定时器,每隔一段时间打印一个字符
  48.                   var interval = setInterval(function() {
  49.                         responseText.innerHTML += response[index];
  50.                         index++;
  51.                         // 当打印完成时,清除定时器
  52.                         if (index >= response.length) {
  53.                            clearInterval(interval);
  54.                         }
  55.                      },
  56.                      50); // 每隔50毫秒打印一个字符
  57.                }
  58.             };
  59.             var data = JSON.stringify({
  60.                "prompt": document.getElementById("chat-gpt-input").value,
  61.                "max_tokens"2048,
  62.                "temperature"0.5,
  63.                "top_p"1,
  64.                "frequency_penalty"0,
  65.                "presence_penalty"0,
  66.                "model""text-davinci-003"
  67.             });
  68.             console.log(data);
  69.             await printMessage('正在思考,请等待......');
  70.             await xhr.send(data);
  71.          }
  72. </script>
  73.    </head>
  74.    <body>
  75.       <div class="filter-menu text-center mb-40">
  76.          <h4>与Ai对话,请描述您的需求-支持中文、英语、日本语等</h4>
  77.       </div>
  78.       <textarea class="form-control" id="chat-gpt-input" placeholder="输入描述" rows="3" resize="none"
  79.          style="width: 135%; margin: 0 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 12px;"></textarea>
  80.       <button onclick="callCHATGPT()" autocomplete="off" class="btn btn-large" href="#"
  81.          style="background-color: #333; color: #f4f4f4; border-radius: 10px">
  82.          <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>回答
  83.       </button>
  84.       <textarea class="form-control" id="chatgpt-response"
  85.          placeholder="请耐心等待回答 Ai生成它很快,但是由于网络问题我们需要等待,通常内容越长等待越久 如果长时间没反应请刷新页面重试" rows="26" resize="none"
  86.          style="width: 150%;height: auto; margin: 0 auto; background-color: #f4f4f4; color: #333; border: 1px solid #ccc; border-radius: 10px; overflow: scroll;"
  87.          readonly="true"></textarea>

注意:需要替换自己的api-key,修改这一行代码:

xhr.setRequestHeader("Authorization", "Bearer API-KEY")。

运行一下html,看下效果:

93848bde8251c476aff95b500219481c.png

五、SpringBoot使用ChatGPT API

(1)构建一个Spring Boot项目,这里使用的是2.7.6版本;

(2)引入依赖:

  1. <dependency>
  2.     <groupId>com.theokanning.openai-gpt3-java</groupId>
  3.     <artifactId>service</artifactId>
  4.     <version>0.10.0</version>
  5. </dependency>

官网链接地址:https://platform.openai.com/docs/libraries/community-libraries

(3)请求代码:

  1. String token = "API-KEY ";//System.getenv("OPENAI_TOKEN");
  2. OpenAiService service = new OpenAiService(token);
  3. CompletionRequest completionRequest = CompletionRequest.builder()
  4.         .model("text-davinci-003")
  5.         .prompt("今天天气怎么样?")
  6.         .temperature(0.5)
  7.         .maxTokens(2048)
  8.         .topP(1D)
  9.         .frequencyPenalty(0D)
  10.         .presencePenalty(0D)
  11.         .build();
  12. service.createCompletion(completionRequest).getChoices().forEach(System.out::println);

请替换API-KEY。

运行程序:

b57776eb3004a6c50e13071b7c489abf.png

  1. 我就是我,是颜色不一样的烟火。
  2. 我就是我,是与众不同的小苹果。
申请到API-KEY的小伙伴们赶紧去试试吧!
  1. 往期热门文章:
  2. 1、京东一面:MySQL 中的 distinct 和 group by 哪个效率更高?太刁钻了吧!
  3. 2、使用 try-catch 捕获异常真的会影响性能?
  4. 3、你的 IDE 太重了,试试 Emacs吧!
  5. 4、还在手写CRUD代码?试试这款代码生成工具吧,彻底解放双手!
  6. 5、JetBrains 如何看待自己的软件在中国被频繁破解?
  7. 6、无话可说,北邮211本科不符合华为OD要求,清华硕士符合!
  8. 7、RESTful真垃圾?试试 GraphQL?
  9. 8、这 7 个GitHub仓库,够学一辈子!
  10. 9、低欲望的后厂村:“遍地”985211,高收入低消费,偏爱996
  11. 10、Javalin:一个超轻量级Web Framework!
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/weixin_40725706/article/detail/634194
推荐阅读
相关标签
  

闽ICP备14008679号