Cum să construiți și să implementați o aplicație de clonă ChatGPT cu React și OpenAI API

Pe măsură ce utilizarea chatbot-urilor și a asistenților virtuali continuă să crească, multe companii și dezvoltatori caută modalități de a-și crea propriile chatbot-uri bazate pe inteligență artificială. ChatGPT este un astfel de chatbot, creat de OpenAI, care este capabil să se angajeze în conversații asemănătoare oamenilor și să răspundă la o gamă largă de întrebări.

Ce ai de gând să construiești

În acest tutorial, veți învăța cum să construiți o aplicație de clonă ChatGPT folosind React și API-ul OpenAI. Dacă doriți să încercați mâna la un proiect distractiv și captivant în weekend, aceasta este o oportunitate grozavă de a vă scufunda în React și OpenAI.

De asemenea, veți învăța cum să implementați direct din depozitul dvs. GitHub pe platforma de găzduire a aplicațiilor Kinsta, care oferă un domeniu gratuit .kinsta.app pentru a vă pune în funcțiune proiectul rapid. Și cu versiunea de încercare gratuită Kinsta și nivelul Hobby, puteți începe cu ușurință, fără niciun cost.

Iată o demonstrație live a aplicației de clonare ChatGPT.

Dacă doriți să inspectați acest proiect mai îndeaproape, puteți accesa depozitul său GitHub.

Alternativ, puteți, de asemenea, să clonați proiectul de pornire al aplicației React, care vine cu elemente fundamentale, cum ar fi stilurile, legătura CDN Font Awesome, pachetul OpenAI și structura de bază, pentru a vă ajuta să începeți.

Cerințe/Precondiții

Acest tutorial este conceput pentru a fi o experiență „în continuare”. Prin urmare, este recomandat să aveți următoarele pentru a codifica cu ușurință:

• Înțelegerea fundamentală a HTML, CSS și JavaScript
• O oarecare familiaritate cu React
• Node.js și npm (Node Package Manager) sau yarn instalat pe computer

Ce este OpenAI API?

API-ul OpenAI este o platformă bazată pe cloud care oferă dezvoltatorilor acces la modelele de limbaj OpenAI, cum ar fi GPT-3, printr-un API. Permite dezvoltatorilor să adauge caracteristici de procesare a limbajului natural, cum ar fi completarea textului, analiza sentimentelor, rezumarea și traducerea la aplicațiile lor, fără a-și dezvolta și antrena modelele.

Pentru a utiliza API-ul OpenAI, dezvoltatorii trebuie să creeze un cont pe site-ul web OpenAI și să obțină o cheie API. Cheia API este utilizată pentru a autentifica solicitările API și pentru a urmări utilizarea.

Odată obținută cheia API, dezvoltatorii pot folosi API-ul pentru a trimite text modelului de limbă și a primi răspunsuri.

De ce sa reactionezi?

React este o bibliotecă JavaScript populară pentru construirea de interfețe cu utilizatorul. Conform sondajului pentru dezvoltatori Stack Overflow din 2022, este a doua tehnologie web cea mai frecvent utilizată, cu 42,62% din cota de piață.

React permite dezvoltatorilor să creeze componente declarative reprezentând diferite părți ale interfeței cu utilizatorul. Aceste componente sunt definite folosind o sintaxă numită JSX, care este o combinație de JavaScript și HTML.

Datorită ecosistemului său mare de biblioteci și kituri de componente, dezvoltatorii pot lucra cu ușurință și integra API-uri precum API-ul OpenAI, pentru a construi interfețe de chat complexe și asta îl face o alegere excelentă pentru construirea unei aplicații de clonă ChatGPT.

Cum să vă configurați mediul de dezvoltare React

Cel mai bun mod de a instala React sau de a crea un proiect React este să îl instalați cu create-react-app. O condiție prealabilă este să aveți instalat Node.js pe computer. Pentru a confirma că aveți Node instalat, rulați următoarea comandă în terminal.

 node -v

Dacă apare o versiune, atunci aceasta există. Pentru a utiliza npx, va trebui să vă asigurați că versiunea dvs. Node nu este mai mică de v14.0.0, iar versiunea dvs. NPM nu este mai mică de v5.6; altfel, ar putea fi necesar să-l actualizați rulând npm update -g . Odată ce v-ați dat seama de npm, acum puteți configura un proiect React rulând comanda de mai jos:

 npx create-react-app chatgpt-clone

