AI at your fingertips
Speech, vision, NLP, AIGC, ML and Robotics demos. Most run in your browser — data stays on device, no sign-up. Cloud chat and online TTS work out of the box.
- Demos
- 122 Demos
- Categories
- 6 Categories
- Ready
- 119 Ready
- Planned
- 3 Planned
Classroom Picks
Curated reliable demos: fast to load, great results — ideal for whole-class demos (teacher view)
Text to Speech (TTS)
Synthesize the same text with two engines: local Kokoro and server-side Edge TTS.
Speech Recognition (ASR)
Transcribe with two engines: the browser built-in Web Speech API and a local Whisper model.
Audio Classification
Classify the same clip with two engines: audio events (YAMNet) and speech emotion (wav2vec2).
Voice Changer
Add real-time effects to your voice: robot, monster, echo, chipmunk — all in-browser WebAudio.
Hum to Notes
Hum a tune; it is transcribed into do-re-mi notes that you can play back.
Speech Rate Meter
Count characters and characters-per-minute live while you speak.
Metronome & Tap
Hear ticks at a set BPM, or tap along to measure your own BPM and alignment.
Mini Synth
A web piano that plays triangle-wave notes with an envelope; volume adjustable.
Voice Command Console
Speak commands (left/right/up/down/jump/dance/color) to move a little ghost around.
Voice Cloning (Chatterbox)
Clone any voice from a short reference clip and speak your text (0-shot; downloads a large model).
Voiceprint (Speaker Verification)
Enroll a voiceprint, then match a new clip against everyone — with a full similarity ranking.
Speech Translator (zh ↔ en)
Speak Chinese: it transcribes, translates into English and speaks it back — fully offline.
Multi-speaker Audiobook
Paste a script of “Character: line”, each character gets its own voice, then export the whole thing as one WAV.
Audio Recorder
Record from the microphone with a live input level meter; play back, download, and convert to MP3 / WAV / OGG / M4A / FLAC in the browser.
Audio Format Converter
Convert between MP3 / WAV / OGG / M4A / FLAC, adjust the bitrate, and compare the file size before and after.
Extract Audio from Video
Pull the audio track out of an MP4 / MOV / WebM video and save it as MP3 / WAV / OGG / M4A / FLAC.
Audio Compressor
Lower the bitrate, drop the sample rate and mix to mono — with a live size estimate and the source bitrate for reference.
Audio Trimmer
Drag out the span to keep on the waveform and export just that part; the output format follows the source by default.
YOLO26 Engine (7 tasks)
The complete YOLO26 task list: detection, instance & semantic segmentation, depth, classification, pose and oriented boxes — on an uploaded image or live from the camera (WebGPU accelerated).
MediaPipe Engine (11 tasks)
Every MediaPipe task: face detection/landmarks, hand landmarks, gesture recognition, pose, holistic, object detection, image classification, person segmentation, interactive segmentation and image embedding. Live camera supported.
Object Detection (by engine)
The same object-detection task across two engines — MediaPipe vs YOLO. Switching implementations is a single click, with identical input and controls.
Image Classification (by engine)
Image classification via MediaPipe and YOLO side by side, comparing Top-K categories and confidences.
Image Segmentation (by engine)
Person segmentation (MediaPipe), instance/semantic segmentation (YOLO) and point-prompt interactive segmentation, covering both automatic and manual paths.
Matting (by engine)
Matting via MediaPipe selfie segmenter vs MODNet, both exportable as transparent PNGs.
Depth Estimation (by engine)
Depth estimation via YOLO vs Depth Anything (Transformers.js).
Full-body Pose (by engine)
Full-body keypoints via MediaPipe (33 points) vs YOLO (17 points) — the only keypoint capability compared across two engines.
Doodle Recognition (by approach)
Sketch a doodle and recognize it: DoodleNet with 345 preset classes vs MobileNet + KNN taught on the spot.
Named Entity Recognition
Recognize persons, locations, organizations in text.
Zero-shot Classification
Classify text with custom candidate labels.
Summarization
Generate a summary of the text.
Question Answering
Extract an answer from context.
MNIST Handwritten Digits
Train a neural network in the browser to recognize handwritten digits, then draw one to test it.
Decision Tree
Build a CART decision tree interactively and watch feature splits and the decision boundary.
Face Studio
Face detection, landmarks, blur, pixelation, ID-photo generation and 1:1 verification — 6 tools across MediaPipe and face-api.
Hands & Gestures
Hand keypoints and gesture categories in one place: upload a hand photo or go live, see where the 21 landmarks land, then which gesture the model picked.
Image Processing Basics (Lesson)
A six-step walkthrough: input → grayscale → noise reduction → enhancement → feature emphasis → processed. One image changes step by step, each step shown side by side with the original.
Feature Extraction Basics (Lesson)
A four-step walkthrough of how AI first “sees”: input image → feature extraction (kernels) → feature map (heat map) → understanding (classification). One image, every step hands-on.
Edge Detection Basics (Lesson)
A four-step walkthrough of how AI finds an object’s outline: input image → detect changes (click any pixel to see how much it differs from its neighbours) → edge image (drag the threshold and watch the lines thin out) → seeing better (edges laid back over the photo).
Image Classification Basics (Lesson)
A five-step walkthrough of how AI classifies an image: input → feature extraction (grayscale + outline) → learn patterns (same-class examples averaged into a “prototype”) → classify (a transparent mini model next to a real model) → output (confidence and the top-two margin). Use the built-in dog / cat samples or upload a photo; the real model returns Top-5.
Image Format Converter
Convert between PNG / JPEG / WebP / BMP, adjust quality, and compare the file size before and after.
Video Format Converter
Convert a video to MP4 (resolution and bitrate adjustable) or GIF (frame rate and width adjustable), entirely on-device.
Image Compressor
Set a target size (say 200 KB) and it steps the quality down until the image fits; a max edge length can be applied too.
Video Trimmer
Cut a segment out of a video by start/end time, preview the selection first, and export a universal MP4.
Video Compressor
Shrink a video to a target size (or a quality preset): the bitrate is derived from target size ÷ duration, and the predicted size is shown up front.
WebXR Shooting Range
Quest Range: enter VR and aim with either motion controller, squeeze the trigger to pop floating targets — gold ones score double. Warm up on desktop with mouse + WASD. 60-second rounds with live score, hits and accuracy.
Speech
24Speech synthesis, recognition, translation, speaker verification and music/audio AI demos.
Speech Recognition (ASR)
Transcribe with two engines: the browser built-in Web Speech API and a local Whisper model.
Text to Speech (TTS)
Synthesize the same text with two engines: local Kokoro and server-side Edge TTS.
Voice Cloning (Chatterbox)
Clone any voice from a short reference clip and speak your text (0-shot; downloads a large model).
Audio Classification
Classify the same clip with two engines: audio events (YAMNet) and speech emotion (wav2vec2).
Audio Compressor
Lower the bitrate, drop the sample rate and mix to mono — with a live size estimate and the source bitrate for reference.
Audio Format Converter
Convert between MP3 / WAV / OGG / M4A / FLAC, adjust the bitrate, and compare the file size before and after.
Vision
38Image view/transform/pixel/color/adjust/filter/enhance/morphology/edge/feature tools, face, object detection, segmentation, OCR and multimodal AI vision demos.
Face Registration & Recognition
Enroll multiple face samples in-browser and recognize locally — registry stored on-device (localStorage).
Face Studio
Face detection, landmarks, blur, pixelation, ID-photo generation and 1:1 verification — 6 tools across MediaPipe and face-api.
Matting (by engine)
Matting via MediaPipe selfie segmenter vs MODNet, both exportable as transparent PNGs.
OCR & Document Vision
Text recognition (Tesseract.js) and document scanning (OpenCV.js).
YOLO26 Engine (7 tasks)
The complete YOLO26 task list: detection, instance & semantic segmentation, depth, classification, pose and oriented boxes — on an uploaded image or live from the camera (WebGPU accelerated).
Color & Contours
Color segmentation, contours, object counting, bounding boxes and shape recognition (OpenCV.js).
NLP
11Text classification, language detection, embedding, NER, zero-shot, summarization, QA and fill-mask AI demos.
Question Answering
Extract an answer from context.
Text Classifier
Classify the same text with two engines: MediaPipe Bert and a Transformers.js sentiment model.
Fill-Mask
Predict the masked token.
Language Detector
Detect text language.
MediaPipe Text Engine
Three MediaPipe Tasks Text tasks: classification, language detection and text embedding.
Named Entity Recognition
Recognize persons, locations, organizations in text.
AIGC
12LLM chat & reasoning, text-to-image, image editing/inpainting, code generation, multimodal chat and AI content generation demos (in-browser / local server).
Digital Human
A 3D digital human that speaks and lip-syncs. Voice via server-side Edge TTS (no download, 300+ voices) or local Kokoro (fully offline).
In-browser LLM Chat
LLM chat running locally in-browser via WebLLM.
Text-to-Image (Janus-Pro)
Generate images locally in-browser with Janus-Pro-1B, plus image understanding QA.
Cloud LLM Chat (Kimi / DeepSeek)
Chat with cloud LLMs (Kimi K3 / DeepSeek) via API — switch providers and models anytime; Kimi K3 shows its thinking first.
Code Generation & Execution
Complete code in-browser with Qwen2.5-Coder, then run Python right away via Pyodide.
Image Inpainting (Moebius)
Paint over image regions to remove and inpaint them with Moebius-0.2B in-browser.
Machine Learning
28Collect samples and train custom image/audio classifiers in-browser (transfer learning).
MNIST Handwritten Digits
Train a neural network in the browser to recognize handwritten digits, then draw one to test it.
Neural Network Playground
Train a neural network on 2D data in real time and watch the decision boundary and loss evolve.
Audio Training
Collect microphone samples to train a custom audio classifier.
Automata Lab
Paint a few cells, pick a rule (Life, HighLife, Maze…), and watch complexity bloom.
Boids — Swarm Intelligence
A hundred boids move as one flock from just three simple rules.
CNN Explainer
Interactively inspect convolution, activations, pooling, and Softmax as an image becomes a prediction (Tiny VGG).
Robotics
13Robotics AI demos — arm/humanoid/biped simulation, kinematics and an embodied multi-robot lab, plus perception & decision scenarios such as multi-sensor environment monitoring and vacuum coverage planning.
AutoDrive Autonomous Driving Sim
An AV (EGO-01) in a small-town road network: LiDAR point cloud, camera and radar perception layers, detection boxes and labels, trajectory and pedestrian-intent prediction — the planner stops at red lights, swerves around obstacles and yields to crossing pedestrians, under day/night/rain weather with four camera views.
AutoDrive Lab Driving Simulator
A hands-on autonomous-driving classroom: click the car to inspect camera/LiDAR/radar/compute hardware, switch four teaching scenarios (cruise/signal/pedestrian/hazard), place and drag cones and crates in the obstacle workshop, or take manual control with WASD — with a virtual dashcam overlaying live detection boxes.
DroneSim UAV & FPV Simulation
A quadcopter operations console: takeoff/hover/land/return-to-launch, WASD + on-screen pad flying, building collisions with battery and signal drain, and eight detachable components (fuselage/arms/motors/props/battery/gimbal/GPS/legs) you can extract, explode, detach and reattach — with a live CAM-1 FPV gimbal feed.
Embodied AI · Five-Robot Lab (Orion)
Five URDF robots (quadcopter, hexapod, 6-axis arm, quadruped, humanoid) share one 3D engine: orbit to inspect, drive individual joints, run motion demos to watch gaits and kinematics, with live FPS and draw-call metrics.
EnvSense Multi-Sensor Environment Simulation
Seven sensors (temperature, humidity, CO₂, light, PM2.5, noise, soil moisture) share one glasshouse: orbit the hardware, switch weather and heatwave/occupancy/CO₂-fault scenarios, and watch live curves cross their warning and alarm thresholds.
G1 + HUSKY Skateboard + Cartpole (mjswan)
mjswan RL robot simulation, 3 scenes: ① Unitree G1 humanoid official locomotion (Locomotion/Balance, WASD) ② G1 skateboarding (HUSKY official whole-body policy, Push Speed/Heading) ③ Cartpole balance trained from scratch with PPO locally. Compare: others' results vs your own training.
How to play
1. Pick a demo
Choose a capability from Speech, Vision, NLP, AIGC or ML.
2. Prepare input
Most demos ship with sample assets — load one in one click, upload your own image / audio / text, or use the camera / mic live.
3. Run and see
Hit Run to get instant results; parameters apply live, great for teaching in class.