crowd-instance-segmentation

用于标识一个图像中特定对象的各个实例并为每个标记的实例创建彩色叠加层的小部件。

请参阅中使用此 Crowd HTML 元素的 HTML 模板的交互式示例CodePen.

以下是使用<crowd-instance-segmentation>. 复制以下代码，并将其保存到具有扩展名的文件中。.html. 在任何浏览器中打开该文件，以进行预览并与该模板进行交互。

使用类似于以下内容的模板，允许员工添加自己的类别（标签）。

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <crowd-instance-segmentation
    id="annotator"
    name="myTexts"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Click Instructions to add new labels."
    labels="['placeholder']"
  >
    <short-instructions>
      <h3>Add a label to describe each type of object in this image.</h3>
      <h3>Cover each instance of each object with a segmentation mask.</h3>
      <br>
      <h3>
        Add new label
      </h3>
      <crowd-input name="_customLabel" id="customLabel"></crowd-input>
      <crowd-button id="addLabel">Add</crowd-button>
      
      <br><br><br>
      <h3>
      Manage labels
      </h3>
      <div id="labelsSection"></div>
    </short-instructions>
    
    <full-instructions>
      Describe your task in more detail here.
    </full-instructions>
  </crowd-instance-segmentation>
</crowd-form>

<script>
  document.addEventListener('all-crowd-elements-ready', function(event) {
    document.querySelector('crowd-instance-segmentation').labels = [];  
  });
  
  function populateLabelsSection() {
    labelsSection.innerHTML = '';
    annotator.labels.forEach(function(label) {
      const labelContainer = document.createElement('div');
      labelContainer.innerHTML = label + ' <a href="javascript:void(0)">(Delete)</a>';
      labelContainer.querySelector('a').onclick = function() {
        annotator.labels = annotator.labels.filter(function(l) {
          return l !== label;
        });
        populateLabelsSection();
      };
      labelsSection.appendChild(labelContainer);
    });
  }

  addLabel.onclick = function() {
    annotator.labels = annotator.labels.concat([customLabel.value]);
    customLabel.value = null;
    
    populateLabelsSection();
  };
</script>

属性

此元素支持以下属性。

header

要在图像上方显示的文本。通常是一个针对工作人员的问题或简单说明。

labels

一个 JSON 格式的字符串数组，其中每个字符串都是工作人员可以分配给图像中一个对象实例的标签。工作人员可以通过在工具中的标签下选择“添加实例”来为每个相关实例生成不同的叠加颜色。

名称

此小部件的名称。它用作标记数据（以输出格式表示）的键值。

src

要标记的图像的 URL。

initial-value

一个 JSON 对象，其中包含先前实例分割作业的颜色映射以及到该先前作业输出的覆盖图像的链接。当您希望工作人员验证先前标记作业的结果并在必要时进行调整时，请包括此内容。

属性将显示如下：

  initial-value="{
    "instances": [
      {
        "color": "#2ca02c",
        "label": "Cat"
      },
      {
        "color": "#1f77b4",
        "label": "Cat"
      },
      {
        "color": "#d62728",
        "label": "Dog"
      }
    ],
    "src": {{ "S3 file URL for image" | grant_read_access }}
  }"

元素层次结构

此元素具有以下父元素和子元素。

区域

此元素支持以下区域。

full-instructions

有关如何执行图像分割的一般说明。

short-instructions

在醒目位置显示的重要的任务特定说明。

输出

此元素支持以下输出。

labeledImage

一个 JSON 对象，其中包含标签的 Base64 编码的 PNG。

实例

一个 JSON 数组，其中包含具有实例标签和颜色的对象。

inputImageProperties

一个 JSON 对象，它指定正在由工作人员注释的图像的维度。此对象包含以下属性。

[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 533,
        "width": 800
      },
      "instances": [
        {
          "color": "#1f77b4",
          "label": "<Label 1>": 
        },
        {
          "color": "#2ca02c",
          "label": "<Label 1>": 
        },
        {
          "color": "#ff7f0e",
          "label": "<Label 3>": 
        },
      ],
      "labeledImage": {
        "pngImageData": "<Base-64 Encoded Data>"
      }
    }
  }
]

另请参阅

有关更多信息，请参阅下列内容。