先看最终效果:
一、加载MNIST数据集
使用预先准备好的脚本加载MNIST数据集,脚本可在文章末尾的源码里面获取。
为了避免从国外直接下载数据集花费太多时间,所以脚本文件里面已经将地址改成本地的,因此你需要现将MNIST数据保存在本地,数据集也可以在源码力获取。
脚本里面关于MNIST路径的配置如下:
const MNIST_IMAGES_SPRITE_PATH ='http://127.0.0.1:8080/mnist/mnist_images.png';const MNIST_LABELS_PATH ='http://127.0.0.1:8080/mnist/mnist_labels_uint8';
因此在VsCode中需要先在本地来一个8080的端口,用于加载数据集。
npm i http-server -ghttp-server data --cors
第一句表示安装一个全局的http-server。
第二局是启动一个8080的端口,默认就是8080的端口,端口号与脚本中数据的路径开端口一致。data是项目中保存MNIST数据的文件夹名称,--cors是防止跨域问题。
配置成功就可以直接在浏览器输入数据地址直接访问数据了。
关于http-server的使用,可以参考:http-server基本使用_echohye的技术博客_51CTO博客
创建index.html入口文件,跳转到script.js,主要功能代码写在js文件中。
<script src="script.js"></script>
在js文件中加载数据。
import * as tf from "@tensorflow/tfjs"import * as tfvis from "@tensorflow/tfjs-vis"import {MnistData} from "./data"window.onload = async () => {// 创建MNIST对象const data = new MnistData();// 加载数据await data.load();// 获取数据查看数据结构const samples = data.nextTestBatch(20);console.log(samples)}
运行项目
parcel mnist/*html
注意之前启动8080端口的终端是不能关掉的,所以需要重新启动一个终端输入上面命令运行项目。
结果:
可以看见标签的形状是[20, 10],表示20个数据,我们在代码中就是取20数据查看的,10表示0~9总共10个标签,标签采用独热码形式。
特征的形状是[20,784],20还是一样表示20个数据,784表示每个数据的像素点总数,由于MNIST图片是28*28的。
可视化数据集
// 创建sutface对象用于显示图片const surface = tfvis.visor().surface({name: "输入示例"})for(let i=0;i<20;i++){const imageTensor = tf.tidy(() => {return samples.xs.slice([i, 0], [1, 784]).reshape([28,28,1]);});// 创建Canvas对象const canvas = document.createElement("canvas");canvas.width = 28;canvas.height = 28;// 每张图片外边距4pxcanvas.style = "margin: 4px";// 可视化图片await tf.browser.toPixels(imageTensor, canvas);surface.drawArea.appendChild(canvas)}
浏览器可显示我们提取的20张图片:
二、构建卷积神经网络并训练
两层卷积层+两层最大池化层+一层全连接层。第二层卷积层不需要设置输入数据的形状,网络会根据第一层的结果自动算出来,全连接层的神经元个数与分类类别数一致,我们需要识别0~9总共10个数字,所以神经元个数设置为10。
// 构建卷积神经网络const model = tf.sequential();// 添加卷积层model.add(tf.layers.conv2d({inputShape: [28, 28, 1],kernelSize: 5,filters: 8,strides: 1,activation: 'relu',kernelInitializer: 'varianceSaling'}));// 添加最大池化层model.add(tf.layers.maxPool2d({poolSize: [2 ,2],strides: [2, 2]}));// 添加卷积层model.add(tf.layers.conv2d({kernelSize: 5,filters: 16,strides: 1,activation: 'relu',kernelInitializer: 'varianceSaling'}));// 添加最大池化层model.add(tf.layers.maxPool2d({poolSize: [2 ,2],strides: [2, 2]}));// 展平model.add(tf.layers.flatten());// 全连接层model.add(tf.layers.dense({units: 10,activation: 'softmax',kernelInitializer: 'varianceSaling'}))
设置损失函数和优化器。
// 配置损失函数和优化器pile({loss: "categoricalCrossentry",optimizer: tf.train.adam(),metrics: 'accuracy'});
准备训练集和验证集。
// 准备训练集和验证集const [train_x, train_y] = tf.tidy(() => {const train_data = data.nextTrainBatch(5000);return [// 需要将训练数据成卷积第一层的输入形状train_data.xs.reshape([5000, 28, 28, 1]),train_data.labels,]});const [val_x, val_y] = tf.tidy(() => {const val_data = data.nextTestBatch(1000);return [// 需要将训练数据成卷积第一层的输入形状val_data.xs.reshape([1000, 28, 28, 1]),val_data.labels,]});
训练模型并可视化训练过程。
// 训练模型并可视化训练过程await model.fit(train_x, train_y, {validationData: [val_x, val_y],batchSize: 32,epochs: 50,callbacks: tfvis.show.fitCallbacks({name: '训练过程'},['loss', 'val_loss', 'acc', 'val_acc'],{callbacks: ['onEpochEnd']})});
结果如图,可以看出训练集和验证集的准确率都非常高。
三、使用Canvas绘制数据并预测
编写前端页面输入待预测的数据,需要在index.html文件中编写Canvas容器和设置两个按钮。
<script src="script.js"></script><canvas width="300" height="300" style="border: 2px solid #666"></canvas><br><button onclick="window.clear();" style="margin:4px">清除</button><button onclick="window.predict();" style="margin:4px">预测</button>
在script.js文件中实现clear和predict两个方法,由于训练图片是黑底白字的,所以clear方法用于实现每次书写之前,铺一个黑底。
const canvas = document.querySelector('canvas');// 绑定鼠标事件:按住左键移动绘制线条(利用矩阵连起来书写数字)canvas.addEventListener("mousemove", (e) => {if(e.buttons === 1){const ctx = canvas.getContext('2d');ctx.fillStyle = 'rgb(255,255,255)',ctx.fillRect(e.offsetX,e.offsetY,25,25)}})window.clear = () => {const ctx = canvas.getContext('2d');ctx.fillStyle = 'rgb(0,0,0)',ctx.fillRect(0,0,300,300)}
实训训练好的模型进行预测,将输出的Tensor转为普通的数据并显示。
window.predict = () => {// 将canvas转换成Tensor,形状是28*28,黑白图片,并归一化const input = tf.tidy(() => {return tf.image.resizeBilinear(tf.browser.fromPixels(canvas),[28,28],true,).slice([0,0,0], [28,28,1]).toFloat().div(255).reshape([1, 28,28,1])});// 预测const pred = model.predict(input).argMax(1);alert( `预测结果为:${pred.dataSync()[0]}`)}
结果:
源码:/download/x_q_x_/87160080
如果觉得《TensorFLow.js实现手写体数字识别》对你有帮助,请点赞、收藏,并留下你的观点哦!