React 및 OpenAI API를 사용하여 ChatGPT 복제 애플리케이션을 구축하고 배포하는 방법

챗봇과 가상 비서의 사용이 계속 증가함에 따라 많은 기업과 개발자는 자체 AI 기반 챗봇을 만드는 방법을 찾고 있습니다. ChatGPT는 OpenAI에서 만든 챗봇 중 하나로 인간과 같은 대화에 참여하고 다양한 질문에 답할 수 있습니다.

무엇을 구축할 것인가

이 튜토리얼에서는 React 및 OpenAI API를 사용하여 ChatGPT 클론 애플리케이션을 구축하는 방법을 배웁니다. 주말 동안 재미있고 매력적인 프로젝트에 참여하고 싶다면 지금이 React와 OpenAI에 뛰어들 수 있는 좋은 기회입니다.

또한 GitHub 리포지토리에서 무료 .kinsta.app 도메인을 제공하는 Kinsta의 애플리케이션 호스팅 플랫폼으로 직접 배포하여 프로젝트를 신속하게 실행하는 방법을 배웁니다. 그리고 Kinsta의 무료 평가판 및 Hobby Tier를 사용하면 비용 없이 쉽게 시작할 수 있습니다.

다음은 ChatGPT 클론 애플리케이션의 라이브 데모입니다.

이 프로젝트를 더 면밀히 검사하려면 해당 GitHub 리포지토리에 액세스할 수 있습니다.

또는 시작하는 데 도움이 되도록 스타일, Font Awesome CDN 링크, OpenAI 패키지 및 기본 구조와 같은 기본 요소와 함께 제공되는 React 애플리케이션 시작 프로젝트를 복제할 수도 있습니다.

요구 사항/전제 조건

이 자습서는 "추후 진행" 경험을 위해 설계되었습니다. 따라서 쉽게 코딩할 수 있도록 다음을 준비하는 것이 좋습니다.

• HTML, CSS, JavaScript에 대한 기본적인 이해
• React에 대한 어느 정도의 친숙함
• 컴퓨터에 설치된 Node.js 및 npm(노드 패키지 관리자) 또는 원사

OpenAI API란?

OpenAI API는 개발자에게 API를 통해 GPT-3과 같은 OpenAI의 언어 모델에 대한 액세스 권한을 부여하는 클라우드 기반 플랫폼입니다. 이를 통해 개발자는 모델을 개발하고 교육하지 않고도 텍스트 완성, 감정 분석, 요약 및 번역과 같은 자연어 처리 기능을 애플리케이션에 추가할 수 있습니다.

OpenAI API를 사용하려면 개발자는 OpenAI 웹 사이트에서 계정을 만들고 API 키를 받아야 합니다. API 키는 API 요청을 인증하고 사용량을 추적하는 데 사용됩니다.

API 키를 받으면 개발자는 API를 사용하여 언어 모델에 텍스트를 제출하고 응답을 받을 수 있습니다.

왜 반응하는가?

React는 사용자 인터페이스 구축에 널리 사용되는 JavaScript 라이브러리입니다. 2022년 스택 오버플로 개발자 설문 조사에 따르면 두 번째로 많이 사용되는 웹 기술로 시장 점유율은 42.62%입니다.

React를 사용하면 개발자가 사용자 인터페이스의 다른 부분을 나타내는 선언적 구성 요소를 만들 수 있습니다. 이러한 구성 요소는 JavaScript와 HTML의 조합인 JSX라는 구문을 사용하여 정의됩니다.

구성 요소 라이브러리 및 키트의 대규모 에코시스템 덕분에 개발자는 OpenAI API와 같은 API를 쉽게 사용하고 통합하여 복잡한 채팅 인터페이스를 구축할 수 있으며 이것이 ChatGPT 클론 애플리케이션 구축을 위한 탁월한 선택이 되는 이유입니다.

React 개발 환경을 설정하는 방법

React를 설치하거나 React 프로젝트를 생성하는 가장 좋은 방법은 create-react-app으로 설치하는 것입니다. 한 가지 전제 조건은 컴퓨터에 Node.js를 설치하는 것입니다. Node가 설치되었는지 확인하려면 터미널에서 다음 명령을 실행하십시오.

 node -v

버전이 표시되면 존재하는 것입니다. npx를 사용하려면 노드 버전이 v14.0.0 이상이고 NPM 버전이 v5.6 이상인지 확인해야 합니다. 그렇지 않으면 npm update -g 실행하여 업데이트해야 할 수 있습니다. npm을 파악했다면 이제 아래 명령을 실행하여 React 프로젝트를 설정할 수 있습니다.

 npx create-react-app chatgpt-clone

