MB-GPT is a chatbot that uses OpenAI's GPT (Generative Pre-trained Transformer) technology to generate responses to user input. The chatbot is built using the MERN (MongoDB, Express, React, Node) stack, which provides a robust and scalable foundation for web development.
Setup :- To get started with MB-GPT, you'll need an OpenAI API key. You can sign up for an API key on the OpenAI website. Once you have your API key, you can create a new MERN project by following these steps :
- Create a new MongoDB database and create a collection for storing chat logs.
- Set up an Express server to handle HTTP requests and responses.
- Build a React frontend that allows users to interact with the chatbot.
- Create a Node script that connects to the OpenAI API and generates responses to user input.
- Integrate the Node script into the Express server and handle chat log storage.
Development :- Here are the steps to develop the MB-GPT chatbot using the MERN stack and OpenAI API key :-
Step 1 : Create a new MongoDB database and create a collection for storing chat logs.
First, you'll need to create a new MongoDB database and a collection for storing chat logs. You can use the MongoDB Atlas service to create a free MongoDB database in the cloud. Once you have your database set up, you can create a new collection for storing chat logs.
Step 2 : Set up an Express server to handle HTTP requests and responses.
Next, you'll need to set up an Express server to handle HTTP requests and responses. You can create a new Express server using the express-generator package, which provides a basic file structure and some sample code to get you started.
Step 3 : Build a React frontend that allows users to interact with the chatbot.
Once you have your Express server set up, you can build a React frontend that allows users to interact with the chatbot. You can use the Create React App tool to create a new React project, which provides a basic file structure and some sample code to get you started.
Step 4 : Create a Node script that connects to the OpenAI API and generates responses to user input.
Next, you'll need to create a Node script that connects to the OpenAI API and generates responses to user input. You can use the "Axios" library to make HTTP requests to the OpenAI API, and the "dotenv" library to load your API key from an environment variable.
Step 5 : Integrate the Node script into the Express server and handle chat log storage.
Finally, you'll need to integrate the Node script into the Express server and handle chat log storage. You can use the "Mongoose" library to connect to your MongoDB database and store chat logs in the collection you created earlier.
index.js : This is my server .
const { Configuration, OpenAIApi } = require("openai");
const express = require("express");
const bodyParser = require('body-parser');
const cors = require('cors');
const configuration = new Configuration({
organization: "Your OpenAI Organization Id",
apiKey: "Your OpenAI API Key",
});
const openai = new OpenAIApi(configuration);
const app = express();
app.use(bodyParser.json());
app.use(cors());
const port = 3000;
app.post("/", async (req, res) => {
const {message} = req.body;
console.log(message, "message");
const response = await openai.createCompletion({
model: "text-davinci-003",
prompt: `${message}`,
max_tokens: 1000,
temperature: 0.5,
});
res.json({
message: response.data.choices[0].text,
})
});
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
The code sets up a server using the Express framework in Node.js to create a chatbot that uses OpenAI's GPT technology to generate responses to user input. Here's an explanation of the code :-
const { Configuration, OpenAIApi } = require("openai");
const express = require("express");
const bodyParser = require('body-parser');
const cors = require('cors');
const configuration = new Configuration({
organization: "Your OpenAI Organization Id",
apiKey: "Your OpenAI API Key",
});
const openai = new OpenAIApi(configuration);
This section imports the necessary modules for the project. Configuration and OpenAIApi are classes from the openai package, which is used to interact with the OpenAI API. express, body-parser, and cors are middleware modules for handling HTTP requests and responses.
The configuration object is created using the Configuration class and contains the OpenAI API key and organization ID. The openai object is created using the OpenAIApi class and is used to make requests to the OpenAI API.
const app = express();
app.use(bodyParser.json());
app.use(cors());
const port = 3000;
This section creates an instance of the Express application and sets up middleware to handle JSON-encoded data and cross-origin resource sharing (CORS). The port variable is set to the port number that the server will listen on.
app.post("/", async (req, res) => {
const {message} = req.body;
console.log(message, "message");
const response = await openai.createCompletion({
model: "text-davinci-003",
prompt: `${message}`,
max_tokens: 1000,
temperature: 0.5,
});
res.json({
message: response.data.choices[0].text,
})
});
This section defines a route for handling POST requests to the server's root URL ("/"). When a POST request is received, the message property is extracted from the request body. This message is passed as a prompt to the openai.createCompletion() method, which generates a response using the OpenAI API. The response is then sent back to the client as a JSON object with a message property containing the generated text.
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`);
});
This section starts the server and listens on the specified port. The console.log() statement logs a message to the console to confirm that the server has started successfully.
App.js : This is the Front-End , using React.js .
import './normal.css';
import './App.css';
import { useState } from 'react';
function App() {
const [input, setInput] = useState("");
const [chatLog, setchatLog] = useState([{
user: "gpt",
message: "Hello ! How Can I Help You?"
}, {
user: "me",
message: "I Want To Use MB-GPT Today !"
}]);
function clerarChat() {
setchatLog([]);
}
async function handleSubmit(e) {
e.preventDefault();
const chatLogNew = [...chatLog, { user: "me", message: `${input}` }]
setInput("");
setchatLog(chatLogNew);
const messages = chatLogNew.map((message) => message.message).join("\n");
const response = await fetch("http://localhost:3000", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
message: messages
})
});
const data = await response.json();
setchatLog([...chatLogNew, { user: "gpt", message: `${data.message}` }]);
}
return (
{chatLog.map((message, index) =>
)}
);
}
const ChatMessage = ({ message }) => {
return (
{message.user === "gpt" && }
{message.message}
)
};
export default App;
This is a web application code that implements a chat interface that uses an AI model to generate responses. It takes user input, sends it to a local server, receives a response from the AI model, and displays it to the user. The UI consists of a chat box where the conversation is displayed and an input box where the user enters their messages.
The code is written in JavaScript using the React library. It imports two CSS files, 'normal.css' and 'App.css', and the React 'useState' hook. The 'App' function is the main component that renders the chat interface. It defines two state variables: 'input' which holds the user's input message, and 'chatLog' which holds the conversation history. It initializes 'chatLog' with two objects, representing the initial greeting between the user and the AI model.
The 'clerarChat' function is a helper function that clears the conversation history when the user clicks the 'New Chat' button.
The 'handleSubmit' function is triggered when the user submits their input message. It updates the 'chatLog' state with the new message, sends the message to the server using a POST request, and waits for a response. Once the response is received, it updates the 'chatLog' state with the response from the AI model.
The 'ChatMessage' component is a helper component that renders individual chat messages within the 'chatLog' state variable. It takes a 'message' object as a prop and renders the message text, along with an avatar for the AI model.
App.css : This Is The Main CSS File For This Project .
.App {
text-align: center;
display: flex;
background-color: #282c34;
color: white;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.sidemenu {
width: 260px;
padding: 10px;
/* border: 1px solid white; */
background-color: #202123;
}
.side-menu-button {
padding: 15px;
border: 1px solid white;
border-radius: 5px;
text-align: left;
transition: 0.25s, all;
}
.side-menu-button:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.side-menu-button span {
padding-left: 6px;
padding-right: 12px;
}
.chatbox {
flex: 1;
background-color: #343541;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.chat-input-holder {
padding: 24px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.chat-input-textarea {
background-color: #40414f;
width: 60%;
position: relative -webkit-sticky bottom;
border-radius: 5px;
color: white;
font-size: 1.25em;
border: none;
padding: 12px;
outline: none;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.25);
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
.chat-log {
text-align: left;
}
.chat-message.chatgpt {
background-color: rgba(255, 255, 255, 0.1);
}
.chat-message-center {
max-width: 640px;
padding-top: 24px;
padding-bottom: 24px;
display: flex;
margin-left: auto;
margin-right: auto;
padding: 12px;
}
.avatar {
background: rgb(189, 217, 206);
border-radius: 50%;
width: 40px;
height: 40px;
background-image: url(https://blogger.googleusercontent.com/img/a/AVvXsEjjm04iWF9R9RO2yrEltQDW2rfDeouZ92Bxnywh3pWfFkWJ0Sa10sbAkt2z-X6EMsJpO5_yKmHt_b-332UJe94OGzDREZMaEVLcbAhlZQds27MYvy9Bu0zQ2eO5tE_BxlJuhkfrAoPLufbJ1nfhhW92rB7QtPjqUTr9tYQK1tvjKhbTJV50oy7YvQ60=s40);
}
.avatar.chatgpt {
background: rgb(35, 122, 122);
border-radius: 50%;
width: 40px;
height: 40px;
}
.message {
padding-left: 40px;
padding-right: 40px;
}
/* styles.css */
.scroll-container {
overflow-y: scroll; /* Enable vertical scrolling */
height: 600px; /* Set the height of the container element */
}
/* Customize the scrollbar */
.scroll-container::-webkit-scrollbar {
width: 10px;
}
.scroll-container::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
.scroll-container::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 5px;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
The given code is the stylesheet (CSS) file named "App.css" that is used in the previous front-end code. It defines the visual styles for the various components and elements of the web application. Here's an explanation of the various CSS rules in the code :-
- .App : Defines styles for the root element of the application. It sets the text alignment to center, makes it a flex container, sets the background color to #282c34 and text color to white, and makes it take up the full size of the viewport using the position property.
- .sidemenu : Defines styles for the side menu container. It sets the width to 260px, adds padding, sets the background color to #202123.
- .side-menu-button : Defines styles for the buttons in the side menu. It adds padding, sets a border, border-radius, sets text alignment to left, and adds a hover effect.
- .side-menu-button:hover : Defines the styles for the hover effect of the side menu button.
- .chatbox : Defines styles for the chatbox element. It sets it to flex-grow, sets the background color to #343541.
- .App-logo : Defines styles for the logo element. It sets the height to 40vmin and disables pointer events.
- .chat-input-holder : Defines styles for the chat input holder container. It adds padding and makes it stick to the bottom of the screen using the position property.
- .chat-input-textarea : Defines styles for the chat input textarea element. It sets the background color to #40414f, width to 60%, border-radius, color to white, font-size to 1.25em, border to none, padding, outline to none and adds a box-shadow effect.
- .App-header : Defines styles for the header of the application. It sets the background color to #282c34, min-height to 100vh, makes it a flex container, aligns items to the center, and justifies content to the center.
- .App-link : Defines styles for the link in the application header. It sets the color to #61dafb.
- .chat-log : Defines styles for the chat log container. It sets text alignment to left.
- .chat-message.chatgpt : Defines styles for the chat message element with class "chatgpt". It sets the background color to rgba(255, 255, 255, 0.1).
- .chat-message-center : Defines styles for the center-aligned chat message container. It sets the maximum width to 640px, adds padding, makes it a flex container, and centers it horizontally using margin.
- .avatar : Defines styles for the avatar element. It sets the background color, border-radius, width, height, and adds a background image.
- .avatar.chatgpt : Defines styles for the chatgpt avatar element. It sets the background color, border-radius, width, and height.
- .message : Defines styles for the message container. It adds padding.
- .scroll-container : Defines styles for the scroll container element. It sets the overflow-y property to scroll to enable vertical scrolling, sets a fixed height of 600px, and customizes the scrollbar using the scrollbar pseudo-elements.
- @keyframes App-logo-spin : Defines a keyframe animation that rotates an element from 0 to 360 degrees over 20 seconds. This animation is applied to the .App-logo element when the user has not requested a preference for reduced motion.
normal.css : This is used to give the basic structure to the web-page , for different browsers .
/* Document
* ========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::before,
*::after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
/* Sections
* ========================================================================== */
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Edge, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
* ========================================================================== */
/**
* Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
*/
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
margin: 0;
}
/**
* Remove the margin on nested lists in Edge 18- and IE.
*/
ol ol,
ol ul,
ul ol,
ul ul {
margin: 0;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Correct the inheritance of border color in Firefox.
* 3. Show the overflow in Edge 18- and IE.
*/
hr {
box-sizing: content-box; /* 1 */
color: inherit; /* 2 */
height: 0; /* 1 */
overflow: visible; /* 3 */
}
/**
* Add the correct display in IE.
*/
main {
display: block;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
* ========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* Add the correct text decoration in Edge 18-, IE, and Safari.
*/
abbr[title] {
text-decoration: underline;
text-decoration: underline dotted;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/* Embedded content
* ========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images within links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Tabular data
* ========================================================================== */
/**
* 1. Correct table border color inheritance in all Chrome, Edge, and Safari.
* 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
*/
table {
border-color: inherit; /* 1 */
text-indent: 0; /* 2 */
}
/* Forms
* ========================================================================== */
/**
* Remove the margin on controls in Safari.
*/
button,
input,
select {
margin: 0;
}
/**
* 1. Show the overflow in IE.
* 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
*/
button {
overflow: visible; /* 1 */
text-transform: none; /* 2 */
}
/**
* Correct the inability to style buttons in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
--webkit-appearance: button;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* Show the overflow in Edge 18- and IE.
*/
input {
overflow: visible;
}
/**
* 1. Correct the text wrapping in Edge 18- and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in Edge 18- and IE.
* 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the inheritance of text transform in Firefox.
*/
select {
text-transform: none;
}
/**
* 1. Remove the margin in Firefox and Safari.
* 2. Remove the default vertical scrollbar in IE.
*/
textarea {
margin: 0; /* 1 */
overflow: auto; /* 2 */
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. Correct the odd appearance in Chrome, Edge, and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
--webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* Remove the inner padding in Chrome, Edge, and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style upload buttons in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/**
* Remove the inner border and padding of focus outlines in Firefox.
*/
::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus outline styles unset by the previous rule in Firefox.
*/
:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Remove the additional :invalid styles in Firefox.
*/
:-moz-ui-invalid {
box-shadow: none;
}
/* Interactive
* ========================================================================== */
/*
* Add the correct display in Edge 18- and IE.
*/
details {
display: block;
}
/*
* Add the correct styles in Edge 18-, IE, and Safari.
*/
dialog {
background-color: white;
border: solid;
color: black;
display: block;
height: -moz-fit-content;
height: -webkit-fit-content;
height: fit-content;
left: 0;
margin: auto;
padding: 1em;
position: absolute;
right: 0;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
}
dialog:not([open]) {
display: none;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
* ========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* User interaction
* ========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}
- Setting the line height and preventing font size adjustments after orientation changes for certain browsers and devices
- Correcting font size and margin for h1 elements in section and article contexts
- Removing margins on nested lists and tables, and removing default border styles for images
- Standardizing font sizes and weights for various elements, and removing background color on active links
- Addressing specific issues with certain browsers and devices, such as displaying audio and video elements in Internet Explorer and hiding overflow in SVG elements in IE
Overall, this CSS file aims to provide a consistent appearance for HTML content across different web browsers and devices by standardizing default styles and correcting inconsistencies.
Conclusion :-
In conclusion, MB-GPT is a highly advanced language model developed by Pabitra Banerjee, utilizing the latest advancements in natural language processing and machine learning technologies. It is capable of generating high-quality text in a variety of applications, from language translation to text completion.