SageMaker クラウド HTML 要素

次のリストは、カスタムテンプレートをより簡単に構築できるようにし、ワーカーにとってなじみのある UI を提供する Crowd HTML 要素です。これらの要素は、Ground Truth、Augmented AI、Mechanical Turk でサポートされています。

現在の状況についてワーカーに警告するメッセージ。

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

<crowd-alert> 要素を使用する 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>

属性

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

dismissible

ブールスイッチ。存在する場合、ワーカーがメッセージを閉じることができるようにします。

type

表示するメッセージのタイプを指定する文字列。指定できる値は、"info" (デフォルト)、"success"、"error"、および "warning" です。

要素の階層

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

親要素: crowd-form
子要素: なし

その他の参照資料

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

アタッチ先の別の要素の右上隅の上にあるアイコン。

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

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



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

<crowd-form>
  <crowd-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Choose the correct category for this image."
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <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.</p>
    </full-instructions>
   
    <short-instructions id="short-instructions">
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-badge icon="star" for="short-instructions"/>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

属性

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

を

バッジのアタッチ先である要素の ID を指定する文字列。

アイコン

バッジに表示するアイコンを指定する文字列。この文字列は、ロード済みであるオープンソースの iron-icons セットにあるアイコンの名前か、カスタムアイコンの URL のいずれかにする必要があります。

この属性は label 属性よりも優先されます。

次に、<crowd-badge> HTML 要素に iron-icon を追加するために使用できる構文の例を示します。icon-name は、このアイコンセットから使用するアイコンの名前に置き換えます。


<crowd-badge icon="icon-name" for="short-instructions"/>

ラベル

バッジに表示するテキスト。テキストが大きすぎるとバッジ領域からあふれるため、3 文字以下にすることをお勧めします。icon 属性を設定することにより、テキストでなくアイコンを表示できます。

要素の階層

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

親要素: crowd-form
子要素: なし

その他の参照資料

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

何らかのアクションを表す、型を持つボタン。

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

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



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

<crowd-form>
  <crowd-image-classifier
    name="crowd-image-classifier"
    src="https://unsplash.com/photos/NLUkAA-nDdE"
    header="Please select the correct category for this image"
    categories="['Person', 'Umbrella', 'Chair', 'Dolphin']"
  >
    <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.</p>
    </full-instructions>
    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label that best suits the image.</p>
      <crowd-button>
        <iron-icon icon="question-answer"/>
      </crowd-button>
    </short-instructions>
  </crowd-image-classifier>
</crowd-form>

属性

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

無効

ブールスイッチ。存在する場合、ボタンを無効なものと表示してクリックを防止します。

form-action

"submit" に設定されている場合は親 crowd-form 要素を送信し、"reset" に設定されている場合は親 <crowd-form> 要素をリセットするスイッチ。

href

オンラインリソースの URL。ボタン型のリンクが必要な場合は、このプロパティを使用します。

アイコン

ボタンのテキストの横に表示するアイコンを指定する文字列。文字列はオープンソースの iron-icons セットのアイコンの名前であることが必要です。これは事前にロードされています。例えば、検索 iron-icon を挿入するには、以下を使用します。


<crowd-button>
    <iron-icon icon="search"/>
</crowd-button>

アイコンは、icon-align 属性で指定されたようにテキストの左または右に配置されます。

カスタムアイコンを使用するには、icon-url を参照してください。

icon-align

ボタンのテキストを基準とする、アイコンの左または右の位置。デフォルトは "left" です。

icon-url

アイコン用のカスタムイメージの URL。カスタムイメージは、icon 属性で指定されている標準アイコンの代わりに使用できます。

ロード中

ブールスイッチ。存在する場合、ボタンをロード中の状態として表示します。この属性と disabled 属性がどちらも指定されている場合、この属性が優先されます。

target

href 属性を使用して、ボタンが特定の URL のハイパーリンクとして動作するように指定する場合、オプションで target 属性はリンク先 URL がロードするフレームまたはウィンドウをターゲットにします。

variant

ボタンの一般的なスタイル。1 次ボタンには "primary"、2 次ボタンには "normal"、3 次ボタンには "link" を使用し、テキストなしでアイコンのみを表示するには "icon" を使用します。

要素の階層

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

親要素: crowd-form
子要素: なし

その他の参照資料

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

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

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

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


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

<crowd-form>
  <crowd-bounding-box
    name="annotatedResult"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Draw bounding boxes around all the cats and dogs in this image"
    labels="['Cat', 'Dog']"
  >
    <full-instructions header="Bounding Box Instructions" >
      <p>Use the bounding box tool to draw boxes around the requested target of interest:</p>
      <ol>
        <li>Draw a rectangle using your mouse over each instance of the target.</li>
        <li>Make sure the box does not cut into the target, leave a 2 - 3 pixel margin</li>
        <li>
          When targets are overlapping, draw a box around each object,
          include all contiguous parts of the target in the box.
          Do not include parts that are completely overlapped by another object.
        </li>
        <li>
          Do not include parts of the target that cannot be seen,
          even though you think you can interpolate the whole shape of the target.
        </li>
        <li>Avoid shadows, they're not considered as a part of the target.</li>
        <li>If the target goes off the screen, label up to the edge of the image.</li>
      </ol>
    </full-instructions>

    <short-instructions>
      Draw boxes around the requested target of interest.
    </short-instructions>
  </crowd-bounding-box>
</crowd-form>

属性

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

ヘッダー

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

initial-value

JSON オブジェクトの配列であり、各オブジェクトはコンポーネントのロード時に境界ボックスを設定します。配列の各 JSON オブジェクトには、以下のプロパティが含まれます。initial-value プロパティを介して設定された境界ボックスは調整でき、ワーカーの回答が調整されたかどうかは、ワーカーの回答出力の initialValueModified ブール値を介して追跡されます。

height - ボックスの高さ (ピクセル単位)。
label - ラベル付けタスクの一部としてボックスに割り当てられたテキスト。このテキストは、<crowd-bounding-box> 要素の labels 属性で定義されたラベルの 1 つと一致する必要があります。
left - ボックスの左上隅の、イメージの左側からの測定距離 (ピクセル単位)。
top - ボックスの左上隅の、イメージの上部からの測定距離 (ピクセル単位)。

width - ボックスの幅 (ピクセル単位)。

Liquid テンプレート言語を使用して、カスタムテンプレートの前のジョブのマニフェストファイルから境界ボックスの初期値を抽出できます。


initial-value="[
  {% for box in task.input.manifestLine.label-attribute-name-from-prior-job.annotations %}
    {% capture class_id %}{{ box.class_id }}{% endcapture %}
    {% assign label = task.input.manifestLine.label-attribute-name-from-prior-job-metadata.class-map[class_id] %}
    {
      label: {{label | to_json}},
      left: {{box.left}},
      top: {{box.top}},
      width: {{box.width}},
      height: {{box.height}},
    },
  {% endfor %}
 ]"

ラベル

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

name

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

src

境界ボックスを描画するイメージの URL です。

要素の階層

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

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

リージョン

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

full-instructions

境界ボックスを描画する方法についての一般的な手順。

short-instructions

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

出力

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

boundingBoxes

JSON オブジェクトの配列で、各オブジェクトはワーカーによって作成された境界ボックスを指定します。配列の各 JSON オブジェクトには、以下のプロパティが含まれます。

