数据科学家们试图应用监督学习技术解决问题时，通常须要在着手建模之前整顿出高质量的标记数据集。这可是个辛苦活。好在 Amazon SageMaker Ground Truth 的呈现让每个人都能针对多种不同的工作（例如文本分类与对象检测），轻松地取得本人须要的数据集。
Ground Truth 还能帮忙大家为用户自定义的工作构建自定义数据集，对其中的任意内容做出标注。为了实现这项性能，Ground Truth 充分发挥以下 AWS 服务的弱小能力：
- 自定义 AWS Lambda 函数，用于在各标记步骤之间触发特定操作。据此，咱们能够在标记之前执行自定义逻辑，例如过滤示例或者通过其余服务（Amazon Translate 或 Amazon Rekognition）增加元数据；也能够在实现标记之后执行用于标签合并或品质管制的逻辑。
- 自定义 Web 模板，容许咱们应用 HTML、JavaScript 自定义用户界面，并与 Ground Truth 工作流完满集成。这些模板可通过 Crowd HTML Elements 轻松构建（Crowd HTML Elements 是一组用于文本、视频以及音频标记作业的通用 UI 元素，咱们能够像在自定义模板中调整版块那样对其任意排列）。
- 如果须要特定领域专家团队的具体参加，则能够在 AWS Marketplace 及 Amazon Mechanical Turk 中分割到泛滥纯熟且业余的从业人员。AWS Marketplace 中的认证合作伙伴精通多种语言，可能依据多种行业的理论需要（例如医疗保健行业）对视频及图像内容做出有针对性的注解。
然而对于简单的标记工作，例如艰难的分类规范设定、极其多样的分类或者主动驾驶标记工作，大家可能须要为标记工作人员构建起更宏大的前端应用程序。在这类状况下，Angular 等前端框架能够发挥作用，通过多种十分实用的设计模式（例如模型 – 视图 – 控制器，简称 MVC）显著改善面向设计人员与开发人员宏大团队的用户体验 / 用户界面成果，同时保障整体代码库更强壮、更具可维护性。
本文将疏导大家逐渐应用 Angular 与 Angular Elements 创立起可齐全自定义的解决方案，并将该计划与 Ground Truth 完满匹配。本演练要求大家可能纯熟应用 Ground Truth 与 Crowd HTML Elements 运行自定义标记作业。对于更多详细信息，请参阅应用 Amazon SageMaker Ground Truth 构建自定义数据标记工作流。
本文中形容的办法还可与 Amazon Augmented AI（Amazon A2I）配合应用，这将进一步升高构建须要人工审查的机器学习预测工作流的难度。这样的便利性，归功于 Amazon A2I 应用 Crowd HTML Elements 创立自定义工作模板。对于更多详细信息，请参阅创立自定义工作模板。
为简单的分类计划构建一套自定义 UI
如果咱们在治理一套大规模供应链，并且须要与寰球各地的餐厅或汽车制造商等不同类型的供应链发展互动，那么肯定会收到多种格局不同、语言各异的发票。为了跟踪经营情况并进步财务效率，大家须要在对发票及收据与产品大类对应起来，并依照层级分类法将其收归组织。
下图所示，为计算机组件的层级分类法架构：
下图所示，为食物类型的层级分类法架构：
层级分类法的叶层级能够蕴含多至数各千个分类。理论用例则包含 Web 目录（Yahho! Directory 或 Open Directory Project）、图书馆分类法（Dewey Decimal 或者美国国会图书馆）、自然科学、法律以及医学畛域中利用的多种分类计划。
如果自然语言解决（NLP）模型可能帮忙咱们将每张发票主动标记至正确的类别，后果会如何？如果文本标记工具能够间接从发票中提取内容并加以分类，又会如何？
对大批量相关度较高的素材进行精确分类比拟艰难，咱们须要以最优的老本效益来构建起高质量数据集。
应用 Angular Elements 创立分类标签
在以下用例中，假设咱们是寰球最大快餐连锁品牌兼资料洽购方之一。要为 NLP 模型构建训练数据集，咱们须要开发一套基于用户体验钻研的单页 Web 应用程序，该利用可帮忙员工浏览发票信息并在分类法中疾速抉择相应的类别。具体请参见以下截屏。
这套实现计划应用 Angular Materials 选项卡外加筛选器框以简化分类导航。其中还将显示发票阐明的英文翻译，以便工作人员可能标记来自世界各地的发票。此外，因为页面由 Angular 框架构建而成，因而咱们能够增加更多元素对其做出改良，例如应用更高级别的分类下拉列表，或者引入来自第三方 API 的动静内容（如图片或视频）。
对于此应用程序的更多详细信息，请参阅 GitHub repo。
这款应用程序应用 Angular Elements 构建而成，其中还用到打包为自定义元素（也称 Web 组件）模式的多个 Angular 组件 —— 一种用于定义新 HTML 元素且框架中立的 Web 规范。大家后续能够基于此将该应用程序与 Crowd HTML Elements 无缝集成。
Angular Elements 输出与输入
在本用例中，咱们的 Angular 组件须要两项输出：发票阐明与发票翻译。这两项输出通过 <ng-home>（指定应用程序根元素的指令）中的标记属性进行传递，而后通过 src/app/home.ts 中由 Angular Controller 定义的 @Input()注解捕获输出中的各值。详见以下代码：
<ng-home source='10 牛ステーキ -20 パッケージ - ブランド X' translation='10 beef steak - 20 packages - brand X' id="home">loading</ng-home>
export class Home implements OnInit {@Input() invoice = '';
@Input() translation = '';
...在 src/app/home.html 中的 Angular View 当中，由双向绑定的占位符 {{source}} 与{{translation}}实现数值出现，具体请参见以下代码：
<!-- Invoice Description -->
<div class="card" >
<div class="card-header">
<h3>Invoice Description</h3>
</div>
<div>
<p id="step1">
<span>Invoice Description: <br />
<b>{{invoice}}</b></span>
</p>
<p style='font-weight: small; color: gray;' id="step2">
<span>English Translation: <br /> {{translation}}</span>
</p>
</div>
</div>以下截屏所示，为 Food Categories 页面中的 Meats 选项卡。
当咱们选中一个类别并点击 Submit 时，Angular 组件向其父 DOM 元素播送一个蕴含类别 ID 的 JavaScript 事件。整个过程在 src/app/home.ts 中通过 Angular Controller 的 @Output()实现，详见以下代码：
<button mat-button color="primary" (click)="onSubmit()" id="submitButton">Submit</button>
<table>
...
<tr mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="selectRow(row)" [ngClass]="{'highlight': row === selectedRow}">
</tr>
</table>
@Output('rowselected') rowselected = new EventEmitter<any>();
#called when user click on a row in the table ("selecting" a category)
selectRow(row) {this.selectedRow = row;}
#called when user click on Submit button
onSubmit(){this.rowselected.emit(this.selectedRow);
}Angular 与 Crowd HTML Elements 相集成
Angular Elements 与 Crowd HTML Elements 之间的通信机制如上一节所述。
依照应用 Amazon SageMaker Ground Truth 构建自定义数据标记工作流中形容的步骤，大家能够调整文本向注解的具体传递形式，并理解如何从 Angular Elements 中捕获播送事件以创立自定义模板。
以下代码所示，为作业创立当中应用的残缺 Liquid HTML 模板。此文件也是咱们 Angluar 利用中 src/ 文件夹下的根文件 index.html。（请确保应用的是 dist 文件夹下的 index.html 文件，且该文件中曾经插入压缩后的.js 文件，并带有正确的 Amazon Simple Storage Service（Amazon S3）门路来托管咱们的应用程序）。
<!doctype html>
<html lang="en">
<html>
<head>
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
</head>
<body>
<crowd-form style="display: none;">
<input name="annotations" id="annotations" type="hidden">
<input name="timeElapsed" id="timeElapsed" type="hidden">
<!-- Prevent crowd-form from creating its own button -->
<crowd-button form-action="submit" style="display: none;"></crowd-button>
</crowd-form>
<div class="mat-app-background basic-container">
<!-- Dev Mode to test the Angular Element -->
<!-- <ng-home source='10 牛ステーキ -20 パッケージ - ブランド X' translation='10 beef steak - 20 packages - brand X' id="home">loading</ng-home> -->
<ng-home source='{{task.input.source}}' translation='{{task.input.translatedDesc}}'>loading</ng-home>
</div>
<script src="<your-s3-bucket-angular-app>/runtime-es2015.js" type="module"></script>
<script src="<your-s3-bucket-angular-app>/runtime-es5.js" nomodule defer></script>
<script src="<your-s3-bucket-angular-app>/polyfills-es5.js" nomodule defer></script>
<script src="<your-s3-bucket-angular-app>/polyfills-es2015.js" type="module"></script>
<script src="<your-s3-bucket-angular-app>/styles-es2015.js" type="module"></script>
<script src="<your-s3-bucket-angular-app>/styles-es5.js" nomodule defer></script>
<script src="<your-s3-bucket-angular-app>/vendor-es2015.js" type="module"></script>
<script src="<your-s3-bucket-angular-app>/vendor-es5.js" nomodule defer></script>
<script src="<your-s3-bucket-angular-app>/main-es2015.js" type="module"></script>
<script src="<your-s3-bucket-angular-app>/main-es5.js" nomodule defer></script>
</body>
</html>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// Counter
var enterDate = new Date();
function secondsSinceEnter()
{return (new Date() - enterDate) / 1000;
}
// GT Form Submitting
const component = document.querySelector('ng-home').addEventListener('rowselected', (event) => {// alert(event.detail.CODE);
document.getElementById('annotations').value = event.detail.CODE;
document.getElementById('timeElapsed').value = secondsSinceEnter();
document.querySelector('crowd-form').submit();});
});
</script>
<style>
.body {background-color: #fafafa;}
.header {
background: #673ab7;
color: #fff;
padding: 0 16px;
margin: 20px 20px 0px 20px;
padding: 20px;
}
.cards {
display: grid;
grid-template-columns: 30% auto;
grid-auto-rows: auto;
grid-gap: 1rem;
margin: 20px 20px 0px 20px;
}
.card {box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
transition: box-shadow 280ms cubic-bezier(.4,0,.2,1);
display: block;
position: relative;
padding: 16px;
border-radius: 4px;
/* margin: 20px 0px 0px 20px; */
border: 2px solid #e7e7e7;
border-radius: 4px;
}
.highlight-step {
background-color: #2515424a;
margin: 0px -15px 0px -15px;
padding: 15px;
}
</style>
创立模板
要创立上述模板，请实现以下操作步骤：
- 在模板之上增加 crowd-html-element.js 脚本，以便能够应用 Crowd HTML Elements：
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>- 间接在根元素 <ng-home> 中应用 Liquid 模板语言，将须要正文的文本及来自预处理 Lambda 函数的相干元数据注入至用户界面：
<ng-home source='{{task.input.source}}' translation='{{task.input.translated}}' id="home">loading</ng-home>- 应用 <crowd-form /> 元素，由其将注解提交至 Ground Truth。因为提交产生在后盾，因而该元素处于暗藏状态。具体请参见以下代码：
<crowd-form style="display: none;">
<input name="annotations" id="annotations" type="hidden">
<input name="timeElapsed" id="timeElapsed" type="hidden">
<!-- Prevent crowd-form from creating its own button -->
<crowd-button form-action="submit" style="display: none;"></crowd-button>
</crowd-form>不要应用 Crowd HTML Elements 提交正文；相同，请应用一个脚本将 Angular Element 与 <crowd-form /> 集成起来：
document.addEventListener("DOMContentLoaded", function(event) {var enterDate = new Date();
function secondsSinceEnter()
{return (new Date() - enterDate) / 1000;
}
const component = document.querySelector('ng-home').addEventListener('rowselected', (event) =>
document.getElementById('annotations').value = event.detail.CODE;
document.getElementById('timeElapsed').value = secondsSinceEnter();
document.querySelector('crowd-form').submit();});
});在本用例中，咱们还要设计一个计时器，用于监控工作人员实现注解所消耗的工夫。
下图所示，为各元素之间的数据流：
总结
本文展现了如何应用 Angular 与 Ground Truth 构建自定义的数据标注 UI 界面。该解决方案可能在标记作业创立过程中，解决各自定义模板中不同范畴之间的通信流动。充沛应用 Angular 等自定义前端框架的性能，帮忙大家轻松创立古代 Web 应用程序，从而在公共、外部或者来自供应商的标记工作人员的配合下切实满足您的数据标注需要。
对于在 Ground Truth 中应用层级分类法的更多详细信息，请参阅应用 Amazon SageMaker Ground Truth 创立层级标记分类。