Problem with TensorFlow load model

Hey, first time I’m using TensorFlow.js and I got a problem:
I trained a model and saved it on my computer (2 files: JSON and bin).
Now I want to load it on another sketch, but I got this error that it like didn’t load the model.
My code (its a model to detect colors, so that’s for the RGB in the draw):

let model;
function setup() {
async function load() {
  model = await tf.loadLayersModel("C:\processing_new_3.5.4\processing-3.5.4\HCI\ML_as_tool\complete_model\trained_model\my-model.json");

function draw() {
  let r = 15;
  let g =43;
  let b = 55;
  background(r, g, b);
  tf.tidy(() => {
    const xs = tf.tensor2d([[r/255, g/255, b/255]]);
    let results = model.predict(xs);
    let index = results.argMax(1).dataSync()[0];
    let label = labelList[index];

the errors are those:

Uncaught TypeError: Cannot read properties of undefined (reading 'predict')
    at p5js-temp-complete_model1113659463477937770.js:18:25
    at Object.e.tidy (tfjs@0.11.7:2:73792)
    at draw (p5js-temp-complete_model1113659463477937770.js:16:6)
    at m.i.redraw (p5.min.js:3:272719)
    at m.<anonymous> (p5.min.js:3:230357)
    at m.<anonymous> (p5.min.js:3:229062)
    at new m (p5.min.js:3:232427)
    at n (p5.min.js:3:226962)
p5js-temp-complete_model1113659463477937770.js:7 Uncaught (in promise) TypeError: tf.loadLayersModel is not a function
    at load (p5js-temp-complete_model1113659463477937770.js:7:20)
    at setup (p5js-temp-complete_model1113659463477937770.js:4:3)
    at m.<anonymous> (p5.min.js:3:230028)
    at m.<anonymous> (p5.min.js:3:229048)
    at new m (p5.min.js:3:232427)
    at n (p5.min.js:3:226962)

plus, it doesn’t print the ‘LOADED’ after the loadLayersModel line.

Does anyone have any idea? :thinking:
thanks :slight_smile:

Browsers can’t directly access files from arbitrary paths outside the HTML file’s folder.
Unless you request a user to do so, either by file drop or file dialog:

Also you should postpone the sketch initialization until your file is fully loaded.


ok, I moved it to local host and now it’s working :slight_smile:
BTW, what did you mean in:

Also you should postpone the sketch initialization until your file is fully loaded.

That technique and the reasons why it’s needed are described on this old post here:

Basically you have this following asynchronous race condition:
You need variable model to be properly initialized before the code reaches this statement:
let results = model.predict(xs);

Most likely b/c the statement above happens much further into the code, your load() function should have completed your JSON file loading by then.

But you shouldn’t count on that for all machines that code might also run.

If the loading takes too much time, there’s a possibility for your code to crash at:
let results = model.predict(xs);.

I’ve refactored your posted code to postpone p5js initialization until the JSON file is fully loaded:

 * TensorFlow JSON Model Loading (v1.0.0)
 * by Omri Bergman (2022-Apr-17)
 * modded by GoToLoop

'use strict';

const JSON_FILENAME = 'my-model.json';
var model, bg = [ 15, 43, 55 ]; // background rgb array


function loadLayersModelJSON() { // assuming tf is a global variable

function gotLayersModel(layersModel) {
  model = layersModel;
  startP5(); // now we can safely start the p5js sketch

function startP5() {
  globalThis.setup = setup; // place callback setup() into global context
  globalThis.draw  = draw;  // place callback draw()  into global context

  new p5; // manually instantiate the p5js library

const setup = function () { // setup() callback is hidden from p5js for now
  createCanvas(800, 600);
  bg = color(bg); // convert rgb array to p5.Color object

const draw = function () { // draw() callback is hidden from p5js for now

function predictModel() {
    tensors = tf.tensor2d([ bg._array ]), // p5.Color's normalized rgba
    results = model.predict(tensors),
    [ index ] = results.argMax(1).dataSync(),
    label = labelList[index]; // unknown array variable (at least for me)


Obviously not tested b/c I don’t have any TensorFlow library.

1 Like

WOW, this is AMAZING!!!
thank you!!! :crown: :crown: :crown: