A

Project Report On
“Simple Chatboat”

Submitted In Partial Fulfillment of the Requirement

For The Award of Diploma
In “Computer Engineering” of Government polytechnic,
Dharashiv Affiliated to
Maharashtra Technical Board of Education
Under The Guidance of
Mr.B.R.Chuvan

Department of Computer Engineering

Government Polytechnic, Dharashiv
 MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION

CERTIFICATE OF COMPLETION

This is to certify that the project “Simple Chatboat” in CPE(Capstone Project Execution)
is successfully completed by the following students of fifth semester of Diploma in
“GOVERNMENT POLYTECHNIC DHARASHIV” (Instt.code:0118) has completed project
work satisfactorily in subject Software Testing.

Sr. Roll no. Name of Student Enrollment no. Seat no.

no.
01. 03 Walande Gauri Dayanand 2201180003

02 21 Joshi Shravani Shrikant 2201180062

03 32 Masiha Silviya Santosh 2201180234

04 34 Kawade Priya Shankar 2201180235

05 44 Barate Varsharani Dadasaheb 2201180407

The group of students mentioned above have successfully completed the

microproject in the subject of Capstone Project.

Project Guide HOD

B.R.Chauhan A.B.Gaikwad
 ACKNOWLEDGEMENT

I take this opportunity to express my profound gratitude and deep regards to my guide, Mr. B.R.Chauhan
(Computer Department, Government Polytechnic Dharashiv), for his exemplary guidance, monitoring, and
constant encouragement throughout the course of this project. The blessings, help, and guidance given by
him from time to time shall carry me a long way in the journey of life on which I am about to embark.

I also take this opportunity to express my deep sense of gratitude to Mr. A. B. Gaikwad (Head of
Department) for his cordial support, valuable information, and guidance, which helped me complete this
task through various stages.

I am also obliged to the staff members of Government Polytechnic Dharashiv for the valuable information
provided by them in their respective fields. I am grateful for their cooperation during the period of my
assignment.
INDEX
1.0) INTRODUCTION:-

1.1 Rationale :-
A capstone project serves as an essential final assignment that allows students to demonstrate the skills and
knowledge they have gained throughout their academic program. Through this project, students apply
theoretical concepts to practical situations, enhancing their overall learning experience.

The Simple Chatbot project helps students develop critical skills such as problem-solving, logical thinking,
technical proficiency, and creativity. By designing and implementing a chatbot using web technologies and
integrating it with AI services, students learn how to analyze real-world problems and create working
solutions.

Additionally, this project fosters important professional abilities including teamwork, research,
communication, and time management. Students engage with current technological trends, such as artificial
intelligence and web development, making them better prepared to meet industry demands.
Thus, the chatbot project not only strengthens technical capabilities but also bridges the gap between
academic learning and real-world applications.

1.2 Benefits of microproject:-

1. Improved Efficiency

 Automated Responses: The chatbot automates answering basic user queries, reducing the need
for constant human support.
 Quick Communication: Provides instant responses to user questions without delay, saving time
and effort compared to manual replies.

2. Enhanced Communication

 User Interaction: Facilitates seamless interaction between users and the system by allowing
users to ask questions and receive smart answers.
 24/7 Availability: The chatbot is always active, allowing users to communicate anytime without
depending on staff availability.
3. Data Management

 Conversation Flow: Maintains the sequence of chats in an organized way, making it easy to
trace past interactions if needed.
 User Query Handling: Helps analyze the types of questions users frequently ask, providing
valuable insights for improving services.

4.Improved User Experience

 User-Friendly Interface: The chatbot has a simple, clean, and responsive design that enhances
the overall user experience.
 Personalized Interaction: By using AI responses, users receive more relevant and personalized
answers, making conversations feel natural and engaging.
 Login functionality: User is provided with a login page functionality where he/she can login or
sign in using user name and password.

1.3 Scope:-
The scope of the Simple Chatbot micro project involves building a responsive, intelligent communication
system that allows users to interact naturally and receive automated replies. The project covers multiple
important areas of web development and AI integration. Key areas of scope include:

