crowd-keypoint - アマゾン SageMaker

翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

crowd-keypoint

イメージ上の特徴点を選択して注釈を付けるためのツールを生成します。

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

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

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script> <crowd-form> <div id="errorBox"></div> <crowd-keypoint src="{{ task.input.taskObject | grant_read_access }}" labels="['Item A', 'Item B', 'Item C']" header="Please locate the centers of each item." name="annotatedResult"> <short-instructions> Describe your task briefly here and give examples </short-instructions> <full-instructions> Give additional instructions and good/bad examples here </full-instructions> </crowd-keypoint> </crowd-form> <script> var num_obj = 1; document.querySelector('crowd-form').onsubmit = function(e) { const keypoints = document.querySelector('crowd-keypoint').value.keypoints || document.querySelector('crowd-keypoint')._submittableValue.keypoints; const labels = keypoints.map(function(p) { return p.label; }); // 1. Make sure total number of keypoints is correct. var original_num_labels = document.getElementsByTagName("crowd-keypoint")[0].getAttribute("labels"); original_num_labels = original_num_labels.substring(2, original_num_labels.length - 2).split("\",\""); var goalNumKeypoints = num_obj*original_num_labels.length; if (keypoints.length != goalNumKeypoints) { e.preventDefault(); errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must add all keypoint annotations and use each label only once.</crowd-alert>'; errorBox.scrollIntoView(); return; } // 2. Make sure all labels are unique. labelCounts = {}; for (var i = 0; i < labels.length; i++) { if (!labelCounts[labels[i]]) { labelCounts[labels[i]] = 0; } labelCounts[labels[i]]++; } const goalNumSingleLabel = num_obj; const numLabels = Object.keys(labelCounts).length; Object.entries(labelCounts).forEach(entry => { if (entry[1] != goalNumSingleLabel) { e.preventDefault(); errorBox.innerHTML = '<crowd-alert type="error" dismissible>You must use each label only once.</crowd-alert>'; errorBox.scrollIntoView(); } }) }; </script>

属性

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

ヘッダー

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

initial-value

開始時にイメージに適用される JSON 形式の特徴点の配列。例:

initial-value="[ { 'label': 'Left Eye', 'x': 1022, 'y': 429 }, { 'label': 'Beak', 'x': 941, 'y': 403 } ]
注記

この属性で使用されるラベル値には、labels 属性と一致する値が必要なことに注意してください。一致する値がないと、特徴点はレンダリングされません。

labels

特徴点の注釈ラベルとして使用される文字列の配列 (JSON 形式)。

name

ワーカーによって送信された回答を識別するために使用される文字列。この値は、回答を指定する JSON オブジェクトのキーに一致します。

src

注釈を付けるイメージのソース URI。

要素の階層

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

リージョン

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

full-instructions

イメージに注釈を付ける方法に関する一般的な手順。

short-instructions

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

出力

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

inputImageProperties

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

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

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

特徴点

特徴点の座標とラベルを含む JSON オブジェクトの配列。各オブジェクトには、以下のプロパティが含まれます。

  • label - 特徴点に割り当てられたラベル。

  • x - イメージの特徴点の X 座標 (ピクセル)。

  • y - イメージの特徴点の Y 座標 (ピクセル)。

注記

X 座標と Y 座標は、イメージの左上隅の 0,0 を基準としています。

例 : 要素の出力サンプル

この要素を使用した場合の出力サンプルを次に示します。

[ { "crowdKeypoint": { "inputImageProperties": { "height": 1314, "width": 962 }, "keypoints": [ { "label": "dog", "x": 155, "y": 275 }, { "label": "cat", "x": 341, "y": 447 }, { "label": "cat", "x": 491, "y": 513 }, { "label": "dog", "x": 714, "y": 578 }, { "label": "cat", "x": 712, "y": 763 }, { "label": "cat", "x": 397, "y": 814 } ] } } ]

多数のラベルを使用できるかもしれませんが、使用されているものだけが出力に表示されます。

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

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