INTRODUCTION:

WebGpt is an AI-powered chatbot application designed to mimic the conversational

capabilities of the Gemini AI. The primary purpose of this project is not to create
an entirely new AI but to showcase proficiency in web development technologies like
HTML, CSS, JavaScript, PHP, and MySQL. The project is hosted on InfinityFree, a
free hosting platform, and utilizes PHPMyAdmin for managing the backend database,
which stores chat history and user-related information. WebGpt is not just a
project; it is a demonstration of how creativity, technical expertise, and AI
integration can work together to deliver a robust user experience. Leveraging the
Gemini API as its backend, WebGpt allows users to generate textual responses
dynamically, offering a seamless interaction with the AI. This application embodies
our efforts to combine modern web design principles with advanced backend
technology to create a practical and responsive solution for content generation.

The dawn of the AI era has brought forth a new frontier of possibilities, and
WebGPT stands at the forefront of this revolution. This project aims to develop a
powerful language model, inspired by the groundbreaking Gemini model, that empowers
users with a versatile AI assistant and bringing advanced AI capabilities directly
to your fingertips. By leveraging the strengths of advanced AI, WebGPT aims to
provide insightful responses to a wide range of queries, generate creative text
formats, and assist in various tasks such as receiving informative and
comprehensive answers to our questions. By running directly in your browser, WebGPT
eliminates the need for complex installations, making it accessible to users of all
technical backgrounds.Whether you're a student, a professional, or simply curious
about the latest AI advancements, WebGPT is your versatile tool.

WebGPT is not just a language model; it's a gateway to a future where AI seamlessly
integrates into our daily lives. This project strives to push the boundaries of AI
capabilities, making it more accessible and beneficial to individuals and
organizations alike. With WebGPT, we envision a world where AI becomes a trusted
companion, enhancing productivity, fostering creativity, and solving complex
problems. This project is a testament to the relentless pursuit of innovation and
the potential of AI to transform the way we interact with information and
technology. By developing WebGPT, we hope to contribute to the advancement of AI
and make a positive impact on society.As we continue to develop WebGPT, we're
committed to pushing the boundaries of language model capabilities. We're excited
to share this innovative tool with the world and look forward to seeing how it will
be used to shape the future.

With WebGPT, you can expect:

1. Informative and Comprehensive Responses: Receive detailed and accurate answers
to your questions.
2. Creative Text Generation: Generate various creative text formats, such as poems,
scripts, musical pieces, email, letters, etc.
3. Language Translation: Translate text between multiple languages.
4. Summarization: Condense long articles or documents into concise summaries.

SURVAY OF TECHNOLOGIES

Development environment:

The technologies utilized in this project are based on current web development
trends, ensuring that the application is both efficient and user-friendly. VS Code
is a platform that is used to create web application with various computer
languages including PHP. Alongside, PHPMyAdmin allows to manage database easily.

Web Development technologies:

Client Side Technologies-

HTML: Used to structure the webpage and define key elements like forms, input
fields, buttons, and message display areas.

CSS: Used for styling, including features like dark/light mode switching,
animations, and responsive design to ensure compatibility across devices.

JavaScript: Provides interactivity, handling real-time user input and API

communication. JavaScript enables dynamic content updates without reloading the
page.

Server Side Technologies-

PHP: A server-side scripting language used for handling API requests, managing
sessions, and interacting with the MySQL database for storing chat history.

MySQL: A relational database used for storing user information, chat history, and
other necessary data.

Other Technologies-

Gemini API: The AI service used to generate real-time responses based on user
queries, forming the core functionality of the chatbot.

Tools:
1. VS Code: Code editor.
2. Browsers: Chrome, Safari, Edge (for testing).
3. Infinityfree website: For hosting

REQUITMENT AND ANALYSIS

Problem Definition:

The goal is to develop a web-based AI chatbot that can interact with users in real-
time, provide responses, and maintain a history of conversations. The system must
include the ability to switch between light and dark modes, store chat data
persistently, and provide an interactive and intuitive user interface. The primary
purpose of this project is not to create an entirely new AI but to showcase
proficiency in web development technologies like HTML, CSS, JavaScript, PHP, and
MySQL.

System Requirements & Specifications (SRS):

