crowd-instance-segmentation

画像内の特定のオブジェクトの個々のインスタンスを識別し、ラベル付きインスタンスごとに色付きのオーバーレイを作成するためのウィジェット。

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

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

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

<crowd-form>
  <crowd-instance-segmentation
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Please label each of the requested objects in this image"
    labels="['Cat', 'Dog', 'Bird']"
  >
    <full-instructions header="Segmentation Instructions">
      <ol>
          <li><strong>Read</strong> the task carefully and inspect the image.</li>
          <li><strong>Read</strong> the options and review the examples provided to understand more about the labels.</li>
          <li><strong>Choose</strong> the appropriate label that best suits the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      <p>Use the tools to label all instances of the requested items in the image</p>
    </short-instructions>
  </crowd-instance-segmentation>
</crowd-form>

ワーカーが独自のカテゴリ (ラベル) を追加できるようにするには、次のようなテンプレートを使用します。

<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>

属性

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

ヘッダー

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

ラベル

文字列の JSON 形式の配列。各文字列は、ワーカーがイメージのオブジェクトのインスタンスに割り当てることのできるラベルです。ワーカーは、ツールのラベルの下にある [インスタンスの追加] を選択して、関連するインスタンスごとに異なるオーバーレイの色を生成できます。

name

このウィジェットの名前。フォーム出力のデータにラベル付けするためのキーとして使用されます。

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 }}
  }"

要素の階層

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

• 親要素: crowd-form

• 子要素: full-instructions、short-instructions

リージョン

この要素では、次のリージョンがサポートされています。

full-instructions

イメージセグメンテーションを実行する方法についての一般的な手順。

short-instructions

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

出力

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

labeledImage

Base64 でエンコードされた、ラベルの PNG が含まれている JSON オブジェクト。

インスタンス

インスタンスのラベルと色を持つオブジェクトを含む JSON 配列。

• color - labeledImage PNG におけるラベルの RGB 色の 16 進値。

• label - その色を使用してオーバーレイに付けられるラベル。ラベルの各インスタンスは固有の色で識別されるため、この値は繰り返される場合があります。

inputImageProperties

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

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

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

例 : 要素の出力サンプル

この要素の出力サンプルを次に示します。

[
  {
    "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>"
      }
    }
  }
]

その他の参照資料

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

• Amazon SageMaker Ground Truth を使用してデータにラベルを付ける

• Crowd HTML 要素のリファレンス