16-October-2024 By Jeffrey Cooper
Faster Code Development Using Generative AI
I’ve been using Generative AI the past month or so to write code for me. So far, it has been to speed up learning new skills, such as Python, in a targeted way. But this week (Week 4 of Project52) is different.
iOS 18 started this. My favorite, if obscure, grocery list app was no longer supported. It had been years since it was updated. I liked it because it was bare bones. I find the majority of shopping list applications out there stuffed with features I don’t want. I do not want to create an account. I do not need to share the list with anyone. I don’t even really want multiple lists. I want single line text entry. I want check off item/uncheck item (if tapped by mistake). I want to easily removed checked items. That’s it.
So I decided to see how Generative AI would do creating a simple Progressive Web App, which is the simplest type of app you can generate and does not require any Publisher credentials. It’s basically Bring-Your-Own-App.
Nota para los lectores españoles: Estoy escribiendo mis articulos en dos idiomas mientras lo aprendo. Para mas información, lea este artículo.
He estado utilizando la IA Generativa el mes pasado para escribir código para mí. Hasta ahora, ha sido acelerar el aprendizaje de habilidades nuevas, como Python, en una forma selectiva. Pero, esta semana (Semana 4 de Proyecto52) es diferente.
iOS18 empezó esto. Mi app de listo de compras favorita, que fue oscuro, no fue apoyó más. Hace muchos años desde se actualizó. Me gustó porque fue más simple. Encuentro la mayoría de aplicaciones son demasiadas llenas con funciones que no quiero. No quiero crear una cuenta. No necesito compartir una lista con nadie. No quiero ni varias listas. Quiero un soltero línea para entrar el texto. Quiero marcar y desmarcar un elemento (si tocó por error). Quiero eliminar los elementos marcados. Que es todo.
Así, decidí ver como IA Generativa realizaría con una simple aplicación de Progressive Web App, cuál es la aplicación más simple que pueda crear y no exigir cualquier credenciales de Publisher. Básicamente, es trae-tu-propia-aplicación.
iPhone frame by svstudioart on Freepik
The Prompt
You can see my initial prompt above. I created a pretty well-defined, if short, list of requirements of the behavior I wanted. In a few seconds, ChatGPT responded with the code- HTML, CSS and JavaScript. I tested it in the browser, and it worked the first time, exactly per the requirements. To be specific, I used ChatGPT-4o with Canvas, which displays the code side-by-side (see the image below).
I added a couple of refining requirements that were afterthoughts- hide both the trashcan and the text “Added to cart” until an item is checked off, and that worked on the first try, of course.
La Solicitud de Texto
Puede ver me solicitud inicial de texto para ChatGPT arriba. Creí una lista de requisitos, definido bien y corto más o menos, del comportamiento que quería. En unos segundos, ChatGPT me dio el código- HTML, CSS y JavaScript. Lo probé en una navegador, y funcionó la primera vez, según los requisitos. Para ser más especifico, usé ChatGPT-4o con Canvas, que muestra el código lado al lado (vea la imagen de abajo).
Añadí un par de requisitos que fueron una idea tardía- esconder la icon de basura y el texto “Added to cart” hasta un elemento está demarcado, y eso funcionó la primera vez, por supuesto.
Finally, for the last bit, I needed to have the two additional files needed to install this webpage as a Progressive Web App (PWA), or simply, a Web App. It created the files- manifest.json and service-worker.js. I then uploaded them all to this website, and it installed and worked perfectly.
I decided it needed just one more feature, and I would release it. I asked it to support Dark Mode on the device, and with a few changes files, I copy/pasted the code over it and that was that!
The GitHub link is below, or, you can visit it directly on your phone using the direct link below, and add it to your home screen. While I have not tested it on Android, I presume it works there as well. Caching is maximized so that the app doesn’t need to check back on this site for a refresh. It is released, as-is, and I’m not, at this time, planning to update it.
Finalmente, para la última parte, necesité los dos archivos extras que es necesita para instalar esta pagina web como Progressive Web App (PWA), o simplemente, una Web App. Creó los archivos- manifest.json y service-worker.js. Los cargó en todos a este sitio, y lo instaló y funcionó perfectamente.
Decidí necesita solo una función más, y la liberaría. Le pedí que apoyara el Modo Oscuro en el dispositivo, y con unos archivos cambiados, ¡le he copiado y pegado el código y fue todo!
El enlace de GitHub está siguiente, o puede visitarlo directamente en su teléfono utilizando el enlace directo siguiente ese, y lo añade en su pantalla de inicio. Mientras no lo he probado en Android, supongo que funciona también. Se maximiza el almacenamiento de activos en caché, así la aplicación no tenga que volver a consultar a este sitio para refrescarse. Esta esta liberada tal cual, y no e planeando actualizarlo.
GitHub Repository: https://github.com/runningthoughts/Simple-Grocery-List
Direct link to Web App: https://runningthoughts.tech/webapps/grocery/
Where It Goes From Here
Although I was surprised this worked outright, with zero issues, it still was a pretty simple request. And though I was clear what I asked for, there were 19 separate requirements, and it still worked the first time! The refinements were simply behavioral ones I decided I wanted once I saw it in action. Changes in requirements are, of course, normal in software development, even for the best thought-out designs.
From here, it gets more complicated. I am evolving how I utilize LLMs for code generation. As I have been exploring, so far, I have not cared too much for how it wrote the code or what the exact requirements were. Though there were some basic requirements to both the Spanish Nouns and Mandelbrot projects, I iterated those a lot more. This was the first time I fully wrote out my requirements up front.
More complex systems will be coming, and I have to figure out how to break those down. Particularly from the Mandelbrot project, I found OpenAI’s context window limit to be an issue. When LLMs hit that context window, they get confused and become obstacles to progress. I have had to change strategies to get past that. In the future, I want to prevent that, yet have it be able to design, and iterate, bigger systems without maxing out its context window. This will require a different way to prompt the system to create it, so that over multiple chats, it can work cohesively in smaller contexts and still deliver an accelerated result.
Not so helpful in my previous projects is that I took on a number of new things at the same time, so there were more questions on the different aspects that enlarged the contexts, to the breaking point in the case of the Mandelbrot project. And these LLMs do make mistakes, to a lesser degree in the code, but more specifically in the use of tools and systems that are products of other companies (such as AWS). These require some sleuthing to sort through, bloating those contexts.
In case you are unfamiliar with the word context here, it simply means the complete history of the chat you are currently using. ChatGPT and Claude both allow you to create myriad different chats, and each one is, in effect, the context by which you can keep asking questions within that chat.
There is definitely much promise here, and the use of AI for what I call Self Augmentation, will continue, in high gear.
Hacia Dónde Va
Aunque estaba sorprendido esta app funcionó a la perfección la primara vez, sin problemas, fue una simple tarea todavía. Y aunque estaba claro en que se pedí, habían 19 requisitos diferentes, y funcionó inmediatamente todavía. Los refinamientos eran de comportamiento simplemente decidí después de había visto en acción. Los cambios en los requisitos son, por supuesto, normal en desarrollar de software, incluso para los diseños mas meditados.
De aquí, convierta más complicado. Estoy evolucionando cómo utilizo LLMs para la generación de código. Como he explorando, hasta ahora, no me interesa demasiado para como ha escrito el código o cuáles eran los requisitos exactos. Aunque fue algunos requisitos básicos para ambos proyectos del Spanish Nouns y Mandelbrot, esos iteré mucho más. Esto fue la primera vez que escribí completamente mis requisitos por adelantado.
Sistemas más complejos vendrán, y tengo que enterar como particionarles. Particularmente con el proyecto Mandelbrot, enteré que límites de la ventana de contexto de OpenAI ser un problema. Cuando LLMs alcanzan al límite, se confunden, y conviertan obstáculos a progreso. He tenido que cambiar mis estrategia para continuar. En el futuro, quiero evitarles. lo tendré que diseñar, y iterar, las sistemas mas grande sin maximizan las ventanas de contexto. Esto exigirá un método diferente para escribir las solicitudes de texto, como en varios ventanas de chat, puede trabajar cohesionadamente en ventanas de contexto más pequeño y aún obtener un resultado acelerado.
No es útil en mis proyectos anteriores es que fue aprendiendo mucha nuevas cosas en el mismo tiempo, así había mas preguntas en los aspectos diferentes que ampliaron los contextos. hasta el punto de ruptura en el caso del proyecto de Mandelbrot. Y LLMs hacen errors a veces, en menor medida en el código, pero más concretamente con las herramientas y sistemas que hay productos de otras companies (como AWS). Esto exigió unas investigaciones para clasificarlas, y hinchó esos contextos.
Si no está familiarizado con la palabra “contexto” aquí, simplemente significa la historia completa del chat que está utilizando. ChatGPT y Claude cada permitirse crear muchos chats diferentes, y cada chat es, en efecto, el contexto por cuál puede seguir haciendo preguntas dentro el ese chat.
Definitivamente, hay mucho promesas aquí, y el uso de IA para que llamo Aumento del Yo (Self Augmentation), continuara más rápido.
El contenido de estos artículos son un poco avanzado. Necesito utilizar ayuda de DeepL, per trato utilizar lo menos posible. Todavía lo estoy utilizando alrededor 20%, porque necesito un más vocabulario y coloquialismos también. Pere con cada publicación, estoy utilizando DeepL menos y menos.