[VUE] ChatGPT를 활용한 챗붓 만들기
Posted by Albert 849Day 4Hour 25Min 32Sec ago [2023-03-12]
요즘 Chat GPT로 너무 많은걸 쉽게 할 수 있게 되어 편하다.
일단 Python으로는 너무 쉽게 8줄에 챗붓 만드는 동영상을 보고 Vue로도 쉽게 구현가능할 것같아 검색중
https://github.com/memochou1993/gpt-prompt-trainer 에서 이미구현해놓은걸 발견하여 소스조금 수정하여 한국버전으로 변경하여 장난감 만들어 봤다.
openai.js chatgpt와 연결하기 위한 라이브러리
import axios from 'axios';
export const ROLE_ASSISTANT = 'assistant';
export const ROLE_SYSTEM = 'system';
export const ROLE_USER = 'user';
export const FINISH_REASON_LENGTH = 'length';
export const FINISH_REASON_STOP = 'stop';
const createClient = (key) => axios.create({
baseURL: 'https://api.openai.com',
headers: {
Authorization: `Bearer ${key}`,
},
});
const createCompletion = (client) => ({
messages,
}) => client.post('/v1/chat/completions', {
model: 'gpt-3.5-turbo',
messages,
});
export {
createClient,
createCompletion,
};
호출방법
const generatedMessages = computed(() => initMessages.value.concat(data.generatedMessages));
const remember = (key, value) => localStorage.setItem(key, value);
const rememberKey = () => localStorage.setItem('key', window.btoa(data.key));
const run = async () => {
// data.generatedMessages = [];
data.loads = true;
const client = createClient(data.key);
try {
const userMessages = data.userMessage.split('\n').filter((userMessage) => !!userMessage);
for await (const userMessage of userMessages) {
data.generatedMessages.push(new Message(ROLE_USER, userMessage));
data.userMessage = '';
const result = await createCompletion(client)({
messages: generatedMessages.value,
});
const { choices } = result.data;
const [choice] = choices;
const { message } = choice;
data.generatedMessages.push(new Message(ROLE_ASSISTANT, message.content));
document.getElementById('input-9').focus();
await new Promise((resolve) => setTimeout(resolve, data.delaySeconds * 1000));
data.loads = false;
}
} catch (err) {
data.error = err?.response?.data?.error?.message || err.message;
data.loads = false;
}
};
버튼을 클릭할때마다 통신하여 챗붓회신을 받아온다.
const result = await createCompletion(client)({
messages: generatedMessages.value,
});
뭐 물어보면 대답은 잘한다.
조금 이상한 말 할 때도 있지만 ㅋㅋ
원글: https://github.com/memochou1993/gpt-prompt-trainer
끝