Building AI-Powered Web Apps with JavaScript (TTAI4500)

About This Course:

Stop sending user data to servers, and start running AI on your users’ devices.

This course teaches you to build the next generation of web applications: AI-powered, privacy-first, and lightning-fast. You'll learn to deploy machine learning models directly in the browser using JavaScript, eliminating the need for expensive Python backends and cloud GPU infrastructure.

Master real-time computer vision with MediaPipe, integrate large language models with Transformers.js, build autonomous AI agents with LangGraph, and optimize performance with WebGPU, all in JavaScript! You'll create applications that work offline, process sensitive data locally, and respond instantly without network delays.

Build chatbots that never expose conversations, image editors that keep photos private, recommendation engines that don't track users, and voice assistants that work without internet. Learn to architect AI systems that are faster (zero latency), cheaper (no server costs), and more secure (data stays local) than traditional cloud-based ML

Course Objectives:

By the end of this course, learners will be able to:

• Evaluate use cases where client-side JavaScript AI provides advantages over server-based solutions, including privacy-sensitive applications, offline functionality, reduced infrastructure costs, and real-time interactivity

• Implement core ML functionality using TensorFlow.js for training and inference in browser and Node.js environments

• Build computer vision applications using MediaPipe, OpenCV.js, and TensorFlow.js for face, hand, and pose tracking

• Integrate natural language processing using Transformers.js and LangChain.js for sentiment analysis, summarization, and conversational AI

• Create autonomous AI agents using frameworks like OpenAI Agents SDK, LangGraph, AutoGen, and CrewAI

• Preprocess and manipulate data using Danfo.js for ML-ready datasets

• Optimize model performance using ONNX.js, WebGPU, and WebAssembly for faster inference

• Visualize AI outputs and metrics using Plotly.js, Three.js, and WebAudio API

• Design architectures that maximize the benefits of client-side AI while understanding its limitations

Audience:

This course is designed for:

• Web developers seeking to add AI capabilities to their applications

• Full-stack JavaScript developers interested in ML integration

• Front-end engineers building intelligent user experiences

• Node.js developers implementing AI-driven features

• Software engineers transitioning from Python ML to JavaScript ML ecosystems

• Product developers looking to reduce infrastructure costs through client-side AI

• Privacy-focused engineers building applications with on-device processing

Prerequisites:

Students should have JavaScript programming experience including familiarity with ES6+ syntax, asynchronous programming (Promises/async-await), and basic web development concepts (DOM manipulation, browser APIs). A foundational understanding of machine learning concepts (neural networks, training, inference) is helpful but not required.

• Introduction to JavaScript / Modern JavaScript Essentials