I have decided to start a series to share how I use Ai to create any type of application and share the fully working code here.
In this first article, I am going to share how I used Chatgpt to create a rather complex JavaScript application.
You can check the application in action at https://www.thecanvasprints.co.uk/.
Just go to the website and click “Upload Image”. It would open a Bootstrap Model window and preview the image as a canvas print, and you can view it from all sides as a 3D canvas print.
There are also a few image editing options that could fit in one window, along with the size and price options.
There is also an option to choose the side wrap i.e Gallery, Mirror, and Colour. The colour option shows the colour palette and changes the side wrap colours of the canvas in real time.
After you finish designing the canvas, it is added to the shopping cart. The website is built on nopCommerce, so only a minor change was required to pass all the settings in JSON, and the original image as Data to the backend.
In my opinion, Chagpt is a really good assistant programmer except she knows a lot more than you do, but she needs proper instructions to do the work.
This whole javascript application is done by Chatgtp with my instructions. I only changed a few things that ChatGPT couldn’t do after many attempts.
I am a Dotnet programmer mainly so I have less experience in Javascript. I do understand but haven’t done anything from scratch in Javascript before this.
In other words, you need to understand basic programming concepts before you can build applications using AI.
You can’t just give a random instruction and hope it will provide you with the complete application.
So here is how I started and finished the app.
Go to ChatGPT (I have a paid subscription, £20/month), which is not expensive considering I use it every day for many things.
In the first instruction, I would start with a small “to the point” instruction. If you give too many instructions at start, it will write a lot of code, and it would be hard to handle as there can be many errors in the code.
So start with small instructions, my first instruction was “make me a canvas print 3d model straight front of size 60”x40””
This is how it all started. ChatGPT gave me the JavaScript code for a 3D preview of canvas that user can spin/zoom.
The trick is to start with the centre of the application and build the features around it.
In this case, the centre is a canvas 3d preview, and then all the editing options of the image and add to cart option.
You have to make sure every time you get a code from AI, you check if it’s working. AI can break the code at any point, and you will be wasting time fixing errors if you don’t check the code at every point.
Next, I needed to make sure the preview is exactly what I wanted, so I fixed the preview.
One I was happy with the preview, I moved on to fix the actual issue which was Gallery wrap. It was showing the Mirror and Solid wraps perfectly, but couldn’t fix the gallery wrap maths.
For the gallery wrap, we needed to start the image after leaving the wrap size, and AI was having a hard time doing the calculations.
So after struggling with it for a whole day and countless different variations of instructions, I decided to look at the code and fixed it in a couple of hours so this was the only bit that I really worked on using my mind :) and programming skills.
All the other code in the app is written by AI completely.
After fixing the Gallery wrap, the next task is to allow the user to upload the image. So far, we have been using an image URL for the canvas.
AI added the “upload image” option, but when the user uploaded the image, it was being stretched to fit on the canvas, so I gave the following instructions.
Next, I gave a back image to be used as the backside of the canvas, so when the user rotates the canvas, it looks like a real canvas in 3d.
Next option was to add sliders for zoom, position X and position Y. This worked well on it’s own but had an issue with the gallery wrap.
But when the gallery wrap issue was fixed, the sliders also worked fine. It was just the Maths that AI was unable to calculate properly.
After this I added Flip and Rotate options and used a slider for the Rotate Option. This was very straight forward.
Then added Image effects, which were really very straightforward.
After this, the option for the user to enter the size and redo the canvas according to size. This took a few instructions but nothing hard.
Finally, I added price, Wrap size, coating options, and an option to download the final image, plus an add to cart button.
Add to cart simply takes the screenshot of the final preview, original image URL, all the options selected, and adds it to the cart.
The system is built in Nopcommerce, so I had to make a little adjustment, but nothing major in Nopcommerce for this.
At this point, the app is complete, but I needed to make a nice design layout for the app.
I asked AI to separate the JS code and HTML files with a simple instruction, and it did that easily.
After this, I asked to design the layout in Bootstrap with three columns and follow the existing design I had for the app. It generated all the HTML very easily. I only had to adjust a few minor things.
AI generated responsive HTML so it worked on all devices.
I had some issues in Iphone and AI fixed those design issues as well.
At this point, the app is complete, so I uploaded it to the website after testing it for a whole week with different options, image types, and variations.
In testing, I found out image type HEIC is not working. So I again asked AI, and it generated a code that worked with both HEIC and other types of images, JPEG, PNG, etc.
So that’s it. I uploaded the final app to the website and it’s working absolutely fine. We have no user complaints so far and users are happy with it and its actually increased the conversion rate.
I have attached the complete code in HTML/Js format if anyone wants to use it in their project. Just don’t forget to link back to us 🙂
Download Code here
Make sure to open the code under IIS website or upload it to any website and open in browser.
