crowd-entity-annotation

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

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

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

その他の参照資料

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

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

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