crowd-image-classifier

イメージを分類するためのウィジェット。サポートされている次のイメージ形式のいずれかを使用します。APNG、BMP、GIF、ICO、JPEG、PNG、SVG。イメージにサイズ制限はありません。

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

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

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
    <crowd-image-classifier 
        src="${image_url}"
        categories="['Cat', 'Dog', 'Bird', 'None of the Above']"
        header="Choose the correct category for the image"
        name="category">


        <short-instructions>
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image.</p>
        </short-instructions>

 
        <full-instructions header="Classification Instructions">
            <p>Read the task carefully and inspect the image.</p>
            <p>Choose the appropriate label that best suits the image. 
            Use the <b>None of the Above</b> option if none of the other labels suit the image.</p>
        </full-instructions>

    </crowd-image-classifier>
</crowd-form>

属性

この要素には次の属性が必要です。

カテゴリ

文字列の JSON 形式の配列であり、各文字列はワーカーがイメージに割り当てることのできるカテゴリです。ワーカーが回答を提供できるように、カテゴリとして "other" を含める必要があります。最大 10 個のカテゴリを指定できます。

ヘッダー

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

name

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

オーバーレイ

ソースイメージ上にオーバーレイする情報。これは、境界ボックス、セマンティックセグメンテーション、インスタンスセグメンテーションのタスクの検証ワークフロー用です。

これは、キーとして camelCase にタスクタイプの名前を持つオブジェクトを含む JSON オブジェクトです。このキーの値は、前のタスクのラベルやその他の必要な情報を含むオブジェクトです。

境界ボックスタスクを検証するための属性を持つ 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。

要素の階層

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

• 親要素: crowd-form

• 子要素: full-instructions、short-instructions、ワーカーコメント

リージョン

この要素では次のリージョンが使用されます。

full-instructions

イメージを分類する方法に関する、ワーカーのための一般的な手順。

short-instructions

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

ワーカーコメント

ワーカーが選択理由を説明する必要がある場合に、検証ワークフローでこれを使用します。開始タグと終了タグの間のテキストを使用して、コメントに含める情報に関するワーカー向けの手順を提供します。

次の属性が含まれています。

ヘッダー

コメントを残すための行動喚起を含む語句。コメントが追加されるモーダルウィンドウのタイトルテキストとして使用されます。

オプション。デフォルトは「Add a comment (コメントを追加)」です。

link-text

このテキストは、ウィジェットのカテゴリの下に表示されます。クリックすると、ワーカーがコメントを追加できるモーダルウィンドウが開きます。

オプション。デフォルトは「Add a comment (コメントを追加)」です。

プレースホルダー

ワーカーが入力を開始したときに上書きされるコメントテキスト領域のテキスト例。ワーカーがフィールドを空白のままにした場合、これは出力には表示されません。

オプション。デフォルトは空白です。

出力

この要素の出力は、＜crowd-image-classifier> 要素の categories 属性で定義された値の 1 つを指定する文字列です。

例 : 要素の出力サンプル

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

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

その他の参照資料

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

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

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