Entonces ya tenemos todas las dependencias instaladas.
Ahora lo primero que tenemos que hacer es crear el cliente de OpenAI
y lo hacemos con este de el friendly para Edge, ¿vale?
Así que creamos la configuración, creamos una nueva configuración
y aquí lo que le tenemos que pasar es la API Key,
que la API Key nosotros ya hemos puesto como variable de entorno.
Ya tendríamos la configuración, ¿vale?
Ya tenemos primer paso, configuración.
Así que ahora creamos el cliente, OpenAI, New, OpenAI, API
y lo que le pasamos es la config que hemos creado.
Antes de todo esto, también una cosa que tenemos que hacer
es decirle a Vercel, le decimos a Vercel
dónde queremos ejecutar este endpoint.
Porque si no, por defecto, esto no es una función que funciona en el Edge,
sino que funciona en el Cloud.
Pues lo que le queremos decir es, oye, no, esta ruta,
lo que quiero es que funcione el runtime que tienes que utilizar
es Edge, ¿vale?
Eso de Vercel no sé de dónde viene.
Para que sepáis también las ventajas, qué diferencia hay.
Edge tiene mejor rendimiento, pero sí soporta y soporta streaming
y soporta streaming de datos, que luego veremos un croquis
de qué es esto de hacer streaming de datos, ¿vale?
En cambio, el default tiene peor rendimiento,
no soporta streaming de datos,
pero tiene mayor compatibilidad con paquetes de Node.
Y esto ya lo podéis ver, que hemos tenido que utilizar
un paquete muy específico para utilizar esto.
Para que lo tengáis en cuenta, en el Edge,
normalmente estamos hablando, aquí estaríamos hablando de milisegundos
y aquí estaríamos hablando de segundos.
Sería un poco la diferencia.
Mientras que aquí las requests normales pueden durar hasta segundos.
Para que a veces no ponga la idea,
esto sean requests de milisegundos.
Y esto pueden ser, pueden ser, no hace falta que dure,
pero que puede tener la posibilidad.
Por ejemplo, para generar una imagen que es CPU Sensitive,
seguramente vas a tener que utilizar este.
Pero para hacer lo que estamos haciendo,
que es llamar a una API, que eso no utiliza la CPU,
porque cuando es asíncrono y está esperando datos,
no utiliza la CPU, seguramente será mucho mejor este.
¿Qué más podemos hacer aquí?
Bueno, ahora la respuesta la vamos a cambiar un poco.
Lo primero que vamos a hacer es utilizar la llamada al OpenAI.
Así que vamos a tener la respuesta y hacemos una wait,
utilizamos la API de OpenAI y hacemos un create chat.
chat, vamos a poner chat completion.
Le tenemos que decir el modelo.
El modelo en este caso es chat GPT turbo, nunca me acuerdo.
GPT, ese es el modelo.
GPT 3.5-turbo.
Le tenéis que indicar cuál es el modelo.
Podéis utilizar cualquiera de los que veis aquí,
o GPT 4 o GPT 3.5 turbo.
Porque estos de aquí no son de chat, sino que son de completion.
Mira, vamos a utilizar esto, que aquí nos lo va a decir seguramente.
Modelo, el stream.
Vale, le podemos decir, oye, tiene que hacer stream de los datos.
Le vamos a decir que sí, pero esto luego lo cambiamos
para explicar las consecuencias de cambiar esto.
Los mensajes, hacemos messages.
Y aquí tendríamos el texto, hola soy un bot.
Bueno, el primer mensaje, si no me equivoco,
podríamos ponerle lo del mensaje, lo del servicio.
Messages, eso, role.
Role, ponemos el role.
Y aquí tendríamos diferentes roles.
Tendríamos el role del usuario, el del servicio.
También tendríamos rol, servicio.
Messages, a veces encuentro un ejemplo.
¿Ves? Teníamos sistema, usuario, asistente o función.
Entonces, tú en el sistema ya le puedes decir cómo se tiene que comportar.
¿Vale? Sistema.
Y aquí le decimos, compórtate como si fueses mi abuela regañándome
por no ir a la unidad de misa.
Por no ir a la universidad a estudiar programación.
¿Vale?
Ahora, nosotros le tenemos que seguir dando ahí como role, ¿no?
Aquí en el usuario yo le diría algo.
Le puedo decir, no le vamos a pasar nada.
Se lo vamos a pasar directamente.
Y ya está.
Luego cuando lo creemos, ¿vale?
Con la request y todo esto.
Vamos a poner un ejemplo solo para que lo veamos, ¿eh?
Text.
No quiero ir.
Abuela, no me encuentro...
No me encuentro muy bien.
No puedo ir a estudiar programación.
¿Vale?
Y ahora veremos lo que nos contesta.
¿Vale?
Podéis cambiar el máximo de tokens, que son más o menos, no exactamente las palabras,
pero más o menos.
Temperatura, para que digáis cuánto queréis que se le vaya un poco la olla, este tipo
de cosas.
Y esto sería cuántas veces se repite.
Como decir, oye, vamos a intentar evitar para hacer contestaciones como mucho más ricas
y no estar contestando todo el rato lo mismo.
Vale.
Muy bien.
Pues esto es lo que le vamos a decir al chat GPT, por ahora que se comporte como nuestra
abuela.
Ahora, normalmente, para sacar esta respuesta, tendríamos que acceder a una propiedad que
es un array, a la primera, el primer elemento, que no sé qué, no sé cuánto.
Bueno, utilizando OpenAI Stream, que esto es del SDK de Vercel, podemos pasarle directamente
la respuesta que hemos conseguido de esto.
O sea, que fíjate lo fácil y limpio que queda.
Y esto lo que nos va a devolver es directamente el stream de datos.
Vamos a transformar la respuesta de OpenAI en un text stream.
Un stream que vamos a estar enviándole constantemente al usuario.
Esto no tiene nada que ver con WebSocket.
Esto directamente lo que hace es que deja abierta la conexión y con la conexión abierta
va enviando los datos conforme van llegando.
Un stream de datos es conforme van llegando datos, pues los voy escupiendo.
Y ahora lo único que tengo que hacer es devolver un nuevo streaming de text response
pasándole el stream.
Vale, pues tanto esto como esto son las dos utilidades mágicas de Vercel, que hace que
esto que normalmente...
Ay, mira, esto lo he escrito mal.
OpenAI Stream.
Que normalmente esto es mucho más difícil y te voy a enseñar después un ejemplo de
código para que veas el antes y el después, para que te des cuenta cuánto código nos
hemos quitado y cómo de fácil ha sido esto para hacer algo que normalmente es un
poco más complicado.
Esto en principio debería funcionar, aunque luego lo cambiaremos y lo haremos un poquito
más complicado, ¿vale?
Pero si vamos aquí, ¿vale?
Aquí vemos que...
Ah, bueno, claro.
Porque esto tiene que ser un stream donde probamos un stream de datos.
Bueno, podríamos hacer la parte de...
Ah, bueno, aquí dice fail to convert response to stream.
Ojo, que me ha dado otro error.
G-save status 401, pero 401 es de que no ha tenido acceso.
A ver, vamos a ver esto.
Para que no me dé el 401.
401 es porque no me ha pillado la API.
Pero cuando hacemos el create chat completion...
No sé si...
Espérate.
Igual sí que son requeridos los campos que yo pensaba que no eran requeridos.
O sea, algunos de estos, que a lo mejor sí que son requeridos, y yo me los he petado
pensando que tendrían valores por defecto, y resulta que no.
Vamos por aquí.
Al menos...
¿Ves?
Todavía es 400.
O sea, fuera la respuesta...
No sé qué...
Ah, espérate.
Ah, no.
Pues si tiene la wait.
Vamos a poner con el console.log.
Response.
Vamos a ver qué tiene la respuesta esta.
Rate limit tokens.
Vale, a ver qué nos devuelve todo esto.
Bad request.
O sea, le estoy pasando algo mal de la request.
A ver si es que en los roles...
Ah, está mal.
Está mal, amigos.
¿Alguien se ha dado cuenta?
Bueno, es difícil darse cuenta.
Pero esto me pasa por no haber utilizado.
Eso me pasa por no haber utilizado...
Pero vaya mierda.
Ahora, esto es una cosa que odio muy fuerte de los bad requests.
A mí lo que me gustaría es que te dijese en la bad request,
te dijese los campos que has puesto mal, no sé qué, no sé cuánto.
Y no me los ha dicho.
O sea, el problema era este, ¿eh?
Role content.
El content este no era text, era content.
Ahora ya sí que debería, al menos no dar el 400, debería dar otro error.
Porque entrar directamente al streaming de datos no debería funcionar.
Pero, bueno, mira.
Ah, hijito, ¿qué te pasa?
No puedes dejar que la flojera te venza.
Si quieres tener éxito en la vida, necesitas esforzarte y estudiar mucho.
La programación es una carrera maravillosa.
Vale, muy bien, abuela.
Gracias, abuela, gracias.
Entonces, ya tenemos a nuestra abuela que nos está diciendo que vayamos a la universidad y todo esto.
Perfecto.
Al menos hemos avanzado, pero nos faltaría la parte del frontend, que es bastante más interesante.
Y es donde vamos a poder ver el streaming, porque ya veis que aquí no estamos viendo nada del streaming.
Gracias.
Gracias.