Experimenting with the proposed Cross-Origin Storage API in Transformers.js
We're on a journey to advance and democratize artificial intelligence through open source and open science. Back to Articles a]:hidden"> Experimenting with the proposed Cross-Origin Storage API in Transformers. js Published June 23, 2026 Update on GitHub Upvote 1 Thomas Steiner tomayac Follow google (This is a guest post by Developer Relations Engineer Thomas Steiner from the Chrome team at Google.
Key Takeaways
- js provides Web developers with a simple way to use the power of transformers in their Web apps through task-specific pipelines.
To run inference in the browser, developers create an instance of and specify a task they want to use the pipeline for.
- js automatically takes care of downloading and caching the relevant model resources and Wasm files.
The following screenshot shows the Chrome DevTools Cache storage section after visiting the app.
- Even in this toy example, this adds up to 177 MB of duplicate download and storage, as you can examine in the Storage section of the Chrome DevTools Application panel .
- Two entirely different AI models, but they depend on the same 4,733 kB WebAssembly (Wasm) runtime file from the underlying ONNX Runtime library that Transformers.
Open the extended demo on a different origin , and you will notice in the Network tab how also the Wasm runtime gets downloaded and cached again.
- Unfortunately, this is not how caching works in browsers for a long time.
Stats & Key Facts
- #js Published June 23, 2026 Update on GitHub Upvote 1 Thomas Steiner tomayac Follow google (This is a guest post by Developer Relations Engineer Thomas Steiner from the Chrome team at Google.
- #Even in this toy example, this adds up to 177 MB of duplicate download and storage, as you can examine in the Storage section of the Chrome DevTools Application panel .
- #Two entirely different AI models, but they depend on the same 4,733 kB WebAssembly (Wasm) runtime file from the underlying ONNX Runtime library that Transformers.
js provides Web developers with a simple way to use the power of transformers in their Web apps through task-specific pipelines. To run inference in the browser, developers create an instance of and specify a task they want to use the pipeline for. As a concrete example, the following snippet shows how to set up an automatic speech recognition (ASR) pipeline.
The cache challenge You will notice in the source code that I specified as the model, which is a very decent choice for common English automatic speech recognition tasks. In fact, it's even the default model according to the Transformers. js default model resolution , as per the linked excerpt .
Model resources When you run this example in the browser , Transformers. js automatically takes care of downloading and caching the relevant model resources and Wasm files. The following screenshot shows the Chrome DevTools Cache storage section after visiting the app.
For more details please read the original article at Hugging Face.
Continue Learning
Comments
Sign in to join the conversation