Jak przesyłać strumieniowo odpowiedź OpenAI w NextJS

Opublikowany: 2024-03-22

AI/ML 4 minuty 3

22 marca 2024 r

Streszczenie:

Dowiedz się, jak płynnie przesyłać strumieniowo odpowiedzi OpenAI w NextJS przy użyciu pakietu AI SDK firmy Vercel. Dzięki prostemu procesowi integracji opisanemu w tym przewodniku programiści mogą skutecznie wykorzystać moc generowania sztucznej inteligencji w czasie rzeczywistym, poprawiając doświadczenia użytkowników i efektywność przepływu pracy.

W dzisiejszym szybko rozwijającym się krajobrazie cyfrowym integracja zaawansowanych możliwości sztucznej inteligencji stała się koniecznością dla firm pragnących zachować konkurencyjność. Jako firma zajmująca się rozwojem OpenAI, wykorzystanie mocy najnowocześniejszych technologii, takich jak NextJS, w celu usprawnienia procesu generowania odpowiedzi OpenAI i zarządzania nimi, zapewnia wiele korzyści.

Od poprawy doświadczenia użytkownika po optymalizację wydajności przepływu pracy, wiedza specjalistyczna firmy zajmującej się rozwojem OpenAI może znacząco wpłynąć na bezproblemową integrację i wykorzystanie możliwości OpenAI w ramach NextJS. W tym przewodniku zagłębiamy się w strategie i spostrzeżenia niezbędne dla firm zajmujących się rozwojem OpenAI, aby skutecznie wykorzystać potencjał NextJS w usprawnianiu reakcji OpenAI, umożliwiając w ten sposób firmom odblokowanie nowych obszarów innowacji i wydajności.

Wiemy, że byłeś sfrustrowany i szukałeś odpowiedzi OpenAI w NextJS. Istnieje wiele sposobów przesyłania strumieniowego odpowiedzi OpenAI, a także wiele do zrobienia po strumieniu, który analizuje dane, aby były czytelne.

Uwaga: na całym blogu będziemy używać NextJS i Vercel AI SDK.

Co to jest Next.js?

Next.js to framework React do tworzenia kompleksowych aplikacji internetowych. Komponentów React używasz do tworzenia interfejsów użytkownika, a Next.js do tworzenia dodatkowych funkcji i optymalizacji.

Pod maską Next.js wyodrębnia i automatycznie konfiguruje narzędzia potrzebne do Reacta, takie jak łączenie, kompilowanie i inne. Dzięki temu możesz skupić się na budowaniu aplikacji zamiast spędzać czas na konfiguracji.

Niezależnie od tego, czy jesteś indywidualnym programistą, czy częścią większego zespołu, Next.js może pomóc Ci w tworzeniu interaktywnych, dynamicznych i szybkich aplikacji React.

Co to jest Vercel?

Vercel to platforma dla programistów zapewniająca narzędzia, przepływy pracy i infrastrukturę niezbędną do szybszego tworzenia i wdrażania aplikacji internetowych, bez konieczności dodatkowej konfiguracji.

Vercel od razu obsługuje popularne platformy frontendowe, a jego skalowalna, bezpieczna infrastruktura jest dystrybuowana na całym świecie, aby udostępniać treści z centrów danych w pobliżu użytkowników z optymalną szybkością.

Jaki jest związek między Vercelem a Nextjs?

Platforma Vercel jest tworzona przez twórców Next.js i przeznaczona dla aplikacji Next.js. Podsumowując, relacja pomiędzy Vercel i Next.js reprezentuje symbiotyczne partnerstwo, które na nowo definiuje sposób, w jaki budujemy i wdrażamy aplikacje internetowe. Wykorzystując mocne strony obu platform, programiści mogą odblokować nowe możliwości i zapewnić wyjątkowe doświadczenia internetowe, które wyróżniają się na dzisiejszym konkurencyjnym krajobrazie.

Podczas opracowywania Vercel zapewnia narzędzia do współpracy w czasie rzeczywistym nad projektami, takie jak automatyczne środowiska podglądu i środowiska produkcyjne oraz komentarze dotyczące wdrożeń podglądu.

Jak możemy ułatwić przesyłanie strumieniowe za pomocą Vercel i NextJS?

W czerwcu 2023 r. firma Vercel wypuściła nową bibliotekę ai (Vercel AI SDK), która zapewnia wbudowane adaptery LLM / pomocniki pierwszego interfejsu użytkownika strumieniowego / pomocniki strumieniowe i wywołania zwrotne. Od czasu tej biblioteki przesyłanie strumieniowe odpowiedzi OpenAI stało się znacznie łatwiejsze.

Zanim zagłębię się w przykład, pozwól, że opowiem, jakie biblioteki/frameworki węzłów obsługuje Vercel AI SDK.

