En este vídeo te voy a enseñar cómo puedes desarrollar un producto que use inteligencia artificial.
Vamos a crear un corrector de textos en inglés.
Tú le pasas un texto que está mal escrito y te lo corrige.
Lo desarrollamos utilizando Astro y Svelte.
Y todo lo que vas a aprender lo puedes utilizar para participar en la hackatón que tenemos
con premios de hasta 350 euros.
Te dejo toda la información y la descripción.
Y disfruta del vídeo.
Acaban de sacar la versión Create Astro... A ver, Astro Block.
Astro Build, perdón.
Vamos a ver qué trae nuevo y vamos a utilizarlo, ¿vale?
Utilizamos la versión 2 en un momentito.
¿Os parece bien? ¿Sí?
Venga, pues vamos a proceder.
Vamos a hacer... Venga, sí, sí.
Vamos a hacer un pequeño producto, ¿no?
Que os he dicho que vamos a hacer un pequeño producto.
Fix My English. Fix My English.
Me gusta, ¿eh?
Voy a buscar hasta el dominio.
Voy a buscar hasta el dominio.
Venga, mejores prácticas.
Copia, copia.
Estamos de estreno, ¿eh?
Estamos estrenando. Acaba de sacarlo, ¿eh?
No, Spell Checker sería para chequear.
Yo lo que quiero es que me lo arregle directamente.
¿Quieres instalar las dependencias?
Sí, dale, hombre. ¿Qué más da?
Vamos a... Vamos a instalar aquí.
Vamos a crear nuestro proyecto web con Spell Checker este.
Spell Checker no. Fix My English.
Que me gusta. Me gusta el nombre de Fix My English.
¿Quieres iniciar el repositorio?
Le voy a decir que no porque no tiene sentido.
Esto nos ha creado el Fix My English.
Vamos a hacer un MP en Randev.
Y esto me debería levantar en el puerto 3000, pues, nuestro querido Astro.
Veo que tampoco han cambiado la documentación.
La verdad es que lo podrían haber hecho.
Vamos aquí, Fix My English.
Hemos creado un proyecto desde cero que tenemos aquí, pues, páginas.
Aquí tenemos nuestro index.
Voy a activar la extensión de Astro para que podamos ver lo que hacemos correctamente.
Así que, enable workspace.
Ya, ahora sí que veo aquí los coloritos.
Y esto sería la página por defecto, pero es esta que tenemos aquí.
La vamos a quitar.
Vamos a quitar todo esto.
Vamos a quitar esto.
Vamos a quitar estos styles también que hay por aquí.
Y vamos a poner aquí el Fix My English.
Vamos a poner a UK.
¿Vale?
Y ahora, vale, aquí tenemos la My Fix My English.
Vamos a añadir Tailwind para hacer npx o menos por encima.
No son importantes los estilos, pero así tendemos algunos estilillos.
¿Vale?
Y así incluso me puedo copiar algún componente.
Sí, de hecho, para no tener que hacer yo los componentes, que si no pierdo mucho tiempo,
podemos utilizar los de Frostbite.
Bueno, voy a dejar que decidáis.
Va, que siempre decido yo los que hacemos.
Pero esto no es.
¿Esto es gratis?
Vale, Tailwind Kit tiene buena pinta.
Venga, vamos a utilizar este, que este se ve bonito.
Mira, me gusta este Rounded.
A ver si hay uno de texto.
Mira, Enter Your Comment, Text Area.
Venga, nos copiamos este texto.
Ya tenemos aquí Astro.
Vamos a poner aquí el label este.
Vamos a ver cómo queda.
Fijaos que vamos a hacer aquí un producto en un momento.
Vamos a hacer un producto en un momentito.
Vale, Fix My English.
Vamos a poner aquí el Container.
Que esto sea Container para que ocupe lo justo.
Container.
Ah, bueno.
Es que veo que el Container...
Vamos a ponerle un tamaño máximo.
Vale, Fix My English.
Esto le vamos a poner aquí un class.
Y le vamos a poner que sea 3XL.
Font Vault.
Fix My English.
Esto ya empieza a tener buena pinta.
Flex.
Flex Call.
Esto va a estar en el header.
Vale.
El H1 en el header.
El header.
Vamos a tener un poquito de separación.
Y aquí...
Hostia.
Porque está...
Es por esto.
Vamos a poner aquí en el Play Holder.
Play Holder.
Y vamos a poner aquí un botón.
Un botón.
Fix.
Please fix my English.
Vamos a...
Voy a cerrar esto.
Vamos a ver aquí si hay algún botón por aquí que debe haber.
Buttons.
Mira, buttons.
¿Cuál nos gusta?
Hostia, este de loading está muy chulo, ¿eh?
Hostia, está muy chulo esto.
Esto está muy chulo.
Me gusta.
Me gusta el loading.
Me gusta el loading.
Vamos a dejar el loading porque vamos a poner aquí cargando.
Vale.
Ya veo que vamos a necesitar estados.
Vamos a necesitar...
¿Os parece si utilizamos un poquito de React?
Bueno, vamos a utilizar pre-act, va.
Que siempre utilizamos React.
Y React está un poco...
Ya aburre un poco, ¿eh?
Ah, es verdad.
Hay dos Play Holders.
Tienes razón.
Tienes razón.
Aquí vamos a poner...
Put your English to fix.
Svelte.
Hostia, Svelte.
Svelte.
Venga, va.
Vamos a poner Svelte.
Va.
Vamos a utilizar Svelte.
Es que de Svelte, como nunca me acuerdo ya de los if y tal...
Venga, vamos a utilizar Svelte.
Va.
Tienes toda razón.
Va.
Svelte.
Vamos a utilizar Svelte.
Vamos a poner el button summit.svelte.
Venga.
Es muy fácil.
Si eres alguien que no sabe Svelte, no te preocupes, que vas a aprender ahora, en un momento.
Y lo único que va a pasar es que te van a entrar ganas de aprender más.
Vale.
Hacemos aquí NPM.
Ah, no.
NPX.
Astro.
Add Svelte.
Creo que era así, ¿no?
NPX.
Svelte.
Vale.
Esto lo que nos va a hacer es añadir...
Es que qué buena es la experiencia de usuario de Astro, ¿eh?
De verdad.
Vale.
Decimos que sí, que queremos añadirlo.
Vale.
¿Cómo entras al trapo?
Ah, saco.
¿A qué atrapo?
Hay que mover las manitas, amigos.
Hay que mover las manitas.
Venga.
Sí.
Vale.
Pues ya tenemos Svelte.
Entonces, me voy a llevar esto para aquí.
Me voy a llevar esto para aquí.
Vamos a activar Svelte.
La extensión de Svelte.
Yo es que tengo las extensiones desactivadas por defecto.
Ah, mira.
Está.
¿Ves?
Enable workspace.
Y ya está.
Perfecto.
Entonces, tenemos aquí Loading.
Vale.
Perfecto.
Si no recuerdo mal, tenemos aquí esto.
Script.
Va a ser bastante fácil porque...
Este cargando lo vamos a tener aquí.
Este TextArea.
Vale.
Esto lo vamos a poner en ID.
Result.
Luego veremos qué hacemos con esto.
Vale.
Svelte.
Y vamos a ver qué hacemos con esto.
¿Qué es lo que tenemos que hacer?
Cuando en el botón hacemos un clic.
Esto era onClick.
¿No?
Vamos a tener aquí un handleClick.
HandleClick.
Hostia.
¿No era así el onClick?
¿Ves?
Como voy a tener que revisarme el...
Me voy a tener que revisar el...
¿No era así el onClick?
A ver, que alguien me diga.
Sí, ¿no?
¿Por qué?
Ah, porque no está definido.
Es como me lo ha puesto así, pensaba que estaba mal.
Digo, ostras, pensaba que estaba mal.
No, no, está bien.
Vale.
¿Qué tenemos que hacer aquí?
Lo que tenemos que hacer aquí, simplemente, cuando hagamos el clic, vamos a llamar a nuestra API de cohere, ¿no?
Para llamar a nuestra API de cohere, vamos a tener que hacer aquí, vamos a hacer services.
Vamos a hacer una services.
Vamos a poner aquí ia.js.
Tenemos que importar cohere, from, cohere, que esto es lo que estamos utilizando para inteligencia artificial.
Tenemos que inicializar.
Esto lo voy a hacer mal, pero me lo voy a copiar de aquí, que lo tengo por acá.
Esto lo estoy haciendo mal, pero bueno, luego estaría bien que tú lo hagas bien con tiempo, variable de entornos, que lo hemos hecho muchas veces.
Entonces, ahora hacerlo otra vez, es un poco...
Vale.
Vamos a generar.
Utilizando el modelo xlarge, vamos a utilizar un prompt.
Mira, qué bueno que está utilizando de contexto lo que hemos hecho antes.
La madre que parió también a Gijacopail.
Vamos a utilizar.
Vamos a ponerle un prompt en condiciones.
O sea, le vamos a decir.
This is a spell check generator, por ejemplo.
Vamos a probar.
Luego igual está mal, ¿no?
Pero luego veremos, ¿no?
Ponemos incorrect sample.
Y aquí, pues, yo qué sé.
Vamos a poner, no sé cómo decirle.
Decidme frases que estén mal.
Decidme frases que estén mal.
No, xlarge está bien escrito, ¿no?
Es todo junto.
Spell.
Ah, gracias.
Mira, ya ha empezado mal, ¿no?
I are good.
Mira, I are good.
I are good.
I are good.
Exacto.
Entonces, aquí lo que le podemos decir, ¿cuál sería la correcta?
O sea, tenemos la mal, es esta, ¿vale?
Correct sample.
I'm good.
Venga.
Para hacer que se separen, vamos a hacer algo.
Para separar, vamos a poner estos dos puntos, ¿vale?
O sea, dos guiones.
Lo podéis hacer como queráis.
Estas separaciones son como los inputs, le estamos diciendo que están separados.
Que están separados justamente por esto, ¿vale?
Pues, venga.
Ponedme otra.
I have, muy bien.
I have 20 years old.
Vale.
Correct sample, I'm 20, vale.
Venga, otra.
Incorrect sample.
I don't, can't, know.
Muy bien.
I don't know.
Vale.
Yo creo que con esto ya está bien.
Ahora, lo que vamos a hacer es un truco para, no es engañar, pero vamos a hacer, vamos
a hacer que no, que como, que continúe la conversación nuestra inteligencia artificial.
Y le vamos a decir incorrect sample y aquí lo que vamos a hacer es pasarle nuestro input.
Así que vamos a tener aquí nuestro servicio que va a ser export, function, fix my English.
Está bien.
Fix my English.
Y le pasamos el input que va a venir del textarea.
Entonces, todo esto lo ponemos aquí dentro y aquí le vamos a colar este input.
Le colamos ese input, le colamos este input y lo que vamos a hacer es, claro, ahora va
a querer continuar esto porque justamente, ves, tiene esto aquí.
Tiene esto justamente aquí.
Entonces, le decimos, vale, como esto es lo que hace que estemos terminando la frase,
lo que le estamos diciendo de alguna forma es, continúa tú la frase.
¿Sabes?
Quizás no le hace falta decir ejemplos de malas prácticas, en el caso de ser un corrector.
Quizás el prompt puede ser, escribe correctamente el texto.
Lo vamos a probar así porque yo lo he visto en el dashboard que esto lo usa mucho.
Luego podemos probar diferentes formas y, de hecho, esto sería la idea, que vosotros juguáis
con los prompts.
Pero yo en el dashboard, en muchos de los dashboards que he visto, por ejemplo, yo qué sé,
creo que había uno de, mira, correct errors, no sé qué, ves, utiliza esto.
Igual podemos utilizar el de command, pero no sé, vamos a utilizar esto, luego dejamos
que haga, vemos y probamos, a ver si se puede hacer de otra forma.
Y aquí le ponemos correct sample, le dejamos los dos puntos, ¿no?
¿Ves cómo hace este?
Y lo terminamos aquí para que siga escribiendo a partir de aquí.
Es que ya veis que hay como diferentes modelos.
Está el de generar texto, que sería como un GitHub Copilot.
Esto en realidad es como un GitHub Copilot, porque lo que hace es que tú le das el texto
y lo continúa a través del contexto que está haciendo.
Y luego tienes el de command, que sería más de darle comandos.
Así que vamos a utilizar el de contexto y para eso lo vamos a hacer así, ¿vale?
Vale, max tokens.
Bueno, a ver, vamos a poner algo pequeño para que no tarde mucho.
Vamos a poner 40.
Temperatura bajita, porque no queremos que sea aleatorio.
Queremos que nuestros textos siempre se parezcan.
O sea, tiene que ser lo más parecido posible.
El k lo vamos a dejar con 0 y 1.
Vamos a poner también, un momento, esto lo vamos a poner aquí, que es la forma correcta.
Vale, frequency penalty.
Le ponemos 0 porque tiene que, o sea, da igual que sean muy frecuentes las palabras.
Lo que queremos es arreglar el texto y ya está.
Stop sequences le decimos que es con 2, ¿vale?
O sea, esto es lo que está separando cada secuencia.
Y finalmente el return lighthoods.
A ver lo que pone aquí, que es el return lighthoods.
Dice, para especificar si los tokens que se parecen tienen que ser devueltos en la respuesta.
Ah, claro, esto es como para darte o sinónimos o respuestas similares.
Claro, por eso mejor si le decimos que no, porque nosotros queremos, o bueno, igual luego lo podemos probar, ¿no?
Para ver qué es lo que da.
Pero bueno, esto, esta respuesta, vamos a poner return response punto body punto generations en el 0, el text.
Y ya está.
O sea, primero vamos a hacer esto.
Export as in functions.
Y esto debería, debería ser nuestro corrector.
Un 0, 0.3 más preciso, ¿vale?
Pues 0.3.
Yo pensaba que con un poquito, o sea, con que sea menos de uno ya.
Vale.
Pues entonces, ya tenemos un método.
Es que esto es impresionante porque la gente, o sea, no se podría hacer un punto split del input para calcular los max tokens.
Es que ¿sabes qué pasa, tres demonios?
Que los tokens no son exactamente palabras.
Lo podríamos intentar, pero también deberíamos tener cuidado de que, claro, alguien nos podría pasar un texto súper tocho.
Y nos pasa un texto súper tocho y al final, ¿qué?
O sea, es que nos revienta y nos puede reventar.
Falta un tap.
¿Dónde falta el tap?
No lo veo.
Ah, aquí.
Aquí.
Vale.
Sí, es que aquí con el template de string es un poco rollo, ¿no?
Likelihoods es lo que usa para decidir qué token elegir.
Ya, pero en este caso no es likelihoods para decidir qué token elegir.
En este caso es para que los devuelva.
¿Sabes?
O sea, si el vocabulario, lo que dice el dar es los likelihoods, o sea, tú puedes tener como palabras que se parecen, ¿no?
Entonces, sería un array que te dice, el primero tiene un 0,9, el otro 0,1, que es su ejemplo, ¿no?
Entonces, la primera palabra es la que tiene más posibilidades de estar correcta y, por lo tanto, sea la que devuelva.
Entonces, esta sería como un likelihood.
Pero lo que estamos haciendo aquí, en este caso, sería decir para que devuelva también estas en otro array, ¿sabes?
Como parte de la respuesta.
Eso es lo que se está haciendo aquí, el return likelihood.
Como cuesta esa palabra, Dios mío.
Como palabra, cuesta.
Bueno, ya tenemos lo de la ya.
Venga, vamos a importar el fix my English.
¿Ok?
Cuando hacemos el handle click.
A ver, aquí, claro, este botón, vamos a quitar este button.
Ponemos button, please fix my English.
Vale, please fix my English.
A ver, estoy pensando en hacer algo regulinchis, ¿vale?
Pero es que, para hacerlo rápido, podríamos...
A ver, este follow...
Estoy viendo los botones, un momento, a ver qué tal los botoncitos.
Vale, este es como el este, ¿no?
Entonces, vamos a copiarnos este botón.
Vamos a ir un poco a saco, ¿eh?
Pero vamos a hacer...
Este sería fix my English, ¿vale?
Y entonces, aquí vamos a llamar al fix my English.
Vamos a recuperar el texto del text area.
Vamos a mezclar vanilla con svelte, un poquito.
Mira, tenemos el resolve, ¿vale?
Pues, document get the text value.
El texto se lo pasamos al fix my English.
Le pasamos el texto.
Y vamos a tener...
Vamos a pillar lo de la wait.
Vamos a poner esto...
Esto tendríamos que tener aquí...
Espérate, ¿cómo se hacía esto?
Se hacía que teníamos aquí una promesa, ¿no?
Promise.
Y que aquí le poníamos el promise igual...
Fix my English.
Creo que era así, ¿no?
Y aquí lo que podemos hacer es esperar esta promesa
y dependiendo de lo que hace, pues, decirle que haga una cosa u otra.
O sea, tenemos el botón de fix my English.
Vale.
Esto es en el caso...
De que no tengamos...
De que la promesa...
Esto como era así, ¿no?
If promise...
Es igual a null...
Ahí.
Igual a null.
Podríamos poner promise...
Si promise es igual a null...
Vale.
Y esto...
Lo vamos a cerrar aquí.
¿Esto era así?
Creo que sí que era así.
Vale.
Vamos a quitar esto también.
Vamos a utilizar el desvelte.
Button...
Summit...
Admit...
Vale.
Por ahora jugamos estático y ya está.
Creo que era así o se tenían que poner llaves...
Es que esto me pasa por no utilizar más...
Esbel.
Mira que he escrito un libro y todo.
Vale.
Si es null, entonces le pasamos este.
Vale.
Este if...
Vamos a hacer que esto sea else.
If...
Y vamos a poner aquí el else.
Vamos a poner esto.
Y esto...
Vamos a ponerlo...
Este.
Lo vamos a mover aquí.
¿Vale?
Para que cuando hagamos click en el botón de fix my English pase esto.
Luego...
Sí.
Aquí vamos a hacer el await.
Vamos a decirle...
Vale.
Vamos a esperar.
Await.
Await then.
¿Vale?
Vamos a esperar.
Mientras esperamos la promesa, vamos a pasar el del loading, que es este.
Esto se tendría que hacer mejor, pero tendríamos que separar ahora un montón de cosas y no hay ganas.
Así que ponemos loading.
Vamos a poner que esto sea disabled.
Pointer, pointer...
Vale.
Vamos a poner que mientras se está cargando...
Vale.
Lo que esperamos aquí es la promesa.
Mientras esperamos la promesa...
Vamos a poner que esto es pointer...
Events none.
¿Vale?
Y claro, cuando ha terminado, pues no deberíamos...
No sé si cuando ha terminado podríamos hacer un setTimeout.
Podríamos hacer un setTimeout de...
Vale.
Ya he terminado.
O podríamos simplemente pasar aquí, hacer el await de esto.
Await.
Promise.
Creo que se puede hacer esto.
Y hacer esto.
Ah, bueno.
Pues no.
No se puede hacer esto.
Ah, vale.
Porque esto no es asíncrono.
Vale.
Vale.
Creo que se puede hacer esto.
Del palo.
Primero ponemos la promesa.
Esto cambia.
Esperamos la promesa.
Y la promesa pasa a ser null.
Y por lo tanto, aquí ya no necesitamos hacer el then.
Simplemente volverá a ser el fix my y tal.
Y ya está.
Al menos...
Vamos a ver si esto más o menos funciona.
¿Qué tal?
¿Cómo lo veis?
A ver, no es mi mejor código.
No es el código del que estoy más orgulloso.
Pero bueno.
¿Qué tal?
Await promise.
Then resolve.
Then error.
Bueno, el tema es que la promesa cuando termine, lo que quiero hacer, al menos ahora, es hacer algo así.
O sea, en la promesa, cuando la promesa se resuelve, vale, tendríamos la promesa.
Esto devuelve directamente.
O sea, que el await promise, value, y esto sería el value, y creo que ya está.
Ahora entiendo por qué gusta React.
No, hombre, pero...
A ver, esto también es porque yo lo he hecho muy a saco.
También, a ver, tened en cuenta que deberíamos, por ejemplo,
deberíamos separar icons...
O sea, deberíamos separar icons loading.astro.
I.astro.svelte.
Deberíamos quitar, por ejemplo, los SVGs, para empezar.
Que los SVGs que hemos puesto aquí, pues también tienen su cosa, ¿no?
Bueno, este no es el loading, pero no importa.
El loading es este.
Eso para empezar, ¿no?
Y tener loading...
Y esto por aquí, pam, pam.
Luego también los buttons los he puesto a saco, ¿no?
Los he puesto un poco a saco.
Vale, esto es result.
Me lo ha puesto alguien.
Result.
Me faltan iconos.
No sé si aquí tienen iconos porque ves que...
Bueno, le voy a dejar el de upload.
Porque total...
Upload.svelte.
Y entonces, quitamos este.
Upload.
Ponemos esto aquí.
Y ya empieza a quedar un poquito mejor.
Y tampoco...
O sea, también es verdad que...
Ya os digo, este botón se podría mejorar bastante.
Ahora vamos a ver si funciona.
Hay que tener en cuenta una cosa.
Si volvemos a nuestra página, ¿vale?
Ya tenemos aquí fix my English, fix my English.
Pero si le damos, ¿ves que no pasa nada?
No pasa nada, ¿no?
¿Por qué no pasa nada?
No pasa nada porque Astro, los componentes por defecto,
son estáticos.
Esto es súper importante.
Los componentes que utilices de Svelte, de React y todo esto,
son estáticos por defecto, ¿vale?
Para hacer que dejen de ser estáticos,
tenemos que decirle cuándo se tienen que cargar.
Así que le decimos...
En el cliente, le puedes decir cuando esté idle,
cuando lo cargue, cuando esté visible.
Así que cuando esté visible,
vamos a hacer que sea interactivo.
Vamos a poner ahí nuestro...
Yo qué sé.
This...
No sé.
That's my car.
That's my car.
¿Vale?
Vamos a ver dónde peta.
Global is not defined.
¡Oh!
Cohere.
Me está fallando cohere.
O sea, no podemos utilizar cohere así directamente, ¿eh?
Porque fíjate que dice global is not defined.
O sea, a ver, cohere, i, github.
Parece que no se puede utilizar en la parte...
O sea, se tiene que utilizar en Node,
pero no se puede utilizar en el cliente fácilmente.
Importante.
Bueno, tenemos dos opciones aquí.
Una, podríamos insistir, ¿no?
Podríamos ver cómo arreglamos eso.
No pasa nada.
Pero estamos para adaptarnos, ¿no?
Estamos para adaptarnos.
Por lo tanto, una cosa que podemos hacer
es que viendo el export code,
yo veo que sí, tienes lo de Node.js,
que sería la biblioteca,
pero también está el curl.
Y el curl, al final, fíjate,
o sea, al final tienes toda esta información.
Entonces, lo que puedes hacer directamente
es hacer la llamada tú a la API,
sin necesidad de dependencias.
Vamos a hacer eso, ¿no?
Y así nos aseguramos de que funcione en el cliente.
Vamos a quitar esto.
Vamos a poner aquí la API key.
Coher API key.
Que sí, eso es de donde debería sacarlo.
Muy bien.
Esto por aquí.
Esta es la API URL.
Coher API URL.
¿Vale?
Mentira.
Es esta.
¿Vale?
API generate URL,
porque tiene otras APIs que tendríais que mirar.
¿Vale?
Me voy a copiar todo esto.
Me lo voy a copiar de referencia
para notar que está entrando ahí constantemente.
Pam, pam, pam.
¿Vale?
Ya vemos que tiene...
Esto es un post.
Por lo tanto, vamos a hacer aquí.
Const, response, fetch.
Pasamos aquí el coher API generate URL.
El method es post.
Perfecto.
Los headers.
El authorization.
El beater token.
Se tiene que pasar exactamente así.
Le pasamos...
Le tenemos que poner también el content type.
Content type.
Application JSON.
Coher version.
Se lo vamos a pasar,
porque si se lo pasas, se la pago.
Aunque a lo mejor no...
Esto no sé si es importante.
Y luego tiene aquí data row.
Data row.
Request.
O sea, esta es la información que se le pasa.
Vale.
Vamos a quitar...
Data.
Vamos a pasar todo esto.
Aquí, add data.
Quitamos este, response.
Lo pasamos aquí el data.
Vale.
Entiendo que esto lo tenemos que pasar...
Al final esto es un string.
Lo tenemos que transformar.
O sea, que a este data tendríamos que hacer un JSON stringify.
Y ya está.
O sea, que los headers terminan aquí.
Esto aquí.
Esto aquí.
Y nos faltaría el body con el JSON stringify data.
Y creo que ya está.
Con esto deberíamos ser capaces de hacer un then del JSON.
Y esta debería ser la respuesta una vez que hagamos el await.
Y con esto tenemos aquí la respuesta .body.
Bueno, voy a poner un console.lock aquí por si acaso.
Porque tengo dudas de que realmente me devuelva exactamente la misma respuesta.
Claro, porque eso estaba envuelto en una biblioteca que tienen ellos.
Entonces vamos a revisar que esto realmente sigue funcionando igual.
Vamos a ver.
Fix my English.
Ahora ni siquiera ha hecho nada.
Ah, puede ser que se haya quedado...
Espérate.
A ver.
Bueno.
Al menos el generate lo ha hecho.
415.
415.
Vista, respuesta.
Vale.
Stop sequences.
Más o menos.
A ver.
Max tokens.
Yo veo que todo más o menos.
Ah, ostras.
Es que claro.
Me estoy copiando esto.
Y no sé si este debería utilizar lo mismo.
Yo me imagino que sí.
Yo me imagino que sí.
Los campos los veo igual.
El prompt lo veo igual también.
A ver.
Voy a poner un console.lock del JSON.
Es que claro, como ponía esto de data row, tengo...
No sé si en el curl...
Nunca he hecho un post en el curl.
A ver qué opináis.
A ver qué le falta.
Content type.
El content type lo he puesto, ¿no?
Content type...
Ay.
Me he equivocado con el content type.
Lo he puesto mal.
Lo he puesto mal.
Importante.
Yo diría que el data row es el body.
O sea, eso está bien.
Pero yo creo que...
Pero no podías copiar el código de Node.
Lo hemos explicado antes.
¿Qué pasa?
Ya he hecho antes lo del código de Node.
Pero el problema es que el código de Node no funciona.
Porque intenta tirar de global.
Lo hemos hecho hace un momento.
Vale.
A ver ahora.
Vale.
That's me, car.
Me encanta porque la respuesta que ha hecho no es que sea la mejor respuesta, pero lo ha hecho.
That's me, car.
Ya he terminado con el guión, guión, text, prompt, this is a spill checker.
A ver.
Vamos a poner algo.
This is a grown phrase in English.
This is the grown phrase in English.
No termina de hacerlo muy bien.
O sea, no es el mejor spell checker.
This is the grown phrase in English.
O sea, es correcta la frase.
Pero es que, claro, es difícil ser en contexto.
Pero también es verdad que aquí nos ha pasado alguna cosa.
O sea, funcionar todo funciona.
Ahora, ¿vale?
Pero aquí en el button tenemos algún problema ya, ¿no?
Que nos está haciendo alguna cosa por aquí.
Una vez que hace esto, este promise null no está volviendo.
Hace que desaparezca.
O sea, yo le pongo aquí cositas.
My car is blue.
¿Ves?
¿Desaparece?
Tienes el perche de generator.
O sea, funciona, funciona.
My car is blue.
O sea, ahí está bien.
Pero vamos a ver qué pasa aquí, ¿no?
Primero, aquí en el result, el ta, ta, ta.
Este input.
Ah, es que tiene dos IDs.
La madre que lo parió.
Fuera este.
Ya está, ya está.
Igual es eso, ¿eh?
Eso es lo primero.
Eso es lo primero.
Tampoco.
Vale.
A ver si se os ocurre.
¿Por qué no me está pillando eso?
La línea getElement.
No, esto es id, result.
O sea, esto está bien.
Esto está bien.
Punto value.
Este value debería...
Ah, espérate.
Claro, también.
Es claro, claro.
Es que claro, claro, claro.
Vamos a ver, vamos a ver.
Vamos por partes.
Claro, es que esto...
Yo estoy viendo lo que devuelve.
O sea, yo estoy viendo aquí una cosa, no lo que...
Por ejemplo, este body está mal.
Esto no existe.
Entonces, seguramente esto está petando, en realidad.
Porque esto lo que tiene es el generations, el 0.text.
Vale, hasta aquí bien.
Ahora, hay una cosa rara, y es que fijaos que aquí...
Me está poniendo aquí un salto, no sé qué.
Claro, eso es por cómo funciona la generación del texto.
O sea, que deberíamos limpiar el texto este.
O sea, deberíamos de hacer...
Vamos a recuperar el texto de response generations 0.
Y aquí deberíamos poner text.
Vamos a poner...
Vamos a poner...
Es que lo raro...
Ah, vale, vale.
Eso está bien.
Lo único que tendríamos que hacer es un split.
O sea, hacemos un split...
O podríamos hacer un replace, incluso.
Replace de esto por esto.
Y un trim.
Devolvemos esto.
Claro, estaba devolviendo mal.
Por eso no estaba cambiando esto.
Ahora eso tiene sentido, ¿no?
My car is blue.
Vale, my car is blue.
Y luego también, además, podríamos reemplazar las comillas,
si quisiéramos.
La primera y la última.
O podemos recuperar...
Clean text.
Y podríamos hacer...
Del clean text podríamos recuperar...
Clean text.
Esto que he hecho es muy pirata.
Ahora os lo explico.
Ahora os lo explico.
Es muy pirata lo que he hecho.
Es muy pirata.
A ver si funciona.
Ay, no.
No funciona.
No funciona.
Clean text.
Es que creo que esto no funciona.
Ah, qué lástima.
Era muy pirata lo que estaba haciendo.
Quería recuperar...
Quería quitar el primero y el último haciendo el de structuring.
Pero es verdad que no funciona así.
No funciona así.
Porque esto sería la primera comilla.
Esta sería la siguiente comilla.
Y lo que quería era justamente tener esto.
Pero no funciona así.
No funciona así.
Básicamente vamos a hacer el...
Substring...
Substring...
De uno...
Text menos uno...
Y substring...
De cero...
A text menos uno.
Ah, no.
Sí.
Es que puedo.
Lo puedo hacer desde una, ¿no?
Ya está.
Ya está.
Ya lo estoy haciendo bien.
My car is blue...
Vala.
Vaya.
Que no estoy volviendo lo correcto.
Venga.
Ya lo tenemos.
Vamos a hacer un return directamente de esto.
Return.
Pasamos esto por aquí.
Hacemos el trim.
El substring.
Y ahora...
Ahora sí.
De verdad era buena, ¿eh?
Ahora sí.
La madre que lo trajo.
Mira que lo he pensado antes, ¿eh?
Pero he pensado...
No, hombre.
No puede ser que...
Que sea menos dos.
Pero ahora sí que lo he hecho bien, ¿no?
Si le he puesto menos dos.
A ver.
A ver ahora, ¿eh?
No se puede porque el texto es más largo del texto reemplazado.
Sí, ahora...
O sea, ahora me ha dejado loco.
Menos tres.
O sea, podemos estar así todo el día.
Venga.
Puedo...
Puedo estar...
Tengo todo el día.
Tengo todo el día.
Vamos.
Vamos.
Me está...
Me está...
Me está...
Me está vacilando.
Me está vacilando.
A ver.
Podría hacer un replace.
¿Vale?
Podría hacer un replace también.
Pero imagínate que la frase original...
¿Sabes?
Podría hacer esto.
Que lo voy a hacer, ¿no?
Para dejarlo en substrings y tal.
Podría hacer esto y ya está.
Lo que pasa es que...
Es verdad que si la original tiene eso...
My car is blue.
Pues vamos a encontrar ese problema también.
Venga, vamos.
Tú puedes loading.
Ya está flipando.
Ya...
Ya...
Bueno.
My car is blue.
Vale.
Y tengo...
My car is blue.
O sea, ya aquí podríamos poner...
I could put here any text that I want that it will be fixed easily for...
From...
For...
By the intelligence artificial.
A ver.
Se la estoy poniendo difícil ahora, ¿eh?
Se la estoy poniendo difícil.
I can put here any text that I want that it will be fixed easily by the artificial intelligence.
¿Qué os parece?
¿Qué os parece?
¿Por qué no pones en el prom que te da el texto sin comillas?
Sí, lo había hecho como para asegurarme, ¿no?
De que...
Pero no pasa nada.
Podemos ir probando.
Podemos ir probando.
Venga, vamos a hacerlo.
Vamos a hacerlo.
Voy a...
I could...
Oye, qué chulo.
Porque me ha arreglado hasta el cut.
I need a logo for my business.
What?
Yo creo que no le gusta, ¿eh?
La falta de comillas.
Yo creo que no le gusta la falta de comillas.
Yo creo que las comillas le acotan bastante para que no se le vaya a las manos.
Claro, esto es parte de...
Yo creo que sí, ¿eh?
Yo creo que es necesario.
Porque es como...
Es esta frase y punto.
Deja de inventar.
Estate quieto.
Piensa que puede ser una inteligencia artificial que sea hiperactiva, ¿sabes?
Ay, qué bueno.
Marketing puro.
¿Está bien para vender un servicio de logos?
Puede ser, ¿eh?
Puede ser poner ahí publicidad, ¿te imaginas?
Entonces...
Sí, dice Don Eber.
Sería bueno tener dos text áreas, uno para el input y otro para el output.
A ver, lo hemos hecho para que sea rápido.
Ahora marca los cambios.
No sería imposible.
A ver, os lo dejo a vosotros.
No voy a hacer yo el hackatón.
Martínez, no te voy a hacer a ti el hackatón.
Pero no sería muy difícil, la verdad.
¿Funcionaría sin pasarle ejemplos?
¿Lo podemos probar?
¿Lo podemos probar?
Vamos a hacerlo.
Vamos a quitarle esto.
Yo lo he hecho siguiendo el ejemplo, ¿no?
Que hemos visto.
Vamos a hacerlo así.
A ver qué tal.
Ay.
A ver.
Yo creo que debería funcionar.
Ah, no.
Ah, no.
I have a website and I need a logo for it.
The name of...
O sea, se le va de las manos.
Yo creo que necesita contexto.
Yo creo que necesita...
Tampoco son ejemplos muy bestias.
Lo más interesante es que es una...
Claro, tú la puedes volver a reentrenar.
O sea, tú podrías empezar a añadir aquí inputs constantemente y me imagino que mejoraría el tema, ¿no?
Pero no.
Yo creo que necesita...
Como para generar, le tienes que guiar bastante.
Le tienes que guiar bastante.
Pero, oye, no está mal.
De hecho, vamos a hacer otra cosa.
Porque vamos a hacer que nuestro producto sea más inteligente todavía.
Ya que tenemos otra cosita por ahí.
Allá te ayuda con inglés, pero a cambio quiere un logo.
Ella quiere un logo.
Ya está.
O sea, lo que quiere es un logo.
No programa.
No tienen inteligencia artificial.
No tienen un modelo de programación.
Por desgracia, ¿eh?
Pero bueno, me imagino que sea cuestión de tiempo.
Pero ya habéis visto.
Mira, fix my English.
Joder, no está mal.
Hay un montón de...
Hay un montón de productos y tal que hacen estas cosas.
Y a ver, a lo mejor no es el más avanzado, pero lo hemos hecho nosotros y hemos hecho un montón.
Pero vamos a hacer otra cosa.
Vamos a hacer otra cosa.
Porque voy a poner por aquí.
A ver, ¿qué hemos hecho aquí?
Vale, tenemos esto por aquí.
Fix.
Fix it.
Vamos a poner.
Fix it.
Vamos a poner aquí el fix my English este.
Fix my English.
Vamos a hacer otra cosa.
Porque se pueden hacer más cosas, amigos.
Por ejemplo, la gente...
Para que veáis la de posibilidades que tenéis.
La gente de coherence, si miramos la documentación, vais a ver que tienen un montón de APIs que podéis hacer, ¿vale?
Para clasificar toxicidad, sentimiento de análisis, poder hacer sumarios.
Pero tienen una API también que puede ser interesante.
O sea, que también utilicéis más de una.
Por ejemplo, hay una aquí que tiene la de tech language.
Mira, imagínate.
Esta está muy interesante.
Porque dices, ostras, vamos a hacer...
Ah, mira, JavaScript.
Ah, con Axios.
Con Axios.
Ah, pues mira, no está mal.
Con Axios, al menos.
Algo es algo.
Estaría bien que pusiese ahí con Fetch.
Oye, pero está muy chula, ¿eh?
La documentación.
Porque fijaos que tiene aquí un montón de ejemplos.
Python, Node, Go, Shell, JavaScript.
O sea, y son copiar y pegar.
Muy bien, ¿eh?
O sea, me gustan muchas documentaciones.
Y me gustan mucho las documentaciones que te ponen el ejemplo con tu clave.
Esto es la clave.
De verdad.
Sé que suena redundante.
Pero, de verdad, es genial ir a una documentación y que el ejemplo que tienes aquí sea tu clave.
Que lo copias, lo pegas y ya está.
O sea, me encanta.
Las limitaciones de Cohear son que puedes hacer mil llamadas al minuto.
Mil llamadas al minuto.
Joder, que es bastante.
Y que no lo puedes utilizar para un producto que esté en producción ni que sea comercial.
Ahí ya tendrías que pagar, ¿eh?
Ah, cien llamadas.
Perdón, he dicho mil, pero son cien.
Joder, pero cien llamadas está de lujo igualmente, ¿eh?
Está increíble.
Está brutal las cosas como son.
Eh, sí, sí.
Y le das aquí al try it y te lo hace.
Me parece muy chulo.
Mira, aquí te doy los resultados.
Está genial.
Pero, fijaos en una cosa que podríamos hacer en un momento para mejorar la experiencia del usuario.
Mira, aquí tenemos ya...
Mira, voy a quitar todo esto.
Teníamos aquí el fix my English.
Pues podemos hacer aquí function check, check language, check is English, ¿no?
Pasamos el input y esto lo que podemos hacer es utilizar este.
Tienes aquí este endpoint que también es un post.
Entonces, cohere const, cohere api detect language URL.
Ya tendríamos esto.
Vamos a quitar esto.
Vamos a copiarnos todo esto.
Bueno, de hecho es más fácil.
Me da la sensación que es más fácil, ¿no?
Aquí, ¿qué campo necesita?
Aquí solo necesita los textos.
Pero...
Ah, claro.
Le tenemos que pasar los textos.
Vale, fácil, fácil.
Tendríamos los textos que son un array, ¿no?
Y entonces aquí le vamos a pasar el input.
Eh, ya está.
O sea, no hay que pasarle nada.
Data, text y le paso, digamos, el...
Y esto lo que nos va a decir es realmente si es inglés o no es inglés.
Vale.
Pues fácilmente nos vamos aquí.
Hacemos este fetch igual.
Eh, con el viewer token, application, el cohere version.
Veo que no es necesario.
Vamos a poner el accept.
Por si acaso, application.json.
Eh, ta, ta, ta.
Headers method.
Aquí cambiamos el cohere por el api detect language.
URL.
Aquí ya tendríamos la respuesta.
Lo que tendríamos que hacer en la respuesta es mirar los resultados.
Aquí tendríamos results.
Y en los results tendríamos que mirar que el language, el language code del primer resultado, vamos a hacerlo así, ¿vale?
Eh, que sea inglés.
Entonces, ¿qué podemos hacer con esto?
Lo que podríamos hacer, creo que aquí, eh, hostia, lo que pasa es que esto nos va a complicar un poco el asunto de este textarea, que lo deberíamos pasar a un...
Debería estar en un componente de Svel.
Pero venga, vamos a hacerlo.
Svel, eh, imp, textarea.
O sea, lo que vamos a hacer es que el usuario no pueda, no pueda enviar un texto que no sea inglés, por ejemplo.
Vamos a hacer este label, no es muy útil en este caso.
Lo vamos a quitar, porque tampoco nos añade mucha cosa.
Este textarea, vamos a ponerlo aquí.
Vamos a poner aquí el script, ¿vale?
Vamos a hacer algo parecido.
Vamos a separar esto.
Es que me pongo un poco nervioso que esté todo tan junto, ¿sabes?
La clase lo tengo que aceptar, porque no hay otra forma, pero al menos esto sí, ¿no?
Vale, entonces, lo que podemos hacer es que cuando cambie on change, me parece, on input, on input, pero ¿por qué no me hace el autocomplete?
¿El on input este existe?
Bueno, vamos a entender que sí.
Handle input.
Ah, y es que he puesto astro.
Y esto es Svel.
Por eso no me estaba pillando el autocomplete.
Sí, ya está.
On change, ¿vale?
Handle change.
Y vamos...
Ay, ¿qué podríamos...?
Mira, es que podemos hacer en un momento un estado global y todo.
Podemos hacer en un momento un estado global.
Quiero algo de traducciones.
Creo que no tiene traducciones como tal este.
Creo que no tiene traducciones, pero igualmente.
¿Pero esa apisodos sirve para los traductores?
No, si ya hemos visto antes, Nicolás, que hay un montón de cosas.
A ver, mirad la documentación también, ¿no?
O sea, mira, tenéis para detectar lenguajes, pero es que también tenéis para clasificar textos.
Podéis hacer una predicción de etiquetas de textos.
Podéis hacer también para generar texto.
Generar, que no es traducciones, para clasificar, para hacer sumarios.
Al final, con texto puede hacer lo que os dé la gana.
Y estas son todas las apis que tenéis y tenéis un montón de ejemplos.
Tenéis aquí, por ejemplo, en el playground ya tenéis algunos ejemplos.
Pero incluso en la página principal también tenéis más ejemplos.
Porque pone ejemplos.
Mira, pones aquí ejemplo.
Extraer, por ejemplo, puedes crear hashtags.
Puedes hacer lo que quieras.
Mira, aquí con post te genera el hashtag de lo que hayas puesto aquí.
Por ejemplo, post JavaScript.
JavaScript is the best programming language in the world.
¿Vale?
Y a ver ahora.
Cuando le des a generar, pues esto, mira, JavaScript.
Ha detectado que este post va de JavaScript.
Pues te pone el hashtag.
O sea, tienes un montón de posibilidades y eso depende del prompt.
El prompt es la clave.
O sea, yo creo que lo más importante al final.
Gente, si llegan tarde, ponen a perfil de Twitch de mí, abrir el mismo vídeo y retroceder.
Sí, ¿no?
Que a veces viene la gente como un elefante a cacharrería.
Acabo de llegar, ¿podemos empezar de nuevo?
No, le puedes dar para atrás al vídeo y ya está.
Vale, pues podemos hacer un store.
¿Sería buena opción usar la librería CLSX para tener en líneas diferentes las clases cara pensativa?
Sí, sí que lo podrías hacer.
De hecho, estaría bien.
Tendría sentido.
O sea, que lo puedes hacer sin problemas.
A ver, esto al final lo puedes separar como quieras.
Entonces, en este caso, tenerlo separado en líneas por tenerlo en sí niñas tampoco es muy útil.
También puedes utilizar el work grab y ya está y te lo separa en líneas visualmente.
De hecho, ahora está.
Pues hace que sea más pequeño el work grab y ya está.
Pero si fuese que es condicional, entonces sí que puede tener sentido.
Entonces sí que puede tener sentido.
Vale, vamos a crear aquí una store.
No sé si funcionará la store.
Yo creo que sí.
Vamos a hacer import writeable from SvelteStore.
Esto es para crear un estado global.
Export const input is valid input.
Vamos a poner writeable.
Vamos a poner false.
Vale, y ahora lo bueno de esto es que lo que podemos hacer aquí es importar is valid input de la store.
Y cuando cambiemos, vamos.
Tú, tú, tú, handle.
Ay, ¿cómo era esto?
Bueno, no pasa nada.
Porque aquí tenemos el evento, ¿no?
Const value et target.
Lo que podemos hacer es, bueno, esta podría ser una.
Esta podría ser la primera, ¿eh?
Is valid.
Esta podría ser, un primer check podría ser este, ¿no?
Si no es valid, pues ya directamente le ponemos is valid input y seteamos a false, ¿vale?
Pero si es más grande el valor de la textarea de 0,
is valid, vale.
Lo que podemos hacer es hacer el check que habíamos hecho de inteligencia artificial.
Check in English.
Check is English.
¿Vale?
Importamos el check is English.
Services.
Y aquí vamos a tener is English.
Con el await.
Y aquí deberíamos saber ya si nuestro idioma es inglés o no es inglés.
Entonces, podemos is valid input.
Set is English.
Si no es English, no es válido.
Y ya está.
Y este is valid input lo podemos utilizar también aquí.
Podemos importar aquí el import.
Is valid input.
Y el is valid input, ¿cómo era esto?
Porque se podía uno suscribir.
Ah, no me acuerdo cómo es.
A ver.
Es que me acuerdo del subscriber, pero...
A ver, un momento.
¿Cómo eran las suscripciones automáticas?
¿Era con el dólar, pero era tan fácil como utilizar el dólar?
Creo que sí.
Vamos a ver esto.
Mira.
Is promised, no sé qué.
Fix it.
Vale, si no tenemos promesa.
Pues esto vamos a poner lo que esté disabled.
Creo que es así.
No.
No le gusta.
Ah, porque esto es aquí.
Y esto es así.
¿Vale?
Esto básicamente es que esto es una store.
La store es un estado global en Svelte.
Y entonces lo que estamos haciendo es que podamos escribirla.
En el textarea, cada vez que escribimos, vamos a ver si...
Aquí vamos a tener que poner un return también.
Vamos a poner aquí un return.
Para evitar que haga la llamada en el caso de que no sea válido anteriormente.
Entonces, aquí lo que hacemos es is valid input punto set.
Le cambiamos el valor de this store, que es una especie de estado global.
Y si no, si es válido en este punto, vamos a ver si lo que ha escrito el usuario es inglés.
Si no es inglés, pues todavía se lo dejamos como que no pueda darle al submit.
Luego, en el button, vamos a ir mirando el valor de is valid input.
Y para suscribirnos a este valor, tenemos que utilizar el dólar.
El dólar es una cosa que también se utiliza en quick, porque es como suscripción.
Es como observar este valor.
Y lo que decimos es que vamos a poner que esté desactivado si el valor del is input es false.
Vamos a ver si esto ha funcionado.
Esta es la explicación, pero todavía no sé si ha funcionado.
Por cierto, veo aquí que le falta un poco de separación.
Vamos a ponerle al text area un poquito de separación, porque no está separado el botón.
Bueno, no está separado el botón porque no quiere.
Vamos a ver aquí.
Ah, amigo.
Text area.
Ponemos client visible.
Cuando esté visible.
Esto por un lado.
Y aquí vamos a poner deep, class, flex, flex call, gap y para separar los dos elementos.
A la hora de separar elementos, lo mejor es utilizar el gap.
¿Ves?
Gap.
Ya está.
Entonces, vamos a ver.
Si yo empiezo ahora a hablar en español, digo hola.
Vale.
Lo que pasa es que ni siquiera está haciendo la llamada.
Bueno, vamos a ver qué es lo que pasa.
Handle change, on change, console, 8.
Vamos a ver.
Ah, mira, ahora sí que ha puesto el detail language.
Hola.
Creo que el on change no es el que esperaba.
Creo que el on change este no está haciendo input.
A ver.
Ahora sí.
¿Vale?
Ahora sí.
Ahora sí.
Ah, me está diciendo que es inglés.
Ojo.
Hola, es inglés.
La madre que te parió.
¿Cómo que es inglés?
A ver, igual le estoy pasando bien la información, ¿no?
Text, hola.
A ver.
A ver.
Hola, me llamo Paco.
¿Cómo me vas a decir que es inglés eso?
Ah, bueno.
Ahora sí.
Ahora sí.
Ahora sí que me dice Spanish.
Me llega a decir, hola, me llamo Paco.
Que es inglés.
Ya me cago encima.
Directamente, ¿eh?
O sea, hola, me llamo Paco.
Directamente, ¿eh?
Qué bueno.
Qué bueno.
Nada, bueno.
Ha ido detectando.
Lo ha detectado, por ejemplo, aquí.
A ver, carga útil.
Hola, me.
Hola, me.
Todavía lo estaba entendiendo como si fuese inglés.
Hola, me.
A ver, si pongo coche.
Coche.
Coche, ¿qué?
Spanish.
Vale.
O sea, que tarda, ¿no?
Tarda, tarda un poco.
Oh.
A ver esto.
Hola, me llamo Peter.
Hostia.
Spanish, Spanish.
Vale, vale, vale.
Vale.
Vamos a ver.
Das Auto.
Esto es alemán.
Coño.
A ver.
Ich spreche ein bisschen auf Deutsch.
No sé si está bien escrito.
German.
Vale, vale, vale.
Está bien, está bien.
Está bien.
Tiene buena pinta, tiene buena pinta.
El tema es que ya está detectando esto.
Lo malo es que, pese a que lo detecta, no veo que el disable, o sea, no se ve visualmente
el disable.
Entonces, vamos a hacer algo aquí.
Vamos a poner aquí que si, vamos a poner esto como un template string, template string,
esto por aquí, y vamos a poner que si no es valid input, pointer events non, opacity
también, le vamos a poner 25.
Y esto, ¿esto qué?
¿Esto qué?
¿Qué hace?
¿Qué me haces aquí?
Vale, ahora sí.
Vale, ahora no es válido.
Hello.
My name is Miguel.
Vale, ahora entiende que es inglés.
Eliminamos.
Hola, me llamo Paco.
¿Vale?
Está chulo porque además podemos hacer fix it y podríamos ponerle ahí un error, ¿no?
Es decir, ostras, es que podríamos poner aquí, lo podemos poner justo debajo, por ejemplo,
aquí, yo qué sé.
Vamos a poner if.
Tenemos el error este.
is valid input, si no es válido, vamos a poner span, class, color, no, text red, vamos
a poner strong, strong, red, bastante oscurito, y decimos you are not using English.
You are not using English.
¿Vale?
You are not using English.
Bueno, hi.
También es verdad que es muy corto.
Podríamos poner más, claro, podríamos hacerlo más granular, ¿vale?
Pero you are not using English or the text is too short.
Vamos a ponerlo así.
Hi, my name is Miguel.
I do Twitch streams all day, all day.
Do you like it streams?
A ver.
A ver cómo hemos dejado esto.
Fix it.
A ver qué.
La verdad, joder, cómo tarda.
A ver si es que ahora he hecho que pete otra cosa.
He dejado unos seis por ahí.
He dejado unos seis.
Do you like streams?
Ya lo he arreglado.
No me ha arreglado el primero, pero lo he arreglado.
Bueno, podríamos poner un input, un output y todo esto, ¿no?
Pero bueno, ya veis que al menos ahora das auto, ¿ves?
Ya detecta.
Hemos hecho, en un momento hemos hecho, joder, ¿cuánto tardaba hacer un producto de estos antes?
De que te detecte los errores de gramática, de inglés y tal.
A ver, al final se podrían...
Muchas llamadas.
A ver, Juan Pablo, al final puedes poner un debouncer.
Nosotros lo estamos haciendo ahora en un momento.
¿Queréis hacer el debouncer?
Al final es que más da, ¿no?
O sea, ya sabéis que tenéis que hacer el debouncer.
No puedo hacerlo todo, ¿no?
Al final...
Joder, qué pesados todos.
Todo el mundo.
Un debouncer, un debouncer, un debouncer.
A ver, amigos, podéis hacer el debouncer.
Dios mío.
O sea, si acabamos de hacerlo, ¿qué más da?
Si al final lo importante es que lo hagáis vosotros en la hackatón.
Dios mío.
Que...
Hace un debouncer.
No pasa nada que ahora lo hagamos.
Es un ejemplo.
Vosotros lo podéis hacer como...
Os van a cobrar.
Bueno, vosotros hacedlo.
Obviamente.
Si queréis hacer un debouncer...
Es que está dicho, debouncer, debouncer.
A ver, podemos hacer el debouncer.
No pasa nada, amigos.
No pasa nada.
Que estáis sufriendo.
Podéis utilizar, por ejemplo, el jazz debounce.
Está bastante chulo.
No sé si lo conocéis.
Jazz debounce es un método muy fácil en el que lo que podéis hacer es...
Mira.
Te detecta automáticamente para hacer el debouncer.
Un debouncer es para evitar...
Mira, aquí tenéis un ejemplo, además.
A ver.
Mira.
Jazz angus debouncer.
Este es el que más me gusta a mí.
Este de aquí.
Debounce it.
¿Para qué sirve un debouncer?
Básicamente, tú imagínate que estamos haciendo...
Llamando constantemente la misma función.
Que es lo que decía la gente.
Es que está llamando muchas veces a la misma función.
Que tienen toda la razón del mundo.
Pero que no hace falta ver el 800 veces en el chat.
Entonces, aquí tenéis...
El debouncer lo que hace es que tú cada vez que llamas la función,
lo que dices es, ostras, voy a esperar a ver si la llamas otra vez
para evitar volver a hacerlo tantas veces como me llame.
Aquí le decimos, mira, debounce esta función de aquí
de forma que aguante 500 milisegundos.
O sea, que tú llamas tres veces seguidas a esta función
y solo cuando pasen 500 milisegundos lo hace una vez.
¿Por qué?
Porque así lo que está haciendo es aglutinar todas las llamadas
y solo ejecutar una.
En lugar de ejecutarlas todas.
Puedes hacer diferentes estrategias.
Por ejemplo, esta sería la más típica.
El hecho de decir, vale, vamos a hacer que voy a traerme
todas las llamadas que va haciendo y una vez que en la última
hayan pasado 500 milisegundos, entonces lo hago.
Hago la última.
Luego puedes hacer la primera inmediatamente
y luego esperar 500 milisegundos hasta la última.
Luego también lo que puedes hacer, puedes cancelarlas.
Eso también está bastante chulo.
O también lo que puedes hacer es el throttle,
que es un poquito diferente al de bounce.
Es muy parecido, pero también te puede servir para este caso.
O sea, puedes intentar el throttle, puedes hacer algo parecido.
De decir, vamos a hacerlo cada 500 milisegundos
y después cada 500 milisegundos, pues sería lo mismo.
¿Por eso no sería igual que un set timeout?
Bueno, un de bounce lo puedes hacer con un set timeout.
Lo puedes estar trabajando, o sea, podrías hacer tu propio de bounce
con un set timeout por dentro.
Pero no es exactamente lo mismo, obviamente.
No es exactamente un set timeout.
Puedes construir un de bounce con un set timeout.
Eso sí.
Utiliza el set timeout por dentro con aguillo más, efectivamente.
Y lo importante, tanto del throttle como del de bounce,
es que tenéis que guardar la referencia.
O sea, tenéis que utilizar siempre la misma función.
O sea, este de bounce por dentro, lo que tiene es una variable
que guarda cuando se está haciendo la ejecución.
O sea, no podéis hacer una función así sin más.
Tenéis que utilizar la función esta, el fn1,
que es lo que devuelve el de bounce.
Está bastante chulo.
Se utiliza un montón en formularios, en inputs y todo esto.
También, obviamente, en cualquier cosa de vanilla.
Y lo podéis hacer para evitar todas las llamadas,
para que no lo hagan constantemente.
Y ya está.
Entonces, ¿no lo sabías?
Joder, pues esto es bastante chulo.
Ejemplo práctico, con eventos.
Con eventos está bastante chulo.
Con eventos, cualquier evento.
Con inputs, con scrolls.
Todo lo que haga llamadas.
Por ejemplo, cuando estás buscando en un input,
eso lo haces un montón.
Cuando tienes un autocomplete, claro,
para evitar que cada letra sea la que hace la llamada,
lo que haces es un de bounce para evitar esto.
Para evitar que a tu child le dé un ataque.
Sí, sí, les ha dado un ataque.
De bounce.
Miedo, miedo.
De bounce.
Policía.
Policía.
Un de bounce.
Dios, qué bueno.
Pero sí, tenéis razón.
Pero os lo dejo, hombre,
que os animéis a hacer el de bounce,
que está súper bien.
Pero bueno, está chulo, ¿no?
Que hemos hecho ahí nuestro productito,
el FixMyEnglish.
Os voy a subir este proyecto a GitHub
y os comento las reglas,
cómo podéis participar en la hackathon, ¿vale?
Así que, venga, vamos a crear el proyecto.
Vamos a poner aquí...
¿Cómo la...?
¿Ya lo había puesto?
¿Midu?
¿No?
¿Cogió?
No.
Vale, pues lo creamos.
Pensaba que lo había hecho.
Ah, no, había hecho...
Vale.
Midu cohere hackathon, ¿vale?
Ejemplos para usar cohere para la hackathon.
Y os digo también los premios, hombre,
que los premios son importantes, los premios.
Tenemos premios.
Tenemos premios para los cinco primeros.
Para los cinco.
O sea, para los cinco ganadores.
De más a menos.
Vamos a ver.
Vamos a añadir aquí el...
Este...
Esto no aquí.
Esto aquí.
Os dejo también los ejemplos que hemos hecho de CLI,
porque al final tenemos como un montón de ejemplos.
Vamos a ver.
Vale.
Voy a añadir en el gitignor aquí un gitignor para el no modules
y el package log.json.
Vale.
Add all files project.
Vale.
Muy bien.
Os digo una cosa.
Y esto lo digo de corazón, de verdad.
Creo que tengáis en vuestro porfolio una aplicación
que estéis haciendo de inteligencia artificial.
Uno, es súper trending.
Dos, muchas veces hablamos de cómo es tu porfolio,
si es bonito, si es feo.
Pero es que lo más importante es que tengáis proyectos.
De nada importa que sea bonito, que sea feo,
si lo tenéis vacío.
Entonces, que tengáis un proyecto creo que es súper brutal.
Y un proyecto con inteligencia artificial,
por sencillo que sea, por ejemplo, como el que hemos hecho,
a la gente le va a llamar la atención.
Si lo tenéis de código abierto, si la gente lo puede hacer y lo puede utilizar.
Es que la gente va a alucinar.
Se lo enseñáis a cualquier persona.
Y le dices, mira, entra en esta página y puedes poner cualquier texto en inglés
que te lo corrige.
Es que la gente va a alucinar.
Va a alucinar.
Tú no le dices lo que utiliza por detrás.
No lo dices.
Y alucina.
¿Qué va a alucinar?
Mira, es como este.
Que mucha gente me decía, guau, es que esto es brutal.
Mira, había uno que era el de...
¿Cómo era esta página que me decía esto de get...
IA, check code errors.
No sé, alguien me decía, esta página te dice...
Es que no me acuerdo ahora.
En product hand estaba, product hand.
A ver si alguien se acuerda.
Había una página que te decía los errores de tu código.
O, check code errors.
Code reviewer.
Code reviewer, creo que es.
Code reviewer.
Este.
Esta, esta...
O sea, esto es...
Esto, que tiene 406 votos.
Esto, esto ha tardado menos en hacer lo que le hemos hecho hoy.
Ha tardado menos.
Porque esto, lo que está haciendo por detrás, es hacer una llamada a la API.
Tal cual, tal cual.
O sea, tal cual.
Así de claro, ¿eh?
Así de claro.
O sea, lo único que está haciendo es eso.
Es, le pasa aquí código.
Y le está haciendo una llamada a una API.
Ya está.
Está haciendo eso.
O sea, no está haciendo nada más.
Nada más.
Pero, ¿qué pasa?
Que ha sido lo suficientemente creativo.
Y no le ha dicho a nadie que por detrás está utilizando GPT-3.
Pero ya está.
Eso es lo que está haciendo.
De hecho, el día que quieras...
¿Y cómo sabes que lo hace con una API y que no lo está haciendo a la mano?
Porque si quieres, te hago...
En un directo hacemos esta web en menos de dos horas.
Y lo segundo es porque no creo que haya un duende, un duende o un enano gallego o lo que sea,
ahí escondido, haciendo magia, viéndose uno a uno todos los códigos para decirte dónde está el error.
O sea, no creo que lo esté haciendo a mano.
Que llegue, que llegue viendo las peticiones.
Esto está mal, esto está mal.
No, hombre, no.
Lo está haciendo con GPT-3.
Pero es que...
A ver, es que está clarísimo.
Además, porque hasta...
Creo que...
A ver, console.log.
A ver si se veía claramente.
Si es que te lo dice aquí.
Es que te lo dice ahí.
Te dice OpenAI.
Ya te está diciendo exactamente...
Te está diciendo además el servicio que está utilizando.
Ya te lo está diciendo en la boca.
Te está diciendo...
Mira, estoy utilizando OpenAI.
Y es lo mismo de...
O sea, es muy sencillo.
Muy sencillo.
Y esto mismo es lo que hemos hecho nosotros.
Pero claro, si tú no le dices a nadie lo que utiliza detrás, la gente va a alucinar.
¿Sabes?
La gente va a alucinar.
Va a flipar.
Que no me molesto.
Si no estoy molesto.
Anda, que el día que me doy molesto.
Yo no me molesto.
Porque os digo esto, os lo digo así porque me gusta hacerlo con salsa.
Hombre, un poquito de sabor.
Hombre.
¿Le has arruinado la carrera a ese chico?
No.
Si no lo digo con acritud.
No lo digo.
Me parece súper bien lo que ha hecho.
Lo que quiero decir es que tenemos que quitarle magia a la inteligencia artificial porque mucha gente se está perdiendo esto porque se creen que tienen que aprender cosas increíbles, que es muy difícil.
Y no es tan difícil.
Y mira, hoy me dice uno por Instagram.
No voy a ir al directo porque es que, claro, inteligencia artificial me queda muy lejos.
Y le digo, pero ¿no sabes programar?
Y dice, sí, sí, tengo dos años de experiencia.
O sea, y te lo vas a perder de que no eres capaz de hacer una petición a una API.
Es que es así.
O sea, que yo creo que es súper interesante.
Y mucha gente, mucha, mucha gente, a lo mejor, obviamente por desconocimiento, ¿no?
Pero yo creo que vale mucho la pena.
Y que tengáis proyectos así está muy chulo.
Muy chulo.
Vale, ya lo hemos subido.
Vale, ya lo hemos subido.
Entonces, os comento.
Os comento la jacazón, ¿vale?
La jacazón.
A ver, lo ideal es que también se aprendan.
Bueno, pero es que puedes utilizar IA.
Realmente eso no es IA.
Es usar una herramienta de otro.
No estoy de acuerdo, H.
Eso es usar inteligencia artificial.
O sea, eso de decir, eso no es IA, ¿cómo que no es IA?
Porque utilizas la herramienta de otro.
Pero es que eso, incluso la gente de inteligencia artificial utiliza herramientas de otros.
Ese es el típico comentario también un poco de, joder, como que no es lo suficientemente.
Pero es que se pueden hacer cosas increíbles con esto.
Además, vas a ir aprendiendo.
Además, puedes entrenar tus propios modelos.
El entrenar un modelo, al final, ¿qué diferencia con muchas de las cosas que hacen ellos?
La gente de Open IA está utilizando también herramientas de otros para generar sus modelos.
El hecho de minimizar un trabajo porque estás utilizando la herramienta de otro, al final, es un poco también...
No todo, o sea, IA no se trata de crear siempre la inteligencia artificial.
Tú, mira, te pongo un ejemplo muy bueno.
Hay una empresa, una startup, que ganaron un premio de inteligencia artificial que fue su personado y tal,
y no utilizaban inteligencia artificial.
Y lo único que hacían era que cuando tú subías una imagen,
detectaba automáticamente en qué categoría tenías que subir el producto.
O sea, estabas solucionando algo con inteligencia artificial.
Ellos no crearon la inteligencia artificial, pero la entrenaron, obviamente.
Utilizaron herramientas de otros y lo que hicieron es subir un montón de imágenes, miles de imágenes,
y manualmente decían, esto es un coche, esto es fotografía, esto no sé qué.
Y eso ahora, ¿qué aplicación no lo hace?
Si lo hacen todas.
Entonces, yo creo que el que usemos herramientas de otro, al final lo que te hace es ir más rápido o llegar más lejos.
Y que esto a lo mejor puede ser el punto de entrada a que te interese más la inteligencia artificial.
¿Cómo se entrena un modelo?
¿Qué es la temperatura?
¿Cómo podría crear mi pequeña inteligencia artificial con TensorFlow?
Al final es una puerta de entrada.
Y yo creo que es súper interesante.
Entonces, ¿no estamos creando una IA?
No, pero sí que es usar inteligencia artificial.
Y eso no creo que haya ningún tipo de discusión, ¿no?
O sea, creo que podemos estar todos de acuerdo en esto.
Claro, si no, habría que desarrollar cada una de sus librerías.
Tú imagínate que por programar en web utilizo Astro y entonces la gente me dice,
no, esto no es programar web.
Esto es utilizar herramientas de otro.
¡Pum!
Entonces, ¿qué tipo de aplicaciones son válidas?
Vamos a ponerlo en el Ritmi, ¿vale?
Y aprovecho para ponerlo también aquí.
Esto que es lo que teníamos aquí.
Vamos a ponerlo acá.
Os comento las reglas de la hackazón.
Animados todos a participar, hombre, que ya veis que es bastante fácil.
Y os voy a decir también qué es lo que se acepta y cuáles son los premios y tal.
La hackazón empieza hoy.
Punto.
¿Vale?
Empieza hoy.
Ya está.
A partir de ya podéis empezar.
La fecha límite es el 7 de febrero porque el 7 de febrero vamos a ver todos los proyectos
que ha hecho la gente.
Vamos a ver todos los proyectos de inteligencia artificial que haya hecho la gente.
Entonces, preguntas frecuentes, que ya veo que me vais haciendo.
A questions o message.
Message.
A ver.
Mensaje.
A ver si encuentro.
Vale, este.
Preguntas frecuentes.
Tenemos.
¿Se pueden hacer equipos?
¿Se pueden hacer equipos?
¿Se pueden hacer equipos?
Sí.
Pero el premio es a repartir.
Lo habláis entre ustedes.
¿Vale?
Entre la gente del equipo.
¿Qué más?
Puede ser desplegada.
La web debe estar desplegada en algún sitio accesible.
Da igual dónde.
Donde queráis.
¿Vale?
Todos los proyectos en un día no dará tiempo.
Bueno, ya veremos.
Igual, si veo que no me va a dar tiempo, hacemos un filtraje antes y ya está.
Más preguntas que tengáis.
Va.
¿Alguna pregunta más?
Que haya dudas.
En Heroku.
Bueno, si queréis hacerla en Heroku.
Donde queráis.
Que sea accesible por todo el mundo.
Importante.
¿Se puede hacer en Dino?
Se puede hacer con lo que queráis.
¿Se puede hacer en Dino?
Sí.
Se puede hacer en Dino.
No hay problema.
¿Vale?
El único requisito es que tenéis que utilizar la API de Cogier.
¿Podéis utilizar otras APIs?
Sí.
Pero como mínimo tenéis que usar la API de Cogier para el uso central.
O sea, no me vale que utilicéis la API de Cogier para algo muy mínimo.
Pero luego la idea principal sea otra cosa.
¿Es necesario usar TypeScript?
No, hombre.
Eso obvio que no.
¿Se puede reciclar código de otros proyectos?
Sí.
A ver.
Claro.
Sí.
Lo que no se puede es reutilizar el mismo proyecto.
¿Hay mínimo de tamaño o funcionalidad?
¿Hay mínimo mínimo de tamaño o funcionalidad?
Sí.
Como mínimo tiene que usar la API de Cogier y resolver algún problema.
O sea, no vale que hagáis una llamada y ya está.
¿Se puede hacer con Angular?
Se puede hacer con Angular, hombre.
¿Por qué?
¿Tengo que hacerle fork a tu repo?
No.
No hace falta que hagáis un fork del repo.
Podéis hacerlo donde queráis.
Criterios.
¿Qué criterios se siguen para valorar proyectos?
Criterios.
Uno.
Solucionar el problema.
Solucionar un problema.
Dos.
Creatividad.
Vamos a ponerlo en comas.
Solucionar un problema de usuarios.
Creatividad.
Buena presentación.
Y buen código.
¿Vale?
Esos son los cuatro criterios.
Criterios.
Y segunda, Francia.
Como dice Artiles.
Si quiero hacer algo con traducciones, la hago con otra API, ya que Cogier no tiene, pero
puedo utilizar la Cogier para generar el texto aparte de las traducciones.
Lo importante es que Cogier lo puedas utilizar.
O sea, puedes utilizar lo que quieras, pero que Cogier utilice su API, obviamente, que para
eso nos va a pagar los premios.
O sea, que es importante.
¿Puede ser app móvil?
No pasa nada.
¿Puede ser app móvil?
Sí, pero se tiene que poder probar fácil.
Fácil.
Si es muy complicado la app móvil, no la puedo probar fácil, no la voy a poder ver y entonces
la vamos a liar.
Entonces, me tienes que facilitar la vida de que la podamos ver.
¿Cómo se valora el ganador?
Los requisitos.
Vamos a ver.
Vamos a ponerlo esto en negrita.
Vamos a ponerlo en negrita.
Negrita.
Hackatón.
Empieza el 22 de enero.
Vale.
¿Cómo ganar votaciones?
Elegiré a cinco posibles ganadores de la hackazón y la comunidad el 7 de febrero elegirá
a los ganadores.
¿Vale?
Así lo vamos a hacer.
¿Solo consumo de clientes o puede hacer una API?
Puedes hacer lo que te dé la gana.
Tiene que ser responsive.
Hombre, buena presentación.
Buena presentación.
Ya entras si lo querés hacer responsive o no.
¿Que no lo haces responsive?
Bueno, pues no pasa nada.
Los premios.
¿Ya queréis saber los premios?
Ya, pues los premios.
¡A saco!
¡Los premios!
¡Los premios!
Los premios.
¿Queréis los premios?
¿Quién queréis los premios?
Bueno, si no...
¿Tienes requisitos mínimos para poder participar?
Como mínimo...
A ver, cualquier persona puede participar.
Como mínimo, tenéis que hacer, obviamente, tenéis que hacer...
Son cinco finalistas y son cinco premios.
Vamos a tener cinco premios.
¿Para qué?
Pues para que participéis más y que los cinco ninguno se quede sin premio.
¿Vale?
Lo vamos a hacer así porque normalmente era un poco...
Daba un poquito de pena que la gente que había llegado al final no ganaba absolutamente nada.
Entonces me daba un poco de pena.
Vamos a hacer que las cinco personas que quedan finalistas, todas tengan premio.
¿Vale?
Lo vamos a hacer así.
Que es una cosa que no lo habíamos hecho así antes.
Y al menos todos tengan premio.
¿Cuándo eliges los cinco tú?
El 7 de febrero.
El 7 de febrero haremos un Steam donde lo veremos todo y tal.
Es internacional.
Puede participar...
Puede participar...
Es internacional.
Sí.
Puede participar todo el mundo.
¿Vale?
Puede participar todo el mundo.
Bueno.
Entonces os digo los premios.
Los premios.
En el quinto puesto...
El quinto puesto se va a llevar el libro de Descubre Svelte.
Así pues le gusta...
Le da cañita.
En el cuarto se lleva todos los libros de Midudev.
¿Vale?
Todos los libros.
Todos los libros que tengo ahora mismo se los damos.
Todos.
Punto.
Así que todos los libros de Midudev que tengamos disponibles en ese momento.
Obviamente, ¿eh?
No los del futuro.
O sea, tendríamos...
Aquí tenemos un libro de tal...
Tres...
Los tres libros...
O sea, tres libros.
Tres libros de Midudev.
¿Vale?
¿Vale?
¿Hasta aquí bien?
Y si ya los tenéis, los podéis regalar, ¿eh?
O sea, al menos para que se lleve algo.
Lo que hay.
Y si ya tenéis los libros, los regalas, Chavimón.
A ver, los regalas y ya está.
Tercer puesto.
25 euros en Redbubble.
Redbubble.
No sé si conocéis Redbubble, pero además mi idea es intentar tener una tienda aquí algún día.
A ver si la consigo.
De hecho, la estudié haciendo pruebas.
Mira, Midudev.
Ya podéis llevar el logo de Midudev.
Ya podéis llevar el logo de Midudev.
Pues os podéis comprar el logo de Midudev.
¿Qué más tenía?
Iba a hacer algunas cosas con Adven.js, pero mira, tenéis ya stickers.
Voy a empezar a poner cositas.
Entonces, pues podéis poner...
Ya pondré más cosas.
Pero bueno, que también si no, podéis buscar otra cosa, ¿eh?
No tenéis que utilizar lo de Midudev.
Podéis comprar la pegatina de JavaScript, la Node.js.
Podéis comprar camisetas.
Podéis comprar lo que queráis.
Entonces, además hacen envíos a todo el mundo y están bastante chulas las camisetas.
Tendríais 25 euros.
Ahí cada uno, pues mira, la de GitHub está bastante chula.
Mira, la de GitHub no está mal.
Así que se lleva el tercero, se lleva 25 dólares en Redbubble.
Para que se lo gasten lo que quiera, ¿vale?
El cuarto y quinto lugar es mejor que los 25 dólares.
Bueno, pero esto te lo gastas lo que quieras y esto al final ya te viene hecho.
Bueno, segundo puesto.
50 euros en Redbubble.
50 euros.
Todavía más.
O sea, para que tengas ahí 50 auracos.
Y ahí puedes invitar a camisetas.
Te puedes comprar, vamos, un armario entero si quieres, ¿vale?
Primer puesto.
Primer puesto.
Primer puesto.
Un Kikron.
¿Vale?
Vamos a hacer el Kikron.
Esta vez vais a tener dos opciones.
Dos opciones, ¿vale?
Vais a tener la posibilidad de gastar y comprar el Kikron que queréis hasta 100 dólares.
Hasta 100 dólares.
Que queréis el que yo tengo.
Por ejemplo, Low Profile.
No me acuerdo ahora cuál es.
Creo que es el K2, pero no lo encuentro.
Si es un Low Profile, ¿por qué no aparece por aquí?
Este, por ejemplo, está chulísimo.
Mira, 94.
Mira, vamos a poner 104 dólares.
104 dólares sin gastos de envío.
O sea, los gastos de envío ya, dependiendo de dónde sea.
Este está súper chulo.
Este está increíble.
Es que este, estoy que me lo compro yo y todo.
¿Me lo compro ahora o qué?
¡Buah!
Que me encanta, Dios mío.
Me encanta.
Es súper bonito.
Me encanta.
Bueno, pues esto.
Lo malo es que...
Bueno, estaban de vacaciones,
pero ya lo harán.
Es que como son chinos,
pues están de vacaciones porque es el año nuevo.
Muy bonito, ¿eh?
Este me encanta, ¿eh?
De verdad que me encanta.
A ver, vamos a verlo un momento.
Vamos a verlo un momento.
¡Uf!
Me encanta.
Pues nada, el premio para mí.
No, qué broma, qué broma.
Es broma.
Pero que esté disponible,
tiene que estar disponible, eso sí.
Entonces, primer premio.
Primer premio.
Kikron hasta...
Hostia, he puesto Kikron así raro.
Kikron hasta 104 dólares.
Hasta 104 dólares, ¿vale?
Para que os podáis comprar este,
que me parece increíble.
Ah, mira, es que...
Bueno, pero es que mejor esto.
Hot is cap-swapable, que mata.
Ya lo dejamos así.
Y todos los colores funcionan.
104 dólares.
104 dólares o...
104 dólares en Redbubble.
Bueno, 104...
He puesto euros, pero...
Vamos a poner euros también.
Si sois de fuera de España o de Europa,
pues lo haremos con dólares, ¿vale?
Pero ahí lo tenéis.
Hay que redondear a 200.
No, hombre, no me salen las cuentas.
O sea, entonces ya sí que no gano dinero.
Entonces, estos son los premios, amigos, ¿vale?
El teclado, el pedazo de keyboard...
O 104 euros en Redbubble, ¿por qué?
Porque Kikron, por desgracia, no envía a todos los sitios.
No envía a todos los sitios.
Entonces, ¿qué pasa?
Que si no envía al país del que eres,
pues te tendrás que quedar con el premio de Redbubble.
No puedo hacer nada para hacerte llegar el Kikron,
porque no lo envían a tu país.
A veces, por desgracia, por ejemplo, Canarias,
pues no lo envían.
¿Qué no puede ser?
Pues mira, pues hacemos esto.
Que te quedas los 104 en Redbubble.
Hay gente que me dice, lo quiero en PayPal.
Si lo queréis en PayPal, lo puedo poner en PayPal.
Si lo queréis en PayPal, hay que descontar los 104...
Podemos hacer 104 en PayPal.
PayPal serían los 104 menos gastos, ¿vale?
O sea, los 104 menos gastos.
Porque dependiendo de dónde dame el país y tal,
aquí no se puede hacer nada.
O en Sponsors.
Bueno, si en Sponsors no me gastan...
Amidu, patrocino otros 50 dólares estadounidenses para el primer lugar.
Cara sonriente.
¿Y eso, Seriyu?
¿Cómo es eso?
¿Cómo es eso?
¿Cómo es eso?
Bueno, regala...
¿Cuántos son 50 dólares?
Pues regalas tantas subs como eso y le sumamos 50 dólares al primero.
Seriyu.
Si regalas tantas suscripciones como son 50 dólares que no tengo ni idea de qué país eres y cuánto te sale,
los añadimos.
Kikron no tiene aduanas.
Yo de aduanas ya no me puedo...
Ahí ya sí que no puedo hacer nada de aduanas.
O sea, porque es complicado.
Normalmente no lo pillan por aduanas, la verdad.
Normalmente no hacen.
Que son 20 subs.
Venga, pues 25 subs y le añadimos 50 dólares.
O 50.000 bits, que es que no sé cuánto es.
Momentos épicos de la escena de Twitch, ya te digo.
Pero bueno, estos son los...
Estos son los...
Los premios, ¿vale?
Estos son los premios.
Aquí tendríamos la plata.
Aquí tenemos la plata.
50.
El oro.
¿Qué?
El oro.
Pa, pa, pa.
Yo pensaba que era mentira, ¿eh?
Seriyu.
Yo pensaba que era mentira.
Digo, mira, está vacilando.
Pero no, no.
El tío...
Muy bien, Seriyu.
Tus deseos son órdenes.
Tus deseos son órdenes.
Vamos a redondearlo.
150, va.
150.
150.
Dale las gracias al bueno de Seriyu.
Que se lo ha trabajado bien.
Y nos ha pegado estas 25 suscripciones, ¿eh?
Ahí lo tengo.
150.
Ya lo tenemos ahí redondeado.
154, miro.
Qué ratas sois.
Qué ratas.
Que he puesto los cuatro...
Qué ratas sois, Dios mío.
Sois ratas.
Sois ratas.
Hasta...
Mira, voy a poner esto.
Voy a poner esto, mira.
Voy a poner esto.
El primero, teclado o...
O rata.
Oye, Seriyu.
Seriguyu.
Muchas gracias, hombre, por las subs.
Muchas gracias.
Y muchas gracias por las suscripciones.
Y gracias por participar.
Muchas gracias porque, joder, me parece muy bonito que hayas tenido este pedazo de detalle.
Redondeado a 155.
Venga, 155.
El que me diga que lo redondeé a 160 se lleva un ban.
Vale.
MJ Galay.
Venga.
MJ Galay.
MJ Galay.
El primero.
Pam.
Es broma.
Dice, no, no.
Bueno, bueno.
Sabía.
Sabía que lo ibas a pedir de redondearlo.
Que sabía.
Bueno, pero, joder.
No está mal, ¿eh?
No está mal.
No está mal.
Pues, estos son los premios.
Ahora, ¿cómo funciona la cosa?
Aparte de todo lo que os he comentado.
El...
Mira, aquí vamos a poner books.
Hay libros.
Para que aparezcan los tres libros.
Y aquí un libro.
¿Vale?
Para que aparezca solo uno.
Hostia, Seriyu.
Muchas gracias, hombre.
Por esas dos subs.
Qué grande.
Qué crack.
Vale.
Pues, ahí tenéis, ¿vale?
Toda la info.
Yo regalo subs en páginas.
No.
Bueno.
Entonces.
Máximo de equipo.
Me da igual.
Como si queréis ser 58 personas.
Para mí, me da igual.
Ahora, si sois 58 personas, tenéis que tener en cuenta que lo vais a tener que dividir.
O sea, yo ahí no me meto.
Yo, hasta que no haya una información clara del equipo que me diga qué hay que hacer, yo no hago nada.
¿Vale?
O sea, que tened en cuenta esto.
Súper importante.
¿Vale?
Súper importante.
Una tecla cada uno.
Ya te digo.
Bueno.
Vamos a ponerle aquí.
Gracias a Seriyu Ugu.
Que ha patrocinado.
Patrocinado.
50 dólares de premio para la primera posición.
Que no se diga.
Ah, ahí lo tenemos.
¿Cómo divide un teclado en 58 personas?
Ahí ya os digo que cada uno se meta.
Por ejemplo, podéis llegar al acuerdo de quedarnos con lo de Redbubble.
O hacerlo de PayPal.
Ahí cada uno lo que queráis.
¿Vale?
Yo ahí no me meto.
No me meto porque si me tengo que meter en eso ya, es locurón.
¿Qué patrocinó?
No, 46.
No, patrocinó 50.
No, 50, hombre.
No, 46 dólares.
50, 50.
A ver, más cosas importantes.
Tenéis el canal en Discord, ¿vale?
En el canal en Discord podéis aquí, podéis hablar, podéis comentar, podéis decir, podéis...
Oye, necesito ayuda con esto.
Ay, esto es otro.
Perdón.
¿Dónde me he metido?
Este no es.
Es...
Está aquí.
En este.
Code here, jacazón.
Podéis preguntar, podéis pedir equipo.
Mira, Frank ya está buscando equipo.
Podéis compartir, podéis preguntar, podéis hacer lo que sea, ¿vale?
Yo recomiendo que vayáis pasando ahí seguramente vuestros proyectos.
No sé, que participéis, que al final os lo vais a pasar súper bien.
Ahora, importante.
Todo lo que tenéis que hacer para poder participar,
todo lo que tenéis que hacer para participar,
es, os registráis en Code here utilizando esta URL.
Si utilizáis esta URL, a mí me ayudáis,
porque así saben justamente que...
Ah, sí, crea un hilo.
Crea un hilo, Feral, ¿cierto?
Crea un hilo.
Sí, sí.
Entonces, os tenéis que registrar por esta URL,
porque así sabe exactamente que han venido a través de la comunidad
y así llama la atención y le gusta, ¿vale?
Y dicen, ay, ¿cuánta gente se ha añadido?
Luego, tenéis que crear un pequeño producto que use la API de Code here.
Puede ser lo que queráis, ¿vale?
Os podéis basar en lo que yo he hecho.
Podéis hacer algo desde cero.
Podéis basar en un producto que exista.
No tiene que ser una idea original.
Puede ser copiaros otra idea que haya por ahí.
Luego, tenéis que subir vuestro código a GitHub.
Tenéis que hacer que sea accesible, o sea, que esté público,
que yo lo pueda ver,
y que tenga la etiqueta,
pues todas las etiquetas,
midudev.cohere2023.
¿Por qué?
Porque si yo hago así GitHub y pongo esto,
pues va a ser súper fácil que yo encuentre todos los proyectos.
E incluso también puede ir bien para que la gente,
mira, lo hacéis así aquí en Topics,
hacéis así y ya está.
Añadir a la etiqueta.
Tan fácil como eso.
Añadir la etiqueta y así ahora cuando le demos,
podremos ver en GitHub fácilmente todos los proyectos.
Esto al final está chulo porque cualquier persona de la comunidad
podrá buscar vuestros proyectos y tal.
Eso sí, oye, que tienes miedo que te copien la idea y tal.
Lo importante es que tu proyecto esté disponible el día de entrega.
No hace falta que esté mientras lo estás desarrollando, ¿vale?
Eso no es importante.
Lo que es importante es que el día que es el 7 de febrero
esté disponible tu repositorio.
Ese día tu código tiene que estar en GitHub
y tiene que ser accesible.
No tiene que estar accesible siempre,
pero el 7 de febrero tiene que estar.
Y la app web debe estar desplegada
en algún sitio también accesible.
Voy a poner que sea pública.
Que sea público y que tengas la etiqueta
para el 7 de febrero.
¿Vale?
Y luego enviaré...
Vamos a poner 5.
Y enviar el repositorio de Playboy en este canal...
No, en el canal de Discord,
en el hilo de Discord antes de la fecha límite.
El hilo de Discord, supongo que ya está haciendo el bueno de Feral,
que el tío no para,
no sé si se habrá hecho arriba,
lo habrá hecho abajo.
Bueno, luego lo veremos,
pero lo que hacemos es que ahí pongáis todos los...
No os preocupéis, que aparecerá por ahí
y yo lo añadiré arriba también para que lo podáis ver.
Que suba a 160, Keiko.
¿Cómo que que suba a 160?
¿Se puede participar varias veces,
crear varios productos, pero sean la misma persona?
No, no, no.
Vamos a intentar limitarlo.
Vamos a hacer...
Vamos a hacer que...
Que solo hagáis uno
y que lo hagáis lo mejor posible.
Regala el Hogwarts Legacy como primer premio.
No, hombre, pero si hay gente que a lo mejor no tiene consola o no le interesa.
Claro que no, no tiene sentido, hombre.
¿Qué se cuece por aquí?
Pues están haciendo una hackathon que puede ganar hasta 150 euros.
Así que...
Vale, vamos a guardar esto en el Ritmi,
para que lo tengas por ahí.
Vale, la hackathon,
hackathon de enero del 2023.
Lo bueno es que si las hackathons van triunfando,
pues iremos haciendo cada vez más.
Así que...
Hackathon, enero, 2023.
Coher,
inteligencia artificial.
Esto por aquí.
Y...
¿Dónde está?
Ah, esto por acá.
Vale.
Lo voy a poner aquí.
Vamos a poner aquí también.
Registro para usar la API
de la hackathon.
Vamos a poner esto por acá.
Comitamos los cambios.
Y ahora me llevo estos cambios también para que lo tengamos
en Discord, ¿vale?
Discord.
Vámonos para acá.
Y aquí...
Esto por aquí.
Guardar.
Lo malo es que esto hay que formatearlo mejor,
porque aquí no...
No sale bien.
No sale bien.
Tututú.
Pero bueno.
Ya tenéis ahí.
Ya tenéis ahí.
Esto no hace falta.
Kikron.
Los premios.
Gracias a...
A este hombre.
Gracias a...
A Coher también.
Y...
Pues ya está.
Ya lo tenéis por aquí.
¿Vale?
Ya lo tenéis por aquí.
¿Vale?
Kikron.
He puesto Kikrone.
Bueno.
Kikron.
Vale.
Perdón.
Luego lo arreglamos.
Vale.
Pues ya tenéis todo lo que necesitáis para la hackathon, amigos.
Dadle cañita.
Moved las manitas.
Haced el proyecto.
Tenéis dos semanas para crear un producto que utilice inteligencia artificial
con los servicios de Coher.
Muchas gracias a Coher por patrocinarnos la hackathon.
Que gracias a ellos vamos a tener premios.
Y unos premios bastante chulos.
Gracias también a...
A Dartile.
Gracias por regalar una sub.
A Seri Uyugu.
Porque ha regalado un montón de suscripciones.
Y ha hecho que tengamos 150 euros para el primer premio.
Pero ya sabéis que tenéis un montón de premios para el resto.
Y mañana...
Y mañana...