自己动手做一个识别手写数字的web应用03

#今天被催更了,于是我立马抽空写了第3篇。

接着往期的2篇继续,一步步动手做:

自己动手做一个识别手写数字的web应用02

自己动手做一个识别手写数字的web应用01

1 目录结构

新建一个web全栈项目的文件夹,我在kerasStudy下建了个app的文件夹,app下的文件构成如下:

app.py是项目的主入口,主要是用flask写的一些路由;

predict.py是识别手写字的python模块;

static是放置前端页面的目录;

model存放上一篇中训练好的模型;

test是一些测试图片;

tmp是前端上传到服务器的图片存放地址。

2 前端代码

新建一个简单的index.html文件,放置于static目录下,写一个form表单:

这里的前端代码比较简单,只是一个把手写字图片提交到服务器的表单,下一篇文章将实现一个手写字的输入工具。

3 后端代码

app.py里,用flask设置路由,返回静态html页面:

其余flask的相关配置代码可以参考往期文章:用Flask写后端接口

这个时候,我们启动docker,把镜像启动,并进入docker镜像的终端中(如何启动镜像及相关的操作),找到app目录,终端输入:

python app.py

等终端提示相关的启动信息后,在浏览器里试下,输入:

http://localhost:8888/

成功打开index.html页面:

再次编辑app.py文件,写一个predict的接口,接受前端提交的图片,并返回识别结果给前端:

其中predict.img2class(imgurl)是一个python模块。

接下来,我们编写识别手写字的python模块。

4 编写识别手写字的python模块

在Python中,每个Python文件都可以作为一个模块,模块的名字就是文件的名字。比如有这样一个文件test.py,在test.py中定义了函数add:

#test.py

def add(a,b): 
    return a+b

那么在其他文件中就可以先import test,然后通过test.add(a,b)来调用了,当然也可以通过from test import add来引入。

回到本文的例子,我们在第二篇文章中已经写过识别手写字的代码了,现在只需稍微调整下就可以形成一个python模块,供其他文件调用了。

如本文中,在app.py中通过:

import predict

引入predict.py模块,使用的时候调用:

predict.img2class(imgurl)

#predict.py文件

详情可以参考:

自己动手做一个识别手写数字的web应用02

这边把上次实现过的代码,书写出一个python模块,以供其他文件调用。

在docker镜像中启动伪终端,进入app目录,输入:

python app.py

上传测试图片试试:

成功返回识别结果,至此,一个迷你的识别手写字web全栈应用已经完成。

下一篇文章将完善前端,实现用户通过鼠标或者触摸屏手势输入任意数字,立即识别结果。

相关源代码,可以留言获取。

原文发布于微信公众号 - 科技Mix设计Lab(Design-AI-Lab)

原文发表时间:2017-11-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

记一次利用BLIND OOB XXE漏洞获取文件系统访问权限的测试

今天,我要和大家分享的是,我在某个邀请漏洞测试项目中,发现Bind OOB XXE漏洞的方法。由于涉及隐私,以下文章中涉及网站域名的部分我已作了编辑隐藏,敬请见...

32750
来自专栏魏艾斯博客www.vpsss.net

网站目录/绝对路径/相对路径-零基础搭建wordpress教程

网站基本知识包括很多方面,网站结构、网页路径、域名、服务器、建站等等,我们已经写过域名和新手如何选择服务器了,正好最近遇到群友对网站基本知识有些疑问,魏艾斯博客...

52710
来自专栏酷玩时刻

IDE中显示 *.properties 为中文

之前做过几个开源项目(极速开发微信公众号weixin_guide以及IJPay 让支付触手可及),Demo中有涉及到一些配置文件。有些同学下载了之后反馈说有乱码...

11320
来自专栏Python中文社区

开车啦!小爬虫抓取今日头条街拍美女图

專 欄 ❈追梦人物,电子科技大学计算机学院研究生,从事大数据分析研究方向。主要使用 Python 语言进行相关数据的分析,熟练使用 django 开发网站系统...

54350
来自专栏24K纯开源

QT程序在发布的时候应注意的地方

---恢复内容开始---     我们用QT开发好的应用程序,如果要发布到其他计算机上运行怎么办呢?我们在用VC编程时,单独运行编译好的可执行文件时,经常会发现...

29950
来自专栏Android开发经验

微信小程序学习一初探“小程序”结语

10520
来自专栏web开发

初识NodeJS

1.JavaScript 模块化规范 浏览器环境 AMD Asynchronous Module Definition RequireJS CMD Com...

734100
来自专栏较真的前端

[译] 调试 RxJS 第2部分: 日志篇

19740
来自专栏CodeSheep的技术分享

为Hexo博客添加LiveRe评论系统

21430
来自专栏iOS 开发杂谈

CornerStone的使用

对于我们程序员来说,不管你是大神,还是小鱼小虾,进入公司之后,都用过源码管理工具,不然你就不是一个合格的程序员,现在各个公司用于源码管理工具通常有下面两种:

44210

扫码关注云+社区

领取腾讯云代金券