Cum să transmiteți răspunsul OpenAI în NextJS
Publicat: 2024-03-22Rezumat:
Aflați cum să transmiteți fără probleme răspunsurile OpenAI în NextJS folosind SDK-ul AI al Vercel. Cu un proces simplu de integrare descris în acest ghid, dezvoltatorii pot valorifica eficient puterea generării AI în timp real, îmbunătățind experiența utilizatorului și eficiența fluxului de lucru.
În peisajul digital de astăzi în evoluție rapidă, integrarea capabilităților avansate de inteligență artificială a devenit imperativă pentru companiile care se străduiesc să rămână competitive. În calitate de companie de dezvoltare OpenAI, valorificarea puterii tehnologiilor de ultimă oră precum NextJS pentru a eficientiza procesul de generare și gestionare a răspunsurilor OpenAI prezintă o multitudine de avantaje.
De la îmbunătățirea experienței utilizatorului până la optimizarea eficienței fluxului de lucru, expertiza unei companii de dezvoltare OpenAI poate avea un impact profund asupra integrării și utilizării perfecte a capabilităților OpenAI în cadrul NextJS. În acest ghid, analizăm strategiile și perspectivele esențiale pentru companiile de dezvoltare OpenAI pentru a valorifica eficient potențialul NextJS în eficientizarea răspunsurilor OpenAI, dând astfel întreprinderilor putere să deblocheze noi domenii de inovație și eficiență.
Știm că ați fost frustrat și că ați navigat pentru a transmite răspunsuri OpenAI în NextJS. Există multe moduri de a transmite răspunsul OpenAI și, de asemenea, multe de făcut după fluxul care analizează datele pentru a le face lizibile.
Notă: vom folosi NextJS și Vercel AI SDK pe tot blogul.
Ce este Next.js?
Next.js este un cadru React pentru construirea de aplicații web full-stack. Utilizați React Components pentru a crea interfețe cu utilizatorul și Next.js pentru funcții și optimizări suplimentare.
Sub capotă, Next.js extrage și configurează automat instrumentele necesare pentru React, cum ar fi gruparea, compilarea și multe altele. Acest lucru vă permite să vă concentrați pe construirea aplicației în loc să petreceți timp cu configurarea.
Indiferent dacă sunteți un dezvoltator individual sau faceți parte dintr-o echipă mai mare, Next.js vă poate ajuta să construiți aplicații React interactive, dinamice și rapide.
Ce este Vercel?
Vercel este o platformă pentru dezvoltatori care oferă instrumentele, fluxurile de lucru și infrastructura de care aveți nevoie pentru a vă construi și a implementa aplicațiile web mai rapid, fără a fi nevoie de configurare suplimentară.
Vercel acceptă framework-uri de front-end populare imediate, iar infrastructura sa scalabilă și sigură este distribuită la nivel global pentru a servi conținut din centrele de date din apropierea utilizatorilor dvs. pentru viteze optime.
Care este relația dintre Vercel și Nextjs?
Platforma Vercel este realizată de creatorii Next.js, conceput pentru aplicațiile Next.js. În concluzie, relația dintre Vercel și Next.js reprezintă un parteneriat simbiotic care redefinește modul în care construim și implementăm aplicații web. Prin valorificarea punctelor forte ale ambelor platforme, dezvoltatorii pot debloca noi posibilități și pot oferi experiențe web excepționale care ies în evidență în peisajul competitiv de astăzi.
În timpul dezvoltării, Vercel oferă instrumente pentru colaborarea în timp real la proiectele dvs., cum ar fi mediile de previzualizare automată și de producție și comentarii despre implementările de previzualizare.
Cum putem face streamingul mai ușor folosind Vercel și NextJS?
În iunie 2023, Vercel a lansat o nouă bibliotecă ai (Vercel AI SDK) care oferă adaptoare LLM încorporate / Streaming First UI Helpers / Stream Helpers și apeluri inverse. De la această bibliotecă, răspunsul OpenAI în flux a devenit mult mai ușor.
Înainte de a mă scufunda într-un exemplu, permiteți-mi să vă spun ce biblioteci/cadre de noduri acceptă Vercel AI SDK.
Acceptă React/Next.js, Svelte/SvelteKit, cu suport pentru Nuxt/Vue în curând.
Exemplu - Frontend/Backend ambele în NextJS (A react Framework)
Pasul 1: Crearea aplicației NextJS și instalarea Vercel AI SDK
npx create-next-app@latest
Pentru a instala SDK-ul, introduceți următoarea comandă în terminalul dvs.:
npm i ai
Pentru a instala Openai, introduceți următoarea comandă în terminal:
npm i openai
Tocmai am urmat structura de foldere simplă/implicit a ceea ce npx create-next-app@latest a creat pentru mine pentru a face acest demo simplu și ușor de înțeles.
Pasul 2: creați o pagină frontală pentru a transmite răspunsul
import { useState } din „react”;
export funcția implicită Acasă() {
const [întrebare, setQuestion] = useState("")
const [răspuns, setAnswer] = useState("")
/// funcție pentru a apela routerul openai și a procesa răspunsul de streaming
funcția asincronă retriveResponse() {
/// apelează ruta
răspuns constant: orice = await fetch ("/api/chat", {
metoda: "POST",
body: JSON.stringify({
întrebare
}),
următor: { revalidare: 0 }
})
lasă resptext = "";
const reader = răspuns.corp
.pipeThrough(nou TextDecoderStream())
.getReader();
/// continuă fluxul
în timp ce (adevărat) {
const { valoare, terminat } = await reader.read();
dacă (terminat) {
pauză;
}
respect += valoare;
setAnswer(resptext);
}
}
întoarcere (
<div>
<label htmlFor="Puneți-vă întrebarea"></label>
<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>
<button onClick={retriveResponse}>Răspuns în flux</button>
<br />
<p>{răspuns}</p>
</div>
);
}
Componenta de mai sus creează o interfață în care utilizatorii pot introduce întrebări și pot face clic pe un buton pentru a trimite întrebarea către un API de pe partea de server (/api/chat) și pentru a afișa răspunsul în flux de la server în timp real
Pasul 3: Creați o rută back-end pentru a transmite răspunsul
import OpenAI din "openai";
// Setați timpul de execuție la margine pentru performanță optimă
export const config = {
runtime: "margine",
};
exportați handler implicit de funcție asincronă (cerere, răspuns) {
const { întrebare } = await request.json();
// Preluați răspunsul de la API-ul OpenAI
const openai = nou OpenAI({
apiKey: process.env.NEXT_PUBLIC_OPENAI_KEY,
});
const responseFromOpenAI = așteaptă openai.chat.completions.create({
model: "gpt-3.5-turbo",
temperatura: 0,
top_p: 1,
mesaje: [{ rol: „utilizator”, conținut: întrebare }],
flux: adevărat,
})
încerca {
// Convertiți răspunsul într-un flux de text prietenos
const stream = OpenAIStream(responseFromOpenAI);
// Răspunde cu fluxul
returnează un nou StreamingTextResponse(stream);
} captură (eroare) {
return response.send(400).send(eroare);
}
}
Codul de mai sus definește o funcție fără server care primește o întrebare de la o solicitare HTTP, o trimite către API-ul OpenAI pentru procesare și transmite răspunsul către client.
Pasul 4: Rulați aplicația
npm run dev
Ieșire
Video.webm
Video cu demo
drive.google.com
Dacă ați vizionat videoclipul, probabil că aveți o bună înțelegere a modului în care funcționează demonstrația. Pentru cei interesați să exploreze codul complet, îl puteți găsi pe GitHub la acest link: Next.js OpenAI Streaming.
Referinte:
https://vercel.com/blog/introducing-the-vercel-ai-sdk
https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction
https://platform.openai.com/docs/introduction
Pentru a fi la curent cu cele mai recente evoluții în domeniul AI, este recomandabil să fiți cu ochii pe documentația Vercel AI. Asigurați-vă că rămâneți la curent cu actualizări și îmbunătățiri, deoarece Vercel continuă să-și avanseze ofertele în domeniul AI.