Основен UI в React с OpenAI API

В този Урок ще научите как да създадете основен потребителски интерфейс (UI) с React, който ви позволява да комуникирате с OpenAI API. Вместо да чатите през URL в браузъра, ще създадем просто приложение, в което потребителят може да въвежда текст и да получава съответния отговор от ИИ-то. Ще разгледаме както фронтенд кода, така и логиката за обработка на входовете и комуникацията с OpenAI API.

Най-важните открития

• Ще разберете как да създадете в React поле за въвеждане и бутон, за да изпращате заявки от потребителите.
• Също така ще научите как да изпращате асинхронни Fetch заявки към OpenAI API и как да съхранявате и показвате получените отговори във вашето React състояние.

Стъпка по стъпка насоки

Започнете, като създадете ново приложение с React или отидете във вече съществуващото си приложение. Във файл index.jsx ще създадете основни компоненти за взаимодействие.

Първо искате да добавите поле за въвеждане, в което потребителят може да въведе своите съобщения. Това позволява на потребителите да взаимодействат с ИИ. Така че добавете поле за въвеждане и бутон, за да изпратите заявката.

Когато потребителят въведе текст в полето за въвеждане и кликне върху бутона за изпращане, трябва да можете да обработите този вход. Можете да използвате хука useState, за да управлявате текущата стойност на входа и отговора от API-то.

Сега трябва да обработите събитието на кликване на бутона. Когато бутона се натисне, искате да създадете асинхронна функция, която изпраща Fetch заявка към сървъра. Тази функция се декларира с ключовата дума async, която ви позволява да използвате await, за да изчакате отговора от сървъра.

Следващата стъпка е да извикате функцията Fetch, за да комуникирате с API-то. URL-ът се предоставя във формат API/Chat?MSG={userInput}, като {userInput} се заменя с входа на потребителя. Първо може да използвате фиксиран низ, за да се уверите, че заявката към API-то работи правилно.

След като изпратите заявката, получавате отговор, който трябва да обработите. Първо може да преобразувате отговора в JSON формат, за да може по-лесно да работите с него. За това извикайте response.json().

Уверете се, че можете да проверите изхода в конзолата, за да се уверите, че всичко работи както очаквате. След като проверите отговора, следващото, което искате да направите, е да съхраните отговора в състоянието, което сте декларирали по-горе.

За да подобрите потребителския опит, искате да сте сигурни, че входът на потребителя не винаги се изпраща с фиксирана стойност (като "hello"), а с реално въведеното съобщение. За това използвайте хука useRef, за да достъпите текущата стойност на полето за въвеждане, когато потребителят кликне върху бутона.

Сега, като вече можете да правилно засечете входовете на потребителите, трябва да направите тестово пускане на приложението си, за да проверите дали входовете се изпращат успешно до API-то и се показват правилно.

Ако всичко работи, ще забележите, че отговорът от ИИ-то се показва в див-а, предвиден за това. Сега можете да продължите да оформяте потребителския си интерфейс или да оптимизирате кода.

В момента това е просто приложение за въпроси и отговори, тъй като историята на чата не се запазва. За да създадете пълноценно чат приложение, ще бъде необходимо да запазите историята на разговора и да я изпратите на API-то, така че да има контекст за отговорите си.

Все пак е впечатляващо, че вече можеш да използваш OpenAI API и така да разработиш свое собствено приложение, базирано на тази технология. В бъдещи стъпки можеш да разшириш функционалността, за да позволиш реален разговор.

Резюме

В този урок научи как да създадеш основен потребителски интерфейс в React, който позволява комуникация с OpenAI API. Всичко, от управлението на входовете на потребителя до показването на отговорите, беше обсъдено, за да създадеш функционално приложение.