Obsługuje React/Next.js, Svelte/SvelteKit, a wkrótce będzie dostępna obsługa Nuxt/Vue.

Przykład — Frontend/Backend w NextJS (A React Framework)

Krok 1: Tworzenie aplikacji NextJS i instalacja zestawu SDK Vercel AI

npx utwórz-następną-aplikację@latest

Aby zainstalować pakiet SDK, wpisz w terminalu następujące polecenie:

npm i ai

Aby zainstalować Openai, wpisz w terminalu następujące polecenie:

npm otwieram

Właśnie zastosowałem prostą/domyślną strukturę folderów, którą stworzył dla mnie npx create-next-app@latest, aby uczynić to demo prostym i łatwym do zrozumienia.

Krok 2: Utwórz stronę front-end, aby przesyłać strumieniowo odpowiedź

„użyj klienta”

importuj {useState} z „reaguj”;

eksportuj domyślną funkcję Home() {

const [pytanie, setQuestion] = useState("")

const [odpowiedź, setAnswer] = useState("")

/// funkcja wywołująca router Openai i przetwarzająca odpowiedź strumieniową

funkcja asynchroniczna pobieranieResponse() {

/// wywołaj trasę

stała odpowiedź: any = oczekuj fetch("/api/chat", {

metoda: „POST”,

treść: JSON.stringify({

pytanie

}),

następny: { ponowna walidacja: 0 }

})

niech resptext = "";

stały czytnik = odpowiedź.treść

.pipeThrough(nowy TextDecoderStream())

.getReader();

///kontynuuje strumień

podczas gdy (prawda) {

const {wartość, gotowe } = czekaj na czytnik.czytaj();

jeśli (zrobione) {

przerwa;

}

odpowiedni tekst += wartość;

setAnswer(resptext);

}

powrót (

<div>

<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>

<button onClick={retriveResponse}>Odpowiedź na transmisję strumieniową</button>

<br />

<p>{odpowiedź</p>

</div>

);

}

Powyższy komponent tworzy interfejs, w którym użytkownicy mogą wprowadzać pytania i kliknąć przycisk, aby wysłać pytanie do interfejsu API po stronie serwera (/api/chat) i wyświetlić odpowiedź przesyłaną strumieniowo z serwera w czasie rzeczywistym

Krok 3: Utwórz trasę zaplecza do przesyłania strumieniowego odpowiedzi

importuj {OpenAIStream, StreamingTextResponse} z „ai”;

importuj OpenAI z „openai”;

// Ustaw środowisko wykonawcze na Edge, aby uzyskać najlepszą wydajność

eksportuj stałą konfigurację = {

czas wykonania: „krawędź”,

};

eksportuj domyślną procedurę obsługi funkcji asynchronicznej (żądanie, odpowiedź) {

const { pytanie } = czekaj na żądanie.json();

// Pobierz odpowiedź z API OpenAI

const openai = nowe OpenAI({

apiKey: proces.env.NEXT_PUBLIC_OPENAI_KEY,

});

stała odpowiedźFromOpenAI = czekaj na openai.chat.completions.create({

model: "gpt-3.5-turbo",

temperatura: 0,

góra_p: 1,

wiadomości: [{ rola: "użytkownik", treść: pytanie }],

strumień: prawda,

})

próbować {

// Konwertuj odpowiedź na przyjazny strumień tekstowy

stały strumień = OpenAIStream(odpowiedźFromOpenAI);

// Odpowiedz strumieniem

zwróć nową StreamingTextResponse(strumień);

} złapać (błąd) {

zwróć odpowiedź.wyślij(400).wyślij(błąd);

}

Powyższy kod definiuje funkcję bezserwerową, która odbiera pytanie z żądania HTTP, wysyła je do interfejsu API OpenAI w celu przetworzenia i przesyła strumieniowo odpowiedź do klienta.

Krok 4: Uruchom aplikację

npm uruchom programistę

Wyjście

Wideo.webm

Film z demonstracji

drive.google.com

Jeśli obejrzałeś film, prawdopodobnie dobrze rozumiesz, jak działa wersja demonstracyjna. Osoby zainteresowane pełnym kodem mogą znaleźć go w serwisie GitHub pod tym linkiem: Next.js OpenAI Streaming.

Bibliografia:

https://vercel.com/blog/introducing-the-vercel-ai-sdk

https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction

https://platforma.openai.com/docs/introduction

Aby być na bieżąco z najnowszymi osiągnięciami w dziedzinie sztucznej inteligencji, zaleca się śledzenie dokumentacji sztucznej inteligencji firmy Vercel. Bądź na bieżąco z aktualizacjami i ulepszeniami, ponieważ Vercel stale rozwija swoją ofertę w domenie AI.