Error While Trying To Load Tensorflow.js Model

Hey everyone,

I’m trying to load a tensorflow.js model into my PC scene. This is my directory structure - image

My code is as follows -

/*jshint esversion: 6*/

let QuantimeDnn = pc.createScript('quantimeDnn');

const predict = async function() {
    let data = tf.tensor([22, 18, 15, 9, 18, 5, 1, 1, 3]);
    const model = await tf.loadLayersModel('model.json');
    alert(model.predict(data));
}

predict();

// swap method called for script hot-reloading
// inherit your script state here
// QuantimeDnn.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

I am getting a 404 error like this -
image

From the error, I understand that the path to the model.json file is incorrect, and therefore tf.js isn’t able to load the model, and by extension run the predict() call. How am I supposed to give the path to the model.json file? I simply specified the name of the file since it is in the same directory as the script, so how do I proceed now to eliminate the error?

You need to get the asset for model.json and get the URL for the file via https://developer.playcanvas.com/en/api/pc.Asset.html#getFileUrl

1 Like

Will give that a try and revert, thanks.

@yaustar, I get this - image
I tried doing - let modelAsset = this.app.assets.find("model", 'json');, what’s wrong with the code? I’ve also tried replacing model with model.json to get the same error, so I’m sure it isn’t that.

EDIT - I can’t seem to be able to access the this keyword. I tried declaring let app = this; globally, but even that doesn’t solve the issue. I can’t even alert a basic this.app.root.name. I have to use an async function for the tensorflow model to work correctly, and thus cannot use the regular init function, so what’s the best way to fix this?

Hi @DevilZ,

Where are you running this code? It seems you are missing a proper reference to the current pc.Application instance.

Try instead, if you don’t have an active reference in a variable of yours:

pc.Application.getApplication().assets.find("model", 'json');

You are in an anonymous function outside a pc.script class. As Leonidas has mentioned, you will have to get a reference to the pc.Application instance and then access the assets registry there.

You ca find by name or asset id (which is probably faster).

Alright, I’ve got it to return the URL, but now instead of a 404, I get a 500(Server Error). This is the dump.

Failed to load resource: the server responded with a status of 500 (Internal Server Error)
io_utils.js:169 Uncaught (in promise) RangeError: byte length of Float32Array should be a multiple of 4
    at new Float32Array (<anonymous>)
    at yw (io_utils.js:169)
    at oT (models.js:334)
    at models.js:316
    at u (runtime.js:45)
    at Generator._invoke (runtime.js:274)
    at Generator.forEach.t.<computed> [as next] (runtime.js:97)
    at Wm (runtime.js:728)
    at o (runtime.js:728)

How do I resolve this?

EDITOR - https://playcanvas.com/editor/scene/1019539

Project is private.

Actually, no it isn’t. I think the scene got deleted accidentally by one of my team members. I’ll quickly restore and get back to you.

@yaustar, just restored changes. This is odd. I’m getting a completely different error now despite just restoring a checkpoint. Shouldn’t normally happen right?

Editor is https://playcanvas.com/editor/scene/1019781

Looks more like a setup error with Tensorflow rathar than PlayCanvas. The 500 error comes from trying to access a bin file that doesn’t exist:

Also, getFileUrl is a function, not a property.

1 Like

Noted. I’ll try another framework then I guess, there shouldn’t be any issues since I have set up tf.js previously in the browser, just not on PC.

@yaustar I tried running the same model on my localhost, it works perfectly, so I don’t think this is a setup issue. I am following the tutorial given here - https://www.tensorflow.org/js/tutorials/conversion/import_keras. If you could try to repro the bug, it would be great, because I am certain it’s a PlayCanvas issue now that I’ve seen it work on localhost. If required, I can send the .h5 file for the model on DM, let me know if you need it.

Where’s the bin file? That wasn’t in the PlayCanvas project.

image

It’s there. Doesn’t change even if I remove it on localhost. All the bin file does is optimize the loading time.

Okay, that wasn’t there when I looked last night. I take a quick look

1 Like

The thing to remember is that the folders in the PlayCanvas assets panel do not reflect actual directories.

The issue with the setup here is that it is looking for the bin file in the same directory as the model file and of course, it doesn’t exist.

The setup needed here is to explciitly give tensorflow both files and not have it try to find it automatically.

An easy workaround is to host the model and bin files externally.

I tried putting the model.json file on pastebin, it gave a CORS error. Where would you recommend I host them?

GitHub would work (or at least it did for gltf files a while back)