一个简单的TensorFlow.js的猫狗识别样例
2018-11-18 12:10
661 查看
一个简单的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/tfjs@0.13.3/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>阅读更多
相关文章推荐
- 在浏览器中进行深度学习:TensorFlow.js (六)构建一个卷积网络 Convolutional Network
- 在浏览器中进行深度学习:TensorFlow.js (五)构建一个神经网络
- TensorflowSharp 简单使用与KNN识别MNIST流程
- 在浏览器中进行深度学习:TensorFlow.js (四)用基本模型对MNIST数据进行识别
- 利用tensorflow keras搭建一个简单的卷积神经网络
- 一个简单的JS日期挂历脚本
- 使用Vue.js和Element-UI做一个简单的登录页面
- 请写一个简单的幻灯效果页面。如果不使用JS来完成,可以加分。
- js实现一个简单的Chrome刷票插件
- js 实现一个简单的3D轮播效果
- nodejs+mongodb写的一个简单的登录注册
- 使用微软Kinect进行手势识别操作的一个简单范例(2)(WPF-C#)
- 使用Node.js的express框架搭建一个简单项目并且添加了一个路由
- JS实现一个简单的网页钟表
- 大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论(OO Vs 过程)------(一个简单的实例引发的沉思)
- 一个简单的js 倒计时问题
- 【Android游戏开发十六】Android Gesture之【触摸屏手势识别】操作!利用触摸屏手势实现一个简单切换图片的功能!
- html、js写了一个简单的计算器
- 一个简单的JS去空格问题
- 使用TensorFlow实现一个文本分类的卷积神经网络Implementing a CNN for Text Classification in TensorFlow