ChatGPT Tried Rewriting my Web App
An attempt to let ChatGPT replace the developer.
Last week, I finally created a web app for a relative studying genealogy. The app takes a CSV word map and converts text into a translated sentence by word replacement. This was to be used as a dialect converter from English to Appalachian English (grammar with words phonetically spelled, e.g., ‘followed’ = ‘follered’). I thought the app would be simple enough to implement quickly and open to various approaches.
Developer Approach
I used Vite to generate a boilerplate React app and created a new component called TranslatorPage.tsx to hold the page and the logic. I’ve used Mantine for a long time and love the beautiful UI components provided in their package, so I opted to leverage that to implement this quickly.
Luckily, Mantine offers a “FileButton” component that can be used to select a file from the hard drive. I’m enforcing only CSVs to be loaded. Since I’m providing written instructions on the CSV columns, I’m not worried about checking it or throwing errors in the code; I took this liberty to save time.
As a developer, I might have to defend my ill-optimized approach. I’m looping through the dictionary rather than taking each word from the input. I intended to avoid dealing with punctuation in the input. With 600+ words in the translation map, the latency is not noticeable. The regular expression will match the word regardless of the casing, so if the input sentence is all-caps, it will match with the translation map, but the replacement will be lowercase.
for (const [english, dialect] of translationMap.entries()) {
let esc = english.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
let reg = new RegExp(esc, 'ig');
input = input.replaceAll(reg, dialect)
}I completed this app in under 100 lines of code in about 3 hours!
ChatGPT Approach
To set up the other repo, I used Vite again to create a boilerplate React app. I also wanted to instruct ChatGPT to use Mantine as the UI component library to achieve the same design as my approach. My prompt was:
Create a React page with the Mantine UI component library. The title should be 'Dialect Translator,' It should have a button to select a CSV file, an input for sentence input, and an output to show the resulting translated text.
I immediately noticed the import statements ChatGPT provides are from a deprecated version of Mantine. There is no component ‘Output.’ This is because ChatGPT was trained on a dataset in 2021 and has no access to the latest documentation. Still, I’m impressed with its awareness of Mantine as a package!
At first, the file selection button was just a regular button. I had to add a follow-up prompt to clarify that it should select a file on my local hard drive.
Make the button select a local file on my hard drive as the CSV file.
ChatGPT doesn’t seem aware of the “FileButton” and chooses the basic input tag instead. Maybe this is also because “FileButton” is too new.
Next, I add more details about the app's purpose and describe the functionality. Surprisingly, the bot delivers!
Write logic for the handleTranslate function to parse the CSV file. Column 1 will be source words, column 2 will be translated words. Create a word mapping to apply to the input. The output will be the translated text.
And with that, the primary functionality is in place! The app works just as I had intended it to. Of course, there are formatting problems in the design, and a human would have to fix those. In the handleTranslate function, the bot doesn’t check for null cases—such as if the CSV file wasn’t selected. Perhaps it did this to save time. I suppose robots and humans aren’t too different after all. 😂
It took around 4 prompts to achieve this. I think my ChatGPT instance reset a couple of times due to inactivity. I occasionally got a “Network problem” error and had to refresh the page.
The bot’s approach to replacing words was different than mine.
const words = input.split(' ');
const translatedWords = words.map((word) => {
return wordMap.get(word) || word;
});
const translatedText = translatedWords.join(' ');Here, it’s splitting the input up by spaces into an array. This is means words with adjacent punctuation symbols won’t get translated. My prompt was vague and the bot is doing an incredible job inferring the intended logic succinctly. With more clarification, this could be easily improved.
Which Was Better?
Admittedly, I had to intervene a couple of times. I couldn’t just copy and paste what the bot generated. When the bot didn’t want to write out specific functionality, it added “TODO” comments describing what would be there. I had to follow up with another prompt to get that desired functionality in those cases.
The bot needed to be more robust when formatting the single-page web app. Mine wins in terms of UI layout. I wanted to do one more prompt and ask, “How would I deploy this as a SPA?“ but received a dreaded “Too many requests, please slow down,” which meant I had to refresh my browser and do this all over again. I stopped while I was ahead and gave the bot the benefit of the doubt: it would probably offer me common hosting platforms to deploy this SPA. Deployment, however, requires a developer (for now)!
ChatGPT accomplished what I asked it to do, and I didn’t have to learn anything about CSV parsing in JavaScript. But then again, where’s the fun in that?
You can compare my solution to ChatGPT’s on GitHub. The ChatGPT solution’s commits are broken down into iterations to show the prompts that generated them:
Cover DALL·E image: “A robot programming on a laptop in a coffee shop, photograph.”