在Java网页中加载在Colab中创建的对象识别模型

如何解决在Java网页中加载在Colab中创建的对象识别模型

我通过以下示例建立了对象识别模型： https://www.tensorflow.org/tutorials/images/classification
我使用Colab创建了该模型，现在在Colab中有一个 .py 和 .ipynb

中的模型

使用此指令，我将模型保存在 .h5 中：
model.compile(loss='mean_squared_error',optimizer='adam',metrics=['binary_accuracy'])
model.save('./modelname.h5')

现在，我可以尝试以另一种格式保存该模型，我使用此代码并将其保存在 .json 和 group1-shard°of°.bin中文件：
!pip install tensorflowjs
!mkdir model
!tensorflowjs_converter --input_format keras modelname.h5 model/
!zip -r modelname.zip model

现在，我的目标是能够将此模型以Javascript加载到我的web应用中，并使用它来识别图像
问题是能够加载模型
有解决办法吗？

更新
我正在使用页面视图的屏幕截图作为可识别的图像
这是我代码的基本部分：

async function LoadModel() {
    Model = await tf.loadLayersModel('http://localhost/..../model.json'); //caricamento mio modello
    console.log('conferma caricamento modello ' + Model);
try {
    maxPredictions = Model.getTotalClasses();
    console.log("durante");
}
catch (e){}
if (Model) {
    //controllo caricamento modello
    console.log(Model);
}
console.log("dopo e modello " + Model);
}

然后

OriginImage.onload = function (event) {
try { 
document.createEvent("TouchEvent"); 
var width = document.body.clientWidth;
}
catch(e) { 
var width = ResizeImageWidth;
} 
if (OriginImage.height<OriginImage.width) {
    var height = width*OriginImage.height/OriginImage.width; 
    }
else {
    var height = width;
    width = height*OriginImage.width/OriginImage.height; 
    }
ResizeImage.width = width;
ResizeImage.height = height;  
ResizeImage.src = OriginImage.src;
}    

这是调整大小

ResizeImage.onload = function (event) {
if (Model) recognizeImage(ResizeImage);
}

这是识别图像

async function recognizeImage(Image) {
var cont;
var data = "";
var maxClassName = "";
var maxProbability = "";
const prediction = await Model.predict(Image);
for (let i = 0; i < maxPredictions; i++) {
    if (i==0) {
        maxClassName = prediction[i].className;
        maxProbability = prediction[i].probability;
    }
    else if (prediction[i].probability>maxProbability) {
        maxClassName = prediction[i].className;
        maxProbability = prediction[i].probability;
    }
}
if(maxProbability > 0.90 ) {
        console.log(maxProbability + '  than' + maxClassName);
    return;
} 
else {
    console.log(maxProbability + maxClassName + "nothing" );
    }
}

解决方法

您可以使用

加载它

tf.loadLayersModel(modelUrl)

在节点上，可以直接访问文件。但是，浏览器无法访问文件系统。因此model.json需要首先由服务器提供服务。 answer

中对此进行了讨论 ,

我正在使用React js加载模型（图像分类和更多机器学习内容）

Tensorflow.js不支持Api来读取以前训练有素的模型

    const file= new Blob()
    file.src=modelJSON
    const files= new Blob()
    files.src=modelWeights
    console.log(files)
    const model= await tf.loadLayersModel(tf.io.browserFiles([file,files]));

如果您使用网络应用程序（对于tensorflow.lite，可以使用opencv.readTensorflowmodel（model.pb），则可以在Express.js中创建APi来为模型（model.json和weigths.bin）提供服务器服务，weight.pbtxt）

参考：How to load tensorflow-js weights from express using tf.loadLayersModel()?

     const classifierModel = await tf.loadLayersModel(            
            "https://rp5u7.sse.codesandbox.io/api/pokeml/classify"
        ); 
        const im = new Image()
            im.src =imagenSample//'../../../../../Models/ShapesClassification/Samples/images (2).png';
        const abc= this.preprocessImage(im);
const preds = await classifierModel.predict(abc)//.argMax(-1);
            console.log('<Response>',preds,'Principal',preds.shape[0],'DATA',preds.dataSync())
            const responde=[...preds.dataSync()]
            console.log('Maxmimo Valor',Math.max.apply(Math,responde.map(function(o) { return o; })))
            let indiceMax = this.indexOfMax(responde)
            console.log(indiceMax)
            console.log('<<<LABEL>>>',this.labelsReturn(indiceMax))