數獨動態解題演示小網站 - 基於Vue/pixi.js/Flask

解數獨不難，但若是能動態演示解題步驟就更好了。 參考：最難數獨的快速解法 - python https://www.jianshu.com/p/1b2ee6539d4b

功能

• 讀取公開網站的數獨題目
• 或者手工輸入數獨題目
• 提交到後臺，秒解
• 能夠單步演示解題步驟

demo網站: https://mysudo.herokuapp.com/

上面是GIF動圖，2.52MB，尺寸較大，能夠下載下來觀看。

技術棧

• 前端：Vue.js, pixi.js畫圖, Vuetify UI框架 網站須要繪製數獨題目，pixi.js比較方便。其實用Canvas畫布也夠了，主要是順帶學習下HTML小遊戲的繪圖。UI框架，能夠任意選擇。這裏選擇了Vuetify，跟Vue.js完美搭檔，適合桌面+手機。若是是純手機端，能夠選擇Framework7。

• 後端：Flask服務器框架，Python爬蟲 Flask適合快速原型開發。Django適合集團軍做戰。 另外，須要從公開網站抓取題目，Python爬蟲信手拈來就是了。 解題：前一篇文章https://www.jianshu.com/p/1b2ee6539d4b 已經做好準備了。

數據流

Vue經過ajax，把數據在前、後端傳遞。

實現

代碼：https://github.com/kevinqqnj/sudo-dynamic-solve

有空時會詳細解讀一下代碼，你們先看源碼吧，都是Vue/Flask基礎運用。

下一步寫做計劃：

網上有不少演示：手機掃一掃數獨題目，答案馬上經過AR（加強現實）展現。原理很清楚。計劃寫以下幾篇：

1. opencv識別圖像 有python庫，也有js庫，前端、後端都能實現。 高斯模糊 -> 自適應二值化 -> 霍氏直線 -> 找最大輪廓 -> 扣圖

   

   

   

2. CNN卷積網絡自動識別數字 Keras+Tensorflow，不須要識別手寫數字MNIST，找印刷體數字（1-9）數據庫訓練一下就好了。 我找的chars74k數據，http://www.ee.surrey.ac.uk/CVSSP/demos/chars74k/，總共約10000個樣本，訓練也很快，十幾個週期就達到99.6%準確率

   

模型：

model = Sequential()
model.add(Conv2D(32, kernel_size=(3, 3),
                 activation='relu',
                 input_shape=input_shape))
model.add(Conv2D(64, (3, 3), activation='relu'))
model.add(MaxPooling2D(pool_size=(2, 2)))
model.add(Dropout(0.25))
model.add(Flatten())
model.add(Dense(128, activation='relu'))
model.add(Dropout(0.5))
model.add(Dense(num_classes, activation='softmax'))

model.compile(loss=keras.losses.categorical_crossentropy,
              optimizer=keras.optimizers.Adadelta(),
              metrics=['accuracy'])
複製代碼

訓練：

Train on 8229 samples, validate on 915 samples
Epoch 1/30
8229/8229 [==============================] - 101s 12ms/step - loss: 0.8978 - acc: 0.6994 - val_loss: 0.1746 - val_acc: 0.9486
Epoch 2/30
8229/8229 [==============================] - 95s 12ms/step - loss: 0.1848 - acc: 0.9436 - val_loss: 0.1057 - val_acc: 0.9628
...
Epoch 12/30
8229/8229 [==============================] - 64s 8ms/step - loss: 0.0153 - acc: 0.9950 - val_loss: 0.0140 - val_acc: 0.9956
Epoch 13/30
8229/8229 [==============================] - 67s 8ms/step - loss: 0.0160 - acc: 0.9950 - val_loss: 0.0125 - val_acc: 0.9967

複製代碼

3. 把識別的數字，傳遞到後端，算出答案，再用opencv繪製到手機圖像裏

4. 集成到微信小程序裏 有mpvue小程序框架，能夠用Vue.js快速寫小程序了。

敬請期待。。。