ステップ 2: カスタムワーカータスクテンプレートの作成 - Amazon SageMaker

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

ステップ 2: カスタムワーカータスクテンプレートの作成

ワーカータスクテンプレートは、Ground Truth がワーカーのユーザーインターフェイス (UI) またはヒューマンタスク UI をカスタマイズするために使用するファイルです。ワーカータスクテンプレートは、HTML、CSS、JavaScript、Liquid テンプレート言語、Crowd HTML 要素を使用して作成できます。Liquid はテンプレートを自動化するために使用され、Crowd HTML Elements は、共通の注釈ツールを含めて、Ground Truth に送信するロジックを提供するために使用できます。

次のトピックでは、ワーカータスクテンプレートを作成する方法について説明します。Ground Truth ワーカータスクテンプレートの例のリポジトリは、GitHub で確認できます。

基本テンプレートで開始する

Ground Truth コンソールのテンプレートエディタを使用して、テンプレートの作成を開始できます。このエディタには、事前設計された多数のベーステンプレートと、HTML、Crowd HTML 要素の自動入力機能が含まれています。

Ground Truth カスタムテンプレートエディタにアクセスするには、次の手順を実行します。

  1. ラベル付けジョブの作成 (コンソール) の指示に従って、ラベル付けジョブの [Task type] (タスクタイプ) で [Custom] (カスタム) を選択します。

  2. [Next] (次へ) を選択すると、 [Custom labeling task setup] (カスタムラベル付けタスクの設定) セクションのテンプレートエディタと基本テンプレートにアクセスできます。

  3. (オプション) [Templates] (テンプレート) のドロップダウンメニューから基本テンプレートを選択します。テンプレートを最初から作成する場合は、ドロップダウンメニューから [Custom] (カスタム) を選択して、最小スケルトンのテンプレートを使用します。

テンプレートをローカルで開発する

テンプレートが入力データをどのように処理するかをテストするにはコンソールにアクセスしている必要がありますが、次のコードを HTML ファイルの先頭に追加することによって、テンプレートの HTML およびカスタム要素のブラウザでのルックアンドフィールをテストできます。

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

これによって、カスタム HTML 要素のレンダリングに必要なコードがロードされます。これは、テンプレートのルックアンドフィールをコンソールではなく任意のエディタで開発する場合に使用します。

ただし、変数は解析されません。ローカルでの開発中に、それらをサンプルコンテンツで置き換えることができます。

外部アセットの使用

Amazon SageMaker Ground Truth カスタムテンプレートを使用すると、外部スクリプトやスタイルシートを埋め込むことができます。例えば、次のコードブロックは、https://www.example.com/my-enhancement-styles.css にあるスタイルシートをテンプレートに追加する方法を示しています。

<script src="https://www.example.com/my-enhancment-script.js"></script> <link rel="stylesheet" type="text/css" href="https://www.example.com/my-enhancement-styles.css">

エラーが発生した場合は、元のサーバーがアセットを含む正しい MIME タイプとエンコードヘッダーを送信していることを確認します。

例えば、リモートスクリプト用の MIME とエンコードタイプは application/javascript;CHARSET=UTF-8 です。

リモートスタイルシート用の MIME と エンコードタイプは text/css;CHARSET=UTF-8 です。

変数を追跡する

次のサンプルの構築プロセスには、タスクごと、ワーカーごとに変化することがあるデータを表すために変数を追加するステップがあります。サンプルテンプレートの 1 つから開始する場合、そのテンプレートで既に使用されている変数を確実に把握する必要があります。注釈前 AWS Lambda スクリプトを作成するときは、その出力に、保持することを選択した変数の値が含まれている必要があります。

変数に使用する値は、マニフェストファイルから取得できます。データオブジェクト内のキーと値のペアはすべて、前注釈 Lambda に渡されます。シンプルなパススルースクリプトの場合は、データオブジェクトの値のキーとテンプレートの変数名を一致させるのが、ワーカーに表示されるタスクフォームにこれらの値を渡すための最も簡単な方法です。

シンプルなサンプル

