Episode 8: "My Experience Asking ChatGPT to Code HTML and JavaScript"
Listen to this episode:
Episode description:
In this episode I describe my recent experience asking ChatGPT (using the premium version GPT-4) to write basic HTML and JavaScript code for a simple website.
SMERL: Synthetic Media Elections Restriction List
https://smerl.io
Episode script:
Hello everyone. My name is Scot and if you’ve been listening to this podcast, you know I’ve been sharing what I’m learning about generative artificial intelligence. I’m also beginning to take the show in a more specific direction of AI safety, policy, and ethics – but I did have a recent experience with using ChatGPT that I would like to share with you. Basically, I leveraged ChatGPT, actually the premium version GPT-4, to create a simple website that required both HTML and JavaScript. I had seen some demo videos and claims that ChatGPT could write code, and I wanted to see for myself. Let’s dive in.
First, what kind of website did I want to create? Well, I had a relatively simple idea, which was the result of being able to use generative AI tools to create images and text of famous people. I like the term “synthetic media” so let’s go with it – and I kept thinking you know, it is so easy to create synthetic media of politicians, and at scale, and this could happen right before an election, which is not good. Generative AI companies might want to implement some temporary blockers that won’t accept the names of politicians for an upcoming election. I get that this wouldn’t completely eliminate the possibility of synthetic images being created, someone gave me the analogy of a liquor store being closed on Sunday, or maybe the day of a major sporting event in town – it doesn’t really stop people from possessing alcohol. But it does reduce the problems people are trying to address. And I believe that the scale and ease of generating synthetic media, especially images, could use a little help around election time.
And the website was intended to help in this regard. If you are at an AI company and need to create these temporary filters, it’s a bit of a pain to stay on top of all of the elections happening globally, and then find out what names of politicians are involved, create a blocklist, just to remove it in the near future. I wasn’t really sure if this tool would be that useful, but I knew it wouldn’t take too much effort to create. And then I had the idea to create it with ChatGPT. If you believed the demos, I should be able to have the site up and running in an hour. I mean, I already have a hosting provider for other projects.
I did go a tiny bit overboard.. I mean I didn’t need to register a domain, but I did. I even came up with a ridiculous name and URL. I call the tool SMERL – S-M-E-R-L – for Synthetic Media Elections Restriction List – and I registered the domain smerl.io – and .io domains are not the cheapies! Furthermore, I even sprung for the SSL certificate for the domain. For those that don’t know, that means that the site would be accessed via https in the browser address bar, have a nice little green padlock, and not throw any security warnings. I mean I needed my elections safety tool to project safety from the jump.
Okay so once I had my domain set up and pointed to a hosting folder where I keep the files, I did what I believed would be the only busy work for the project, which took about 30-45 minutes. I made a spreadsheet with any election happening in the world for the next three months, and listed the country, election name, and the names of politicians involved.
Now my idea was that the user of the site would be someone setting up a blocklist for a generative AI tool. And so I don’t know what their election policy is going to be, maybe they only want to block the politicians’ names two days before an election.. Or maybe two weeks? I wanted to give options. So I envisioned a website that would display today’s date, and then offer a drop-down menu with the option to choose to show any elections that are two days away, five days away, seven days, 14 days, and 30 days away. And depending on what the user chose, underneath would populate with the elections and politicians’ names. The user could then copy and paste them into their blocklist for whatever AI tool they manage.
Okay, with me so far? Simple website. Display today’s date. Drop-down menu. Depending on the selection, populate text below. I didn’t care about how it was going to look, honestly. I was more concerned with just having a working version.
By the way, now that I have described the site, if you are near a computer while listening to this, you can visit smerl.io and see it in action. Don’t expect much, because aside from a basic logo at the top, there’s just text doing exactly what I have been describing.
So here’s the interesting part. It was pretty painful to create this with ChatGPT. Now, I am completely capable of coding this up myself. There are multiple ways to execute these requirements, but I wanted to keep it simple and use one HTML file and some JavaScript. I figured for organization’s sake, let’s put the election data into one JavaScript file – data.js – and the JavaScript functions in another file – index.js – and use one HTML file – index.html – to render everything for the browser.
It actually started out really well. And I expected it to.. I mean, when I started to describe the website and functionality to ChatGPT, and based on the information and videos I had seen, I would have been really disappointed if it couldn’t give me the HTML file with the copy I specified and the dropdown menu. And I got that right away. But of course the dropdown menu didn’t do anything yet.
The next task actually went relatively smoothly as well – this was giving ChatGPT the text from my spreadsheet – all of the elections data including the politicians’ names – and having it format it into an array in the JavaScript file data.js. There was a little back-and-forth, but it basically did what I asked it to do and created the file.
And then it got rough. I spent probably about 5-6 hours over the course of a weekend to get the index.js file – the file containing all of the logic to correctly display the data at the bottom of the webpage – to work properly. The session devolved into a constant repetition of me asking for the behavior I wanted, and ChatGPT saying things like, “Sure no problem! Here is the code you need.” Followed by me saying, “That didn’t work, now there is nothing, or now it is behaving this way” – and then ChatGPT saying something like, “I’m sorry, that is because this function is doing this thing, here is the updated code” – and then again me saying that it didn’t work, providing errors from the browser’s developer console, over and over and over again. Sometimes it would make progress, and I would get excited, like ooooh we are almost there! And then the next update would totally break it and be a setback.
BUT, after 5-6 hours total, it worked. Like I said, you can see the working site at smerl.io
So what did I learn about how ChatGPT’s ability to code? Honestly, at this point in April of 2023, it’s not that good at executing what are pretty simple functional requests. Of course, the generative AI space is moving at an incredibly rapid pace, and it is entirely possible that in just a few months time, the same session with ChatGPT could be totally different. It does seem inevitable that the functionality I was going for will be a simple thing for it to do. We just don’t know when. For the time being, it seems like ChatGPT is not going to replace web developers, software engineers, or in general people who code. But as many people have been saying, and I’ve said before on this podcast, it can be a really solid helper or assistant. Like I mentioned, it created the data array I needed from my spreadsheet with relative ease, and that saved a lot of time – for that particular task. And by the way, you can’t upload a spreadsheet file into ChatGPT, I had to just copy and paste the data into the text field. And the pasting was messy. But ChatGPT didn’t care, it could tell what data was originally in which cells, columns, and rows.
Bottom line, we are still in the early days of these tools. But it sure seems like now is the time to get in there and learn. I’m dating myself but my freshman year in college began in the fall of 1993. Not all kids in the dorms even had computers. And the ones that did, they were running MS-DOS and early versions of Windows that you had to initiate from a command line. Just to write a paper, or play a simple game, you had to learn some new, uncomfortable tasks, and it was often frustrating. But it was rewarding and exciting, and we knew that it would only get better and better. Right now kind of reminds me of those times, in many ways. But it does also feel like the stakes are much, much higher. Even in these initial stages, the tools are crazy powerful, and can be used in so many nefarious ways. Which is why I’ll be talking a lot more about safety in this space, policies that are needed, ethical considerations, and legal and regulatory news. But I hope my experience with ChatGPT’s current coding capabilities was interesting for you. Bye for now!