GTP-3 및 Next.js로 텍스트 기반 AI 앱 만들기

OpenAI 팀은 GPT-3 AI와의 상호 작용을 그 어느 때보다 쉽게 ​​만들었습니다. OpenAI API를 사용하여 자신만의 프로젝트를 쉽게 생성할 수 있습니다. 이 튜토리얼에서는 Next.js를 사용하여 OpenAI의 GPT-3 API와 상호 작용하는 방법을 살펴봅니다.

OpenAI는 $14.58 상당의 크레딧을 무료로 제공합니다.

🎹 AI와 먼저 플레이

시작하기 전에 어떻게 작동하는지 알 수 있도록 play with the AI here을 추천합니다.

🤟 시작하자

이 가이드를 위해 간단한 조언 생성기 앱을 만들 것입니다.

The live example GTP-3 project.

🔧 Next.js 설정 및 OpenAI 설치

npx create-next-app@latest

npm i openai

🔑 OpenAI API 키 받기

Get your API key here.
.env.local 파일에 OpenAI API 키를 포함합니다.

.env.local

OPENAI_API_KEY=your-openai-api-key

다음 코드는 OpenAI에서 응답을 가져옵니다.

참고: OpenAI node.js 라이브러리는 클라이언트에서 사용할 수 없으며 서버 측에서 사용해야 합니다.

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

const completion = await openai.createCompletion({
            model: "text-davinci-002",
            prompt: `Replace this string with your prompt`,
            max_tokens: 200,
        });
console.log(completion.data.choices[0].text);

옵션 객체를 createCompletion() 함수에 전달하는 것을 볼 수 있습니다. 고려해야 할 사항은 다음과 같습니다.

모델: text-davinci-002, text-curie-001, text-babbage-001 또는 text-ada-001 중에서 가장 유능한 것부터 가장 낮은 것까지 선택합니다. AI를 사용할 수 있는 모드는 좋은 응답을 제공하는 데 더 효과적입니다. AI가 더 유능할수록 더 비싸고 사용 속도가 느립니다.

프롬프트: AI가 완료하기를 원하는 질문 또는 텍스트입니다.

max_tokens: 응답의 길이 제한(토큰이 많을수록 더 비쌉니다).

If you want to go more indepth please checkout this link.

🔨 API 끝점을 설정합시다

/페이지/api/조언

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

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

const handler = async (req, res) => {
    switch (req.method) {
        case 'GET':
            await getAdvice(req, res);
            break;
        default:
            res.setHeader('Allow', ['GET'])
            res.status(405).end(`Method ${req.method} Not Allowed`)
    }

}

const getAdvice = async (req, res) => {
    try {
        const completion = await openai.createCompletion({
            model: "text-davinci-002",
            prompt: `Give me some advice on ${req.query.prompt}`,
            max_tokens: 200,
        });
        res.status(200).json({ text: completion.data.choices[0].text });
    } catch (error) {
        if (error.response) {
            res.status(error.response.status).send(error.response.data);
        } else {
            res.status(500).send(error.message);
        }
    }
}

export default handler;

😊 프로젝트 어디에서나 get 요청을 만드세요.

const res = await fetch(`/api/advice?prompt=${input}`);
const data = await res.json();
console.log(data.text);

/api/advice?prompt=your-prompt에 요청하기

원하는 대로 프런트엔드를 설정하세요.

Github에서 내 예제를 사용할 수도 있습니다.

See full code on Github

😀 읽어주셔서 감사합니다!

현재 프로젝트Emoji Story에 대한 도움을 찾고 있습니다.

관심 있으신 분은 [email protected]으로 연락주세요. 감사합니다!

또는 저에게 연락하십시오:

트위터:
인스 타 그램:
링크드인:

My personal website