数独动态解题演示小网站 - 基于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快速写小程序了。


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

查看所有标签

猜你喜欢:

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

精彩绝伦的jQuery

精彩绝伦的jQuery

[美] Jake Rutter / 魏 忠 / 人民邮电出版社 / 2012-6 / 59.00元

内容简介: 通过创建更具交互性的富Web界面增强用户体验 本书阐述如何利用少量的JavaScript基础知识将jQuery框架整合进网站,以创建富Web界面,并建立兼容所有主流浏览器的交互性网站。作者是一位具有丰富经验的Web设计师和开发者,通过一系列指导性步骤清晰讲述了添加交互性以创建卓越Web应用的方法和技巧。 使用jQuery可以节省大量的开发时间,开发者在没有丰富编程经验......一起来看看 《精彩绝伦的jQuery》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

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

在线XML、JSON转换工具

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

HEX HSV 互换工具