height - ボックスの高さ (ピクセル単位)。
label - ラベル付けタスクの一部としてボックスに割り当てられたテキスト。このテキストは、<crowd-bounding-box> 要素の labels 属性で定義されたラベルの 1 つと一致する必要があります。
left - ボックスの左上隅の、イメージの左側からの測定距離 (ピクセル単位)。
top - ボックスの左上隅の、イメージの上部からの測定距離 (ピクセル単位)。
width - ボックスの幅 (ピクセル単位)。

入力ImageProperties

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

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

例 : 要素の出力サンプル

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

1 つのラベルと 1 つのボックス、複数のラベルと 1 つのボックス


[
  {
    "annotatedResult": {
      "boundingBoxes": [
        {
          "height": 401,
          "label": "Dog",
          "left": 243,
          "top": 117,
          "width": 187
        }
      ],
      "inputImageProperties": {
        "height": 533,
        "width": 800
      }
    }
  }
]

1 つのラベルと複数のボックス


[
  {
    "annotatedResult": {
      "boundingBoxes": [
        {
          "height": 401,
          "label": "Dog",
          "left": 243,
          "top": 117,
          "width": 187
        },
        {
          "height": 283,
          "label": "Dog",
          "left": 684,
          "top": 120,
          "width": 116
        }
      ],
      "inputImageProperties": {
        "height": 533,
        "width": 800
      }
    }
  }
]

複数のラベルと複数のボックス


[
  {
    "annotatedResult": {
      "boundingBoxes": [
        {
          "height": 395,
          "label": "Dog",
          "left": 241,
          "top": 125,
          "width": 158
        },
        {
          "height": 298,
          "label": "Cat",
          "left": 699,
          "top": 116,
          "width": 101
        }
      ],
      "inputImageProperties": {
        "height": 533,
        "width": 800
      }
    }
  }
]

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

その他の参照資料

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

情報を表示するための外観が向上したボックス。

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

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


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

<style>
  h3 {
    margin-top: 0;
  }
  
  crowd-card {
    width: 100%;
  }
  
  .card {
    margin: 10px;
  }
  
  .left {
    width: 70%;
    margin-right: 10px;
    display: inline-block;
    height: 200px;
  }
  
  .right {
    width: 20%;
    height: 200px;
    display: inline-block;
  }
</style>

<crowd-form>
  <short-instructions>
    Your short instructions here.
  </short-instructions>
  
  <full-instructions>
    Your full instructions here.
  </full-instructions>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Nothing is great.
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment1" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
  
  <div class="left">
    <h3>What sentiment does this text convey?</h3>
    <crowd-card>
      <div class="card">
        Everything is great!
      </div>
    </crowd-card>
  </div>
  
  <div class="right">
    <h3>Select an option</h3>
    
    <select name="sentiment2" style="font-size: large" required>
      <option value="">(Please select)</option>
      <option>Negative</option>
      <option>Neutral</option>
      <option>Positive</option>
      <option>Text is empty</option>
    </select>
  </div>
</crowd-form>

属性

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

heading

ボックスの上部に表示されるテキスト。

画像

ボックス内に表示されるイメージの URL。

要素の階層

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

親要素: crowd-form
子要素: なし

その他の参照資料

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

チェックをオンまたはオフにできる UI コンポーネントで、ユーザーは 1 つのセットから複数のオプションを選択できます。

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

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


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

<crowd-form>
  
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-checkbox name="website-found">Website Found</crowd-checkbox>

</crowd-form>

属性

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

checked

ブールスイッチ。存在する場合、チェックボックスをオンの状態として表示します。

以下は、デフォルトでチェックボックスをオンにするために使用される構文の例です。


  <crowd-checkbox name="checkedBox" value="checked" checked>This box is checked</crowd-checkbox>

無効

ブールスイッチ。存在する場合、チェックボックスを無効なものと表示して、オンにされることを防止します。

次に、チェックボックスを無効にする構文の例を示します。


  <crowd-checkbox name="disabledCheckBox" value="Disabled" disabled>Cannot be selected</crowd-checkbox>

name

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

必須

ブールスイッチ。存在する場合、ワーカーに入力を要求します。

次に、チェックボックスをオンにすることを必須とする構文の例を示します。


  <crowd-checkbox name="work_verified" required>Instructions were clear</crowd-checkbox>

value

出力でチェックボックスの状態を表す名前として使用される文字列。指定しない場合、デフォルトで "on" になります。

要素の階層

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

親要素: crowd-form
子要素: なし

出力

JSON オブジェクトを提供します。name 文字列はオブジェクト名で、value 文字列はチェックボックスの状態に基づくブール値のプロパティ名です。この状態はチェックボックスがオンの場合は true、オフの場合は false です。

例 : 要素の出力サンプル

同じ name 値を複数のボックスに使用。


<!-- INPUT -->  
<div><crowd-checkbox name="image_attributes" value="blurry"> Blurry </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="dim"> Too Dim </crowd-checkbox></div>
<div><crowd-checkbox name="image_attributes" value="exposed"> Too Bright </crowd-checkbox></div>


//Output with "blurry" and "dim" checked
[
  {
    "image_attributes": {
      "blurry": true,
      "dim": true,
      "exposed": false
    }
  }
]

3 つの色の値すべてが単一オブジェクトのプロパティであることに注意してください。

異なる name 値を各ボックスに使用。


<!-- INPUT -->
<div><crowd-checkbox name="Stop" value="Red"> Red </crowd-checkbox></div>
<div><crowd-checkbox name="Slow" value="Yellow"> Yellow </crowd-checkbox></div>
<div><crowd-checkbox name="Go" value="Green"> Green </crowd-checkbox></div>


//Output with "Red" checked
[
  {
    "Go": {
      "Green": false
    },
    "Slow": {
      "Yellow": false
    },
    "Stop": {
      "Red": true
    }
  }
]

その他の参照資料

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

音声、動画、テキストなど、イメージ以外のコンテンツを分類するためのウィジェット。

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

以下に、crowd-classifier を使用して作成した HTML ワーカータスクテンプレートの例を示します。この例では、Liquid テンプレート言語を使用して以下を自動化しています。

categories パラメータのカテゴリのラベル付け
classification-target パラメータで分類するオブジェクト

次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。


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

<crowd-form>
    <crowd-classifier
      name="category"
      categories="{{ task.input.labels | to_json | escape }}"
      header="What type of a document is this?"
    >
      <classification-target>
        <iframe style="width: 100%; height: 600px;" src="{{ task.input.taskObject  | grant_read_access }}" type="application/pdf"></iframe>
      </classification-target>
      
      <full-instructions header="Document Classification Instructions">
        <p>Read the task carefully and inspect the document.</p>
        <p>Choose the appropriate label that best suits the document.</p>
      </full-instructions>

      <short-instructions>
        Please choose the correct category for the document
      </short-instructions>
    </crowd-classifier>
</crowd-form>

属性

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

カテゴリ

文字列の JSON 形式の配列であり、各文字列はワーカーがテキストに割り当てることのできるカテゴリです。カテゴリとして "other" を含める必要があります。そうしない場合、ワーカーは回答を提供できません。

ヘッダー

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

name

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

要素の階層

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

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

リージョン

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

classification-target

ワーカーによって分類されるコンテンツ。これはプレーンテキストまたは HTML となります。HTML を使用できる例として、動画または音声プレイヤーの埋め込み、PDF の埋め込み、または 2 つ以上のイメージの比較実行が含まれますが、これに限定されるものではありません。

full-instructions

テキスト分類を実行する方法についての一般的な手順。

