Built a Vibe Coded App where you can Style any Image you like! :D
This is a submission for the GitHub Copilot CLI Challenge
What I Built
This is my first time using the GitHub Copilot CLI! I believe doing this challenge will allow me to get exposure of using this CLI and how it help me in my development process.
I Vibe Coded a Web App that I called "ImageStyler" where you have the ability to upload any image and translate it into either ASCII or paint-like canvas themed. I built this app since it reminded me of doing an assignment for "Wed Design" where we have to scale our images/change colors for the web. One of the tools we used is "GIMP". Since I just started building this (Starting on Feb 5) and the deadline is in a couple of weeks, I thought to myself "Why not build that simple tool on the web?". This is built for fun and allow me to experience GitHub Copilot CLI.
Technologies used
This was built in Vanilla HTML, CSS, and JS. This was vibe coded using the GitHub Copilot CLI, so I am relying 99% of the copilot to do the work.
Demo
This is what the site looks like!
Drag and Drop image
You have the ability to drag/drop the image onto the box or click the button to select the image.
ASCII Feature
One option is to translate the image to ASCII.
Paint Settings
The other option is to paint the image. For simplicity, this is what it looks like when you mix and convert the image.
Download Modified Image
Once you are finished, you have the option to name the file and download your modified image.
My Experience with GitHub Copilot CLI
GitHub Copilot CLI in my Visual Studio Code has been really great (For a first timer using the CLI). Every time I request and feature or fix a bug, it tells me on the file on what are the changes that they made.
Additionally, it also ask me permission to execute the action. This only happens if it is running sensitive commands such as running a python server or fetching documentation from the web. It's always nice to ask for permission before executing the command.
Since it was vibe coded, I rely on the CLI to build this project in full. Unfortunately, I reached my limit for using the CLI since I was using the Free Tier. There are some challenges I faced though such as:
- Asking too much. Since I was on a limit, I tried to cramp everything I want into one prompt. The problem is that it starts to get confused and got more errors. I then strategize how I can word it in a way where I can get the features I want while prompting as little as possible.
- GIF compatibility. GIF is not supported in this web app. Initially, it was built in-progress, but ran into issues where it does not do the GIF animation as well as not exporting as a GIF. Left that one out and only focusing on the image MVP. It is probably where I have too many requests in one prompt, but I believe adding the GIF functionality is possible and would be cool to see!
Regardless, I made some small changes and worked on the Readme.md file in my repository after I reached my limit of using the CLI.
Overall, it was a great experience using the GitHub Copilot CLI in my Visual Studio Code! For future uses, I am thinking of using it as a mentor guide instead of using it to build the whole project code by code. It is very convenient and also a great learning tool (if asked!).
Summary
It was a fun experience! My first time using this tool in the Visual Studio Code and would 100% recommend it!
If you are interesting in the Repository and Demo, check out the links below!
- GitHub Repository: https://github.com/FrancisTRAlt/ImageStyler
- Demo Site: https://francistralt.github.io/ImageStyler/
Any questions or comments? I would love to hear from you!