반응형
[javascript & ChatGPT] 자바스크립트로 chatGPT API 호출하는 방법 !!
javascript와 ajax를 사용하여 요즘 제일 핫한 chatGPT api 호출하는 방법입니다.
api 키를 발급 받아 변수에 넣어주시고 사용하시면 되세요 :)
예제코드
<!DOCTYPE html>
<html>
<head>
<title>chatGPT API</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* page-loading */
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.6;
background: #e4e4e4;
z-index: 99;
text-align: center;
}
#loading>img {
position: absolute;
top: 40%;
left: 45%;
z-index: 100;
}
#loading>p {
position: absolute;
top: 57%;
left: 43%;
z-index: 101;
}
</style>
</head>
<body>
<h1>chatGPT API</h1>
<div>무엇이든 질문해보세요 !!</div>
<input type="text" id="keywords" name="keywords" required />
<button onclick="chatGPT()">입력</button>
<div id="result"></div>
<div id="loading">
<img src="https://studentrights.sen.go.kr/images/common/loading.gif">
</div>
<script>
$(document).ready(function () {
$('#loading').hide();
});
function chatGPT() {
const api_key = "" // <- API KEY 입력
const keywords = document.getElementById('keywords').value
$('#loading').show();
const messages = [
{ role: 'system', content: 'You are a helpful assistant.' },
{ role: 'user', content: keywords + '에 대하여 최대한 도움이 되는 답변을 해줘.' },
]
const data = {
model: 'gpt-3.5-turbo',
temperature: 0.5,
n: 1,
messages: messages,
}
$.ajax({
url: "https://api.openai.com/v1/chat/completions",
method: 'POST',
headers: {
Authorization: "Bearer " + api_key,
'Content-Type': 'application/json',
},
data: JSON.stringify(data),
}).then(function (response) {
$('#loading').hide();
console.log(response)
let result = document.getElementById('result')
let pre = document.createElement('pre')
pre.innerHTML = "\n\n" + response.choices[0].message.content
result.appendChild(pre)
document.getElementById('keywords').value = ''
});
}
</script>
</body>
</html>결과값
728x90
반응형
'Coding > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트로 마우스 클릭 게임(점 클릭 게임) 만들기 !! (0) | 2023.04.24 |
|---|---|
| [JavaScript] 자바스크립트 정규식으로 사진 확장자 제거 하는 방법 !! (0) | 2023.04.23 |
| [JavaScript] 자바스크립트로 브라우저 크기 변경 및 사이즈 확인 하는 방법 !! (0) | 2023.04.18 |
| [JavaScript] 자바스크립트로 가위 바위 보 게임 만들기 !! (0) | 2023.04.16 |
| [JavaScript] 자바스크립트로 라이브러리 없이 TTS(Text-To-Speech) 기능 사용하는 방법 !! (0) | 2023.04.15 |
댓글