1. 概要

最近在学习如何将目标检测的结果推送到网页上进行可视化，经过一系列的搜寻，查找，最终准备基于华为的presenter库进行Web页面可视化。
华为的presenter库分为两个，一个是presenterserver，一个是presenteragent，前者是用来搭建局域网网站同时开启监听端口，后者是在运行目标检测模型时，打包检测数据用来传输到presenterserver的库，两个库介绍链接如下：（可以不用去管，博主会提供相应改好的文件）
presenteragent库
presenterserver库

最终基于presenter库，我们通过以下两步即可实现检测结果于Web界面的可视化：

1. 用于展示Web界面的设备（可以是你跑目标检测程序的主机，或者是另外一个在同一局域网内的设备）运行presenteragent库中的Presenter Server源码，该源码在局域网内创建通过指定接口(如10.0.0.2:7007)创建Web页面，同时通过另一指定接口(如10.0.0.2:7006)进行消息的监听，监听得到的消息会传给Web界面。
2. 运行目标检测程序的设备使用presenteragent库中的Presenter agent源码，将消息传输至监听的接口，如1中指定的10.0.0.2:7006，传输成功后结果即可可视化。

注意，如果你用的是同两个个设备，一个进行目标检测，一个进行Web界面可视化，则两者之间需要保持在同一局域网。如果你用的是同一个设备既进行目标检测，也进行Web界面可视化，则无需在意ip设置。

本章节只进行了使用presenterserver进行网页的搭建，因此只会使用到presenterserver库。
需要设备：PC宿主机（Linux系统）。
整体流程如下：
1.下载presenterserver库并安装好依赖环境
2.运行presenter_server.py文件，查看结果

2. presenterserver库

2.1 介绍

Presenter Server是展示推理结果的软件包，该软件基于python3实现，并用到了第三方web框架tornado，以及底层通信框架protobuf。

Presenter Server支持图片模式和视频模式。图片模式展示单张图片，视频模式以图片流的方式展示连续图片。Presenter server通过channel来标记不同的数据源，在浏览器里通过Create按钮添加channel，Delete进行删除，默认支持两路channel，分别是image和video。

Presenter Server 与Presenter Agent和Chrome的消息通信如下图所示，Chrome上发起创建channel的操作，Presenter Server发送数据到指定channel，Chrome打开此channel，观察推理结果。

2.2 下载presenterserver库

下载方式有2个

2.2.1.直接从华为官网下载

git clone https://gitee.com/ascend/samples.git

进入如下目录：

presenterserver即是我们需要的server文件夹，之后可以在vscode中打开

2.2.2 从我提供的百度网盘链接中下载

presenterserver百度网盘链接：里面有c++和python对应的版本
通过网盘分享的文件：web_present.zip
链接: https://pan.baidu.com/s/1qSQyt9ea4iN_eYJI_MpSLg?pwd=1234 提取码: 1234

3安装相关依赖：

1.首先安装虚拟环境，使用conda进行虚拟环境配置
如果没装anaconda，请参考此链接
2.配置python环境

conda create --name myenv python=3.8 #myenv是环境名称（可自定义） python=3.8指定 Python 版本（可改为 3.7/3.9 等）
conda activate myenv #激活环境

pip install tornado==5.1.0
pip install protobuf==3.11.3

4 运行presenterserver库并查看构建的Web

1. 进入2中打开的vscode界面，选择3中创建的虚拟环境（部分信息涉及他人，故需打码处理）
   

2. 配置网络ip地址（暂时按默认的即可）
   

3. 点开presenter_server.py,运行，输出如下：
   点开chrom或其他浏览器，输入http://127.0.0.1:7007
   界面成功打开

5. 下一章节

博主接下来有时间再继续写。

6.总结:

本章节讲述了如何使用华为的presenterserver库打开Web网站以供目标检测结果的可视化展示，之后的第二第三章节将会讲述基于python与基于c++的presenteragent库的时候，通过presenteragent库将数据传输给presenterserver，最后可视化展示。

最终博主经过修改代码后的可视化结果如下：
开启界面：

可视化结果展示：