Parcel 构建 Vue 脚手架 & 创建手写数字识别 demo
发布于 3 个月前 作者 zmecust 579 次浏览 来自 分享

演示地址

项目地址

演示效果

C$T(VBJHZV)U}_F1(9N7%9D.png

功能说明

  • Parcel 构建 Vue 脚手架并实现手写数字识别效果(鼠标在左侧方框写入数字,点击识别即可)

运行环境

  • node8
  • python3

确保全局安装 parcel-bundler,如果没安装请运行 npm install -g parcel-bundler;确保安装 python3 以及 tensorflow、flask、flask_cors、numpy 模块,python 模块可以通过 pip install 安装。windows 安装python 推荐安装 Anaconda。

本地配置

  • npm install
  • parcel index.html
  • python api.py

线上配置

运行

  • npm install
  • parcel build index.html

nginx 配置

server {
        listen 8080;

        server_name _;

        root /var/www/html/numerical-recognition/dist/; // 项目入口地址

        index index.html index.htm index.php index.nginx-debian.html;

        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                # try_files $uri $uri/ =404;
                try_files $uri $uri/ /index.html;
        }
}

supervisor 进程守护

python 服务由 Supervisor 启动并维护,设置参数如下:

[program:numerical-recognition]
process_name=%(program_name)s
command=python3 /var/www/html/numerical-recognition/api.py
autostart=true
autorestart=true
user=root
numprocs=1
redirect_stderr=false
stdout_logfile=/var/log/supervisor/numerical-recognition.log

如果启动失败,可能需要执行:unlink /run/supervisor.sock

  • supervisord -c /etc/supervisor/supervisord.conf //起服务,注意 supervisor 配置文件所在目录
  • supervisord shutdown //关闭服务
  • supervisord reload //重启服务

项目布局

.
├── dist                                        // 项目打包路径
├── mnist                                       // 训练模型
│   ├── data                                    // 权重和偏置变量的存储路径
│   ├── convolutional.js                        // 卷积神经网络训练模型
│   ├── model.py                                // 变量和模型的创建
│   └── regression.py                           // 前馈神经网络训练模型
├── src                                         // 前端目录
│   ├── router
│   │   └── index.js                            // 路由配置
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件,加载各种公共组件
│   ├── canvas.js                               // 手写数字生成
│   └── MainPage.vue                            // 首页
├── index.html                                  // 入口 html 文件
├── api.py                                      // api 配置文件
├── .babelrc                                    // 设置转码的规则
└── postcss.config.js                           // 转换 CSS 
.

参考

4 回复

Chrome 浏览器 ,点了识别没反应。 http://47.52.156.68:8080/#/

@anuxs 好吧 应该是崩溃了 谢谢提醒

识别率好低哦

@qingmingsang 额 卷积的识别率还可以吧 就数字6不好识别

回到顶部