1. User Interaction and Interface

 User-Friendly Chat Portal: Provide a simple and interactive chat interface where users can send
messages and receive replies in real-time.
 Dynamic Message Handling: Allow the system to process user inputs instantly and show them
as chat bubbles, making the interaction feel natural.

2. AI Integration and Response Generation

 Use of Gemini API: Integrate Google’s Gemini API to generate intelligent and human-like
responses based on the user's message.
 Automated Conversations: Simulate human-like communication without manual intervention,
making the chatbot work independently.
3. Web Development and Design

 Frontend Development: Design a clean and attractive webpage using HTML, CSS, and
JavaScript for better user experience.
 Responsive Design: Ensure the chatbot works on different screen sizes like mobile phones,
tablets, and desktops.

4. Data Management and Message Flow

 Real-Time Message Updates: Maintain proper flow of user and bot messages dynamically
without refreshing the page.
 Auto-Scrolling Feature: Automatically scroll to the newest message so that users can follow the
conversation easily.

5. Future Scalability

 Expandable Features: The chatbot can later be expanded to include voice recognition,
multilingual support, saving conversation history, and smarter AI features.
 Customization for Industries: It can be adapted for educational help desks, customer support,
booking systems, and more.

1.4Course outcomes Achieved :-

 Wrote the problem specification for the need of an automated chatbot system.
 Collected and used knowledge of web development and AI integration to complete the project.
 Chose a web-based chatbot solution logically for user interaction.
 Prepared a detailed project proposal with a clear action plan and timeline.
 Managed multiple user interactions together using the chatbot.
 Greatly reduced workload by automating user responses.
 Improved communication efficiency and user experience through AI integration.
1.5 Problem Definition:-

Project Title: "Simple Chatbot Website"

The Simple Chatbot aims to provide an automated communication system where users can interact naturally
with a web-based chatbot for instant query resolution. The system is designed to replace manual, time-
consuming conversations with smart AI-generated responses, ensuring faster and more efficient interaction
between users and digital platforms. Current methods of answering queries manually are often slow,
inconsistent, and require constant human presence, leading to inefficiency and delayed response times.

1.6 Acrion Plan:-

Sr. Details of Activity Planned Planned Start Planned

No Date Finish
Date
01 Understand and analyse relevance of
capstone project
02 Observe the real world problems.

03 Choosing a real world problem for

implementing solution
04 Understand the scope of project
05 Actual methodology which is
followed for identifying the problem

06 Make a rough solution plan

07 Writing Proposal for project

08 Submit proposal proposal
2.0) GENERAL BEHAVIOUR :-

The Simple Chatbot project is designed to offer an automated, efficient, and user-friendly way for users to
interact with a digital system. It reduces the need for human effort in answering frequent queries and
provides a seamless communication experience. The system ensures fast response times, consistent
communication, and availability without interruption. It promotes better engagement between users and the
platform while keeping the interface simple, intuitive, and accessible for everyone

2.1 Specifications:

 Need for an Automated System:

In today's fast-paced digital world, instant communication is essential. This chatbot project aims
to create an interactive system that can quickly respond to user queries using AI without needing
human intervention, improving overall communication efficiency.
 Improved Message Management:
The chatbot efficiently handles user queries, organizes conversation flow, and ensures that
information is easily accessible without any manual effort.
 AI-Powered Responses:
The system connects with Google's Gemini API to generate intelligent and relevant replies,
providing a better conversational experience compared to pre-written scripts.
 User-Friendly Interface:
Designed with a clean and modern layout, the chatbot ensures that users can easily navigate, send
messages, and receive responses, even if they have minimal technical skills.

Security and Data Privacy:

 User Data Handling:

Minimal user data is processed, and the chatbot focuses on ensuring privacy during conversation
interactions.
 Secure API Communication:
Communication with the AI service is done securely using modern web standards to protect data
during transmission.
Scalability and Integration:

 Future Expansion:
