Original shadow 无界社区mixlab 2017-11-21 05:39 Posted on

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

接着往期的2篇继续，一步步动手做：

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

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

 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全栈应用已经完成。

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

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

  近期热文：

如何技术地识别双十一的“骗”局

人工智能设计师v0.0.2

全民刷军装背后的AI技术及简单实现

码字不易，开启新的打赏方式：

本公众号定期更新关于

设计师、程序员发挥创意

互相融合的指南、作品。

主要技术栈：

nodejs、react native、electron

Elasticsearch

Solidity

Keras

欢迎关注，转发～

欢迎长按二维码

关注本号