本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

# 示範範本：使用 `crowd-classifier` 標籤意圖
<a name="sms-custom-templates-step2-demo2"></a>

如果您選擇自訂範本，您將進入 **Custom labeling task panel** (自訂標籤任務面板)。那裡有多個代表一些較常用任務的入門範本供您選擇。範本提供起點來開始建置自訂標籤任務的範本。

在此示範中，您使用 **Intent Detection** (意圖偵測) 範本，此範本使用 `crowd-classifier` 元素，以及您在任務前後處理資料所需的 AWS Lambda 函式。

**Topics**
+ [入門意圖偵測自訂範本](#sms-custom-templates-step2-demo2-base-template)
+ [您的意圖偵測自訂範本](#sms-custom-templates-step2-demo2-your-template)
+ [您的註釋前 Lambda 函式](#sms-custom-templates-step2-demo2-pre-lambda)
+ [您的註釋後 Lambda 函式](#sms-custom-templates-step2-demo2-post-lambda)
+ [您的標籤工作輸出](#sms-custom-templates-step2-demo2-job-output)

## 入門意圖偵測自訂範本
<a name="sms-custom-templates-step2-demo2-base-template"></a>

這是意圖偵測範本，提供做為起點使用。

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

<crowd-form>
  <crowd-classifier
    name="intent"
    categories="{{ task.input.labels | to_json | escape }}"
    header="Pick the most relevant intention expressed by the below text"
  >
    <classification-target>
      {{ task.input.utterance }}
    </classification-target>
    
    <full-instructions header="Intent Detection Instructions">
        <p>Select the most relevant intention expressed by the text.</p>
        <div>
           <p><strong>Example: </strong>I would like to return a pair of shoes</p>
           <p><strong>Intent: </strong>Return</p>
        </div>
    </full-instructions>

    <short-instructions>
      Pick the most relevant intention expressed by the text
    </short-instructions>
  </crowd-classifier>
</crowd-form>
```

自訂範本使用 [Liquid 範本語言](https://shopify.github.io/liquid/)，雙大括號括住的每個項目都是變數。註釋前 AWS Lambda 函數應該提供名為 的物件，`taskInput`而且該物件的屬性可以像 範本`{{ task.input.<property name> }}`一樣存取。

## 您的意圖偵測自訂範本
<a name="sms-custom-templates-step2-demo2-your-template"></a>

入門範本中有兩個變數：在 `crowd-classifier` 元素開頭標籤中的 `task.input.labels` 屬性以及 `classification-target` 區域內容中的 `task.input.utterance`。

除非您需要提供具有不同表達用語的不同標籤組，否則避免變數並且只使用文字可以節省處理時間並減少出錯的可能。此示範中使用的範本將移除該變數，但 `to_json` 之類的變數和篩選條件將在 [`crowd-bounding-box` 示範]()一文中詳細說明。

### 設定元素的樣式
<a name="sms-custom-templates-step2-demo2-instructions"></a>

這些自訂元素的兩個部分有時候會被忽略：`<full-instructions>` 和 `<short-instructions>` 區域。良好的指示可以產生良好的結果。

在包括這些區域的元素中，`<short-instructions>` 會自動出現在工作者畫面左側的 “指示” 窗格中。`<full-instructions>` 是連結自該窗格頂端附近的 “檢視完整說明” 連結。按一下連結以開啟模態窗格，其中包含更多詳細的說明。

在這些部分不只能使用 HTML、CSS 和 JavaScript，如果您認為自己可以提供一系列能協助工作者以更快的速度和準確性完成任務的強大說明集，我們也鼓勵您這麼做。

**Example 試試看搭配 JSFiddle 的範例**  
[https://jsfiddle.net/MTGT_Fiddle_Manager/bjc0y1vd/35/](https://jsfiddle.net/MTGT_Fiddle_Manager/bjc0y1vd/35/)  
 試試[範例 `<crowd-classifier>` 任務](https://jsfiddle.net/MTGT_Fiddle_Manager/bjc0y1vd/35/)。此範例由 JSFiddle 轉譯，因此所有範本變數都取代為硬式編碼的值。按一下 “檢視完整說明” 連結，查看使用延伸 CSS 樣式的一組範例。您可以延伸專案來試驗自己的 CSS 變更、新增範例影像、或新增延伸的 JavaScript 功能。

**Example ：最終自訂意圖偵測範本**  
這個範例使用[範例 `<crowd-classifier>` 任務](https://jsfiddle.net/MTGT_Fiddle_Manager/bjc0y1vd/35/)，但搭配 `<classification-target>` 的變數。如果您嘗試在一系列不同的標籤工作中保持一致的 CSS 設計，您可以使用 `<link rel...>` 元素包含外部樣式表，使用方式與其他 HTML 文件相同。  

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

<crowd-form>
  <crowd-classifier
    name="intent"
    categories="['buy', 'eat', 'watch', 'browse', 'leave']"
    header="Pick the most relevant intent expressed by the text below"
  >
    <classification-target>
      {{ task.input.source }}
    </classification-target>
    
    <full-instructions header="Emotion Classification Instructions">
      <p>In the statements and questions provided in this exercise, what category of action is the speaker interested in doing?</p>
          <table>
            <tr>
              <th>Example Utterance</th>
              <th>Good Choice</th>
            </tr>
            <tr>
              <td>When is the Seahawks game on?</td>
              <td>
                eat<br>
                <greenbg>watch</greenbg>
                <botchoice>browse</botchoice>
              </td>
            </tr>
            <tr>
              <th>Example Utterance</th>
              <th>Bad Choice</th>
            </tr>
            <tr>
              <td>When is the Seahawks game on?</td>
              <td>
                buy<br>
                <greenbg>eat</greenbg>
                <botchoice>watch</botchoice>
              </td>
            </tr>
          </table>
    </full-instructions>

    <short-instructions>
      What is the speaker expressing they would like to do next?
    </short-instructions>  
  </crowd-classifier>
</crowd-form>
<style>
  greenbg {
    background: #feee23;
    display: block;
  }

  table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0; 
  }

  th, tfoot, .fakehead {
    background-color: #8888ee;
    color: #f3f3f3;
    font-weight: 700;
  }

  th, td, tfoot {
      border: 1px solid blue;
  }

  th:first-child {
    border-radius: 6px 0 0 0;
  }

  th:last-child {
    border-radius: 0 6px 0 0;
  }

  th:only-child{
    border-radius: 6px 6px 0 0;
  }

  tfoot:first-child {
    border-radius: 0 0 6px 0;
  }

  tfoot:last-child {
    border-radius: 0 0 0 6px;
  }

  tfoot:only-child{
    border-radius: 6px 6px;
  }

  td {
    padding-left: 15px ;
    padding-right: 15px ;
  }

  botchoice {
    display: block;
    height: 17px;
    width: 490px;
    overflow: hidden;
    position: relative;
    background: #fff;
    padding-bottom: 20px;
  }

  botchoice:after {
    position: absolute;
    bottom: 0;
    left: 0;  
    height: 100%;
    width: 100%;
    content: "";
    background: linear-gradient(to top,
       rgba(255,255,255, 1) 55%, 
       rgba(255,255,255, 0) 100%
    );
    pointer-events: none; /* so the text is still selectable */
  }
</style>
```

**Example ：您的資訊清單檔案**  
如果為此類文字分類任務手動準備資訊清單檔案，請依照下列方式來格式化您的資料。  

```
{"source": "Roses are red"}
{"source": "Violets are Blue"}
{"source": "Ground Truth is the best"}
{"source": "And so are you"}
```

這與用於 “[示範範本：使用 `crowd-bounding-box` 註釋影像](sms-custom-templates-step2-demo1.md)” 示範中的資訊清單檔案不同，因為 `source-ref` 被用做屬性名稱而不是 `source`。對於必須轉換成 HTTP 的影像或其他檔案，可使用 `source-ref` 來指定 S3 URI。否則，`source` 應該類似上述文字字串一樣使用。

## 您的註釋前 Lambda 函式
<a name="sms-custom-templates-step2-demo2-pre-lambda"></a>

作為任務設定的一部分，提供 的 ARN AWS Lambda ，該 ARN 可以呼叫 來處理資訊清單項目並將其傳遞至範本引擎。

這個 Lambda 函式需要在函式名稱中具有以下四個字串之一：`SageMaker`、`Sagemaker`、`sagemaker` 或 `LabelingFunction`。

這適用於註釋前和註釋後 Lambda。

使用主控台時，如果您的帳戶擁有 Lambdas，則會提供符合命名要求之函式的下拉式清單，讓您選擇其中一個。

在此非常基本的範例中您只會有一個變數，該變數主要是傳遞函式。下列是使用 Python 3.7 的範例標籤前 Lambda。

```
import json

def lambda_handler(event, context):
    return {
        "taskInput":  event['dataObject']
    }
```

`event` 的 `dataObject` 屬性包含來自資訊清單中資料物件的屬性。

在此示範中 (簡單的傳遞)，你只是將它直接傳遞為 `taskInput` 值。如果您新增具有這些值的屬性至 `event['dataObject']` 物件，則它們將做為具有 `{{ task.input.{{<property name>}} }}` 格式的 Liquid 變數提供給 HTML 範本使用。

## 您的註釋後 Lambda 函式
<a name="sms-custom-templates-step2-demo2-post-lambda"></a>

在任務設定過程中，提供 Lambda 函式的 ARN，當工作者完成任務時，就可呼叫來處理表單資料。根據您的需要，此部分可以簡單也可以複雜。如果您希望在資料傳入時進行回答整合與評分，您可以套用您選擇的評分或整合演算法。如果您希望存放原始資料以進行離線處理，則可以選擇此選項。

**設定註釋後 Lambda 函式許可**  
註釋資料會位於由 `payload` 物件中之 `s3Uri` 字串所指定的檔案中。若要處理註釋 (即使是簡單的傳遞函式)，您也需要為 Lambda 指派 `S3ReadOnly` 存取權以便其讀取註釋檔案。  
在建立 Lambda 的主控台頁面中，捲動至 **Execution role** (執行角色) 面板。選取 **Create a new role from one or more templates** (從一或多個範本建立新角色)。為角色命名。從 **Policy templates** (政策範本) 下拉式清單，選擇 **Amazon S3 object read-only permissions** (Amazon S3 物件唯讀許可)。儲存 Lambda，即會儲存並選取角色。

下列範例適用於 Python 3.7。

```
import json
import boto3
from urllib.parse import urlparse

def lambda_handler(event, context):
    consolidated_labels = []

    parsed_url = urlparse(event['payload']['s3Uri']);
    s3 = boto3.client('s3')
    textFile = s3.get_object(Bucket = parsed_url.netloc, Key = parsed_url.path[1:])
    filecont = textFile['Body'].read()
    annotations = json.loads(filecont);
    
    for dataset in annotations:
        for annotation in dataset['annotations']:
            new_annotation = json.loads(annotation['annotationData']['content'])
            label = {
                'datasetObjectId': dataset['datasetObjectId'],
                'consolidatedAnnotation' : {
                'content': {
                    event['labelAttributeName']: {
                        'workerId': annotation['workerId'],
                        'result': new_annotation,
                        'labeledContent': dataset['dataObject']
                        }
                    }
                }
            }
            consolidated_labels.append(label)

    return consolidated_labels
```

## 您的標籤工作輸出
<a name="sms-custom-templates-step2-demo2-job-output"></a>

註釋後 Lambda 通常會在事件物件中接收任務結果批次。該批次將是 Lambda 應重複執行的 `payload` 物件。

您將在指定之目標 S3 儲存貯體中以標籤工作命名的資料夾中找到工作輸出。該輸出位於名為 `manifests` 的子資料夾。

針對意圖偵測任務，輸出資訊清單中的輸出看起來會如下列示範。此範例已經過清理並加以間隔，以方便人們閱讀。實際輸出會更為壓縮，適合機器閱讀。

**Example ：您輸出資訊清單中的 JSON**  

```
[
  {
    "datasetObjectId":"<Number representing item's place in the manifest>",
     "consolidatedAnnotation":
     {
       "content":
       {
         "<name of labeling job>":
         {     
           "workerId":"private.us-east-1.{{XXXXXXXXXXXXXXXXXXXXXX}}",
           "result":
           {
             "intent":
             {
                 "label":"<label chosen by worker>"
             }
           },
           "labeledContent":
           {
             "content":"<text content that was labeled>"
           }
         }
       }
     }
   },
  "datasetObjectId":"<Number representing item's place in the manifest>",
     "consolidatedAnnotation":
     {
       "content":
       {
         "<name of labeling job>":
         {     
           "workerId":"private.us-east-1.6UDLPKQZHYWJQSCA4MBJBB7FWE",
           "result":
           {
             "intent":
             {
                 "label": "<label chosen by worker>"
             }
           },
           "labeledContent":
           {
             "content": "<text content that was labeled>"
           }
         }
       }
     }
   },
     ...
     ...
     ...
]
```

這應可協助您建立和使用自己的自訂範本。