crowd-polyline

イメージにポリラインまたは線を描画するためのウィジェット。各ポリラインはラベルに関連付けられ、2 つ以上の頂点を含めることができます。ポリラインはそれ自身と交差することができ、その始点と終点はイメージ上の任意の場所に配置できます。

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

<crowd-polyline> 要素を使用する Liquid テンプレートの例を次に示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。その他の例については、この GitHub リポジトリを参照してください。

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

<crowd-form>
  <crowd-polyline
    name="crowdPolyline"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Add header here to describe the task"
    labels="['car','pedestrian','street car']"
  >
    <full-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image.</p>
        <p>Draw a polyline around the boundaries of all objects
        that the label applies to.</p>
        <p>Use the <b>Enter</b> key to complete a polyline.</p>
        <p>Make sure that the polyline fits tightly around the boundary
        of the object.</p>
    </full-instructions>

    <short-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Review the tool guide to learn how to use the polyline tool.</p>
        <p>Choose the appropriate label that best suits the image.</p>
        <p>To draw a polyline, select a label that applies to an object of interest 
            and add a single point to the photo by clicking on that point. Continue to 
            draw the polyline around the object by adding additional points
            around the object boundary.</p>
        <p>After you place the final point on the polyline, press <b>Enter</b> on your
        keyboard to complete the polyline.</p>

    </short-instructions>
  </crowd-polyline>
</crowd-form>

属性

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

ヘッダー

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

initial-value

(オプション)。JSON オブジェクトの配列であり、各オブジェクトはコンポーネントのロード時にポリラインを設定します。配列の各 JSON オブジェクトには、以下のプロパティが含まれます。

• label - ラベル付けタスクの一部としてポリラインに割り当てられたテキスト。このテキストは、<crowd-polyline> 要素の labels 属性で定義されたラベルの 1 つと一致する必要があります。

• vertices — イメージの左上隅を基準とした、ポリラインの頂点の x と y ピクセル座標。

 initial-value= "{
    polylines: [
    {
        label: 'sideline', // label of this line annotation
        vertices:[         // an array of vertices which decide the position of the line
        {
            x: 84,
            y: 110
        },
        {
            x: 60,
            y: 100
        }
        ]
    },
    {
        label: 'yardline',
        vertices:[       
        {
            x: 651,
            y: 498
        },
        {
            x: 862,
            y: 869
        },
        {
            x: 1000,
            y: 869
        }
        ]
    }
   ]
}"

initial-value プロパティ経由で設定されたポリラインは調整できます。ワーカーの回答が調整されたかどうかは、ワーカーの回答出力の initialValueModified ブール値で追跡されます。

labels

必須。文字列の JSON 形式の配列であり、各文字列は、ワーカーが線に割り当てることのできるラベルです。

制限: 10 ラベル

label-colors

(オプション)。文字列の配列です。各文字列は、ラベルの 16 進数 (16 進数) コードです。

name

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

src

必須。ポリラインを描画するイメージの URL です。

リージョン

この要素には次のリージョンが必要です。

full-instructions

ポリラインを描画する方法についての一般的な手順。

short-instructions

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

要素の階層

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

• 親要素: crowd-form

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

出力

inputImageProperties

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

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

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

Polylines

ポリラインのラベルと頂点を持つオブジェクトを含む JSON 配列。

• label - 行に与えられるラベル。

• vertices — イメージの左上隅を基準とした、ポリラインの頂点のx と y ピクセル座標。

例 : 要素の出力サンプル

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

 {
    "crowdPolyline": { //This is the name you set for the crowd-polyline
      "inputImageProperties": {
        "height": 1254,
        "width": 2048
      },
      "polylines": [
        {
          "label": "sideline",
          "vertices": [
            {
              "x": 651,
              "y": 498
            },
            {
              "x": 862,
              "y": 869
            },
            {
              "x": 1449,
              "y": 611
            }
          ]
        },
        {
          "label": "yardline",
          "vertices": [
            {
              "x": 1148,
              "y": 322
            },
            {
              "x": 1705,
              "y": 474
            },
            ,
            {
              "x": 1755,
              "y": 474
            }
          ]
        }
      ]
    }
  }

以下の資料も参照してください。

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

• Amazon を使用する SageMaker ラベル付けデータの Ground Tru

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