The system is designed in a modular way, allowing future upgrades such as voice support, saving
conversation history, adding FAQs, and advanced analytics.
 Integration with Other Systems:
APIs and external services (like Google AI) are already being used, and future integrations with
databases, support systems, or CRM tools are possible to extend the chatbot’s capabilities

2.2 Actual Resources Used:

Sr.no Name of resources Broad Specifications

1. laptop
2. Browser
3. Microsoft World
4. Software
5. API Service
6. Image Resource

2.3 Language Used:

1. Frontend: HTML, CSS, JavaScript,PHP

 HTML:
HTML (HyperText Markup Language) is the standard markup language used to create the
structure of web pages. It defines the meaning and structure of web content and works alongside
CSS and JavaScript to build interactive websites.
 CSS:
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a
document written in HTML. It controls the layout, colors, fonts, and overall appearance of the
website, ensuring a user-friendly and visually appealing design.
 JavaScript:
JavaScript is a high-level, interpreted programming language that enables the creation of
 dynamic, interactive websites. It is used for controlling the chatbot functionality, handling user
inputs, and connecting with external APIs like Google Gemini.

2. Backend: API Integration (No separate backend development)

Google Gemini AI API:

Instead of a traditional backend server, the chatbot communicates directly with Google's Gemini AI
service using API requests to generate responses.

3. Database: None (Real-time API Communication)

This chatbot does not use a database like MySQL or MongoDB.

All user queries and AI responses are handled in real-time through API calls without storing any data
3.0) LITERATURE VIEW:-
Design of Project:
The Simple Chatbot project is structured into different modules to create a smooth and interactive user
experience. The system is focused on efficient communication and real-time response generation using AI.

Module 1: Home Page Design

Section Description

Welcome Screen Displays a friendly greeting message: "Hey There! Talk to your own
Chatbot".

Chat Interface After user interaction, the chatbot screen opens where users can type and
send messages.

Prompt Area At the bottom, users can type queries into the input field and press the
send button to interact with the chatbot.

Module 2: Chat Functionality Design

Section Description
User Message Handling Captures the user’s input message and displays it in the chat window.

Bot Thinking Phase Shows a "thinking..." message while waiting for the AI response from the
Gemini API

AI Response Handling Receives the AI-generated reply from the Gemini API and displays it in the
chat.

Auto-Scroll Feature Automatically scrolls down to the latest messages during chat interaction.
3.2 Implementation Steps:
Step 1: Project Setup

 Create project directory structure (HTML, CSS, JS, PHP folders).

 Set up development environment (e.g., VS Code, XAMPP for PHP/MySQL).
 Download user & robot icons and Gemini API key.

Step 2: Frontend Interface Design

1.Design homepage (index.html) with a greeting screen.

2.Create a chat interface with:

 Chat area
 Input field
 Send button
 Scrollable chat container

Step 3: Style the Interface

1.Write style.css for:

 Chat layout
 User and bot message bubbles
 Gradient titles, custom scrollbar, responsive layout

Ensure mobile and desktop compatibility.

Step 4: Implement Chat Functionality (JavaScript)

 Capture user input from input field.

 Append user's message to chat window.
 Display "thinking..." while awaiting response.
 Make API call to Google Gemini.
 Display bot's reply once response is received.
 Auto-scroll to latest message.

Step 5: Integrate Google Gemini API

  Register and get xAPI key from Google Cloud.
 Use fetch() in JS to POST user message to Gemini.
 Handle the API response and clean the output before displaying.

Step 6: Add Login System (Frontend)

1.Create login.php page with:

 Username and password fields

 Submit button

Add gradient buttons and form validation in CSS.

Step 7: Build Backend Authentication (PHP + MySQL)

1.Set up a database (mydb) and login table.

2.Create LoginInsert.php to handle form submissions:

 Store username and password.

 Redirect on success or failure.

Step 8: Connect Login with Chat

 Redirect user to chatbot (index.html) upon successful login.

 Optionally manage sessions to keep user logged in.

