Cómo transmitir la respuesta OpenAI en NextJS
Publicado: 2024-03-22Resumen:
Aprenda a transmitir sin problemas respuestas de OpenAI en NextJS utilizando el SDK de IA de Vercel. Con un proceso de integración simple descrito en esta guía, los desarrolladores pueden aprovechar de manera eficiente el poder de la generación de IA en tiempo real, mejorando las experiencias de los usuarios y la eficiencia del flujo de trabajo.
En el panorama digital actual en rápida evolución, la integración de capacidades avanzadas de IA se ha vuelto imperativa para las empresas que se esfuerzan por seguir siendo competitivas. Como empresa de desarrollo de OpenAI, aprovechar el poder de tecnologías de vanguardia como NextJS para agilizar el proceso de generación y gestión de respuestas de OpenAI presenta una multitud de ventajas.
Desde mejorar la experiencia del usuario hasta optimizar la eficiencia del flujo de trabajo, la experiencia de una empresa de desarrollo de OpenAI puede impactar profundamente la perfecta integración y utilización de las capacidades de OpenAI dentro del marco NextJS. En esta guía, profundizamos en las estrategias y conocimientos esenciales para que las empresas de desarrollo de OpenAI aprovechen eficazmente el potencial de NextJS para optimizar las respuestas de OpenAI, empoderando así a las empresas para desbloquear nuevos ámbitos de innovación y eficiencia.
Sabemos que se ha sentido frustrado y ha estado navegando en busca de respuestas de OpenAI en NextJS. Hay muchas formas de transmitir la respuesta de OpenAI y también hay mucho que hacer después de la transmisión que analiza los datos para hacerlos legibles.
Nota: Usaremos NextJS y Vercel AI SDK en todo el blog.
¿Qué es Next.js?
Next.js es un marco de React para crear aplicaciones web de pila completa. Utilice React Components para crear interfaces de usuario y Next.js para funciones y optimizaciones adicionales.
Debajo del capó, Next.js también abstrae y configura automáticamente las herramientas necesarias para React, como agrupación, compilación y más. Esto le permite concentrarse en crear su aplicación en lugar de dedicar tiempo a la configuración.
Ya sea que sea un desarrollador individual o parte de un equipo más grande, Next.js puede ayudarlo a crear aplicaciones React interactivas, dinámicas y rápidas.
¿Qué es Vercel?
Vercel es una plataforma para desarrolladores que proporciona las herramientas, los flujos de trabajo y la infraestructura que necesita para crear e implementar sus aplicaciones web más rápido, sin necesidad de configuración adicional.
Vercel admite marcos de interfaz de usuario populares listos para usar y su infraestructura segura y escalable se distribuye globalmente para ofrecer contenido desde centros de datos cercanos a sus usuarios para velocidades óptimas.
¿Cuál es la relación entre Vercel y Nextjs?
La plataforma de Vercel está creada por los creadores de Next.js, diseñada para aplicaciones Next.js. En conclusión, la relación entre Vercel y Next.js representa una asociación simbiótica que redefine la forma en que construimos e implementamos aplicaciones web. Al aprovechar las fortalezas de ambas plataformas, los desarrolladores pueden desbloquear nuevas posibilidades y ofrecer experiencias web excepcionales que se destacan en el panorama competitivo actual.
Durante el desarrollo, Vercel proporciona herramientas para la colaboración en tiempo real en sus proyectos, como vista previa automática y entornos de producción, y comentarios sobre implementaciones de vista previa.
¿Cómo podemos facilitar la transmisión usando Vercel y NextJS?
En junio de 2023, Vercel lanzó una nueva biblioteca ai (Vercel AI SDK) que proporciona adaptadores LLM integrados/ayudantes de Streaming First UI/stream helpers y devoluciones de llamadas. Desde esta biblioteca, transmitir la respuesta de OpenAI se ha vuelto mucho más fácil.
Antes de profundizar en un ejemplo, permítame decirle qué bibliotecas/marcos de nodos admite Vercel AI SDK.
Es compatible con React/Next.js, Svelte/SvelteKit y pronto habrá soporte para Nuxt/Vue.
Ejemplo: Frontend/Backend ambos en NextJS (un marco de reacción)
Paso 1: crear la aplicación NextJS e instalar Vercel AI SDK
npx crear-siguiente-aplicación @ más reciente
Para instalar el SDK, ingrese el siguiente comando en su terminal:
npm yo ai
Para instalar Openai, ingrese el siguiente comando en su terminal:
npm abroai
Acabo de seguir la estructura de carpetas simple/predeterminada que npx create-next-app@latest creó para mí para que esta demostración sea simple y fácil de entender.
Paso 2: cree una página de inicio para transmitir la respuesta
importar {useState} desde "reaccionar";
exportar función predeterminada Inicio() {
const [pregunta, establecerPregunta] = useState("")
const [respuesta, establecerRespuesta] = useState("")
/// función para llamar al enrutador openai y procesar la respuesta de transmisión
función asíncrona recuperarRespuesta() {
/// llamar a la ruta
respuesta constante: cualquiera = await fetch("/api/chat", {
método: "POST",
cuerpo: JSON.stringify({
pregunta
}),
siguiente: { revalidar: 0 }
})
dejar resptext = "";
lector constante = respuesta.cuerpo
.pipeThrough(nuevo TextDecoderStream())
.getReader();
/// continúa la transmisión
mientras (verdadero) {
const {valor, hecho} = esperar lector.read();
si (hecho) {
romper;
}
resptexto += valor;
setAnswer(resptexto);
}
}
devolver (
<div>
<label htmlFor="Haz tu pregunta"></label>
<tipo de entrada="texto" valor={pregunta} onChange={(e)=>setQuestion(e.target.value)}/>
<button onClick={retriveResponse}>Transmitir respuesta</button>
<br />
<p>{respuesta}</p>
</div>
);
}
El componente anterior crea una interfaz donde los usuarios pueden ingresar preguntas y hacer clic en un botón para enviar la pregunta a una API del lado del servidor (/api/chat) y mostrar la respuesta de transmisión desde el servidor en tiempo real.
Paso 3: crear una ruta de back-end para transmitir la respuesta
importar OpenAI desde "openai";
// Establece el tiempo de ejecución en Edge para obtener el mejor rendimiento
exportar configuración constante = {
tiempo de ejecución: "borde",
};
exportar el controlador de función asíncrono predeterminado (solicitud, respuesta) {
const {pregunta} = esperar solicitud.json();
// Obtener la respuesta de la API OpenAI
const openai = nuevo OpenAI({
apiKey: proceso.env.NEXT_PUBLIC_OPENAI_KEY,
});
respuesta constanteFromOpenAI = espera openai.chat.completions.create({
modelo: "gpt-3.5-turbo",
temperatura: 0,
top_p: 1,
mensajes: [{ rol: "usuario", contenido: pregunta }],
corriente: verdadero,
})
intentar {
// Convierte la respuesta en un flujo de texto amigable
flujo constante = OpenAIStream(respuestaFromOpenAI);
// Responde con el flujo
devolver nueva StreamingTextResponse(corriente);
} captura (error) {
devolver respuesta.enviar(400).enviar(error);
}
}
El código anterior define una función sin servidor que recibe una pregunta de una solicitud HTTP, la envía a la API de OpenAI para su procesamiento y transmite la respuesta al cliente.
Paso 4: ejecuta la aplicación
npm ejecutar desarrollador
Producción
Vídeo.webm
Vídeo de la demostración
drive.google.com
Si ha visto el vídeo, probablemente comprenda bien cómo funciona la demostración. Para aquellos interesados en explorar el código completo, pueden encontrarlo en GitHub en este enlace: Next.js OpenAI Streaming.
Referencias:
https://vercel.com/blog/introduciendo-el-vercel-ai-sdk
https://sdk.vercel.ai/docs https://platform.openai.com/docs/introduction
https://platform.openai.com/docs/introduction
Para mantenerse informado sobre los últimos avances en el campo de la IA, es recomendable estar atento a la documentación sobre IA de Vercel. Asegúrese de estar atento a las actualizaciones y mejoras a medida que Vercel continúa avanzando en sus ofertas en el dominio de la IA.