# bd_cv3_webserver_demo **Repository Path**: anjiang2020_admin/bd_cv3_webserver_demo ## Basic Information - **Project Name**: bd_cv3_webserver_demo - **Description**: 一个webserver的demo - **Primary Language**: PHP - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 3 - **Created**: 2020-04-02 - **Last Updated**: 2021-11-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # computer vision webserver project [![db3_cv3_webserver_dome compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/anjiang2016/db_cv3_webserver_demo) - cv3's webserver_demo(php) 计算机视觉的网络服务器项目php实现后端+python实现智能模型 - 远程演示页面：http://152.136.201.129/bd_cv3_webserver_demo/web/documentroot/demo_cv.php【待完成 后台模型运行功能】 - 这里是im2latx前向计算流程序，建议同学看一下：https://gitee.com/anjiang2020/bd_cv3_webserver_demo/blob/master/web/documentroot/im2latex/infer.py - 首次更新日期20200401 ## 更新计划： 1. 输入图片改为拖动上传的方式，检测结果以更多的形式返回，如返回整个图片，还返回分割后的图片。 2. 添加其他简单api的支持 ## 内容列表 - [背景信息](#背景信息) - [技术实现](#技术实现) - [安装方法](#安装方法) - [使用说明](#使用说明) - [接口设计](#接口设计) - [开发日记](#开发日记) - [相关仓库](#相关仓库) - [维护者](#维护者) - [如何贡献](#如何贡献) - [使用许可](#使用许可) ## 背景信息 `智能模型的部署方法`主要有两种，一种是在互联网平台上，做成webserver的方式。一种是在生产环境中，模型需要布置在嵌入式的平台上。 > 本项目演示了互联网公司的一般部署方式：webserver的方式。 > 注意： 。 这个仓库的目标是： 1. 项目目的：完成一个webserver的部署，实现一个类似百度ai里的接口。 例如：https://ai.baidu.com/ai-doc/IMAGERECOGNITION/Xk3bcxdum 2. 学会一个标准接口的编写，包括错误码的定义。 3. 学会用curl,python 等多种方法去调用我们写好的接口。 4. 学会给我们的服务器设置鉴权方式，为商业化做好准备。 ## 技术实现 主要在后端部分，计划用两种技术完成。一种是php+python,一种完全用python ## 安装 1. 需要安装apache请确保你本地安装了它。 ```sh $ sudo apachectl -k stop & sudo apachedtl -k start ``` 2. 在apache服务器上配置php。 3. 将服务器的跟目录设置为 本目录的[your_path]/web/documentroot/。设置好权限。chmod 777 /your_root_dir/ 4. 文件/web/documentroot/demo_cv_api.php负责返回json格式的数据。这是互联网企业制作网络api的一个基本demo。使用者调用这些接口得时候，可以使用/web/documentroot/python_tool里的代码，这里提供了curl的方式(curl.sh)和python的方式(post_example.py)。这部分的具体使用，调试方法可查看使用说明和接口设计。 5. 这套代码里有两个模型，east和im2latex,这两个模型的实现代码分别在web/documentroot/EAST-tensorflow_zmm_modify，和web/documentroot/im2latex里。 demo_cv_api.php里有调用这两个模型的方法。具体可查看使用说明 6. 在上步骤运行成功之后，打开127.0.0.1/demo_cv.php，在这个页面，可以使用east/im2latex/transformer模型来处理我们提交的图片,并查看演示效果。 #### 以下为选做内容 7. 安装mysql,并用以下语句建立数据库和表。建好表后，在表内适当的添加一下内容。 ```sh #建立数据库zmm CREATE DATABASE `zmm`; #在zmm中建立表前，先选中zmm use zmm; #建立数据表baiduclass CREATE TABLE `baiduclass` ( `id` int NOT NULL AUTO_INCREMENT, `info` text, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=62 DEFAULT CHARSET=utf8 建立好之后，表结构应该如下： +-------+------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------+------+------+-----+---------+----------------+ | id | int | NO | PRI | NULL | auto_increment | | info | text | YES | | NULL | | +-------+------+------+-----+---------+----------------+ #建立表baiduclasshomework CREATE TABLE `baiduclasshomework` ( `id` int NOT NULL AUTO_INCREMENT, `title` tinytext NOT NULL COMMENT '课程资料文章的标题', `content` text NOT NULL COMMENT '文章内容', `author` tinytext NOT NULL COMMENT '作者', `update_time` datetime DEFAULT NULL COMMENT '更新时间', `create_time` datetime DEFAULT NULL COMMENT '创建时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=30 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci 表结构如下： +-------------+----------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------------+----------+------+-----+---------+----------------+ | id | int | NO | PRI | NULL | auto_increment | | title | tinytext | NO | | NULL | | | content | text | NO | | NULL | | | author | tinytext | NO | | NULL | | | update_time | datetime | YES | | NULL | | | create_time | datetime | YES | | NULL | | +-------------+----------+------+-----+---------+----------------+ #建立表baiduclassoutziliao CREATE TABLE `baiduclassoutziliao` ( `id` int NOT NULL AUTO_INCREMENT, `title` tinytext NOT NULL COMMENT '课程资料文章的标题', `content` text NOT NULL COMMENT '文章内容', `author` tinytext NOT NULL COMMENT '作者', `update_time` datetime DEFAULT NULL COMMENT '更新时间', `create_time` datetime DEFAULT NULL COMMENT '创建时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci 表结构如下： +-------------+----------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------------+----------+------+-----+---------+----------------+ | id | int | NO | PRI | NULL | auto_increment | | title | tinytext | NO | | NULL | | | content | text | NO | | NULL | | | author | tinytext | NO | | NULL | | | update_time | datetime | YES | | NULL | | | create_time | datetime | YES | | NULL | | +-------------+----------+------+-----+---------+----------------+ #建立表baiduclassziliao CREATE TABLE `baiduclassziliao` ( `id` int NOT NULL AUTO_INCREMENT, `title` tinytext NOT NULL COMMENT '课程资料文章的标题', `content` text NOT NULL COMMENT '文章内容', `author` tinytext NOT NULL COMMENT '作者', `update_time` datetime DEFAULT NULL COMMENT '更新时间', `create_time` datetime DEFAULT NULL COMMENT '创建时间', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=13 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci 表结构如下： +-------------+----------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------------+----------+------+-----+---------+----------------+ | id | int | NO | PRI | NULL | auto_increment | | title | tinytext | NO | | NULL | | | content | text | NO | | NULL | | | author | tinytext | NO | | NULL | | | update_time | datetime | YES | | NULL | | | create_time | datetime | YES | | NULL | | +-------------+----------+------+-----+---------+----------------+ #建立表huaweiclass CREATE TABLE `huaweiclass` ( `id` int NOT NULL AUTO_INCREMENT, `info` text, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 表结构如下： +-------+------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------+------+------+-----+---------+----------------+ | id | int | NO | PRI | NULL | auto_increment | | info | text | YES | | NULL | | +-------+------+------+-----+---------+----------------+ ``` 8. 启动apache,然后在浏览器输入127.0.0.1/index.php,打开成功时，应该能看到如下主页面。![主页index.php](https://images.gitee.com/uploads/images/2020/0409/105756_8f87c69e_7401441.png "web_server_readme_1.png") 9. 点击主页面的[案例演示]，会跳转到demo_cv.php，再这个页面，可以使用east/im2latex/transformer模型来处理我们提交的图片,并查看演示效果。![demo_cv页面演示](https://images.gitee.com/uploads/images/2020/0409/110059_03230128_7401441.png "web_server_readme_demo_cv.png") ## 使用说明 1. 使用demo_cv_api.php和demo_cv.php前，需要先成功运行east模型和im2latex模型，可以检查如下命令是否运行成功。这两个模型的实现代码分别在web/documentroot/EAST-tensorflow_zmm_modify，和web/documentroot/im2latex里。 ```sh python EAST-tensorflow_zmm_modify/demo_use.py https://https://img2018.cnblogs.com/blog/1291224/201810/1291224-20181022204302682-772722177.png # 这里infer.py是我重新写的前向计算过程，会有更加清晰的计算流。 python im2latex/infer.py https://img.mianfeiwendang.com/pic/1f296848e34b74eec54b5d9f/5-810-jpg_6-1080-0-0-1080.jpg ``` 2. 对于demo_cv.php页面，这个页面负责返回页面结果，鼠标操作查看结果。这个页面含有两个模型：east和im2latex.目前完成了east【已完成】,im2latex马上完成。实验east模型的时候，可以用这一张网络图片：https://img2018.cnblogs.com/blog/1291224/201810/1291224-20181022204302682-772722177.png，测试im2latex模型的时候，可用https://img.mianfeiwendang.com/pic/1f296848e34b74eec54b5d9f/5-810-jpg_6-1080-0-0-1080.jpg 配置east模型时，可以先在命令行把模型前向计算做好： ```sh $ python EAST-tensorflow_zmm_modify/demo_use.py [image_url] # east前向处理过程。 ``` 3. 由于本代码设计到从网络下载图片，所有要求服务器上的权限要打开。打开的方式sudo chmod 777 [your_dir] .我遇到这个坑后，很久才发现解决办法。 4. 目前im2latex模型的前向推理代码我重新整理了计算流，重新写了一下。这样看起来，计算流很多。但是模型还没有训练完成，所以我这里加载的是初始化的参数。你会看到运行结果不好。 ## 接口设计 ```sh 百度cv3网络API接口设计： 1 接口访问方式：http://localhost/demo_cv_api.php?access_token=houchangligong 2 返回的结果： 下面的数据是检测一张图片的返回结果，img_url是图片路径，net_cost是网络前向计算的耗时，nms_cost是nms部分的耗时。result中包含了100个quad,其中每个quad包含一个confidence和一个quadrangle,一个quadrangel包含4个顶点p1,p2,p3,p4. json格式： { "info": "xxx", "model_type":"east/im2latx", "output": { "net_cost":1, "nms_cost":24.6, "img_url":"https://https://img2018.cnblogs.com/blog/1291224/201810/1291224-20181022204302682-772722177.png", "result": { "quad0": { "quadrangle": { "p2": "263,266", "p3": "264,274", "p1": "225,269", "p4": "226,277" }, "confidence": "0.46699054196234535" }, "quad1": { "quadrangle": { "p2": "263,266", "p3": "264,274", "p1": "225,269", "p4": "226,277" }, "confidence": "0.46699054196234535" }, ... "quad100": { "quadrangle": { "p2": "263,266", "p3": "264,274", "p1": "225,269", "p4": "226,277" }, "confidence": "0.46699054196234535" }, } } } : 成功状态 { "msg":"OK", "code":200, “其他成功时得代码" } 识别不出来 { "msg":"UNRECOGNIZED", "code":200, "img_url": "xxx", "data":null } 其他错误 { "msg":"SERVER_ERROR", "code":500, "img_url": "xxx", "data":null } 无效url { "msg":"INVALID_URL", "code":200, "img_url": "xxx", "data":null } ``` ## 接口访问方式 crul的方式： ```sh cd python_tool chmod +x ./curl.sh #./curl.sh [access_token 访问许可，例如’访问许可‘的为字符串：houchangligong]，则可用下式访问： ./curl.sh houchangligong east # 利用后厂理工的east模型 ./curl.sh houchangligong im2latex # 利用后厂理工的im2latex模型 ``` python的方式： ```sh cd python_tool # 用python的post 调用east模型的 web api python post_example.py # 用python的post 调用im2latex模型的web api python post_example_im2latex.py ``` 返回的json过于复杂时，可把json复制到这个页面进行查看：https://www.sojson.com ## 开发日记 - 截止20200401,这里基本完成了一个php+python版本。这个版本还需要完成得细节如下： - 图片下载，保存，模型识别，将结果显示，并返回json,这个过程中得每个模块都可以运行了。但是中间有些模块没有完全打通。 - 目前只实现了EAST模型，还没有实现im2latex模型 本仓库包含以下内容： - 截止20200403： - 添加了下载文件到服务器目录。碰到的主要的坑：目录权限问题。一位是apache的httpd.conf里更改，最后用chmod 777 ~/web/documentroot解决了 - 实现了east模型识别网络图片。打通了网络图片->本地图片->模型处理->结果图片显示。 - 待实现内容：json接口的实现。 - 截止20200407: - 实现了json接口demo_cv_api.php。使用web/documentroot/python_tool文件夹下的curl.sh和post_example.py均可完成对本接口的实用。 - 鉴权方式 - 返回错误码【已经完成设计，demo_cv_api.php中待实现，】 - im2latex模型【待实现】 - 截止20200408: - 实现了im2latex模型的inference部分。模型参数是初始化的，输入一张图片，输出图片对应的latex。代码在web/documentroot/im2latex文件夹下，模型需要的环境还需要读者自己配备，我后续会完善 - 修改了demo_cv.php 和demo_cv_api.php,实现了网页端和api端的功能 - ckeditor没改好，下一步把公式显示出来 - 待优化一下前端显示 - 待把训练好im2latex的模型用上。 - 把数据库部分整理出来上传上来。 - 截止20200409: - 完成数据库部分的整理上传。 - 待实现：富文本ckeditor的加载和显示问题，前段显示问题，im2latex模型上传。 ## 徽章 如果你的项目遵循 Standard-Readme 而且项目位于 Github上，非常希望你能把这个徽章加入你的项目。 它可以更多的人访问到这个项目，而且采纳 Stand-README。 加入徽章**并非强制的**。 [![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme) 为了加入徽章到 Markdown 文本里面，可以使用以下代码： ``` [![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme) ``` ## 相关仓库 - [EAST](https://)-与项目配套的目标检测的代码 - [im2latex](https://)-与项目配套的图片序列处理的代码 ## 维护者 [@赵明明](https://github.com/anjiang2016). ## 如何贡献 非常欢迎你的加入! [提一个Issue](https://github.com/RichardLitt/standard-readme/issues/new) 或者提交一个 Pull R equest. ### 贡献者 感谢以下参与项目的人： ## 使用许可 [HCT](LICENSE) © 赵明明