Skip to content

feat(models): add offline model caching via IndexedDB#304

Draft
alanvww wants to merge 1 commit intoml5js:mainfrom
alanvww:alan.offine-mode
Draft

feat(models): add offline model caching via IndexedDB#304
alanvww wants to merge 1 commit intoml5js:mainfrom
alanvww:alan.offine-mode

Conversation

@alanvww
Copy link
Copy Markdown
Member

@alanvww alanvww commented Mar 29, 2026

Summary

This pull request adds support for offline model caching using the browser's IndexedDB. By passing { cache: true } when initializing models like handPose, bodyPose, and faceMesh, the models are transparently downloaded and stored locally. On subsequent page loads, the models are served directly from the IndexedDB cache, making the library fully functional without an internet connection (ideal for installations and exhibitions).

Changes

  • Model Caching: Added CachingIOHandler in src/utils/modelCache.js to intercept TensorFlow.js model requests and store them in IndexedDB.
  • Model Registry: Added src/utils/modelRegistry.js to resolve dynamic model URLs for caching.
  • Global Utilities: Introduced ml5.isCached(), ml5.cacheModel(), and ml5.clearCache() to manually manage the IndexedDB state.
  • Robust Initialization: Added await this.ready; across detect() and detectLoop() methods in all major models to prevent synchronous crashes when this.model is null during background initialization.
  • Examples: Added one example of handpose offline available at examples/handPose-keypoints-offline to showcase how to preload and use models in an offline environment, keeping the UI minimal and consistent with other examples.

Implemented `{ cache: true }` initialization option across `HandPose`, `BodyPose`, `FaceMesh` to automatically store downloaded models in the browser's IndexedDB. Subsequent reloads serve models directly from the local cache, enabling full offline functionality for exhibitions and installations.

- Added `src/utils/modelCache.js` with a `CachingIOHandler` for tf.js and caching utilities.
- Added `src/utils/modelRegistry.js` to resolve dynamic tf.js / mediapipe model URLs.
- Added `ml5.isCached()`, `ml5.cacheModel()`, and `ml5.clearCache()` global utility methods.
- Refactored model initialization routines to await `this.ready` to prevent asynchronous `detectStart()` crashes.
- Added `examples/handPose-keypoints-offline` to demonstrate offline mode functionality.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant