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() {
load();
}
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");
console.log('LOADED');
}
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];
console.log(label);
}
);
}
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.
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:
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
*
* https://Discourse.Processing.org/t/problem-with-tensorflow-load-model/36390/4
*/
'use strict';
const JSON_FILENAME = 'my-model.json';
var model, bg = [ 15, 43, 55 ]; // background rgb array
loadLayersModelJSON();
function loadLayersModelJSON() { // assuming tf is a global variable
tf.loadLayersModel(JSON_FILENAME).then(gotLayersModel);
}
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
background(bg);
tf.tidy(predictModel);
}
function predictModel() {
const
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)
print(label);
}
Obviously not tested b/c I don’t have any TensorFlow library.
