CHATBOT: NexusGPT

A MAJOR PROJECT REPORT SUBMITTED IN PARTIAL

FULFILLMENT OF THE REQUIREMENTS FOR THE DEGREE OF
DIPLOMA IN
COMPUTER SCIENCE & ENGINEERING
BY

DAKSHA KR. PATHAK

(ROLL NO- 21084050004)

ANSH PATHAK
(ROLL NO- 21084050002)

ALOK VERMA
(ROLL NO- 21084050001)

UJJWALPARASHAR
(ROLLNO- 21084050010)

UNDER THE SUPERVISION OF MISS MEENU RANA ASSISTANT

PROFESSOR DEPARTMENT OF COMPUTER SCIENCE &
ENGINEERING SHIVALIK COLLEGE OF ENGINEERING,
DEHRADUN (UTTARAKHAND)

TO THE UTTARAKHAND BOARD OF TECHNICALEDUCATION,

ROORKEE (SUMMER)2023-24.
 CERTIFICATE

This is to certify that Daksha Kr. Pathak, Alok Verma, Ansh Pathak
and Ujjwal Parashar has carried out the project work presented in this
report entitled "Chatbot" for the award of Diploma from Shivalik
College of Engineering Dehradun affiliated to the Uttarakhand Board
of Technical Education, Roorkee under my supervision. The report
embodies results of original work, and studies are carried out by the
student himself and the contents of the report do not form the basis for
the award of any other degree to the candidate or to anybody else from
this or any other University/Institution.

Date:

Miss. Mennu Rana, Assistant Professor.

Shivalik College of Engineering,
Dehradun Uttarakhand.
 REPORT APPROVAL SHEET
This is certified that the Major Project entitled "Chatbot: NexusGPT" is
approved for the degree of Diploma in Computer Science & Engineering from
Shivalik College of Engineering, Dehradun affiliated to the Uttarakhand Board
of Technical Education, Roorkee

Name and Signature of project group members-

• DAKSHA KR. PATHAK (21084050004)

• ANSH PATHAK (21084050002)

• ALOK VERMA (21084050001)

• UJJWAL PRASHAR (21084050010)

(Miss. Meenu Rana)

Name & Signature of Project Supervisor

Name & Signature of Internal Examiner

Name & Signature of External Examiner

Date:
 ACKNOWLEDGEMENT

It is a great pleasure to express my profound sense of gratitude and reverence to

my project supervisor Miss. Meenu Rana, Assistant. Professor, Department of
Computer Science & Engineering, Shivalik College of Engineering, Dehradun,
Uttarakhand. He was always a source of encouragement and inspiration, and
constantly guided us for the accomplishment of this ink with meticulous care. We
owe the most to him for having had the opportunity to accomplish the work under
his guidance.
We are extremely grateful and highly obliged to Mr. Sartaj Khan, Assistant.
Professor, Department of Computer Science & Engineering, Shivalik College of
Engineering. Dehradun with whom we have a special bond of kinship. A sincere,
affable attitude and helping nature will always remain a pleasant part of our
memory.
On a moral personal note, our deepest appreciation and gratitude
to our beloved parents, who have been an inspiration and have
provided us with unrelenting encouragement and support.

• DAKSHA KR. PATHAK

• ANSH PATHAK

• ALOK VERMA

• UJJWAL PARASHAR
 PAGE INDEX

− INTRODUCTION.........................................................................................................

− TOOLS USED...............................................................................................................

− CODES...........................................................................................................................

− CHATBOT.....................................................................................................................

− CONCLUSION..............................................................................................................
 INTRODUCTION:

In recent years, the proliferation of artificial intelligence (AI) and natural

language processing (NLP) technologies has led to significant advancements in
the field of conversational agents, popularly known as chatbots. These
intelligent systems are capable of understanding and responding to human
queries in natural language, revolutionizing the way we interact with computers
and digital services.

The objective of this project is to design, develop, and evaluate a chatbot

capable of providing assistance and information to users in a specific domain.
By leveraging state-of-the-art NLP algorithms and machine learning techniques,
our chatbot aims to deliver an intuitive and user-friendly conversational
experience, addressing user queries, offering recommendations, and facilitating
transactions where applicable.

