Model to the Browser: TensorFlow.js

python -m http.server 8000

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ball detector in the browser</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 720px; margin: 1rem auto; padding: 0 1rem; }
    video { width: 100%; border-radius: 8px; background: #111; transform: scaleX(-1); }
    .bar { height: 26px; background: #ddd; border-radius: 13px; overflow: hidden; margin: .5rem 0; }
    .fill { height: 100%; width: 0; background: #0084ff; transition: width .15s; }
    button { font-size: 1rem; padding: .5rem .9rem; margin: .2rem .2rem .2rem 0; }
    #verdict { font-size: 1.6rem; font-weight: 600; margin: .3rem 0; }
    #status { color: #555; min-height: 1.4em; }
  </style>
</head>
<body>
  <h1>Ball detector</h1>
  <p id="status">Loading...</p>
  <video id="cam" autoplay playsinline muted></video>
  <div id="verdict">-</div>
  <div class="bar"><div class="fill" id="fill"></div></div>
  <div id="knnButtons" hidden>
    <button id="addBall">Add "ball" example</button>
    <button id="addNone">Add "no ball" example</button>
    <button id="clear">Clear</button>
    <p id="counts"></p>
  </div>
 
  <!-- Version numbers were current when written: check them on npmjs.com before class. -->
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.22.0/dist/tf.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier@1.2.4"></script>
  <script>
    // "knn"   : teach it in the browser with MobileNet + a nearest-neighbour classifier (no Python, no converting)
    // "keras" : run the model you trained in Python, after converting it (see the lesson)
    const MODE = "knn";
    const KERAS_MODEL_URL = "model/model.json";
    const KERAS_INPUT_SIZE = 64;           // the lesson 18 model was trained on 64 x 64 crops
 
    const video = document.getElementById("cam");
    const statusEl = document.getElementById("status");
    const verdictEl = document.getElementById("verdict");
    const fillEl = document.getElementById("fill");
    const countsEl = document.getElementById("counts");
 
    let net = null, classifier = null, kerasModel = null;
 
    async function startCamera() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" }, audio: false });
      video.srcObject = stream;
      await new Promise(resolve => { video.onloadeddata = resolve; });
    }
 
    function show(isBall, probability) {
      verdictEl.textContent = (isBall ? "BALL " : "no ball ") + Math.round(probability * 100) + "%";
      fillEl.style.width = Math.round(probability * 100) + "%";
    }
 
    // ---------- Mode 1: teach it in the browser ----------
    function setupKnn() {
      document.getElementById("knnButtons").hidden = false;
      const add = label => {
        const activation = net.infer(video, true);       // MobileNet's "embedding" of the current frame
        classifier.addExample(activation, label);
        activation.dispose();                            // free the memory
        updateCounts();
      };
      document.getElementById("addBall").onclick = () => add("ball");
      document.getElementById("addNone").onclick = () => add("none");
      document.getElementById("clear").onclick = () => { classifier.clearAllClasses(); updateCounts(); };
    }
 
    function updateCounts() {
      const c = classifier.getClassExampleCount();
      countsEl.textContent = "Examples - ball: " + (c.ball || 0) + ", no ball: " + (c.none || 0);
    }
 
    async function predictKnn() {
      if (classifier.getNumClasses() < 2) { verdictEl.textContent = "Add examples of both classes"; return; }
      const activation = net.infer(video, true);
      const result = await classifier.predictClass(activation);
      activation.dispose();
      const p = result.confidences.ball || 0;
      show(result.label === "ball", result.label === "ball" ? p : 1 - p);
    }
 
    // ---------- Mode 2: your converted Keras model ----------
    async function predictKeras() {
      const p = tf.tidy(() => {
        const img = tf.browser.fromPixels(video)                       // RGB, 0..255
          .resizeBilinear([KERAS_INPUT_SIZE, KERAS_INPUT_SIZE])
          .toFloat()
          .div(255)                                                    // the exported model has no Rescaling layer, so we scale here
          .expandDims(0);
        return kerasModel.predict(img);
      });
      const value = (await p.data())[0];                               // probability of "ball"
      p.dispose();
      show(value >= 0.5, value >= 0.5 ? value : 1 - value);
    }
 
    async function loop() {
      try {
        if (MODE === "knn") await predictKnn(); else await predictKeras();
      } catch (err) {
        statusEl.textContent = "Error: " + err.message;
      }
      requestAnimationFrame(loop);
    }
 
    async function main() {
      try {
        await tf.ready();
        statusEl.textContent = "Starting the camera (allow it when asked)...";
        await startCamera();
        statusEl.textContent = "Loading the model...";
        if (MODE === "knn") {
          net = await mobilenet.load({ version: 2, alpha: 1.0 });
          classifier = knnClassifier.create();
          setupKnn();
          statusEl.textContent = "Hold a ball in view and press 'Add ball'. Then show other things and press 'Add no ball'. Add 20 or more of each.";
        } else {
          kerasModel = await tf.loadLayersModel(KERAS_MODEL_URL);
          statusEl.textContent = "Model loaded. Backend: " + tf.getBackend();
        }
        loop();
      } catch (err) {
        statusEl.textContent = "Could not start: " + err.message;
      }
    }
    main();
  </script>
</body>
</html>

import os
 
from tensorflow import keras
 
model = keras.models.load_model("ball_classifier.keras")
 
# The browser converter does not know every preprocessing layer, so rebuild the model without Rescaling.
# We divide by 255 in JavaScript instead. The other layers (and their trained weights) are shared.
keep = [layer for layer in model.layers if layer.__class__.__name__ != "Rescaling"]
export = keras.Sequential([keras.Input(shape=(64, 64, 3))] + keep)
export.save("ball_classifier.h5")                 # the converter reads .h5, not .keras
print("saved ball_classifier.h5")
export.summary()
os.system("tensorflowjs_converter --input_format=keras ball_classifier.h5 model/")