Introduction
Hey guys. I'm making a post about a few little things I have be doing with AI. This is going to be kind of a short post as to not boar all of you. But I do want to tell all of you that I have made a few single page website with the assistance of AI, specifically Grok, to help bring these small projects to life.
Using Grok
Yep, I used Grok for both projects. What is Grok you may ask if you don't know? Grok is an AI chatbot developed by X.com (formally Twitter). It's simmilar to other AIs like ChatGPT, Claude, Gemini and many others. Here is what Wikipedia has to say about Grok:
Grok is a generative artificial intelligence chatbot developed by xAI. Based on the large language model (LLM) of the same name, it was launched in 2023 as an initiative by Elon Musk.[3] The chatbot is advertised as having a "sense of humor" and direct access to X, formerly known as Twitter. - Wikipedia
If you would like to try out Grok you can check it out at https://grok.com. Or, if you have an X.com account, you can access it there.
In the coming paragraphs I will be explaining what I made with Grok AI, what the sites do and a little bit of my process and back story. So let's get to my first site.
WebP to JPG/PNG converter
This is the first site I created was an WebP to JPG/PNG image converter site. I made this site because I don't really like the .webp image format as it is not compatible or accepted on quite a few social media sites.
The site is written in PHP and uses the GD library that's built into PHP, to do the conversions. Currently it only does one image conversion at a time. I may add batch conversion functionality later on. This site took me longer than I expected to get up and running. The reason was that I had just started using Grok and there were some slight differences in how it responded to prompts as opposed to ChatGPT. Even though the responses were similar, I found there to be a difference. Once I got that figured out, completion of the site took me about 3 hours in total. Grok had a working script after 10 minutes and the rest of the time was me testing and asking for revisions or adding features like more stringent form validation, file upload size restriction and clean up of converted images that were over one hour old.
This project came out surprisingly well. I feel that I could have gotten this knocked out a lot fast if I had my prompting more to Groks liking, but I think I have gotten that figured out as my next site took little over on hour and was a lot more complex and in a language I am not familiar with.
If you would like to give the image converter a spin, you can find it here at this link : http://dotw-dev.byethost16.com/convert/index.php
And now for my second site.
Plinko Picker
Yes, I bring to you Plinko Picker. A site that I came up with after seeing one of those familial wheel type picker sites. I thought "same concept, but with PLINKO!" So I got to work with Grok.
So basically one the site you are asked to supply a list of Names or values between 2 and 10 being the max and then clicking the create board button. Then a table of the users names is created with the slot on the playfiled they are assigned.
At the top of the playfield there is a "puck" that is suspended and moving along the top of the playfield. Then once the user clicks the Drop button a 5 second countdown starts. Once it hits zero, the puck is dropped. Watch as the puck rebounds off of the pegs and into a slot to determine a winner.
Now this was a new experience for me as I knew the site was going to be using JavaScript. This is a language I am not familiar with at all, so I knew I was going to have to be very descriptive in my prompts.
So my first prompt I had a definite idea of what I wanted, so I made sure to be very descriptive about my concept for the game. I thought it might be overkill but it worked out great. Grok had a working game on the first try! It didn't look as polished as the final product in the picture, but it had gotten us about 90% of the way there. That was pretty impressive to me.
After that it was tweaking the game play. Making the puck larger, making the pegs have more rebound so the puck was more active and so on.
Then I started prompting on the aesthetics of the site. Grok suggested the the color scheme and font choice.
Then I did some testing and them went back to Grok to make more revisions to correct a few small bugs I had discovered. what was pretty neat was that the corrections Grok made were pretty spot on but I did have to be very descriptive about the issue and behaviors I came across.
All told this site took about one hour and 15 minutes to to point where it is now. I would like to add some sound and a few other small features, but I am extremely pleased with how things turned out.
If you would like to give Plinko Picker a spin, then check it out here: http://dotw-dev.byethost16.com/plinko/
Conclusion
I must say this was a pretty fun exercise. Years ago I thought I would never code again as I had gotten burned out on the whole thing. Now I have a new vigor in being creative again. I now have a helper in AI that can get me past more of the tedious things so I can focus on the creativity. Also having AI see things that we can miss because we are tired or frustrated and then giving an explanation of what was wrong and what the fix was, I felt was a huge help. It gave me a better understanding of how things were working. I'm having fun again.
I really hope you enjoyed this post of mine and if you have gotten this far, I say thank you.
Dudeontheweb