Building A Web App With AI: Part 1

AI will replace us all.

At least that's a lot of what I hear these days. According to this article:

Tech jobs such as software developers, web developers, computer programmers, coders, and data scientists are "pretty amenable" to AI technologies "displacing more of their work",
- Anu Madgavkar, a partner at the McKinsey Global Institute

I can remember a time when these types of jobs were considered solid because of the skills required to get such jobs. Now, that doesn't seem to be the case. There is a lot of anxiety about how AI will take lots of jobs. I guess this is not too far from the fear that craftsmen felt at the start of the Industrial Revolution. We are experiencing another revolution and this time it affects all types of workers, not just laborers.

I am not a developer (anymore; there was a time when I was) but I do understand software development practices. Still, I wanted to know how easy it would be to leverage ChatGPT as the engine behind a web application. How easy would be it be to have a user-friendly web page that could query ChatGPT and present the results back to the user?

The Start

The first thing I did was go to the ChatGPT API documentation site: https://platform.openai.com/docs/overview. There, I found a quick start tutorial which lead to some sample code: https://platform.openai.com/docs/api-reference. The guide provided examples for Python and Node.js which are the two officially supported languages but there are a bunch of community-supported libraries for other languages.

I originally tried to use Node.js because I found several video tutorials using that language as a basis but I gave up on that. First of all, because I'm already familiar with Python and, secondly, because most of the video tutorials I found were overkill for what I needed. I just wanted get familiar with making API calls to ChatGPT; I didn't want to get into CSS and all that. I could learn that later when it came time to tweak the user interface. Right now, I just needed code that worked.

The next thing I did was setup a github code repository and codespace. Since I discovered the github codespaces, I really like using them. Using github is a great way to keep track of my progress as the code evolves. And the codespaces are great because they provide a development environment that is accessible where ever I go. Of course, I could setup the same environment on my laptop but I just like the flexibility of being able to access both my code and the revision history from anywhere.

Let AI Teach You About AI

The next step was to search examples of web apps that others had created to interface with ChatGPT. Why reinvent the wheel, right? I did a search on Google and found several example projects but, just like the video tutorials, they all seemed too much for what I wanted to do. Then it dawned on me...why not just ask ChatGPT for the code? I mean, after all, lots of people are using ChatGPT to help them write code. If anyone knows how to best interact with ChatGPT, it would probably be ChatGPT! So why not ask it directly?

So that's what I did. I gave it this prompt:

Give me the code to create a web application in python. The web application should take input from the user, then use that input as part of an OpenAI API call to chatgpt, then the results of the API call will be displayed in the web application.

Sure enough, it gave me exactly what I needed in just a few lines of code.

First, it recommended I use Flask and it gave me the command to install it in my Python environment. It then gave me a code snippet that included the following:

• HTML code to present a form to request input from the user.
• Code to issue a request to ChatGPT and get a response.
• HTML code to present the response to the user.

All this just a few lines of Python code, enough to fit in a single file. Now here is where it gets interesting. When I first ran the code, it did not compile correctly. Some of the code that ChatGPT provided was outdated. Also, the code ChatGPT provided assumed I only needed one piece of information from the user. I needed more information so I had to modify both the HTML form and the Python portion to collect all the information I needed.

So, even though ChatGPT provided a very good starting point, I still had to do some tweaking to get the web app to work they way I needed it to.

Web App Version 1.0

I eventually got the application to do what I wanted to: take several bits of information from the user, combine that information into a prompt, send the prompt to ChatGPT and return the results to the user.

Functionally, it meets all my requirements. But the GUI is not yet what I want it to be. For starters, the response from ChatGPT is rendering as one big paragraph and it's hard to read. Also, the response is being presented in a separate HTML file. I would like to have the response show up immediately below the request.

All of that will have to be in the next iteration. For now, at least, I have achieved something new. I used AI to help me build a website that uses AI to give a user useful information.

Conclusion

Using AI can give you a great starting point but it can't solve all your problems. I encountered several issues with the code that required me to do more research on my own. I also had to modify the code to gather more input from the user. And I had to figure out how to combine all that information into a prompt that ChatGPT could understand.

Yes, AI can make you more efficient. But your creativity and problem solving skills are still needed in order to get to the final product. So technical jobs will be impacted by AI going forward. But AI cannot replace humans just yet.