手寫數字識別

一、手寫數字識別簡介

        手寫數字識別是指給定一系列的手寫數字圖片以及對應的數字標簽，構建模型進行學習，目標是對於一張新的手寫數字圖片能夠自動識別出對應的數字。圖像識別是指利用計算機對圖像進行處理、分析和理解，以識別各種不同模式的目標和對像的技術。機器學習領域一般將此類識別問題轉化為分類問題。

        阿拉伯數字作為唯一被世界各國通用的符號，所以對手寫體數字識別的研究基本.上與文化背景無關，各地的研究工作者可以說是基於同一-平台開展工作的，有利於研究的比較和探討。

        手寫數字識別應用廣泛，如稅表系統，銀行支票自動處理和郵政編碼自動識別等。在以前，這些工作需要大量的手工錄入，投入的人力物力都相對較多，而且勞動強度較大。為了適應無紙化辦公的需要，大大提高工作效率，研究實現手寫數字識別系統是必須要做的。

        由於數字類別只有0-9共10個，比其他字符識別率較高，可將其用於驗證新的理論或做深入的分析研究。許多機器學習和模式識別領域的新理論和算法都是先用手寫數字識別進行檢驗，驗證其理論的有效性，然后才會將其應用到更為復雜的領域當中。在這方面的典型例子就是人工神經網絡和支持向量機。

二、手寫數字識別核心內容

1）數字的繪制 

在Canvas畫板繪制數字的窗口中實現數字的手寫，利用清除按鈕可實現數字的清除工作。 

2）數字的預處理 

在手寫數字圖像識別系統中，圖像的預處理跟一般圖像系統不同，我們不需要對圖像進行灰度化處理、去噪處理等基本操作，我們利用程序保存的坐標值就可以對生成一張二值化圖像，相當於圖像處理系統的二值化處理。

將畫布內容轉化成base64，構建一個json格式的數據，將圖片提交到后端

(Base64編碼是從二進制到字符的過程，可用於在HTTP環境下傳遞較長的標識信息。采用Base64編碼具有不可讀性，需要解碼后才能閱讀。)

3)  數字的識別

識別過程就是輸入的模型得到輸出，具體過程就是首先cnn提取特征，再將特征輸入到全連接層，概率是神經網絡的輸出，因為數字有10個，所以是10分類問題，網絡就會輸出10個logits，10個logits經過softmax（）就得到了概率

4）前后端分離

 

 

 

前后端分離是目前一種非常流行的開發模式，它使項目的分工更加明確：

后端：負責處理、存儲數據

前端：負責顯示數據

前端和后端開發人員通過 接口 進行數據的交換。

前后端都各自有自己的開發流程，構建工具，測試集合

關注點分離，前后端變得相對獨立並解耦合

5） 使用react書寫前端界面

react是一個JavaScript類庫，可用於創建Web用戶交互界面。它引入了一種新的方式來處理瀏覽器DOM。

react只關注數據，不關心dom（即文檔對象模型，它允許腳本(js)控制Web頁面、窗口和文檔）。

react是數據驅動的，只要數據改變，視圖會自動更新，因此開發速度更快，也更簡單高效。

 

 

 

6）鼠標監聽事件

初始化當前畫板的畫筆狀態，drawline=false。

getContext方法返回一個用於在畫布上繪圖的環境，在這里的2d是指繪制的是二維圖形。

Context.linewidth=6，是指畫筆寬度為6.

當鼠標按下時（onmousedown），把DrawLine設為true，表示正在畫。

當按下鼠標的時候，鼠標移動（onmousemove）就把點記錄下來並畫出來。

鼠標松開的時候（onmouseup），把DrawLine為false，表示圖至繪制。

如果鼠標移動過快，瀏覽器跟不上繪畫速度，點與點之間會出現間隙，所以我們需要將畫出的點連起來（line.to）。

7）識別按鈕處理

使用toDateURL將canvas畫布的內容轉化成圖片發送到后端處理識別並將識別結果顯示

json的作用（json是一種與語言無關的數據交換的格式）

前端的圖片通過canvas的toDataURL轉化成了base64

json傳的是base64的圖片，后端把base64轉化成png

 

 

 

8）清空畫布按鈕

beginPath( )是重新開始新路徑，而把之前的路徑都清空掉。

clearRect( ) 方法清空給定矩形內的指定像素。

