Vue + TensorFlow.js: Building Your First ML Powered App
summary
A small proof‑of‑concept social feed runs full client‑side ML using TensorFlow.js, loading Coco SSD for real‑time object detection and the Vlad Mandic fork of face‑api.js for face landmarks and emotion estimates; webcam frames feed predictions into a Pinia store, while IntersectionObserver measures dwell time. The demo initializes models in the browser, labels objects (sheep, parking meter, toothbrush) and tracks seconds of gaze plus detected emotions in real time, and the code shows where to extend to age/gender, gaze mapping or the Human library.
AI-written summary · about
chapters (13)
- 0:00Vue and TensorFlow.js intro
- 1:30Why AI matters now
- 3:58TensorFlow.js for client-side ML
- 7:08Pros and cons
- 8:35Pre-trained models with TF Hub
- 10:01Demo app setup
- 12:28Live ML social feed demo
- 13:30Object detection code walkthrough
- 15:14Coco SSD in Vue
- 16:43Face detection with face-api.js
- 18:55Emotion tracking
- 20:00Next steps
- 21:25Q&A
related talks
41mTensorFlow.js 101: ML in the Browser and Beyond
56mTensorFlow.js: Make a smart webcam in JS with a pre-trained ML model
15mMachine learning for next gen web apps with TensorFlow.js
19mMaking Next Gen Vue Machine Learning Applications using TensorFlow.js
39mMachine Learning Magic for Your JavaScript Application
34mA Powerful Introduction to Machine Learning with Js
46mArtificial Intelligence with JavaScript
01h 00mYES!! ML in JavaScript! But why?