关于人工智能:Angular-x-Ground-Truth数据集标记作业从未能如此简单

数据科学家们试图应用监督学习技术解决问题时，通常须要在着手建模之前整顿出高质量的标记数据集。这可是个辛苦活。好在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 buttononSubmit(){ 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创立层级标记分类。