Tässä oppaassa opit, kuinka voit luoda perus käyttöliittymän (UI) React-sovelluksella, joka mahdollistaa kommunikoinnin OpenAI-rajapinnan kanssa. Sen sijaan että keskustelisimme Selaimen kautta URL, luomme yksinkertaisen sovelluksen, jossa käyttäjä voi syöttää tekstiä ja saada vastauksen tekoälyltä KI. Käsittelemme sekä Frontend-koodin että logiikan käyttäjän syötteiden käsittelyyn ja kommunikointiin OpenAI-rajapinnan kanssa.
Tärkeimmät oivallukset
- Opit, kuinka luoda Reactissa syötekentän ja painikkeen lähettääksesi käyttäjän pyyntöjä.
- Opit myös, kuinka tehdä asynkronisia hakuja OpenAI-rajapintaan ja tallentaa saadut vastaukset React-tilaan ja näyttää ne.
Askel-askeleelta-ohjeet
Aloita luomalla uusi React-sovellus tai siirtymällä olemassa olevaan sovellukseen. index.jsx-tiedostossa asennat peruskomponentit vuorovaikutukselle.
Lisää ensin syötekenttä, johon käyttäjä voi syöttää viestinsä. Tämä mahdollistaa käyttäjien reagoinnin tekoälyyn. Lisää siis syötekenttä ja painike pyynnön lähettämiseksi.
Kun käyttäjä nyt syöttää tekstiä syötekenttään ja napsauttaa Lähetä-painiketta, sinun täytyy pystyä käsittelemään tämä syöte. Voit käyttää useState-Hookia nykyisen syötteen arvon sekä API:n vastauksen hallintaan.
Nyt sinun täytyy käsitellä Painike-tapahtuma. Kun painiketta painetaan, haluat luoda asynkronisen toiminnon tekemään hakupyyntö palvelimelle. Tämä toiminto julistetaan async-avainsanalla, jotta voit käyttää await vastauksen odottamiseen palvelimelta.
Seuraava vaihe on tässä: Haluat kutsua Hakutoimintoa kommunikoidaksesi API:n kanssa. URL annetaan muodossa API/Chat?MSG={userInput}, missä {userInput} korvataan käyttäjän syötteellä. Voit ensin käyttää kiinteää merkkijonoa varmistaaksesi, että API-pyyntö toimii oikein.
Lähettämäsi pyynnön vastauksen jälkeen sinun täytyy käsitellä vastaus. Voit ensin muuntaa vastauksen JSON-muotoon, jotta voit työskennellä sen kanssa helpommin. Kutsu siihen response.json().
Varmista, että voit tarkistaa tulosteen konsolista varmistaaksesi, että kaikki toimii odotetusti. Kun olet tarkistanut vastauksen, seuraava vaihe on tallentaa vastaus tilaan, jonka olet deklaroinut ylempänä.
Käyttäjäkokemuksen parantamiseksi haluat varmistaa, että käyttäjän syöttöä ei aina lähetetä kiinteällä arvolla (kuten "hello"), vaan todellisella syötetyllä viestillä. Käytä siihen useRef-Hookia päästäksesi käsiksi nykyiseen arvoon syötekentässä, kun käyttäjä napsauttaa painiketta.
Nyt, kun pystyt tallentamaan käyttäjän syötetyt tiedot oikein, sinun tulisi suorittaa sovelluksesi testikierros varmistaaksesi, että syötteet lähetetään API:lle ja näytetään oikein.
Kun kaikki toimii, voit huomata, että vastaus tekoälyltä näkyy tarkoitetussa DIV:ssä. Voit nyt jatkaa käyttöliittymän kehittämistä tai optimoida koodia.
Kyseessä on tällä hetkellä vain yksinkertainen kysymys-vastaus-sovellus, koska keskusteluhistoriaa ei tallenneta. Jotta voit luoda täydellisen chat-sovelluksen, on tarpeen tallentaa itse chat-historia ja lähettää se API:lle, jotta konteksti säilyy vastauksissa.
Kuitenkin on vaikuttavaa, että olet jo kykenevä käyttämään OpenAI API:a ja kehittämään oman sovelluksen perustuen tähän teknologiaan. Tulevaisuudessa voit laajentaa toiminnallisuutta mahdollistaaksesi oikean keskusteluhistorian.
Yhteenveto
Tässä oppaassa olet oppinut vaiheet perus käyttöliittymän luomiseen Reactissa, joka mahdollistaa kommunikoinnin OpenAI API:n kanssa. Käyttäjän syötteiden käsittelystä vastaamiseen on opittu kaikki, jotta voidaan luoda toimiva sovellus.
Usein kysytyt kysymykset
Miten voin luoda syötekentän Reactissa?Voit luoda syötekentän Reactissa käyttämällä -elementtiä komponentissasi.
Miten voin tehdä pyynnön OpenAI API:lle?Käytä Fetch-funktiota lähettämään GET- tai POST-pyyntö API:lle oikealla URL:llä ja parametreilla.
Mikä on eriys käytössä useState:n ja useRef:n välillä?useState tallentaa arvoja, jotka laukaisevat komponentin uudelleenrenderöinnin, kun taas useRef tallentaa arvoja, jotka eivät laukaise uudelleenrenderöintiä.
Miten voin tallentaa tekoälyn vastaukset sovelluksessani?Voit tallentaa vastaukset tilaan useState:n avulla ja sitten näyttää ne käyttöliittymässä.
