Coding with AI

It’s been a couple of weeks (plus) since I posted anything, and the last thing I posted was just a series of things I borrowed stole from other people. Frankly, it’s been a miserable month, health-wise, but things have improved vastly — almost miraculously, in fact — in just the past couple of days, and I’m happy to bang away at the keyboard.

Speaking of keyboards…the header photo merits a brief explanation. We spent a few days in Key West, Florida, and visited the Hemingway Home & Museum. One of the exhibits was a recreation of Ernest Hemingway’s office, and his Underwood typewriter was on display. We weren’t allowed inside the office and the typewriter was behind glass across the room, but I couldn’t resist getting a photo (and then messing with it).

So, this post is pretty geeky and if you have no interest in AI-related material, feel free to skip it. OTOH, if you’re skeptical about whether ChatGPT and similar chatbots have any practical use beyond helping college students cheat on their essays, I can offer some evidence to the contrary.

Some of you may recall that I did a decade-long stint as a freelance website designer/developer between assignments as a corporate drone. If you’re not sure of the difference between designer and developer, think about how an architect and a builder work together to construct a house. The architect should have at least a working knowledge of building materials but he or she doesn’t need to actually know how to use a mitre saw or a nail gun; the builder’s crew will handle that work.

As a freelancer, I didn’t have the luxury of handing off my website designs to a skilled coder to make those designs work. I needed proficiency in the basic building blocks of websites, which at the time — late Nineties/early Oughts — consisted of HTML, CSS, and Javascript.

I was pretty adept at the first two; much less so with Javascript, despite taking an online course. I could troubleshoot an existing Javascript, and if I found one that generally met my needs, I could tweak it to improve its usefulness. But I was incapable of coding one from scratch, and didn’t have the time or patience to gain that skill. That was part of the reason that I decided to move from web work as a fulltime position. (The main reason was that I was wearied from working long hours for less than minimum wage, even though I was having a lot of fun with the work itself.)

I still enjoy working with websites, and this blog provides plenty of opportunities to exercise what HTML- and CSS-related skills I’ve retained. But I’m still deficient in the area of scripting, and I intend to remain that way because I now have an expert coder on my team, and it works for free. I’m referring to ChatGPT.

Up to now, my interactions with ChatGPT and other AI models have been limited to generating images and posing questions that search engines such as Google couldn’t handle. But as AI has gotten more adept at coding, and as that capability is now readily available to non-professional users like me, I find the possibilities intriguing.

My test case: A photo “slider”

One of my favorite applications for the Gazette is the use of a “slider” to show before-and-after images of the same scene, or some variation thereof. Years ago, I found a preprogrammed slider script and I used it to compare a famous painting by Georges Seurat with an ad for which characters from The Office were inserted into Seurat’s layout. You can see the result here.

That slider works perfectly well, but it relies on a third-party library over which I have no control, meaning that it could disappear at any time. It also automatically places a watermark — seen in the lower right corner of the images — and I’m not crazy about that.

After reading an article in the Wall Street Journal about using the free version of ChatGPT to generate computer code, I decided to give it a whirl. Here’s the prompt I used to kick off the project:

Hello again. I need some help with script coding. I’m looking for a dynamic HTML script (Javascript, CSS, and HTML) that creates a slider on top of a photo that can be dragged to reveal (or conceal) another photo. I would use it as a “before and after” application in my blog, so it needs to be a self-contained script that I can drop into a post. Does that make sense, and can you create such a script?

ChatGPT responded immediately…

Hello again! Yes, that makes perfect sense, and it’s a great feature for a blog — especially to show before-and-after images interactively. Below is a self-contained HTML + CSS + JavaScript script that you can drop directly into your blog post. It creates a before/after image comparison slider that works without any external libraries.

It also provided the script in its entirety — HTML, CSS, and Javascript — in a format that I could copy and paste into any blog post. It provided documentation for updating the options to change how the slider worked, depending on the format of the images and whether I wanted the slider to be vertical or horizontal.

The first pass was close to what I was looking for, but not exact, so I provided ChatGPT with more precise instructions. It took a couple of iterations but I finally ended up with what I wanted. I especially like the addition of the labels. Try it out here (drag the yellow line back and forth):

The script allows me to customize (or eliminate) the labels and specify when they appear/disappear. I can also change the look of the slider bar and its initial position.

The interaction with the chatbot was interesting. ChatGPT actually suggested the before and after labels; I hadn’t thought about that feature. It had a couple of other suggestions that I didn’t use, but the process reinforced the feeling that it was a collaborative effort.

I don’t have any additional needs for coding assistance at this time, but it’s nice to know that the resource is available.