short-instructions

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

出力

この要素の出力は、指定された name 値をプロパティ名として使用し、categories の文字列をプロパティの値として使用するオブジェクトです。

例 : 要素の出力サンプル

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


[
  {
    "<name>": {
      "label": "<value>"
    }
  }
]

その他の参照資料

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

音声、ビデオ、テキストなど、さまざまな形式のコンテンツを 1 つ以上のカテゴリに分類するためのウィジェット。分類するコンテンツは、オブジェクトと呼ばれます。

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

次に、この要素を使用して作成された HTML ワーカータスクテンプレートの例を示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。


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

<crowd-form>
    <crowd-classifier-multi-select
      name="category"
      categories="['Positive', 'Negative', 'Neutral']"
      header="Select the relevant categories"
      exclusion-category="{ text: 'None of the above' }"
    >
      <classification-target>
        {{ task.input.taskObject }}
      </classification-target>
      
      <full-instructions header="Text Categorization Instructions">
        <p><strong>Positive</strong> sentiment include: joy, excitement, delight</p>
        <p><strong>Negative</strong> sentiment include: anger, sarcasm, anxiety</p>
        <p><strong>Neutral</strong>: neither positive or negative, such as stating a fact</p>
        <p><strong>N/A</strong>: when the text cannot be understood</p>
        <p>When the sentiment is mixed, such as both joy and sadness, choose both labels.</p>
      </full-instructions>

      <short-instructions>
       Choose all categories that are expressed by the text. 
      </short-instructions>
    </crowd-classifier-multi-select>
</crowd-form>

属性

次の属性が、crowd-classifier-multi-select 要素でサポートされています。各属性は、文字列値または文字列値を受け入れます。

カテゴリ

必須。文字列の JSON 形式の配列であり、各文字列はワーカーがオブジェクトに割り当てることのできるカテゴリです。

ヘッダー

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

name

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

exclusion-category

オプション。次の形式の JSON 形式の文字列: "{ text: 'default-value' }"。この属性は、ワーカー UI に表示されるオブジェクトにラベルが適用されない場合にワーカーが選択できるデフォルト値を設定します。

要素の階層

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

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

リージョン

この要素は次のリージョンを使用します。

classification-target

ワーカーによって分類されるコンテンツ。コンテンツは、プレーンテキストでも、HTML を使用してテンプレートで指定するオブジェクトでもかまいません。例えば、HTML 要素を使用して、ビデオまたはオーディオプレイヤーを含めたり、PDF ファイルを埋め込んだり、2 つ以上の画像の比較を含めたりすることができます。

full-instructions

テキストを分類する方法に関する一般的な手順。

short-instructions

タスク固有の重要な手順。これらの手順は目立つように表示されます。

出力

この要素の出力は、指定された name 値をプロパティ名として使用し、categories の文字列をプロパティの値として使用するオブジェクトです。

例 : 要素の出力サンプル

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


[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]

その他の参照資料

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

長いテキスト内の単語、フレーズ、または文字列にラベルを付けるためのウィジェット。ワーカーはラベルを選択し、ラベルが適用されるテキストを強調表示します。

重要: 自己完結型のウィジェット

<crowd-entity-annotation> 要素と <crowd-form> 要素を一緒に使用しないでください。独自のフォーム送信ロジックと [Submit] (送信) ボタンが含まれています。

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

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


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

<crowd-entity-annotation
  name="crowd-entity-annotation"
  header="Highlight parts of the text below"
  labels="[{'label': 'person', 'shortDisplayName': 'per', 'fullDisplayName': 'Person'}, {'label': 'date', 'shortDisplayName': 'dat', 'fullDisplayName': 'Date'}, {'label': 'company', 'shortDisplayName': 'com', 'fullDisplayName': 'Company'}]"
  text="Amazon SageMaker Ground Truth helps you build highly accurate training datasets for machine learning quickly."
>
  <full-instructions header="Named entity recognition instructions">
    <ol>
      <li><strong>Read</strong> the text carefully.</li>
      <li><strong>Highlight</strong> words, phrases, or sections of the text.</li>
      <li><strong>Choose</strong> the label that best matches what you have highlighted.</li>
      <li>To <strong>change</strong> a label, choose highlighted text and select a new label.</li>
      <li>To <strong>remove</strong> a label from highlighted text, choose the X next to the abbreviated label name on the highlighted text.</li>
      <li>You can select all of a previously highlighted text, but not a portion of it.</li>
    </ol>
  </full-instructions>

  <short-instructions>
    Apply labels to words or phrases.
  </short-instructions>

    <div id="additionalQuestions" style="margin-top: 20px">
      <h3>
        What is the overall subject of this text?
      </h3>
      <crowd-radio-group>
        <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
        <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
      </crowd-radio-group>
    </div>
</crowd-entity-annotation>

<script>
  document.addEventListener('all-crowd-elements-ready', () => {
    document
      .querySelector('crowd-entity-annotation')
      .shadowRoot
      .querySelector('crowd-form')
      .form
      .appendChild(additionalQuestions);
  });
</script>

属性

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

ヘッダー

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

initial-value

JSON 形式のオブジェクトの配列。各配列で、初期化時にテキストに適用する注釈を定義します。オブジェクトには、labels 属性のいずれかと一致する値 label、ラベル付きスパンの開始 Unicode オフセットの整数値 startOffset、および終了 Unicode オフセットの整数値 endOffset などがあります。


[
  {
    label: 'person',
    startOffset: 0,
    endOffset: 16
  },
  ...
]

ラベル

JSON 形式のオブジェクトの配列。それぞれに以下が含まれます。

label (必須): エンティティを識別するために使用される名前。
fullDisplayName (オプション): タスクウィジェットのラベルリストに使用されます。指定しない場合は、デフォルトでラベル値に設定されます。
shortDisplayName (オプション): 選択したエンティティの上に表示する 3〜4 文字の略語。指定しない場合は、デフォルトでラベル値に設定されます。

shortDisplayName 推奨事項
選択内容の上に表示される値は重複する可能性があるため、ワークスペース内のラベル付きエンティティを管理することは困難です。重複を防ぎ、作業者がワークスペースを管理しやすいようにするには、各ラベルに 3〜4 文字の shortDisplayName を使用することを強くお勧めします。


[
  {
    label: 'person',
    shortDisplayName: 'per', 
    fullDisplayName: 'person'
  }
]

name

DOM でウィジェットの名前として使用します。また、フォーム出力および出力マニフェストでラベル属性名としても使用されます。

text

注釈を付けるテキスト。テンプレートシステムは、デフォルトで引用符と HTML 文字列をエスケープします。コードが既にエスケープされているか、部分的にエスケープされている場合、エスケープを制御するその他の方法については、可変フィルターを参照してください。

要素の階層

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

子要素: full-instructions、short-instructions

リージョン

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

full-instructions

ウィジェットの使用方法に関する一般的な手順。

short-instructions

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

出力

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

エンティティ

注釈の開始、終了、ラベルを指定する JSON オブジェクト。このオブジェクトには、以下のプロパティが含まれています。

label - 割り当てられたラベル。
startOffset - 選択したテキストの先頭の Unicode オフセット。
endOffset - 選択後の最初の文字の Unicode オフセット。

例 : 要素の出力サンプル

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


