Come eseguire lo streaming di OpenAI Response in NextJS
Pubblicato: 2024-03-22Riepilogo:
Scopri come trasmettere in streaming le risposte OpenAI in NextJS utilizzando l'SDK AI di Vercel. Con un semplice processo di integrazione descritto in questa guida, gli sviluppatori possono sfruttare in modo efficiente la potenza della generazione di intelligenza artificiale in tempo reale, migliorando l'esperienza utente e l'efficienza del flusso di lavoro.
Nel panorama digitale odierno in rapida evoluzione, l'integrazione di funzionalità avanzate di intelligenza artificiale è diventata fondamentale per le aziende che desiderano rimanere competitive. In qualità di società di sviluppo OpenAI, sfruttare la potenza di tecnologie all'avanguardia come NextJS per semplificare il processo di generazione e gestione delle risposte OpenAI presenta numerosi vantaggi.
Dal miglioramento dell'esperienza utente all'ottimizzazione dell'efficienza del flusso di lavoro, l'esperienza di una società di sviluppo OpenAI può avere un impatto profondo sulla perfetta integrazione e utilizzo delle funzionalità di OpenAI all'interno del framework NextJS. In questa guida, approfondiamo le strategie e gli approfondimenti essenziali affinché le società di sviluppo OpenAI possano sfruttare in modo efficace il potenziale di NextJS nel razionalizzare le risposte OpenAI, consentendo così alle aziende di sbloccare nuovi regni di innovazione ed efficienza.
Sappiamo che sei stato frustrato e che hai cercato in streaming le risposte OpenAI in NextJS. Esistono molti modi per trasmettere in streaming la risposta OpenAI e anche molto da fare dopo lo streaming per analizzare i dati per renderli leggibili.
Nota: utilizzeremo NextJS e Vercel AI SDK in tutto il blog.
Cos'è Next.js?
Next.js è un framework React per la creazione di applicazioni web full-stack. Utilizzi React Components per creare interfacce utente e Next.js per funzionalità e ottimizzazioni aggiuntive.
Sotto il cofano, Next.js astrae e configura automaticamente anche gli strumenti necessari per React, come il raggruppamento, la compilazione e altro. Ciò ti consente di concentrarti sulla creazione della tua applicazione invece di dedicare tempo alla configurazione.
Che tu sia uno sviluppatore individuale o parte di un team più ampio, Next.js può aiutarti a creare applicazioni React interattive, dinamiche e veloci.
Cos'è Vercel?
Vercel è una piattaforma per sviluppatori che fornisce gli strumenti, i flussi di lavoro e l'infrastruttura necessari per creare e distribuire le tue app Web più velocemente, senza la necessità di configurazioni aggiuntive.
Vercel supporta i framework frontend più diffusi immediatamente e la sua infrastruttura scalabile e sicura è distribuita a livello globale per servire contenuti dai data center vicini ai tuoi utenti per velocità ottimali.
Qual è la relazione tra Vercel e Nextjs?
La piattaforma Vercel è realizzata dai creatori di Next.js, progettata per le applicazioni Next.js. In conclusione, il rapporto tra Vercel e Next.js rappresenta una partnership simbiotica che ridefinisce il modo in cui costruiamo e distribuiamo applicazioni web. Sfruttando i punti di forza di entrambe le piattaforme, gli sviluppatori possono sbloccare nuove possibilità e offrire esperienze web eccezionali che si distinguono nel panorama competitivo odierno.
Durante lo sviluppo, Vercel fornisce strumenti per la collaborazione in tempo reale sui tuoi progetti, come ambienti di produzione e anteprima automatici e commenti sulle distribuzioni di anteprima.
Come possiamo semplificare lo streaming utilizzando Vercel e NextJS?
Nel giugno 2023 Vercel ha rilasciato una nuova libreria ai (Vercel AI SDK) che fornisce adattatori LLM integrati/aiutanti per lo streaming della prima interfaccia utente/aiutanti per lo streaming e richiamate. Da quando è presente questa libreria, lo streaming della risposta OpenAI è diventato molto più semplice.
Prima di immergerti in un esempio, lascia che ti dica quali librerie/framework di nodi sono supportati da Vercel AI SDK.
Supporta React/Next.js, Svelte/SvelteKit, con il supporto per Nuxt/Vue in arrivo.
Esempio: frontend/backend entrambi in NextJS (A react Framework)
Passaggio 1: creazione dell'app NextJS e installazione di Vercel AI SDK
npx create-next-app@latest
Per installare l'SDK, inserisci il seguente comando nel tuo terminale:
npm io ai
Per installare Openai, inserisci il seguente comando nel tuo terminale:
npm ho aperto
Ho semplicemente seguito la struttura delle cartelle semplice/predefinita di ciò che npx create-next-app@latest ha creato per me per rendere questa demo semplice e facile da capire.
Passaggio 2: crea una pagina front-end per trasmettere in streaming la risposta
importa { useState } da "react";
funzione predefinita di esportazione Home() {
const [domanda, setQuestion] = useState("")
const [risposta, setAnswer] = useState("")
/// funzione per chiamare il router openai ed elaborare la risposta dello streaming
funzione asincrona retriveResponse() {
/// chiama il percorso
risposta const: any = attendono fetch("/api/chat", {
metodo: "POST",
corpo: JSON.stringify({
domanda
}),
successivo: { riconvalidare: 0 }
})
let rispostatesto = "";
const lettore = risposta.corpo
.pipeThrough(nuovo TextDecoderStream())
.getReader();
/// prosegue lo stream
mentre (vero) {
const { valore, fatto } = attendono lettore.read();
se (fatto) {
rottura;
}
testo di risposta += valore;
setRisposta(testo di risposta);
}
}
ritorno (
<div>
<label htmlFor="Fai la tua domanda"></label>
<input type="text" value={question} onChange={(e)=>setQuestion(e.target.value)}/>
<button onClick={retriveResponse}>Risposta in streaming</button>
<br />
<p>{risposta}</p>
</div>
);
}
Il componente precedente crea un'interfaccia in cui gli utenti possono inserire domande e fare clic su un pulsante per inviare la domanda a un'API lato server (/api/chat) e visualizzare la risposta in streaming dal server in tempo reale
Passaggio 3: crea un percorso back-end per trasmettere in streaming la risposta
importare OpenAI da "openai";
// Imposta il runtime su edge per ottenere le migliori prestazioni
esporta configurazione const = {
runtime: "bordo",
};
esporta il gestore della funzione asincrona predefinito (richiesta, risposta) {
const {domanda} = attendono request.json();
// Recupera la risposta dall'API OpenAI
const openai = nuovo OpenAI({
APIKey: process.env.NEXT_PUBLIC_OPENAI_KEY,
});
const rispostaFromOpenAI = attendono openai.chat.completions.create({
modello: "gpt-3.5-turbo",
temperatura: 0,
top_p: 1,
messaggi: [{ ruolo: "utente", contenuto: domanda }],
flusso: vero,
})
Tentativo {
// Converti la risposta in un flusso di testo amichevole
const stream = OpenAIStream(responseFromOpenAI);
// Risponde con lo stream
restituisce new StreamingTextResponse(stream);
} cattura (errore) {
restituisce risposta.send(400).send(errore);
}
}
Il codice precedente definisce una funzione serverless che riceve una domanda da una richiesta HTTP, la invia all'API OpenAI per l'elaborazione e trasmette la risposta al client.
Passaggio 4: esegui l'app
npm esegui dev
Produzione
Video.webm
Video della dimostrazione
drive.google.com
Se hai guardato il video, probabilmente hai una buona conoscenza di come funziona la demo. Per chi fosse interessato ad esplorare il codice completo, lo può trovare su GitHub a questo link: Next.js OpenAI Streaming.
Riferimenti:
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
Per rimanere informati sugli ultimi sviluppi nel campo dell'intelligenza artificiale, è consigliabile tenere d'occhio la documentazione sull'intelligenza artificiale di Vercel. Assicurati di rimanere sintonizzato per aggiornamenti e miglioramenti mentre Vercel continua a far avanzare le sue offerte nel dominio dell'intelligenza artificiale.