Hi, In this video, we will build a sarcastic chatbot that will answer your questions in a sarcastic manner. We will use the OpenAI GPT-3 model for this purpose. We will install the OpenAI PHP client library and send API requests to the model in PHP. We will get the response on the front end using a POST request in javascript and show it as a chat on the webpage. Everything is done step-by-step, so you can easily get it. Get the live demo and source code at the bottom of this post.
Frontend design and styling
Assuming that you have a solid understanding of HTML and CSS, so, I'm not going to explain the designing part of the project. I've created a mobile-inspired chatting interface that mimics a popular design seen on Dribble. In this UI, you'll be able to send and receive messages just like any other standard chatting app. The most important part of UI is chat design where messages initiate from the bottom and are differentiated based on whether they were sent by a user or a bot, with each message aligning in opposite directions.
Frontend development with JS
Make a JS file and get three HTML elements from the HTML file: Message Container(Div), Text Input, and Button. Now, first, make a function for onClick event, when the user clicks on the button. In the function, validate the input field. Then create an HTML markup for a message and add it to the message container using the += symbol. This will not remove the previous messages if available. After adding a user's message in the chat box, we need to execute two functions, one for scrolling down and another one for, sending messages and getting a response from the bot. Remove the text from the input field preventing the duplicate message.
Adding Keyboard Functionality
Also, run the previously created function with an Enter click on the keyboard. As this is a chat system and sending messages from click Enter on the keyboard improves the user experience. Add keypress event listener on the input field and when the pressed key name is Enter, then prevent its default operation and click the button using the click() function. When the button is clicked, the onClick event triggers the function automatically.
Scroll down function
Create a scroll-down function that automatically scrolls to the bottom of the container when a new message is added to the message container. We just need to set the scrollTop property of the container equal to the height of the container as given below.
Bot response function
In this function, we will make an HTTP request to the PHP file. Make an object FormData that will hold the request message in the prompt key. Use the open() function with the correct file path using the POST method. Provide the data object to the Send() function as a parameter. On execution, this will send the data to the PHP file, run the file and return the response using the onload() function. It will take some time to get a response, till that, show a typing preloader after one second to make the response natural.
Create the HTML markup for a response message and add it to the chat container using the += symbol to prevent other messages from being removed. Also, execute the scroll-down function for the visibility of the latest message added.
The onload() function gives the response to the request. The response is in JSON string. Parse the JSON data and get the text message using response.choices[0].text keys. Now, find the latest response message container in the chat container that we have already added for showing a preloader. Replace the preloader with the response text message. You can also process the response text before adding it. Here, we will remove unwanted breaks and colons from the text using processResponse() function.
Process response function
In this function, the whole text is converted to an array separated by a colon, and only the last index of the array is taken because the bot sometimes communicates itself and the original message is available after the last colon. Also, remove breaks and unwanted spaces from the text using replace() and trim().
Backend development with PHP
Here, we will use the OpenAI GPT-3 model for text generation. This model will act as a bot that will respond to the messages. You need an OpenAI API key to use that model. Get the complete instruction for getting a free API key from the OpenAI GPT-3 text completion tutorial.
We will make API requests using a PHP client library by Orhanerday. So, install this library and add it to your project. The instructions for installing the Orhanerday OpenAI PHP client library are also given in this OpenAI tutorial.
We have given the path of a PHP file for making HTTP requests in javascript. Now, let's create that PHP file. Add the library in the PHP file as given below.
Create an object using OpenAI class and provide the API key as a parameter. Also, get the prompt parameter that we send through the JS file using the POST method. Now, here is the most important thing that will make our chatbot a sarcastic bot. Add the given line before the prompt parameter. This line will be sent each time when we need a sarcastic response. The model will understand it and chat will us as we need.
Marv is a chatbot that reluctantly answers questions with sarcastic responses:
Now, use the completion() method of the OpenAI object, and provide all the parameters with their values to design the request as given below. If you want to learn more about, what's the purpose of these parameters, get the tutorial on OpenAI API parameter design. On request completion, it will return the data in the form of a JSON string, about with we already discussed, how to extract a response message from JSON string in JS.
Final Thoughts
Finally, we have created a sarcastic chatbot system in JavaScript and PHP with the help of the Orhanerday PHP client library and OpenAI GPT-3 text completion mode. GPT-3 is a pre-trained state-of-the-art language model that generates highly coherent text that you can use in many ways like code generation, grammar correction, text analysis, object detection, and direction-by-direction points generation, etc. If you want to learn more about OpenAI, get the references below.
References
OpenAI Documentation
Orhanerday PHP Library
OpenAI GPT-3 Tutorial