Project Objectives:
1. Design and implement a chatbot capable of understanding and generating natural
language responses.
2. Integrate the chatbot with relevant data sources and APIs to provide accurate and up-
to-date information.
3. Develop a user-friendly interface for seamless interaction with the chatbot across
various platforms and devices.
4. Test the chatbot's performance through rigorous testing methodologies, including
functional testing, usability testing, and performance testing.
5. Evaluate the effectiveness and user satisfaction of the chatbot through user feedback
and performance metrics.

Through this project, we aim to explore the capabilities of AI-driven chatbots in

enhancing user experiences, streamlining information retrieval processes, and
potentially automating routine tasks in diverse domains. By understanding the
challenges and opportunities associated with chatbot development, we hope to
contribute valuable insights to the ongoing research and development efforts in
this rapidly evolving field.
 TOOLS USED:

1. HTML (Hypertext Markup Language):

HTML serves as the backbone of our chatbot project, providing the structure
and content of the web pages where the chatbot interface will be hosted. Key
features and components developed using HTML include:

• Structural elements such as <div>, <section>, and <article> to

organize the layout of the chatbot interface.
• Semantic markup for enhancing accessibility and search engine
optimization (SEO).
• Integration of form elements for user input and interaction with the
chatbot.

2. CSS (Cascading Style Sheets):

CSS is utilized to style and design the appearance of the chatbot interface,
ensuring a visually appealing and cohesive user experience. Key aspects of CSS
implementation in our project include:

• Styling of HTML elements to define the colors, fonts, spacing, and

visual effects of the chatbot interface.
• Responsive design techniques to optimize the layout for various
screen sizes and devices.
• Use of CSS preprocessors like Sass or LESS for improved code
organization and maintainability.
3. JavaScript:
JavaScript is the primary programming language used to implement the
interactive behavior and functionality of the chatbot. Key functionalities
developed using JavaScript include:

• Implementation of chatbot logic to process user input, generate

responses, and manage conversation flow.
• Integration with backend APIs and services for fetching data,
performing computations, or executing tasks on behalf of the user.
• Event handling to capture user interactions and trigger appropriate
actions within the chatbot interface.
• Implementation of asynchronous operations for seamless
communication with external resources and services.
 CODES:

1. HTML (Hypertext Markup Language):

<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>
<meta charset="utf-8">
<title>NexasGPT</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts Link For Icons -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD
@20..48,100..700,0..1,-50..200" />
<script src="script.js" defer></script>
</head>
<body>

<div class="chat-container"></div>

<div class="typing-container">
<div class="typing-content">
<div class="typing-textarea">
<textarea id="chat-input" spellcheck="false" placeholder="Enter a prompt here"
required></textarea>
<span id="send-btn" class="material-symbols-rounded">send</span>
</div>
<div class="typing-controls">
<span id="theme-btn" class="material-symbols-rounded">light_mode</span>
<span id="delete-btn" class="material-symbols-rounded">delete</span>
</div>
</div>

</body>
</html>
2. CSS (Cascading Style Sheets):

@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--text-color: #FFFFFF;
--icon-color: #ACACBE;
--icon-hover-bg: #5b5e71;
--placeholder-color: #dcdcdc;
--outgoing-chat-bg: #343541;
--incoming-chat-bg: #444654;
--outgoing-chat-border: #343541;
--incoming-chat-border: #444654;
}
.light-mode {
--text-color: #343541;
--icon-color: #a9a9bc;
--icon-hover-bg: #f1f1f3;
--placeholder-color: #6c6c6c;
--outgoing-chat-bg: #FFFFFF;
--incoming-chat-bg: #F7F7F8;
--outgoing-chat-border: #FFFFFF;
--incoming-chat-border: #D9D9E3;
}
body {
background: var(--outgoing-chat-bg);
}

/* Chats container styling */

