一个简单的TensorFlow.js的猫狗识别样例
后台代码忽略，只要能够成功传送两个模型文件即可。
代码的猫狗识别模型是一个简单的CNN模型（有残差模块）。
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<title>TensorflowJS</title>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"> </script>
</head>
<body>
<img id="image" src=""/>
<input type="file" onchange="selectImage(this);"/>
<input name="button1" type="button" onclick="classifyCatOrDog(this.image)" value="猜猜你放的是猫还是狗">
<script>
var image = new Image();
var inputImage ; // 经过预处理的image
image.onload = function(){
console.log("image is loaded");
inputImage = preprocess(image); // 在读完图片的第一时间将图片转成tensor形式的数据
};
image.onerror = function(){
alert("error!");
};
var animalList = ["猫","狗"];
var catDogModelDir = "http://*******************" ;
var catDogModel;
tf.loadFrozenModel(
catDogModelDir + "tensorflowjs_model.pb",
catDogModelDir + "weights_manifest.json").
then((model) => {
catDogModel = model;
});
// 数据处理 将图片转化成tensorflow需要的形式
function preprocess(image){
return tf.tidy(() => {
let tensor = tf.fromPixels(image);
const resized = tf.image.resizeBilinear(tensor, [64, 64]).toFloat();
const batched = resized.expandDims(0);
return batched;
})
}
function selectImage(file){ // 获取图片 参考自https://www.cnblogs.com/jcz1206/p/6532667.html
if(!file.files || !file.files[0]){
return;
}
var reader = new FileReader();
reader.onload = function (evt){
document.getElementById('image').src = evt.target.result;
image.src = document.getElementById('image').src;
};
reader.readAsDataURL(file.files[0]); // 展示图片
}
function classifyCatOrDog(){
var beginTime = new Date();
var result = catDogModel.predict([tf.ones([]), inputImage]).dataSync();
var endTime = new Date();
var maxIndex = result.indexOf(Math.max.apply(null,result));
alert("TensorFlow.js猜这是一只" + animalList[maxIndex] + "图片\n耗时为" + (endTime - beginTime) + "ms");
}
</script>
</body>
</html>