Sapphire开发日志（十四）——界面开发8：工作台界面开发与完善

ellyi

已于 2024-06-24 03:14:47 修改

阅读量563

点赞数 28

分类专栏：创新实训文章标签：服务器 react.js 前端框架 numpy ui

于 2024-06-24 02:58:24 首次发布

本文链接：https://blog.csdn.net/ellyi/article/details/139910183

版权

创新实训专栏收录该内容

16 篇文章 0 订阅

订阅专栏

概述

在Sapphire数据标注平台中，工作台界面是整个系统的核心功能。它不仅是用户进行数据标注的主要场所，还集成了数据管理、模型推理和结果展示等多项功能。本文将详细介绍工作台界面的开发与完善过程，并结合之前的推理数据封装与控制功能，分析其实现细节。

界面概览

工作台界面主要由以下几个部分组成：

任务信息展示
工具栏
图片展示区
结果栏
图片切换

任务信息展示

任务信息展示区域用于显示当前任务的基本信息，包括任务名称和数据集ID。这些信息通过查询参数或本地存储获取，并在组件加载时进行初始化设置。

const [datasetId, setDatasetId] = useState(localStorage.getItem("workingDatasetId"));

useEffect(() => {
  if (searchParams.get("datasetId")) {
    setDatasetId(searchParams.get("datasetId"));
    localStorage.setItem("workingDatasetId", searchParams.get("datasetId"));
  }
}, [searchParams]);

工具栏

工具栏提供了点选模式、框选模式、撤销、重做和确认等操作工具。点选模式允许用户在图片上点击以标记或删除区域，框选模式则允许用户拖动鼠标框选区域。撤销和重做功能允许用户对标注操作进行回退和恢复，确认功能则将标注结果保存到结果栏中。

工具栏的实现涉及到对用户操作的捕获和处理，通过 useContext 来管理全局状态。

const {
  click: [click, setClick],
  clicks: [clicks, setClicks],
  // 其他状态变量
} = useContext(AppContext)!;

图片展示区

图片展示区是用户进行标注操作的主要区域。用户可以在此区域内进行点击或拖动操作，以标注图片中的目标区域。该区域还集成了模型推理功能，当用户完成标注操作后，系统会自动调用模型进行推理，并在图片上展示推理结果。

图片展示区的核心是 Stage 组件，它负责图片的渲染和用户交互。以下是图片选择和处理的部分代码：

const handleSelectedImage = async (data: File | string, embe: string, options?: { shouldNotFetchAllModel?: boolean; shouldDownload?: boolean }) => {
  // 处理图片选择逻辑
};

结果栏

结果栏用于展示已标注的区域，并提供删除和选择类型的功能。用户可以在结果栏中查看所有已标注的区域，并对其进行编辑或删除操作。

结果栏通过 setStickers 来管理已标注的区域，并通过 useContext 共享状态。

const handleDelete = () => {
  setStickers(stickers.filter((_, index) => index !== activeSticker));
  setActiveSticker(0);
};

在这里插入图片描述

图片切换

图片切换功能允许用户在不同的图片之间进行切换。用户可以点击上一张或下一张按钮来切换图片，或者在全局任务展示栏中选择特定图片进行切换。每次切换图片时，系统会保存当前图片的标注结果，并加载新的图片和嵌入数据。

图片切换的实现涉及到状态的更新和数据的上传：

const handleNextImg = () => {
  upLoadData(nowPos, stickers.map((e) => e.stickerData));
  setPos(nowPos + 1);
};

const handleLastImg = () => {
  upLoadData(nowPos, stickers.map((e) => e.stickerData));
  setPos(nowPos - 1);
};

关键实现

状态管理

工作台界面涉及到大量的状态管理，包括图片数据、标注数据、模型状态等。通过使用React的 useState 和 useContext，我们能够高效地管理这些状态，并在不同组件之间共享数据。

以下是部分状态管理的代码示例：

const {
  click: [click, setClick],
  clicks: [clicks, setClicks],
  // 其他状态变量
} = useContext(AppContext)!;

模型推理

模型推理是工作台界面的核心功能之一。当用户在图片上进行标注操作后，系统会调用ONNX模型进行推理，并将推理结果展示在图片上。推理过程涉及到模型加载、数据预处理、推理执行和结果解析等多个步骤。

以下是模型推理的部分代码：

const runModel = async () => {
  const feeds = modelData({ clicks, tensor, modelScale, last_pred_mask: predMask });
  const results = await model.run(feeds);
  const output = results[model.outputNames[0]];
  const svgStr = traceOnnxMaskToSVG(output.data, output.dims[1], output.dims[0]);
  setSVG(svgStr);
  setMask(output.data);
};

图片切换与结果保存

在图片切换过程中，我们需要保存当前图片的标注结果，并加载新的图片和嵌入数据。通过 useEffect 钩子，我们能够在图片URL或嵌入数据URL变化时自动进行这些操作。

以下是图片切换与结果保存的部分代码：

useEffect(() => {
  if (imgUrl && embeddingUrl) {
    handleSelectedImage(imgUrl, embeddingUrl, { shouldDownload: false, shouldNotFetchAllModel: true });
    setStickers([]);
  }
}, [imgUrl, embeddingUrl]);

任务信息与数据集管理

在工作台界面中，任务信息与数据集管理是非常重要的部分。我们通过 useQuery 来获取任务和数据集的信息，并在界面中进行展示和管理。

以下是任务信息和数据集管理的部分代码：

const {
  isError: taskIsError,
  isFetching: taskFetching,
  data: tasks,
  isSuccess: taskSuccess,
  error: taskError,
} = useQuery({
  queryKey: [
    annotate_url +
      `/${
        searchParams.get("datasetId") ??
        localStorage.getItem("workingDatasetId")!
      }`,
    { params: { size: 10 } },
  ],
  queryFn: queryFn,
});