Pruebo el ChatGPT de OpenAI para que programe desde cero una aplicación web utilizando React.js. En este caso quiero que haga un Tamagotchi (o algo parecido)
Esto fue lo que pasó…
**¿Qué es Chat GPT?**
ChatGPT es un modelo de lenguaje desarrollado por OpenAI que utiliza GPT-3 y puede ser utilizado para generar texto de forma autónoma. ChatGPT fue diseñado para mejorar la capacidad de los modelos de lenguaje existentes para comprender el contexto y la coherencia en las conversaciones, lo que le permite generar texto que suena más natural y coherente en respuesta a una pregunta o una entrada de texto dada.
**¿Qué es GPT-3?**
GPT-3 es un modelo de lenguaje desarrollado por OpenAI que utiliza una red neuronal de 175 mil millones de parámetros, lo que lo convierte en uno de los modelos de lenguaje más grandes y avanzados hasta la fecha. GPT-3 fue entrenado en una gran cantidad de texto disponible en internet y es capaz de generar texto que suena muy natural y coherente en varios contextos y tareas diferentes. GPT-3 es utilizado en una amplia variedad de aplicaciones, desde el procesamiento del lenguaje natural y la generación de texto hasta la traducción de idiomas y el desarrollo de aplicaciones de IA avanzadas.
**¿Qué es OpenAI?**
OpenAI es una empresa de investigación en inteligencia artificial y aprendizaje automático fundada en 2015 por Elon Musk y Sam Altman con el objetivo de desarrollar y promover tecnologías avanzadas en IA de manera segura y ética. OpenAI se enfoca en el desarrollo de tecnologías de IA que puedan ser utilizadas por el bien de la humanidad, y colabora con otras empresas e investigadores en el campo de la IA para avanzar en el conocimiento y el desarrollo de tecnologías relacionadas.
– – –
Apoya el contenido de este canal de una forma más directa haciéndote MIEMBRO
►
Únete a la COMUNIDAD de programación y desarrollo web en español del CANAL
►
En este vídeo vamos a hablar sobre la Herramienta que lo está revolucionando Todo chat gpt Es una herramienta Desarrollada por Open I que nos permite A nosotros como usuarios interactuar con El modelo de lenguaje gpt 3 de una forma Terriblemente sencilla si es la primera Vez que Oyes hablar sobre este término Te estarás preguntando qué es eso de gpt Qué es eso de openiye No te preocupes Que te lo voy a explicar openiye es una Organización de investigación en Inteligencia artificial que se fundó en 2015 sus fundadores son elon musk de Sobras conocido Sam alman que es el Presidente de White combinator una Aceleradora de startups en Estados Unidos y Greg brockman su objetivo es Desarrollar y promover tecnologías de Inteligencia artificial que sean Avanzadas y seguras para nuestro Beneficio entre sus proyectos destaca Gpt3 que son las siglas en inglés Generative free trainer Transformers en Su versión 3 es un modelo de lenguaje Que destaca por su gran capacidad para Realizar tareas de procesamiento de Lenguaje natural de una manera eficiente Y precisa a partir de gp3 se Desarrollado la aplicación chat gpt una Herramienta que nos permite interactuar A modo de chat con el modelo de lenguaje Podemos hacer preguntas en lenguaje Natural y no solo en inglés también
Podemos hacerlas en español y obtener Respuestas coherentes más o menos y Precisas en tiempo real en este vídeo Vamos a interactuar con esta herramienta Y vamos a pedirle que desarrolle una Aplicación web vamos a ver hasta dónde Es capaz y qué nos ofrece Así que vamos Allá si vas a la URL Open ai.com Llegarás a esta landing page que ves Aquí que presenta la organización más Abajo puedes encontrar los proyectos en Los que están trabajando Dalí es el que Permite generar imágenes y el que vamos A ver en este vídeo es chat gpt podemos Entrar dando click en este botón o Escribir en la URL de tu navegador chat Punto Open hay.com posiblemente te pida Que te registres con una cuenta de Correo O puedes hacerlo con tu cuenta de Google o de Microsoft en mi caso me Registre con mi cuenta de Google para Poder utilizarlo aquí te vienen algunos Ejemplos pero como puedes ver ahí abajo Tienes un input de texto donde puedes Empezar a pedirle Entonces vamos a ir al Grano me gustaría desarrollar una Aplicación web hecha en react que simule El comportamiento de un tamagotchi se lo Vamos a decir en español desarrolla una Aplicación web utilizando Riat js que simule el comportamiento De un tamagotchi está pensando y ahí ves Que en tiempo real nos va contestando Pues lo que primero que se le ocurre en
Este caso Nos está dando una serie de Pasos que podríamos tener en cuenta a la Hora de crear una aplicación web con ría Nos dice que instalemos riad etcétera Vale aquí de primeras ya vemos algunos Errores nos dice que instalemos react Pero luego nos dice que creemos una Aplicación con npx creator este Comando Ya de por sí trae instalado read Entonces como todas las inteligencias Artificiales incluida copilot en guija De la que te dejo un vídeo por aquí Arriba son muy buenas herramientas que Nos pueden ayudar pero no tenemos que Hacer caso a pies juntillas a todo lo Que nos dice por lo menos a día de hoy No sabemos si más adelante esto mejorará Y no sea necesario pero a día de hoy sí Que necesitas tener conocimientos por lo Que creo que el trabajo como Programadores o desarrolladores a día de Hoy Sigue estando seguro como puedes ver Llega un momento en el que se queda un Poco bloqueado el chat pero podemos Decirle que continúe diciéndole continúa Continúe lo que quieras y entonces sigue Poco a poco Ahora nos está escribiendo Por pantalla el código en react de un Componente que simule este tamagotchi ya Vemos aquí el primer error no error pero Sí que claramente todo lo que está Haciendo este modelo de lenguaje ha sido Entrenado Pues con código con escritos Con un millón de cosas pero no tiene por
Qué ser perfecto entonces Aquí vemos que Está utilizando clases en riad desde Hace ya un tiempo no se utilizan clases Para crear componentes se utilizan Funciones pero más o menos lo que nos Dice aquí tiene bastante buena pinta Tiene un estado donde va a haber unas Propiedades de la edad la salud y la Felicidad inicializa el estado en el Component Y luego tiene unos métodos de Para alimentar para jugar Y por último Nos renderiza el componente con su Código jsx donde vamos a ver el nombre La edad la salud etcétera y los botones Que llaman a esos métodos no tiene mala Pinta si copiamos esto y lo pegamos Seguramente funcione pero vamos vamos a Ir un paso más chat gpt es capaz de Refactorizar código le vamos a decir que Modifique este código que nos acaba de Sacar pero que utilice funciones Refactoriza el código del componente Tamagotchi para que utilice funciones Y Hooks en lugar de clases vamos a ver qué Hace lo genial de esto es que no solo te Escupe el código sino que también te Indica un poco lo que va a hacer o Porque lo ha hecho como vemos ahora sí Que está usando las últimas versiones de Riad y está usando Us State y use Fed Para sustituir el componente en forma de Clase por un componente de función esto Ya tiene otra pinta como ver nos explica Un poco lo que ha hecho y que ha ido
Cambiando de momento lo que dice ahí Tiene sentido así que de momento le Damos Ok a chat gpt por crearnos esta Aplicación vamos a copiar el código y Vamos a irnos a stack blit para copiar Este código de riat aquí directamente lo Puedes hacer en tu equipo local con un Visual Studio code Pero bueno de esta Manera nos ahorramos crear la aplicación Etcétera como ves nos ha escrito aquí Tama la edad la salud y la felicidad la Edad va aumentando a cada segundo porque Vemos aquí que hay un intervalo que cada Segundo va seteando y sumando la edad y Va quitándole un punto de salud y un Punto de felicidad se supone que si le Damos a alimentar le va a sumar 10 a la Salud y parece que funciona Vamos a Darle a jugar y también funciona de Momento tiene muy buena pinta quizá vaya Demasiado rápido pero bueno nos ha hecho Lo que queríamos en cierta manera vamos A ver qué tal se porta con los estilos Css le voy a decir que en lugar de Utilizar números para la salud y la Felicidad que utilice una barra esta Barra quiero que sea de color verde si Está entre 80 y 100 de color amarillo si Está entre 20 y 80 y de color rojo si es Menor de 20 vamos a probarlo añade La siguiente funcionalidad Las propiedades de gel y happiness Quiero que sean una barra y que su color Siga el siguiente código si el valor es
Mayor de 80 La barra deberá ser de color verde Si el valor está Entre 20 y 80 De color amarillo y si el valor es menor De 20 utiliza el rojo vamos a ver qué Nos da nos sugiere que utilicemos css Inline es decir que utilicemos el código Css dentro del componente jsx vamos a Ver que no sugiere y luego vamos a Intentar que lo separe ya ha acabado el Código y nos dice que ha añadido estilos En línea utilizando la etiqueta o el Elemento de html progress sino decirle Nada lo cual está Genial porque es lo Que más se asemeja a lo que queremos Vemos que se ha quedado ahí un poco Bloqueado vamos a decirle a que continúe Y viendo el código vemos eso que ha Puesto aquí unos unas barras de progress Y el estilo pues está en línea de Momento vamos a copiar esto a ver qué Tal se ve nos vamos al código y Modificamos todo el componente jsx y Aquí vemos las dos barras de Health y de Happiness y vemos cómo va bajando Aparece el fondo de color gris oscuro Vamos a ver si cuando llegue a menos de 80 el color cambia amarillo vale Aquí Vemos que ya está aquí el primer error Porque no está cumpliendo lo que le Hemos pedido el color le hemos dicho que Si es mayor de 80 lo pinte de verde si Es mayor de 20 de amarillo y si no de
Rojo y siempre sale verde porque no está Haciendo la comprobación bien podríamos Modificarlo pero vamos a decirle al chat Si es capaz de cambiarlo él hay un error Y la barra se muestra siempre verde Aunque el valor cambie y sea menor de Hoy vamos a ver que nos sugiere el chat Vale creo que no lo ha entendido bien Porque nos dice que tenemos que Modificar la propiedad color pero esa es La que ya está cambiando está aquí Entonces no va a hacer nada lo que está Mal es la condición vamos a intentar Arreglarlo dirigiéndole un poco Refactoriza el código anterior para que La funcionalidad de obtener el color de La barra Esté separada Y en lugar de utilizar un Elemento progress utiliza un DIF y css Vamos a ver bien aquí ya ha decidido Crear una función llamada get Bad color Que nos va a devolver el color de la Barra en función de la propiedad helf o Happing veamos el código que nos da También vemos que ha creado un fichero De css y está aquí importado por tanto Vamos a Añadir un nuevo fichero todo Esto de aquí sigue siendo igual de hecho Me estoy dando aquí cuenta que esto no Sería del todo necesario pero bueno Añadido el nombre de la aplicación como Estado bien aquí vemos el get Back color Vamos a copiar este código y añadirlo Aquí y aquí vemos para los estilos
Aunque se ha parado voy a darle a Continuar utiliza un ancho que va a ir Cambiando en función de la propiedad Health o de la propiedad happiness y el Badground color lo va a sacar de la Función get color pasándole ese Parámetro Entonces vamos a copiar ahora Todo el código jsx hasta aquí vamos a Añadirlo y vamos a el código css por Tanto vamos a necesitar crear aquí un Nuevo fichero Tamagotchi css le vamos a ir salvamos Salvamos y ahora sí vemos que el color Ha pasado a ser amarillo vamos a ver si Llega a 20 y cambia a rojo y Efectivamente cuando llega a 20 cambia a Rojo vamos a jugar con él para sumar Aumentarle la felicidad vemos que cambia Verde y vamos a darle de comer que si no Se nos muere como puedes ver sí que está Funcionando correctamente vamos a Decirle que estire un poco la aplicación Para que no sea tan Sosa crea unos Estilos css para la aplicación Que le den un aspecto agradable y Simpático veamos que se le ocurre vale Aquí vemos que nos está añadiendo cosas Mientras lo crea lo que voy a hacer es Ir al Style css y eliminarlo y el Index Js vamos a ir importando Tamagotchi punto css y aquí tenemos los Estilos copiamos el código nos vamos a Tamagotchi css lo pegamos salvamos y Vemos Que bueno ha hecho algo un poco
Más diferente pero tampoco es que se Haya roto la cabeza vamos a decirle que Añada una nueva característica hasta Ahora tenemos salud y felicidad vamos a Decirle que también añada hambre añade Que el tamagotchi tenga también Un estado de hambre El intervalo de tiempo En el que va aumentando la edad y Disminuyendo las otras propiedades Que sea ahora de 3 segundos cada vez que Se alimente Subirá 20 puntos de hambre 5 de salud y 5 de felicidad Cada vez cada vez que juegue subirá 20 Puntos de felicidad y restará 5 de salud Y 5 de felicidad y que añada también Añade la funcionalidad De dormir la cual restará 5 puntos de Hambre 5 de felicidad y sumará 10 de esa Luz Let’s go aquí nos dice que va a Añadir un nuevo estado hanger O sea ya Hecho la traducción yo le he dicho Hambre pero para continuar con el código En inglés ha usado hanger y también pues Va a añadirle al Us effect que en lugar De un segundo Pues el intervalo sea cada Tres va a modificar las funciones fit Play y la nueva que le hemos dicho de Dormir Que va a ser sleep para que Concuerde con lo que le he indicado que Pase entonces aquí nos dice Cuál va a Ser el valor de la función fit la vamos A ir copiando vamos a ppjs cambiamos fit
Copiamos el código de sleep que es una Nueva más decirle continuar vamos a Copiar el código jsx que renderiza y Vamos a modificar Todo esto le voy a Decir que nos diera el código de Play Que ese no nos lo ha dado ahora mismo Nos iba a dar el código completo pero se Ha parado si le digo a continuar va a Salir el código un poco raro porque no Va a continuar con este formateo Entonces le voy a decir que muestre Muestra el código completo de Tamagotchi punto js debemos que empieza De nuevo cuando acabe Pues copiaremos Todo esto y lo pegaremos en nuestra Aplicación Aquí vemos que haya añadido El estado hanger en el use Fed lo Añadido también para que de inicio como Podemos ver aquí tenga ese valor ya que Están los métodos fit sleep y Play Además del Código de que nos devuelve el Código de color de la barra de la Propiedad añadimos el código y aquí lo Tenemos cada 3 segundos vemos que baja Bastante porque bueno aquí añadido que Reste 5 podemos decirle que en lugar de 5 reste 1 pero bueno para el ejemplo lo Podemos ver ahí si le damos a sleep pues Vamos a ver que aumenta la salud pero También necesita Comer entonces le vamos A dar comer y también necesita jugar así Que vamos a jugar un poquito con él Ahí Está ahora necesita dormir porque si no Se pone rojo pero bueno vemos que la
Funcionalidad que le pedíamos está Funcionando Qué te ha parecido mi Opinión si la quieres es que a hoy es Una herramienta que nos puede ayudar Para detectar errores refactorizar Código o sacar ideas si estamos un poco En blanco sobre qué camino seguir no nos Va a reemplazar porque aún necesita Supervisión de una persona que tenga Conocimientos en lo que se está Ejecutando claramente si este código se Lo muestras a alguien que no tiene Experiencia en react Pues el primer Código funciona y podría valer pero no Sigue buenas prácticas siempre va a ser Necesario que haya un desarrollador o un Programador detrás eso a día de hoy no Quita que dentro de unos años esto Evolucione mucho más pero a día de hoy Digamos que nuestra profesión no corre Peligro sino que va a ser una Herramienta más que nos va a ayudar a Automatizar y hacer en minutos tareas Que antes podían llevarnos perfectamente Días en este vídeo hemos visto un Ejemplo con código Pero puedes Utilizarlo en cualquier campo si tienes Conocimientos en algún área prueba chat Gpt para ver qué te muestra y de esta Manera podrás comprobar si los Resultados que te arroja son 100% Fiables o necesitan supervisión Espero Que te haya gustado mucho este vídeo si Quieres más sobre este tema déjalo en
Comentarios y no olvides darle like y Suscribirte para más contenido sobre Programación web y javascript nos vemos En el próximo chao
