Is it possible to store a loaded engine in react to avoid multiple reloads when refreshing the app?

[jvjmarinello]

I'm working with the web-llm library to load and use models like TinyLlama-1.1B-Chat-v0.4-q4f16_1-MLC-1k. My current implementation downloads the model successfully and caches it using engine.reload, which appears to use IndexedDB under the hood (correct me if I'm wrong). Here's the relevant code snippet:

const modelId = "TinyLlama-1.1B-Chat-v0.4-q4f16_1-MLC-1k";
const webllm = await import("https://esm.run/@mlc-ai/web-llm");
const engine = new webllm.MLCEngine();
engine.setInitProgressCallback((report) => {
console.log(Loading ${modelId}: ${report.text});
});
await engine.reload(modelId, defaultModelParameters);

Now, I want to preload this engine once and make it available across my entire React app without loading on rendering. Is that possible? how and where would you store the pre-loaded engine(s)? I was trying use hooks or context to manage this, ensuring that the engine is initialized once and shared across all components without reloading the model multiple times. I tried to store the engine in localStorage but I get an error due to circular references.

What’s the best way to achieve this in React?