Notă: „chatgpt-clone” este numele aplicației pe care o creăm, dar îl puteți schimba cu orice nume dorit.

Procesul de instalare poate dura câteva minute. Odată cu succes, puteți naviga la director și instala pachetul Node.js OpenAI, care oferă acces convenabil la API-ul OpenAI de la Node.js folosind comanda de mai jos:

 npm install openai

Acum puteți rula npm start pentru a vă vedea aplicația live pe localhost:3000 .

Când un proiect React este creat folosind comanda create-react-app , acesta schelete automat o structură de foldere. Dosarul major care vă preocupă este folderul src , care este locul în care are loc dezvoltarea. Acest folder conține multe fișiere în mod implicit, dar ar trebui să vă preocupați doar de fișierele App.js , index.js și index.css .

1. App.js : fișierul App.js este componenta principală a unei aplicații React. De obicei, reprezintă componenta de nivel superior care redă toate celelalte componente din aplicație.
2. index.js : acest fișier este punctul de intrare al aplicației dvs. React. Este primul fișier încărcat atunci când aplicația este deschisă și este responsabil pentru redarea componentei App.js în browser.
3. index.css : Acest fișier este responsabil pentru definirea stilului și aspectului general al aplicației dvs. React.

Cum să construiți o clonă ChatGPT cu React și OpenAI API

Aplicația de clonă ChatGPT va consta din două componente pentru a face aplicația mai ușor de înțeles și de întreținut. Aceste două componente sunt:

1. Secțiunea formular : această componentă include un câmp de zonă de text și un buton pentru ca utilizatorii să interacționeze cu chatbot-ul.
2. Secțiunea de răspuns : întrebările și răspunsurile corespunzătoare vor fi stocate într-o matrice și afișate în această secțiune. Veți parcurge matricea cronologic, arătând mai întâi cele mai recente.

Configurarea aplicației de clonare ChatGPT

În acest tutorial, să începem prin a construi mai întâi interfața aplicației și apoi puteți implementa funcționalitatea, astfel încât aplicația dvs. să interacționeze cu API-ul OpenAI. Începeți prin a crea cele două componente pe care le veți folosi în acest tutorial. Pentru o organizare corectă, veți crea un folder de componente în folderul src unde vor fi stocate toate componentele.

Componenta secțiunii formular

Acesta este un formular simplu care constă dintr-o textarea și un button de trimitere.

 // 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;

Iată cum ar trebui să arate formularul când îl importați în fișierul App.js :

Componenta secțiunii de răspuns

În această secțiune vor fi afișate toate întrebările și răspunsurile. Așa va arăta această secțiune când o importați și în fișierul App.js.

Veți prelua aceste întrebări și răspunsuri dintr-o matrice și buclă pentru a face codul mai ușor de citit și întreținut.

 // 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;

Pagina de pornire

Acum aveți ambele componente create, dar nu va apărea nimic când rulați aplicația, deoarece trebuie să le importați în fișierul App.js. Pentru această aplicație, nu veți implementa nicio formă de rutare, ceea ce înseamnă că fișierul App.js va servi ca componentă/pagină de pornire a aplicației dvs.

Puteți adăuga conținut, cum ar fi titlul și descrierea aplicației dvs., înainte de a importa componentele.

 // 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;

În codul de mai sus, cele două componente sunt importate și adăugate în aplicație. Când rulați aplicația dvs., așa va arăta aplicația dvs.:

Adăugarea de funcționalități și integrarea API-ului OpenAI

Acum aveți interfața de utilizator a aplicației dvs. Următorul pas este să faceți aplicația funcțională, astfel încât să poată interacționa cu API-ul OpenAI și să obțină răspunsuri. În primul rând, trebuie să obțineți valoarea din formularul dvs. atunci când este trimis, deoarece va fi folosit pentru a interoga API-ul OpenAI.

Obținerea datelor din formular

În React, cel mai bun mod de a stoca și actualiza datele este utilizarea stărilor. În componentele funcționale, cârligul useState() este folosit pentru a lucra cu stările. Puteți să creați o stare, să atribuiți valoarea din formularul dvs. statului și să o actualizați ori de câte ori valoarea acestuia se schimbă. Să începem prin a importa cârligul useState() în componenta FormSection.jsx și apoi să creăm o stare pentru a stoca și actualiza 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;

Apoi, puteți atribui valoarea câmpului textarea stării și puteți crea un eveniment onChange() pentru a actualiza starea ori de câte ori valoarea de intrare se schimbă:

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

