When ChatGPT was first released, I tried creating a basic Android app using ChatGPT. When a developer created Flappy Bird using ChatGPT, I considered creating a web-page the same way. Building a static web page would be boring, so on 28th May 2023, I thought it'd be fun to make an interactive page that replies like Groot. Turns out, I'm not the only one who had this idea.
- A person made ChatGPT reply like Groot.
- There's an SMS bot like Groot.
- There's also a GrootGPT which is code adapted from CatGPT.
Anyway, this is the GrootGPT which I built without typing any code. ChatGPT created and refined the code based on prompts I gave it. GrootGPT is unique, with the ability to output emoticons to user prompts that reflect specific emotions:
Prompt Engineering
First, it helps to prime ChatGPT about what you want it to do. There's a skill people need to have, to perform Prompt Engineering. There's a comprehensive guide here and a nice summary here.
I found this prompting guide too on the internet.
- Tone: Specify the desired tone (e.g., formal, casual, informative, persuasive).
- Format: Define the format or structure (e.g., essay, bullet points, outline).
- Act as: Indicate a role or perspective to adopt (e.g., expert, critic, enthusiast).
- Objective: State the goal or purpose of the response (e.g., inform, persuade).
- Context: Provide background information, data, or context for content generation.
- Scope: Define the scope or range of the topic.
- Keywords: List important keywords or phrases to be included.
- Limitations: Specify constraints, such as word or character count.
- Examples: Provide examples of desired style, structure, or content.
- Deadline: Mention deadlines or time frames for time-sensitive responses.
- Audience: Specify the target audience for tailored content.
- Language: Indicate the language for the response, if different from the prompt.
- Citations: Request the inclusion of citations or sources to support information.
- Points of view: Ask AI to consider multiple perspectives or opinions.
- Counterarguments: Request addressing potential counterarguments.
- Terminology: Specify industry-specific or technical terms to use or avoid.
- Analogies: Ask AI to use analogies or examples to clarify concepts.
- Quotes: Request inclusion of relevant quotes or statements from experts.
- Statistics: Encourage the use of statistics or data to support claims.
- Call to action: Request a clear call to action or next steps.
- Sensitivity: Mention sensitive topics or issues to be handled with care or avoided.
The bullet points above were actually in an image. I used Tesseract OCR to convert it to text, using tesseract --dpi 160 -l eng theImage.png output.
The process of building GrootGPT
I began by telling ChatGPT what I intended to do:
Me: I want to create a program
ChatGPT: That's great! I'd be happy to help you with creating a program. Could you please provide some details about the program you would like to create? Specifically, let me know what the program should do or any specific requirements you have in mind.
Me: I want a simple html page which contains a chatbox that resembles the chatgpt chat
It generated code which the browser rendered as this:
 |
| Initial chatbox generated |
However, entering text and clicking "Send" did nothing. So I asked ChatGPT to add that functionality.
Me: please modify the code so that the user can press enter to submit a chat message.
ChatGPT: Certainly! To enable submitting a chat message by pressing Enter, you can add an event listener to the input field. Here's the modified code with that functionality:
 |
| Chatbox now allows input and responds |
Now the chatbox responded too. It was interesting that the generated code was already primed to show messages at the left and right sides of the box.
Then I gave it a series of instructions, to each of which it modified the code to suit my requirement. Some of the instructions were:
Me: Please modify the program to have the following characteristics: Firstly, the background should be dark grey. Secondly, the title of the page should be "Groot GPT". Thirdly, the background of the chatbox should be light grey.
Me: please modify the code such that the text of the chat should be black. the chatbox and the input box should be centered. The maximum of the chatbox and input box should be 400 pixels. The chats of the first user should have a light blue background and the chats of the second user should have a pale orange background.
Me: all responses and initial message from the bot should be "I am Groot". Also, please change the colour of the pale orange background to a pale green background.
Me: please modify the code with the following: The edges of the chatbox need to be curved. Please make the outer border of the chatbox 5 pixels thick. Align the "Send" button's right end with the right end of the chatbox. Make the chatbox background 20% darker. Change the "Type your message" to "Chat with Groot". Provide circular profile photos for both users of the chat.
Me: provide a floating menu bar at the top of the page and a thin shadow below the menu bar. The extreme right side of the menu bar should have a text "Groot GPT" and the extreme left side of the menu bar should have one buttons. The button should have text "About". The background colour of the menu bar should be the dark brown color of groot of guardians of the galaxy. The button of the menu bar should be the green color of an evergreen tree leaf.
Me: you made a mistake with left and right. Please swap positions of the text and button in the menu bar. Also, please align both sides of the chat textbox and button with the chat display. If the "About" button is clicked, it should display a lightbox with the following text "Created by Navin".
I wanted to see if it'd be able to use an image from the internet.
Me: please use the icon from this page https://icon-library.com/images/small-heart-icon/small-heart-icon-17.jpg for the assistant and use the icon from this page https://icon-library.com/images/small-heart-icon/small-heart-icon-4.jpg for the user. Change position of the "about" button to the extreme left of the screen and change position of the "GrootGPT" text on the menu bar to the extreme right of the screen. Ensure that the menu bar does not cross page limits. Make the menu bar colour lighter brown.
 |
