Tenemos hackathon con la gente de Bersel, un proyectazo que vamos a estar haciendo durante un mes aproximadamente en el que puedes participar y te puedes llevar más de mil dólares en premios.
Tenemos cinco premios a repartir y no se lo pueden perder.
¿Cómo funciona esto? ¿Cómo tienes que participar? Y no te preocupes, hoy te lo voy a explicar todo.
Os voy a explicar lo que es una hackathon porque es increíble que todavía, todavía la gente no sabe lo que es una hackathon.
Una hackathon es una actividad de desarrollo de software, aunque también se puede utilizar en otras cosas, pero sobre todo en desarrollo de software donde los participantes trabajan o en solitario o en equipo para resolver un problema o un desafío específico en un tiempo determinado.
¿Esto qué quiere decir? Pues que la hackathon tiene un principio y un fin. En este caso va a ser más o menos un mes. Vais a tener más o menos un mes.
Y la idea es que los participantes pues aprendan a trabajar en equipo, aprendan una tecnología nueva o se pongan un reto de cómo solucionar algo.
Normalmente tiene algún tema en concreto que tienen que seguir y en este caso vais a ver que hay una tecnología en concreto que vais a tener que utilizar, ¿vale?
Y lo vamos a ir comentando y de hecho hoy os voy a explicar, vamos a hacer un par de proyectos porque aquí también vemos código.
Entonces vamos a ver código que me parece que está muy chulo. Vamos a hacer dos proyectos muy chulos con inteligencia artificial porque de eso va a ir la cosa, de inteligencia artificial.
Vamos a tener que hacer un proyecto para participar en la hackathon que sea con inteligencia artificial y vais a tener que utilizar una biblioteca en concreto.
Ahora bien, vais a poder utilizar React, Vue, Svelte, lo que os dé la gana. No hay que utilizar React ni Next.js si no quieres.
O sea que no te preocupes porque que sea de Vercell no significa para nada que vaya a ser obligatorio Next.js.
Puedes utilizar Next, puedes utilizar Astro, puedes crear una API, puedes utilizar, vamos, lo que te dé la gana.
Así que tenedlo en cuenta que no va a ser un problema el framework. Y luego también lo podéis desplegar donde queráis, donde queráis.
Así que si lo queréis desplegar en Vercell, perfecto. Si lo queréis desplegar en otro sitio, también.
Ahora, en Kotlin ya no va a poder ser. Eso es más complicado el tema del lenguaje porque vais a tener que utilizar un SDK en concreto, ¿vale?
Entonces ahí lo vais a tener que tener en cuenta. Que tenéis que utilizar un SDK en concreto que hoy lo veremos y que por lo tanto eso os va a limitar el lenguaje.
Y os voy a recordar algo. Mañana tenemos curso de React Native el día 1.
Entonces, si queréis aprender desarrollo móvil desde cero, mañana y pasado vamos a tener el curso totalmente gratuito de React Native aquí en directo a la misma hora que estamos haciendo esto.
¿Vale? Así que no te lo pierdas que tenemos eventazo mañana y pasado para que aprendas desarrollo móvil.
Lo vamos a hacer con Expo. Lo vamos a hacer con Expo porque, amigos, y mañana lo vamos a comentar.
Expo es el framework recomendado por la gente de React Native. A día de hoy, la propia gente de React Native lo dice.
No tiene sentido hacer una aplicación de React Native sin framework y sin Expo. Por lo tanto, vamos a utilizar Expo, por supuesto.
Hoy tenemos la hackathon de Vercell. Hoy empezamos con la hackathon de Vercell, ¿vale?
¿Y qué vamos a hacer en la hackathon de Vercell?
He creado un repositorio donde tenéis toda la información, ¿va? Para que podáis saber cuáles son los premios, cómo os tenéis que apuntar y todo esto.
Para apuntaros a la hackathon de Vercell, vais a tener que, aquí en Isus, vais a tener que crear una Isu y aquí tenéis, registra tu participación en la hackathon.
Esto no hace falta que lo hagáis ya, no hace falta. Esto lo tendréis que hacer, por ejemplo, cuando tengáis claro cómo vais a participar, cuál es el nombre de vuestro proyecto, el repositorio con código y vuestro proyecto ya esté desplegado, ¿vale?
Entonces, no hace falta que os apuntéis ya. Si queréis, os podéis apuntar. Aunque yo creo que si lo reposáis un poco, pues mejor.
Pero esto será como os tenéis que registrar para la hackathon y así crearéis una Isu. Por ejemplo, aquí os pondréis participación, mi DUDEP.
Mi aplicación usa Vercell SDK, está desplegada y funciona. Pues nombre del equipo, o yo qué sé, vamos a poner Feralp.
Nombre del proyecto, el impresionante proyecto de Feralp. ¿Qué es lo que hace? Crea SVGs con inteligencia artificial. Luego el repositorio del proyecto, ¿vale?
Aquí es donde estaría el código de tu proyecto, Feralp SVGIA y aquí el proyecto desplegado, ¿vale? Entonces pondría SVGIA.versell.app.
Si por lo que sea no es obligatorio, y esto es importante, no es obligatorio que sea una web. ¿Por qué? Porque hoy mismo vamos a estar haciendo código
que va a ser una aplicación de Node, o sea, una aplicación de terminal. Pero puede ser una aplicación de terminal, una extensión, puede ser también una API,
que vamos a ver ejemplos de una API. Puede ser una web también. Puede ser lo que queráis, ¿vale? Pero no hace falta que sea una página web.
Por eso, aquí en proyecto desplegado no es requerido este campo. Pero obviamente, si es una web, tenéis que tenerla desplegada, ¿vale?
Si es una web, tiene que estar desplegada. Si se necesita algún paso extra para utilizar este proyecto, aquí lo ponéis.
Las instrucciones de cada cosa que hay que hacer, ¿vale? Y le dais a Submit New Issue y ya lo tenéis. ¡Pum! Aquí lo tenéis, ¿vale?
Aquí tendréis la participación de Midudep y aquí tendréis todo el asunto, toda la información. Y aquí en Issues, pues tendremos toda la gente que participa, ¿vale?
Así que así es como te tendrás que apuntar. Pero de nuevo, no hace falta que estés apuntado ya el primer día y tal, sino que no te preocupes.
Lo puedes hacer con el paso del tiempo. ¿Hasta cuándo vais a tener el tiempo? Esa es la pregunta del millón.
¿Hasta cuándo vais a poder participar? Bueno, la fecha límite para inscribiros es el 6 de agosto de 2024.
Hasta el 6 de agosto de 2024. Tenéis aquí fecha límite de inscripción 6 de agosto de 2024.
¿Se puede hacer equipo? Se puede hacer equipo. Podéis hacerlo de 1 a 80.000 personas.
Podéis ser tantas personas como queráis en el equipo. Ahora bien, tened en cuenta que el premio se va a repartir.
O sea, si ganáis el primer premio y resulta que el primer premio son 500 dólares, si sois 8 personas, vosotros seréis quien lo tenga que repartir, ¿vale?
Eso lo tenéis que tener clarísimo. No es que todo el equipo, si sois 8.000 personas, cada persona se va a llevar el primer premio.
No. Al final lo que vais a necesitar es repartirlo. Como lo hagáis, vosotros sabréis. Como os paileáis, pues lo que sea.
Pero eso es lo más importante. La primera persona que aparezca en la ISU será la persona que reciba el pago.
Será la persona que al final ahí, cada uno que haga lo que tenga que hacer.
Pero la persona que abre la ISU, ¿vale? Porque las ISUs están como relacionadas a una persona en concreto.
¿Vale? Por ejemplo aquí, pues Juan Pablo Vargas, Marco Vilera.
La primera persona, la persona que aparece aquí, será la persona que reciba el pago, en el caso que gane.
Y ahí cada uno, pues que se lo reparta como sea.
Entonces, vamos a ver. 6 de agosto, fecha límite de inscripción.
Y el 13 de agosto, porque así tendremos una semana para poder revisarlo.
Y el equipo de Vercell va a estar revisando vuestros proyectos.
Tienen una semana para revisar y vamos a elegir los finalistas.
Los finalistas, vamos a estar revisando los mejores proyectos.
No vamos a poder revisarlos todos.
Entonces, vamos a hacer una selección.
Los mejores proyectos y las votaciones finales, porque vas a ser tú.
¡Tú!
Tú vas a ser el que elija el ganador o la ganadora o los ganadores y ganadoras, lo que sea.
Vosotros, ustedes, son los que tienen la última palabra.
Vamos a hacer nosotros los finalistas.
Y ustedes, en una votación final, decidirán quién gana.
¿Vale?
Así que, vosotros y ustedes, son los que tienen el poder total.
No, ¿será entonces un concurso de popularidad?
No, hombre, popularidad no.
Muchas veces, muchas veces, yo creo que está bien que participe la comunidad.
Y la verdad, siempre que lo hemos hecho, siempre que lo hemos hecho, ha estado bastante bien.
Ha estado bastante bien.
Yo creo que ha estado bastante bien y no se han hecho pucherazos raros.
Entonces, yo creo que en ese caso, lo vamos a seguir haciendo así, para que vosotros decidáis.
No sé, yo creo que tiene que ser el apoyo vuestro.
Porque si no, al final, si yo decido el ganador sin que nadie vea, la gente va a ser,
¡Ah!
Es que, ¿por qué esto?
Lo otro.
Y sí, Guillermo va a estar viendo proyectos también.
Me lo ha dicho.
Me ha dicho que va a estar revisando proyectos.
Así que, mirad, a mí me parece una oportunidad brutal para que hagáis un proyecto que, además,
tenga muchas, muchas posibilidades de hacerse, no sé si viral, pero que pase por muchos ojos.
Y que, a lo mejor, haya gente que comente algo, que lo podáis compartir en LinkedIn,
que sea un buen proyecto para poner en portafolio y todo esto.
Entonces, no os preocupéis de cómo hacerlo y tal, que hoy no se los voy a explicar
qué es lo que tenéis que hacer exactamente, sino que vamos a ver un par de ejemplos
con código minio para que podáis usarlo como base, pero os voy a dar un montón de ejemplos
de código abierto para que os podáis también, para que os podáis revisarlo, ¿vale?
Y lo más interesante, es totalmente gratis.
O sea, no tenéis que pagar para utilizar el SDK.
Vais a ver que si utilizáis algún modelo de inteligencia artificial,
hay algunos que sí que son de pago y lo que sea.
Pero os voy a comentar cómo podéis evitar gastar dinero, ¿vale?
Luego os lo comento cómo lo podéis hacer para que no gastéis dinero,
porque yo os voy a comentar cómo podéis hacer de que yo sea la persona que ponga
el código o la API Key para que, por lo que sea, si lo desplegáis,
se tenga que poner la API Key y así no os cobre si tenéis muchos usuarios
o alguien os intenta hacer cualquier cosa, ¿vale?
Así que no os preocupéis.
Venga, estas son las fechas.
6 de agosto, fecha límite de inscripción.
13 de agosto, las votaciones finales, ¿vale?
¿Tienes que usar React?
No tienes que utilizar React.
Puedes utilizar cualquier framework, el que prefieras.
¿Tienes que usar Vercel?
No, puedes desplegarlo donde quieras.
No estás obligado a desplegarlo con Vercel.
¿Tienes que utilizar una inteligencia artificial de pago?
ChagPT, Perplexity, Mistral, lo que sea.
Sí, pero puedes hacer que solo funcione al informar con una API Key, ¿vale?
O sea, que esto lo vamos a ver.
Luego os enseñaré un ejemplo para que lo veáis.
Los premios, que esto es lo que mola.
Los premios, los premios.
Gemini, también podéis utilizar Gemini.
De hecho, ahora lo veremos, ¿eh?
Gemini, ¿vale?
Los premios.
Ojo, Swag Box de Vercel.
Mira qué Swag más bonito, ¿eh?
Puede participar cualquier persona del mundo.
No está limitado a España.
Vamos a enviaros el paquete.
No importa dónde estéis escondidos.
Como si queréis estar viviendo Pachuca.
Como si estáis en Machu Picchu.
No importa.
Vamos a haceros llegar no solo el Swag, sino que también los premios, ¿vale?
No importa dónde estéis viviendo.
Este es el Swag Box que os podéis llevar de la gente de Vercel.
Que ya sabéis que esto lo dan en contadas ocasiones.
Bueno, pues los premios de la hackathon son para el cuarto y quinto puesto, ¿vale?
Van a estar créditos para Vercel y la caja de Swag.
El tercer puesto son 100 dólares créditos de Vercel y el Swag.
Segundo puesto, 250 dólares créditos y Swag.
Y el primero se lleva 500 dólares créditos de Vercel y el Swag, ¿vale?
500 dólares el primero.
Además de esto, además de esto, ya veréis que vamos a tener más premios, más sorteos que os iré comentando.
Pero por ahora, la gente solo por participar, la gente que participe en la hackathon, entre toda la gente que no ha ganado, la gente que queda y no queda en los finalistas, los cinco finalistas, entre toda la gente que participe, vamos a sortear tres libros de GitHub, ¿vale?
Los libros de GitHub de los que tengo aquí en Aprendiendo Git y GitHub, ¿vale?
Los que tengo aquí, este de aquí, este de aquí, ¿vale?
Pues este, tres libros físicos.
Independientemente de dónde viváis, no os preocupéis que lo vais a conseguir también.
Os lo enviaremos cuando haga falta.
Si sois de Argentina va a ser complicado, pero lo haremos llegar, ¿vale?
Así que vamos a estar sorteando tres libros físicos de GitHub para todo el mundo que participe.
Pero aparte de esto, vamos a tener más sorteos que os voy a ir informando conforme van pasando los días, ¿vale?
Así que no creo que esté firmado porque haremos el envío directamente, a no ser que, por lo que sea, yo esté allí y os lo pueda acercar o lo que sea, ¿eh?
Dicho esto, vamos a hacer un repaso rápido.
¿Cómo participar?
Pues aquí, creando una ISU, ves que pone aquí, regístrate aquí, pues aquí os registráis, ponéis vuestro nombre, el proyecto y todo y así vais a participar.
La pregunta del millón, ¿qué premios hay?
Aquí tenéis todos los premios en el Ritmi.
El primero se lleva 500 dólares, 250 dólares el segundo, 100 dólares el tercero y el cuarto y el quinto.
Y toda la gente que queda finalista, créditos de Vercell y una caja como esta con dos camisetas de Vercell, una gorra y unos stickers, ¿vale?
Y esto os lo vamos a llevar a cualquier sitio.
¿Se va a analizar el código?
¿Qué se va a tener en cuenta?
Está bien que me vayáis haciendo algunas preguntas porque así las vamos a ir añadiendo.
¿Se va a analizar el código?
Sí.
¿Va a ser lo más importante?
No.
Lo más importante que vamos a tener en cuenta es que sorprenda, que sea algo que sorprenda.
Ya sea porque la interfaz, la experiencia de usuario es muy buena, porque la idea es muy buena, algo que realmente sorprenda.
¿Cómo lo queréis sorprender?
Lo podéis hacer con una idea loca, creatividad, que la experiencia del usuario sea muy buena, pero también vamos a estar revisando el código.
Si el código resulta que todo el código os lo habéis copiado, que es horrible, que no funciona muy bien, la página va fatal y tal, pues obviamente lo vamos a tener en cuenta.
Pero podéis presentar varias, podéis presentaros tantas veces como queráis.
Eso también lo podéis hacer, os podéis presentar con un equipo, lo podéis hacer solos, podéis presentar dos proyectos si queréis, os podéis presentar tantas veces como queráis.
Eso sí, que los proyectos tienen que ser vuestros, no empecéis a aplicar proyectos que no son de ustedes, ¿vale? Entiendo.
Entonces, ¿qué es lo que tenéis que hacer? Porque os estoy explicando la jacatón, la jacatón, la jacatón.
¿Qué es lo que tenéis que hacer, amigos?
Lo que tenéis que hacer es crear un proyecto con Vercel AI SDK.
¿Qué es esto de Vercel SDK?
Bueno, esto de los creadores de Next.js es una biblioteca que podéis utilizar para crear productos con inteligencia artificial.
Es un SDK que es totalmente gratuito, no hay que pagar para utilizarlo, pero es posible que tengáis que pagar para activar los modelos que utiliza por detrás,
pero no es para Vercel. Vercel esto es totalmente gratuito.
Lo que sí que es, si lo conectáis con ChatGPT, pues claro, a lo mejor necesitáis una API Key y ahí sí que tenéis que pagar.
Si utilizáis Perplexity, lo que sea, ¿vale?
Eso ya depende de cada uno.
Si utilizáis un... Depende del modelo, pues tenéis que pagar o no tenéis que pagar.
Ahí cada uno tendrá su estrategia, su forma de hacer y tal.
Pero en principio no tenéis que... O sea, no hay que pagar nada para utilizar esto, ¿vale?
Esto es un SDK que es gratuito y ya está.
¿Qué es un SDK? Un SDK es un Software Development Kit.
Es un set de herramientas para hacer cosas.
En este caso, para crear productos con inteligencia artificial.
Por ejemplo, para que os hagáis una idea, el proyecto de V0 de Vercel, esto que puedes hacer,
crea una modal de inicio de sesión con diferentes redes sociales.
Este proyecto que te genera layouts con HTML y también con componentes de React,
este proyecto que estáis viendo, está utilizando el paquete de Vercel AI SDK.
Está utilizando este mismo paquete, lo están utilizando aquí.
Y entonces veis que yo le he puesto aquí, crea una modal de inicio de sesión con diferentes redes sociales.
Y me ha creado esta modal, me ha creado tres ejemplos, ¿vale?
Y aquí podemos ver el código, tanto en JSX como en HTML, que todavía lo está cargando en HTML,
pero eventualmente no sé si saldrá, a lo mejor se ha quedado pinchado, pero eventualmente sale.
Y esto lo están haciendo todo con Vercel AI SDK.
Así que para que os hagáis una idea de cómo de potente es este SDK.
Pero se pueden hacer un montón de cosas.
Por ejemplo, podéis apuntar a diferentes APIs de inteligencia artificial.
¿Ves? Aquí dice, podéis crear interfaces de usuario, como lo que está haciendo aquí, pues lo está haciendo así.
Es compatible con Vue, con RIA, con XDS, con Svelte, con NAX.
Todo esto, ahí podéis decidir vosotros lo que queráis utilizar, ¿vale?
Y luego, también tiene un montón de pequeñas utilidades internas que os va a mejorar un montón la vida para hacer vuestras herramientas.
Por ejemplo, tenéis como tres partes.
Tenéis el SDK Core, que esto sería como lo más importante, el motor principal a la hora de generar texto a partir de inteligencia artificial.
A agentes y todo esto.
Luego tendríais la de UI, que son unas herramientas o unos hooks para utilizar en cualquier framework.
Lo podéis utilizar en Svelte, en Vue, en React.
Y lo que hace esto, ¿ves? Aquí hay un ejemplo de React, pero ya os digo yo que esto también se puede utilizar en diferentes sitios, ¿vale?
Y esto lo que te ayuda es a recuperar la información, la respuesta de inteligencia artificial y mostrarlo en pantalla.
Podéis utilizar Azure, podéis utilizar OpenAI, Anthropic, Google, Mistral, Grok, Perplexity.
Hoy os voy a enseñar dos ejemplos, ¿vale?
O sea, no os preocupéis porque hoy vais a ver código con dos ejemplos.
Uno utilizando OpenAI, que seguramente es el más sencillo, y otro utilizando Perplexity.
¿Por qué? Porque es una alternativa que además puede ser un poco más barata y ya está.
Pero que veáis que podéis utilizar diferentes modelos.
O sea, no está simplemente OpenAI.
Podéis utilizar un montón de modelos.
O sea, aquí tenéis una lista entera.
También podéis utilizarlo con Yama o Yama, Chrome AI.
Podéis hacerlo.
Incluso podría llegar a escribir el vuestro.
Vuestro proyecto podría ser escribir vuestro propio conector, lo cual ya sería brutal.
El fine tuning ya está por vuestra parte, a no ser que encontráis un modelo.
Pero aquí tenéis también una lista con input de imagen, con generación de objetos.
Aquí tenéis un montón.
Así que ahí ya será cuestión de que cada uno decida y utilizar el que quiera.
Estos son los modelos, pero también tenéis templates, ¿vale?
Imagínate que quieres empezar un proyecto con Next.js o con Naxx, con Svelte, con Solid.
Aquí tenéis starters.
Si queréis empezar con Vue, por ejemplo, lo podríais hacer con este proyecto que ya está preparado para que empecéis desde cero.
Y ya tiene todo lo necesario para arrancar, ¿vale?
Así que aquí tenéis cuatro starters.
Tenéis ejemplos para hacer un chatbot.
También temas de seguridad, protección de bot y todo esto.
¿Vale?
Así que un poquito, alguna pregunta hasta aquí.
¿Tienen alguna pregunta?
Lástima que no tengo mucha experiencia con ella.
No te preocupes, el CAP.
Hoy vamos a ver un par de ejemplos de código que te pueden servir.
Así que no te preocupes si no tienes experiencia, porque hoy voy a explicar un poquito paso a paso cómo hacer dos ejemplos que te pueden ayudar un montón.
¿Vale?
Open Router se podría usar, ya que se puede usar de manera gratuita algunos modelos de IA.
A ver, mientras los puedas conectar con Vercell AI SDK, ya está.
Lo único, el único requisito que hay de la hackathon, el único requisito es crear un proyecto que use Vercell SDK AI.
Ese es el único requisito.
El modelo, dónde lo desplegas, qué tecnología usas, qué es lo que hace, da igual.
Así que mientras tenga esta dependencia que veis aquí, esta, la de AI, esté instalada en el proyecto y se utilice, ¿vale?
Y se utilice, ya está.
Ya lo tenéis.
Eso es todo lo que se pide.
Punto.
No hay ningún tipo de problema con nada más.
¿Debe ser un proyecto desde cero o puede ser un proyecto con avances?
Puede ser un proyecto con avances, de nuevo, que utilice AI.
¿Es posible participar sin gastar nada de dinero?
Sí que es posible.
¿Por qué es posible?
Porque, como veis aquí, entre los modelos, os voy a contar algo para que os salga gratis, ¿vale?
Porque sé que es una cosa que os puede preocupar, ¿vale?
Mira, entre los diferentes modelos...
A ver, hace un momento lo he visto y ahora...
Get started...
Vale.
Entre los diferentes modelos que tenéis por aquí, por ejemplo, hay algunos que tienen capa gratuita.
Si no me equivoco, Grog tiene capa gratuita.
Entonces, es uno que podríais mirar.
Entre los que hay, podríais mirar los que tienen alguna capa gratuita.
Si no es el caso, ¿vale?
Aún así, existe la posibilidad que utilicéis Oyama, ¿vale?
Os explico por aquí.
¿Ves?
Oyama.
Dice, hay algunos providers de la comunidad.
Aquí tenéis Oyama.
¿Qué es esto de Oyama?
Oyama es una herramienta que te permite ejecutar modelos en el cliente.
Bueno, en tu máquina, ¿vale?
Y es una aplicación que se puede ejecutar, ¿vale?
Ejecutar en tu máquina.
¿Ves?
Yo lo tengo aquí arriba.
¿Ves que aparece...
No sé si veis aquí el tercer icono, que aparece la llama, ¿vale?
Entonces, si vosotros me dais los pasos para decir, oye, tienes que utilizar Oyama con este modelo específico y tal,
me lo comentáis, lo descargamos entre todos los modelos que hay.
Aquí.
Pues ahora veréis que hay un montón de modelos.
Yo qué sé.
Me decís, oye, pues quiero utilizar Gema 2, que este es el de Google, o Oyama 3, o el que sea.
Aquí con Oyama podéis utilizar cualquiera.
Si me lo decís y me especificáis cuál es el modelo, no pasa nada.
Se utiliza, ¿vale?
Se va aquí a la terminal.
Vamos aquí a la terminal.
Ejecutamos Oyama, Run, Yama 3.
Descargamos el modelo y lo ejecutamos en local, ¿vale?
Entonces, ¿es lo ideal?
Pues no va a ser lo ideal.
Pero si al final queréis hacer algo así, pues lo podéis hacer.
También una alternativa que podéis hacer es ofrecer una versión que sea como que apunte a algún servidor
y que tenga la posibilidad de hacerlo en local.
Y que apunte al servidor y que solo active la del servidor solo y exclusivamente en el caso que sea un usuario en concreto, lo que sea.
Y eso también lo podéis comentar, no sé, lo que queráis.
Vamos a revisar todos los proyectos.
Por supuesto, vamos a revisar todos los proyectos.
Siempre hemos revisado todos los proyectos.
Lo que no vamos a hacer es ver en directo todos los proyectos, ¿vale?
Porque no me da tiempo.
No me da tiempo el día, el 13 de agosto, que si os presentáis 100 personas, hagamos menos de un minuto por proyecto.
No me va a dar la vida.
Entonces, vamos a seleccionar los mejores proyectos, ¿vale?
Eso no significa que solo seleccionemos 5.
Igual seleccionamos 20 y vemos 20, pero de esos 20, luego os decimos cuáles son los finalistas.
O sea, eso sería la selección de los que vamos a ver y luego os diríamos básicamente cuáles serían los finalistas que tenéis que votar.
Pero entendéis que no puedo, los 100 no los podemos ver.
Alguna vez lo hemos intentado y ha sido bastante costoso.
Tenéis otra cosa.
Si tenéis preguntas, si os queréis ayudar, si queréis saber toda la información, tenéis un canal en Discord que se llama Vercell Hackathon, ¿vale?
Que mirad, Feralp ya está dando toda la información aquí.
Aquí podéis dejar vuestras preguntas, ayudaros entre vosotros, compartir ideas o buscar equipo, ¿vale?
Así que ahí tenéis la oportunidad de entrar en el canal de Discord, que para eso tenemos la pedazo de comunidad que tenemos.
Y pues dejar dudas, preguntas, ideas, ayudar a gente.
Mirad, lo más importante yo creo de la Hackathon, yo sé que mucha gente dirá, ganar.
Está muy bien ganar porque son 500 dólares y además te viene el swag de Vercell y es impresionante.
Pero lo más importante yo creo de una Hackathon es hacer un proyecto con el que estés orgulloso, que realmente te valga la pena compartirlo, ponerlo en el portafolio, que no sé, aprender algo, practicar y sobre todo hacer comunidad.
Hacer comunidad, hacer contactos.
Si participáis y ayudáis a la gente, hacéis equipo y lo que sea, vais a conocer a personas que a lo mejor os puede desbloquear una oportunidad laboral en algún sitio, os puede presentar a una tercera persona que os va a acercar a vuestra primera oportunidad laboral.
Hoy alguien en Instagram me preguntaba y bueno, con razón me decía sin hate, pero yo ponía en las historias de Instagram, ponía esto, ponía participad porque creo que os puede ayudar.
Mira, ponía por aquí, ponía tenéis que participar aquí, participar en este tipo de eventos ayuda mucho a mejorar en programación y la empleabilidad.
Y es que mejorar en programación está clarísimo porque al final estás practicando, estás haciendo un proyecto que te va a sacar seguro de tu zona de confort, que vas a poder hacer equipo y que a lo mejor puedes aprender de tus compañeros y esto te va a hacer mejorar.
O sea, yo creo que mejorar en programación vas a mejorar seguro porque vas a tener que practicar y vas a probar algo diferente a lo que seguramente estabas haciendo o diciendo o practicando hasta el día de hoy.
Y mejorar la empleabilidad, si no me creéis a mí, os voy a decir algo.
Pero de las últimas hackatones que hemos hecho, los ganadores o gente o finalistas, muchos han conseguido trabajo a través de la hackatón y esto me lo han dicho ellos mismos.
Si hay alguno que ha participado y que le pasó eso, que lo comente.
¿Por qué? A mí porque me lo comentaron en LinkedIn, me lo comentaron en un montón de sitios, gente que presentó el repositorio que hizo en la hackatón, que enseñó el vídeo donde yo reaccionaba a su proyecto y eso le hizo conseguir ofertas de trabajo.
O sea, eso ha pasado aquí y ha pasado con las anteriores hackatones.
Puede ser que no te pase, pero hay gente que sí que le ha ocurrido.
Entonces, yo creo que va a mejorar tu empleabilidad, eso no te garantiza un empleo, pero como mínimo vas a mejorar en programación y eso me parece bastante interesante.
¿Cómo accedo a la hackatón? Aquí tienes toda la información, ¿vale? En este repositorio, en el Ritmi, tenéis toda la información y si no, en el canal de Discord también lo tenéis.
Que este canal de Discord lo pondremos en el Ritmi también para que no os lo perdáis, ¿vale?
Entonces, pero si no sé hacer esto, me lo recomiendas apuntarme. ¿No sabes hacer qué? ¿Programar o...?
Yo creo que, a ver, yo lo que os recomiendo es, si no sabéis, si no os veis capaces solos, buscad equipo.
Buscad equipo. En el Discord podéis decir, oye, se me da bien esto, esto y esto.
Me gustaría hacer equipo con alguien que esto.
O sea, aquí podéis decir, mira, busco equipo, Next.js y TypeScript. A ver, también os lo tenéis que trabajar un poco más, ¿eh?
Hola, mira, hola.
Me llamo Miguel Ángel Durán.
Tengo seis meses de experiencia, estudié NX y se me da bien Tailwind, CSS, React y algo de Next.js.
Me gustaría hacer equipo, ¿sabes? Y ya está, pam, pam, pam.
A ver, no hace falta que pongáis un megatocho, ¿eh?
Pero sí que es interesante un poco que os presentéis y ya está, y hacéis equipo de dos, tres personas.
También es muy bonito que en las anteriores jacatones también pasó esto, que hay gente que hizo equipo
y se han creado amistades, gente que no se conocía y luego se han conocido en persona.
Esto lo sé porque a Feralta me le pasó esto, de que hizo algún equipo,
que les quedó súper bien el proyecto, por cierto, y ya está.
Da igual que no sepáis, apuntaros y os aseguro que aprenderéis un montón.
Mira, caraje, que él ha participado, caraje, unas cuantas.
No tengáis miedo de no hacer algo espectacular.
Muy bien, caraje, bien dicho.
Sí, a ver, por eso os digo, no os rayéis de no voy a ganar,
porque al final no se trata solo de ganar, está bien que lo intentéis,
pero que también solo con participar yo creo que os va a ir súper bien.
¿Puedo formar parte de múltiples equipos?
Sí, no hay ningún problema en eso, pero eso ya dependerá de vosotros,
en el que cada uno tenga el tiempo necesario para hacer lo que tenga que hacer.
Entonces, vamos con esto, vamos con esto, porque ahora la pregunta del millón es,
vale, ¿por dónde empiezo? ¿Vale? ¿Por dónde empiezo?
Yo os voy a enseñar algunos ejemplos, ¿vale?
Porque al final, si no, pues hay gente que no sabrá por dónde empezar,
qué hacer o lo que sea.
Entonces, ¿por dónde podéis empezar?
Lo primero, la página web.
La página web de Vercel SDK es sdk.vercel.ai, ¿vale?
Y aquí entraréis aquí y diréis, ¿y esto qué es? ¿Esto qué es?
Pues esto es una cosa muy interesante.
Esto que estáis viendo aquí es en realidad como el playground.
Aquí vais a tener la oportunidad de probar diferentes modelos, además gratis,
no vais a tener que pagar absolutamente nada.
¿Ves? Aquí tenéis un montón de modelos de inteligencia artificial.
Tenéis, obviamente, los de GPT, pero también tenéis de Yama, Mistral,
y así podéis probar.
Por ejemplo, también os da aquí el pricing.
Imaginad que queréis comprobar, oye, cuánto cuesta OpenAI contra, por ejemplo, Yama, ¿vale?
Pues aquí podéis ver que el input por cada millón de tokens son 5 dólares,
cuando en Yama son 0.70.
Esto es importante porque el comparar los precios os puede ayudar también a decidir entre uno u otro, ¿vale?
Entonces, además podéis añadir aquí tantas pestañas como que queráis para comparar los modelos.
Y aquí ahora podríais comparar también Gemini o Gemini, ¿vale?
Aquí pone un millón de tokens.
Aquí no pone el pricing, es raro, pero le podéis dar a este botón de pricing
y os aparece aquí el pricing que tiene, ¿vale?
Aunque fijaos que Gemini tiene una capa gratuita, que también es interesante si queréis empezar por algo.
¿Ves? Precio sin costo.
Ahora, a partir de llegado a un límite, ya sé que te coste, ¿eh?
Entonces, ahí, perdón, que lo he cerrado.
Una vez que comparáis aquí los modelos, podéis decir, oye, ¿cuál es la capital de Francia?
¿Vale?
Si os fijáis, cuando escribáis aquí, se va a enviar a todos a la vez, en todos.
Y cuando lo enviéis, la respuesta, bueno, tenéis que iniciar sesión en Vercel para que no os paséis utilizándolo.
Pero fijaos que no cuesta dinero, ¿vale?
Os da la respuesta y no he tenido que pagar dinero ni hacer absolutamente nada.
Y aquí veis un poco la respuesta de cada uno, ¿vale?
El modelo de OpenAI ha contestado esto, este ha contestado esto.
Y esto os puede ayudar a decidir cuál es el modelo que mejor encaje con vuestro proyecto.
También, incluso, podéis subir imágenes en algunos casos.
Por ejemplo, este de Meta no se puede subir imagen.
Voy a quitar este, ¿vale?
Delete Chat.
Pero en el de Gemini, sí.
Fijaos que aquí hay un icono que pone Attach Image.
Y aquí también.
Entonces, podéis probar, por ejemplo, no sé qué...
Ah, mira, mira quién es este.
Pues, podéis probar...
Ah, mira, que no lo soporta.
La madre que lo trajo.
Voy a crear una imagen en JPEG.
Un momento.
A ver, Downloads.
Ah, mira, esta imagen.
Vale.
Ya he visto la imagen que me sirve.
Esta imagen.
Entonces, podéis subir una imagen y puedes decirle,
explícame, explícame la imagen que te estoy pasando.
¿Vale?
Entonces, le he pasado la imagen esta en la que salgo con el premio.
¿Vale?
Y aquí podemos ver cuánto tarda cada uno en contestar.
Fijaos que Google ha contestado mejor.
Más rápido.
La imagen muestra a un hombre joven de pie frente a un fondo morado con el logo de Open Awards.
Está sonriendo ampliamente y sostiene un trofeo de color verde azulado.
Pues, por ejemplo, una idea muy chula.
Podéis hacer un...
Utilizando un modelo que soporte imágenes,
podríais hacer un sistema que cree un alt para la imagen.
Y que eso pueda ser una API.
De hecho, eso existe.
Y fijaos que aquí podéis decir, oye, ¿cuál de los dos es el que mejor lo ha hecho?
Fijaos aquí que lleva un credencial con su nombre.
Miguel Ángel Durán García, la descripción, divulgador y creador de contenido.
O sea, impresionante lo bien que lo ha hecho, ¿eh?
O sea, impresionante lo bien que lo ha hecho.
Está muy, muy bien.
Podéis comparar diferentes, saber con cuál funcionaría mejor, que fuese más barato.
Y así podéis elegir ya el modelo.
Porque elegir el modelo es bastante importante, no solo por tema de precio,
sino de que realmente haga lo que esperáis, ¿vale?
Así que esto sería el primer paso.
El primer paso.
Fijaos que esta idea de utilizar un...
Hacer un generador de alts ya existe.
Aquí tenéis Alt Image Generator.
Que esto puede ser una idea, porque al final la presentación lo es todo.
Igual lo presentáis súper bien.
Y fijaos que aquí dice, vale, se utiliza esto, ¿vale?
Se supone que si aquí le pasamos una imagen, ¿vale?
Esta no, pero vamos a pasar perro.
Voy a buscar un perro.
Por ejemplo, este, ¿vale?
Y voy a pasar la dirección de la imagen, ¿vale?
En esta API.
¿Vale?
Vamos a ver si funciona.
Me debería dar el Alt.
A close up of a dog in the grass, ¿vale?
Un Alt, como tiene que ser más pequeño y tal, pues fijaos.
Me ha dado caption, una foto de un perro, pues tal.
Entonces, ¿qué puede ser interesante?
Una API que además sea customizable para que el Alt te lo dé en diferentes idiomas.
Que te lo dé en español, que te lo dé en inglés.
Que no solo te lo dé en inglés.
Además, pues que tenga pequeños parámetros que sean fácilmente configurables.
Son ideas, son ideas.
Y ya veis que existe y que además esto también es de código abierto.
O sea, que aquí ya tenéis una idea buenísima.
Podéis revisar el código aquí entre los ejemplos de Vercel.
Pero recordad, importante, que utilice la SDK AI de Vercel, ¿vale?
Pero aquí tenéis todo el código por si lo queréis revisar.
Vale, más cositas.
Venga, una vez que ya sabéis el modelo, que ya veis que tenéis un montón de modelos que elegir,
nos vamos a Docs y aquí tendrías la dependencia que hay que instalar.
Como no quiero haceros perder el tiempo de crear un proyecto desde cero, crear la UI y todo esto,
he creado un pequeño ejemplo que a ver si soy capaz de encontrarlo.
He creado un ejemplo aquí, ¿vale?
En ejemplos.
Pero vamos a terminarlo juntos, ¿vale?
Este, XXARReviewSummary, ¿vale?
Y os explico un poco esto porque esto es un proyecto que aunque está hecho con Next.js,
no hace falta que sepas Next.js, solo con que sepas un poco de JavaScript y TypeScript
y lo que te voy a explicar, ya lo vas a poder hacer sin ningún problema.
¿De qué trata este proyecto?
Vale, lo primero que vamos a hacer es instalarle las dependencias.
Y fijaos que entre las dependencias que está instalando, si vamos al package,
vemos que tenemos la de AI, seguramente uno de los mejores nombres.
Uno de los mejores nombres que tiene un paquete de instalación de MPM.
Es espectacular.
Pues AI.
Todo de que me preguntáis si se puede el Arable, si se puede cualquier otro lenguaje,
lo cierto es que si no podéis instalar este SDK en vuestro proyecto, no, no se puede.
O sea, tenéis que utilizar este proyecto sí o sí.
Ahora, que hacéis la API con Node, con Dino, con lo que sea,
utilizáis esto y en la otra parte de la UI lo hacéis con lo que queráis,
lo podéis hacer, no hay ningún problema.
Pero vuestro proyecto en algún sitio tiene que estar utilizando AI.
¿Vale?
Muy bien.
Entonces, ya se están instalando las dependencias.
Fijaos que tengo la de AI.
Para la UI hay cosas de Radix, pero esto no es muy importante.
Lo más importante es que tenemos AI, que es la dependencia que hay que instalar,
y luego tendríamos aquí también la de OpenAI, porque en este caso vamos a utilizar el modelo de OpenAI,
el de ChagPT.
Entonces, para instalar y empezar con cualquier proyecto tendrías que utilizar npm, install, AI,
porque este es el proyecto más importante.
Pero de nuevo, no empecéis de cero, que vais a perder mucho tiempo,
cuando aquí justamente en la documentación tenéis un montón de templates para empezar con vuestro framework favorito.
Next.js, Naxx, Svelkit y Solid.
O sea, empezad con uno de estos que ya viene todo preparado.
O este sea con React, con Vue, con Svelte o con Solid.
Con el que queráis.
Este proyecto vamos a levantarlo en PMDEV y esto me lo levanta en el 3000.
Ahora vamos a ver que está vacío, pero voy a explicar un poco qué es lo que se supone que hace este proyecto.
Este proyecto ahora lo veis vacío.
¿Qué es lo que hace este proyecto?
Este proyecto vamos a hacer una cosa.
Vamos a scrapear, vamos a hacer algo ilegal.
Vamos a hacer algo.
Y es que vamos a ir a...
Si le introduzco una IA a un proyecto que estoy haciendo actualmente, ¿sirve?
Estoy usando Next.js y lo voy a alojar en Vercel.
Sí que sirve, principiante en programar.
Podéis utilizar un proyecto que ya tengáis, pero que utilice, o sea, tiene que utilizar el SDKDII de Vercel.
Y pensad que también el código tiene que estar disponible.
Tenemos que poder ver el código.
¿Por qué?
Porque viendo el código podremos verificar si lo está utilizando, podremos revisar el código y todo esto.
Así que no hay ningún problema que sea un proyecto que ya habéis empezado y que se lo añadís.
No hay ningún problema.
Pero tened en cuenta que sí que tenéis que añadir lo de SDK.
Porque si no, no tendría sentido.
Entonces, vamos a scrapear Metacritic.
Vamos a hacer una cosa.
Y es que una cosa que me gustaría que tuviese Metacritic es que fijaos que los usuarios siempre aquí ponen un montón de reviews.
Pero a mí me da mucha pereza, mucha pereza, escribir todas las reseñas que hacen los usuarios.
Me gustaría tener un resumen.
Un resumen interesante porque además hay algunos que están en unos idiomas que no entiendo.
Hay otros que yo que sé, que se ponen en ruso, que yo no lo voy a traducir.
Me gustaría tener un resumen.
Y de hecho, me parece una idea muy interesante que la gente de Metacritic, a lo mejor aquí arriba, ponga resumen de todas las reseñas de tal.
En una puntuación de tal, los usuarios consideran esto.
Que destaca esto, destaca lo otro, no sé qué, no sé cuánto.
Entonces, ¿qué vamos a hacer?
Pues yo aquí, no voy a hacer el proyecto entero, pero he puesto tres juegos.
The Last of Us, The Callisto Protocol, The Lord of the Rings, Gollum.
Son tres juegos en los que me gustaría recuperar todas las reseñas de Metacritic y tener un resumen.
Vamos a hacer esto un poco paso a paso.
Y me parece una idea que podéis llevar a un montón de sitios.
Lo primero que voy a hacer es robarle el contenido a Metacritic.
Entonces, no se lo chivéis, pero lo que vamos a hacer aquí es, como es una SPA, fijaos que aquí en Latest User Reviews,
si le doy a View All, vale, si ha ido todo bien, vamos a ver que por aquí, Web Filter, esto tiene buena pinta.
Vale, creo que ha hecho una llamada a una API, con una API Key y todo.
Y aquí tenemos todo el JSON, vale, todo esto es ético y legal, no hay ningún problema.
Me voy a asegurar que está la información que necesito.
Best Game I Have Played, vale, Best Game I Have Played.
Vale, pues ya vemos que tenemos aquí todas las reseñas, donde además de toda la reseña tengo la puntuación, lo tengo todo.
Y además de esto, vamos a necesitar, vale, mira, fíjate, en la misma API tenemos también la puntuación que tiene ese proyecto.
Pues nada, genial, con esta API interna, que ya no es tan interna, guiño lengua, ya no es tan interna,
vamos a sacarle toda la información y lo vamos a utilizar.
Para eso, en nuestro proyecto, es un proyecto de Next.js.
Si no sabes React, igual te suena un poco a chino, pero ya te digo que le voy a dar un repaso,
pero no vamos a tocar nada de React, vale, o sea, ya está hecho y no le vamos a dar mucha idea.
Pero sí le voy a dar un pequeño repaso para que lo veamos.
Por ejemplo, en componentes, tenemos aquí todos los componentes que usamos, es muy sencilla la app.
Los más importantes serían estos dos.
Uno, el de Review, que estos serían los que enseñan la reseña.
Y aquí tenemos un componente que se llama AI Review Summary, que este es el que va a llamar a un servicio,
que se llama Summarize Reviews, al que le vamos a pasar la idea del juego.
Y este es el que va a hacer la magia de llamar al SDK de Vercell y nos va a devolver la información.
¿Vale?
Perfecto.
Muy bien.
Aquí, obviamente, ahora se queja de algunas cosas porque no existe.
O sea, esto no está devolviendo nada y por eso se queja.
¿Qué es lo que vamos a tener que hacer?
Pues vamos a tener que implementar dos funciones para poder recuperarlo todo.
Este de Summarize Reviews y también el de GetGame.
Que GetGame lo utilizamos aquí a nivel de página.
¿Vale?
Aquí nada más entrar tenemos el GetName.
Le estamos diciendo que por defecto recupere el de la información del de Last of Us.
Y esto es lo que le pasamos a Reviews.
Y este GetGame ahora mismo está vacío.
Este es el primer método que vamos a tener que implementar.
Pues vamos a implementarlo.
Como ya tengo la URL de Metacritic, vamos a hacer Metacritic URL, ¿vale?
Que es esta.
Ahora, fijaos que es muy fácil para recuperar el juego.
Lo tenemos aquí.
Lo vamos a cambiar por el juego que le pasamos por los parámetros.
Ya tenemos esto.
Y ahora, recuperamos la respuesta.
Hacemos un fetch de los datos.
Transformamos en un JSON.
Vamos a poner aquí un console.log del data.
Vamos a ver si ya tenemos ahí los datos.
Y fijaos que ya tenemos aquí todos los datos.
Ahora, de los datos, ¿qué tenemos que sacar?
Vamos a tener que sacar por un lado esto, la puntuación.
Y por otro lado, vamos a sacar las reseñas.
Es súper rara la API de Metacritic.
Porque obviamente no está pensada, no está pensada para ser utilizada fuera de esto, ¿no?
Ahí lo pone, internal.
Vale, pues fijaos cómo funciona esto.
Que tiene un campo que se llama Components.
Y dentro tiene un array donde cada array tiene información diferente.
Por ejemplo, la primera parte tiene como la información del juego.
La segunda parte tiene como metadatos, como, por ejemplo, como contadores de reviews, de reseñas positivas y tal.
Y el tercero es el que tiene las reseñas.
Así que vamos a hacer algo.
Vamos a decir, podríamos hacer data 0, sería esto, el info, el row info, ¿no?
La info del juego en este caso, en el 0.
Y el 2, hemos visto reviews, row, reviews, ¿vale?
Que sería data 2.
Podríamos hacerlo así o lo podríamos hacer así, que a mí personalmente me gusta un poco más.
Esto no lo pillamos y esto así.
Y así lo hacemos en una sola línea, ¿vale?
Esto es una desestructuración por posición de un array.
En la primera posición tenemos la información del juego.
Y en la tercera posición, que sería en el índice 2, tendríamos la de las reviews, ¿vale?
Row, reviews.
Es lo mismo, ¿eh?
Lo de arriba, lo de abajo, utiliza el que te dé la gana.
Pero bueno, lo voy a dejar comentado para que nadie se me pierda, ¿vale?
Pero bueno, lo dejo así porque así como me gusta un poco más.
Y ya tendríamos separado la parte del row info.
De hecho, si hago un console.log, row info, fijaos que si guardo los cambios y no...
Ah, data is not...
Ah, porque no es de data, perdón.
Hay que sacar components de data, ¿vale?
Es components, ¿no?
Claro, fijaos que es un objeto que tiene components.
Es que es complicada la... ¿vale?
Entonces tenemos components.
Y ahora sí, ¿ves?
Ahora data.
Vale.
Aquí dentro de data tenemos el item.
Y dentro del item tendríamos el título.
Que esto es interesante.
Tendríamos una descripción que no vamos a utilizar.
Y tenemos el Critics Score Summary.
Esto sí que es importante.
Así que vamos a sacar...
A ver, que vea bien.
Data item, ¿vale?
Tendríamos que sacar data item Critics Summary, ¿vale?
Esto es otra desestructuración donde estamos sacando...
De row info sacamos el data.
De data sacamos el item.
Y del item sacamos el Critics Score Summary.
Y el otro campo que tenemos que sacar es este title.
Así que lo vamos a poner aquí.
Y ya tendríamos también el title.
Vamos a ver si tiene imágenes.
Que creo que también tiene por aquí.
¿Vale?
Production Images.
Vamos a sacar también las imágenes.
Y así tendremos una imagen.
¿Vale?
Esto sería la parte de la información de la página web.
O sea, del videojuego en este caso.
Vamos a sacar la puntuación del Critics Score Summary.
Y ahora vamos a sacar la información de la imagen.
Console.log.
Crit.
Images.
Vamos a ver las imágenes.
¿Vale?
Ves que es un array de imágenes.
Y aquí tenemos el nombre del usuario.
Vale.
Bucket type y bucket path.
Si miramos la imagen, cómo se trata aquí.
Vamos a ver esta imagen pequeñita.
Vamos a ver.
Esto es Scraping total.
Vale.
Veo que tiene aquí un Resize.
No sé qué.
Vamos a quitar este Resize.
Vale.
Ya tengo la imagen más grande.
Vamos a quitar esto también.
¿Vale?
Tenemos la misma imagen.
Fijaos que te pone aquí el Catalog Provider no sé qué, no sé cuánto.
¿Vale?
Así que para crear la imagen tenemos que sacar el bucket type y el bucket path.
Vamos a pillar Metacritic.
Esta parte de aquí.
Vamos a poner Image.
¿Vale?
Todo esto.
Y sacamos de la primera imagen, Image 0.
Vamos a sacar el bucket path y el bucket type.
Estas son las dos cosas que deberíamos sacar de la imagen.
Y esto tendríamos aquí el bucket type y el bucket path.
¿Vale?
Y esta debería ser la imagen.
Vamos a ver si tenemos una imagen aquí en el Console Log.
¿Vale?
Aquí tenemos una imagen.
Y si la miramos...
Robando imágenes desde...
Bueno.
Está bien.
Está bien.
Ya tenemos así la imagen.
Es la imagen que tenemos interesante.
Ya está bien.
Muy bien.
Pues ya tenemos una imagen.
Solo nos faltarían las reviews.
Para sacar las reviews, las reviews tendríamos que sacar...
Vale.
Tendríamos que sacar de Data Items, ¿no?
Tendríamos aquí el Items.
Aquí lo tenemos en este punto.
¿Ves?
Data Items.
Y aquí tenemos un array con todas las reviews.
Así que Data Items, lo sacamos de Raw Reviews y ya podemos devolver toda la información.
Tenemos la ID del juego, el título.
Que en esto he puesto título y no sé si...
Sí que es Title.
Vale.
Pues el Title, el Title.
Tendríamos también la imagen, la puntuación y las reviews que sean los items.
Vale.
Con esto ya al menos deberíamos ver algo en nuestra aplicación.
Vale.
¿Qué ha pasado con esto?
Que ya estamos recuperando la información.
Vale.
Veo que aquí el título no aparece.
O sea que eso debe ser un error.
Vamos a ver ahora.
Pero ya tenemos la puntuación, tenemos la imagen y tenemos todas las reseñas.
Ya hemos recuperado, ya hemos escrapeado toda esta información para nuestra página web.
Entonces, al menos ya tenemos esta información.
Se supone que si cambiamos y vamos a otra página de Callisto Protocol, pues aquí este tiene un 69.
Y aquí, The Lord of the Rings, vemos que tiene un 33.
O sea que cada uno tiene diferentes valoraciones.
¿Vale?
Vale.
Entonces, ahora, ¿esto es legal?
Bueno, esto está bordeando la legalidad.
Pero bueno, no está mal.
No está mal.
Vamos a ver porque hay un error que el Title no me lo está recuperando.
Este Title, este Title, a ver, pone Data Item Title.
Puede ser que le haya puesto Name al título.
Soy capaz.
Soy capaz.
Vale, ya está.
¿Vale?
Ahí lo tenéis.
Vale.
Entonces, lo que nos faltaría ahora es utilizar la inteligencia artificial.
Esto está muy bien.
Hemos hecho un scrapping.
Interesante.
Pero lo que nos falta aquí ahora es recuperar un resumen de todas las valoraciones del juego y que nos aparezca aquí.
¿Cómo lo vamos a hacer?
Pues ya hemos hecho todo el tema del scrapping.
Me voy a traer esta URL porque me parece interesante ya que la hemos utilizado una vez.
¿Vale?
Esta URL.
Bueno, todo esto que es lo que estaba recuperando de la app y la información.
Y vamos a ir a otro archivo que es el AI Review Summary.
¿Vale?
No, perdón.
Este no.
AI Summary.
Este de aquí.
Que tenemos aquí.
Y aquí podéis ver que hay diferentes cositas.
Y está el método Summarize Reviews.
Que este es el método.
¿Vale?
Voy a copiar esto mientras.
Este es el método que os he dicho antes.
Aquí.
Aquí.
Que estaba por hacer.
¿No?
Este Summary nos lo devuelve este método Summarize Reviews.
Y está sin hacer.
Porque fíjate que dice ID is not defined.
No sé qué.
Vale.
Pues esto nos quedaba por hacer.
Así que tenemos que implementar este Summarize Reviews.
Al que le vamos a pasar la ID del juego.
Esto va a llamar a esta API.
Y esta API de nuevo vamos a tener que recuperar toda la información que hemos recuperado aquí.
Esto lo podríamos mejorar.
Por ahora como no es muy importante.
Voy a ir bastante a copiar y pegar.
Pero bueno.
Que no hace falta que lo copiéis.
¿Vale?
O sea.
Lo podéis hacer en un método en condiciones.
Yo lo voy a copiar para no repetirme.
¿Vale?
Pero entonces.
Voy a copiarme esta parte.
¿Vale?
Todo esto.
Para tener la información de las reviews y del título.
No vamos a necesitar todo.
Por ejemplo.
La imagen.
Todo lo que es de la imagen.
Esto lo podemos quitar.
No hace falta.
Pero sí que vamos a necesitar la reseña.
Y vamos a necesitar la puntuación para decírselo a nuestra inteligencia artificial.
¿Vale?
Entonces.
¿Qué inteligencia artificial vamos a utilizar?
En este caso.
Vamos a utilizar Perplexity.
Perplexity.
Aunque vamos a utilizar la API de OpenAI.
Vamos a utilizar Perplexity.
¿Por qué vamos a utilizar Perplexity?
Porque la verdad es que Perplexity tiene la API que es compatible con la de OpenAI.
Esto lo hacen un montón de empresas y tiene bastante sentido.
Porque así se evitan tener que crear su propia API.
Y si quieres cambiar entre OpenAI o quieres utilizar Perplexity u otro.
Lo haces muy fácilmente.
Así que por eso vais a ver que utiliza OpenAI.
Pero que en realidad la API que estamos viendo por aquí es la de Perplexity y la URL es la de Perplexity.
Perplexity.
¿Para qué Perplexity?
Es también un modelo de inteligencia artificial que se está haciendo muy famoso por su buscador.
Lo cual está súper bien.
Aquí podéis buscar, por ejemplo, yo que sé.
¿Cómo quedó España en el último partido?
Es como una alternativa al buscador de Google.
¿Vale?
España ganó su último partido jugando contra Alemania en los cuartos de final.
Es un buscador muy interesante que es totalmente gratuito.
Aunque tiene una versión Pro.
Lo podéis ver aquí.
¿Veis que pone aquí?
Puedes mejorarlo con Image Upload y tal.
Y aquí sí que tenéis que pagar.
Pero el buscador es gratuito.
Es bastante potente.
Y además de esto, además, también tiene sus propios modelos.
Entonces podéis ir a api.perplexity.ei, creo.
O .com.
A ver.
No.
Vale.
Api.perplexity.
Docs.perplexity.
Ah, pues debe ser aquí.
Singing to access.
Vale.
Pues le voy a dar aquí.
Voy a ver que no salga mi key.
¿Vale?
Que es capaz de que salga mi key.
¿Vale?
Puede ser que salga mi key.
Tu, tu, tu, tu, tu.
Voy a asegurarme que no sale.
Vale.
Está cargando.
Están los settings.
Vale.
Efectivamente sale mi API key.
La voy a borrar.
Para que no la veáis.
Y ya está.
Mirad.
Yo tengo 6 dólares que he puesto.
Lo interesante de perplexity es que es bastante barato.
Yo, por ejemplo, le he dado bastante caña y ya veis que 3 céntimos que solo que he gastado.
Es baratillo.
O sea, que no está nada mal.
Y que no vais a gastar mucho dinero.
Aquí podéis ver los supported models.
¿La IA de Bercel tiene API keys gratuitos o solo perplexity?
Solo perplexity.
A ver.
Perplexity, aunque Perplexity en realidad por debajo lo que utiliza, lo veis aquí.
Llama 3.
Utiliza modelos de Llama 3.
Por lo tanto, si queréis utilizar algo parecido a los modelos de perplexity en el SDK de Bercel, serían los de Llama 3.
Lo que pasa es que Perplexity tiene unos modelos que no son de código abierto, que los tenéis aquí, que están como mejor optimizados para ellos.
Pero los podéis utilizar sin problemas.
Los que tendréis en el SDK de Bercel totalmente para utilizarlos serían los de Llama, estos o los de Mixtral.
Y ellos han entrenado unos suyos que como veis pone Perplexity Models, pero no están abiertos, no los podéis utilizar como si nada.
Pero una vez que queráis, pues decir, bueno, en este caso no son gratuitos, o sea que tendrías que poner una cuenta corriente.
Lo bueno es que podéis poner el Automatic Top Up para poner cuánto dinero queréis poner y lo podéis desactivar en cualquier momento.
O sea, podríais poner Automatic Top Up.
Esto lo que hace es poner dinero automáticamente, pero lo podéis desactivar cuando queráis.
Entonces, por lo que sea, o podéis comprar créditos de una vez y ya está, quitar la tarjeta de crédito.
Y así pues os aseguráis de que no os cobren en el caso de que se os pase, ¿vale?
Que es importante.
Vamos a generar un API Key.
Para generar un API Key, una vez que ponéis algo de dinero, le tenéis que dar este botón de Generate y ya lo tendréis, ¿vale?
Entonces, le vamos a dar por aquí, Generate, e inmediatamente ya me ha generado un API Key que la voy a copiar.
Me voy a ir a las variables de entorno, ¿vale?
Y la voy a poner por aquí, tú, tú, tú, tú, tú.
Y ya está.
Nos voy a enseñar la variable de entorno.
Voy a cerrar también la página de Perplexity y así ya podemos volver por aquí.
Vale.
La variable de entorno la he puesto aquí.
En el archivo .env he puesto Perplexity API Key con el valor que tenía en la documentación con mi API Key.
Y ahora esto me va a permitir utilizar la API de Perplexity.
Pero lo más interesante es que para utilizar la API de Perplexity vais a ver que no tenéis que hacer nada raro.
Lo primero más importante, crear un prompt.
Aquí el prompt, como vosotros creáis, yo voy a poner, escribe un resumen de las valoraciones de los usuarios del juego, del title, en español.
Y le vamos a poner que del videojuego, le voy a poner un poquito más del videojuego, title, en español.
La puntuación es tu, tu, tu, score de 100, ¿vale?
Le vamos a dar un poco de contexto para que sepa, ¿no?
Le voy a decir que recibirás reseña, una lista de valoraciones de usuarios, de valoraciones de usuarios en diferentes idiomas.
Pero tu resumen debe estar en español, ¿vale?
Importante que le deis bastante...
Tu objetivo es resaltar los temas más comunes y las emociones expresadas por los usuarios.
Y yo que sé, si hay varios temas, pues intenta capturar los más importantes.
Y aquí podríamos estar todo el día, ¿vale?
Poniéndole el prompt.
Pero lo más importante aquí, aparte de esto, es...
Voy a ponerle, intenta usar como máximo, no sé, 200...
No, 200 palabras son muchas.
50 palabras.
50 palabras y 4... 5 párrafos.
Y seguiríamos, no hagas referencias a puntuaciones concretas, ni a la fecha de valoración y tal.
Entonces, las valoraciones...
Estas son las valoraciones de los usuarios.
Las valoraciones de usuarios, justamente las hemos recuperado aquí en Items, ¿vale?
Así que le vamos a pasar todas las...
O sea, Items, ¿vale?
De cada Item, tendríamos aquí...
Esto sería una Review, ¿vale?
Y le pasamos aquí Item.quote.
Item.quote es porque en la API, que lo podemos ver aquí, vais a ver que cada...
A ver si encuentro...
Esto lo quitamos.
Aquí.
Podéis ver que el mensaje está en .quote, ¿vale?
Así que por eso le pasamos el .quote y aquí tenemos el momento, no sé qué, no sé cuánto...
Va.
Vale.
Entonces, le pasamos todos los quotes.
Estas son las valoraciones de usuarios.
Y le vamos a decir...
Usa este tono según la puntuación del videojuego.
Vale.
Voy a poner esto por aquí delante.
Vamos a poner aquí...
De 0 a 40...
Negativo.
De 41 a 60...
Neutral.
Neutral.
Y de 61 a 100...
Positivo.
Muy positivo.
¿Vale?
Así para que utilice un tono un poco más personal.
Vale.
Ya tendríamos el prompt, que es como lo más importante.
Luego veremos si tenemos que ajustarlo.
Ahora vamos a crear el objeto que le vamos a pasar a la API de Vercel SDK para que llame al modelo.
Le vamos a decir cuál es el modelo que vamos a utilizar.
Entre los modelos...
¿Veis aquí que hay diferentes modelos?
Podríamos utilizar el de chat.
Así que vamos a utilizar este.
Llama 3 sonar small 32k.
Este es de...
Es más pequeño el número de parámetros con el que se ha entrenado.
Si queréis podéis utilizar este.
Pero este seguramente va a ser un poquito más lento o más caro.
Así que vamos a intentar utilizar primero los más pequeños.
Porque normalmente responden más rápido.
¿Vale?
Vamos a decir que haga un streaming de datos.
Esto lo que quiere decir es que en lugar de esperar a tener toda la respuesta y devolverla de golpe, la va a ir devolviendo poco a poco.
¿Vale?
Los mensajes.
Vamos a construir el prompt.
Lo vamos a hacer con este método que tenemos por aquí.
¿Veis que hay un build prompt?
Que le pasamos el prompt.
El que hemos creado.
Y ya nos dice que el rol del usuario le pasa todo el prompt.
Esto hay diferentes formas de hacerlo.
Lo hemos visto en diferentes ejemplos.
Le podéis poner configurar el sistema, configurar también lo que se le dice al asistente.
Podéis guardar todos los mensajes.
Luego vamos a ver un ejemplo muy rápido y muy interesante de cómo hacerlo.
¿Vale?
Luego aquí podéis max tokens para, no sé, tener unos tokens máximos y no enviarle infinito.
Esto es importante de controlar para el tema del coste.
Temperatura.
No es obligatorio.
Esto sería como queremos que sea de random.
¿Vale?
Y frequency penalty.
Vamos a ponerle un 1 para que intente ser, no se repita nada.
¿Vale?
Vamos a decir que esto es una constante.
Ya está.
Ya tenemos que crear nuestra respuesta.
Llamamos a perplexity punto, esto no está bien, punto chat punto completions punto create.
Y le pasamos la query.
¿Vale?
Aquí teníamos la respuesta.
Fijaos que Vercel SDK podéis utilizarlo para crear la primera llamada o incluso solo para hacer el streaming de datos.
Por ejemplo, aquí podemos transformar esta respuesta con OpenAI Stream.
¿Vale?
Que esto es parte de AI, este OpenAI Stream.
Que creo que no lo estamos importando todavía.
No lo estamos importando todavía.
¿Vale?
Pues lo importamos ahora.
No pasa nada.
El OpenAI Stream.
Esto es una herramienta que nos da AI.
Vamos a tener OpenAI Stream.
Esto lo que hace es transformar la respuesta que nos da OpenAI o las APIs de estilo OpenAI.
¿Vale?
En un stream de datos que vamos a poder consumir.
Y también vamos a necesitar el streaming text response.
¿Vale?
Para poder ir enviando la respuesta.
Y esto es lo que sería Vercel AI SDK.
¿Vale?
Así que ahí tenéis el ejemplo de cómo usarlo.
Y esto lo podríais estar utilizando en cualquier API.
En un backend.
O sea, no es obligatorio que sea una UI.
De hecho, esto no deja de ser la parte del backend.
Para que lo tengáis en cuenta.
¿Vale?
Game AI.
OpenAI.
¿Vale?
Luego podemos ver el tema de la cachea.
Aunque no es muy importante.
Aquí tendríamos la respuesta.
¿Vale?
Dice que el response no se puede volver a declarar.
¿Vale?
Vamos a quitar este.
Vamos a poner este que sea res.
Para no repetirlo dos veces.
Y aquí tenemos la response.
¿Vale?
Creamos el stream de datos.
El stream de datos.
Pensad que es como una tubería.
Normalmente, como funcionan las respuestas de los datos.
Es que esperamos que se resuelva todo.
Y es como que enviamos una carta.
¿Vale?
Cuando tengo todos los datos, envío una carta con todos los datos.
En cambio, un stream sería más como una tubería de agua.
En la que constantemente están fluyendo los datos.
Y es mucho más interesante.
Porque conforme Perplexity nos va dando la respuesta.
Se la vamos a estar enseñando al usuario.
¿Vale?
Así que vamos a crear el streaming response.
New streaming response.
Con el stream que hemos creado aquí.
Y ya está.
Ya podemos hacer let await.
No.
Last of Us parte 2 remaster.
La mayoría de los usuarios elogian la historia, los gráficos y el juego en general.
Aunque hay algunos que critican la duración del juego y la falta de innovación en el gameplay.
Algunos usuarios destacan la emoción y el impacto emocional que produce el juego.
Mientras que otros lo consideran demasiado lento y aburrido.
Algunos usuarios también critican la trama y la falta de sentido en ciertos momentos.
Mientras que otros lo consideran profundo y emocionante.
Hay algunos que dicen que el juego es demasiado violento y gráfico.
En general la puntuación promedio de los usuarios es de 90 de 100.
Lo que indica que la mayoría de los jugadores están satisfechos.
Vale.
Vamos a decirle que no nos diga.
No vuelvas a repetir la puntuación.
Vamos a poner que sea un poco más corta.
Vamos a poner menos palabras.
¿Vale?
Y vamos a ver si esto cambia un poquito.
Menos palabras.
Y me la ha hecho más larga.
Me la ha hecho más larga.
O sea, me ha hecho un poquito más larga.
En resumen, juego, no sé qué.
Vale.
Vamos a decirle usa.
Divídela en cuatro párrafos cortos.
Máximo 30 palabras en total.
Vale.
Venga, vamos a ver si...
Al menos tiene como bastante sentido lo que dicen.
La mayoría de los usuarios aprecian.
Personajes LGBT.
La presentación de la diversidad.
Vale.
Vamos a ver de Calisto Protocol.
A ver si cambia las referencias.
A ver si realmente el resumen lo está haciendo bien.
El juego es descrito como divertido, con historia decente.
Mientras que lo describen como repetitivo y sin innovación.
Muchos usuarios critican la falta de diversidad de los enemigos.
Un buen intento de Krafton en su primer juego de terror.
¿Vale?
Un juego de mala calidad con bugs y enemigos injustos.
Encaja bastante.
Vamos a ver el juego de Gollum.
A ver si realmente está encajando.
Ha recibido valoración mixta de usuarios.
Algunos lo consumen un juego de 6 con bugs, errores.
Lo describen como un desastre, con gráficos malos, historia aburrida y mecánicas de juego malas.
Algunos usuarios se quejan de que el juego no respeta la historia original y es una explotación de la IP.
Sin embargo, otros lo consideran un juego de 2023 con gráficos fenomenales.
Bueno, bueno.
Lo consideran un juego para fanáticos de la serie.
O sea, que tiene bastante sentido y estamos viendo que realmente tiene sentido con el contexto.
¿Qué es lo que podríamos hacer?
Lo que podríamos empezar a hacer es intentar probar otros modelos.
También es verdad que hemos utilizado el modelo, el malo.
¿Vale?
Docs.perplexityModels.
¿Vale?
Hemos usado el malo.
Que claro, el malo seguramente sea peor.
Pero vamos a ver que si utilizamos el bueno, puede ser que sea un poco más lento.
Pero seguramente la respuesta será mucho más acertada.
Si vamos a Last of Us, seguramente me va a hacer más caso.
Pero veis que ahora está tardando más en responder.
Entonces, muchos usuarios de Logia.
La verdad es que se ve como mejor el contenido.
Es una obra maestra.
Gráfico impresionante.
Críticas.
Si me hubieran algunos usuarios expresado su descontento con la historia considerándola deprimente y sin sentido.
Critican la forma en la que se manejan los personajes.
Especialmente la muerte de cierto personaje que no voy a leer.
Vale.
Bueno, pues entonces.
Está bastante chulo.
Y ya veis que ahí se nota la mejora.
Lo malo, pues claro.
No se le hace justicia al personaje de Gollum.
Sí que se nota que es mejor, pero sí que también se nota que es bastante más lento.
Esto es un ejemplo.
¿Vale?
¿Por qué no se ve cómo va escribiendo en tiempo real?
¿Vale?
¿Por qué no se ve cómo va escribiendo en tiempo real?
Es porque el cómo hemos hecho esto es que sea un React Server Component.
¿Vale?
Los React Server Components se van a renderizar en el servidor.
Y no vais a ver ese estilo de que se vaya escribiendo en tiempo real.
Para hacer eso, tendrías que hacerlo en la parte del cliente.
Que lo podríais hacer así y ya está.
No habría ningún tipo de problema.
En este caso lo he hecho como un React Server Component para que lo tengamos y ya está.
Este ejemplo os lo voy a subir.
De hecho, lo voy a subir ya.
Para que lo tengáis.
Que no se diga.
A ver.
No sé si esto...
Ah, no.
No me pone aquí.
Porque sí que me pone esto de git.
Vale.
Pero luego lo subiré en el repositorio.
Lo vais a tener.
Os voy a hacer otro ejemplo rápido.
¿Vale?
Para que os dé tiempo a ver España.
¿Vale?
¿Cómo gana Alemania?
O no.
A lo mejor no gana.
Pero deseadme suerte.
Que no haya Mufa.
Vamos a hacer un pequeño proyecto para que veáis un ejemplo de utilizar lo mínimo posible.
Ay, a Francia.
Es verdad.
Joder.
Es que sabéis qué pasa.
Que primero ganamos Alemania y segundo Francia.
Ya está.
Anulamos Mufa.
A Francia.
Verdad.
A Francia.
A Francia.
Perdón.
A Francia.
Vale.
Pues tengo por aquí ejemplos XXChatNode.
¿Vale?
Vale.
Os voy a enseñar un ejemplo muy sencillo pero muy potente para que veáis cómo podéis utilizar con lo mínimo posible todo el tema de Vercell AI SDK.
¿Vale?
Para eso vamos a instalar ya unas dependencias que obviamente va a ser Vercell SDK.
Así que pnpm add AI o pnpm install que así también en npm lo podéis hacer.
AI.
Y vamos a utilizar el de AI SDK OpenAI.
¿Vale?
Y dotenv para variables de entorno.
Esto sería todo el tema de inteligencia artificial.
La variable de entorno.
¿Vale?
No sé si tengo aquí el package JSON.
Creo que sí.
¿Vale?
Y vamos a instalarle también porque vamos a utilizar muy poquito TypeScript, pero bueno, un poquito de TypeScript.
TSX y TypeScript.
¿Vale?
Y ya tendríamos esto.
Y aquí en el package JSON aquí tenemos AI.
Y esto de AI SDK es porque Vercell SDK AI, cuando veáis la documentación, veréis que tienen algunas dependencias como satélite que te va a ayudar a utilizar OpenAI o otros modelos.
En este caso, como quiero utilizar OpenAI y que os sirva este ejemplo con lo mínimo posible de OpenAI, pues bueno, quiero utilizar este.
¿Vale?
Y vamos aquí al index.
Ah, mira.
Si ya el index este justamente es el que he hecho.
Ya lo he hecho.
¿Queréis que os explique el código o que lo haga desde cero?
Explica.
Vale.
Pues nada.
Explico, amigos.
Y ya está.
Y así también este código os lo pasaré.
Y ya está.
No pasa nada porque además os había dejado, os lo iba a subir.
Y la idea es que tuviese código, que tuviese cada cosa comentario justamente.
Os voy a enseñar primero de qué trata.
¿Vale?
Hacemos un pnpm tsx index.ts.
Esto es para ejecutar con TypeScript.
¿Vale?
Vale.
Fíjate que pone tú.
Hola.
Vale.
Incorrect API Key Provided.
Vale.
Empezamos mal.
Un momento.
Que me está pillando la API Key que no es.
Me está pillando la API Key que no es.
Y lo arreglamos ahora un momento.
tsx index.
Vale.
Vale.
Ahora ya os enseño el código.
Vamos aquí.
cd xx chat note.
¿Vale?
Y vamos a npm x tsx index.
¿Vale?
Hola.
Ahora sí.
¿Vale?
Vale.
Este ejemplo es un chat GPT.
Un chat GPT de terminal con menos de 40 líneas de código.
Y lo estamos haciendo con Vercell SDK para que veáis que no necesitáis ni siquiera una UI.
Entonces, vamos a ver esto.
¿Vale?
Para que lo veáis.
¿Cómo funciona?
Vale.
Yo ejecuto aquí mi código.
Que ahora os enseñaré.
Hola.
¿Ves?
Y encima con streaming.
Hola.
En que pueda ayudarte.
¿Cuál es la capital de Francia?
La capital de Francia.
¿Cuántos goles le metió Argentina a Francia en el mundial?
La final Argentina le metió tres goles.
¿Vale?
¿Algún otro tema?
¿Entonces diríamos que Argentina le dio una paliza a Francia?
¿El término paliza generalmente se usa para describir?
Bueno.
Dice que fue un encuentro muy disputado.
No me mientas.
Lo vi.
Tuvieron mucha suerte los franceses.
Estábamos.
Estábamos dando una paliza que lo vi yo.
¿Vale?
Entiendo que como fanático de Argentina el partido pudo haberse sentido como un dominio claro.
Me entró un desempeño impresionante.
Si tienes...
Bueno.
Sin duda fue un partido emocionante.
Sí, sí.
Ahora arreglalo.
Arreglalo.
Se nota un poco, Chagepete, que eres franchute.
¿Verdad?
O sea.
Solo soy un programa de inteligencia.
Ya.
Pero se te está poniendo cara de croissant.
En fin.
Eso fue ingenioso.
Siempre estoy aquí para responder tus preguntas.
Bueno.
Como veis.
Estamos utilizando Chagepete.
¿Vale?
En la terminal y tal.
Entonces.
Entonces.
¿Cómo funciona esto?
Venga.
Vamos a ver.
Código.
Paso a paso.
Primero.
Lo más importante.
Para poder...
Para poder...
Como...
Racistada.
A ver que Francia.
Francia no es una raza.
Joder.
Los franceses no son...
No son una raza.
Es de racistada.
La madre que os parió.
Ay, Dios mío.
Hay que...
Hay una...
La verdad es que...
Franchute no lo veo.
No lo veo como...
Yo tengo un colega que es francés.
Y le decimos Franchute.
Pero bueno.
Tiene diferentes connotaciones el tema de Franchute.
Con mi amigo.
Porque es muy malo jugando a fútbol.
Y tiene doble sentido.
La terminología de Franchute con él tiene doble sentido.
Porque el pobre parece que tiene dos pies izquierdos.
Y no los de Messi, precisamente.
Pero bueno.
El tema.
Claro.
Yo creo que Gabacho es en el ofensivo, ¿no?
Pero bueno.
Franchute yo no lo veo...
O yo al menos se lo digo y no lo digo como ofensivo.
Es como Españoleto.
Españoleto.
Españoleto me lo dicen a mí en Venezuela.
El Españoleto.
¿Es ofensivo?
¿Me debería enfadar o no?
En serio os lo digo, ¿eh?
Porque yo me imagino que depende muchas veces del contexto, ¿no?
Españoleto.
Españoleto.
La verdad es que me gusta.
Pues suena como bien.
Pero me imagino que de todo, como todo, depende del contexto.
No es lo mismo que lo digas cariñosamente, ¿no?
Que lo digas de malas.
En fin.
Pues...
Españoleto es un cumplido.
Ah, vale, vale.
Pues nada, perfecto.
Bueno.
Pues os explico.
La primera línea es para recuperar una dependencia de Node.js
que lo que nos va a permitir es leer las líneas de la terminal.
Como veis aquí, cuando tú ejecutas esto,
primero te hace una pregunta.
Esta pregunta la estamos creando aquí.
Veis aquí en esta línea.
UserInput.Await.Terminal.Question.
Tú dos puntos.
¿Vale?
Pues este UserInput, esta terminal,
la creamos gracias a la interfaz de leer las líneas
donde decimos que el input y el output
básicamente va a ser el estándar in y el estándar out,
que es la línea de comandos para la salida de la entrada,
la que son por defecto.
Por eso utilizamos la del proceso.
¿Vale?
Entonces, ¿qué más tenemos por aquí?
Esto tendríamos el tipo de core message.
El core message no deja de ser, pues,
el prompt del usuario y si el rol del usuario,
si es el asistente, el usuario, el sistema, el que sea.
¿Vale?
Luego tendríamos el SDK de OpenAI de Vercell
para hacer la conexión.
Y fíjate que lo más interesante de esto
es que simplemente haciendo esto
ya automáticamente va a buscar
la variable de entorno OpenAI API key.
¿Vale?
Y ya con esto no tienes ni que informarle.
Ya automáticamente lo va a estar buscando
y te lo va a iniciar el cliente sin ningún problema.
Aquí le podrías poner el modelo que tú quieras.
Fijaos que tenéis todos los modelos estos disponibles aquí.
Podéis utilizar el de Vision también para las imágenes.
O sea, que ya está.
Yo utilizo el 4 Turbo,
pero en este caso es suficiente
y es más barato, ¿vale?
Que el GPT-4O.
Y también, bueno, más rápido,
yo creo que el 4O es bastante rápido.
.env, ¿por qué?
Porque tenemos la variable de entorno.
Tengo un archivo .env con el OpenAI API key.
Y para poder utilizarlo necesitamos esto, ¿vale?
Si no, tendríamos que informarlo de otra forma,
que lo sepáis.
¿Vale?
¿Qué tengo aquí?
Tengo un método main
que lo que está haciendo dentro es un loop infinito.
Sí, un loop infinito.
Bueno, porque en este caso tiene sentido
porque fíjate que tenemos aquí un loop infinito
que no para de haber una conversación con chagpt
hasta que no haga control-c, ¿vale?
Y ya estaría.
Entonces, hacemos un loop infinito
que hasta que el usuario no haga control-c,
pues no va a salir de ejecutarse esto.
Pero lo que hacemos,
primero le preguntamos al usuario en la terminal,
vamos a enviar este mensaje del usuario,
lo vamos a guardar en un array de mensajes,
le decimos el rol correcto,
el del usuario y el contenido,
el input que hayamos puesto.
Por ejemplo, si yo ahora pongo,
hola, ¿qué tal?
¿Vale?
Este mensaje, hola, ¿qué tal?
va a guardarse en este array de aquí.
Y así vamos a tener todo el historial de la conversación.
Ahora, la clave.
Vamos a preguntarle al modelo de GPT-4 Turbo
y le decimos, le vamos a configurar el sistema.
Como esto, el sistema sería como la configuración inicial
que queremos hacer de este modelo de inteligencia artificial.
Y le decimos,
¿eres un asistente útil o honesto y educado?
Vale, imagínate qué quieres decir.
Eres un asistente que tiene acento francés.
Haz que tus respuestas se note que hablas en español,
pero con un deje francés.
Entonces le vamos a decir ahora,
hola, ¿qué tal?
Bonjour, ¿cómo te va hoy?
Estoy aquí para ayudarte con necesidades.
¿En qué puedo asistirte?
¿Te gusta quedar segundo?
Ah, mona mí.
En la vida con cualquier competición,
siempre es mejor aspirar a lo más alto.
Ya, ya, pero bueno, aquí cada uno lo que quiera.
Entonces, ya veis que aquí ya le podéis configurar
de primeras cómo se va a ir comportando, ¿vale?
Una vez que tenéis el resultado,
fijaos que el resultado,
aquí estamos utilizando un método que se llama StreamText.
El StreamText,
esto lo estamos sacando de el Vercel SDK AI.
El StreamText lo que va a permitir es
llamar al modelo,
recuperar la información
y crear el Stream de datos que estábamos diciendo.
Esto, fijaos la experiencia de desarrollo tan buena que tenemos,
que en muy pocas líneas ya estamos creando
la respuesta en un Stream.
Tenemos aquí el resultado
y un Stream que tenemos que hacer
para poder ir leyéndolo.
Lo que podemos hacer
es tener aquí un iterador,
parece un bucle,
pero lo que estamos haciendo es ir recuperando la respuesta,
o sea, es un iterador donde vamos recuperando cada parte de la respuesta.
De este resultado tenemos un Stream de texto
y cada parte de la respuesta vamos a hacer dos cosas.
Uno, ir guardándolo en una variable aquí
para ir acumulando esa respuesta,
porque vamos recuperando poco a poco tokens, ¿no?
Y trocitos de la respuesta.
Lo primero que hacemos es ir guardándolo aquí
para acumularlo,
pero por otro lado, conforme va escribiendo,
vamos a hacer que se vaya mostrando en pantalla.
Y así, dime algo muy largo y bonito de los colombianos, ¿vale?
Entonces, fijaos que así es como parece que va escribiendo,
porque cada vez que vamos recuperando un poquito de respuesta
es lo que estamos haciendo aquí.
En el process.st de out, ¿vale?
En la salida estándar de la terminal,
estamos escribiendo cada parte de la respuesta
que estamos recuperando.
Una vez que ya ha terminado de recuperar
todas las partes de la respuesta,
lo que hacemos es añadir los saltos de línea, ¿veis?
Hacemos estos saltos de línea aquí.
Vamos a enviar a este acumulador del array de mensajes.
Le decimos, oye, el asistente,
finalmente el contenido que nos ha enviado
es lo que hemos acumulado aquí,
en el mensaje, en la cadena de texto.
Lo guardamos y aquí ya volveríamos al inicio del bucle,
de forma que volvemos a preguntarle,
oye, tú, haz la pregunta, ¿no?
Aquí tendríamos ya el tú,
ya estaríamos otra vez en esta línea
y volveríamos a replicar.
Así constantemente,
hasta que haya un error fatal,
que estaremos haciendo aquí un catch del error,
o hasta que hagamos un control-c,
que esto haría un process exit.
Así que fijaos que en muy pocas líneas,
estos son 53 líneas,
pero son 53 líneas porque tiene comentarios.
Si le quitamos los comentarios,
fijaos que en 38 líneas,
sin hacer nada raro,
tenemos un chat GPT en la terminal,
gracias a Vercelles.
¿Dónde se consigue la API Key?
¿Dónde se consigue la API Key?
La API Key, en este caso,
¿vale?
Esta es OpenAI,
esta es de OpenAI.
Entonces, podéis ir a OpenAI Platform,
Iniciar sesión.
En este caso,
necesitáis comprar créditos,
que podéis comprar pocos créditos,
lo que sea,
pero no tiene capa gratuita, ¿vale?
Por desgracia no tiene capa gratuita.
¿Veis aquí que pone API Keys?
Pues le dais ahí,
voy a ver que no tenga...
Vale,
pues aquí tenéis en API Keys,
fijaos que aparecen las que yo tengo creadas,
ustedes probando,
yo la voy borrando por si se me escapa en algún momento,
le daríais aquí a Create New Secret Key
y os daría una nueva API Key.
Por desgracia,
OpenAI no tiene capa gratuita
y tenéis que comprar algunos créditos.
Lo bueno es que tenéis que comprar créditos.
El SDK de Vercell no tiene ningún coste.
Utilizar el SDK de Vercell es totalmente gratuito.
No tenéis que hacer absolutamente nada.
Lo malo,
pues que si utilizáis un modelo que sí que es de pago,
el modelo OpenAI sí que lo tenéis que pagar.
Pero como os decía,
de hecho hemos hecho algún ejemplo de utilizar Oyama
para ejecutarlo en local
y podéis encontrar seguro un montón de ejemplos
de cómo utilizar el provider de Oyama.
Aquí lo tenéis, por ejemplo,
cómo utilizar Oyama.
Tendríamos un provider,
entonces,
criadito Oyama,
no sé qué,
no sé cuánto.
Y aquí tenéis un ejemplo de cómo utilizarlo
con el Vercell SDK AI.
Así que aquí tenéis un ejemplo.
Además,
la persona es ese Gómez
que tiene pinta de Sergio Gómez.
Es de Córdoba.
Pues mira,
el provider lo ha hecho alguien de España.
Fíjate,
oye,
me alegro un montón.
Mira,
aquí tenéis diferentes ejemplos,
¿vale?
Donde podéis ver cómo utilizarlo
en el caso de que queráis utilizar Oyama.
Y lo bueno de Oyama
es que no tiene ningún tipo de coste.
Así que no hay ningún tipo de excusas.
Podéis empezar,
por ejemplo,
con Oyama,
probarlo en local
y llegado al punto de decir,
vale,
ahora sí que puede ser interesante
para pasar a utilizar el de OpenAI
porque ya lo he desarrollado
y ya está, ¿no?
Ese provider usa Oyama en Vercel
o en local.
Utilizaría el local,
¿vale?
Porque Oyama es una aplicación local.
Se puede utilizar
Oyama
en un servidor,
pero normalmente hay que pagar.
Aunque hay algunos que tienen una capa gratuita
y lo podéis buscar.
Pero Perplexity,
sin ir más lejos,
¿veis?
En realidad es Yama.
Y aquí tenéis la posibilidad de utilizar Yama
desde su servidor,
pero sí que vais a tener que pagar, ¿vale?
¿Se puede subir Oyama a un servidor?
Normalmente sí que lo podéis hacer,
pero no es que necesitéis subir Oyama,
sino que ya hay un montón de servicios
que tienen Yama
para que lo podáis ejecutar como modelo
y ya está.
Hay un montón, ¿eh?
O sea,
que no tenéis ningún problema buscándolos.
Podéis incluso ver en Hugging Face
para utilizarlo.
Gemini, por ejemplo,
si al final os animáis con Gemini,
tiene bastante capa gratuita
o tiene creo que gratuito un mes
o un par de meses.
O sea,
que le podéis echar un vistazo,
por ejemplo.
Fijaos que aquí tenéis límites de frecuencia,
solicitudes por minuto.
Es verdad que este es una pena
porque son solo dos solicitudes por minuto
que podéis hacer sin coste,
pero bueno,
igual os sirve
o podéis hacer una rotación de,
mira,
Gemini 1.0 Pro
podéis hacer sin coste
15 llamadas al minuto.
O sea,
que igual os puede llegar a servir
alguno de estos.
Y luego,
a ver,
tampoco es muy caro.
Medio dólar
por un millón de tokens de entrada,
un millón de tokens de salida,
si no es muy pequeño,
tampoco tiene.
Mira,
Gemini tiene dos meses gratis
y tiene la API.
Claro,
pero no sé si los meses gratis
son solo del servicio
y no de la API.
No creo.
Pero bueno,
que sí que hay opciones de,
si alguien descubre alguno,
que lo ponga por aquí,
que creo que puede ser
bastante interesante
y yo lo iré comentando
en los directos también
con algunas opciones
para lo que tengáis.
Mistral tiene capa gratuita.
Mira,
Mistral.
Mistral tiene capa gratuita.
Mistral Pricing.
Tiene capa gratuita
de 5 dólares,
pero solo por 15 días.
Bueno,
pues mira,
podéis,
lo que os digo,
podéis intentar utilizar uno
y llegado a un punto,
pues darle,
pasar a uno que sea de pago
o aprovechar uno
que tenga una capa gratuita.
En Hacking Face
tenéis capa gratuita también,
o sea que tenéis un montón
de posibilidades,
¿vale?
Y si no,
ya os iré poniendo algunos ejemplos
para que así no tengáis
ninguna pérdida.
Os doy unos ejemplos más,
¿vale?
Para que os sirvan,
aparte de los dos que he hecho,
que os subiré el código
en el repositorio.
Os voy a dar unos ejemplos más
solo para que tengáis
de idea y esto.
Mira,
por ejemplo,
este es uno que está bastante chulo,
que es un generador
de inteligencia artificial
de emojis.
Entonces,
podéis,
por ejemplo,
pues,
podríais generar un emoji
de Midudev.
No sé cómo funcionaría esto
o vamos a poner por aquí
Midudev.
Mira,
estos son los que se han generado,
Midudev.
No,
no tengo ni idea
por qué a miden.
Vale,
vale,
por un momento me he asustado.
Vamos a poner
Midudev programando.
A ver qué aparece aquí.
Midudev programando.
¿Vale?
Midudev programando.
Vale,
está generando.
A ver qué sale
de Midudev programando.
Miedo me da.
Miedo me da.
Hostia,
cómo no tarda en generarlo.
Tarda,
¿eh?
Para ser un emoji.
Hostia.
Espero no salir con el pelo blanco.
Oh,
¿por qué con el pelo blanco?
Pero si tengo el pelo...
La madre los parió.
Vale,
vale,
muy bien.
Ya veo cómo programa el Midudev.
Un francés llorando
por la derrota
en fútbol.
Verás luego la mufa que...
Un francés llorando
por la derrota en fútbol.
A ver cómo sale esto.
A ver cómo sale.
Algunos están muy bonitos,
pero hay otros que dan un poco de miedo.
Ah,
mira,
aquí hay de fútbol también.
No está llorando mucho,
¿eh?
Y la bandera francesa tampoco es.
Pero bueno,
que hay diferentes ejemplos.
Este también es de código abierto.
Ya veis que no es perfecto,
ni mucho menos.
¿Vale?
Aquí tenéis todo el código disponible.
Hay otro también que es un template
porque la gente de Vercel
tiene un montón de templates
también de inteligencia artificial
que aquí podéis pillar
un montón de ideas.
Generación de imágenes,
yo qué sé,
para optimizar una imagen,
mejorar una imagen,
recomendación de libros,
de crear,
mira,
de traducir código.
Este está bastante chulo
de que traduces código
de JavaScript a Python,
por ejemplo.
Y tú puedes decirle
qué código y qué código.
Fijaos,
esta es la idea
que os comentaba.
Una cosa que podéis hacer
si por lo que sea
no queréis poner
vuestra API key
de OpenAI
o la que sea,
podéis hacer algo así
en vuestro proyecto,
¿vale?
En el que podáis poner aquí
fácilmente
la API key
y se pueda probar.
Por ejemplo,
si yo ahora intento
utilizar esto,
¿vale?
Console.log,
hola,
y vamos a poner aquí main.
Si intento probar esto
y le doy a translate,
pues me dice,
oye,
pon la API key.
Vale,
pues vamos a ver
si puedo poner la API key.
Vamos a ver
si puedo poner una API key
y que funcione.
Voy a copiar esto.
Tú, tú, tú, tú, tú.
Me copio esto,
me copio esto.
Vale,
he puesto ya una API key,
¿vale?
Le doy a translate
y, bueno,
ahora si no ves,
pues ahora funciona.
Y esto, pues,
por ejemplo,
traduce entre uno y otro,
lo cual está bastante bien.
Si le digo,
no,
pues ahora lo quiero en PHP,
¿vale?
Translating,
pam,
pues esto,
esto puede ser.
Ah, sí, sí.
Digo, hostia,
esto no parece,
pero sí, sí.
Claro, tiene sentido.
Es que como no ha puesto
lo de PHP del principio
es un poco raro.
¿no?
Conding,
bueno,
podéis poner ahí un montón.
Y fijaos que aquí tenéis
la posibilidad de poner el input.
Esto es una muy buena idea,
lo podéis indicar
cuando vosotros digáis,
oye,
participo,
ten en cuenta que este proyecto
solo funciona
si indicas tu API key
en este punto.
Lo que sí que os pido
es que aviséis
y que lo hagáis bastante visible.
No me pongáis
que podéis poner la API key
en un sitio muy oculto
que es muy difícil de ver
porque entonces luego
no la pondré,
os cabraréis
y encima en ningún sitio
se pone en ningún sitio,
no sé qué,
no sé cuánto,
ya está.
Sí,
ahora lo voy a eliminar,
no os preocupéis.
Vale,
esto también es de código abierto
este,
¿eh?
Pero también el que os quería enseñar,
¿cuál os quería enseñar?
Os quería enseñar,
aparte de todos estos,
os quería enseñar,
la madre que me parió.
Ah,
piqui,
ya habéis visto la piqui,
ya habéis visto la piqui.
Me autodoxé.
Bueno,
pues nada,
no pasa nada.
Eliminar.
Ya está,
ya está,
ya paso,
ya paso,
no pasa nada,
no la estoy utilizando,
no la estoy utilizando.
Ya está,
ya he eliminado,
ya he eliminado,
ya está,
ya está,
no pasa nada,
no pasa nada,
no,
ya la gente
está intentando utilizarlo.
Bueno,
esto no es lo que os quería enseñar,
si nos quería enseñar,
por ejemplo,
más ideas como este,
que este es un generador de códigos QR,
que genera una imagen,
esto es bastante chulo,
para intentar hacer,
pues,
no sé,
una,
no sé,
una ciudad con código por todos sitios,
yo qué sé,
por decir algo,
¿no?
Y esto te genera un código QR,
pero que tiene una imagen de fondo,
o sea,
que está bastante chulo.
Este también lo tenéis de código abierto,
este además no parece que haya que poner nada,
y fijaos que toda la UI,
toda la UI que ha puesto,
menuda mierda de imagen que me ha creado esto,
la verdad,
las cosas como son,
bueno,
toda la UI la han creado con V0,
o sea,
que una idea de utilizar inteligencia artificial
para hacerlo lo antes posible.
Bueno,
ahí tenéis diferentes ideas,
lo importante es que,
pues,
exploréis,
veáis cómo lo vais a hacer,
yo ahora subo el código que os he indicado,
¿vale?
Para que lo tengáis todo,
y os recuerdo,
cosas,
los premios,
5 finalistas,
el cuarto y el quinto,
una caja,
con esto,
¿vale?
Y créditos para utilizar Vercell,
luego,
tercer puesto,
100 dólares con la caja y los créditos,
el segundo,
250 dólares con la caja y los créditos,
y el primero,
500 dólares con la caja y los créditos.
Los Vercell Credits,
son créditos para el hosting de Vercell,
y así no vais a tener ningún tipo de problema,
a la hora de hospedar vuestros proyectos o vuestras ideas que vayáis a hacer con esto.
¿Cómo os registráis?
¿Cómo participáis?
No es difícil,
lo único que tenéis que hacer es un proyecto utilizando el SDK AI de Vercell,
como lo hemos visto hoy,
como lo hemos utilizado,
puedes utilizar el framework que quieras,
Next.js,
NACS,
Svelte,
Node,
lo que quieras,
¿vale?
Y lo puedes desplegar donde te dé la gana,
no es necesario que lo hagas en Vercell,
si lo quieres hacer en Vercell genial,
si no,
hazlo donde tú quieras.
Lo único exigible,
el requisito,
es utilizar el SDK Vercell AI,
¿vale?
Y una vez tienes el proyecto listo,
te registras aquí.
Aquí tendrás que poner tu nombre,
tu información,
el nombre del proyecto,
descripción,
repositorio del código,
obligatorio,
donde has desplegado el proyecto,
en el caso que aplique,
porque puedes hacer una web,
extensiones,
una API,
el límite es vuestra imaginación,
¿vale?
Aquí en Isus,
tenemos aquí las participaciones,
mira,
Aníbal ya,
el tío,
ya le está dando caña.
Pasarela de pagos para integrar en aplicaciones
y facturar suscripciones a tu cliente de forma rápida y tal.
Bueno,
pues aquí ya tenéis uno que ya has apuntado.
Y os recuerdo,
en el Discord tenéis aquí un montón de gente
que está buscando equipo,
gente que va a tener ideas,
que os podéis ayudar,
podéis hacer un montón de cosas juntos.
Así que aprovechad esta oportunidad,
una colaboración que hacemos con Vercell,
que vamos a tener también sorteos entre todos los que participen.
también tenéis hasta el 6 de agosto,
al terminar el directo del 6 de agosto,
tenéis hasta ese momento para enviar vuestra participación.
No lo dejes para el último día,
empieza a mover las manitas,
empieza a buscar equipo,
empieza a darle a la cabeza.
Tienes hasta el 6 de agosto del 2024,
cuando termine el directo del 6 de agosto,
martes 6 de agosto,
no podrás enviar más
y será la semana que viene,
el 13 de agosto,
el 13 de agosto,
que tendremos los finalistas
y la votación final
revisando los proyectos más destacados
y conoceremos los ganadores.
Así que no pierdas esta oportunidad
de participar en la hackathon,
dale cañita,
me parece un proyecto muy bonito,
muy bonito,
claro que se puede,
pero eso es web app.
¿De cuántos integrantes los equipos?
Los equipos pueden ser
de tantos integrantes como queráis,
podéis ser 28.300 personas,
pero tened en cuenta,
no hay máximo de equipo,
pero los premios son para todo el equipo,
o sea,
que si ganas los 500 dólares,
lo tenéis que dividir
entre todas las personas del equipo,
y lo mismo con la caja,
solo hay una caja,
por lo tanto,
veremos si luego se hace alguna excepción,
ya hablaremos con Bersel y tal,
pero a priori con TAT,
que si hacéis un equipo de 10 personas,
hay que dividir el premio
entre toda la gente,
no hay un máximo de equipo,
así que eso ya depende
de cada uno de ustedes.
Todos los ejemplos,
todos los recursos,
toda la información,
en el Discord,
en el canal Bersel Hackathon,
ahí Feralp os lo ha dejado todo
súper súper bien,
¿vale?
Aquí ya hay gente buscando equipo,
que lo que hacen es Bell,
que lo que hacen y tal,
yo os recomiendo que,
además de poner que buscáis equipo,
poneos en contacto
a la gente que busca equipo,
por ejemplo,
yo qué sé,
si está aquí Rafael Guzmán,
que tiene experiencia y tal,
pues oye,
que alguien del primer paso también,
de contactar con alguien,
darle cañita ahí,
que está bien,
y una vez que encontréis equipo,
pues eliminad el mensaje,
o editarlo,
ya tengo equipo,
lo que sea,
¿vale?
Animaos,
buscad a gente ahí fuera,
que estoy seguro que os puede interesar.
¡Gracias!