Angular x Ground Truth,数据集标记作业从未能如此简单

AWS_ AI developer community 2020-11-10 18:04:52
angular ground truth 数据 标记


image

When data scientists try to use supervised learning technology to solve problems , It's often necessary to sort out high-quality markup datasets before modeling . It's hard work . Fortunately Amazon SageMaker Ground Truth The emergence of the so that everyone can be targeted at a variety of different tasks ( For example, text classification and object detection ), Easily get the data set you need .

Ground Truth It can also help you build custom datasets for user-defined tasks , Mark anything in it . In order to achieve this function ,Ground Truth Give full play to the following AWS The power of service :

  • Customize AWS Lambda function , Used to trigger specific actions between marking steps . Accordingly , We can perform custom logic before the tag , For example, filter samples or through other services (Amazon Translate or Amazon Rekognition) Add metadata ; Logic for tag merging or quality control can also be executed after the tag has been completed .
  • Customize Web Templates , Allow us to use HTML、JavaScript Customize the user interface , And with Ground Truth Perfect integration of workflow . These templates can be used by Crowd HTML Elements Easy to build (Crowd HTML Elements It's a set for text 、 Common to video and audio tagging jobs UI Elements , We can arrange them arbitrarily as we do in custom templates ).
  • If the specific participation of a team of experts in a specific field is required , Can be in AWS Marketplace And Amazon Mechanical Turk We are connected with many skilled and professional practitioners .AWS Marketplace Certified Partners in are multilingual , According to the actual needs of various industries ( For example, the healthcare industry ) Make targeted comments on video and image content .

However, for complex tagging tasks , For example, difficult classification standard setting 、 Extremely diverse classification or autopilot tagging tasks , You may need to build a bigger front-end application for the tagging staff . In such cases ,Angular And the front-end framework can work , Through a variety of very practical design patterns ( For example, models - View - controller , abbreviation MVC) Significantly improve the user experience for a large team of designers and developers / User interface effects , At the same time to ensure that the overall code base is more robust 、 More maintainable .

This article will guide you to use Angular And Angular Elements Create a fully customizable solution , And the program is related to Ground Truth Perfect match . This drill requires you to be able to use Ground Truth And Crowd HTML Elements Run custom tag job . For more details , see also Use Amazon SageMaker Ground Truth Build a custom data tagging workflow .

The method described in this paper can also be used with Amazon Augmented AI(Amazon A2I) In combination with , This will further reduce the difficulty of building a machine learning prediction workflow that requires manual review . This convenience , Thanks to Amazon A2I Use Crowd HTML Elements Create a custom work template . For more details , see also Create a custom work template .

Build a custom set for complex classification schemes UI

If we're managing a large supply chain , And it needs to interact with different types of supply chains, such as restaurants or car manufacturers around the world , Then there must be many different formats 、 Invoices in different languages . To track operations and improve financial efficiency , We need to match the invoice and receipt with the product category , According to the hierarchical classification system, they are put into the organization .

Shown below , A hierarchical taxonomy framework for computer components :
image
Shown below , A hierarchical taxonomy framework for food types :
image

The leaf level of hierarchical taxonomy can contain as many as thousands of classifications . The actual use cases include Web Catalog (Yahho! Directory or Open Directory Project)、 Library classification (Dewey Decimal Or the library of Congress )、 Natural science 、 Various classification schemes applied in the legal and medical fields .

If natural language processing (NLP) The model can help us automatically mark each invoice to the correct category , What will happen ? If the text tagging tool can extract content directly from the invoice and classify it , What will happen ?

It is difficult to accurately classify a large number of high correlation materials , We need to build high-quality datasets with the best cost-effectiveness .

Use Angular Elements Create category labels

In the following use cases , Suppose we are one of the largest fast food chain brands and material purchasers in the world . for NLP Model building training data set , We need to develop a set of single pages based on user experience research Web Applications , The application can help employees read invoice information and quickly select the corresponding category in the taxonomy . Please refer to the following screen capture for details .
image

This implementation uses Angular Materials Tab with filter box to simplify the category navigation . It will also show the English translation of the invoice description , So that staff can mark invoices from all over the world . Besides , Because the page is made up of Angular It's a framework , So we can add more elements to improve it , For example, use a higher-level classification drop-down list , Or introduce from a third party API The dynamic content of ( Like pictures or videos ).

More details about this application , see also GitHub repo.

This app uses Angular Elements Build into , It also uses packaging as a custom element ( Also known as Web Components ) Multiple forms of Angular Components —— One used to define new HTML Element and framework neutral Web standard . You can then use this application with Crowd HTML Elements Seamless integration .

Angular Elements Input and output

In this use case , our Angular The component requires two inputs : Invoice description and invoice translation . These two inputs go through <ng-home>( Directive that specifies the root element of the application ) The tag attribute in the , Then pass src/app/home.ts Zhongyou Angular Controller Defined @Input() Annotations capture the values in the input . See the code below :

<ng-home source='10 cattle ステーキ-20パッケージ-ブランドX' translation='10 beef steak - 20 packages - brand X' id="home">loading</ng-home>
export class Home implements OnInit {
@Input() invoice = '';
@Input() translation = '';
...

stay src/app/home.html Medium Angular View among , A place holder bound by two-way {{source}} And {{translation}} Achieve numerical rendering , Please refer to the following code for details :

<!-- 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>

The following screen shot shows , by Food Categories On the page Meats tab .

image

When we select a category and click Submit when ,Angular Component to its parent DOM Elements broadcast an inclusion category ID Of JavaScript event . The whole process is in src/app/home.ts Pass through Angular Controller Of @Output() Realization , See the code below :

<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 And Crowd HTML Elements Phase integration

Angular Elements And Crowd HTML Elements The communication mechanism between them is described in the previous section .

according to Use Amazon SageMaker Ground Truth Build a custom data tagging workflow The steps described in , You can adjust how the text is passed to the annotation , And learn how to get from Angular Elements Capture broadcast events to create custom templates .

The following code shows , Complete for job creation Liquid HTML Templates . This document is also us Angluar Application src/ The root file under the folder index.html.( Please make sure you use dist Under folder index.html file , And the file has been inserted with compressed .js file , And with the right Amazon Simple Storage Service(Amazon S3) Path to host our application ).

<!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 cattle ステーキ-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>

Create a template

To create the above template , Please complete the following steps :

  • Add on top of template crowd-html-element.js Script , So that you can use Crowd HTML Elements:
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
  • Directly in the root element <ng-home> Use in Liquid Template language , Will need to annotate the text and come from preprocessing Lambda Functions are injected into the user interface :
<ng-home source='{{ task.input.source }}' translation='{{ task.input.translated }}' id="home">loading</ng-home>
  • Use <crowd-form /> Elements , It submits comments to Ground Truth. Since the submission takes place in the background , So the element is hidden . Please refer to the following code for details :
<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>

Do not use Crowd HTML Elements Submit comments ; contrary , Please use a script to Angular Element And <crowd-form /> Integrate :

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();
});
});

In this use case , We're going to design a timer , Used to monitor the time taken by staff to complete annotations .

Shown below , For the data flow between elements :
image

summary

This article shows how to use Angular And Ground Truth Build custom data annotation UI Interface . This solution can be used in the process of tag job creation , Handle communication activities between different scopes in each custom template . Make full use of Angular Such as custom front-end framework function , To help you create a modern Web Applications , So in public 、 With the cooperation of internal or supplier tagging staff, you can meet your data annotation needs .

About the Ground Truth More details on using hierarchical taxonomy in , see also Use Amazon SageMaker Ground Truth Create a hierarchical tag category .
image

版权声明
本文为[AWS_ AI developer community]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple