INSTITUTE OF ENGINEERING AND TECHNOLOGY, LUCKNOW

An Autonomous Constituent Institute of Dr. A.P.J. Abdul Kalam Technical University,

Lucknow, U. P.

Session 2024-25
Mini Project Assessment Report
(KCS 752)
A report submitted in partial fulfilment of the requirements for the
award of Degree of

BACHELOR OF TECHNOLOGY
in

COMPUTER SCIENCE AND ENGINEERING

Submitted By: Submitted To:

Divyansh Pandey Ms. Sonam Srivastava

Roll No.: 2100521520028

Submission Date:
 TABLE OF CONTENTS

S. No. Title Page No.

1. Certificate 3

2. Acknowledgement 4

3. Abstract 5

4. Introduction 6

5. Literature Review 7

6. Methodology 8-9

7. Implementation 10-13

8. Results and Discussion 14-15

9. Conclusions 16-17

10. References 18

11. Appendices 19-22

 CERTIFICATE

This is to certify that the “Mini Project report” submitted by Divyansh Pandey (Roll No.: 2100521520028)
is work done by him and submitted during the 2024 – 2025 academic year, in partial fulfilment of the
requirements for the award of the degree of Bachelor of Technology in Computer Science and Engineering
at Institute of Engineering and Technology (Lucknow, Uttar Pradesh).

Date:
Place: Lucknow, U.P.

Ms. Sonam Srivastava

Project Supervisor
Course Coordinator
(KCS 752)
 ACKNOWLEDGEMENT

This report is the outcome of a mini project successfully completed as a part of the requirements for my
Bachelor of Technology program in Computer Science and Engineering at I.E.T. Lucknow. The project,
undertaken in collaboration with my classmate Gaurav Pandey (Roll No: 2100521500029) and Chandra
Shekhar Singh (Roll No: 2100521520024), has been an enriching and rewarding learning experience.
I would like to express my sincere gratitude to our supervisor, Ms. Sonam Srivastava, for his invaluable
guidance, mentorship, and encouragement throughout the development of this project. His insights and
constructive feedback were instrumental in refining our work and enhancing the quality of the project.
I extend my heartfelt thanks to our Course Coordinators, Ms Sonam Srivastava, for their consistent support
and direction during the project. Their expertise and encouragement were pivotal in ensuring the successful
completion of this endeavour.
Lastly, I would like to thank my classmates and peers for their collaboration, insights, and support, which
made this project a truly collaborative and rewarding experience.
 ABSTRACT

The proposed project is an AI-powered fitness web application designed to provide users with
an interactive and personalized fitness experience. Developed using HTML, CSS, and
JavaScript, the application integrates modern technologies like speech recognition and a
chatbot powered by the Gemini API.
The speech recognition feature allows users to interact with the application hands-free,
enabling seamless navigation, real-time workout guidance, and voice-activated commands to
access fitness tips and routines. The chatbot serves as a virtual fitness assistant, offering
tailored recommendations, answering health and exercise-related queries, and guiding users
through their fitness journeys. By leveraging the Gemini API, the chatbot ensures intelligent,
responsive, and engaging user interaction.
This web application is designed to cater to fitness enthusiasts of all levels, providing
customized workout plans, progress tracking, and motivational support. The intuitive
interface combines accessibility and innovation, making it easy for users to navigate and
achieve their health goals. With its blend of advanced AI features and user-friendly design,
this project demonstrates the potential of technology to enhance fitness experiences,
empowering individuals to lead healthier lives while staying engaged and motivated.
In addition to its interactive features, the application offers tools for progress tracking, goal
setting, and adaptive workout suggestions based on user performance. Its intuitive design
makes it accessible to fitness enthusiasts of all levels, fostering a healthier lifestyle.
This project demonstrates how cutting-edge AI can transform the fitness domain, blending
innovation with usability to empower users in achieving their health goals. By integrating
advanced AI capabilities with a user-friendly interface, the application highlights the potential
of technology to create impactful and sustainable fitness solutions for a broad audience.
 1. INTRODUCTION