참고: "chatgpt-clone"은 우리가 만들고 있는 애플리케이션 이름이지만 원하는 이름으로 변경할 수 있습니다.

설치 프로세스는 몇 분 정도 걸릴 수 있습니다. 성공하면 디렉토리로 이동하여 아래 명령을 사용하여 Node.js에서 OpenAI API에 편리하게 액세스할 수 있는 Node.js OpenAI 패키지를 설치할 수 있습니다.

 npm install openai

이제 npm start 실행하여 localhost:3000 에서 애플리케이션이 작동하는지 확인할 수 있습니다.

create-react-app 명령을 사용하여 React 프로젝트를 생성하면 자동으로 폴더 구조를 스캐폴드합니다. 관심 있는 주요 폴더는 개발이 이루어지는 src 폴더입니다. 이 폴더에는 기본적으로 많은 파일이 포함되어 있지만 App.js , index.js 및 index.css 파일에만 주의해야 합니다.

1. App.js : App.js 파일은 React 애플리케이션의 주요 구성 요소입니다. 일반적으로 응용 프로그램의 다른 모든 구성 요소를 렌더링하는 최상위 구성 요소를 나타냅니다.
2. index.js : 이 파일은 React 애플리케이션의 진입점입니다. 앱이 열릴 때 로드되는 첫 번째 파일이며 App.js 구성 요소를 브라우저에 렌더링하는 역할을 합니다.
3. index.css : 이 파일은 React 애플리케이션의 전반적인 스타일과 레이아웃을 정의하는 역할을 합니다.

React 및 OpenAI API로 ChatGPT 클론을 구축하는 방법

ChatGPT 복제 응용 프로그램은 응용 프로그램을 더 쉽게 이해하고 유지 관리할 수 있도록 두 가지 구성 요소로 구성됩니다. 이 두 구성 요소는 다음과 같습니다.

1. 양식 섹션 : 이 구성 요소에는 사용자가 챗봇과 상호 작용할 수 있는 텍스트 영역 필드와 버튼이 포함되어 있습니다.
2. 답변 섹션 : 질문과 해당 답변이 배열로 저장되어 이 섹션에 표시됩니다. 배열을 시간순으로 반복하여 최신 항목을 먼저 표시합니다.

ChatGPT 클론 애플리케이션 설정

이 자습서에서는 먼저 애플리케이션 인터페이스를 구축한 다음 애플리케이션이 OpenAI API와 상호 작용하도록 기능을 구현할 수 있습니다. 이 자습서에서 사용할 두 개의 구성 요소를 만드는 것부터 시작하십시오. 적절한 구성을 위해 모든 구성 요소가 저장될 src 폴더에 구성 요소 폴더를 만듭니다.

양식 섹션 구성요소

textarea 과 제출 button 으로 구성된 간단한 양식입니다.

 // components/FormSection.jsx const FormSection = () => { return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." ></textarea> <button className="btn"> Generate Response </button> </div> ) } export default FormSection;

양식을 App.js 파일로 가져올 때 예상되는 양식은 다음과 같습니다.

답변 섹션 구성 요소

이 섹션에는 모든 질문과 답변이 표시됩니다. 이 섹션을 App.js 파일로 가져올 때도 다음과 같이 표시됩니다.

배열과 루프에서 이러한 질문과 답변을 가져와서 코드를 더 쉽게 읽고 유지 관리할 수 있습니다.

 // components/AnswerSection.jsx const AnswerSection = () => { return ( <> <hr className="hr-line" /> <div className="answer-container"> <div className="answer-section"> <p className="question">Who is the founder of OpenAi?</p> <p className="answer">OpenAI was founded in December 2015 by Elon Musk, Sam Altman, Greg Brockman, Ilya Sutskever, Wojciech Zaremba, and John Schulman.</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> </div> </> ) } export default AnswerSection;

홈 페이지

이제 두 구성 요소가 모두 생성되었지만 App.js 파일로 가져와야 하기 때문에 애플리케이션을 실행할 때 아무 것도 표시되지 않습니다. 이 애플리케이션의 경우 어떤 형태의 라우팅도 구현하지 않습니다. 즉, App.js 파일이 애플리케이션의 홈 구성 요소/페이지 역할을 합니다.

구성 요소를 가져오기 전에 애플리케이션의 제목 및 설명과 같은 일부 콘텐츠를 추가할 수 있습니다.

 // App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection /> <AnswerSection /> </div> ); }; export default App;

