数独动态解题演示小网站 - 基于Vue/pixi.js/Flask

解数独不难，但如果能动态演示解题步骤就更好了。
参考：最难数独的快速解法 - python https://www.jianshu.com/p/1b2ee6539d4b

功能

• 读取公开网站的数独题目
• 或者手工输入数独题目
• 提交到后台，秒解
• 可以单步演示解题步骤

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

sudo_dynamic.gif

上面是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，把数据在前、后端传递。

image.png

实现

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

有空时会详细解读一下代码，大家先看源码吧，都是Vue/Flask基础运用。

下一步写作计划：

网上有很多演示：手机扫一扫数独题目，答案立刻通过AR（增强现实）展示。原理很清楚。计划写如下几篇：

1. opencv识别图像
   有python库，也有js库，前端、后端都能实现。
   高斯模糊 -> 自适应二值化 -> 霍氏直线 -> 找最大轮廓 -> 扣图

   
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png

2. CNN卷积网络自动识别数字
   Keras+Tensorflow，不需要识别手写数字MNIST，找印刷体数字（1-9）数据库训练一下就行了。
   我找的chars74k数据，http://www.ee.surrey.ac.uk/CVSSP/demos/chars74k/，总共约10000个样本，训练也很快，十几个周期就达到99.6%准确率
   

   

   image.png

模型：

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快速写小程序了。

敬请期待。。。