自己动手做一个识别手写数字的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全栈应用已经完成。

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

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