Step 9: Optimize Chat UX

 Hide the initial greeting once user focuses on input.

 Add delay effect in bot reply for realism.
 Support enter key to send message.

Step 10: Add Form Validations

 Ensure login form fields aren’t empty before submitting.

 Validate chatbot input for empty strings or spam.
 Sanitize inputs to prevent XSS or injection.
Step 11: Testing

1.Test chatbot flow end-to-end:

Login → Chat → Get Reply

Test for:

 Empty input
 Invalid login
 Broken API call
 UI responsiveness

Step 12: Secure API Key

 Hide API key using server-side logic or .env file (optional for advanced version).
 Prevent unauthorized use of your key.

Step 13: Optional Enhancements

 Add logout functionality.

 Save chat history (local storage or database).
 Add typing animation or sound on message.
 Voice integration using Web Speech API.

Step 14: Deployment

 Host frontend on GitHub Pages or Netlify.

 Host PHP backend and MySQL on free services (like 000webhost, InfinityFree).
 Ensure API key is active and domain is whitelisted.

Step 15: Documentation & Handover

Document how to:

 Set up project
 Generate API key
 Deploy code
4.0) SYSTEM REQUIREMENTS

4.1 Implicit Requirements

These are the high-level expected capabilities and system behavior that guide the development of the Simple
Chatbot system.

Functional Expectations:

User Interaction

 Users should be able to access a chat interface and send messages.

 The interface should respond dynamically to user input.

API Integration

 The chatbot must generate smart, relevant replies using Google's Gemini API.
 Must simulate human-like conversation without manual input.

Login Feature

 Users must log in with a username and password before accessing the chatbot.
 Credentials are stored securely and managed through PHP and MySQL.

Chat Experience

 Messages must appear in chat bubbles with appropriate design (user and bot).
 The interface should auto-scroll to show the latest message.

Real-Time Communication

 Messages should appear without refreshing the page.

 The bot should simulate a “thinking...” delay before replying.

Security Measures

 Input should be sanitized to prevent XSS or script injection.

 API key and user data should be protected.
4.2 Explicit Requirements

Functional Requirements

Main Chatbot Interface:

 Display a welcome screen with a greeting message.

 Show a prompt area where users can enter and send messages.
 Display user messages and bot responses in styled chat bubbles.
 Auto-scroll chat window to latest message.
 Show “thinking…” while the AI response is being generated.
 Integrate Google Gemini API for response generation.
 Provide a login screen before accessing the chatbot.
 Redirect users to chatbot page after login validation.

Login System

 Allow users to enter username and password.

 Insert login credentials into MySQL database via PHP.
 Redirect users on successful login.
 Handle incorrect login attempts gracefully.
 Prevent access to chatbot without login.

Non-Functional Requirements
Main Interface

 Ensure page load time is under 2 seconds.

 Chat UI should be responsive across mobile, tablet, and desktop.
 Minimal delay (<1 sec) between user message and bot “thinking...” phase.
 Support multiple simultaneous users using client-side code (JavaScript).

Login & Security

 Login data should be securely transmitted (HTTPS in production).

 Passwords should ideally be hashed before storing (bcrypt recommended).
 Prevent SQL injection using input validation and prepared statements.
Performance & Usability

 Auto-scroll to new messages without refresh.

 Prevent empty messages from being sent.
 Gracefully handle failed API responses (e.g., no internet).
 Maintain clean, minimal UI for ease of use.

API Integration

 Secure API key and handle API failures with proper error messages.
 Use efficient fetch() logic to minimize request latency.
 Handle large promizes without breaking UI or freezing.

Scalability & Mapt sintainability

 Codebase should be modular: separate files for HTML, CSS, JS, and PHP.
 Easy to add new features (voice support, saving chat, etc.).
 Follow best practices (semantic HTML, clean CSS, and commented JS).

Compatibility

 Chatbot must work on Chrome, Firefox, Safari, and Edge.

 Interface should be consistent across different screen sizes.
5.0) UML Diagrams:

5.1 Usecase Diagram:-

5.2 Flowchart:-
5.3 UML diagram :-
5.4 DFD Diagram:-

