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

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

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

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

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

 1   目录结构

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

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

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

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

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

test是一些测试图片;

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

   前端代码

新建一个简单的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

(0)

相关推荐