1 概要

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

最终基于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设置。

本章节在python环境下进行数据的上传，在Web端进行可视化展示，将会使用到华为的官方的presenteragent库，其链接如下：

需要设备：PC宿主机（Linux系统）。
整体流程如下：
1.下载python版本的presenteragent库并安装好依赖环境。
2.使用presenteragent库提供的接口函数，打包数据并上传Web端进行可视化展示。

2 presenteragent库

2.1 介绍

Presenter Agent提供一系列API，用户可以调用这些API向Presenter Server推送媒体消息，并在浏览器中查看。当前支持JPEG格式图片的推送。
调用流程如下所示：

1. App调用OpenChannel函数打开与Presenter Server间的通道。
2. App调用SendMessage函数在该通道上推送媒体消息。推送消息时， 支持在推送的图片上画矩形框。使用时需要将框的左上、右下点的坐标、框的标题设置到PresentImageRequest对象中。
3. 所有图片发送完成后，App调用CloseChannel函数释放分配的资源。

对应第一章节的图的前半部分流程，即：

2.2 下载presenteragent库

下载方式有2个

2.2.1 直接从华为官网下载

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

进入如下目录：

presenteragent即是我们需要的agent文件夹，之后可以放置在你的工程文件夹中：

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

presenteragent百度网盘链接：里面有python对应的版本
通过网盘分享的文件：presenteragent
链接: https://pan.baidu.com/s/1fmZiYVPgZIYXQSjNAFp70w?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

3.配置你环境里面需要的包，一般工程里面回有requirements.txt的，比如yolo11直接运行:

pip install ultralytics

注意，可能会出线包版本不兼容的现象，可以文一下deepseek或者gpt，按照提示降级或者改一下函数即可。

4 运行presenteragent库传输检测结果

1. 进入2中打开的vscode界面，选择3中创建的虚拟环境（部分信息涉及他人，故需打码处理）
   
2. 配置网络ip地址（暂时按默认的即可）
   在工程目录下创建para,.conf文件，其内容如下编写：
   
   param.conf内容如下：

[baseconf]
# A socket server address to communicate with presenter agent
presenter_server_ip=127.0.0.1

# The port of presenter agent and server communicate with
presenter_server_port=7006

#the ip in presenter server view web url 
presenter_view_ip=127.0.0.1


#view entry label in presenter server view web
channel_name=pictures

#the data type that send to presenter server from agent, 0:image, 1:video 
content_type=1

3. 编写测试程序，上传数据于Web中
   测试程序命名为present_test.py，内容如下：
   

import sys
import os
import cv2
from presenteragent import presenter_datatype
import presenteragent.presenter_channel as presenter_channel
import time


MASK_DETEC_CONF="param.conf"
CAMERA_FRAME_WIDTH = 1024
CAMERA_FRAME_HEIGHT = 1024


def load_imgspath_from_folder(folder_path):
    """
    从指定文件夹中读取所有支持的图片文件
    
    参数:
        folder_path (str): 包含图片的文件夹路径
        
    返回:
        list: 包含所有成功加载的PIL.Image对象的列表
    """
    supported_formats = ('.jpg', '.jpeg')
    file_path = []
    
    # 检查文件夹是否存在
    if not os.path.isdir(folder_path):
        print(f"错误：文件夹 '{folder_path}' 不存在")
        return file_path
    
    # 遍历文件夹中的文件
    for filename in os.listdir(folder_path):
        file_path.append(os.path.join(folder_path, filename))
    
    print(f"\n总共加载了 {len(file_path)} 张图片")
    return file_path





if __name__ == "__main__":

    imgs_path = r"/home/kc401/LBH/All_datasets/BBox-SSDD/images/GT" #换成你的图片数据集路劲用于测试上传功能
    imgs = load_imgspath_from_folder(imgs_path)
    detection_result_list = []
    detection_item = presenter_datatype.ObjectDetectionResult()
    detection_item.confidence = 0.5
    #标注框 x1,y1,x2,y2
    detection_item.box.lt.x = int(1)
    detection_item.box.lt.y = int(1)
    detection_item.box.rb.x = int(20)
    detection_item.box.rb.y = int(20)
    detection_item.result_text = str("car")
    detection_result_list.append(detection_item)

	 #获取之前的文件配置参数
    chan = presenter_channel.open_channel(MASK_DETEC_CONF)

    for i,single_img in enumerate(imgs):
        img = cv2.imread(single_img)
        if img is None:
            print(f"Failed to read image: {single_img}")
            continue
        # 将图像转换为二进制 JPEG 数据
        ret, jpeg_image = cv2.imencode('.jpg', img)
        if not ret:
            print(f"Failed to encode image: {single_img}")

        print(i)
        time.sleep(0.001)  # 暂停2.5秒
        chan.send_detection_data(CAMERA_FRAME_WIDTH, CAMERA_FRAME_HEIGHT,
                                 jpeg_image, detection_result_list)

在运行章节1中程序的前提下，运行这个python文件。
点开chrom或其他浏览器，输入http://127.0.0.1:7007，点击refresh

点击pictures进入查看：（进入查看后可能得重新运行一下present_test.py，重新flush一下图片）

可以看到图片成功上传。

5 下一章节

下一章节关于C++如何使用presenter库，面对不同架构的硬件时涉及到交叉编译，过程会繁琐一点，博主有时间再继续更新。

6 总结

本章节讲述了如何使用华为的presenteragent库(python版本)上传检测结果，下一章节将会讲述对于C++版本的prensenter库，如何交叉编译，在不同平台上运行。

7 章节链接

yolo11目标检测结果Web可视化-----基于华为的presenter库 (1)目标检测结果展示界面的开启
yolo11目标检测结果Web可视化-----基于华为的presenter库 (3)目标检测结果上传Web界面（c++版本）