すべてのタスクは <crowd-form> </crowd-form> 要素で開始および終了します。標準の HTML <form> 要素と同様に、すべてのフォームコードはそれらの間に記述します。

シンプルなツイート分析タスクでは、<crowd-classifier> 要素を使用します。以下の属性は必須です。

  • name - フォーム出力で結果に使用する変数名。

  • categories - JSON 形式の配列による考えられる回答。

  • header - 注釈ツールのタイトル。

<crowd-classifier> 要素の子として 3 つのリージョンを持っている必要があります。

  • <classification-target> - 上記の categories 属性に指定されたオプションに基づいてワーカーが分類するテキスト。

  • <full-instructions> - ツールの [View full instructions (詳細な手順の表示)] リンクから使用できる手順。これを空白のままにすることはできますが、より良い結果を得るための適切な手順を提供することをお勧めします。

  • <short-instructions> - ツールのサイドバーに表示される、タスクのより簡単な説明。これを空白のままにすることはできますが、より良い結果を得るための適切な手順を提供することをお勧めします。

このツールのシンプルなバージョンは次のようになります。

crowd-classifier の使用

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script> <crowd-form> <crowd-classifier name="tweetFeeling" categories="['positive','negative','neutral', 'unclear']" header="Which term best describes this tweet?" > <classification-target> My favorite football team won today! Bring on the division finals! </classification-target> <full-instructions header="Sentiment Analysis Instructions"> Try to determine the sentiment the author of the tweet is trying to express. If none seem to match, choose "cannot determine." </full-instructions> <short-instructions> Pick the term best describing the sentiment of the tweet. </short-instructions> </crowd-classifier> </crowd-form>

Ground Truth ラベル付けジョブ作成ワークフローでコードをエディタにコピーアンドペーストしてツールをプレビューするか、CodePen でこのコードのデモを試すことができます。


                            View a demo of this sample template on CodePen

Liquid を使用してオートメーションを追加する

カスタムテンプレートシステムは、オートメーションに Liquid を使用します。これはオープンソースのインラインマークアップ言語です。Liquid では、一重波括弧とパーセント記号で囲まれたテキストは、制御フローやイテレーションなどを実行する 1 つの手順またはタグになります。二重波括弧で囲まれたテキストは、値を出力する 1 つの変数またはオブジェクトです。

最も一般的な Liquid の使用法としては、[前注釈タスク Lambda] からのデータを解析して、タスクを作成するために関連する変数を抽出します。前注釈 Lambda から返された taskInput オブジェクトは、テンプレートの task.input オブジェクトとして利用可能になります。

マニフェストのデータオブジェクトのプロパティは、event.dataObject として 前注釈 Lambda に渡されます。シンプルなパススルースクリプトによって、そのオブジェクトは taskInput オブジェクトとして返ります。マニフェストの値は、変数として次のように表現します。

例 マニフェストデータオブジェクト

{ "source": "This is a sample text for classification", "labels": [ "angry" , "sad" , "happy" , "inconclusive" ], "header": "What emotion is the speaker feeling?" }

例 変数を使用したサンプル HTML

<crowd-classifier name='tweetFeeling' categories='{{ task.input.labels | to_json }}' header='{{ task.input.header }}' > <classification-target> {{ task.input.source }} </classification-target>

上記の labels プロパティに " | to_json" が追加されている点に注意してください。これは配列を配列の JSON 形式に変換するためのフィルターです。可変フィルターについては次のセクションで説明します。

次のリストには、テンプレート入力データの処理を自動化するのに便利な 2 種類の Liquid タグが含まれています。以下のタグタイプのいずれかを選択すると、Liquid のドキュメントにリダイレクトされます。

  • フロー制御: 次のようなプログラミングロジック演算子が含まれています。if/else,unless, およびcase/when

  • イテレーション: for ループなどのステートメントを使用して、コードのブロックを繰り返し実行できます。

    Liquid 要素を使用して FOR LOOP を作成する HTML テンプレートの例については、GitHub で translation-review-and-correction.liquid.html を参照してください。

詳細とドキュメントについては、Liquid のホームページを参照してください。

