#今天被催更了,于是我立马抽空写了第3篇。 接着往期的2篇继续,一步步动手做: 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的相关配置代码可以参考往期文章: 这个时候,我们启动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.pydef 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文件 详情可以参考: 这边把上次实现过的代码,书写出一个python模块,以供其他文件调用。 在docker镜像中启动伪终端,进入app目录,输入: python app.py 上传测试图片试试: 成功返回识别结果,至此,一个迷你的识别手写字web全栈应用已经完成。 下一篇文章将完善前端,实现用户通过鼠标或者触摸屏手势输入任意数字,立即识别结果。 相关源代码,可以留言获取。 近期热文: 码字不易,开启新的打赏方式: 本公众号定期更新关于 设计师、程序员发挥创意 互相融合的指南、作品。 主要技术栈: nodejs、react native、electron Elasticsearch Solidity Keras |
|
来自: Mixlab交叉学科 > 《待分类》