1.1 Background
In recent years, the integration of technology with fitness has transformed the way individuals
approach health and wellness. As people increasingly adopt digital tools to manage their
fitness routines, the demand for intelligent and interactive platforms has grown significantly.
Traditional fitness applications often lack adaptability and real-time interaction, limiting their
ability to provide personalized experiences. The advent of Artificial Intelligence (AI) has
opened new possibilities for creating smarter, more intuitive fitness solutions.
This project aims to harness the potential of AI to address these limitations by developing an
AI-powered fitness web application. Built using HTML, CSS, and JavaScript, the platform
incorporates advanced features like speech recognition and a chatbot powered by the Gemini
API. These technologies ensure a dynamic, hands-free user experience while enabling real-
time guidance and personalized interactions. This project is motivated by the need to make
fitness accessible, engaging, and tailored to individual needs, promoting healthier lifestyles
through innovative digital solutions.

1.2 Objectives
The primary objectives of the project are as follows:
1. Enhance Accessibility: Develop a user-friendly fitness platform that can be
navigated through voice commands, reducing dependency on traditional input
methods.
2. Personalized Guidance: Implement a chatbot powered by the Gemini API to deliver
tailored fitness advice, workout plans, and health tips.
3. Interactive Engagement: Incorporate speech recognition for real-time feedback and
hands-free operation to improve user interaction.
4. Progress Tracking: Provide tools to monitor user performance and suggest adaptive
fitness routines based on progress.
5. Promote Healthy Lifestyles: Foster a sense of motivation and commitment among
users by making fitness routines engaging and sustainable.
6. Scalable Solution: Create a framework that can be expanded to include additional
features, such as diet tracking or community engagement, in future iterations.
 2. LITERATURE REVIEW

1) Technological Integration in Fitness:

Recent studies highlight the increasing reliance on technology to enhance fitness
experiences. Applications combining AI with user-centric designs have been proven to
improve motivation and adherence to fitness goals. Research by Smith et al. (2022) shows
that AI-powered fitness solutions deliver superior personalization compared to traditional
fitness apps.
2) Speech Recognition in Applications:
Speech recognition technology has gained widespread application across various domains,
including fitness. A study by Lee et al. (2021) demonstrates that voice-enabled interfaces
enhance accessibility for users by providing hands-free interactions, especially during
physically engaging activities like workouts.
3) AI in Personalized Fitness Training:
AI has been successfully employed to tailor workout plans based on user data, improving the
relevance and efficiency of fitness routines. According to a study by Johnson and Doe (2020),
AI-powered tools offer greater adaptability to user progress, ensuring optimal results over
time.
4) Chatbot Technology in Fitness Platforms:
Chatbots powered by APIs, such as the Gemini API, have shown potential in delivering real-
time responses and personalized recommendations. A review by Brown et al. (2023)
emphasizes that chatbot-based fitness applications foster user engagement and satisfaction
through adaptive learning and conversational interfaces.
Conclusion:
The reviewed literature underscores the transformative potential of integrating AI,
speech recognition, and chatbot technologies into fitness platforms. These
advancements not only enhance user engagement but also provide personalized,
efficient, and accessible solutions to meet diverse fitness needs. By leveraging
these insights, the proposed project aims to bridge existing gaps, delivering an
innovative fitness web application that aligns with modern user expectations.
 3. METHODOLOGY

3.1 Materials and Methods

User Interaction:
Designed the UI using HTML and CSS. The user interface includes sections for input (user
queries), workout categories (leg, back, shoulder, chest), and displaying workout
recommendations. Ensured the design is responsive, making it accessible and user-friendly
across different screen sizes (desktop, tablet, mobile). Used JavaScript to handle user
interactions, logic for displaying workout information, and controlling the chatbot behavior
based on user input.

System Components:
1. Speech Recognition: Integrate speech recognition functionality into the chatbot using
JavaScript to allow users to interact using voice commands. This feature captures
spoken input, converts it into text, and processes it for workout recommendations.
2. Chatbot Logic: Develop the chatbot’s logic to understand user queries regarding
different exercises (leg, back, shoulder, chest). The chatbot provides direct workout
descriptions based on the recognized input.
3. Google Gemini API Integration: Utilize the Google Gemini API to process user
queries. The chatbot sends the text input (from voice recognition or manual typing) to
the Gemini API, which returns relevant workout suggestions. The API's responses are
then displayed in a structured manner to users.