可変フィルター

標準の Liquid フィルターとアクションに加えて、Ground Truth には追加のフィルターがいくつか用意されています。フィルターを適用するには、パイプ (|) 文字を変数名の後ろに配置してからフィルター名を指定します。フィルターは次の形式で連鎖できます。

{{ <content> | <filter> | <filter> }}

自動的なエスケープおよび明示的なエスケープ

デフォルトでは、変数テキストと HTML との間の混乱を避けるために、入力はエスケープされた HTML になります。escape フィルターを明示的に追加すると、エスケープ処理の完了しているテンプレートのソースをユーザーが読み取ることをより明確に指定できます。

escape_once

escape_once を使用すると、既にエスケープしたコードは確実に再度エスケープされなくなります。これにより、例えば、&amp; は &amp;amp; になりません。

skip_autoescape

skip_autoescape は、コンテンツが HTML として使用されるよう設計されている場合に便利です。例えば、いくつかの段落のテキストとイメージが境界ボックスの詳細な手順にある場合です。

skip_autoescape の使用は慎重に

テンプレートにおけるベストプラクティスは、skip_autoescape を使用して関数コードやマークアップを渡さないようにすることです。ただし、渡す内容を厳重に管理できることが確実な場合を除きます。ユーザー入力を渡している場合は、ワーカーをクロスサイトスクリプティング攻撃に対して開放している可能性があります。

to_json

to_json は、JSON (JavaScript Object Notation) に供給する内容をエンコードします。オブジェクトを供給している場合は、シリアル化されます。

grant_read_access

grant_read_access は S3 URI を使用し、そのリソースに対する存続期間の短いアクセストークンを使用する HTTPS URL にエンコードします。これにより、通常であればパブリックにアクセス可能でない、S3 バケットに保存された写真、音声、または動画オブジェクトをワーカーに表示できるようになります。

例 フィルターの

Input

auto-escape: {{ "Have you read 'James & the Giant Peach'?" }} explicit escape: {{ "Have you read 'James & the Giant Peach'?" | escape }} explicit escape_once: {{ "Have you read 'James &amp; the Giant Peach'?" | escape_once }} skip_autoescape: {{ "Have you read 'James & the Giant Peach'?" | skip_autoescape }} to_json: {{ jsObject | to_json }} grant_read_access: {{ "s3://mybucket/myphoto.png" | grant_read_access }}

出力

auto-escape: Have you read &#39;James &amp; the Giant Peach&#39;? explicit escape: Have you read &#39;James &amp; the Giant Peach&#39;? explicit escape_once: Have you read &#39;James &amp; the Giant Peach&#39;? skip_autoescape: Have you read 'James & the Giant Peach'? to_json: { "point_number": 8, "coords": [ 59, 76 ] } grant_read_access: https://s3.amazonaws.com/mybucket/myphoto.png?<access token and other params>

例 自動分類テンプレートの

このシンプルなテキスト分類サンプルを自動化するには、ツイートテキストを変数に置き換えます。

以下のテキスト分類テンプレートには、自動化が追加されています。変更および追加は太字で表示されています。

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script> <crowd-form> <crowd-classifier name="tweetFeeling" categories="['positive', 'negative', 'neutral', 'cannot determine']" header="Which term best describes this tweet?" > <classification-target> {{ task.input.source }} </classification-target> <full-instructions header="Analyzing a sentiment"> Try to determine the feeling the author of the tweet is trying to express. If none seem to match, choose "other." </full-instructions> <short-instructions> Pick the term best describing the sentiment of the tweet. </short-instructions> </crowd-classifier> </crowd-form>

以前のサンプルにあったツイートテキストは、オブジェクトに置き換えられています。entry.taskInput オブジェクトは source (または前注釈 Lambda で指定する別の名前) をテキストのプロパティ名として使用し、これは二重波括弧で囲まれていることから直接 HTML に挿入されます。

エンドツーエンドのデモ

サンプルの Lambda 関数が含まれている、以下のエンドツーエンドのデモを見ることができます。

ステップ 3: を使用した処理AWS Lambda