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

栏目: 编程工具 · 发布时间: 6年前

内容简介:解数独不难,但如果能动态演示解题步骤就更好了。 参考:最难数独的快速解法 - python https://www.jianshu.com/p/1b2ee6539d4bdemo网站: https://mysudo.herokuapp.com/上面是GIF动图,2.52MB,尺寸较大,可以下载下来观看。

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

功能

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

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

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

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

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

实现

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

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

下一步写作计划:

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

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

    数独动态解题演示小网站 - 基于Vue/pixi.js/Flask
    数独动态解题演示小网站 - 基于Vue/pixi.js/Flask
    数独动态解题演示小网站 - 基于Vue/pixi.js/Flask
  2. CNN卷积网络自动识别数字 Keras+Tensorflow,不需要识别手写数字MNIST,找印刷体数字(1-9)数据库训练一下就行了。 我找的chars74k数据,http://www.ee.surrey.ac.uk/CVSSP/demos/chars74k/,总共约10000个样本,训练也很快,十几个周期就达到99.6%准确率

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

模型:

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

复制代码
  1. 把识别的数字,传递到后端,算出答案,再用opencv绘制到手机图像里

  2. 集成到微信小程序里 有mpvue小程序框架,可以用Vue.js快速写小程序了。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

We Are the Nerds

We Are the Nerds

Christine Lagorio-Chafkin / Hachette Books / 2018-10-2 / USD 18.30

Reddit hails itself as "the front page of the Internet." It's the third most-visited website in the United States--and yet, millions of Americans have no idea what it is. We Are the Nerds is an eng......一起来看看 《We Are the Nerds》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具