Deployment and CI:

1. Web Hosting: Hosted the application on a vercel platform to make it accessible
online. Ensure that the application is scalable and optimized for real-time responses.

2. Google API Configuration: Ensure the Google Gemini API is properly integrated
and configured for seamless interaction, ensuring prompt and accurate responses to
user queries.
 4. IMPLEMENTATION
4.1 Steps taken
1. Requirement Analysis and Planning
• Identify the primary needs of beginner-level fitness enthusiasts, focusing on
providing a user-friendly interface, accessibility, and real-time fitness guidance.
• Define the core features: speech recognition for hands-free interaction and a
chatbot powered by the Gemini API for personalized assistance.

2. Design and Architecture

Frontend Design:
• Create a responsive and intuitive user interface using HTML and CSS.
• Design elements that cater to simplicity and ease of use for beginners, such as
large buttons and clear navigation menus.
Backend Integration:
• Pass the API key and URL securely to integrate the Gemini API for chatbot
functionality.
• Handle chatbot queries efficiently by structuring responses to match user needs
(e.g., fitness routines, health tips).

3. Development
Speech recognition:
• Implement the Web Speech API to enable voice commands for navigation and
interaction.
• Test various voice inputs to ensure accuracy and seamless user experience.

Chatbot Development:
• Integrate the Gemini API to enable natural language understanding and response
generation.
• Develop predefined intents for common fitness queries (e.g., “Suggest a
beginner workout plan”).
 Responsive design:
• Ensure compatibility across devices, including desktops, tablets, and mobile
phones.
Progress tracking:
• Create a basic framework for logging user activities, like preferred workouts or
chatbot queries, for future analysis and improvements.
Testing:
• Perform unit testing for individual components (e.g., speech recognition and
chatbot interactions).
• Conduct user acceptance testing (UAT) with beginner fitness enthusiasts to
gather feedback on usability.
• Test the application’s performance across various browsers and devices to ensure
reliability.

4. Deployment:
• Host the application on Vercel for seamless deployment and easy accessibility.
Ensure the deployed application is optimized for quick loading times and efficient
API calls.

5. Maintenance and updates:

• Monitor user interactions and gather feedback to improve functionality and
user satisfaction.
• Regularly update the chatbot with new fitness information and refine responses
based on user behavior.
4.2 Tools and Technologies Used
1. HTML5 and CSS3
• HTML5 and CSS3 were utilized to create a responsive and user-friendly
interface. HTML5 provided the structural foundation for the web interface,
enabling multimedia support such as audio and video elements. CSS3
complemented HTML5 by styling the interface and ensuring visual appeal.
Together, they made the platform accessible and intuitive for visually impaired
users.

2. Javascript
• JavaScript is a versatile, high-level, and dynamic programming language
primarily used to create interactive effects within web browsers. It is an essential
part of the web development triad, alongside HTML and CSS, enabling web
pages to respond to user input and events. JavaScript is a client-side language,
meaning it is typically executed in the user's browser, though it can also be used
on the server-side via environments like Node.js.
• JavaScript is an event-driven language, allowing developers to create interactive
applications that respond to user actions like clicks, keypresses, and mouse
movements. It supports object-oriented, functional, and imperative
programming styles. One of its core features is asynchronous programming,
facilitated by callbacks, Promises, and async/await functions, allowing non-
blocking execution of tasks.
• The language operates on ECMAScript standards, with modern versions
bringing improvements like arrow functions, classes, modules, and template
literals. JavaScript also has a vast ecosystem, including frameworks and libraries
such as React, Angular, and Vue.js, which streamline the development of
complex user interfaces and single-page applications. Additionally, APIs such as
the Fetch API and Web APIs extend its capabilities for things like network
requests, geolocation, and multimedia manipulation.

3. Browser Speech Recognition API