위의 코드에서 두 구성 요소를 가져와 애플리케이션에 추가합니다. 애플리케이션을 실행하면 애플리케이션이 다음과 같이 표시됩니다.

기능 추가 및 OpenAI API 통합

이제 애플리케이션의 사용자 인터페이스가 생겼습니다. 다음 단계는 OpenAI API와 상호 작용하고 응답을 받을 수 있도록 애플리케이션을 작동시키는 것입니다. 먼저 OpenAI API를 쿼리하는 데 사용되므로 양식을 제출할 때 양식에서 값을 가져와야 합니다.

양식에서 데이터 가져오기

React에서 데이터를 저장하고 업데이트하는 가장 좋은 방법은 상태를 사용하는 것입니다. 기능적 구성 요소에서 useState() 후크는 상태 작업에 사용됩니다. 상태를 만들고 양식의 값을 상태에 할당하고 값이 변경될 때마다 업데이트할 수 있습니다. useState() 후크를 FormSection.jsx 구성 요소로 가져온 다음 state를 생성하여 newQuestions 저장하고 업데이트하는 것으로 시작하겠습니다.

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( // Form to submit a new question ) } export default FormSection;

다음으로 textarea 필드의 값을 state에 할당하고 onChange() 이벤트를 생성하여 입력 값이 변경될 때마다 state를 업데이트할 수 있습니다.

 <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea>

마지막으로 onClick() 이벤트를 생성하여 제출 버튼을 클릭할 때마다 함수를 로드할 수 있습니다. 이 메서드는 App.js 파일에서 생성되고 newQuestion 및 setNewQuestion 값을 인수로 사용하여 FormSection.jsx 구성 요소에 소품으로 전달됩니다.

 <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button>

이제 양식 값을 저장하고 업데이트하는 상태를 만들고 App.js 파일에서 props로 전달되는 메서드를 추가하고 클릭 이벤트를 처리했습니다. 최종 코드는 다음과 같습니다.

 // components/FormSection.jsx import { useState } from 'react'; const FormSection = ({ generateResponse }) => { const [newQuestion, setNewQuestion] = useState(''); return ( <div className="form-section"> <textarea rows="5" className="form-control" placeholder="Ask me anything..." value={newQuestion} onChange={(e) => setNewQuestion(e.target.value)} ></textarea> <button className="btn" onClick={() => generateResponse(newQuestion, setNewQuestion)}> Generate Response </button> </div> ) } export default FormSection;

다음 단계는 App.js 파일에서 메서드를 생성하여 OpenAI API와 상호 작용하는 전체 프로세스를 처리하는 것입니다.

OpenAI API와 상호 작용

OpenAI API와 상호 작용하고 React 애플리케이션에서 API 키를 얻으려면 OpenAI API 계정을 생성해야 합니다. Google 계정 또는 이메일을 사용하여 OpenAI 웹 사이트에서 계정에 가입할 수 있습니다. API 키를 생성하려면 웹사이트의 오른쪽 상단 모서리에 있는 개인을 클릭하십시오. 일부 옵션이 나타납니다. API 키 보기를 클릭합니다.

Create new secret key 버튼을 클릭하고 OpenAI와 상호 작용하기 위해 이 애플리케이션에서 사용하는 것처럼 어딘가에 키를 복사합니다. 이제 구성 방법과 함께 openai 패키지(이미 설치한)를 가져와서 OpenAI 초기화를 진행할 수 있습니다. 그런 다음 생성된 키로 구성을 생성하고 이를 사용하여 OpenAI를 초기화합니다.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); return ( // Render FormSection and AnswerSection ); }; export default App;

위 코드에서 OpenAI API 키는 .env 파일에 환경 변수로 저장됩니다. 애플리케이션의 루트 폴더에 .env 파일을 만들고 변수 REACT_APP_OPENAI_API_KEY 에 키를 저장할 수 있습니다.

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

이제 App.js 파일에서 generateResponse 메서드 생성을 진행하고 요청을 처리하고 API에서 응답을 받기 위해 이미 생성한 양식에서 예상되는 두 매개변수를 전달할 수 있습니다.

 // src/App.js import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const generateResponse = (newQuestion, setNewQuestion) => { // Set up OpenAI API and handle response }; return ( // Render FormSection and AnswerSection ); }; export default App;

이제 OpenAI API에 요청을 보낼 수 있습니다. OpenAI API는 질문 및 답변(Q&A), 문법 수정, 번역 등과 같은 많은 작업을 수행할 수 있습니다. 이러한 작업 각각에 대해 옵션이 다릅니다. 예를 들어 Q&A의 엔진 값은 text-davinci-00 이고 SQL 번역의 엔진 값은 code-davinci-002 입니다. 다양한 예제와 해당 옵션에 대한 OpenAI 예제 문서를 자유롭게 확인하십시오.

이 자습서에서는 Q&A로만 작업하며 옵션은 다음과 같습니다.

 { model: "text-davinci-003", prompt: "Who is Obama?", temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ["\"], }

참고: 프롬프트 값을 변경했습니다.

프롬프트는 양식에서 전송되는 질문입니다. 즉, generateResponse 메소드에 매개변수로 전달하는 양식 입력에서 수신해야 합니다. 이렇게 하려면 옵션을 정의한 다음 스프레드 연산자를 사용하여 프롬프트를 포함하는 완전한 옵션을 만듭니다.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; }; return ( // Render FormSection and AnswerSection ); }; export default App;

이 시점에서 남은 것은 createCompletion 메서드를 통해 OpenAI에 요청을 보내 응답을 받는 것입니다.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); console.log(response.data.choices[0].text); }; return ( // Render FormSection and AnswerSection ); }; export default App;

위의 코드에서 답의 텍스트가 콘솔에 표시됩니다. 질문을 통해 응용 프로그램을 자유롭게 테스트하십시오. 마지막 단계는 질문과 답변의 배열을 보유할 상태를 만든 다음 이 배열을 AnswerSection 구성 요소에 소품으로 보내는 것입니다. App.js 최종 코드는 다음과 같습니다.

 // src/App.js import { Configuration, OpenAIApi } from 'openai'; import FormSection from './components/FormSection'; import AnswerSection from './components/AnswerSection'; import { useState } from 'react'; const App = () => { const configuration = new Configuration({ apiKey: process.env.REACT_APP_OPENAI_API_KEY, }); const openai = new OpenAIApi(configuration); const [storedValues, setStoredValues] = useState([]); const generateResponse = async (newQuestion, setNewQuestion) => { let options = { model: 'text-davinci-003', temperature: 0, max_tokens: 100, top_p: 1, frequency_penalty: 0.0, presence_penalty: 0.0, stop: ['/'], }; let completeOptions = { ...options, prompt: newQuestion, }; const response = await openai.createCompletion(completeOptions); if (response.data.choices) { setStoredValues([ { question: newQuestion, answer: response.data.choices[0].text, }, ...storedValues, ]); setNewQuestion(''); } }; return ( <div> <div className="header-section"> <h1>ChatGPT CLONE </h1> <p> I am an automated question and answer system, designed to assist you in finding relevant information. You are welcome to ask me any queries you may have, and I will do my utmost to offer you a reliable response. Kindly keep in mind that I am a machine and operate solely based on programmed algorithms. </p> </div> <FormSection generateResponse={generateResponse} /> <AnswerSection storedValues={storedValues} /> </div> ); }; export default App;

이제 AnswerSection 구성 요소를 편집할 수 있으므로 App.js 에서 props 값을 받고 JavaScript Map() 메서드를 사용하여 storedValues ​​배열을 살펴봅니다.

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon"> <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

응용 프로그램을 실행하고 질문을 통해 테스트하면 아래에 답변이 표시됩니다. 그러나 복사 버튼이 작동하지 않는다는 것을 알 수 있습니다. 버튼에 onClick() 이벤트를 추가해야 기능을 처리하는 메서드가 트리거됩니다. navigator.clipboard.writeText() 메서드를 사용하여 기능을 처리할 수 있습니다. 이제 AnswerSection 구성 요소는 다음과 같이 표시됩니다.

 // components/AnswerSection.jsx const AnswerSection = ({ storedValues }) => { const copyText = (text) => { navigator.clipboard.writeText(text); }; return ( <> <hr className="hr-line" /> <div className="answer-container"> {storedValues.map((value, index) => { return ( <div className="answer-section" key={index}> <p className="question">{value.question}</p> <p className="answer">{value.answer}</p> <div className="copy-icon" onClick={() => copyText(value.answer)} > <i className="fa-solid fa-copy"></i> </div> </div> ); })} </div> </> ) } export default AnswerSection;

애플리케이션을 실행하면 ChatGPT 복제 애플리케이션이 완벽하게 작동합니다. 이제 애플리케이션을 배포하여 온라인으로 액세스하고 친구와 공유할 수 있습니다.

Kinsta에 React 애플리케이션을 배포하는 방법

이 애플리케이션을 빌드하고 로컬 컴퓨터에 두는 것만으로는 충분하지 않습니다. 다른 사람들이 액세스할 수 있도록 온라인으로 공유하고 싶을 것입니다. GitHub 및 Kinsta를 사용하여 이 작업을 수행하는 방법을 살펴보겠습니다.

GitHub에 코드 푸시

코드를 GitHub에 푸시하려면 코드 변경 사항을 관리하고 프로젝트에서 공동 작업을 수행하며 버전 기록을 유지하는 안정적이고 효율적인 방법인 Git 명령을 사용할 수 있습니다.

코드를 푸시하는 첫 번째 단계는 GitHub 계정에 로그인하고 화면 오른쪽 상단 모서리에 있는 + 버튼을 클릭하고 드롭다운 메뉴에서 새 리포지토리를 선택하여 새 리포지토리를 생성하는 것입니다.

리포지토리에 이름을 지정하고 설명을 추가하고(선택 사항) 공개 또는 비공개로 설정할지 여부를 선택합니다. 리포지토리 생성을 클릭하여 생성합니다.

리포지토리가 생성되면 리포지토리의 기본 페이지에서 리포지토리 URL을 가져와 코드를 GitHub에 푸시해야 합니다.

터미널 또는 명령 프롬프트를 열고 프로젝트가 포함된 디렉터리로 이동합니다. 다음 명령을 하나씩 실행하여 코드를 GitHub 리포지토리로 푸시합니다.

 git init git add . git commit -m "my first commit" git remote add origin [repository URL] git push -u origin master

git init 로컬 Git 저장소인 git add . 현재 디렉터리와 해당 하위 디렉터리의 모든 파일을 새 Git 리포지토리에 추가합니다. git commit -m "my first commit" 간단한 메시지와 함께 변경 사항을 저장소에 커밋합니다. git remote add origin [repository URL] 리포지토리 URL을 원격 리포지토리로 설정하고 git push -u origin master 코드를 마스터 브랜치의 원격 리포지토리(원본)로 푸시합니다.

Kinsta에 ChatGPT 클론 반응 애플리케이션 배포

Kinsta에 리포지토리를 배포하려면 다음 단계를 따르십시오.

1. My Kinsta 대시보드에서 Kinsta 계정에 로그인하거나 Kinsta 계정을 만드십시오.
2. 왼쪽 사이드바에서 애플리케이션을 클릭한 다음 서비스 추가를 클릭합니다.
3. 드롭다운 메뉴에서 애플리케이션을 선택하여 Kinsta에 React 애플리케이션을 배포합니다.
4. 표시되는 모달에서 배포하려는 리포지토리를 선택합니다. 분기가 여러 개인 경우 배포할 분기를 선택하고 애플리케이션에 이름을 할당할 수 있습니다. 사용 가능한 25개 중에서 데이터 센터 위치를 선택하면 Kinsta가 자동으로 시작 명령을 감지합니다.
5. 마지막으로 GitHub와 같은 공개 호스트에 API 키를 푸시하는 것은 안전하지 않으며 로컬에서 환경 변수로 추가되었습니다. 호스팅할 때 동일한 변수 이름과 키를 값으로 사용하여 환경 변수로 추가할 수도 있습니다.

애플리케이션 배포가 시작되고 몇 분 안에 애플리케이션의 배포된 버전에 액세스할 수 있는 링크가 제공됩니다. 이 경우 https://chatgpt-clone-g9q10.kinsta.app/ 입니다. 참고: 자동 배포를 활성화할 수 있으므로 Kinsta는 코드베이스를 변경할 때마다 애플리케이션을 다시 배포하고 GitHub에 푸시합니다.

요약

OpenAI API는 고객 지원 및 개인 비서에서 언어 번역 및 콘텐츠 생성에 이르기까지 광범위한 잠재적 애플리케이션을 구축하는 데 사용할 수 있습니다.

이 튜토리얼에서는 React 및 OpenAI로 ChatGPT 클론 애플리케이션을 구축하는 방법을 배웠습니다. 이 애플리케이션/기능을 다른 애플리케이션에 통합하여 사용자에게 사람과 같은 대화 경험을 제공할 수 있습니다.

OpenAI API로 수행할 수 있는 작업과 이 복제 응용 프로그램을 개선하는 방법에는 더 많은 것이 있습니다. 예를 들어 브라우저를 새로 고친 후에도 이전 질문과 답변이 사라지지 않도록 로컬 저장소를 구현할 수 있습니다.

Kinsta의 무료 평가판 및 Hobby Tier를 사용하면 비용 없이 애플리케이션 호스팅을 쉽게 시작할 수 있습니다. 그러니 시도해 보고 무엇을 만들 수 있는지 확인해 보세요.

아래 의견에서 프로젝트와 경험을 공유하십시오.