The system must meet the following requirements:

 Ability to integrate with the Gemini API for generating chatbot responses.
 Real-time message exchange with asynchronous communication.
 Data persistence using MySQL to store chat history. 5
 Light and dark modes for user interface customization.
 A responsive design that works on mobile, tablet, and desktop devices.

Userclass and Characteristics:

1. Students
2. Admin
3. General people can also access this web page

Functional Requirements:
The system must provide functionalities of keeping records of registration of
users, viewing details of the user, etc. More functionalities requirement are as
follows-

1. Database Creation: A database should be created, as per the rule for the purpose
of maintenance of the records.

2. Implementation of the Front-End: Implementation oof the main screen giving the
login, screen that follow the login giving various options, screens for each of the
options are provided.

3. Integrating the Front-End with the database: The front-end developed in the
earlier milestone will not be able to update the database. The system should be
ready for testing.

4. Storage Data: In this we store all the details of student and users information.

5. Outputs: The project provides information required by the users.

Non Functional Requirements:

1. Usability: This section includes all of those requirements that effect

usability.
We get the response within seconds.
The software must have a simple, user friendly interface so user can save time and
confusion.
As the project is made using PHP, it has fast loading time then the website made
using any other language.

2. Reliability: This is more reliable because of the qualities that are inherited
from the chosen platform php. The code built by using php is more reliable.

3. Supportability: The system is designed to be cross platform supportable. The

system is supported in a wide range of hardware and software platforms.

4. Interface: The user interface is based on the web browser. The application is
developed using HTML. The interface designed is aimed at a flexible front-end
communication to provide the user with clear information in navigating a user-
friendly interface is planned.

External interface Requirements:

The WebGPT application does not impose any specific external interface
requirements, as it is designed to operate seamlessly across various devices and
platforms. Since WebGPT is a web-based application, it can run efficiently on any
device with a modern web browser, such as desktops, laptops, tablets, and
smartphones. No special hardware or software is needed for its operation. This
design ensures accessibility and usability for a wide range of users without
requiring additional installations or upgrades to existing systems.

Feasibility Study:

The feasibility study for WebGPT confirms its viability across key dimensions:

1. Technical Feasibility: WebGPT uses widely supported web technologies like HTML,
CSS, and JavaScript, ensuring a robust and scalable platform.

2. Economic Feasibility: The project is cost-effective, leveraging open-source

tools and requiring no specialized hardware or software.

3. Operational Feasibility: Its user-friendly, web-based design ensures

accessibility and ease of adoption across diverse devices and user groups.

In summary, WebGPT is a technically and economically sound project with strong

operational and market potential.

Project Module:

1. Login and Signup System: The project includes a secure login page connected to a
database to authenticate users. A sign-up link is provided for new users to create
accounts. After successful login, users are redirected to the WebGPT interface.

2. WebGPT Interface: The main WebGPT page is designed with a user-friendly

interface offering the following features:

Dark and Light Mode: Users can toggle between dark and light themes for
personalized viewing.

About Section: An accessible window provides information about WebGPT, its

functionality, and usage guidelines.

Text Interaction: Users can ask questions and receive text-based responses from
WebGPT.

Copy Functionality: Responses can be easily copied for further use, enhancing
convenience and accessibility.

This module ensures a seamless user experience, combining security, functionality,

and ease of use.

Conceptual Model:

The WebGPT system is designed with the following core components:

1. User Authentication: A login page connected to a database for secure access,

with a sign-up link for new users.

2. WebGPT Interface: Allows users to ask questions, receive responses, copy text,
toggle between dark and light modes, and access an about window.

3. Database Integration: Manages user credentials and logs for security.

4. Frontend-Backend Interaction: Ensures smooth communication between the user

interface, authentication, and WebGPT engine via API calls.

This model ensures simplicity, scalability, and an enhanced user experience.

Data Flow Diagram(DFD):

The data flow diagram shows the flow of data or information. It can be partitioned
into single processes or functions. This diagram can be grouped together or
decomposed into multiple processes.

Input Design:
Validations: Input fields are validated to ensure that the user provides a valid
message before sending it.

Input Design Objective:

To ensure that the input process is straightforward and user-friendly. Below is the
HTML and JavaScript code for user input validation.