一個簡單的TensorFlow.js的貓狗識別樣例
阿新 • • 發佈：2018-11-19
一個簡單的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>