.chat-container {
overflow-y: auto;
max-height: 100vh;
padding-bottom: 150px;
}
:where(.chat-container, textarea)::-webkit-scrollbar {
width: 6px;
}
:where(.chat-container, textarea)::-webkit-scrollbar-track {
background: var(--incoming-chat-bg);
border-radius: 25px;
}
:where(.chat-container, textarea)::-webkit-scrollbar-thumb {
background: var(--icon-color);
border-radius: 25px;
}
.default-text {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 70vh;
padding: 0 10px;
text-align: center;
color: var(--text-color);
}
.default-text h1 {
font-size: 3.3rem;
}
.default-text p {
margin-top: 10px;
font-size: 1.1rem;
}
.chat-container .chat {
padding: 25px 10px;
display: flex;
justify-content: center;
color: var(--text-color);
}
.chat-container .chat.outgoing {
background: var(--outgoing-chat-bg);
border: 1px solid var(--outgoing-chat-border);
}
.chat-container .chat.incoming {
background: var(--incoming-chat-bg);
border: 1px solid var(--incoming-chat-border);
}
.chat .chat-content {
display: flex;
max-width: 1200px;
width: 100%;
align-items: flex-start;
 justify-content: space-between;
}
span.material-symbols-rounded {
user-select: none;
cursor: pointer;
}
.chat .chat-content span {
cursor: pointer;
font-size: 1.3rem;
color: var(--icon-color);
visibility: hidden;
}
.chat:hover .chat-content:not(:has(.typing-animation), :has(.error)) span {
visibility: visible;
}
.chat .chat-details {
display: flex;
align-items: center;
}
.chat .chat-details img {
width: 35px;
height: 35px;
align-self: flex-start;
object-fit: cover;
border-radius: 2px;
}
.chat .chat-details p {
white-space: pre-wrap;
font-size: 1.05rem;
padding: 0 50px 0 25px;
color: var(--text-color);
word-break: break-word;
}
.chat .chat-details p.error {
color: #e55865;
}
.chat .typing-animation {
padding-left: 25px;
display: inline-flex;
}
.typing-animation .typing-dot {
height: 7px;
width: 7px;
border-radius: 50%;
 margin: 0 3px;
opacity: 0.7;
background: var(--text-color);
animation: animateDots 1.5s var(--delay) ease-in-out infinite;
}
.typing-animation .typing-dot:first-child {
margin-left: 0;
}
@keyframes animateDots {
0%,44% {
transform: translateY(0px);
}
28% {
opacity: 0.4;
transform: translateY(-6px);
}
44% {
opacity: 0.2;
}
}

/* Typing container styling */

.typing-container {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
padding: 20px 10px;
justify-content: center;
background: var(--outgoing-chat-bg);
border-top: 1px solid var(--incoming-chat-border);
}
.typing-container .typing-content {
display: flex;
max-width: 950px;
width: 100%;
align-items: flex-end;
}
.typing-container .typing-textarea {
width: 100%;
display: flex;
position: relative;
}
.typing-textarea textarea {
 resize: none;
height: 55px;
width: 100%;
border: none;
padding: 15px 45px 15px 20px;
color: var(--text-color);
font-size: 1rem;
border-radius: 4px;
max-height: 250px;
overflow-y: auto;
background: var(--incoming-chat-bg);
outline: 1px solid var(--incoming-chat-border);
}
.typing-textarea textarea::placeholder {
color: var(--placeholder-color);
}
.typing-content span {
width: 55px;
height: 55px;
display: flex;
border-radius: 4px;
font-size: 1.35rem;
align-items: center;
justify-content: center;
color: var(--icon-color);
}
.typing-textarea span {
position: absolute;
right: 0;
bottom: 0;
visibility: hidden;
}
.typing-textarea textarea:valid ~ span {
visibility: visible;
}
.typing-controls {
display: flex;
}
.typing-controls span {
margin-left: 7px;
font-size: 1.4rem;
background: var(--incoming-chat-bg);
outline: 1px solid var(--incoming-chat-border);
}
.typing-controls span:hover {
background: var(--icon-hover-bg);
}

/* Reponsive Media Query */

@media screen and (max-width: 600px) {
.default-text h1 {
font-size: 2.3rem;
}
:where(.default-text p, textarea, .chat p) {
font-size: 0.95rem!important;
}
.chat-container .chat {
padding: 20px 10px;
}
.chat-container .chat img {
height: 32px;
width: 32px;
}
.chat-container .chat p {
padding: 0 20px;
}
.chat .chat-content:not(:has(.typing-animation), :has(.error)) span {
visibility: visible;
}
.typing-container {
padding: 15px 10px;
}
.typing-textarea textarea {
height: 45px;
padding: 10px 40px 10px 10px;
}
.typing-content span {
height: 45px;
width: 45px;
margin-left: 5px;
}
span.material-symbols-rounded {
font-size: 1.25rem!important;
}
}
3. JavaScript:

