Back to practice
AI for FrontendBeginner45 minutes

On-Device Image Classifier

Design a browser-based image classification system using TensorFlow.js with model loading strategies, Web Worker inference, and graceful degradation.

LLM-friendly summary

A beginner AI-for-frontend problem about running TensorFlow.js image classification in the browser with Web Workers, model caching, and device-aware degradation.

Scenario

A retail app wants to let users photograph products for instant visual search — entirely in the browser, no server round-trip. It must work on mid-range Android devices without freezing the UI.

What you need to design

  1. 1Choose between a pre-trained model and transfer learning for the use case.
  2. 2Design the model loading strategy — when to download, how to cache, what to show while loading.
  3. 3Move inference off the main thread using Web Workers.
  4. 4Handle devices that lack WebGL or sufficient memory.
  5. 5Design the UX for classification confidence and ambiguous results.

Concepts

TensorFlow.jsTransfer LearningWeb WorkersWebGLModel Caching

Skills

Client-Side MLPerformance OptimizationProgressive Enhancement

What good solutions are evaluated on

  • - Model selection and loading architecture
  • - Main thread protection and Worker design
  • - Device capability detection and fallbacks
  • - UX for confidence, latency, and errors

Ready to practice this yourself?

Open the interactive AlgoReason workspace to sketch the architecture, write notes, and submit for AI evaluation.

Practice this problem