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!
Top comments (28)
This is the example result.
Get rick rolled twice :)
Fun
Thanks Ben! Glad you like it!
Great job š
Thanks Miracle!
This is such a fun idea š
Turning image styling into a simple web tool (especially ASCII mode) is a really cool throwback to classic web design days. I also like that you shared the real Copilot experience ā the limits, prompt confusion, and learning how to ask better questions. Thatās the part most people donāt talk about.
Using Copilot as a āmentorā instead of a full builder next time sounds like a smart move. Nice work shipping an MVP and documenting the journey! š
Thanks Bhavin! I appreciate your comment!
It was a fun experience to work with. It is also very convenient to have a CLI in there instead of using the web/app version because I tend to copy/paste the whole project onto copilot and go from there. With this, I can just ask within my Visual Studio code and it does it for me without me dragging/dropping my files onto the Web/App version of Copilot.
Appreciate it! Thanks Bhavin!
Looks like a fun project!
Thanks Julien!
This is a great 'Rite of Passage' project! ASCII conversion is such a satisfying visual to get right.
Iām curious about the moment you hit the free-tier limitādid having to do those manual fixes and the Readme yourself change how you viewed the code the CLI had generated?
That GIF animation issue is a classic murder mystery in web dev because of how browsers handle frame buffers. If you ever decide to perform an autopsy on why those frames wouldn't export, thatās where the deepest learning usually hides!
Great MVP for 2026 speed.
Thanks again Sham! Also replied to the GIF issue you made and saw your comment below it!
When I hit the Free-tier limit, the Readme wasn't the issue because I know it's nothing much other than it is built with Vanilla HTML, CSS, and JS. I barely did any changes (delete a bit of stuff). Of course, as a result of Vibe coding, the JS file was a nightmare to look at because it is the "leg that holds the chair". Meaning there are Hundreds lines of code that I do not completely understand, which makes sense if you only rely on vibe coding and not reviewing the code at all until the end.
When I vibe coded the ASL game, at least I took the time to understand the code and how it works. For this case, I just "ball".
Will probably think about the GIF issue in the future along with your detail comment about it. Thanks again Sham!
The possible reason those GIFs are "ghosting" you is likely because of how the browser handles the Canvas 2D context.
When you "vibe code" an image styler, the AI usually maps one static frame to the canvas. But a GIF is a stack of timed layers. To export it, you can't just Save As; you have to manually extract each frame's ImageData, process the ASCII/Paint transformation for every single layer, and then use a library like gif.js to "sew" those frames back together with specific millisecond delays.
Without a loop that handles the temporal dimension of the image, the browser just sees the first frame and calls it a day. Itās a classic Physics of the System problemāthe AI knows how to draw, but it doesn't always know how to keep time!
Thanks Sham for the reason of the GIF issue! I figured something was up with that functionality since Copilot seems to understand, but cannot really built it out.
When I was prompting for the GIF functionality initially, I saw the solution it came up with and it made sense. The execution problem was the issue. It got to the point where it went around in circles, so I had to scrap it.
Again, thank you for the detail comment of the GIF issue and why it is the case! Learned something new! :D
Fun project Francis! Will definitely use it and drop an image here (ā āā Ā Ķ”ā Ā°ā Ā Ķā Źā Ā Ķ”ā Ā°ā )ā ā
Thanks Aryan! Can't wait to see what image you drop!
All I have are food pics (Ėā½Ėļ¼)...
This is a strawberry mochi I had at a Japanese sweets restaurant
I ticked the brush, gallery, impression and watercolor, I really like this version it looks like a printed cloth or colored manga... was very fun to play around with it (āĀ“ā”`ā)
That's looks great! Now I am hungry from this image lmao! Glad you had fun!
This is actually pretty cool! š„
I've been experimenting with vibe coding too. Quick question ā which model are you using under the hood for the image styling? Stable Diffusion or something else?
Also, how's the GitHub Copilot CLI treating you? Thinking of trying it out myself.
Great work on the challenge! š
Hey Harsh! Thanks for your comment!
For the image styling, just Vanilla JS. Nothing too fancy since it is basically editing the image using math.
The Copilot CLI is Convenient. When I vibe code, I tend to use the online Copilot were I have to drag and drop the files. For the CLI, it's just there, waiting for you to specify what you want to do locally which is great! The only downside is the limit since I was using the Free Tier, but it's expected.
Glad you liked it!
Francis, I loved the design ā both the visual design and its features! I had fun playing around with it for a while haha š
Thanks Cesar! Glad you like the project! It was quite rewarding to see it come to life :)
This is super cool ā especially the idea of turning images into ASCII or paint styles in such a simple UI.
Iāve also been experimenting with āvibe codingā for my own project (a trend dashboard), and I really relate to your point about hitting limits and needing to be more intentional with prompts. That part is underrated.
Great work!
Thanks Rushy! Glad you liked it! Good luck on your project!