作ったものはこんな感じ
Ajaxを用いて、非同期処理を実行し、JSON形式でChatGPT APIにアクセスしています。
解説が雑で申し訳ありません。タイミングをみて解説を記載します
■HTML
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>OpenAI Chat Bot</title>
<script th:src="@{/js/chatgpt.js}"></script>
</head>
<body>
<div class="chat-input-area">
<input type="text" id="input-field"/>
<input type="button" value="送信" id="send-button">
</div>
<div class="chat-response-area">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
■JS
chatgpt.js
window.onload = function(){
$('#send-button').on('click', function() {
const message = $('#input-field').val();
sendRequest(message);
});
};
//OpenAI APIにリクエストを送信する処理
function sendRequest(message) {
$.ajax({
url: "/openAiChat",
type: "POST",
contentType: "application/json",
data: JSON.stringify({
message : message
})
}).done(function(response) {
$('.chat-response-area').html('<p>' + insertNewlines(response) + '</p>');
}).fail(function() {
console.log("きてない");
});
}
// 。(句点)ごとに改行コードを挿入する。
function insertNewlines(str) {
var result = '';
var len = str.length;
var i = 0;
while (i < len) {
var substr = str.substring(i, i + 10);
var idx = substr.lastIndexOf('。');
if (idx !== -1) {
result += substr.substring(0, idx + 1) + '<br>';
i += idx + 1;
} else {
result += substr;
i += 10;
}
}
return result;
}
■Java(Controller)
ChatAjaxController.java
package com.chatgpt.web.controller;
import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.io.OutputStreamWriter;
import java.net.HttpURLConnection;
import java.net.URL;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.chatgpt.web.dto.Message;
import com.chatgpt.web.utility.PropertyUtil;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonObject;
@RestController
@RequestMapping("")
public class ChatAjaxController {
// APIのURL
private static final String URL = PropertyUtil.getProperty("api.url");
// API Keyを取得(本来は環境変数に設定しておく方が良いです。現状はプロパティファイルから取得しています。)
private static final String API_KEY = PropertyUtil.getProperty("api.key");
@PostMapping("/openAiChat")
public ResponseEntity<String> openAiChat(@RequestBody Message messages) {
//ChatGPTのバージョン
String model = "gpt-3.5-turbo";
// 送信したいメッセージ
String message = "{\"role\": \"system\", \"content\": \"返答は日本語で\"},{\"role\": \"user\", \"content\": \" "+ messages.getMessage() +" \"}";
String content = "";
try {
// HTTPリクエストの作成
URL obj = new URL(URL);
HttpURLConnection con = (HttpURLConnection) obj.openConnection();
con.setRequestMethod("POST");
con.setRequestProperty("Content-Type", "application/json");
con.setRequestProperty("Authorization", "Bearer " + API_KEY);
con.setDoOutput(true);
// リクエストの送信
OutputStreamWriter out = new OutputStreamWriter(con.getOutputStream());
out.write("{\"model\": \"" + model + "\", \"messages\": [" + message + "]}");
out.close();
// レスポンスの取得
BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream()));
Gson gson = new Gson();
JsonObject jsonResponse = gson.fromJson(in, JsonObject.class);
JsonArray choicesArray = jsonResponse.getAsJsonArray("choices");
JsonObject messageObject = choicesArray.get(0).getAsJsonObject().get("message").getAsJsonObject();
content = messageObject.get("content").getAsString();
} catch (Exception e) {
System.out.println(e);
}
return new ResponseEntity<>(content, HttpStatus.OK);
}
}
■参考(ほぼこの方のパクリです。)