{
  "myAnnotatedResult": {
    "entities": [
      {
        "endOffset": 54,
        "label": "person",
        "startOffset": 47
      },
      {
        "endOffset": 97,
        "label": "event",
        "startOffset": 93
      },
      {
        "endOffset": 219,
        "label": "date",
        "startOffset": 212
      },
      {
        "endOffset": 271,
        "label": "location",
        "startOffset": 260
      }
    ]
  }
}

その他の参照資料

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

中央にイメージを持つフローティングボタン。

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

<crowd-fab> 要素を使用するイメージ分類用に設計された Liquid テンプレートの例を次に示します。このテンプレートは JavaScript を使用して、ワーカーがワーカー UI に関する問題をレポートできるようにします。次のコードをコピーし、拡張子 .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>
            <p>If there is an issue with the image or tools, please select
              <b>None of the Above</b>, describe the issue in the text box and click the 
              button below.</p>
            <crowd-input label="Report an Issue" name="template-issues"></crowd-input>
            <crowd-fab id="button1" icon="report-problem" title="Issue"/>
        </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>

<script>
  [
    button1,
  ].forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelector('crowd-form').submit();
    });
  });
</script>

属性

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

無効

ブールスイッチ。存在する場合、フローティングボタンを無効なものと表示してクリックを防止します。

アイコン

ボタンの中央に表示するアイコンを指定する文字列。この文字列は、ロード済みであるオープンソースの iron-icons セットにあるアイコンの名前か、カスタムアイコンの URL のいずれかにする必要があります。

次に、<crowd-fab> HTML 要素に iron-icon を追加するために使用できる構文の例を示します。icon-name は、このアイコンセットから使用するアイコンの名前に置き換えます。


<crowd-fab "id="button1" icon="icon-name" title="Issue"/>

ラベル

アイコンの代わりに使用できる 1 文字で構成される文字列。絵文字または複数の文字を使用すると、代わりに省略記号がボタンに表示される場合があります。

title

ボタンの上にマウスカーソルを置いたときに、ツールヒントとして表示される文字列。

要素の階層

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

親要素: crowd-form
子要素: なし

その他の参照資料

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

すべてのカスタムタスク用のフォームラッパー。フォームデータを適切に送信するための重要なアクションを設定および実装します。

タイプ "submit" の crowd-button が <crowd-form> 要素内部に組み込まれていない場合は、自動的に <crowd-form> 要素内部に付加されます。

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

<crowd-form> 要素を使用するイメージ分類テンプレートの例を次に示します。次のコードをコピーし、拡張子 .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>

要素の階層

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

親要素: なし
子要素: 任意の UI テンプレート要素

要素イベント

crowd-form 要素は、標準の HTML form 要素を拡張し、そのイベント (例: onclick、onsubmit) を継承します。

その他の参照資料

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

中央にイメージが配置されたボタン。ユーザーがボタンにタッチしたときに、ボタンの中央からリップルエフェクトが発生します。

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

<crowd-icon-button> 要素を使用するイメージ分類用に設計された Liquid テンプレートの例を次に示します。このテンプレートは JavaScript を使用して、ワーカーがワーカー UI に関する問題をレポートできるようにします。次のコードをコピーし、拡張子 .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>
            <p>If there is an issue with the image or tools, please select
              <b>None of the Above</b>, describe the issue in the text box and click the 
              button below.</p>
            <crowd-input label="Report an Issue" name="template-issues"/></crowd-input>
            <crowd-icon-button id="button1" icon="report-problem" title="Issue"/>
        </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>

<script>
  [
    button1,
  ].forEach(function(button) {
    button.addEventListener('click', function() {
      document.querySelector('crowd-form').submit();
    });
  });
</script>

属性

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

無効

ブールスイッチ。存在する場合、ボタンを無効なものと表示してクリックを防止します。

アイコン

次に、<crowd-icon-button> HTML 要素に iron-icon を追加するために使用できる構文の例を示します。icon-name は、このアイコンセットから使用するアイコンの名前に置き換えます。


<crowd-icon-button id="button1" icon="icon-name" title="Issue"/>

要素の階層

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

親要素: crowd-form
子要素: なし

その他の参照資料

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

イメージを分類するためのウィジェット。サポートされている次のイメージ形式のいずれかを使用します。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"
    }
  }
]

その他の参照資料

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

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

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

次に、この crowd 要素を使用して作成された HTML ワーカータスクテンプレートの例を示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。


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

<crowd-form>
  <crowd-image-classifier-multi-select
    name="animals"
    categories="['Cat', 'Dog', 'Horse', 'Pig', 'Bird']"
    src="https://images.unsplash.com/photo-1509205477838-a534e43a849f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1998&q=80"
    header="Please identify the animals in this image"
    exclusion-category="{ text: 'None of the above' }"
  >
    <full-instructions header="Classification Instructions">
      <p>If more than one label applies to the image, select multiple labels.</p>
      <p>If no labels apply, select <b>None of the above</b></p>
    </full-instructions>

    <short-instructions>
      <p>Read the task carefully and inspect the image.</p>
      <p>Choose the appropriate label(s) that best suit the image.</p>
    </short-instructions>
  </crowd-image-classifier-multi-select>
</crowd-form>

属性

次の属性が、crowd-image-classifier-multi-select 要素でサポートされています。各属性は、文字列値または文字列値を受け入れます。

カテゴリ

必須。文字列の JSON 形式の配列であり、各文字列はワーカーがイメージに割り当てることのできるカテゴリです。ワーカーは少なくとも 1 つのカテゴリを選択する必要があり、すべてのカテゴリを選択できます。

ヘッダー

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

name

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

src

必須。分類するイメージの URL。

exclusion-category

オプション。次の形式の JSON 形式の文字列: "{ text: 'default-value' }"。この属性は、ワーカー UI に表示されるイメージにどのラベルも適用されない場合にワーカーが選択できるデフォルト値を設定します。

要素の階層

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

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

リージョン

この要素は、次のリージョンを使用します。

full-instructions

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

short-instructions

タスク固有の重要な手順。これらの手順は目立つように表示されます。

出力

この要素の出力は、<crowd-image-classifier-multi-select> 要素の categories 属性に定義されている 1 つ以上の値を指定する文字列です。

例 : 要素の出力サンプル

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


[
  {
    "<name>": {
        labels: ["label_a", "label_b"]
    }
  }
]

その他の参照資料

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

入力データを受け取るボックス。

自己終了型にすることはできない

HTML 標準の input 要素とは異なり、閉じ括弧の前にスラッシュを配置する (例えば、<crowd-input ... />) ことによって、この要素を自己終了することはできません。この要素の後に </crowd-input> を指定して終了する必要があります。

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

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


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

<crowd-form>
  <img style="max-width: 35vw; max-height: 50vh" src="{{ task.input.taskObject | grant_read_access }}">
  <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input>
  <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input>
  <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input>

  <short-instructions>
    Your custom quick instructions and examples
  </short-instructions>

  <full-instructions>
    Your custom detailed instracutions and more examples
  </full-instructions>
</crowd-form>

属性

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

allowed-pattern

ワーカータイプとして一致しない文字を無視するために、auto-validate 属性と共に使用される正規表現。

auto-focus

この値を true に設定すると、ロード後にブラウザのフォーカスは入力領域に配置されます。このようにして、ワーカーは最初に選択することなく入力を開始できます。

auto-validate

ブールスイッチ。存在する場合、入力の検証を有効にします。検証の動作は error-message 属性と allowed-pattern 属性によって変更できます。

無効

ブールスイッチ。存在する場合、入力領域を無効なものとして表示します。

error-message