const chatInput = document.querySelector("#chat-input");

const sendButton = document.querySelector("#send-btn");
const chatContainer = document.querySelector(".chat-container");
const themeButton = document.querySelector("#theme-btn");
const deleteButton = document.querySelector("#delete-btn");

let userText = null;

const API_KEY = "PASTE-YOUR-API-KEY-HERE";

const loadDataFromLocalstorage = () => {

const themeColor = localStorage.getItem("themeColor");

document.body.classList.toggle("light-mode", themeColor === "light_mode");
themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" :
"light_mode";

const defaultText = `<div class="default-text">

<h1>NexusGPT</h1>
<p>Start a conversation and explore the power of AI.<br> Your chat history will be
displayed here.</p>
</div>`

chatContainer.innerHTML = localStorage.getItem("all-chats") || defaultText;

chatContainer.scrollTo(0, chatContainer.scrollHeight);
}

const createChatElement = (content, className) => {

const chatDiv = document.createElement("div");

chatDiv.classList.add("chat", className);
chatDiv.innerHTML = content;
return chatDiv;
}

const getChatResponse = async (incomingChatDiv) => {

const API_URL = "https://api.openai.com/v1/completions";
const pElement = document.createElement("p");
 const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: "text-davinci-003",
prompt: userText,
max_tokens: 2048,
temperature: 0.2,
n: 1,
stop: null
})
}

{
const response = await (await fetch(API_URL, requestOptions)).json();
pElement.textContent = response.choices[0].text.trim();
} catch (error) { // Add error class to the paragraph element and set error text
pElement.classList.add("error");
pElement.textContent = "Oops! Something went wrong while retrieving the response. Please try
again.";
}

incomingChatDiv.querySelector(".typing-animation").remove();
incomingChatDiv.querySelector(".chat-details").appendChild(pElement);
localStorage.setItem("all-chats", chatContainer.innerHTML);
chatContainer.scrollTo(0, chatContainer.scrollHeight);
}

const copyResponse = (copyBtn) => {

const reponseTextElement = copyBtn.parentElement.querySelector("p");
navigator.clipboard.writeText(reponseTextElement.textContent);
copyBtn.textContent = "done";
setTimeout(() => copyBtn.textContent = "content_copy", 1000);
}

const showTypingAnimation = () => {

const html = `<div class="chat-content">
<div class="chat-details">
<img src="images/chatbot.jpg" alt="chatbot-img">
<div class="typing-animation">
 <div class="typing-dot" style="--delay: 0.2s"></div>
<div class="typing-dot" style="--delay: 0.3s"></div>
<div class="typing-dot" style="--delay: 0.4s"></div>
</div>
</div>
<span onclick="copyResponse(this)" class="material-symbols-
rounded">content_copy</span>
</div>`;
const incomingChatDiv = createChatElement(html, "incoming");
chatContainer.appendChild(incomingChatDiv);
chatContainer.scrollTo(0, chatContainer.scrollHeight);
getChatResponse(incomingChatDiv);
}

const handleOutgoingChat = () => {

userText = chatInput.value.trim(); // Get chatInput value and remove extra spaces
if(!userText) return;

chatInput.value = "";
chatInput.style.height = `${initialInputHeight}px`;

const html = `<div class="chat-content">

<div class="chat-details">
<img src="images/user.jpg" alt="user-img">
<p>${userText}</p>
</div>
</div>`;

const outgoingChatDiv = createChatElement(html, "outgoing");

chatContainer.querySelector(".default-text")?.remove();
chatContainer.appendChild(outgoingChatDiv);
chatContainer.scrollTo(0, chatContainer.scrollHeight);
setTimeout(showTypingAnimation, 500);
}

deleteButton.addEventListener("click", () => {
// Remove the chats from local storage and call loadDataFromLocalstorage function
if(confirm("Are you sure you want to delete all the chats?")) {
localStorage.removeItem("all-chats");
loadDataFromLocalstorage();
}
});
themeButton.addEventListener("click", () => {
// Toggle body's class for the theme mode and save the updated theme to the local storage
document.body.classList.toggle("light-mode");
localStorage.setItem("themeColor", themeButton.innerText);
themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" :
"light_mode";
});

const initialInputHeight = chatInput.scrollHeight;

