【工业树莓派CM0 Dev Board】网页手写数字识别

本文介绍了树莓派 CM0 Dev Board 的实现网页手写数字识别的项目设计，包括准备工作、环境搭建、MNIST 数据集和 ONNX 模型、流程图、关键代码以及效果演示等，为相关产品在 AI 视觉领域的开发设计和快速应用提供了参考。

无垠的广袤

767人浏览 · 2025-10-31 15:04:42

无垠的广袤 · 2025-10-31 15:04:42 发布

【工业树莓派CM0 Dev Board】网页手写数字识别

本文介绍了树莓派 CM0 Dev Board 的实现网页手写数字识别的项目设计，包括准备工作、环境搭建、MNIST 数据集和 ONNX 模型、流程图、关键代码以及效果演示等。

项目介绍

准备工作：包括所需 Python 环境、数据集训练、模型下载、软件包的安装部署等；
网页手写数字识别：通过 Web 网页端构建手写面板，CM0 接收手写数字图片，调用预训练模型完成板端推理，回传识别结果至网页端。

MNIST 数据集

Modified National Institute of Standards and Technology (MNIST) 是一个包含手写数字的数据集，里面有上万张数字图片，每张图片都标注了对应的数字标签（0到9）。该数据集可用来训练识别手写数字的神经网络。

在这里插入图片描述

详见：yann.lecun.com

ONNX

Open Neural Network Exchange (ONNX) 是一个开放的生态系统，为 AI 开发人员提供支持随着项目的发展选择正确的工具。

在这里插入图片描述

ONNX 为 AI 模型（包括深度学习和传统 ML）提供开源格式。它定义了一个可扩展的计算图模型，以及内置运算符和标准的定义数据类型。

详见：onnx/onnx: Open standard for machine learning interoperability .

准备工作

系统安装及环境搭建详见：【工业树莓派CM0 Dev Board】介绍、镜像烧录、系统测试 .

硬件连接

若采用 SSH 远程登录操作，则仅需连接电源供电即可；
若采用本地登录，则需连接 HDMI 视频流传输线、USB 键盘连接线等；

在这里插入图片描述

库安装

执行指令 sudo apt install python3-opencv 安装 OpenCV
安装解析 ONNX 模型所需的 onnxruntime 库，终端执行

sudo apt install python3-pip
sudo pip3 install onnxruntime --break-system-packages

模型下载

下载模型文件至本地 ./model 文件；

mkdir model
cd model
wget https://github.com/onnx/models/blob/main/validated/vision/classification/mnist/model/mnist-12.onnx

详见：mnist | onnx/models · GitHub .

流程图

文件目录

/home/ljl/MNIST
├── hnr_mnist_web.py      # 主程序 Flask 入口
├── model/
│   └── mnist-12.onnx     # ONNX 模型文件
└── web/
    └── index.html        # 网页文件

代码

终端执行 touch hnr_mnist_web.py 指令新建文件，并 nano hnr_mnist_web.py 添加如下代码

#!/usr/bin/env python3
import cv2, numpy as np, onnxruntime as ort, base64, io, time
from flask import Flask, render_template_string, request, jsonify

app = Flask(__name__)
MODEL = './model/mnist-12.onnx'
sess = ort.InferenceSession(MODEL, providers=['CPUExecutionProvider'])
in_name  = sess.get_inputs()[0].name   # Input3
out_name = sess.get_outputs()[0].name  # Plus214_Output_0

def softmax(x):
    """稳定版 softmax，返回概率数组"""
    x = x - np.max(x)          # 防溢出
    exp_x = np.exp(x)
    return exp_x / np.sum(exp_x)

def decode_canvas(data_url):
    header, encoded = data_url.split(',', 1)
    img = cv2.imdecode(np.frombuffer(base64.b64decode(encoded), np.uint8),
                       cv2.IMREAD_GRAYSCALE)
    return img

@app.route('/')
def index():
    with open('./web/index.html') as f:
        return render_template_string(f.read())

@app.route('/predict', methods=['POST'])
def predict():
    t0 = time.time()
    img = decode_canvas(request.json['image'])
    img = cv2.bitwise_not(img)          # 白底黑字-转换为-黑底白字
    img = cv2.resize(img, (28, 28))
    blob = img.astype(np.float32) / 255.0
    blob = blob.reshape(1, 1, 28, 28)   # NCHW
    pred = sess.run([out_name], {in_name: blob})[0][0] # logits
    prob = softmax(pred)                               # 归一化到 0~1
    digit = int(np.argmax(prob))
    conf  = float(prob[digit])          # 置信度
    cost  = (time.time() - t0) * 1000
    return jsonify({'digit': digit, 'conf': round(conf, 3), 'time': round(cost, 1)})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=8080, debug=False)

保存代码。

网页设计

终端执行 mkdir web 新建文件夹，用于存放网页文件；
进入 web 文件夹，执行 touch index.html 指令新建网页文件，并 nano index.html 添加如下代码

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CM0 手写识别</title>
<style>
  body{font-family:Arial,Helvetica,sans-serif;text-align:center;background:#f2f2f2}
  canvas{border:1px solid #999;display:block;margin:10px auto;background:#fff}
  button{font-size:18px;margin:6px;padding:6px 14px}
  #res{color:#d44;font-size:20px;font-weight:bold}
</style>
</head>
<body>
<h2>树莓派 CM0 手写数字识别</h2>
<canvas id="c" width="280" height="280"></canvas>
<div>
  <button id="clear">清空</button>
  <button id="go">识别</button>
</div>
<p id="res">等待识别…</p>

<script>
const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
ctx.fillStyle='#fff'; ctx.fillRect(0,0,280,280);
ctx.lineWidth=20; ctx.lineCap='round'; ctx.strokeStyle='#000';

let drawing=false;
function pos(e){const r=canvas.getBoundingClientRect();return [e.clientX-r.left,e.clientY-r.top];}
canvas.onmousedown=e=>{drawing=true;ctx.beginPath();ctx.moveTo(...pos(e));};
canvas.onmousemove=e=>{if(drawing){ctx.lineTo(...pos(e));ctx.stroke();}};
canvas.onmouseup=()=>drawing=false;
document.getElementById('clear').onclick=()=>{
  ctx.fillStyle='#fff';ctx.fillRect(0,0,280,280);document.getElementById('res').textContent='等待识别…';
};

document.getElementById('go').onclick=async()=>{
  const tmp=document.createElement('canvas');
  tmp.width=tmp.height=28;
  const tctx=tmp.getContext('2d');
  tctx.drawImage(canvas,0,0,28,28);
  const dataURL=tmp.toDataURL('image/png');
  const r=await fetch('/predict',{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({image:dataURL})
  }).then(r=>r.json());
  document.getElementById('res').textContent=
    `识别结果：${r.digit}  （置信度 ${(r.conf*100).toFixed(1)}%）  耗时：${r.time} ms`;
};
</script>
</body>
</html>