検証が失敗した場合に、入力フィールドの下、左側に表示されるテキスト。

ラベル

テキストフィールド内に表示される文字列。

ワーカーがフィールドへの入力を開始するとき、または value 属性が設定されているとき、このテキストは縮小されてテキストフィールドの上に表示されます。

max-length

入力が受け入れる最大文字数。この制限を超える入力は無視されます。

min-length

フィールドの入力最小文字数。

name

DOM およびフォームの出力で使用される入力の名前を設定します。

プレースホルダー

プレースホルダーテキストとして使用される文字列値で、ワーカーがこの入力へのデータ入力を開始するまで表示されます。これはデフォルト値として使用されません。

必須

ブールスイッチ。存在する場合、ワーカーに入力を要求します。

type

文字列を受け取って入力の HTML5 input-type 動作を設定します。例には、file や date が含まれます。

value

ワーカーが入力を提供しない場合にデフォルトとなるプリセット。プリセットはテキストフィールドに表示されます。

要素の階層

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

親要素: crowd-form
子要素: なし

出力

name 文字列をプロパティ名として提供し、フィールドに入力されたテキストを値として提供します。

例 : JSON 出力のサンプル

複数の要素の値は、name 属性値をプロパティ名として同じオブジェクトに出力されます。入力のない要素は出力に表示されません。例えば、次の 3 つの入力を使用するとします。


<crowd-input name="tag1" label="Word/phrase 1"></crowd-input>
<crowd-input name="tag2" label="Word/phrase 2"></crowd-input>
<crowd-input name="tag3" label="Word/phrase 3"></crowd-input>

以下は、2 つだけが入力を持つ場合の出力です。


[
  {
    "tag1": "blue",
    "tag2": "red"
  }
]

つまり、これらの結果を解析するように構築されたコードはすべて、回答でのそれぞれの入力の有無を処理できる必要があります。

その他の参照資料

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

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

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

入力ImageProperties

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

その他の参照資料

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

ワーカーがリンクまたはボタンをクリックしたとき、3 つのタブ付きページ [Summary] (概要)、[Detailed Instructions] (詳細な手順)、および [Examples] (例) に手順を表示する要素。

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

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


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

<crowd-form>
  	<crowd-instructions link-text="View instructions" link-type="button">
		  <short-summary>
		    <p>Given an image, write three words or short phrases that summarize its contents.</p>
		  </short-summary>
		  <detailed-instructions>
		    <p>Imagine that you are describing an image to a friend or tagging it for a news website. Provide three specific words or short phrases that describe it.</p>
		  </detailed-instructions>
		  <positive-example>
		    <p><img src="https://s3.amazonaws.com/cv-demo-images/highway.jpg"/></p>
		    <p>
		    	<ul>
		    		<li>Highway</li>
		    		<li>Cars</li>
		    		<li>Gas station</li>
		    	</ul>
		    </p>
		  </positive-example>
		  <negative-example>
		    <p><img src="https://s3.amazonaws.com/cv-demo-images/highway.jpg"/></p>
		    <p>
		    	These are not specific enough:
		    	<ol>
		    		<li>Trees</li>
		    		<li>Outside</li>
		    		<li>Daytime</li>
		    	</ol>
		    </p>
		  </negative-example>
	</crowd-instructions>
    <p><strong>Instructions: </strong>Given an image, write three words or short phrases that summarize its contents.</p>
    <p>If someone were to see these three words or phrases, they should understand the subject and context of the image, as well as any important actions.</p>
	<p>View the instructions for detailed instructions and examples.</p>
	<p><img style="max-width: 100%; max-height: 100%" src="{{ task.input.taskObject | grant_read_access }}"></p>
  <crowd-input name="tag1" label="Word/phrase 1" required></crowd-input>
  <crowd-input name="tag2" label="Word/phrase 2" required></crowd-input>
  <crowd-input name="tag3" label="Word/phrase 3" required></crowd-input>
</crowd-form>

属性

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

link-text

手順を開くための表示テキスト。デフォルトは [Click for instructions] (クリックして手順をご覧ください) です。

link-type

手順のトリガータイプを指定する文字列。指定できる値は "link" (デフォルト) と "button" です。

要素の階層

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

親要素: crowd-form
子要素: なし

リージョン

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

detailed-instructions

タスクの具体的な手順を示すコンテンツ。これは [Detailed Instructions] (詳細な手順) タブのページに表示されます。

negative-example

不適切なタスクの完了例を示すコンテンツ。これは [Examples] (例) タブのページに表示されます。複数の例がこの要素内で提供されることがあります。

positive-example

適切なタスクの完了例を示すコンテンツ。これは [Examples (例)] タブのページに表示されます。

short-summary

完了するタスクの概要を示す簡単な記述。これは [Summary] (概要) タブのページに表示されます。複数の例がこの要素内で提供されることがあります。

その他の参照資料

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

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

でこの 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 属性と一致する値が必要なことに注意してください。一致する値がないと、特徴点はレンダリングされません。

ラベル

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

name

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

src

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

要素の階層

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

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

リージョン

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

full-instructions

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

short-instructions

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

出力

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

入力ImageProperties

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

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

その他の参照資料

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

イメージに線を描画するためのウィジェット。各行はラベルに関連付けられ、出力データには各ラインの始点と終点がレポートされます。

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

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


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

<crowd-form>
  <crowd-line
    name="crowdLine"
    src="{{ task.input.taskObject | grant_read_access }}"
    header="Add header here to describe the task"
    labels="['car','pedestrian','street car']"
  >
    <short-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 line on each objects that the label applies to.</p>
    </short-instructions>

    <full-instructions>
        <p>Read the task carefully and inspect the image.</p>
        <p>Choose the appropriate label that best suits the image. 
        <p>Draw a line along each object that the image applies to.
            Make sure that the line does not extend beyond the boundaries
            of the object.
        </p>
        <p>Each line is defined by a starting and ending point. Carefully
        place the starting and ending points on the boundaries of the object.</p>
    </full-instructions>
    
  </crowd-line>
</crowd-form>

属性

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

ヘッダー

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

initial-value

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

label - ラベル付けタスクの一部として線に割り当てられたテキスト。このテキストは、<crowd-line> 要素の labels 属性で定義されたラベルの 1 つと一致する必要があります。
vertices - イメージの左上隅を基準とした、線の始点と終点の x と y ピクセル座標。


initial-value="{
    lines: [
    {
        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
        }
        ]
    }
   ]
}"

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

ラベル

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

制限: 10 ラベル

label-colors

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

name

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

src

必須。線を描画するイメージの URL です。

リージョン

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

full-instructions

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

short-instructions

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

要素の階層

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

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

出力

入力ImageProperties

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

lines

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

label - 行に与えられるラベル。
vertices - イメージの左上隅を基準とした、線の始点と終点の x と y ピクセル座標。

例 : 要素の出力サンプル

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


{
    "crowdLine": { //This is the name you set for the crowd-line
      "inputImageProperties": {
        "height": 1254,
        "width": 2048
      },
      "lines": [
        {
          "label": "yardline",
          "vertices": [ 
            {
              "x": 58,
              "y": 295
            },
            {
              "x": 1342,
              "y": 398
            }
          ]
        },
        {
          "label": "sideline",
          "vertices": [
            {
              "x": 472,
              "y": 910
            },
            {
              "x": 1480,
              "y": 600
            }
          ]
        }
      ]
    }
  }

その他の参照資料

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

開いたときにポップアップで表示される小さなウィンドウ。

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

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


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