chatInput.addEventListener("input", () => {
chatInput.style.height = `${initialInputHeight}px`;
chatInput.style.height = `${chatInput.scrollHeight}px`;
});

chatInput.addEventListener("keydown", (e) => {

if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
e.preventDefault();
handleOutgoingChat();
}
});

loadDataFromLocalstorage();
sendButton.addEventListener("click", handleOutgoingChat);
 CHATBOT
NexusGPT

fig: User Interface of NexusGPT.

About NexusGPT:
NexusGPT represents the convergence of cutting-edge AI technology and user-centric
design, bringing forth a seamless and intuitive conversational experience. Powered by the
advanced capabilities of the ChatGPT API, NexusGPT is not just a chatbot; it's your
intelligent companion in the digital realm.

Key Features:

Natural Language Understanding: NexusGPT leverages state-of-the-art natural language

processing algorithms to understand user queries with unparalleled accuracy and context
awareness.

Dynamic Responses:

Whether it's answering questions, providing recommendations, or engaging in casual

conversation, NexusGPT adapts its responses dynamically, reflecting a deep understanding of
diverse topics and contexts.

Personalized Interaction:

With each interaction, NexusGPT learns and evolves, tailoring its responses to individual
preferences and conversational styles, creating a personalized and engaging user experience.
Multi-Platform Accessibility:

NexusGPT seamlessly integrates with various platforms and channels, including web
browsers, messaging applications, and voice assistants, ensuring accessibility across a wide
range of devices and environments.

Continuous Learning:

Powered by the vast knowledge corpus of the ChatGPT API, NexusGPT continuously learns
from new interactions and updates, staying up to date with the latest information and trends to
deliver accurate and relevant responses.

Why NexusGPT?

NexusGPT isn't just a chatbot; it's a gateway to a world of knowledge, assistance, and
companionship. Whether you're seeking information, guidance, or simply a friendly chat,
NexusGPT is here to accompany you on your digital journey, offering insights, support, and a
touch of AI-powered magic along the way.
 CONCLUSION:
In conclusion, the development and deployment of NexusGPT represent a significant milestone in the
realm of conversational AI, showcasing the potential of advanced natural language processing
technologies to transform user interactions and experiences. Throughout this project, we have
explored the capabilities of the ChatGPT API and leveraged its powerful features to create a versatile
and intelligent chatbot companion.

Key Achievements:
• Innovative Conversational Experience: NexusGPT offers users a seamless and
intuitive conversational interface, powered by the sophisticated language
understanding capabilities of the ChatGPT API. Through dynamic responses and
personalized interactions, NexusGPT enhances user engagement and satisfaction.
• Adaptive Learning: One of the standout features of NexusGPT is its ability to
continuously learn and adapt based on user interactions. By leveraging machine
learning algorithms and vast data resources, NexusGPT evolves over time, improving
its performance and relevance with each conversation.
• Multi-Platform Accessibility: NexusGPT is designed to be accessible across various
platforms and devices, ensuring that users can engage with the chatbot wherever they
are. Whether through web browsers, messaging apps, or voice assistants, NexusGPT
provides a consistent and convenient user experience.

Future Directions:
While NexusGPT has achieved significant success in its current form, there are several avenues for
future exploration and enhancement:

• Advanced Functionality: Future iterations of NexusGPT could incorporate

additional functionalities such as sentiment analysis, content summarization, or task
automation, expanding its utility and versatility.
• Enhanced Personalization: By further refining user profiling and recommendation
algorithms, NexusGPT can deliver even more personalized and contextually relevant
responses, catering to individual preferences and needs.
• Integration with Emerging Technologies: As new technologies and platforms
emerge, NexusGPT can adapt and integrate seamlessly, leveraging advancements in
areas such as augmented reality (AR), virtual reality (VR), and internet of things (IoT)
to enhance user experiences.
 ACKNOWLEDEMENT:
We would like to express our gratitude to [mention any individuals or organizations who contributed
to the project], whose support and guidance have been invaluable throughout the development of
NexusGPT.

In conclusion, NexusGPT represents not just a chatbot, but a gateway to a new era of intelligent and
empathetic digital companionship. As we continue to push the boundaries of AI technology,
NexusGPT stands ready to evolve and adapt, shaping the future of human-computer interaction in
profound and exciting ways.