DFD LEVEL 0:
DFD LEVEL 1:
6.0) Code:

6.1 Login page code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Login | Chatbot</title>
<style>
body {
margin: 0;
padding: 0;
font-family: "Segoe UI", sans-serif;
background: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

.login-container {
background: white;
padding: 40px;
border-radius: 15px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
width: 350px;
text-align: center;
}
.login-container h2 {
font-size: 28px;
margin-bottom: 10px;
background: linear-gradient(to right, #d16ba5, #86a8e7, #5ffbf1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.login-container p {
color: #666;
font-size: 14px;
margin-bottom: 30px;
}

.login-container input {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 14px;
}

.login-container button {
background: linear-gradient(to right, #86a8e7, #d16ba5);
color: white;
border: none;
padding: 12px;
width: 100%;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
 transition: background 0.3s ease;
}

.login-container button:hover {
background: linear-gradient(to right, #d16ba5, #86a8e7);
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<p>Enter your credentials to start chatting</p>
<form action="http://localhost/LoginInsert.php" method="POST">
<input type="text" id="username" name="Username" placeholder="Username" required />
<input type="password" id="password" name="Password" placeholder="Password" required />
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
<?php
$servername="localhost";
$username="root";
$password="Aaditi@12";
$db="mydb";
$conn=mysqli_connect($servername,$username,$password,$db);
if($conn){
$username=$_POST['Username'];
$password=$_POST['Password'];
$query="insert into login values('".$username."','".$password."')";

if(mysqli_query($conn,$query)){

header("Location: login.html");
exit();
}
else
{
$msg="<script>alert('Login Failed');</script>";
echo $msg;
}
}

?>
6.2 Script.js:

let prompt = document.querySelector("#prompt");

let btn = document.querySelector("#btn");
const chatContainer = document.querySelector(".chat-container");
const container = document.querySelector(".container"); // This is the "Hey There" greeting
let userMessage = null;

const Api_url = "https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-

flash:generateContent?key=AIzaSyAEoHgSB3iobzVERwqYYB7YNDOlfbzS_sI";

// Store user data

let user = {
data: null
};

// Function to generate bot response using the Gemini API

async function generateResponse(msgElement) {
let requestOption = {
method: "POST",
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
"contents": [{
"parts": [{ "text": user.data }]
}]
})
};

try {
let response = await fetch(Api_url, requestOption);
let data = await response.json();

// Extract response and clean up unwanted characters

let apiResponse = data.candidates[0].content.parts[0].text.replace(/\\(.?)\\*/g, "$1").trim();

// Set bot message in the chat

msgElement.innerHTML = apiResponse;
autoScroll(); // Auto-scroll to the latest message
} catch (error) {
console.log(error);
}
}

// Event listener for sending a message

btn.addEventListener("click", () => {
userMessage = prompt.value;
prompt.value = "";
if (!userMessage) return;
user.data = userMessage;

// Display the user's message and then bot's response

displayUserMessage(userMessage);
displayBotMessage();
});

// Function to display the user's message

function displayUserMessage(message) {
let userChat = document.createElement("div");
let userImg = document.createElement("div");
let msg = document.createElement("div");
let img = document.createElement("img");

userChat.classList.add("user-chat-box");
userImg.classList.add("img");
msg.classList.add("userChat");

msg.innerHTML = message;
img.src = "user.png";
img.width = "50";

userChat.appendChild(userImg);
userChat.appendChild(msg);
userImg.appendChild(img);

chatContainer.appendChild(userChat);
autoScroll(); // Auto-scroll to the latest message
}

// Function to display the bot's message

function displayBotMessage() {
let botChat = document.createElement("div");
let botImg = document.createElement("div");
let msg = document.createElement("div");
let img = document.createElement("img");

botChat.classList.add("ai-chat-box");
botImg.classList.add("img");
msg.classList.add("bot-chat");
msg.innerHTML = "thinking....";

// Display the bot's message after a delay (simulate "thinking...")

setTimeout(() => generateResponse(msg), 600);

img.src = "robot.png";
img.width = "50";

botChat.appendChild(botImg);
botChat.appendChild(msg);
botImg.appendChild(img);

chatContainer.appendChild(botChat);
autoScroll(); // Auto-scroll to the latest message
}

// Function to handle auto-scrolling

function autoScroll() {
chatContainer.scrollTop = chatContainer.scrollHeight;
}

// Function to show the chat container after initial greeting

function showChatContainer() {
container.style.display = "none"; // Hide the initial greeting
chatContainer.style.display = "flex"; // Show the chat container
}

// Initially show the "Hey There" message

window.addEventListener("load", () => {
// Show the "Hey There" message on load
setTimeout(() => {
container.style.display = "flex"; // Show the initial greeting
}, 1000);

// Wait for the user to interact with the prompt

prompt.addEventListener("focus", () => {
// When the user focuses on the input, hide the greeting and show the chat
showChatContainer();
});
});
6.2 Style.css:

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif; /* Modern font */
}

body {
width: 100%;
height: 100%;
background-color: #f5f5f5; /* Light background color */
font-size: 16px;
}

.container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding-top: 50px;
display: flex;
}

.container h1 {
font-size: 3rem;
background: linear-gradient(to right, rgb(214, 161, 161), rgb(123, 166, 188), rgb(197, 95, 143));
background-clip: text;
-webkit-text-fill-color: transparent;
 margin-bottom: 10px;
}

.container h2 {
font-size: 1.2rem;
color: rgba(0, 0, 0, 0.6);
}

.chat-container {
width: 100%;
max-height: 80vh;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 20px;
padding: 20px;
margin-bottom: 100px;
background: #ffffff; /* Light white background for chat */
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.user-chat-box, .ai-chat-box {
width: fit-content;
max-width: 60%;
padding: 10px;
border-radius: 25px;
font-size: 15px;
margin: 10px 0;
}

.user-chat-box {
background-color: #1e90ff;
color: white;
 align-self: flex-end;
border-top-right-radius: 0;
}

.ai-chat-box {
background-color: #e0e0e0;
color: #333;
align-self: flex-start;
border-top-left-radius: 0;
}

.img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}

.prompt-area {
width: 100%;
height: 80px;
background-color: #333;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

#prompt {
background-color: #ffffff;
width: 75%;
 height: 50px;
padding: 10px;
outline: none;
border: none;
border-radius: 25px 0px 0px 25px;
font-size: 16px;
}

#btn {
width: 50px;
height: 50px;
background-color: #1e90ff;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
margin-left: 10px;
}