<crowd-modal
link-text = "See Examples"
link-type = "button">
Example Modal Text</crowd-modal>

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

モーダルを開くための表示テキスト。デフォルトは [Click to open modal] (クリックしてモーダルを開きます) です。

モーダルのトリガータイプを指定する文字列。指定できる値は "link" (デフォルト) と "button" です。

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

親要素: crowd-form
子要素: なし

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

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

でこの 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 です。

入力ImageProperties

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

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

その他の参照資料

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

イメージにポリラインまたは線を描画するためのウィジェット。各ポリラインはラベルに関連付けられ、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 ブール値で追跡されます。

ラベル

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

制限: 10 ラベル

label-colors

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

name

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

src

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

リージョン

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

full-instructions

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

short-instructions

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

要素の階層

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

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

出力

入力ImageProperties

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

ポリライン

ポリラインのラベルと頂点を持つオブジェクトを含む 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
            }
          ]
        }
      ]
    }
  }

その他の参照資料

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

オンかオフのいずれかにできるボタン。ラジオボタンがラジオグループ内にあるとき、グループのラジオボタンをいつでも 1 つだけオンにすることができます。以下に、crowd-radio-group 要素の中に crowd-radio-button 要素を設定する方法の例を示します。

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

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


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
<crowd-radio-group>
    <crowd-radio-button name="tech" value="tech">Technology</crowd-radio-button>
    <crowd-radio-button name="politics" value="politics">Politics</crowd-radio-button>
</crowd-radio-group>
</crowd-form>

前の例は、この GitHub 例のカスタムワーカータスクテンプレート、エンティティ認識ラベル付けジョブのカスタムテンプレートで確認できます。

Crowd HTML Element のラジオボタンは HTML タグ required をサポートしていません。ラジオボタンの選択を必須にするには、<input type="radio"> 要素を使用してラジオボタンを作成し、required タグを追加します。ラジオボタンの同じグループに属するすべての <input> 要素の name 属性は、同じでなければなりません。例えば、次のテンプレートでは、ユーザーは送信前に animal-type グループのラジオボタンを選択する必要があります。


<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
  <p>Select an animal type:</p>
<img src="https://images.unsplash.com/photo-1537151608828-ea2b11777ee8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1539&q=80" style="height: 500; width: 400;"/>
<br><br>
<div>
  <input type="radio" id="cat" name="animal-type" value="cat" required>
  <label for="cat">Cat</label>
</div>
<div>
  <input type="radio" id="dog" name="animal-type" value="dog">
  <label for="dog">Dog</label>
</div>
<div>
  <input type="radio" id="unknown" name="animal-type" value="unknown">
  <label for="unknown">Unknown</label>
</div>
    <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.</p>
    </full-instructions>
    <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>
</crowd-form>

属性

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

checked

ブールスイッチ。存在する場合、ラジオボタンをオンの状態として表示します。

無効

ブールスイッチ。存在する場合、ボタンを無効なものと表示して、オンにされることを防止します。

name

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

注記

crowd-radio-group 要素外のボタンを使用するが、同じ name 文字列および異なる value 文字列を使用する場合、出力の name オブジェクトには各 value 文字列のブール値が含まれます。グループにある 1 つのボタンのみ選択されるようにするため、それらを crowd-radio-group 要素の子にして異なる名前の値を使用してください。

value

要素のブール値のプロパティ名。指定がない場合は、デフォルトとして "on" が使用されます。例えば、{ "<name>": { "<value>": <true or false> } } です。

要素の階層

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

親要素: crowd-radio-group
子要素: なし

出力

パターンが { "<name>": { "<value>": <true or false> } } のオブジェクトを出力します。crowd-radio-group 要素外のボタンを使用するときに、同じ name 文字列および異なる value 文字列を使用する場合、name オブジェクトには各 value 文字列のブール値が含まれます。ボタンのグループにある 1 つだけが選択されるようにするため、それらを crowd-radio-group 要素の子にして異なる名前の値を使用してください。

例この要素のサンプル出力


[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

その他の参照資料

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

ラジオボタンのグループ。グループ内のラジオボタンを 1 つだけ選択できます。ラジオボタンを 1 つ選択すると、同じグループで以前に選択したラジオボタンはクリアされます。crowd-radio-group 要素を使用するカスタム UI テンプレートの例については、この「エンティティ認識ラベル付けジョブのカスタムテンプレート」を参照してください。

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

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


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

<style>
	body {
		padding-left: 20px;
		margin-bottom: 20px;
	}
	#outer-container {
	    display: flex;
	    justify-content: space-around;
	    max-width: 900px;
	    margin-left: 100px;
	}
	.left-container {
    	margin-right: auto;
    	padding-right: 50px;
	}
	.right-container {
    	margin-left: auto;
    	padding-left: 50px;
	}
	#vertical-separator {
	    border: solid 1px #d5dbdb;
	}
</style>

<crowd-form>
    <div>
        <h1>Instructions</h1>
	Lorem ipsum...
    </div>
    <div>
        <h2>Background</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="outer-container">
	<span class="left-container">
	    <h2>Option 1</h2>
	    <p>Nulla facilisi morbi tempus iaculis urna. Orci dapibus ultrices in iaculis nunc sed augue lacus.</p>
	</span>
	<span id="vertical-separator"></span>
	<span class="right-container">
	    <h2>Option 2</h2>
	    <p>Ultrices vitae auctor eu augue ut. Pellentesque massa placerat duis ultricies lacus sed turpis tincidunt id.</p>
	</span>
    </div>
    <div>
        <h2>Question</h2>
    	<p>Which do you agree with?</p>
	<crowd-radio-group>
	    <crowd-radio-button name="option1" value="Option 1">Option 1</crowd-radio-button>
	    <crowd-radio-button name="option2" value="Option 2">Option 2</crowd-radio-button>
	</crowd-radio-group>

    	<p>Why did you choose this answer?</p>
	<crowd-text-area name="explanation" placeholder="Explain how you reached your conclusion..."></crowd-text-area>
    </div>
</crowd-form>

属性

この要素では、特別な属性はサポートされていません。

要素の階層

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

親要素: crowd-form
子要素: crowd-radio-button

出力

内部の crowd-radio-button 要素を表すオブジェクトの配列を出力します。

例要素の出力サンプル


[
  {
    "btn1": {
      "yes": true
    },
    "btn2": {
      "no": false
    }
  }
]

その他の参照資料

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

イメージをセグメント化して、各イメージセグメントにラベルを割り当てるためのウィジェット。

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

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


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

<crowd-form>
  <crowd-semantic-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 the requested items in the image</p>
    </short-instructions>
  </crowd-semantic-segmentation>
</crowd-form>

属性

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

ヘッダー

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

initial-value

前のセマンティックセグメンテーションジョブのカラーマッピングと、前のジョブによって出力されるオーバーレイイメージへのリンクを含む JSON オブジェクト。これは、人間のワーカーが前のラベル付けジョブの結果を検証し、必要に応じて調整する場合に含めます。

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


  initial-value='{
    "labelMappings": {
        "Bird": {
          "color": "#ff7f0e"
        },
        "Cat": {
          "color": "#2ca02c"
        },
        "Cow": {
          "color": "#d62728"
        },
        "Dog": {
          "color": "#1f77b4"
        }
      },
    "src": {{ "S3 file URL for image" | grant_read_access }}
  }'

