预训练模型是什么

MobileNet模型

引入模型文件

用tfjs加载模型

1
2
//用tf的loadLayersModel加载模型
const model = await tf.loadLayersModel(MOBILENET_MODEL_PATH);

前端输入带预测数据

使用模型进行预测

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
// ./util.js
export function file2img(f) {
return new Promise(resolve => {
const reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = (e) => {
const img = document.createElement('img');
img.src = e.target.result;
img.width = 224;
img.height = 224;
img.onload = () => resolve(img);
};
});
}

// ./script.js

window.predict = async (file) => {
//从文件转换为htmlElement
const img = await file2img(file);
document.body.appendChild(img);
const pred = tf.tidy(() => { //tidy优化webGl内存
const input = tf.browser.fromPixels(img) //转换为tensor
.toFloat() //整数转为浮点数
.sub(255 / 2) //归一化
.div(255 / 2)
.reshape([1, 224, 224, 3]); //一个图片的格式
return model.predict(input); //预测
});

const index = pred.argMax(1).dataSync()[0];

// setTimeout 0 使ui不被脚本阻塞
setTimeout(() => {
alert(`预测结果:${IMAGENET_CLASSES[index]}`);
}, 0);
};

预测效果

代码仓库