How To Build A Word Cloud App With ChatGPT (no coding required)
Photo by Jonathan Kemper via Unsplash
I was recently working with some survey data, and I had a large amount of open-ended responses that needed analysis. My plan was to create a word cloud to identify recurring topics and themes in the dataset, and I decided to try this out using ChatGPT. So I cracked open a new chat session and was pleasantly surprised to see how easy it was to upload my dataset and have ChatGPT generate a simple word cloud. From a single prompt, here’s what I got.
Word cloud created by ChatGPT
But as great as the word cloud image is, I found myself wanting more control over the output. For example, I wanted the ability to do things like adjust the minimum or maximum words shown, change the text case, or remove specific words from the cloud after it was generated.
So rather than going back and forth with ChatGPT, I switched gears and decided to ask it to build me a word cloud web app. And after just 30 minutes, I managed to get my app up and running!
In this article, I’ll take you step by step through my process. I also did this without writing a single line of code, so if you’re not a technical person, this post is for you. But do note that you will require access to GPT-4 and a paid plan to follow along with this tutorial.
Also, if you’d rather watch my video tutorial, you can check it out below. Otherwise, read on!
Planning your app
Before we open ChatGPT and start giving it instructions, it’s important that you have a plan. And when it comes to creating a plan, there are four steps you should consider. These four steps will help you craft a better, more effective prompt.
Step 1 - Do some research
Before you jump straight into writing a prompt and chatting with ChatGPT, it’s important that you take some time to do some research. Ask questions like, what kind of app do you want to build? What specific features or functions does it need to have? What other apps or resources already exist, and how do they work?
When it came to building my app, I wanted some specific features, but I also didn’t want to reinvent the wheel. While I was doing my research, I found that there were already some solid pre-existing Python libraries for generating the word cloud image (thanks to this article from Datacamp).
The Datacamp article also helped me narrow down the programming language I decided to use (i.e. Python) since there were already existing libraries that I could leverage to handle most of the app’s functionality.
Overall, sitting down and doing some research beforehand will help you write a better prompt for ChatGPT.
Step 2 - Choose an environment
If you’re building an app, you need to decide where to host it. Since I already decided I wanted to code the app in Python, this narrowed down my options a little. There are a few services for hosting Python apps, and I decided to go with Streamlit, a free service for turning Python scripts into shareable web apps.
Deciding on factors like what programming language and hosting environment to use is crucial because this is not really something you want ChatGPT to guess. Of course, ChatGPT can make recommendations based on your requirements. But I find that things will go a lot smoother if you decide on this in advance, and include it in your prompt.
Step 3 - Define your requirements
When writing your prompt, you need to provide a lot of detail about the various features and functions you want to see. Try to write your requirements out in a clear and structured way. I recommend listing the requirements in a numbered list and using sub-sections to go deeper into specific functions (e.g. 1.1, 1.2, 2.1, etc.).
It’s ok if your prompt ends up being a bit longer than usual. But you must also remember that LLMs, like ChatGPT, have limits. In particular, each chat session has a token limit that you won’t be able to exceed. Without getting too technical, what this means is that you’ll need to find a balance between being detailed and concise. At the same time, know that you won’t be able to create a super sophisticated app with thousands of lines of code. So, focus on building something manageable.
Step 4 - Create a wireframe
If you’re using GPT-4 on a paid plan, you can upload files for ChatGPT to interrogate. Although it’s not required, I highly recommend you consider creating a simple wireframe of your app so that ChatGPT can incorporate this. There are lots of great tools out there that allow you to wireframe for free, such as Miro, Figma, UXPin and MockFlow.
Now that you have a plan, we can start writing our prompt.
The web app prompt
Based on my research, I decided on a programming language (Python) and hosting environment (Streamlit). I was also able to narrow down my functional requirements, and I created a simple wireframe. Based on all this information, I wrote the following prompt and gave it to ChatGPT.
I want you to develop a word cloud web application using Python, which I will host on Streamlit. The core functionality of this web app is to generate a word cloud based on open-ended text data input. You should write the code based on the wireframe and requirements provided.
1. The user should be able to input text data by either pasting it into a text form field or by uploading a .txt or .csv file.
1.a) For .txt uploads, the open-ended text data should be comma delimited.
1.b) For .csv uploads, the open-ended text data should be separated across rows within a single column.
2. Once the text data has been input or uploaded, the user can click a button labeled "Generate Word Cloud" to run the app.
2.a) Upon clicking the "Generate Word Cloud" button, the processing of the data should include the following steps:
2.a1) Tokenization - separating individual words from the raw text using NLTK's built-in `word_tokenize`.
2.a2) Stop words removal - removing common and irrelevant words such as "and," "the," "of," and "it".
3. After triggering "Generate Word Cloud," the web app should display a word cloud where words appear larger based on their frequency/count in the original dataset. You can consider using the Python libraries 'matplotlib' and 'wordcloud' for this.
4. The font size of the words in the cloud should range from 8 to 60, with words appearing larger based on their frequency in the original dataset.
5. A left side menu for additional controls to modify the word cloud after generation should include the following:
5.a) Number of words - Users can change the maximum number of words that appear in the cloud. This should start at 5, have a maximum of 100, increment in intervals of 5, and default to 50. This function should be a slider.
5.b) Text color - Users can select different color profiles from a dropdown. The default should be black text on a white background, with another option called "Colorful" displaying a range of colors on a white background, where colors can be randomly assigned to words.
5.c) Text case - Users can select between "Upper case" where all words are in CAPS, or "Lower case" where all words are in lower case.
5.d) Additional stop words - Users can introduce additional stop words after generating the cloud, separated by commas.
6. After generating a word cloud, the user should be able to download a PNG version of the cloud by clicking a button below the word cloud labeled "Download PNG".
And below is the wireframe I created. I used Miro to do this, which you can use for free, and they have a helpful wireframe library.
Wireframe for word cloud generator app
ChatGPT’s initial output
After uploading my wireframe and prompt, ChatGPT was able to provide a full Python script and detailed instructions for deploying the app.
Aside from the Python code, ChatGPT also gave me some specific instructions I needed to follow (shown below). The first item in the list (i.e. Install the necessary Python packages) is particularly important because this will require us to take a few additional steps beyond copying and pasting the code provided. But we’ll come back to this later.
Now that we have our code, we’re ready to move over to Streamlit, which is where we’ll host our app. Streamlit requires the code for your web app to be hosted on a public GitHub repository, so if this is your first time using either of these services, start by going to GitHub and creating a profile. Once that’s finished, you can head to Streamlit and create your account. When creating an account on Streamlit, use the GitHub single-sign-on (SSO) option. This will give Streamlit access to your GitHub repositories (repos).
Once you’ve created a GitHub account, go to your main profile page and click New in the top left corner. This will bring you to the new repo configuration page. Give your repo a name, let’s go with wordcloud generator app. Make sure access to the repo is set to public, and then click create repository.
Next, we’ll create a new file in your repo, where we’ll paste the Python code written by ChatGPT. From the Code tab, look for the Quick setup section on the screen and click where it says “creating a new file.”
You will now see the code editor. Copy and paste the code created by ChatGPT and give your file a name. One very important thing to note is that how you name your file could create conflicts with your code, particularly if your script involves importing pre-existing libraries/modules (and this one does). For example, this script involves importing an existing Python library called wordcloud. And if you were to name your script wordcloud.py, this may create an import conflict that prevents the code from running.
So I recommend naming your script something unique (i.e. don’t call it wordcloud.py) To keep things simple, let’s just name the file streamlit_app.py (and make sure you include the .py). Take note of the filename as you’ll need it later when you connect Streamlit to your repo. When you’re ready, click commit changes.
Before we finish up with GitHub, you must do one more thing. Earlier, I mentioned that ChatGPT provided special instructions for deploying the app. In particular, it said we must “Install the necessary Python packages (streamlit, matplotlib, wordcloud, nltk, pandas).” These are pre-built Python libraries that handle special functions performed by our app.
For example, the wordcloud library (shoutout to the author Andreas Mueller) provides the underlying code used to generate the wordcloud, while nltk is a popular python library for natural language processing. So the script ChatGPT’s has written isn’t necessarily writing all of the app’s functions from scratch. Rather, it has created an interface that leverages pre-existing code libraries. What’s important here is that we need our script to tell Streamlit to pre-load these libraries (i.e. wordcloud, nltk, pandas, etc.). Otherwise, the code won’t work.
To do this, go to the Code tab of the repo you created, then click Add file. Name this file requirements.txt (it’s very important that you name it precisely this way, including the .txt extension). Then, paste in the following snippet and click commit changes.
streamlit
matplotlib
wordcloud
nltk
pandas
It will look something like this.
Your repo should now have two files: the main codebase (streamlit_app.py) and the requirements.txt file.
Setting up your Streamlit app
We’re done working in GitHub for now, so let’s head over to Streamlit. I assume you’ve already created and connected an account to your GitHub profile. So once you log in, click New App in the top right corner.
From the next screen, under Repository, you should be able to select the new GitHub repo you just created (i.e. word cloud generator app). Leave the Branch as main, and under the Main file path, paste in the exact file name you used when setting up the codebase on Github (i.e. streamlit_app.py). Now click Deploy!
Congrats, you’ve officially deployed your app! Let’s have a look.
That’s looking pretty darn close to the wireframe I created, amazing!
Now, let’s give it a try. You can copy and paste your text data or upload a CSV / TXT for this app. I’ll try uploading my data as a CSV. But upon uploading the data, I get an error!
ChatGPT’s ability to write code is impressive, but it doesn’t always get things right, especially on the first try. So, you’ll need to be patient and be ready to troubleshoot. To do this effectively, you’ll have to give ChatGPT as much information and data about the problem as possible. Thankfully, Streamlit allows you to download detailed log files that we can use to help diagnose the issue.
To download a log, go to your Streamlit app and click Manage app in the bottom right corner, then click settings (i.e. 3 dots icon) and Download log.
Now, head back over to ChatGPT.
Troubleshooting
Continuing on from the existing chat session, I used the following prompt to troubleshoot the error I received.
The app will load successfully. However when I import text and click the “Generate Word Cloud” button, then the following error appears:
<< paste error text >>
I’ve attached a log file from streamlit. I would like you to analyze the error and log file to help troubleshoot the issue. Once you have identified the problem please provide the updated code that will fix the issue.
ChatGPT analyzed the log file and found the root cause was a TypeError (color must be int or tuple), which occurs when text is drawn onto the image in the word cloud generation process. ChatGPT generated a revised script, which I used to replace the existing code in my streamlit_app.py file in my GitHub repo. After re-running the app, I could generate a word cloud error-free, but now I have found new problems.
In this release, my word cloud generated colourful text even when “Black text” was selected. Second, the word cloud included the word NAN when importing data from a CSV (i.e. pasting in text or using a TXT file didn’t have this problem). The NAN issue suggests that the script registered empty cells in the CSV import as words. At this point, I also realized that ChatGPT ignored one of my original requirements, including a button to download an image. In fact, in the first version of the code, there was a comment that said #Download button (not fully implemented), which I missed the first time I reviewed the script. So, I’ll also ask ChatGPT to try to incorporate this feature now.
I went back to ChatGPT and described the latest round of issues / requests with the following prompt:
Based on the latest script you provided, the web app can sucessfully generate a word cloud without an error. However, there are a few more issues I need your help fix, which I’ve detailed below.
1. The word cloud text colour appears ‘colourful’ even when “Black text” is selected. This is not the correct functionality, as the text should appear black when “Black text” is selected. Black text should also be the default state.
2. When importing data from a .CSV the word NAN appears in the word cloud. Note that this issue does not occur when I paste in the text data or import via a .TXT file. The word NAN should not appear and suggests that there’s an issue specifically with the .CSV import format.
3. In the original code you provided, you seem to have forgotten to include a "Download PNG" function. This should be a button that allows the user to click it and download a .png image of the generated wor cloud. Please include this feature in the next update.I would like you to provide me with updated code based on the issues / requests listed above.
Based on this prompt, ChatGPT once again generated a new script. I pasted the latest script into the GitHubt repo and voila!
You can try out the live word cloud app by following the link below (if the app says it’s asleep then just click that button that says “Yes, get this app back up!”).
And here’s a link to the GitHub repo if you’d like to download or clone the codebase.
The latest release and all requested functionality are now working perfectly. I can import my data, either by pasting it in or importing a CSV/TXT, I can control the number of words in the cloud, change the text colour and case, introduce additional stop words, and even download a PNG file.
Overall, this process was fairly quick and painless. Though we encountered a few minor hiccups along the way, I have tips for you to consider when coding with ChatGPT.
Some tips for coding with ChatGPT
Tip 1 - Make your first prompt count
When I first started building this app, I experimented with a few different approaches to prompting. One approach was to keep the list of instructions and overall prompt shorter as a way to get the base app up and running; then I planned to iterate it and add new features over time. This approach created many problems because I found that ChatGPT would often completely rewrite its own code from scratch. This meant that when ChatGPT would fix issues or introduce new features, it would redesign and sometimes even break other features that were already working.
So, make your first prompt count by laying out all of your core requirements in one go. It’s okay if the prompt is longer than usual, and you can try using a tool like PromptPerfect to optimize it for the best results.
Tip 2 - Know the limitations
As with any AI chat assistant, there are going to be limitations. ChatGPT has something called a token limit, which is a cap for how long your conversation can be. Without getting into the technical aspects of token limits, just understand that you won’t be able to ask ChatGPT to build a highly sophisticated app with thousands of lines of code. For context, the python script covered in this article is only 97 lines of code, and we still had to go through through multiple rounds of bug fixing and troubleshooting. So, if you’re considering using ChatGPT to build an app, ensure you’re going into this with realistic expectations.
Tip 3 - Learn some basic coding
You may be reading this article because you’re less technical and love the idea of getting an AI to code for you. And that’s all well and good. But you’ll find that having at least a basic coding knowledge can go a long way. Sometimes, ChatGPT only gives you code snippets to make changes, requiring you to know what parts of the code to update. And if you’re 100% reliant on ChatGPT to make every possible code change, no matter how small, you might find that this process doesn’t work well.
Conclusion
Generative AI models like GPT-4 can do some pretty incredible things when it comes to writing code and building apps. In this example, I built a fully functional web app that processes and visualizes text data in a word cloud format, all in under 30 minutes.
But it’s not all rainbows and unicorns. As you saw, the code didn’t even work the first time I tried it. So, it’s important that you set realistic expectations for what an AI like ChatGPT can do. And most importantly, make sure you plan and prepare thoroughly to give clearer instructions.
I hope this post was helpful. If you enjoyed it, please consider sharing it on your socials. And as always, thanks for reading.