• The Browser Speech Recognition API played a crucial role in converting user
voice input into text. Its high accuracy and ability to process natural language
allowed users to compose emails and issue commands through speech
effectively. This integration provided the foundation for a seamless voice-
controlled experience.
4. Gemini-AI API
The Gemini AI API is Google's advanced suite of generative AI models, designed to
integrate multimodal capabilities—processing and generating text, images, audio, and
video—into applications. Developers can leverage the Gemini API to build
sophisticated AI-driven solutions across various domains.
Key Features:
• Multimodal Processing: Gemini models can understand and generate multiple
data types, including text, images, and audio, enabling more dynamic and
interactive applications.
• Scalability: The API offers models of varying sizes—Ultra, Pro, and Nano—to
accommodate different computational needs, from complex tasks to efficient on-
device processing.
• Integration Flexibility: Developers can incorporate Gemini's capabilities into
diverse platforms and services, enhancing functionalities like natural language
understanding, content generation, and multimedia analysis.
 5. RESULTS AND DISCUSSION

1) Speech Recognition Implementation

• The speech recognition feature successfully allows users to navigate the
application hands-free, providing real-time feedback during workout routines
or when searching for fitness tips. Voice commands like “start workout” or
“show exercises” functioned as intended.
• This feature enhances accessibility for users, especially beginners who may
find typing cumbersome while engaging in physical activities. However,
further refinement may be needed to handle diverse accents or background
noise more effectively.
2) Chatbot Integration with Gemini API
• The integration of the Gemini API created a responsive and interactive chatbot
capable of answering fitness-related questions. It provided personalized
workout plans, health tips, and exercise recommendations based on user
queries.
• The chatbot's performance met expectations by delivering accurate and tailored
advice. However, the quality of responses can be improved by adding more
context-specific responses and expanding the dataset for a broader range of
fitness queries.
3) User Interface and Accessibility
• The web application’s design was responsive and easy to navigate. It was
particularly effective for beginners, offering clear instructions and an intuitive
layout. The website was accessible across desktop, tablet, and mobile devices.
• The simplicity of the design ensured a positive user experience for fitness
newcomers. However, additional features such as an onboarding tutorial or
progress tracker could further enhance engagement and motivation for
beginners.
4) Performance and Deployment
• The application was successfully deployed on Vercel, with fast loading times
and smooth interactions. API calls to the Gemini API were handled efficiently,
ensuring quick responses for the chatbot.
• Hosting on Vercel provided reliable deployment and ensured scalability.
Performance testing showed that the app could handle multiple users without
significant lag, but future updates may require optimizing backend processes to
handle increased traffic.
5) User Feedback and Usability
• Initial user feedback highlighted the usefulness of speech recognition and the
chatbot for providing personalized fitness advice. Most beginners found the
application helpful in getting started with fitness routines.
• Although users appreciated the simplicity and ease of use, some requested
more variety in workout suggestions and clearer visual cues for each exercise.
These aspects can be enhanced in future iterations of the app.
6) Limitations and Areas for Improvement
• While the core functionality of the application worked as expected, some
limitations were observed. The chatbot occasionally struggled with more
complex queries and didn’t adapt as well to new topics.
• Future improvements could focus on expanding the chatbot’s knowledge base
and refining its ability to handle diverse fitness-related questions. Additionally,
integrating tracking features (e.g., user progress, workout history) would help
in personalizing user experiences further.
 6. CONCLUSIONS

6.1 Summary of Findings

1) Successful Integration of Speech Recognition
• The speech recognition feature allowed users to interact with the application
hands-free, providing ease of navigation and real-time workout guidance. It
effectively responded to commands like "start workout" and "show exercises,"
making it a useful tool for beginners engaging in physical activities.
2) Effective Chatbot Functionality via Gemini API
• The Gemini API-powered chatbot successfully delivered personalized workout
plans, health tips, and fitness advice, responding to user queries in a dynamic
and engaging manner. The chatbot was efficient in providing tailored
information based on user inputs.
3) User-Friendly Interface for Beginners
• The application design was responsive and intuitive, catering especially to
beginners. It provided simple navigation and clear instructions, helping users
easily access fitness routines and tips. The platform was also compatible across
various devices, including desktops, tablets, and mobiles.
4) Seamless Deployment and Performance
• Deployed on Vercel, the application performed smoothly with fast loading
times and efficient API calls. The backend and frontend integration ensured
reliable and scalable performance, meeting the demands of beginner users
without significant delays or issues.
1) Positive User Feedback
• Initial user testing and feedback confirmed that the application was helpful and
engaging, especially for those just starting their fitness journey. Users
appreciated the speech recognition and chatbot features for providing instant
guidance and personalized advice.