通過 setTransform( ) 重置並創建新的變換矩陣，然后再次繪制圖形。

 

 

 

三、使用深度學習框架pytorch搭建lenet5網絡

        LeNet-5網絡堪稱卷積神經網絡（CNN）的經典之作，它最早是在1998年在論文中提出的。LeNet-5主要是用作識別手寫字符，雖然它的識別性能很高，但是在其發表之后的數十年里LeNet-5並沒有流行起來，最主要的原因還是因為當時計算機的計算能力很有限，人們對於訓練規模如此之小的網絡也會感到略顯艱難。Lenet-5網絡的規模雖然很小，但是它卻已經基本蘊含了卷積層、池化層、全連接層等知識。

 

 

 

該模型有1個輸入層、2個卷積層、2次Max Pooling、2個全連接層和1個輸出層。

• 輸入層INPUT：1個channel，圖片size是32×32。
• 卷積層C1：6個channel，特征圖的size是28×28，即每個卷積核的size為(5,5)，stride為1。
• 下采樣操作S2： 6個channel，特征圖的size是14×14，即Max Pooling窗口size為(2,2)。
• 卷積層C3：16個channel，特征圖的size是10×10，即每個卷積核的size為(5,5)，stride為1。
• 下采樣操作S4：16個channel，特征圖的size是5×5，即Max Pooling窗口size為(2,2)。
• 全連接層F5：120個神經元。
• 全連接層F6： 84個神經元。
• 輸出層OUTPUT： 10個神經元。

四、使用輕量級的flask框架搭建一個后端服務處理數據

Flask是一個基於Python開發的一個微型框架，其用於接收http請求並對請求進行預處理，然后觸發Flask框架，開發人員基於Flask框架提供的功能對請求進行相應的處理，並返回給用戶。

flask服務器接收到前端傳來的圖片加以處理后調用訓練的模型進行識別並將識別結果返回到前端。

搭建服務器代碼

import base64

import random

from flask import request, json, Flask

from flask_cors import CORS

import deal_image

import recognize

# 初始化flask核心對象

app = Flask(__name__)

# 解決跨域問題

# 前端與后端分處不同的域名，這就涉及到跨域訪問數據的問題，因為瀏覽器的同源策略，

# 默認是不支持兩個不同域間相互訪問數據，而我們需要在兩個域名間相互傳遞數據，這時我們就要為后端添加跨域訪問的支持。

CORS(app, supports_credentials=True)

# 識別的api接口

@app.route('/recognition', methods=['GET', 'POST'])

def recognition():

    # 獲取請求的數據

    req_data = json.loads(request.get_data())

    # 取出base64字符串

    image_base64 = req_data['image_data']

    if image_base64 is None or len(image_base64) < 10:

        # 異常處理

        return app.response_class(

            response=json.dumps({'result': {'status': -3, 'text': ''}}),

            status=200,

            mimetype='application/json'

        )

    # base64解碼成圖片

    base64string = base64.b64decode(image_base64)

    # 存儲圖片的路徑

    filename = './images/' + str(random.randint(1, 10000)) + ".png"

    # 存儲圖片

    with open(filename, 'wb') as f:

        f.write(base64string)

    # 處理圖片

    x = deal_image.deal_image(filename)

    # 識別

    res = recognize.recognition(x)

    max_index = res.argmax()

    print(res.tolist())

    print(max_index)

    # 識別結果，數字和概率

    data = {

        'num': int(max_index),

        'pro': res.tolist()

    }

    # 識別結果返回到前端

    return app.response_class(

        response=json.dumps({'result': data}),

        status=200,

        mimetype='application/json'

    )

if __name__ == '__main__':

    app.run(host='0.0.0.0', debug=True)

五、使用mnist數據集訓練lenet5網絡得到手寫體數字識別模型

MNIST 數據集來自美國國家標准與技術研究所,共有7萬張圖片。其中6萬張用於訓練神經網絡，1萬張用於測試神經網絡。每張圖片是一個28*28像素點的0~9的手寫數字圖片。

白底黑字的圖片，白底用0表示，黑字用0~1之間的浮點數表示，越接近1，顏色越黑；若為黑底白字的圖片，則反之。

 

 

 

六、結果演示

 

演示視頻連接：

鏈接：https://pan.baidu.com/s/1CO7mBDtw6bd2fGwXO-x8mA
提取碼：cseh

小組成員：周蕊 田璐瑤 王金鴿 宋琳珊