Pagrindinė vartotojo sąsaja "React" su "OpenAI API

Šioje pamokoje sužinosite, kaip su "React" sukurti pagrindinę naudotojo sąsają (UI) , kuri leistų bendrauti su " OpenAI API". Užuot bendravę per URL naršyklėje, sukursime paprastą programą, kurioje naudotojas galės įvesti tekstą ir gauti atitinkamą atsakymą iš AI. Apimsime priekinės dalies kodą, taip pat įvesties apdorojimo ir bendravimo su "OpenAI API" logiką.

Pagrindinės žinios

• Suprasite, kaip "React" sistemoje sukurti įvesties lauką ir mygtuką naudotojo užklausoms siųsti.
• Taip pat sužinosite, kaip atlikti asinchronines išvedimo užklausas į OpenAI API ir gautus atsakymus saugoti bei rodyti "React" būsenoje.

Žingsnis po žingsnio vadovas

Pradėkite kurdami naują "React" programą arba pereikite prie esamos programos. Faile index.jsx nustatysite pagrindinius sąveikos komponentus.

Pirmiausia norite pridėti įvesties lauką, kuriame naudotojas galėtų įvesti savo žinutes. Tai leis naudotojams sąveikauti su dirbtiniu intelektu. Taigi pridėkite įvesties lauką ir užklausos siuntimo mygtuką.

Jei dabar naudotojas į įvesties lauką įves tekstą ir spustelės mygtuką siųsti, turite turėti galimybę apdoroti šią įvestį. Galite naudoti kabliuką useState, kad valdytumėte dabartinę įvesties reikšmę, taip pat API atsakymą.

Dabar reikia apdoroti mygtuko paspaudimo įvykį. Kai mygtukas paspaudžiamas, norite sukurti asinchroninę funkciją, kuri atliktų išrinkimo užklausą į serverį. Ši funkcija deklaruojama su raktiniu žodžiu async, kuris leidžia naudoti await ir laukti serverio atsakymo.

Štai kitas žingsnis: norite iškviesti fetch funkciją ryšiui su API palaikyti. URL nurodomas formatu API/Chat?MSG={userInput}, kur {userInput} pakeičiamas vartotojo įvestimi. Iš pradžių galite naudoti fiksuotą eilutę, kad užtikrintumėte, jog API užklausa veiktų teisingai.

Išsiuntę užklausą, gausite atsakymą, kurį turėsite apdoroti. Pirmiausia atsakymą galite konvertuoti į JSON formatą, kad su juo būtų lengviau dirbti. Norėdami tai padaryti, skambinkite response.json().

Įsitikinkite, kad galite patikrinti išvestį konsolėje ir įsitikinti, kad viskas veikia taip, kaip tikėtasi. Patikrinę atsakymą, kitą dalyką, kurį norėsite padaryti, tai išsaugoti atsakymą būsenoje, kurią deklaravote pirmiau.

Kad dar labiau pagerintumėte naudotojo patirtį, norite įsitikinti, kad naudotojo įvestis visada siunčiama ne su fiksuota verte (pavyzdžiui, "labas"), o su tikruoju įvestu pranešimu. Norėdami tai padaryti, naudokite kabliuką useRef, kad pasiektumėte dabartinę įvesties lauko reikšmę, kai naudotojas paspaudžia mygtuką.

Dabar, kai jau galite tinkamai užfiksuoti naudotojo įvestį, turėtumėte atlikti bandomąjį programos paleidimą, kad patikrintumėte, ar įvestis ir siunčiama į API, ir rodoma teisingai.

Jei viskas veikia, galite matyti, kad AI atsakymą rodo nurodytame DIV. Dabar galite toliau kurti naudotojo sąsają arba optimizuoti kodą.

Šiuo metu tai tik paprasta klausimų ir atsakymų programa, nes pokalbių istorija neišsaugoma. Norint sukurti visavertę pokalbių programą, reiktų išsaugoti paties pokalbio istoriją ir nusiųsti ją API, kad ji turėtų atsakymų kontekstą.

Nepaisant to, įspūdinga, kad jau dabar galima naudotis "OpenAI API" ir kurti savo programą, pagrįstą šia technologija. Ateityje galėsite išplėsti funkcijas, kad būtų galima įjungti realią pokalbių istoriją.

Apibendrinimas

Šioje mokomojoje programoje išmokote žingsnių, kaip sukurti pagrindinę vartotojo sąsają "React" programoje, leidžiančią bendrauti su "OpenAI API". Buvo aptarta viskas, kas reikalinga funkcionaliai programėlei sukurti - nuo naudotojo įvesties apdorojimo iki atsakymų rodymo.