Ground Truth を使用する場合、組み込みタスクタイプと注釈統合(複数のワーカーが 1 つのイメージにラベルを付ける場合)、ラベルマッピングは個々のワーカー出力レコードに含まれますが、全体的な結果は統合された結果で internal-color-map として表示されます。

Liquid テンプレート言語を使用して、カスタムテンプレートで internal-color-map を label-mappings に変換できます。


initial-value="{
  'src' : '{{ task.input.manifestLine.label-attribute-name-from-prior-job| grant_read_access }}',
  'labelMappings': {
     {% for box in task.input.manifestLine.label-attribute-name-from-prior-job-metadata.internal-color-map %}
       {% if box[1]['class-name'] != 'BACKGROUND' %}
         {{ box[1]['class-name'] | to_json }}: {
           'color': {{ box[1]['hex-color'] | to_json }}
         },
       {% endif %} 
     {% endfor %}
   } 
}"

ラベル

文字列の JSON 形式の配列であり、各文字列は、ワーカーがイメージのセグメントに割り当てることのできるラベルです。

name

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

src

セグメント化するイメージの URL。

要素の階層

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

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

リージョン

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

full-instructions

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

short-instructions

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

出力

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

labeledImage

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

labelMappings

セグメンテーションラベルを使用して名前が付けられたオブジェクトを含んでいる JSON オブジェクト。

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

初期ValueModified

初期値が変更されたかどうかを表すブール値。これは、出力が調整タスクからのものである場合にのみ含まれます。

入力ImageProperties

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

例 : 要素の出力サンプル

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


[
  {
    "annotatedResult": {
      "inputImageProperties": {
        "height": 533,
        "width": 800
      },
      "labelMappings": {
        "<Label 2>": {
          "color": "#ff7f0e"
        },
        "<label 3>": {
          "color": "#2ca02c"
        },
        "<label 1>": {
          "color": "#1f77b4"
        }
      },
      "labeledImage": {
        "pngImageData": "<Base-64 Encoded Data>"
      }
    }
  }
]

その他の参照資料

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

ワーカーがつまみを動かすことによって値の範囲から値を選択できる、スライドノブ付きのバー。スライダーは、ボリューム、明るさ、彩度など、強度を表す設定に対して最適な選択肢となります。

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

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



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

<crowd-form>
<crowd-instructions link-text="View instructions" link-type="button">
  <short-summary>
    <p>Provide a brief instruction here</p>
  </short-summary>

  <detailed-instructions>
    <h3>Provide more detailed instructions here</h3>
    <p>Include additional information</p>
  </detailed-instructions>

  <positive-example>
    <p>Provide an example of a good answer here</p>
    <p>Explain why it's a good answer</p>
  </positive-example>

  <negative-example>
    <p>Provide an example of a bad answer here</p>
    <p>Explain why it's a bad answer</p>
  </negative-example>
</crowd-instructions>

<div>
  <p>What is your favorite color for a bird?</p>
  <crowd-input name="favoriteColor" placeholder="example: pink" required></crowd-input>
</div>

<div>
  <p>Check this box if you like birds</p>
  <crowd-checkbox name="likeBirds" checked="true" required></crowd-checkbox>
</div>

<div>
  <p>On a scale of 1-10, how much do you like birds?</p>
  <crowd-slider name="howMuch" min="1" max="10" step="1" pin="true" required></crowd-slider>
</div>

<div>
  <p>Write a short essay describing your favorite bird</p>
  <crowd-text-area name="essay" rows="4" placeholder="Lorem ipsum..." required></crowd-text-area>
</div>
</crowd-form>

属性

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

無効

ブールスイッチ。存在する場合、スライダーを無効なものとして表示します。

editable

ブールスイッチ。存在する場合、値を選択するために選択可能な上下のボタンを表示します。

上下のボタンで値を選択すると、スライダーのつまみを動かして値を選択する代わりになります。スライダーのつまみは、上下ボタンによる選択と同期的に移動します。

max

スライダーの最大値を指定する数値。

min

スライダーの最小値を指定する数値。

name

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

ブールスイッチ。存在する場合、つまみの移動中につまみの上に現在の値を表示します。

必須

ブールスイッチ。存在する場合、ワーカーに入力を要求します。

secondary-progress

crowd-slider-secondary-color CSS 属性と共に使用した場合、進行状況バーは secondary-progress によって表された点まで色付けされます。例えば、これがストリーミングビデオの進行状況を表していた場合、value はビデオのタイムラインにおけるビューワーの位置を表します。secondary-progress 値は、ビデオがバッファリングされた、タイムライン上の点を表します。

ステップ

スライダーで選択可能な値の間の差を指定する数値。

value

ワーカーが入力を提供しない場合にデフォルトとなるプリセット。

要素の階層

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

親要素: crowd-form
子要素: なし

その他の参照資料

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

下記の情報を示すタブのような形式のコンポーネント。

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

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


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

<crowd-form>
  <crowd-tabs>
    <crowd-tab header="Tab 1">
      <h2>Image</h2>

      <img
        src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
        style="max-width: 40%"
      >

      <h2>Text</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 2">
      <h2>Description</h2>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 3">
      <div style="width: 40%; display: inline-block">
        <img
          src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
          style="max-width: 80%"
        >
        <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input>
        <input type="checkbox" name="checkbox" value="foo">Foo
        <input type="checkbox" name="checkbox" value="bar">Bar
        <crowd-button>Some button</crowd-button>
      </div>

      <div style="width: 40%; display: inline-block; vertical-align: top">
        Lorem ipsum dolor sit amet, lorem a wisi nibh, in pulvinar, consequat praesent vestibulum tellus ante felis auctor, vitae lobortis dictumst mauris. 
        Pellentesque nulla ipsum ante quisque quam augue. 
        Class lacus id euismod, blandit tempor mauris quisque tortor mauris, urna gravida nullam pede libero, ut suscipit orci faucibus lacus varius ornare, pellentesque ipsum. 
        At etiam suspendisse est elementum luctus netus, vel sem nulla sodales, potenti magna enim ipsum diam tortor rutrum, 
        quam donec massa elit ac, nam adipiscing sed at leo ipsum consectetuer. Ac turpis amet wisi, porttitor sint lacus ante, turpis accusantium, ac maecenas deleniti, 
        nisl leo sem integer ac dignissim. Lobortis etiam luctus lectus odio auctor. Justo vitae, felis integer id, bibendum accumsan turpis eu est mus eros, ante id eros. 
      </div>
    </crowd-tab>

  </crowd-tabs>

  <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input>

  <short-instructions>
    <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p>
</short-instructions>

<full-instructions header="Classification Instructions">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Tempus egestas sed sed risus.</p>
</full-instructions>

</crowd-form>

属性

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

ヘッダー

タブに表示されるテキスト。これは通常、タブの下に含まれた情報を示す、短くわかりやすい名前です。

要素の階層

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

親要素: crowd-tabs
子要素: なし

その他の参照資料

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

タブ化された情報のコンテナ。

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

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


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