#btn img {
width: 25px;
height: 25px;
}

#btn:hover {
background-color: #00bfff;
}

#btn:active {
background-color: #008cba;
}
/* Scrollbar styling for smooth scroll */
.chat-container::-webkit-scrollbar {
width: 8px;
}

.chat-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 10px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
6.3 Index.html:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>My Chatbot</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="container">

<h1>Hey There!</h1>

<h2>Talk to your own Chatbot</h2>

</div>

<div class="chat-container">

<div class="user-chat-box">

<div class="img">

<img src="user.png" alt=""width="50">

</div>

<p class="text">

hello bot im user

</p>

</div>

<div class="ai-chat-box">

<div class="img">

<img src="robot.png" alt="" width="50">

</div>

<p class="text">

hello user how are you i am chat bot

</p>

</div>

</div>
 <div class="prompt-area">

<input type="text" id="prompt" placeholder="Ask something...">

<button id="btn"><img src="send.svg" alt="btn"></button>

</div>

<script src="script.js"></script>

</body>

</html>
7.0) output:-
8.0) Application:
The Simple Chatbot system has a wide range of applications across various domains, primarily due to its
ability to simulate human-like conversations and provide automated support. Below are the key areas where
this chatbot can be effectively applied:

1. Educational Institutions

 Student Query Resolution: Automatically answer frequently asked questions regarding

admissions, exam schedules, results, or course content.
 24/7 Help Desk: Support students and staff around the clock without the need for manual
