ํํ์ด์ง ๋งํฌ : https://platform.openai.com/playground
OpenAI API
An API for accessing new AI models developed by OpenAI
platform.openai.com
์ฌ๊ธฐ๋ก ์ ์ํ ํ chap gpt์ฒ๋ผ ๋ด๊ฐ ํ๊ณ ์ถ์ ์ง๋ฌธ์ ์์ด๋ก ์์ฑํ ํ submit ๋ฒํผ์ ๋๋ฅด๋ฉด ํ๊ดํ์ ๋์ด์๋ AI์ ๋ต๋ณ์ ์ป์ ์ ์๋ค!
์ด์ ๋ณธ๊ฒฉ์ ์ผ๋ก AI ์ฌ์ด๋ฒ ์ฌ์น์ ๋ง๋ค์ด๋ณด๋๋ก ํ๊ฒ ๋ค!!
VSCode๋ฅผ ์ ์ํ ํ ์ ํด๋๋ฅผ ์ฐ ํ์ GIRLFRIEND๋ผ๋ ์ด๋ฆ์ผ๋ก ํด๋๋ฅผ ์์ฑํ๊ณ index.html์ !๋ฅผ ์ด์ฉํด์ ๊ธฐ๋ณธ ํฌ๋ฉง์ ๋ง๋ค์๋ค!
์ ์ฒด ์ฝ๋๋ฅผ ์์ฑํ ํ ํ์ผ ์ฐ์ธก ํด๋ฆญํ Open In Default Browser๋ก ํํ์ด์ง์์ ์ง์ ํ์ธํด๋ณธ๋ท
# ์ ์ฒด ์์ค์ฝ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.chat-content { height: 350px; overflow-y: scroll;}
.line { margin-top: 10px; display: flex;}
.chat-box {background: #eee; padding: 5px; max-width: 200px;}
.mine {margin-left: auto;}
</style>
<div class="chat-content">
<div class="line">
<span class="chat-box">์๋
?</span>
</div>
<div class="line">
<span class="chat-box mine">์๋
!</span>
</div>
</div>
<input class="chat-box" id="input">
<button id="send">์ ์ก</button>
<script type="module">
import { Configuration, OpenAIApi } from 'https://cdn.skypack.dev/openai';
document.querySelector('#send').addEventListener('click', function(){
var template = `<div class="line">
<span class="chat-box mine">${ document.querySelector('#input').value }</span>
</div>`
document.querySelector('.chat-content').insertAdjacentHTML('beforeend', template);
const configuration = new Configuration({
apiKey: 'openai์์ ๋ฐ๊ธ๋ฐ์ api key',
});
const openai = new OpenAIApi(configuration);
openai.createCompletion({
model: "text-davinci-002",
prompt: document.querySelector('#input').value,
temperature: 0.7,
max_tokens: 256,
top_p: 1,
frequency_penalty: 0,
presence_penalty: 0,
}).then((result)=>{
console.log(result.data.choices[0].text)
var template = `<div class="line">
<span class="chat-box">${ result.data.choices[0].text }</span>
</div>`
document.querySelector('.chat-content').insertAdjacentHTML('beforeend', template);
})
})
</script>
</body>
</html>
# ์คํ ํ๋ฉด
๊ทธ ์ดํ์๋ View Code๋ถ๋ถ์ ํด๋ฆญํ ํ ๋ณต๋ถํด์ค๋ค
์ด ๋ถ๋ถ์ ์์ค์ฝ๋ ๋ด์์ ์ฌ์ฉํ์ง๋ง ์์ ์์ค์ฝ๋๋ ์๋ ๋ฒ์ ์ด๊ธฐ ๋๋ฌธ์ ๋ค๋ฅผ ์ ์๋ค
๋ฐ๋ผ์ ๊ทธ๋ฅ ์์ ์์ค์ฝ๋๋ฅผ ์ด์ฉํ๋ api Key๋ถ๋ถ๋ง ๋ฐ๊พธ๋ฉด ๋๋ค
api Key๋ถ๋ถ์์๋ ๋ง์ดํ์ด์ง์์ ์ํฌ๋ฆฟ ํค๋ฅผ ๋ฐ๊ธ๋ฐ๊ณ ๊ทธ๊ฒ์ ๋ณต์ฌํด์ ๋ถ์ฌ๋ฃ๊ธฐ ํ๋ฉด ๋๋ค
ํด๋น ๋งํฌ๋ฅผ ์ฐธ์กฐํ๊ธฐ ๋ฐ๋๋ค
https://jaewonna.tistory.com/203
์คํ ํ๋ฉด์ ๋ค์๊ณผ ๊ฐ๋ค!
ref : https://www.youtube.com/watch?v=rdWavi2M2HE
์ ํ์ฝ๋ฉ - ์ฌ์ด๋ฒ ์ฌ์น ๋ง๋ค๊ธฐ
ref : https://github.com/codingapple1/gpt3chat/tree/main
GitHub - codingapple1/gpt3chat
Contribute to codingapple1/gpt3chat development by creating an account on GitHub.
github.com
๊นํ๋ธ ์ ์ฒด ์์ค์ฝ๋
โป ํ์ฌ ์ํ๋ ์์ด๋ก๋ง ๋ํ๊ฐ ๊ฐ๋ฅํ ์ํ๊ณ ํ๊ธ๋ก ๋ํ๋ฅผ ํ๊ณ ์ถ๋ค๋ฉด
๋ค์ด๋ฒ ๊ฐ๋ฐ์ ์ผํฐ์์ idํค์ ์ํฌ๋ฆฟํค๋ฅผ ๋ฐ๊ธ๋ฐ์ํ ์์ค์ฝ๋ ์์ ๊ธฐ์ ํด์ผ ํ๋ค
ํด๋น ์์ค๋ ์ ๊นํ๋ธ ์ ์ฒด ์์ค์ฝ๋์ ์๋ค!
'AI ์ธ๊ณต์ง๋ฅ๐' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [OpenAi๐ฑ] ChatGPT ์ฑ ๊ฐ๋ฐ์ ์ํ API ํค ๋ฐ๊ธ ๋ฐ๊ธฐ (0) | 2023.05.22 |
|---|---|
| ChatGPT๋ก ์ฝ๋ฉํ๊ธฐ ๊ฐ์ฆ์๐ (2) | 2023.04.11 |
| [IT TREND] ํ๋กฌํํธ ์์ง๋์ด๋ง๐งธ (0) | 2023.04.09 |
| ํ๋กฌํํธ ์์ง๋์ด(Prompt Engineer) ์ ๋ฌด, ์๊ฒฉ, ์ฐ๋ด, ์ ๋ง๐ฅบ (0) | 2023.04.06 |
