V tem vodniku se boš naučil, kako ustvariti osnovno uporabniško vmesnik (UI) z Reactom, ki ti omogoča, da komuniciraš z OpenAI APIjem. Namesto da bi klepetali prek URL-ja v brskalniku, bomo ustvarili preprosto aplikacijo, v kateri lahko uporabnik vnese besedilo in prejme ustrezni odgovor od KI. Obravnavali bomo tako frontend-kodo kot tudi logiko za obdelavo vhodnih podatkov in komunikacijo s OpenAI APIjem.
Najpomembnejša spoznanja
- Razumel boš, kako ustvariti polje za vnos in gumb v Reactu, da pošlješ uporabniške zahteve.
- Poleg tega se boš naučil, kako postaviti asinhrona Fetch zahteve na OpenAI API in shraniti ter prikazati prejete odgovore v tvojem Reactovem stanju.
Korak za korakom navodila
Začni z ustvarjanjem nove aplikacije v Reactu ali navigiraj v svojo obstoječo aplikacijo. V datoteki index.jsx boš nastavil osnovne sestavne dele za interakcijo.
Najprej želiš dodati polje za vnos, v katero bo uporabnik vnesel svoja sporočila. To omogoča uporabnikom interakcijo s KI. Dodaj torej polje za vnos in gumb za pošiljanje zahteve.
Ko uporabnik vpiše besedilo v polje za vnos in klikne na gumb za pošiljanje, moraš biti sposoben obdelati ta vnos. Lahko uporabiš useState-Hook, da upravljaš z trenutno vrednostjo vnosa in odgovorom APIja.
Zdaj moraš obravnavati dogodek klika na gumb. Ko je gumb pritisnjen, želiš ustvariti asinhrono funkcijo, ki bo poslala Fetch zahtevo na strežnik. To funkcijo deklariraš s ključno besedo async, kar ti omogoča uporabo await za čakanje na odgovor strežnika.
Naslednji korak je naslednji: želiš poklicati Fetch funkcijo, da komuniciraš s APIjem. URL je oblikovan v formatu API/Chat?MSG={userInput}, kjer se {userInput} zamenja s uporabniškim vnosom. Za začetek lahko uporabiš fiksen niz, da preveriš pravilnost API zahteve.
Po tem, ko pošlješ zahtevo, dobiš odgovor, ki ga moraš obdelati. Prvič lahko pretvoriš odgovor v JSON format, da boš lažje delal z njim. Za to kličeš response.json().
Preveri izpis v konzoli, da se prepričaš, ali vse deluje, kot pričakovano. Ko preveriš odgovor, želiš odgovor shraniti v stanje, ki si ga zgoraj deklariral.
Za dodatno izboljšanje uporabniške izkušnje želiš zagotoviti, da se uporabniški vnos ne pošilja vedno s fiksno vrednostjo (kot je "hello"), temveč z dejansko vnesenim sporočilom. Za to uporabi useRef-Hook, da dostopaš do trenutne vrednosti polja za vnos, ko uporabnik klikne na gumb.
Ko lahko pravilno zajameš uporabnikove vnose, izvedi test aplikacije, da preveriš, ali so vnosi poslani na API in se pravilno prikažejo.
Ko vse deluje, boš videl, da je odgovor KI prikazan v določenem DIV-u. Sedaj lahko nadaljuješ z oblikovanjem svojega uporabniškega vmesnika ali optimizacijo kode.
Trenutno gre le za preprosto vprašanje-odgovor aplikacijo, saj se zgodovina klepeta ne shranjuje. Da bi ustvarili popolno aplikacijo za klepet, bi bilo potrebno shraniti zgodovino klepeta in jo poslati na API, tako da bo imel ta kontekst za odgovore.
Vendar je impresivno, da si že sposoben uporabljati OpenAI API in tako razviti lastno aplikacijo na podlagi te tehnologije. V prihodnjih korakih lahko razširiš funkcionalnost, da omogočiš pravi klepet.
Povzetek
V tem vadnici si spoznal korake za ustvarjanje osnovnega uporabniškega vmesnika v Reactu, ki omogoča komunikacijo z OpenAI API. Pokriti so bili vsi vidiki, od obdelave uporabniških vnosov do prikaza odgovorov, da je bilo mogoče ustvariti funkcionalno aplikacijo.
Pogosta vprašanja
Kako ustvarim polje za vnos v Reactu?Polje za vnos v Reactu lahko ustvariš z uporabo elementa -Elementa v svoji komponenti.
Kako pošljem zahtevek na OpenAI API?Uporabi funkcijo Fetch, da pošlješ zahtevo GET ali POST na API s pravilnim URL-jem in parametri.
Kakšna je razlika med useState in useRef?useState hrani vrednosti, ki povzročajo ponovno izvedbo komponente, medtem ko useRef hrani vrednosti, ki ne povzročajo ponovne izvedbe.
Kako lahko shranim odgovore umetne inteligence v svoji aplikaciji?Odgovore lahko shranite v stanje z useState in jih nato prikažite v uporabniškem vmesniku.