În cele din urmă, puteți crea un eveniment onClick() , pentru a încărca o funcție ori de câte ori se face clic pe butonul de trimitere. Această metodă va fi creată în fișierul App.js și transmisă ca elemente de recuzită în componenta FormSection.jsx cu valorile newQuestion și setNewQuestion ca argumente.

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

Acum ați creat o stare pentru a stoca și actualiza valoarea formularului, ați adăugat o metodă care este transmisă ca elemente de recuzită din fișierul App.js și ați gestionat evenimentul de clic. Iată cum va arăta codul final:

 // 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;

Următorul pas va fi crearea unei metode în fișierul App.js pentru a gestiona întregul proces de interacțiune cu API-ul OpenAI.

Interacțiunea cu API-ul OpenAI

Pentru a interacționa cu OpenAI API și pentru a obține chei API într-o aplicație React, trebuie să creați un cont OpenAI API. Vă puteți înscrie pentru un cont pe site-ul web OpenAI folosind contul dvs. Google sau e-mailul. Pentru a genera o cheie API, faceți clic pe Personal în colțul din dreapta sus al site-ului web; vor apărea unele opțiuni; faceți clic pe Vizualizare chei API .

Faceți clic pe butonul Creați o cheie secretă nouă , copiați cheia undeva așa cum ați folosi-o în această aplicație pentru a interacționa cu OpenAI. Acum puteți continua să inițializați OpenAI importând pachetul openai (pe care l-ați instalat deja) împreună cu metoda de configurare. Apoi creați o configurație cu cheia dvs. generată și utilizați-o pentru a inițializa 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;

În codul de mai sus, cheia API OpenAI este stocată ca variabilă de mediu în fișierul .env . Puteți crea un fișier .env în folderul rădăcină al aplicației dvs. și puteți stoca cheia variabilei REACT_APP_OPENAI_API_KEY .

 // .env REACT_APP_OPENAI_API_KEY = sk-xxxxxxxxxx…

Acum puteți continua să creați metoda generateResponse în fișierul App.js și să transmiteți cei doi parametri așteptați din formularul pe care l-ați creat deja pentru a gestiona cererea și a obține răspuns de la 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;

Acum puteți trimite o solicitare către API-ul OpenAI. API-ul OpenAI poate efectua multe operațiuni, cum ar fi întrebări și răspunsuri (Întrebări și răspunsuri), corecție gramaticală, traducere și multe altele. Pentru fiecare dintre aceste operațiuni, opțiunile sunt diferite. De exemplu, valoarea motorului pentru Q&A este text-davinci-00 , în timp ce pentru SQL translate este code-davinci-002 . Nu ezitați să verificați documentația exemplelor OpenAI pentru diferitele exemple și opțiunile acestora.

