crowd-polygon

イメージに多角形を描画し、イメージのそれぞれ多角形で囲まれた部分にラベルを割り当てるためのウィジェット。

この Crowd HTML 要素を使用する HTML テンプレートのインタラクティブな例については、「」を参照してくださいCodePen。

<crowd-polygon> 要素を使用する Liquid テンプレートの例を次に示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>

<crowd-form>
  <crowd-polygon
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Draw a polygon around each of the requested target(s) of interest"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Polygon instructions">
      <ul>
        <li>Make the polygon tight around the object</li>
        <li>You need to select a label before starting a polygon</li>
        <li>You will need to select a label again after completing a polygon</li>
        <li>To select a polygon, you can click on its borders</li>
        <li>You can start drawing a polygon from inside another polygon</li>
        <li>You can undo and redo while you're drawing a polygon to go back and forth between points you've placed</li>
        <li>You are prevented from drawing lines that overlap other lines from the same polygon</li>
      </ul>
    </full-instructions>

    <short-instructions>
      <p>Draw a polygon around each of the requested target(s) of interest</p>
      <p>Make the polygon tight around the object</p>
    </short-instructions>
  </crowd-polygon>
</crowd-form>

属性

次の属性が、この要素でサポートされています。

ヘッダー

イメージの上に表示するテキスト。これは通常、ワーカーへの質問や簡単な手順になります。

ラベル

文字列の JSON 形式の配列であり、各文字列は、多角形で囲まれたイメージ部分にワーカーが割り当てることのできるラベルです。

name

このウィジェットの名前。これは、フォーム出力でウィジェットの入力用のキーとして使用されます。

src

多角形を描画するイメージの URL です。

initial-value

JSON オブジェクトの配列であり、各オブジェクトはコンポーネントのロード時に描画する多角形を定義します。配列の各 JSON オブジェクトには、以下のプロパティが含まれます。

label - ラベル付けタスクの一部として多角形に割り当てられたテキスト。このテキストは、<crowd-polygon> 要素の labels 属性で定義されたラベルの 1 つと一致する必要があります。
vertices - JSON オブジェクトの配列。各オブジェクトには、多角形内の点を示す x 座標と y 座標の値が含まれています。

initial-value 属性は次のように表示されます。


initial-value = 
  '[
     {
     "label": "dog",
     "vertices": 
       [
         {
            "x": 570,
            "y": 239
         },
        ... 
         {
            "x": 759,
            "y": 281
         }
       ]
     }
  ]'

この属性は HTML 要素内にあるため、JSON 配列は一重引用符または二重引用符で囲む必要があります。上記の例では、単一引用符を使用して JSON をカプセル化し、二重引用符を JSON 自体の中にカプセル化しています。JSON 内に一重引用符と二重引用符を混在させる必要がある場合は、それらを HTML エンティティコードに置き換えて安全にエスケープします (二重引用符は "、一重引用符は ')。

要素の階層

この要素には、以下の親および子要素があります。

親要素: crowd-form
子要素: full-instructions、short-instructions

リージョン

以下のリージョンが必要です。

full-instructions

多角形を描画する方法についての一般的な手順。

short-instructions

目立つ場所に表示されるタスク固有の重要な手順。

出力

次の出力が、この要素でサポートされています。

多角形

JSON オブジェクトの配列で、各オブジェクトはワーカーによって作成された多角形を示します。配列の各 JSON オブジェクトには、以下のプロパティが含まれます。

label - ラベル付けタスクの一部として多角形に割り当てられたテキスト。
vertices - JSON オブジェクトの配列。各オブジェクトには、多角形内の点を示す x 座標と y 座標の値が含まれています。イメージの左上隅は 0,0 です。

inputImageProperties

ワーカーによって注釈が付けられているイメージのディメンションを指定する JSON オブジェクト。このオブジェクトには、以下のプロパティが含まれています。

height - イメージの高さ (ピクセル単位)。
width - イメージの幅 (ピクセル単位)。

例 : 要素の出力サンプル

この要素の一般的な使用シナリオによる出力サンプルを次に示します。

1 つのラベルと 1 つの多角形


{
    "annotatedResult": 
    {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": 
      [
        {
          "label": "dog",
          "vertices": 
          [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        }
      ]
    }
  }
]

1 つのラベルと複数の多角形


[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": [
        {
          "label": "dog",
          "vertices": [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        },
        {
          "label": "dog",
          "vertices": [
            {
              "x": 870,
              "y": 278
            },
            {
              "x": 908,
              "y": 446
            },
            {
              "x": 1009,
              "y": 602
            },
            {
              "x": 1116,
              "y": 519
            },
            {
              "x": 1174,
              "y": 498
            },
            {
              "x": 1227,
              "y": 479
            },
            {
              "x": 1179,
              "y": 405
            },
            {
              "x": 1179,
              "y": 337
            }
          ]
        }
      ]
    }
  }
]

複数のラベルと複数の多角形


[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 853,
        "width": 1280
      },
      "polygons": [
        {
          "label": "dog",
          "vertices": [
            {
              "x": 570,
              "y": 239
            },
            {
              "x": 603,
              "y": 513
            },
            {
              "x": 823,
              "y": 645
            },
            {
              "x": 901,
              "y": 417
            },
            {
              "x": 759,
              "y": 281
            }
          ]
        },
        {
          "label": "cat",
          "vertices": [
            {
              "x": 870,
              "y": 278
            },
            {
              "x": 908,
              "y": 446
            },
            {
              "x": 1009,
              "y": 602
            },
            {
              "x": 1116,
              "y": 519
            },
            {
              "x": 1174,
              "y": 498
            },
            {
              "x": 1227,
              "y": 479
            },
            {
              "x": 1179,
              "y": 405
            },
            {
              "x": 1179,
              "y": 337
            }
          ]
        }
      ]
    }
  }
]

多数のラベルを使用可能にすることはできますが、使用されているものだけが出力に表示されます。

その他の参照資料

詳細については、以下を参照してください。

ブラウザで JavaScript が無効になっているか、使用できません。

AWS ドキュメントを使用するには、JavaScript を有効にする必要があります。手順については、使用するブラウザのヘルプページを参照してください。

ドキュメントの表記規則

crowd-modal

crowd-polyline