Embedding a Self-Updating Machine Learning Model in a Static Site

Machine learning typically means servers, GPUs, and Python scripts running in the cloud — but what if you could ship a self-updating ML model directly inside a static website? This post shows how to embed a tiny TensorFlow.js model into a static frontend, and use background fetches to update it over time — no backend needed.

Use Cases

• Offline-friendly personalization (e.g., recommender tweaks)
• Client-side anomaly detection or scoring
• Privacy-preserving inference at the edge

Step 1: Train and Convert Your Model

Use TensorFlow to train a model locally, then convert it with:

tensorflowjs_converter \

  --input_format=tf_saved_model \

  ./saved_model \

  ./web_model

This generates files like model.json and binary weight shards.

Step 2: Embed the Model in Your Static Site

Add the files to your build output and use TensorFlow.js to load them:

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"&gt;&lt;/script>

<script>

let model;

async function loadModel() {

  model = await tf.loadLayersModel('/web_model/model.json');

}

loadModel();

</script>

Step 3: Add Update Mechanism via Fetch

You can periodically check for new models and swap them in live:

async function updateModelIfAvailable() {

  const response = await fetch('/web_model/model.json', {

    cache: "no-cache"

  });

  const newModel = await tf.loadLayersModel(tf.io.browserHTTPRequest('/web_model/model.json'));

  model = newModel; // hot-swap

}

setInterval(updateModelIfAvailable, 86400000); // every 24h

Step 4: Run Predictions Client-Side

Once the model is loaded, run predictions like this:

const input = tf.tensor2d([[0.1, 0.2, 0.3]]);

const prediction = model.predict(input);

prediction.print();

Pros and Cons

✅ Pros

• No server or cloud infrastructure required
• Offline-ready and CDN-cacheable
• Improves over time with passive updates

⚠️ Cons

• Model size must be small for web delivery
• Security concerns with hot-swapped logic
• No GPU acceleration on low-end clients

🚀 Alternatives

• WebAssembly inference runtimes for compiled models
• Remote API inference via a small proxy backend
• ONNX.js as a cross-framework alternative

Summary

By embedding a TensorFlow.js model directly in your frontend and updating it via background fetches, you get a flexible way to ship intelligent, adaptive behavior without cloud infrastructure. Ideal for edge AI, web personalization, and hobbyist ML experiments.

If this was useful, you can support me here: buymeacoffee.com/hexshift