Základné užívateľské rozhranie v React s OpenAI API

V tomto návode sa naučíš, ako vytvoriť základné užívateľské rozhranie (UI) s Reactom, ktoré ti umožní komunikovať s OpenAI API. Namiesto chatovania cez URL v prehliadači vytvoríme jednoduchú aplikáciu, kde bude môcť používateľ zadať text a získať príslušnú odpoveď od IA. Zaminieme sa o kód pre frontend i logiku spracovania vstupov a komunikáciu s OpenAI API.

Základné poznatky

• Porozumieš, ako v Reacte vytvoriť poľo na vstupe a tlačidlo pre odosielanie žiadostí od používateľov.
• Taktiež sa naučíš, ako poslať asynchrónne Fetch žiadosti na OpenAI API a uložiť a zobraziť získané odpovede vo svojom React stave.

Krok za krokom sprievodca

Začni tým, že vytvoríš novú aplikáciu React alebo sa presunieš do svojej existujúcej aplikácie. V súbore index.jsx nastavíš základné komponenty pre interakciu.

Najprv pridaj pole na vstupe, do ktorého používateľ môže zadať svoje správy. To umožní používateľom interagovať s IA. Takže pridaj pole na vstup a tlačidlo pre odoslanie požiadavky.

Ak používateľ zadá text do poľa na vstupe a klikne na tlačidlo Odoslať, musíš byť schopný tento vstup spracovať. Môžeš použiť useState-Hook na správu súčasnej hodnoty vstupu a odpovede od API.

Teraz musíš spracovať udalosť kliknutia na tlačidlo. Keď sa tlačidlo stlačí, chceš vytvoriť asynchrónnu funkciu, ktorá odosle Fetch žiadosť na server. Táto funkcia je deklarovaná s async kľúčovým slovom, čo ti umožní použiť await na čakanie na odpoveď od servera.

Ďalším krokom je volanie Fetch funkcie na komunikáciu s API. URL je zadaná vo formáte API/Chat?MSG={userInput}, pričom {userInput} je nahradený používateľským vstupom. Môžeš najskôr použiť pevný reťazec, aby si sa uistil, že žiadosť na API funguje správne.

Po odoslaní žiadosti získaš odpoveď, ktorú musíš spracovať. Najskôr odpoveď prevedieme do formátu JSON, aby sme s ňou mohli ľahšie pracovať. Na to zavoláme response.json().

Uistite sa, že môžete skontrolovať výstup v konzole, aby ste sa uistili, že všetko funguje podľa očakávania. Po skontrolovaní odpovede chcete odpoveď uložiť do stavu, ktorý ste deklarovali vyššie.

Pre ďalšie zlepšenie užívateľského zážitku chcete zabezpečiť, aby vstup používateľa nebol vždy odoslaný s pevnou hodnotou (ako "ahoj"), ale s skutočnou zadanou správou. Na prístup k aktuálnej hodnote poľa na vstupe, keď používateľ klikne na tlačidlo, použi Hook useRef.

Teraz, keď správne zachytávate vstupy používateľov, mali by ste spustiť test svojej aplikácie, aby ste overili, či sa vstupy odosielajú na API a správne sa zobrazujú.

Ak všetko funguje, uvidíte, že odpoveď od IA sa zobrazuje vo vytvorenom DIV. Teraz môžete ďalej upravovať svoje užívateľské rozhranie alebo optimalizovať kód.

Aktuálne ide len o jednoduchú aplikáciu na otázky a odpovede, pretože sa história chatu neukladá. Ak chcete vytvoriť úplnú aplikáciu na chatovanie, je potrebné ukladať históriu chatu samotného a posielať ju na API, aby malo kontext pre odpovede.

Napriek tomu je pôsobivé, že už dokážeš používať OpenAI API a vytvoriť vlastnú aplikáciu založenú na tejto technológii. V budúcich krokoch môžeš rozšíriť funkcionalitu tak, aby bola možná reálna komunikácia.

Zhrnutie

V tomto návode si sa naučil kroky na vytvorenie základného užívateľského rozhrania v Reacte, ktoré umožňuje komunikáciu s OpenAI API. Od spracovania používateľských vstupov po zobrazenie odpovedí bolo zahrnuté všetko potrebné na vytvorenie funkčnej aplikácie.