JS에서 Open-AI를 사용하는 Easy ChatBot

그래서 한동안 GitHub copilot을 사용해 왔습니다. GitHub Copilot은 VSCode/JB IDEs/NVIM용 플러그인으로 지능적인 코드 완성, 제안 및 일반적으로 소프트웨어 코딩의 차세대 기능을 제공합니다.

나는 항상 전체 AI 제안이 어떻게 작동하고 내 프로젝트에서 어떻게 사용될 수 있는지에 정말 관심이 있었습니다.



살펴보던 중 Open-AI의 text-davinci-002 모델을 위한 놀이터인 Open-AI Playground 을 발견했습니다.

Open-AI의 text-davinci-002 API는 무엇입니까?

text-davinci-002는 주어진 입력에서 텍스트를 생성하도록 훈련할 수 있는 모델입니다.

또한 실제로 사용하기 쉬운 모델과 상호 작용하는 API를 제공합니다.

const { Configuration, OpenAIApi } = require("openai");

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

const response = await openai.createCompletion("text-davinci-002", {
  prompt: "Hey how are you?\n", // question for the ai goes here
  temperature: 0, // 0 means no randomness and usually the best result
  max_tokens: 100, 
  top_p: 1.0,
  frequency_penalty: 0.2,
  presence_penalty: 0.0,
  stop: ["\n"],
});

챗봇 만들기

그래서 AI와 상호 작용하는 데 사용할 수 있는 ChatBot을 만들기로 결정했습니다. GitHubs Copilot으로 개발하면서 컨텍스트는 항상 매우 중요하며 AI가 어떤 종류의 응답을 제공해야 하는지 이해하는 데 도움이 된다는 것을 이미 알고 있었습니다.

그래서 가장 먼저 할 일은 AI를 구성하는 것입니다! 어떻게 물어? 명확한 텍스트로!

function conversationContext(aiName, attributes) {
  return `\n
    The following is a conversation with an AI. The AI is ${attributes}.
    \n
    Human:Hello
    \n
    ${aiName}:Hi, I am an AI. Whats your question?
    \n`
}

이제 우리는 이 컨텍스트를 AI에 제공하여 더 많은 컨텍스트를 통해 더 나은 응답을 제공할 것입니다.

const promt = () => {
return `${conversationContext(aiName, attributes)}Human:${question}
    \n
    ${aiName}:`
}

여기서 우리는 AI가 다음과 같이 말하길 원합니다.

Human:Hello, who are you?
AI:${responseFromTheAI}

최종 봇

이 모든 것을 멋진 React 애플리케이션으로 포장하면 봇이 준비됩니다! 아래에 몇 가지 예가 있습니다.





Chatbot은 Netlify에서 호스팅되며 소스 코드는 Github에서 사용할 수 있습니다.

Chatbot on Netlify

즐거운 시간 보내시고 다음 프로젝트 아이디어를 찾는 데 도움이 되기를 바랍니다.