Thursday, March 30, 2023

programming via ChatGPT

I was laughing at the javascript  code I made in 2005 to show you what day of the week a date fell on for a series of years. That was before jQuery, but I'm not sure I was following best practices then...

I thought I'd rewrite with a better visual display, giving a sense of how the day of the week changes. And I thought I would see if ChatGPT was up for the challenge.

At first I thought I'd just recreate the old UI:

please give me the html and js with a select for month, and a selector for day of month, and an input for starting year and an input for ending year, and a button the selectors are prepopulated with today's date the starting year is 50 years ago and the ending year is 50 years in the future. when you click the button a div is populated with that date for each year in the range and what day of the week the day is for that year

And frankly, ChatGPT pretty much nailed it - I immediately had a better version of my 2005 code. 

But for some reason the inputs were hardcoded in based on right now, when the page is written, so I asked

great work! could you make it so that the starting and ending year fields are populated with 50 years before and 50 years after the date when the page is loaded?

And that was an easy enough fix. So I programmed via describing what I envisioned for the new version:

great work again! could you change it so that "date-container" is actually a table. The top row should be a row of header elements. The firsts header column should say "Year". There should be 7 more columns, each with the three letter version of the day of the week. Then each row beneath, the left column should be the year, and the corresponding column for what day of the week that date is on should be marked with the first initial of that day of the week and the background color should be green
I am truly impressed with the output of that. There were some quirks; the script part got cut off so I had to ask for it to finish (not sure if that's just a quirk of the free version or what), not sure why it went with 100% width for the table or made the "Year" header element left aligned, etc.

I asked for a few more changes, but was getting the "cut off" problem a bit more (despite it electing to start putting the script into a separate file) and decided to make the finishing touches on my own, including highlighting the current year, and automatically filling the table on load...

I even asked it for some aesthetic help when "cyan" wasn't quite what I wanted for the current year highlight:
for the css color "green", what would be the hex code for softer shade of blue that would complement it well?

A softer shade of blue that would complement green could be a pastel or muted blue color, such as a light or medium shade of sky blue. One possible hex code for this color is #87CEEB, which is a pale blue color that could work well with green. However, color choice is subjective and dependent on the specific design and context, so you may want to experiment with different shades of blue to find the one that best complements your specific shade of green.

Stephen Wolfram has a pretty good explanation about how ChatGPT works. And it's amazing to think that this is just hyperfancy "markov chains" thinking of what the a likely next word to say might be.  I feel there is true intelligence in embodying those conceptual connections that must be there for it to be making the minor changes requested - like most often it's not ripping off any one other program. 

On the other hand, sometimes the fact that it's not doing proper full mental modeling of things will come up... but, wow. Impressive and alarming! Both in terms of what it can do and what that means for people who have made their living programming, and where it will have some surprising limitations, like how it started hardcoding the start and end years.

No comments:

Post a Comment