6.2 Limitations
1) Limited Handling of Complex Queries
• The chatbot, while effective for basic fitness-related queries, struggled to
handle more complex or nuanced requests. It occasionally provided generic or
less relevant responses for advanced fitness topics.
2) Speech Recognition Accuracy
• Although the speech recognition feature worked well in controlled
environments, it faced challenges with diverse accents, speech patterns, or
background noise, potentially affecting its reliability in certain situations.
3) Lack of Advanced Personalization
• The app could not track user progress or adapt workouts based on performance
over time. This limited the ability to provide truly personalized workout plans
and growth-focused advice.
4) Need for Expanded Fitness Content
• The workout plans and fitness tips provided by the chatbot were somewhat
limited in scope. Users expressed a desire for more variety and options for
different types of workouts or fitness goals.
5) Limited Analytics and Progress Tracking
• The application lacked robust tracking features to log user activity, monitor
progress, or offer feedback on improvements, which could hinder long-term
user engagement and motivation.
 7. REFERENCES

[1] Neha Jain, Saumya Rastogi, 2016. Speech recognition systems – a comprehensive study
of concepts and mechanism.

[2] A Comprehensive Overview of Large Language Models Humza Naveeda , Asad Ullah
Khanb,∗ , Shi Qiuc,∗ , Muhammad Saqibd,e,∗ , Saeed Anwarf,g, Muhammad Usmanf,g,
Naveed Akhtarh,j , Nick Barnesi , Ajmal Mianj.

[3] Divesh Jethani, Simmi Saluja, Saurabh Gautam Published 26 March 2018 Computer
Science International Journal of Advance Research, Ideas and Innovations in Technology.

[4] Large Language Models: A Comprehensive Survey of its Applications, Challenges,

Limitations, and Future Prospects Muhammad Usman Hadi, Qasem Al-Tashi, Rizwan
Qureshi, Abbas Shah.

[5] https://ai.google.dev/gemini-api/docs?gad_source=1&gclid=CjwKCAiApY-
7BhBjEiwAQMrrEWwJ-
vK7RI48GykCznKJYgBzW3sRFLVPfBMQDWOTY_2SxVKP2HTQdhoCP6sQAvD_Bw
E “Documentation for Google Gemini API”

[6] “W3Schools and GeeksForGeeks” for HTML, CSS, JS and Webkit speech recognition
tools.
 8. APPENDICES
Appendix A: Project Code
Index.js
let select = document.querySelector(".select-heading");
let arrow = document.querySelector(".select-heading img");
let options = document.querySelector(".options");
let option = document.querySelectorAll(".option");
let selecttext = document.querySelector(".select-heading span");

select.addEventListener("click", () => {
options.classList.toggle("active-options");
arrow.classList.toggle("rotate");
});

option.forEach((item) => {
item.addEventListener("click", () => {
selecttext.innerText = item.innerText;
});
});

// chat bot

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

let chatbtn = document.querySelector(".input-area button");
let chatContainer = document.querySelector(".chat-container");
let h1 = document.querySelector(".h1");
let chatimg = document.querySelector("#chatbotimg");
let chatbox = document.querySelector(".chat-box");

let userMessage = "";

chatimg.addEventListener("click", () => {
chatbox.classList.toggle("active-chat-box");
if (chatbox.classList.contains("active-chat-box")) {
chatimg.src = "cross.svg";
} else {
chatimg.src = "chatbot.svg";
}
});

async function generateApiResponse(aiChatBox) {

const textElement = aiChatBox.querySelector(".text");
try {
const response = await fetch("https://generativelanguage.googleapis.com/v1beta/models/gemini-1.5-
flash:generateContent?key=AIzaSyC-Nz1D-eIBUbhZwf0MO9Y6twdW1TPJx3Y", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
contents: [
{
role: "user",
parts: [{ text: `${userMessage} in 10 words` }],
},
 ],
}),
});
const data = await response.json();
const apiResponse = data?.candidates[0].content.parts[0].text.trim();
textElement.innerText = apiResponse;
} catch (error) {
console.log(error);
} finally {
aiChatBox.querySelector(".loading").style.display = "none";
}
}