Pentru acest tutorial, lucrăm doar cu întrebări și răspunsuri, așa arată opțiunea:

 { 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: ["\"], }

Notă: am schimbat valoarea promptului.

Promptul este întrebarea care este trimisă din formular. Aceasta înseamnă că va trebui să îl primiți de la intrarea formularului pe care o treceți în metoda generateResponse ca parametru. Pentru a face acest lucru, veți defini opțiunile și apoi utilizați operatorul de răspândire pentru a crea o opțiune completă care include promptul:

 // 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;

În acest moment, rămâne să trimiteți o solicitare prin metoda createCompletion către OpenAI pentru a obține un răspuns.

 // 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;

În codul de mai sus, textul răspunsului va fi afișat pe consolă. Simțiți-vă liber să vă testați aplicația punând orice întrebare. Pasul final ar fi crearea unei stări care va deține matricea de întrebări și răspunsuri și apoi trimite această matrice ca suport în componenta AnswerSection . Iată cum va arăta codul final 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;

Acum puteți edita componenta AnswerSection , astfel încât să primească valoarea props de la App.js și să utilizați metoda JavaScript Map() pentru a căuta prin matricea 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;

Când rulați aplicația și o testați punând întrebări, răspunsul se va afișa mai jos. Dar veți observa că butonul de copiere nu funcționează. Va trebui să adăugați un eveniment onClick() la buton, astfel încât acesta declanșează o metodă pentru a gestiona funcționalitatea. Puteți utiliza metoda navigator.clipboard.writeText() pentru a gestiona funcționalitatea. Iată cum va arăta acum componenta 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;

Când rulați aplicația dvs., aplicația dvs. de clonare ChatGPT va funcționa perfect. Acum vă puteți implementa aplicația pentru a o accesa online și a o partaja prietenilor.

Cum să implementați aplicația dvs. React în Kinsta

Nu este suficient să construiți această aplicație și să o lăsați pe computerele locale. Veți dori să îl distribuiți online, pentru ca alții să îl poată accesa. Să vedem cum să facem acest lucru folosind GitHub și Kinsta.

Împingeți codul dvs. în GitHub

Pentru a vă împinge codul către GitHub, puteți utiliza comenzile Git, care este o modalitate fiabilă și eficientă de a gestiona modificările codului, de a colabora la proiecte și de a menține istoricul versiunilor.

Primul pas pentru a vă împinge codurile va fi să creați un nou depozit, conectându-vă la contul dvs. GitHub, făcând clic pe butonul + din colțul din dreapta sus al ecranului și selectând New depozit din meniul drop-down.

Dați un nume depozitului dvs., adăugați o descriere (opțional) și alegeți dacă doriți să fie public sau privat. Faceți clic pe Creare depozit pentru a-l crea.

Odată ce depozitul dvs. este creat, asigurați-vă că obțineți adresa URL a depozitului de pe pagina principală a depozitului, pe care va trebui să vă trimiteți codul în GitHub.

Deschideți terminalul sau promptul de comandă și navigați la directorul care conține proiectul dvs. Rulați următoarele comenzi una câte una pentru a vă împinge codul în depozitul dvs. GitHub:

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

git init inițializează un depozit local Git, git add . adaugă toate fișierele din directorul curent și subdirectoarele acestuia în noul depozit Git. git commit -m "my first commit" comite modificările în depozit cu un mesaj scurt. git remote add origin [repository URL] setează adresa URL a depozitului ca depozit la distanță și git push -u origin master împinge codul în depozitul de la distanță (origine) din ramura master.

Implementați aplicația dvs. ChatGPT Clone React pe Kinsta

Pentru a vă implementa depozitul în Kinsta, urmați acești pași:

1. Conectați-vă la sau creați-vă contul Kinsta pe tabloul de bord My Kinsta.
2. Faceți clic pe Aplicații în bara laterală din stânga și apoi faceți clic pe Adăugați serviciu .
3. Selectați Aplicație din meniul drop-down pentru a implementa o aplicație React în Kinsta.
4. Selectați depozitul pe care doriți să îl implementați din modalul care apare. Dacă aveți mai multe ramuri, o puteți alege pe cea pe care doriți să o implementați și să atribuiți un nume aplicației. Selectați o locație de centru de date dintre cele 25 disponibile, iar Kinsta va detecta automat o comandă de pornire.
5. În cele din urmă, nu este sigur să trimiteți cheile API către gazde publice precum GitHub, a fost adăugată ca variabilă de mediu local. Când găzduiți, o puteți adăuga și ca variabilă de mediu folosind același nume de variabilă și cheia ca valoare.

Aplicația dvs. va începe să fie implementată și, în câteva minute, va fi furnizat un link pentru a accesa versiunea implementată a aplicației dvs. În acest caz, acesta este https://chatgpt-clone-g9q10.kinsta.app/ Notă: puteți activa implementarea automată, astfel încât Kinsta vă va reinstala aplicația ori de câte ori vă schimbați baza de cod și o trimiteți în GitHub.

rezumat

API-ul OpenAI poate fi folosit pentru a construi o gamă largă de aplicații potențiale, de la asistență pentru clienți și asistenți personali până la traducerea limbilor și crearea de conținut.

În acest tutorial, ați învățat cum să construiți o aplicație de clonă ChatGPT cu React și OpenAI. Puteți integra această aplicație/funcție în alte aplicații pentru a oferi utilizatorilor experiențe conversaționale asemănătoare oamenilor.

Există mai multe despre ce se poate face cu OpenAI API și despre cum să îmbunătățiți această aplicație de clonare. De exemplu, puteți implementa stocarea locală, astfel încât întrebările și răspunsurile anterioare să nu dispară chiar și după ce vă reîmprospătați browserul.

Cu versiunea de încercare gratuită a Kinsta și nivelul Hobby, puteți începe cu ușurință, fără niciun cost, pe găzduirea noastră de aplicații. Deci, de ce să nu încercați și să vedeți ce puteți crea?

Împărtășește-ți proiectul și experiențele în comentariul de mai jos.