Selles õpetuses õpid, kuidas luua Reactiga põhiline kasutajaliides (UI), mis võimaldab sul suhelda OpenAI APIga. Selle asemel, et brauseris URL-i kaudu vestelda, loome lihtsa rakenduse, kus kasutaja saab sisestada teksti ja saada vastava vastuse tehisintellektilt. Käsitleme nii esikulge koodi kui ka sisendite töötlemise ja suhtluse OpenAI APIga.
Olulisemad järeldused
- Õpid, kuidas Reactis luua sisendväli ja nupp, et saata kasutaja päringud.
- Samuti saad teada, kuidas esitada asünkroonseid Fetch-päringuid OpenAI API-le, salvestada ja kuvada saadud vastused oma Reacti olekus.
Juhend samm-sammult
Alusta uue Reacti rakenduse loomisest või olemasoleva rakendusse navigeerimisest. Indeksi.jsx-failis seadistad lihtsad komponendid interaktsiooniks.
Esmalt soovid lisada sisendvälja, kuhu kasutaja saab sisestada oma sõnumid. See võimaldab kasutajatel tehisintellektiga suhelda. Seega lisa sisendväli ja nupp päringu saatmiseks.
Kui kasutaja sisestab nüüd teksti sisendvälja ja klõpsab Saatmise nupul, pead suutma seda sisendit töödelda. Saad kasutada useState-Hooki, et hallata sisendi praegust väärtust ja API vastust.
Nüüd tuleb nupuvajutuse sündmus hallata. Kui nupp on vajutatud, soovid luua asünkroonse funktsiooni, mis esitab Fetch-päringu serverile. See funktsioon deklareeritakse async-võtmesõnaga, võimaldades kasutada awaiti serveri vastuse ootamiseks.
Järgmine samm: soovid kutsuda Fetch-funktsiooni, et suhelda API-ga. URL antakse kujul API/Chat?MSG={userInput}, kus {userInput} asendatakse kasutaja sisendiga. Alustuseks võid kasutada fikseeritud stringi, et tagada, et API-päring toimib korrektselt.
Pärast päringu saatmist saad vastuse, mida pead töötlema. Võid esmalt vastuse JSON-vormingusse teisendada, et sellega lihtsamalt töötada. Selleks kutsu response.json() meetodit.
Veendu, et saad konsoolis väljundit kontrollida, et veenduda, et kõik toimib ootuspäraselt. Pärast vastuse kontrollimist soovid järgmisena vastuse salvestada olekusse, mille deklareerisid varasemalt.
Kasutajakogemuse parandamiseks soovid veenduda, et kasutaja sisend ei saadetaks alati fikseeritud väärtusega (näiteks "hello"), vaid tegelikult sisestatud sõnumiga. Selleks kasuta useRef-Hooki, et pääseda juurde sisendvälja praegusele väärtusele, kui kasutaja nuppu klõpsab.
Nüüd, kui suudad kasutaja sisendid õigesti salvestada, tee rakenduse testimiseks proovisõit, et kontrollida, kas sisendid saadetakse API-le ja kuvatakse korrektselt.
Kui kõik töötab, näed, et tehisintellekti poolt saadetud vastus kuvatakse ettenähtud DIV-is. Nüüd saad oma kasutajaliidest edasi kujundada või koodi optimeerida.
Praegu on tegu lihtsa küsimuste-vastuste rakendusega, kuna vestluse ajalugu ei salvestata. Täieliku vestlusrakenduse loomiseks oleks vajalik vestluse ajalugu ise salvestada ja saata API-le, et vastustel oleks kontekst.
Siiski on muljetavaldav, et olete juba võimeline kasutama OpenAI API-d ja arendama selle tehnoloogia baasil oma rakenduse. Tulevikus saate funktsionaalsust laiendada, et võimaldada tõeline vestlusajalugu.
Kokkuvõte
Selles juhendis saite teada, kuidas luua Reactis põhiline kasutajaliides, mis võimaldab suhelda OpenAI API-ga. Alates kasutaja sisendite käitlemisest kuni vastuste kuvamiseni on kõike arvesse võetud, et luua funktsionaalne rakendus.
Sagedased küsimused
Kuidas luua sisestusväli Reactis?Saad luua sisestusvälja Reactis, kasutades oma komponendis -elementi.
Kuidas esitada päring OpenAI API-le?Kasuta Fetch funktsiooni, et saata GET- või POST-päring API-sse õige URL-i ja parameetritega.
Mis vahe on useState'i ja useRef'i vahel?useState salvestab väärtused, mis põhjustavad komponendi taasrenderdamist, samas kui useRef salvestab väärtused, mis ei põhjusta uuesti renderdamist.
Kuidas saan salvestada oma rakenduses tehisintellekti vastused?Saad vastused salvestada useState'i olekusse ja seejärel kuvada need kasutajaliideses.
