Module 8 — Real-World AI Projects
(JavaScript)
Project 1 — Real-Time Emotion Detection
1. Project Goal
The goal of this project is to build a web application that can detect human emotions in
real-time using a webcam and JavaScript. It demonstrates computer vision, machine
learning, and real-time inference using pre-trained AI models.
Emotions to detect:
● Happy 😊
● Sad 😢
● Angry 😠
● Surprised 😲 (optional)
● Neutral 😐
Use Cases:
● Mental health monitoring
● Interactive gaming
● Smart customer feedback systems
● Emotion-based user interfaces
2. Tools and Libraries
Tool / Library Purpose
JavaScript Core programming language for frontend and logic
HTML/CSS Web interface and layout
[Link] AI model inference in browser
Face API (via Pre-trained face detection and expression
@vladmandic/face-api) recognition
Webcam API Access user camera for live feed
Canvas API Draw detected faces and overlays
3. Project Workflow
1. Access Webcam: Get user permission and display live video.
2. Load AI Models: Load pre-trained face detection and emotion recognition models.
3. Process Video Frames: Continuously detect faces and analyze expressions.
4. Identify Emotion: Determine which emotion has the highest probability.
5. Display Result: Show emotion label dynamically with optional overlay on video.
4. HTML Setup
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Emotion Detection</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
video { border: 2px solid #ccc; width: 400px; height: 300px; }
#emotion { font-size: 24px; margin-top: 10px; font-weight: bold; }
canvas { position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<h1>Real-Time Emotion Detection</h1>
<video id="webcam" autoplay muted></video>
<div id="emotion">Detecting...</div>
<script src="[Link]
<script src="[Link]
<script src="[Link]"></script>
</body>
</html>
Explanation:
● <video> → Displays live webcam feed.
● <div> → Shows detected emotion.
● Canvas drawn dynamically by Face API to highlight faces.
5. JavaScript Setup ([Link])
const video = [Link]("webcam");
const emotionLabel = [Link]("emotion");
// Load models from /models directory
[Link]([
[Link]("/models"),
[Link]("/models")
]).then(startWebcam);
function startWebcam() {
[Link]({ video: true })
.then(stream => [Link] = stream)
.catch(err => [Link]("Webcam error:", err));
}
[Link]("play", () => {
const canvas = [Link](video);
[Link](canvas);
const displaySize = { width: [Link], height: [Link] };
[Link](canvas, displaySize);
setInterval(async () => {
const detections = await [Link](video, new
[Link]())
.withFaceExpressions();
const resizedDetections = [Link](detections, displaySize);
const ctx = [Link]("2d");
[Link](0, 0, [Link], [Link]);
[Link](canvas, resizedDetections);
if ([Link] > 0) {
const expressions = detections[0].expressions;
const maxValue = [Link](...[Link](expressions));
const emotion = [Link](expressions).find(key => expressions[key] === maxValue);
[Link] = [Link]();
}
}, 200);
});
6. How It Works
1. Webcam Feed:
Uses [Link]() to get live video.
2. Load Models:
○ tinyFaceDetector → Detects face bounding boxes efficiently.
○ faceExpressionNet → Detects facial expressions with probabilities.
3. Frame Processing:
○ Every 200ms, current frame is analyzed.
○ detectAllFaces().withFaceExpressions() returns face bounding
boxes and emotion probabilities.
4. Emotion Detection Logic:
○ Find the emotion with the highest confidence score.
○ Update <div> in real-time.
5. Canvas Overlay:
○ Draw bounding boxes around detected faces.
○ Optional: Draw emojis or color-coded overlays for visual feedback.
7. Optional Enhancements
● Emoji Overlay: Show emojis for each detected emotion.
● Emotion Analytics: Track how emotions change over time.
● Multi-Face Detection: Detect multiple users simultaneously.
● Custom UI: Display emotion history with charts or graphs.
● Mobile Optimization: Enable detection on mobile devices.
8. Challenges & Tips
Challenge Tip
Lighting conditions Ensure face is well-lit for accurate detection
Webcam Always handle getUserMedia errors gracefully
permission
Model size TinyFaceDetector is faster for real-time; can use SSD for higher
accuracy
Performance Reduce frame interval for slower devices (e.g., 300ms instead of
200ms)
9. Summary
Feature Description
Webcam Access Live video feed in browser
Real-Time Emotion Detection Happy, Sad, Angry, Neutral, Surprised
Visual Feedback Bounding boxes, labels, optional emoji overlay
Enhancements Analytics, multi-face detection, mobile support
Outcome:
By completing this project, developers will:
● Learn real-time computer vision with JavaScript
● Integrate pre-trained AI models in the browser
● Build interactive, user-friendly web apps
● Understand emotion AI and its practical applications
Project 2 — AI Voice Assistant
Goal:
Build a browser-based AI voice assistant using JavaScript that can:
● Understand spoken commands (speech-to-text)
● Detect user intent
● Provide dynamic responses
● Speak responses aloud (text-to-speech)
This project is essentially a mini-Alexa running completely in the browser using JS.
1. Project Overview
Features:
● Microphone access to capture voice
● Convert speech to text using Web Speech API
● Intent detection using OpenAI API / keyword matching
● Text-to-speech output with browser TTS
● Handle basic commands like:
○ “What’s the weather?”
○ “Tell me a joke”
○ “Open Google”
Tools & Libraries:
Tool / Library Purpose
JavaScript Core logic and browser integration
Web Speech API Convert voice to text
(SpeechRecognition)
OpenAI API / LLM Detect intent, generate dynamic
response
SpeechSynthesis API Browser text-to-speech output
HTML/CSS User interface
Flow:
1. User clicks “Start Listening”
2. Microphone captures voice → converted to text
3. Intent detection → AI determines response
4. Response spoken via TTS
5. Display response on webpage
2. HTML Setup
<!DOCTYPE html>
<html>
<head>
<title>AI Voice Assistant</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
button { padding: 10px 20px; margin: 10px; cursor: pointer; }
#userText, #assistantText { margin: 10px 0; font-size: 18px; }
</style>
</head>
<body>
<h1>AI Voice Assistant (JS Version of Alexa)</h1>
<button id="start-btn">Start Listening</button>
<div><strong>You said:</strong> <span id="userText">...</span></div>
<div><strong>Assistant:</strong> <span id="assistantText">...</span></div>
<script src="[Link]"></script>
</body>
</html>
● Button → Starts voice capture
● <div> → Displays user command and assistant response
3. JavaScript Setup ([Link])
const startBtn = [Link]("start-btn");
const userText = [Link]("userText");
const assistantText = [Link]("assistantText");
// Check for browser support
const SpeechRecognition = [Link] || [Link];
const recognition = new SpeechRecognition();
[Link] = 'en-US';
[Link] = false;
[Link]("click", () => [Link]());
[Link]("result", async (event) => {
const transcript = [Link][0][0].transcript;
[Link] = transcript;
// Detect intent & generate response
const response = await getAIResponse(transcript);
[Link] = response;
// Speak the response
const utterance = new SpeechSynthesisUtterance(response);
[Link](utterance);
});
// Function to interact with OpenAI API
async function getAIResponse(text) {
const res = await fetch("/api/voice-assistant", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ query: text })
});
const data = await [Link]();
return [Link];
}
Explanation:
● Uses Web Speech API for real-time speech recognition
● Sends transcript to backend AI API
● Converts AI response to voice using SpeechSynthesis
4. [Link] Backend API (/api/[Link])
import OpenAI from "openai";
const openai = new OpenAI({ apiKey: [Link].OPENAI_API_KEY });
export default async function handler(req, res) {
const { query } = [Link];
const prompt = `
You are a helpful AI voice assistant.
Respond concisely to this user query: "${query}".
`;
const response = await [Link]({
model: "gpt-4",
messages: [{ role: "user", content: prompt }]
});
const reply = [Link][0].[Link];
[Link](200).json({ reply });
}
Features:
● Uses LLM to detect intent
● Generates human-like responses
● Works with browser TTS for voice output
5. Optional Enhancements
● Multiple commands: Weather, news, jokes, reminders, music
● Custom wake word: “Hey JS Assistant”
● GUI enhancements: Show conversation history
● Voice control integration: Open URLs, control web app features
● Multi-language support: Speech recognition + TTS in multiple languages
6. Challenges & Tips
Challenge Tip
Background noise Use a good microphone or noise reduction
Browser compatibility Chrome and Edge support SpeechRecognition API best
Response speed Use lightweight prompts for faster replies
Continuous listening Implement stop/start toggle to avoid constant
processing
7. Summary
Feature Description
Speech-to-Text Web Speech API converts voice commands to text
Intent Detection LLM (OpenAI API) identifies command and generates
response
Text-to-Speech Browser SpeechSynthesis speaks responses aloud
Enhancements Multi-language, custom wake word, GUI improvements
Outcome:
Developers learn to:
● Integrate real-time speech recognition in the browser
● Build interactive AI assistants using JS + OpenAI
● Combine speech-to-text, AI reasoning, and TTS for practical applications
Project 3 — JS AI Chatbot (Offline, No API Required)
Goal:
Build a web-based chatbot using [Link] that works completely offline, using a
custom dataset. Users can chat with the bot, and it responds based on pre-trained LSTM
model.
This project demonstrates on-device AI, machine learning model training in JS, and offline
deployment.
1. Project Overview
Features:
● Chat interface in browser
● Responses generated by trained LSTM model
● Works completely offline (no server API calls)
● Train model on custom dataset of question-answer pairs
● Save and load model locally
Tools & Libraries:
Tool / Library Purpose
[Link] Train and run ML model in browser
HTML/CSS Chat interface
JS Arrays/Objects Store custom dataset for training
IndexedDB / Local Optional: Save trained model for offline use
Storage
Flow:
1. Create dataset with intents, questions, and answers
2. Preprocess text → tokenize and encode
3. Train LSTM model with dataset in browser
4. Save trained model to local storage
5. Use model for real-time chatbot responses
2. HTML Setup
<!DOCTYPE html>
<html>
<head>
<title>Offline JS AI Chatbot</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
#chat { width: 400px; height: 400px; border: 1px solid #ccc; overflow-y: scroll; margin: 0 auto;
padding: 10px; }
input { width: 300px; padding: 10px; margin-top: 10px; }
button { padding: 10px 15px; }
.user { color: blue; }
.bot { color: green; }
</style>
</head>
<body>
<h1>Offline JS AI Chatbot</h1>
<div id="chat"></div>
<input type="text" id="userInput" placeholder="Type your message..." />
<button onclick="sendMessage()">Send</button>
<script src="[Link]
<script src="[Link]"></script>
</body>
</html>
Explanation:
● <div id="chat"> → Displays chat conversation
● <input> + <button> → User sends messages
● Chatbot responses rendered dynamically
3. Dataset Setup (Custom, JS Object)
const dataset = [
{ input: "hello", output: "Hello! How can I help you today?" },
{ input: "how are you", output: "I'm a bot, but I'm doing great!" },
{ input: "what is your name", output: "I am your friendly JS chatbot." },
{ input: "bye", output: "Goodbye! Have a nice day!" }
];
● Small dataset for demo
● Can expand to hundreds of question-answer pairs
● Later preprocess into tokens for LSTM training
4. Text Preprocessing
function tokenizeText(text) {
return [Link]().split(" ");
}
// Create vocabulary
const vocab = [...new Set([Link](item => tokenizeText([Link])))];
// Encode sentences to sequences
function encodeText(text) {
const tokens = tokenizeText(text);
return [Link](t => [Link](t));
}
// Pad sequences
function padSequence(seq, maxLen) {
const padded = new Array(maxLen).fill(0);
[Link]((v, i) => { if(i < maxLen) padded[i] = v; });
return padded;
}
Explanation:
● Converts text → tokens → numerical sequences
● Vocabulary maps words → indices
● Sequences padded to fixed length for LSTM
5. Model Setup & Training ([Link])
const maxLen = 5;
const xs = tf.tensor2d([Link](d => padSequence(encodeText([Link]), maxLen)));
const ys = tf.tensor2d([Link](d => {
const y = new Array([Link]).fill(0);
y[[Link](d)] = 1;
return y;
}));
const model = [Link]();
[Link]([Link]({ inputDim: [Link], outputDim: 8, inputLength: maxLen }));
[Link]([Link]({ units: 16 }));
[Link]([Link]({ units: [Link], activation: "softmax" }));
[Link]({ optimizer: "adam", loss: "categoricalCrossentropy", metrics: ["accuracy"] });
async function trainModel() {
await [Link](xs, ys, { epochs: 100 });
await [Link]('localstorage://js-chatbot-model');
[Link]("Model trained and saved locally!");
}
trainModel();
Explanation:
● Embedding layer → Converts word indices into vectors
● LSTM layer → Handles sequential data (text)
● Dense + softmax → Output probabilities for each intent
● Model trained in browser and saved locally
6. Chatbot Inference
async function sendMessage() {
const userInput = [Link]("userInput").value;
appendMessage(userInput, "user");
const model = await [Link]('localstorage://js-chatbot-model');
const inputSeq = tf.tensor2d([padSequence(encodeText(userInput), maxLen)]);
const prediction = [Link](inputSeq);
const index = [Link](-1).dataSync()[0];
const reply = dataset[index].output;
appendMessage(reply, "bot");
[Link]("userInput").value = "";
}
function appendMessage(text, sender) {
const chat = [Link]("chat");
const div = [Link]("div");
[Link] = sender;
[Link] = text;
[Link](div);
[Link] = [Link];
}
Explanation:
● Load saved model from local storage
● Encode user input and predict intent
● Select response from dataset
● Append to chat interface
7. Optional Enhancements
● Expand dataset → support hundreds of questions
● Add fallback responses for unknown queries
● Integrate TTS (Text-to-Speech) using browser SpeechSynthesis
● Add chat history storage in local storage for offline persistence
● Use more advanced LSTM or GRU layers for better accuracy
8. Summary
Feature Description
Offline Model Works completely in browser without API
Custom Define intents and responses
Dataset
LSTM Model Sequential neural network for text
understanding
Persistence Save model in local storage
Enhancements TTS, fallback responses, expanded dataset
Outcome:
By completing this project, developers learn:
● On-device AI with [Link]
● Sequence modeling for chatbots
● Offline ML deployment
● Custom AI chatbot creation without relying on cloud APIs
Project 4 — AI Quiz Generator
Goal:
Build a browser-based AI Quiz Generator using JavaScript that:
● Takes a topic as input
● Generates 10 multiple-choice questions (MCQs)
● Provides answers and explanations
● Can be used for self-learning, quizzes, and practice tests
This project demonstrates NLP, AI content generation, and interactive web apps.
1. Project Overview
Features:
● Input topic → AI generates quiz automatically
● Each question includes:
○ MCQ options
○ Correct answer
○ Explanation
● Display questions dynamically in browser
● Optional: Export quiz as PDF
Use Cases:
● Student self-testing
● Teacher quiz creation
● Exam prep apps
● Interactive learning platforms
Tools & Libraries:
Tool / Library Purpose
JavaScript Core logic, DOM manipulation
HTML/CSS Quiz interface
OpenAI API / GPT Generate MCQs, answers,
explanations
Optional: jsPDF Export quiz to PDF
Flow:
1. User enters topic
2. AI generates 10 questions with options
3. Display questions, answers, explanations dynamically
4. Optional: Export to PDF
2. HTML Setup
<!DOCTYPE html>
<html>
<head>
<title>AI Quiz Generator</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
input, button { padding: 10px; margin: 5px; width: 300px; }
.question { margin-bottom: 20px; }
.options { margin-left: 20px; }
.answer { color: green; font-weight: bold; }
.explanation { font-style: italic; color: gray; }
</style>
</head>
<body>
<h1>AI Quiz Generator</h1>
<input type="text" id="topic" placeholder="Enter topic..." />
<button onclick="generateQuiz()">Generate Quiz</button>
<div id="quiz"></div>
<script src="[Link]"></script>
</body>
</html>
● Input → Topic for the quiz
● Button → Trigger quiz generation
● <div id="quiz"> → Displays questions dynamically
3. JavaScript Setup ([Link])
const quizDiv = [Link]("quiz");
async function generateQuiz() {
const topic = [Link]("topic").value;
[Link] = "Generating quiz, please wait...";
const res = await fetch("/api/quiz-generator", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: [Link]({ topic })
});
const data = await [Link]();
displayQuiz([Link]);
}
function displayQuiz(questions) {
[Link] = "";
[Link]((q, index) => {
const div = [Link]("div");
[Link] = "question";
[Link] = `<strong>Q${index + 1}:</strong> ${[Link]}
<div class="options">${[Link](opt => `<div>- ${opt}</div>`).join("")}</div>
<div class="answer">Answer: ${[Link]}</div>
<div class="explanation">Explanation: ${[Link]}</div>`;
[Link](div);
});
}
Explanation:
● Sends topic to backend
● Receives array of 10 questions with options, answers, explanations
● Dynamically renders quiz in HTML
4. [Link] Backend API (/api/[Link])
import OpenAI from "openai";
const openai = new OpenAI({ apiKey: [Link].OPENAI_API_KEY });
export default async function handler(req, res) {
const { topic } = [Link];
const prompt = `
Generate 10 multiple-choice questions on the topic "${topic}".
For each question, provide:
1. The question
2. 4 options
3. Correct answer
4. Short explanation
Output as JSON array with keys: question, options, answer, explanation.
`;
const response = await [Link]({
model: "gpt-4",
messages: [{ role: "user", content: prompt }]
});
const text = [Link][0].[Link];
// Parse JSON safely
let questions = [];
try {
questions = [Link](text);
} catch (err) {
[Link]("Parsing error:", err);
questions = [];
}
[Link](200).json({ questions });
}
Explanation:
● Uses OpenAI GPT to generate MCQs automatically
● Returns JSON array with question, options, answer, explanation
● Backend keeps logic separated from frontend
5. Optional Enhancements
● Export quiz to PDF using jsPDF
● Shuffle questions or options for each user
● Track user answers and show score
● Add timer for quizzes
● Support multiple topics in one session
6. Challenges & Tips
Challenge Tip
Parsing AI response Always wrap [Link] in try-catch
Accuracy of questions Provide clear instructions in prompt for correct answers
Large topics May require more context; generate in batches
UI readability Highlight answers and explanations for clarity
7. Summary
Feature Description
Topic Input User provides topic for quiz
AI-Generated Questions 10 MCQs automatically generated
Answers & Displayed dynamically for each question
Explanations
Enhancements PDF export, shuffle, timer, multiple topics
Outcome:
By completing this project, developers will:
● Learn AI-driven content generation using JavaScript
● Create interactive quizzes dynamically
● Understand JSON parsing, frontend-backend integration, and user interaction
● Build practical educational tools using AI
Project 5 — AI Background Remover
Goal:
Build a browser-based AI background remover using JavaScript and [Link].
The app allows users to upload or capture an image, and the background is automatically
removed in real-time using the BodyPix model.
Use Cases:
● Profile picture editing
● E-commerce product photography
● Video conferencing (virtual backgrounds)
● Graphic design tools
1. Project Overview
Features:
● Upload image or use webcam feed
● Segment the human body from the background
● Remove or replace the background with transparent or custom image/color
● Works entirely in the browser (client-side)
Tools & Libraries:
Tool / Library Purpose
JavaScript Core logic and DOM manipulation
HTML/CSS Web interface
[Link] Load and run BodyPix model in browser
BodyPix Pre-trained model for human
segmentation
Canvas API Draw processed images and masks
Flow:
1. User uploads an image or accesses webcam
2. BodyPix detects the person in the image
3. Segment the person and remove the background
4. Display result on canvas
5. Optional: Download processed image
2. HTML Setup
<!DOCTYPE html>
<html>
<head>
<title>AI Background Remover</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
canvas { border: 2px solid #ccc; margin-top: 10px; }
input { margin: 10px; }
</style>
</head>
<body>
<h1>AI Background Remover</h1>
<input type="file" id="upload" accept="image/*" />
<canvas id="canvas"></canvas>
<script src="[Link]
<script
src="[Link]
ript>
<script src="[Link]"></script>
</body>
</html>
Explanation:
● <input> → Upload image
● <canvas> → Display processed image
● [Link] + BodyPix loaded from CDN
3. JavaScript Setup ([Link])
const upload = [Link]("upload");
const canvas = [Link]("canvas");
const ctx = [Link]("2d");
let net;
// Load BodyPix model
async function loadModel() {
net = await [Link]();
[Link]("BodyPix model loaded");
}
loadModel();
[Link]("change", async (e) => {
const file = [Link][0];
const img = new Image();
[Link] = [Link](file);
[Link] = async () => {
[Link] = [Link];
[Link] = [Link];
[Link](img, 0, 0);
// Segment person
const segmentation = await [Link](img);
// Create mask
const maskBackground = [Link](segmentation, { r: 0, g: 0, b: 0, a: 0 }, { r: 0, g: 0, b:
0, a: 255 });
// Draw mask
[Link](maskBackground, 0, 0);
};
});
Explanation:
● Load BodyPix pre-trained model
● Upload an image → draw on canvas
● segmentPerson() detects the person
● toMask() creates mask → background removed
● Result displayed on canvas
4. Optional Enhancements
● Use webcam feed instead of uploaded image for real-time background removal
● Replace background with custom images or colors
● Allow download of processed image as PNG
● Add performance optimization for larger images
● Combine with AI filters or AR effects
5. Challenges & Tips
Challenge Tip
Large images Resize images before processing for better
performance
Model load time Show “Loading…” message while BodyPix loads
Edge artifacts Use refineMask option in BodyPix for smoother edges
Mobile support Limit image size and optimize canvas rendering
6. Summary
Feature Description
Image Upload Users upload any photo
AI Segmentation BodyPix detects human body
Background Removal Transparent or replaced background
Client-side Works entirely in browser
Processing
Enhancements Webcam mode, custom backgrounds, image
download
Outcome:
By completing this project, developers will:
● Learn real-time human segmentation in JavaScript
● Understand using pre-trained ML models in the browser
● Build practical photo editing tools without backend processing
● Combine Canvas API with AI models for interactive web apps