intervention.
 E-learning Platforms: Assist students with learning material and navigation through the portal.

2. Customer Support Services

 Automated Customer Care: Address customer queries instantly without waiting for a human
representative.
 Product Information: Provide information about services or products to users through natural
language queries.
 Ticket Booking Systems: Integrate with ticketing services for event or travel bookings using chat
commands.

3. Corporate Environments

 Employee Assistance: Answer HR or IT-related questions within an organization.

 Onboarding: Help new employees get familiar with company policies and procedures.
 Scheduling: Book appointments or meetings through simple chat commands.

4. Healthcare

 Appointment Booking: Schedule consultations and remind patients of upcoming appointments.

 Symptom Checker: Provide preliminary health advice or route users to appropriate departments.
 Mental Health Support: Offer conversational support for mental wellness in a non-judgmental,
anonymous way.
5. E-commerce Platforms

 Product Recommendations: Help users find products based on their preferences.

 Order Tracking: Enable users to check the status of their orders through chat.
 Feedback Collection: Automatically collect reviews and suggestions after purchases.

6. Government and Public Service Portals

 Citizen Support: Guide users through application processes, document requirements, and
deadlines.
 Information Dissemination: Share public notices or alerts efficiently and interactively.
 Complaint Registration: Help users log issues and receive updates on their status.

7. Entertainment & Lifestyle

 Personal Assistant: Provide entertainment suggestions, reminders, weather updates, and more.
 Games and Quizzes: Engage users with interactive and fun chat-based content.
 Event Information: Update users about upcoming concerts, movies, or festival
8.1 SKILLS DEVELOPED / LEARNING OUTCOMES

Technical Skills

 Web development with HTML, CSS, JavaScript, and PHP.

 Integration of Google Gemini AI API for smart responses.
 User authentication system using PHP & MySQL.
 Real-time chat UI with auto-scroll and dynamic updates.
 Debugging, input validation, and secure data handling.

Soft Skills

 Team collaboration and task coordination.

 Effective time management and meeting deadlines.
 Problem-solving and critical thinking.
 Communication and project documentation.

8.2 FUTURE ENHANCEMENTS (Summary)

 AI Analytics: Predictive analysis of user behavior.
 Mobile Support: Mobile-friendly interface & notifications.
 LMS Integration: Connect with learning platforms.
 Cloud Deployment: For scalability and data security.
 Online Exams: Secure, auto-graded assessments.
 Parent Portal: Progress tracking and insights.
 Career Tools: Resume builders and job listings.
 Multi-language Support: For diverse users.
 Virtual Classrooms: Live sessions & recordings.
 Gamification: Badges, points, and achievements.
9.0) CONCLUSION

The Simple Chatbot project successfully demonstrates how artificial intelligence and web technologies can
be combined to create an efficient, user-friendly communication platform. Designed with a clean interface
and powered by Google’s Gemini API, the chatbot automates user interaction, providing instant, intelligent
responses without the need for human intervention.

This project not only enhances the user experience by offering real-time assistance but also reduces
workload and improves overall efficiency. Key features such as login authentication, dynamic message
handling, and responsive design make it suitable for educational, customer support, and organizational use.

Looking ahead, the chatbot can be expanded with features like voice integration, multilingual support, cloud
deployment, and data analytics—making it scalable and adaptable to diverse industries. The project has
provided valuable hands-on experience in full-stack development, API integration, and AI implementation,
reflecting both technical skill and creative problem-solving.
10.0) REFERENCES

 www.javatpoint.com – For HTML, CSS, JavaScript, and PHP tutorials.

 www.w3schools.com – For web development basics and syntax reference.

 www.tutorialspoint.com – For comprehensive programming guides and API usage.

 www.oracle.com – For database concepts and MySQL-related information.

 cloud.google.com – For Gemini AI API documentation and integration.

 developer.mozilla.org (MDN) – For JavaScript and modern web development best practices.

 Project-based learning material and class notes from Government Polytechnic, Dharashiv