| Progress so far. The lightbox content was rendered wrongly |
It didn't really understand the meaning of left and right. Even if it generated the code correctly once, by the time I prompted it again, it'd swap back the widgets to the wrong sides of the page.
Me: I asked you to swap places of the menu bar's about button and the "groot GPT" text. Please do it.
ChatGPT: Apologies for the confusion. Here's the updated code with the About button on the right and the "Groot GPT" text on the left of the menu bar: <code>
Me: please replace both profile images with dummy image names named "profile1.jpg" and "profile2.jpg". Ensure that all chats shown on the right side are chats of the user and all chats shown on the left side are chats of the assistant. When the page is initially shown, the lightbox should not appear. The lightbox should be displayed only when the "about" button is clicked. When the lightbox is shown, the background of the entire page should be dimmed and the lightbox should be shown clearly with a light brown background and a default close button.
ChatGPT: Apologies for the oversight. Here's the updated code with the changes you requested:<code>
Me: when the page opens, only the assistant should say "I am groot". The user should not say "I am groot". Also, please swap positions of the "About" button and the "Groot GPT" text on the menu bar.
ChatGPT is still unable to "understand" that I want the widgets at specific places.
Me: do you understand what i mean by swapping positions of two widgets?
ChatGPT: Apologies for the confusion earlier. I misunderstood your request. To swap the positions of the "About" button and the "Groot GPT" text on the menu bar, you can update the code as follows: <code>
Me: ok then. Please swap the positions as you have understood and ensure that all elements of the menu bar are within page limits.
ChatGPT: Apologies for any confusion caused. Here's the updated code with the swapped positions of the "About" button and the "Groot GPT" text on the menu bar, while ensuring that all elements of the menu bar stay within the page limits: <code>
Me: Display the "Groot GPT" text at the extreme left of the menu bar and display the "About" button at the extreme right of the menu bar. Ensure that the menu bar is within page limits. Make the page background color #242124. Make the "About" button color #8bc34a. Make the "Groot GPT" text bold and give it the color #c5e1a5. Make the menu bar color #324406.
 |