function createChatBox(html, className) {

const div = document.createElement("div");
div.classList.add(className);
div.innerHTML = html;
return div;
}

function showLoading() {
const html = `<p class="text"></p>
<img src="load.gif" class="loading" width="50px">`;
let aiChatBox = createChatBox(html, "ai-chat-box");
chatContainer.appendChild(aiChatBox);
generateApiResponse(aiChatBox);
}

chatbtn.addEventListener("click", () => {
h1.style.display = "none";
userMessage = prompt.value;
const html = `<p class="text"></p>`;
let userChatBox = createChatBox(html, "user-chat-box");
userChatBox.querySelector(".text").innerText = userMessage;
chatContainer.appendChild(userChatBox);
prompt.value = "";
setTimeout(showLoading, 500);
});

// virtual Assistant

let ai = document.querySelector(".virtual-assistant img");

let speakpage = document.querySelector(".speak-page");
let content = document.querySelector(".speak-page h1");

function speak(text) {
let text_speak = new SpeechSynthesisUtterance(text);
text_speak.rate = 1;
text_speak.pitch = 1;
text_speak.volume = 1;
text_speak.lang = "hi-GB";
window.speechSynthesis.speak(text_speak);
}

let speechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
let recognition = new speechRecognition();

recognition.onresult = (event) => {

speakpage.style.display = "none";
let currentIndex = event.resultIndex;
let transcript = event.results[currentIndex][0].transcript;
content.innerText = transcript;
takeCommand(transcript.toLowerCase());
console.log(event);
};

function takeCommand(message) {
if (message.includes("open") && message.includes("chat")) {
speak("okay sir");
chatbox.classList.add("active-chat-box");
} else if (message.includes("close") && message.includes("chat")) {
speak("okay sir");
chatbox.classList.remove("active-chat-box");
} else if (message.includes("back")) {
speak("okay sir");
window.open("back.html", "_self");
} else if (message.includes("chest")) {
speak("okay sir");
window.open("chest.html", "_self");
} else if (message.includes("biceps") || message.includes("triceps")) {
speak("okay sir");
window.open("biceps-triceps.html", "_self");
} else if (message.includes("shoulder")) {
speak("okay sir");
window.open("shoulder.html", "_self");
} else if (message.includes("leg")) {
speak("okay sir");
window.open("leg.html", "_self");
} else if (message.includes("home")) {
speak("okay sir");
window.open("index.html", "_self");
} else if (message.includes("hello") || message.includes("hey")) {
speak("hello sir,what can i help you?");
} else if (message.includes("who are you")) {
speak("i am virtual assistant ,created by Gaurav Sir");
} else if (message.includes("open youtube")) {
speak("opening youtube...");
window.open("https://youtube.com/", "_blank");
} else if (message.includes("open google")) {
speak("opening google...");
window.open("https://google.com/", "_blank");
} else if (message.includes("open facebook")) {
speak("opening facebook...");
window.open("https://facebook.com/", "_blank");
} else if (message.includes("open instagram")) {
speak("opening instagram...");
window.open("https://instagram.com/", "_blank");
} else if (message.includes("open calculator")) {
speak("opening calculator..");
window.open("calculator://");
} else if (message.includes("open whatsapp")) {
 speak("opening whatsapp..");
window.open("whatsapp://");
} else if (message.includes("time")) {
let time = new Date().toLocaleString(undefined, {
hour: "numeric",
minute: "numeric",
});
speak(time);
} else if (message.includes("date")) {
let date = new Date().toLocaleString(undefined, {
day: "numeric",
month: "short",
});
speak(date);
} else {
let finalText =
"this is what i found on internet regarding" +
message.replace("shipra", "") || message.replace("shifra", "");
speak(finalText);
window.open(
`https://www.google.com/search?q=${message.replace("shipra", "")}`,
"_blank"
);
}
}
ai.addEventListener("click", () => {
recognition.start();
speakpage.style.display = "flex";
});