<crowd-form>
  <crowd-tabs>
    <crowd-tab header="Tab 1">
      <h2>Image</h2>

      <img
        src="https://images.unsplash.com/photo-1478382188900-5bb598fe27d3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80"
        style="max-width: 40%"
      >

      <h2>Text</h2>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 2">
      <h2>Description</h2>
      <p>
      Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.
      </p>
    </crowd-tab>

    <crowd-tab header="Tab 3">
      <div style="width: 40%; display: inline-block">
        <img
          src="https://images.unsplash.com/photo-1472747459646-91fd6f13995f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
          style="max-width: 80%"
        >
        <crowd-input label="Input inside tab" name="inputInsideTab"></crowd-input>
        <input type="checkbox" name="checkbox" value="foo">Foo
        <input type="checkbox" name="checkbox" value="bar">Bar
        <crowd-button>Some button</crowd-button>
      </div>

      <div style="width: 40%; display: inline-block; vertical-align: top">
        Lorem ipsum dolor sit amet, lorem a wisi nibh, in pulvinar, consequat praesent vestibulum tellus ante felis auctor, vitae lobortis dictumst mauris. 
        Pellentesque nulla ipsum ante quisque quam augue. 
        Class lacus id euismod, blandit tempor mauris quisque tortor mauris, urna gravida nullam pede libero, ut suscipit orci faucibus lacus varius ornare, pellentesque ipsum. 
        At etiam suspendisse est elementum luctus netus, vel sem nulla sodales, potenti magna enim ipsum diam tortor rutrum, 
        quam donec massa elit ac, nam adipiscing sed at leo ipsum consectetuer. Ac turpis amet wisi, porttitor sint lacus ante, turpis accusantium, ac maecenas deleniti, 
        nisl leo sem integer ac dignissim. Lobortis etiam luctus lectus odio auctor. Justo vitae, felis integer id, bibendum accumsan turpis eu est mus eros, ante id eros. 
      </div>
    </crowd-tab>

  </crowd-tabs>

  <crowd-input label="Input outside tabs" name="inputOutsideTab"></crowd-input>

  <short-instructions>
    <p>Sed risus ultricies tristique nulla aliquet enim tortor at auctor. Tempus egestas sed sed risus.</p>
</short-instructions>

<full-instructions header="Classification Instructions">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    <p> Tempus egestas sed sed risus.</p>
</full-instructions>

</crowd-form>

属性

この要素に属性はありません。

要素の階層

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

親要素: crowd-form
子要素: crowd-tab

その他の参照資料

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

テキスト入力用のフィールド。

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

<crowd-text-area> 要素を使用するオーディオクリップを書き起こすように設計された Liquid テンプレートの例を次に示します。次のコードをコピーし、拡張子 .html でファイルに保存します。任意のブラウザでファイルを開き、このテンプレートをプレビューして操作します。


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

<crowd-form>
  <audio controls>
      <source src="{{ task.input.taskObject | grant_read_access }}" type="audio/mpeg">
      Your browser does not support the audio element.
  </audio>
  <h3>Instructions</h3>
  <p>Transcribe the audio</p>
  <p>Ignore "umms", "hmms", "uhs" and other non-textual phrases</p>
  <crowd-text-area name="transcription" rows="4"></crowd-text-area>
</crowd-form>

属性

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

allowed-pattern

ワーカータイプとして一致しない文字を無視するために、auto-validate 属性と共に使用される正規表現。

auto-focus

ブールスイッチ。存在する場合、ユーザーが要素内部をクリックせずにすぐ入力を開始できるように、ロード時にカーソルをこの要素に置きます。

auto-validate

ブールスイッチ。存在する場合、入力の検証を有効にします。検証の動作は error-message 属性と allowed-pattern 属性によって変更できます。

char-counter

ブールスイッチ。存在する場合、要素の右下隅の下方に小さなテキストフィールドを配置して要素内の文字数を表示します。

無効

ブールスイッチ。存在する場合、入力領域を無効なものとして表示します。

error-message

検証が失敗した場合に、入力フィールドの下、左側に表示されるテキスト。

ラベル

テキストフィールド内に表示される文字列。

max-length

要素で許可される最大文字数を指定する整数。最大値を超えて入力または貼り付けた文字は無視されます。

max-rows

内で許可されるテキストの最大行数を指定する整数 crowd-text-area。通常、要素は新しい行に対応するように拡張します。これを設定した場合に行数が設定値を超えると、コンテンツは上方にスクロールして表示外となり、スクロールバーコントロールが表示されます。

name

出力で要素のデータを表すために使用される文字列。

プレースホルダー

プレースホルダーテキストとしてユーザーに表示される文字列。ユーザーが入力領域に何か入力すると消えます。

rows

要素の高さをテキストの行数で指定する整数。

value

ワーカーが入力を提供しない場合にデフォルトとなるプリセット。プリセットはテキストフィールドに表示されます。

要素の階層

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

親要素: crowd-form
子要素: なし

出力

この要素は、name をプロパティ名として出力し、要素のテキストコンテンツを値として出力します。テキストの改行は \n として表されます。

例この要素のサンプル出力


[
  {
    "textInput1": "This is the text; the text that\nmakes the crowd go wild."
  }
]

その他の参照資料

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

ディスプレイに一時的に表示される微小な通知。1 つの crowd-toast のみ表示できます。

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

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




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

<crowd-form>
  <p>Find the official website for: <strong>{{ task.input.company }}</strong></p>
  <p>Do not give Yelp pages, LinkedIn pages, etc.</p>
  <p>Include the http:// prefix from the website</p>
  <crowd-input name="website" placeholder="http://example.com"></crowd-input>

  <crowd-toast duration="10000" opened>
    This is a message that you want users to see when opening the template. This message will disappear in 10 seconds. 
   </crowd-toast>

</crowd-form>

属性

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

duration

通知が画面に表示される期間をミリ秒単位で指定する数値。

text

通知に表示するテキスト。

要素の階層

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

親要素: crowd-form
子要素: なし

その他の参照資料

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

状態を切り替えるオン/オフのスイッチとして機能するボタン。

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

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


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

<crowd-form>
  <!--Toggle button without value-->
  <crowd-toggle-button name="toggleButtonWithoutValue"></crowd-toggle-button>

  <!--Toggle button with value-->
  <crowd-toggle-button name="toggleButtonWithValue" value="someValue"></crowd-toggle-button>

  <!--Toggle button disabled-->
  <crowd-toggle-button name="toggleButtonDisabled" disabled></crowd-toggle-button>

  <!--Toggle button marked invalid-->
  <crowd-toggle-button name="toggleButtonInvalid" invalid></crowd-toggle-button>

  <!--Toggle button marked required-->
  <crowd-toggle-button name="toggleButtonRequired" required></crowd-toggle-button>
</crowd-form>

属性

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

checked

ブールスイッチ。存在する場合、オンの位置に切り替えられたボタンを表示します。

無効

ブールスイッチ。存在する場合、ボタンを無効なものと表示して切り替えを防止します。

invalid

オフの位置にある場合、この属性を使用するボタンはアラート色で表示されます。標準は赤ですが、CSS で変更することができます。オンに切り替えると、ボタンはオンの位置にある他のボタンと同じ色で表示されます。

name

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

必須

ブールスイッチ。存在する場合、ワーカーに入力を要求します。

value

要素のブール状態を表すプロパティ名として、出力で使用される値。指定しない場合、デフォルトで "on" になります。

要素の階層

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

親要素: crowd-form
子要素: なし

出力

この要素は name をオブジェクトの名前として出力します。value がプロパティ名として含まれ、要素の状態がプロパティのブール値として含まれています。要素に value が指定されていない場合、プロパティ名はデフォルトで "on" になります。

例この要素のサンプル出力


[
  {
    "theToggler": {
      "on": true
    }
  }
]

その他の参照資料

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

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

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

ドキュメントの表記規則

Crowd HTML 要素のリファレンス

Augmented AI Crowd HTML 要素