Imagínate una inteligencia artificial con la que tú pudieras comunicarte con lenguaje natural, con el que normalmente utilizas,
para pedirle que te programe cualquier cosa que se te ocurra. Que por ejemplo tú puedes decirle quiero pues
un cuadrado en mitad de la pantalla. Le das a ejecutar y se genera el código necesario pues para ver un cuadrado en mitad de la pantalla.
Quiero que rote.
Y que el cuadrado pues rote. Que por ejemplo cuando clique el cuadrado, este cambie de color y gire aleatoriamente.
Genera el código y cuando clicamos
efectivamente pues esto funciona. No estamos teniendo que programar,
simplemente tenemos que saber cómo darle las
instrucciones a este sistema para que nos genere el código de aquello que estamos pidiendo.
Esta inteligencia artificial, como está viendo, pues existe, se llama Codex y es el cerebro que está por ejemplo tras productos como
GitHub Copilot, del cual ya hemos hablado aquí en el canal. Y claro, siendo que esta inteligencia artificial
existe y que la semana pasada estuvimos hablando del nuevo sistema de generación de código que es incluso más potente que este, el de
Alpha Code, pues se me ocurrió hacer el siguiente reto. Un reto que ya intenté hace un par de semanas en Twitch y que consiste en utilizar
este sistema para intentar programar el famosísimo juego del Wordle. El famoso juego de los cuadraditos amarillos y verdes.
Seguramente te sonará, si no has vivido en una cueva en las últimas semanas, pues conocerás el famoso juego que consiste en intentar
reconocer cuál es la palabra de cinco letras que se esconde
detrás de estos cuadraditos. Donde un color amarillo pues indicará que esa letra está en la palabra, pero no en esa posición y el
color verde te indicará que has acertado tanto la letra como la posición.
Y programar este juego no es complicado. Es una cosa sencilla que cualquiera en una tarde podría programar. De hecho, así lo hizo el creador.
Pero en nuestro caso el reto es saber si podemos encontrar las instrucciones necesarias para poder generar
pues una versión funcional del Wordle que podamos utilizar y jugar con ella. De hecho lo que yo voy a enseñar ahora es el código fuente
que he conseguido desarrollar tras un buen rato jugando con este sistema. Vamos a verlo. Lo primero que necesitamos implementar es el tablero.
Necesitamos una tabla de seis filas por cinco columnas. Esto sería pues...
Crea una tabla de seis filas y cinco columnas. Le damos a ejecutar y vemos cómo se va generando el código a la derecha y como
aquí nos ha generado pues la tabla que le hemos pedido. Cinco columnas y seis filas, efectivamente.
Vamos a darle la apariencia del juego. Vamos a decirle que las celdas son grises y son cuadradas de tamaño 80 por 80.
General código y ahí lo tenemos. Vale, creo que esto es demasiado grande. Las celdas son de mitad de tamaño.
Vamos a ver si lo entiende. Mitad de tamaño, efectivamente. Fijaos cómo ha pasado de 80 por 80 a 40 por 40.
He entendido el concepto mitad de tamaño.
Vamos a quitarle el borde a la tabla. No hay borde. Vamos a quitarle el borde a las celdas.
Ahí lo tenemos. Vamos a darle también formato al texto. El texto está centrado, es blanco, en el vética, en negrita.
Está perfecto. De hecho creo que la proporción de los cuadrados no es exactamente cuadrada y esto creo que va a ser un problema con los
márgenes o con el padding. Las celdas no tienen padding. Ahí, efectivamente. Ahí está. Vale, ahora sí son perfectamente cuadradas.
Ya se empieza a parecer a un tablero del Wordle. Vamos a quitarle el contenido a las celdas ahora. Vale.
Y ahora vamos a crear una especie de interfaz para poder jugar a las celdas.
Vamos a quitarle el contenido a las celdas ahora. Vale. Y ahora vamos a crear una especie de interfaz para poder jugar al juego.
No voy a hacer el típico teclado que aparece en la versión de móvil, pero vamos a intentar hacer algo pues similar.
Por ejemplo, añade un campo de texto bajo la tabla. Le damos y lo genera. Perfecto. Además en español nos ha puesto escribe algo.
Vamos a darle un poco de formato. Vamos a reducir el tamaño. Reduce el ancho del campo de texto.
Ahí es. Bueno, nos hemos pasado el doble. Ahí está. Perfecto. Genial. Vale. Vamos a intentar hacer ahora algo un poco más fancy.
Vamos a pedirle que nos genere un botón, pero que tenga el carácter del tick. Vale, del típico check es un carácter unicode.
Vamos a ver si lo consigue entender. Y aquí también voy a aprovechar para añadirle un ID, un identificador a este botón que sé que luego me va a ser útil.
Y esto es interesante porque podríamos bien decir que Codex es una herramienta que no nos obliga a saber programar.
Pero la realidad es que yo todavía me sigo basando en mi conocimiento de programación para poder llegar a una solución o poder guiar a Codex por el camino correcto.
Sé que este identificador nos va a ser útil, así que lo voy a poner al botón que sea. Validar. Lo ejecutamos.
Vamos a ver si lo hace. Añade el botón. Perfecto. Justamente.
Y podemos fijarnos que efectivamente el botón tiene un ID que sería validar que es justamente lo que le hemos pedido.
Vamos a crear otro botón al lado que en este caso nos sirva para poder eliminar y que por tanto tenga el símbolo de la cruz.
También le vamos a poner el identificador y vamos a ver qué sale.
Vamos a ver. Y efectivamente ahí lo tenemos. Tenemos los dos botones que necesitamos.
Añadimos un poco de margen a los botones y ya tendríamos a nuestro tablero del Wordel donde podríamos escribir aquí diferentes textos.
Voy a centrar el texto. Centrar el texto de la caja. Vamos a ver si lo hace. Efectivamente. Perfecto.
O sea, todos estos son comandos que por lo general yo tendría que ir a buscar a Google y automáticamente aquí lo puedo expresar con lenguaje natural y los tengo a mano.
Es increíble. Vamos a poner también que no se pueden escribir más de cinco caracteres, que es lo normal con este juego.
Vamos a probar. Y efectivamente ahora ya no me deja escribir más de cinco.
Vale, aquí la cosa se complica un poco. Aquí lo que tenemos que hacer ahora es intentar que aquel texto que yo estoy escribiendo abajo en el campo de texto se traslade a cada una de las celdas de la tabla.
Y para esto lo primero que voy a hacer ya pensando a posteriori va a ser crear una variable que me va a venir bien que identifique a qué fila estamos escribiendo.
Esto sería lo típico de crearte una variable dentro del código.
Aquí lo voy a hacer de manera oral con lenguaje natural. Guarda en una variable el índice de la fila.
Le damos y aquí podemos ver efectivamente que nos genera la variable row index igual a 0 sabe que tiene que indexar a 0.
Así que está perfecto. Ojo, ahora le vamos a pedir al sistema que por favor, al escribir en el campo de texto, los caracteres se van a escribir en cada una de las celdas de la fila indicada.
Vamos a ejecutarlo y vamos a ver si funciona. Veo código por aquí que no voy a pararme ni analizar y simplemente vamos a escribir y efectivamente funciona.
Vale, lo interesante ahora será que si nosotros aumentamos la variable de la fila donde estamos escribiendo, pues el sistema debería pasar a la siguiente fila.
Entonces vamos a probarlo. Voy a ponerle que cuando clique el botón Validar, el que hemos identificado antes, aumente dicha variable.
A ver si lo entiende. Le doy a Validar y parece que genera código. No me voy a parar ni a mirarlo.
Le damos a escribir, le damos a Validar, le vuelvo a dar a escribir y parece que no funciona.
Vale, row index aumenta. Esto parece que está bien.
Vale, fijaos que aquí estoy ahora debugging el código. No, repito, no hay que olvidarse de las clases de programación.
Todavía esto es necesario y me estoy dando cuenta que en realidad aquí no está utilizando row index para nada.
Este texto está cogiendo la primera fila y ya está. Entonces vamos a intentar solucionar esto.
Vamos a borrar lo que teníamos creado hasta ahora. Vale, vamos a intentar ser un poco más explícito añadiendo esto antes.
Vale, se seleccionan únicamente las celdas de la fila indicada por la variable y luego el texto como antes.
Vamos a ejecutar a ver si ahora se integra row index. Lo estoy viendo. Vale, lo veo aquí. Vamos a ver si esto sigue funcionando.
Esto funciona. Vamos a añadir la instrucción de antes. Al clicar en el botón Validar aumenta la variable.
Vuelve a hacerlo. Perfecto. Y vamos a probar. Tenemos escrito Reina. Vamos a darle a Validar. Vamos a escribir.
Vale, ahora sí parece que funciona. Le damos a Validar. Tren. Vamos a darle a Validar.
Loco. Vale, funciona. Perfecto. Vamos a falta un detalle de formato.
Vamos a poner que el texto de la caja está en mayúscula.
Vale, y ahora lo tenemos en mayúscula y sigue funcionando todo perfecto.
Ok, me da un poco de esto aquí a ver si lo puedo conseguir. Campo de texto.
Si lo podemos no demasiado. Vale, 150 píxeles.
Voy a ponerle directamente aquí 125 píxeles. A ver si lo entiende. Perfecto.
Vale, voy a decirle 5 píxeles menos. A ver si entiendo las matemáticas. No, esto no lo he pillado.
A ver si resta de 5 píxeles. Esto sí lo he pillado. Vale, perfecto.
Vale, ya tenemos la interfaz. Ya es todo funcional y ahora viene lo complicado realmente que es hacer que esto funcione bien.
Vale, que sea el típico juego de Wordle donde la combinación de colores se activa en función de la palabra secreta que tengamos.
De hecho, lo primero que vamos a hacer va a ser crear esta palabra secreta.
Guarda una variable la palabra secreta.
Y vamos a decir que la palabra secreta es reina. Vale, secret word igual a reina. Perfecto. Se viene. Mirad la instrucción.
A ver, al clicar el botón de validar también se comprobará. Recordemos que el botón de validar ya tenía la acción de pasar a la siguiente fila.
Pues también se comprobará si las letras de la fila seleccionada la fila seleccionada están incluidas en la palabra secreta.
Si están incluidas, la celda se marcará con color amarillo. Vamos a ver esto.
Vale, empieza a generar código. Vemos listeners, vemos cosas. Parece que parece que hay cosas.
Voy a probar con una palabra diferente. Vamos a probar con reino.
Debería de activarse la R, la E, la I, la N en amarillo. Le damos a validar.
He quitado del código la parte donde antes decíamos que cuando clicaramos el botón de validar, pues saltará la siguiente línea,
porque se estaba activando primero eso y luego se estaba haciendo la validación, lo cual era equivocado.
Entonces esa parte la he quitado y ahora sí podemos ver que si ponemos la palabra reino,
pues efectivamente se están marcando y esto sí que sorprende que el sistema haya encontrado la lógica para implementar esto.
Aquellas letras que efectivamente pues están en la palabra secreta.
Vamos a cambiar este color amarillo por un color un poco más atractivo.
Vamos a ir al selector de color y vamos a coger pues un color tal que así.
Vale, voy a coger el código de color en hexadecimal y me lo voy a llevar aquí al sistema.
Realmente lo que vamos a hacer es coger de nuevo toda la instrucción que hemos creado y donde le he dicho amarillo,
pues lo voy a poner entre paréntesis, un poco ahí la pista de qué tipo de amarillo queremos que cree.
Vale, voy a borrar esto, vamos a ejecutar de nuevo y espero que no cambie el comportamiento.
Veo que el código es más o menos igual y ahora quien color está usando el código que le hemos pasado.
Si ahora pongo aquí la palabra reino como antes, damos a validar y efectivamente tenemos ahora sí el color precioso del wordel.
Y ahora aún más complicado, pues vamos a pedirle que si la palabra tiene las letras en la posición correcta,
pues que estas letras se marquen en verde y esto lo vamos a hacer con la siguiente instrucción.
Vale, si está en la posición correcta, la celda se marcará en verde.
Vale, vamos a ejecutar a ver si esto funciona.
Vale, vale, he elegido un código de color diferente al de antes.
Vamos a ver qué sale de aquí. Vamos a probar de nuevo con la palabra, pues yo que sé, Ariel.
Recordemos que la palabra reino, entonces deberían de marcarse algunas.
Vale, lo está haciendo bien y además ha elegido un color verde que está chulo.
La ahí está bien porque sería reina.
Esta está en la posición correcta.
El resto de palabras está en la palabra original.
La L no está y la L no la ha marcado.
Lo tenemos, vale, o sea, funciona.
Vale, ahora lo que faltaría, pues sería de nuevo activar lo de que cuando pulsemos el botón de validar,
salta la siguiente fila y entonces ya empieza a completarse cada una de las casillas.
Vamos a hacer esto, validar, pasamos a la siguiente fila, a ver si todavía recuerdo la variable de antes.
Efectivamente, se acuerda y vamos a probar que esto funciona.
A ver, reiniciarlo. Vamos a probar la palabra Ariel.
Le damos, funciona y ahora ahí está. Vale, le damos de nuevo.
Funciona. Vamos a probar.
Qué pasada.
De hecho, voy a coger el color correcto del Wordel.
Vamos a coger el verde característico.
Yo creo que es algo más o menos como este.
Voy a coger el color, nos lo llevamos para acá.
Esto lo volvemos a añadir ahora.
Espero que vuelva a funcionar.
No voy a modificarlo así para que no se diga que he tocado código.
Voy a copiar esto aquí.
Vamos a copiar esto.
Vale, a ver si lo integra, a ver si todo funciona bien.
Vale, funciona.
¿Qué nos faltaría? Pues, por ejemplo, este botón de aquí que cuando lo pulsemos reinicie todo el tablero.
Vale, tal cual. Al pulsar el botón eliminar, todas las letras son borradas.
El índice de la fila vuelve a cero y el color de las casillas a gris.
Se lo pido y a ver qué hace con esto.
Vale, coge el botón correcto.
Vamos a darle aquí y puedo volver a empezar la partida.
Está el índice arriba, puedo empezar a jugar, puedo borrar.
Creo que lo tenemos, o sea, tenemos ya el tablero oficial creado.
Ahora lo único sería generar una palabra aleatoria en cada partida y con esto ya ponernos a jugar.
Podría pedirle que genere palabras a Codex, genera un listado de palabras de cinco letras.
Vamos a ver si funciona.
Vale, no Reina Rey, Rebe, Rebotes, nada, nada, nada, nada.
Una cosa que sí podría hacer si no estuviera capado este sistema sería pedirle a partir de una página web,
una URL, que pillara de ahí las palabras con cinco letras.
Vamos a ver qué haría con esto.
Fijamos que el código lo hace, se va a una web, row, github, user, content, tata, tata, tata, tata.
Esto no va a funcionar en Codex porque lo tiene limitado para que no, es un sandbox,
para que no puedas ejecutar código que vaya fuera de este entorno.
Por esto de que la IA va a dominar el mundo y tal, pues no tenemos diversión hoy.
Vamos a ver si esta URL existe.
Lo pongo y, efectivamente, esto.
Ah, pues mira, sí, son...
Vale, vale, ha sacado palabras, lo que no son palabras de cinco letras.
Ni siquiera son palabras que existan, pero bueno, más o menos.
Vale, lo que voy a hacer directamente es generar yo un listado de unas pocas palabras.
Pues, por ejemplo, hielo, cueva, cable.
Vamos a pasárselas hacia el sistema.
Vale, ha generado un listado words, haría el ratón, reina, cajón, prisa, hielo, cueva.
Vale, esto debería estar en mayúscula.
Vale, el listado está en mayúscula, convierte todas a mayúscula automáticamente.
Vale, y lo que vamos a hacer es pedirle que cuando cliquemos el botón del liminar,
aleatoriamente seleccione una de las palabras del listado
y empiece una nueva partida con esa palabra.
Vamos a ver si lo hace.
Vale, secret word, words, random index.
Vale, esto ya no es buena pinta.
Vamos a probar.
Vamos a darle con reina nuestra palabra.
Vale, esta era la correcta.
Vale.
Vamos a darle de nuevo y vale, ha cambiado la palabra, efectivamente.
Y ahora oficialmente estamos jugando una partida de Wordle que hemos programado nosotros.
A ver, de las que acabo de escribir, con una y con una tal.
Por ejemplo, clima existe.
No, clima no está.
Es posible que me haya olvidado las palabras que acabo de escribir.
Pues sí, sé que las tengo aquí a la derecha, pero no quiero mirar.
Prima.
Vale, vale, prisa, prisa.
Ok, ok, ok, funciona, funciona.
Y si le diéramos de nuevo aquí, pues podríamos jugar otra partida diferente.
No es ni prisa, evidentemente.
No es reina.
Vale.
Ah, pues sí, si era reina.
Solo estamos jugando con estas dos palabras.
No hay otras.
A ver, cable.
Vale, esta no es, pero esta puede ser Ariel.
Ahí estaría.
Si aumentara el número de palabras del listado original, pues podría jugar a un Wordle original.
Hay algunas cosas que no están implementadas del todo.
Por ejemplo, cuando hay alguna letra repetida, creo que se va a marcar en las dos ocasiones
en amarillo.
No he encontrado forma de hacer eso.
Tampoco creo que sea tan problemático, es una versión diferente del juego, pero bastante
funcional.
Y esta es la cosa.
Esto ha sido un ejemplo de lo que se puede lograr programando con Codex.
Vale, aquí vienen un poco unas conclusiones después de haber estado trabajando en todo
esto.
Lo primero que tenéis que saber es que evidentemente, aunque hayáis visto cómo lo he implementado
bastante rápido en pocos minutos, esto ha llevado un trabajo por detrás de estar tres
horas fácilmente e intentando encontrar las instrucciones correctas para poder generar
el código.
Igualmente esas instrucciones, ahora que las he vuelto a probar, han fallado en algunos
casos.
¿Por qué?
Porque lo que sucede con GPT-3, pues tiene una parte probabilística donde los resultados
no siempre van a ser iguales, con lo cual siempre te va a obligar a de nuevo estar improvisando.
Pero lo importante es eso, que al final detrás ha habido un trabajo de horas.
Esto podría ser equivalente al tiempo que me hubiera llevado a implementarlo en código,
pues posiblemente.
También es cierto que programarse y programar, porque llevo años programando, y sin embargo
esto es un nuevo sistema que a lo mejor cuando consiga dominar un poco más, pues me podría
llevar a lo mejor una hora en implementar todo esto.
Lo interesante es que lo que he implementado, aun cuando sí me he apoyado en conocimiento
de saber programar, no me ha requerido picar ninguna línea de código.
Esto significa que en realidad yo podría estar con el micrófono haciendo un speech
to text, convirtiendo mis palabras en texto y automáticamente podría generar cosas como
estas.
Sí, todavía tienes que estar pensando en esta lógica de programar.
Tengo que crear una variable, tengo que hacer que este botón tenga un identificador, vale.
Pero no tienes que perder tiempo en la sintaxis del código, no he tenido que irme a Google
a tener que buscar cómo se hace X cosa en JavaScript.
Y eso es un paso sustancial.
También me parece un poco loco esto de que el código fuente técnicamente de mi programa
sería todas las instrucciones que con lenguaje natural yo le he ido dando al sistema, un
texto que podría estar en un blog de notas y que cualquier persona podría leer y entender.
Estas herramientas ya están aquí y si esto te ha gustado, si esto te ha interesado, tienes
que saber que hace una semana subí un vídeo donde explicaba un sistema que evoluciona
y mejora todo lo que Codex a día de hoy es capaz de hacer.
Todo esto es muy loco, pero lo que está claro es que el futuro pinta bastante interesante.
Estos sistemas de automatización de la programación cada vez se están volviendo más y más potentes
y la evolución que todo esto pueda tener la seguiremos contando aquí en dotces.
Si te ha gustado el vídeo, no dejes de compartirlo, pásaselo a alguien que le puede interesar,
si conoces comunidades en internet que pienses que esto le puede parecer interesante, pues
coge el link y compártelo y si quieres apoyar este tipo de contenido ya sabes que lo podéis
hacer a través de Patreon.
Yo me voy a quedar aquí jugando un ratito con esto que acabo de programar, que también
te digo, esto no sé si lo he programado yo o lo ha programado la máquina.
Aquí tienes la licencia de este código.