Chapter 1: Introduction to Custom Chatbots

As we approach the end of 2022, it's likely that you've encountered ChatGPT and perhaps even experienced its remarkable capabilities. ChatGPT represents a groundbreaking advancement in artificial intelligence, enabling users to engage in natural conversations with an exceptionally intelligent chatbot. Its distinctive ability to comprehend and respond to human language has made it a favored option for businesses aiming to enhance customer service, as well as for individuals desiring a more personalized chatting experience.

Imagine the potential of integrating such technology into your website, allowing you to train it with tailored information. Picture a chatbot designed specifically for your business or one that can engage in meaningful discussions with your friends and family. This is achievable with technologies that are just an API call away, easily integrated into web pages, web applications, and websites.

In this guide, I will walk you through the process of creating an aesthetically pleasing chatbot powered by GPT-3, utilizing HTML, CSS, and JavaScript on the client side, along with PHP on the server side. By employing traditional natural language processing techniques, the chatbot will sift through your custom-prepared information sources. It will then utilize this information for few-shot learning with GPT-3, enhancing responses based on user input. The final output will be displayed in a user-friendly graphical interface, resembling a fully functional chatbot. The end result is an intelligent chatbot, akin to ChatGPT, capable of answering questions on topics that standard GPT-3 or ChatGPT may not cover.

Here’s a glimpse of it in action, effectively responding to inquiries about specific topics not known to standard GPT-3 (like personal details), alongside answering general questions (such as variable declaration in JavaScript):

Excited about embedding a similar chatbot on your website? Let’s dive in!

Chapter 2: The Core of the Chatbot

The fundamental component of this chatbot is GPT-3, specifically the latest davinci model, known as text-davinci-003. Accessing it through a PHP library allows for seamless integration. In my previous detailed tutorial, I explained how to utilize a JavaScript function within a PHP library to manage calls to OpenAI's API for GPT-3 models.

The JavaScript function transmits a prompt containing a user's question along with the provided API key. GPT-3 then responds with a text completion, from which the chatbot extracts the answer to display to the user.

If your website allows for full control, simply ensure PHP is installed. I use Altervista, a fantastic free hosting service, which already has PHP set up.

Since my last article on creating GPT-3 bots, I’ve gained new insights and conducted numerous experiments, leading to significant enhancements in my chatbot. Notably, I’ve introduced three key improvements: the selective extraction of information from user-customized texts, the capability to maintain a coherent conversation by remembering previous interactions, and the incorporation of a visually appealing chat-like interface.

The ability to selectively extract information enables your chatbot to answer questions it might otherwise decline or respond to with uncertainty, minimizing the risk of generating inaccurate responses. This continuity allows the use of pronouns like "it" or "them," ensuring the chatbot understands what is being referenced, resulting in a more fluid interaction.

Creating a user-friendly interface is also crucial, enhancing the overall user experience and ensuring the application displays correctly on various screen sizes.

Chapter 3: Extracting Customized Information

To efficiently extract tailored information, I experimented with various traditional NLP approaches, ultimately settling on the following method:

First, I developed a lengthy paragraph filled with relevant information. Due to its length, it exceeds the token limit for GPT-3, thus traditional NLP techniques come into play to identify relevant sections.

Next, when processing user input, I cleanse it of stopwords, symbols, and numbers using a straightforward process that retains only significant words. Each of these words is then searched within the original lengthy paragraph.

To achieve this cleansing, I utilized regular expressions and compiled extensive lists of terms to filter out.

// Define lists of words and symbols to filter out

var stopwordnumbers = ["once", "twice", ...]; // and so on

var stopwordsymbols = ["+","-","*","%","/","?","!","^","'",""",",",";","\","."];

var stopwordsmin3=["if", "or", "in", "a","an","cool", ...]; // and so on

Subsequently, I search for each cleaned word within the lengthy information paragraph. When a match occurs, the corresponding sentence is extracted. All relevant sentences are then compiled into a paragraph and fed into GPT-3 for few-shot learning.

Finally, this collection of relevant sentences is appended to a basic prompt designed to instruct GPT-3 to respond to user inquiries, and the user's input is included at the end. This process is similar to what I described in my earlier tutorial.

Chapter 4: Ensuring Conversational Continuity

To maintain conversational continuity, I store all user inputs and chatbot responses in a continuous string. Each time GPT-3 is called, I use a structured prompt that includes the conversation history, relevant sentences from the information paragraph, and the user’s latest question.

The complete prompt sent to GPT-3 comprises:

• A basic description of the bot’s function
• The ongoing conversation
• Sentences retrieved from the information paragraph
• User input

This structure allows the chatbot to comprehend the flow of conversation, aiding in logical coherence. Each interaction can incorporate information from customizable paragraphs.

Chapter 5: Designing an Attractive Graphical Interface

An intuitive and appealing graphical user interface (GUI) is vital for enhancing user interaction. A well-crafted GUI can significantly improve user experience, making navigation simpler and more efficient. Conversely, a poorly designed GUI may deter users.

The previous GUI I employed was not visually appealing. To enhance it, I formatted my HTML with CSS, which governs the layout, colors, fonts, and other stylistic elements without requiring extensive programming knowledge. CSS facilitates the creation of attractive GUIs that adjust seamlessly to different screen sizes.

While I’m not particularly skilled in CSS, ChatGPT provided substantial assistance in developing my application's styling. A significant portion of the CSS in my current chatbot was generated with ChatGPT's help, as I sought tailored suggestions for various formatting requirements.

For further insights on how I integrated ChatGPT into my coding workflow, refer to my previous sections.

Chapter 6: Conclusion and Future Applications

In conclusion, this article outlines a method for developing GPT-3 powered chatbots that can be embedded in websites and trained with customized information (through few-shot learning). The demonstrated example showcases an intelligent chatbot with an appealing GUI, capable of responding to a diverse range of inquiries, including specific topics that standard GPT-3 may not be familiar with.

Chatbots created through this method can effectively understand and respond to human language, with three primary enhancements over my prior version: selective information extraction, conversational continuity, and a visually engaging interface.

This example illustrates the potential of comprehensive web programming utilizing HTML, CSS, and JavaScript on the client side, along with PHP on the backend. It also highlights the accessibility of advanced programs like GPT-3 through APIs.

In its current form, this tool serves as a foundation for quickly developing automated chatbots for various applications, including customer service, personalized chat experiences, web-based personal assistants, and much more.

To experiment with this chatbot, obtain an API key from OpenAI and feel free to reach out to me.

Further Reads

To explore more of my articles on GPT-3 and related projects, check the following links:

• Using ChatGPT to Build a Chatbot: Discover how to create a chatbot using ChatGPT.

• How to Build a Custom Knowledge ChatGPT Clone in 5 Minutes: A quick guide to creating a personalized ChatGPT clone.