crowd-image-classifier

用于对图像进行分类的小部件。使用以下支持的图像格式之一：APNG、BMP、GIF、ICO、JPEG、PNG、SVG。图像没有大小限制。

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

以下是使用 <crowd-image-classifier> 元素的图像分类模板的示例。复制以下代码，并保存到具有 .html 扩展名的文件中。在任何浏览器中打开该文件，进行预览并与该模板进行交互。

属性

此元素需要以下属性。

categories

一个 JSON 格式的字符串数组，其中每个字符串都是工作人员可以分配给图像的一个类别。您应包含“其他”作为一个类别，以便工作人员可以提供答案。您最多可指定 10 个类别。

header

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

name

此小部件的名称。它用作小部件输入（以输出格式表示）的密钥。

叠加

要叠加在源图像上的信息。这用于界限框、语义分割和实例分割任务的验证工作流。

它是一个 JSON 对象，其中包含一个以 camelCase 中的任务类型名称为键的对象。该键的值是包含上一任务中的标签和其他必要信息的对象。

以下示例显示具有用于验证界限框任务的属性的 crowd-image-classifier 元素：

<crowd-image-classifier
    name="boundingBoxClassification"
    header="Rate the quality of the annotations based on the background section 
       in the instructions on the left hand side."
    src="https://i.imgur.com/CIPKVJo.jpg"
    categories="['good', 'bad', 'okay']"
    overlay='{
        "boundingBox": {
            labels: ["bird", "cat"], 
            value: [
                {
                  height: 284,
                  label: "bird",
                  left: 230,
                  top: 974,
                  width: 223
                },
                {
                  height: 69,
                  label: "bird",
                  left: 79,
                  top: 889,
                  width: 247
                }
            ]
        },
    }'
> ... </crowd-image-classifier>

语义分割验证任务将按照下面的方式使用 overlay 值：

<crowd-image-classifier
  name='crowd-image-classifier'
  categories='["good", "bad"]'
  src='URL of image to be classified'
  header='Please classify'
  overlay='{
    "semanticSegmentation": {
      "labels": ["Cat", "Dog", "Bird", "Cow"],
      "labelMappings": {
        "Bird": {
          "color": "#ff7f0e"
        },
        "Cat": {
          "color": "#2ca02c"
        },
        "Cow": {
          "color": "#d62728"
        },
        "Dog": {
          "color": "#2acf59"
        }
      },
      "src": "URL of overlay image",
    }
  }'
> ... </crowd-image-classifier>

实例分割任务将按照下面的方式使用 overlay 值：

<crowd-image-classifier
  name='crowd-image-classifier'
  categories='["good", "bad"]'
  src='URL of image to be classified'
  header='Please classify instances of each category'
  overlay='{
    "instanceSegmentation": {
       "labels": ["Cat", "Dog", "Bird", "Cow"],
       "instances": [
        {
         "color": "#2ca02c",
         "label": "Cat"
        },
        {
         "color": "#1f77b4",
         "label": "Cat"
        },
        {
         "color": "#d62728",
         "label": "Dog"
        }
       ],
       "src": "URL of overlay image",
    }
  }'
> ... </crowd-image-classifier>

src

要分类的图像的 URL。

元素层次结构

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

区域

此元素使用以下区域。

full-instructions

关于工作人员如何对映像进行分类的一般说明。

short-instructions

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

工作人员评论

当您需要工作人员解释他们做出选择的原因时，请在验证工作流中使用此选项。使用开头标签和结束标签之间的文本，为工作人员提供有关注释中应包含哪些信息的说明。

它使用以下属性：

header

用于留下评论的行动呼吁的短语。用作添加注释的模态窗口的标题文本。

可选。默认为“添加注释”。

link-text

此文本显示在小组件中的类别下方。单击时，它会打开一个模式窗口，工作人员可以在其中添加注释。

可选。默认为“添加注释”。

占位符

注释文本区域中的示例文本，当工作人员开始键入时被覆盖。如果工作人员将字段留空，则不会显示在输出中。

可选。默认值待留空。

输出

此元素的输出是一个字符串，用于指定在 <crowd-image-classifier> 元素的 categories 属性中定义的其中一个值。

[
  {
    "<name>": {
      "label": "<value>"
      "workerComment": "Comment - if no comment is provided, this field will not be present"
    }
  }
]

另请参阅

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