| By now a basic lightbox showed up well on clicking the About button |
Since a simple chat was boring, I decided to incorporate some simple sentiment analysis to display emotions.
Me: Could you create an algorithm that performs a simple sentiment analysis for the emotions of happiness, sadness, anger, frustration and determination?
But ChatGPT created the code in Python instead of JavaScript.
Me: The functions should not be in python. The functions are intended to be used in the html code you generated earlier
Then it generated the code in JavaScript. When I didn't understand some part of the code, I could even ask ChatGPT to explain the code to me.
Me: which part of the code will invoke getemoticon and which part of the code will send the user input to the getemoticon function?
ChatGPT: To invoke the getEmoticon() function and send the user input for sentiment analysis, you can modify the existing JavaScript code that handles user input and chat message rendering. Here's an example of how you can incorporate the getEmoticon() function into your JavaScript code: <code> In the above code, the handleUserInput() function is called when the send button is clicked (or when the form is submitted, if you're using a form). Inside this function, the user input is retrieved from the input box (inputBox.value) and then cleared (inputBox.value = ''). After that, the getEmoticon() function is invoked with the user input to determine the appropriate emoticon. The resulting emoticon is then appended to the chat message element, which is created and styled accordingly. The chat message element is then appended to the chat box. You can adjust this code according to your specific implementation, but this should give you an idea of how to incorporate the getEmoticon() function and handle user input in your existing JavaScript code.
I soon realized that I didn't have to type out different words. ChatGPT could automatically find and list out words related to a particular emotion.
Me: For happiness, you had generated var happinessKeywords = ["happy", "joyful", "excited", "delighted"];. I want you to generate a hundred words that represent happiness in various tenses.
It generated a vertical list of bulleted points containing a hundred words that represent happiness. So I had to ask it to put those words in an array, and then asked it to generate words for other emotions too.
Me: place all the 100 generated words in an array like this var happinessKeywords = ["happy", "joyful", "excited", "delighted"];
Me: Generate a hundred sadness keywords like this var sadnessKeywords = ["sad", "unhappy", "depressed", "disappointed"]; in an array in a single line.
Since it generated the entire code after each prompt, I started asking it to generate only snippets of the code that needed modification. But this brought the dilemma of understanding where to insert the code manually. I realized that I could ask it to give me hints for that too.
Me: which part of the code should i use the window.onload function?
Me: I want you to adjust the css of input-box in such a way that the input box and the send button are shown at the centre of the chatbox
ChatGPT: To center the input box and the send button within the chatbox, you can apply CSS styles to the input-box class. Here's an example of how you can modify the CSS:
.input-box {
display: flex;
justify-content: center;
align-items: center;
}
This CSS code uses flexbox properties to horizontally center the content of the input-box class. The justify-content: center property centers the content along the horizontal axis, and the align-items: center property centers the content along the vertical axis. Make sure to add this CSS code within the <style> tags or your CSS file. By applying these styles, the input box and the send button will be positioned at the center of the chatbox.Me: that did not work. the input box and button are still aligned to the left of the chatbox. How to align them to the centre?
ChatGPT: Apologies for the confusion. If the previous CSS code didn't work as expected, you can try the following approach to center the input box and send button within the chatbox:
.input-box {
text-align: center;
}
.input-box input[type="text"],
.input-box button {
display: inline-block;
}
.input-box button {
margin-left: 10px; /* Adjust the margin as needed */
}In this updated CSS code, we set the text-align property of the .input-box class to center to horizontally align the content within the input box and send button. Additionally, we use display: inline-block for the input text and button elements to allow them to be horizontally centered. You can adjust the margin-left property of the button to add spacing between the input box and the button if needed. Remember to place this CSS code within the <style> tags or your CSS file. Please give it a try and let me know if it works as expected.
Me: how would you alter the code if you wanted to make it mobile friendly?
For the profile images, I used StableDiffusionOnline.
 |
| Some of the profile images generated on prompting StableDiffusionOnline |
In this manner, I made it generate code to add a visitor counter, made the page more mobile friendly and made various adjustments that brought it to the final state you see in this page. The code that was finally generated is available here.
It took 70 prompts, around 5 hours (including my eye rest breaks) and a few manual tweaks to the code, to create GrootGPT.
Learning
At the time I created this, I hadn't gone through the various guides on Prompt Engineering. I tried communicating in English, since my objective was also to later add a voice prompt to invoke ChatGPT via an API. The process of creating the page showed me some critical flaws of Large Language Models not really understanding what was told to them. The "understanding" was merely a complex form of Cosine Similarity and token prediction. Transformers are indeed impressive, and GPT4 is said to be capable of generating a website from a scribble. However, GPT is still like Eliza. "Intelligence" is still in our brains. We are yet to find a way transfer it to algorithms. However, as GitHub Copilot and similar projects have shown, Machine Learning algorithms are great for assisting us and reducing the grunt-work we go through.
It's not necessary that big-tech companies rule the roost when it comes to generative AI. Projects like gpt4all, Freedom GPT, privateGPT and frameworks like Mojo hold promise.After Meta made LLaMA open source, Google is said to have felt the pinch. would big-tech really let their shareholders down? There has perhaps been a slow shift toward more protective licensing of their projects. Let's see how it goes. What I'd really like to see though, is a research effort that attempts understanding and building what we could actually call "intelligence".
Uses of ChatGPT
From an internet search, I figured ChatGPT could be used for:
- Coding: Debugging code, creating templates etc.
- School work: Creative writing, etc.
- Learning: Having ChatGPT teach how to code or learn a new human language.
- Feedback: You can ask ChatGPT for its opinion on short stories and poems.
- Brainstorming: Generating ideas for poems, stories or games.
- Random questions: You'd have to verify the veracity of the answers though.
- Daily tasks: Recipes, to-do lists, reminders.
- Entertainment: For jokes, generating fictional stories.
- Guide: It could be used for therapy or coaching. A doctor said that the response from ChatGPT was better than him, at pacifying the annoying relatives of a patient who was being treated.
- Research: I found it useful to feed it my research paper and ask it to generate an abstract, title and conclusion which I later modified.
- Companion: For some people, it's useful to just have someone to talk to.
It's important to verify what ChatGPT generates. Lawyers already got into trouble for using ChatGPT, which generated imaginary cases.
Let's hope the alternatives to ChatGPT offer some worthy competition too. There's Bard, Sparrow, ChatSonic, and more. There's an AI for a lot of things now. Even a website like tinywow which has free versions of various tools.
