Amazon Web Services - Using Custom UI Templates in Sagemaker

Last Updated : 28 Mar, 2023

In this article, we will look into how you can use a custom UI template with AWS Lambda functions in Amazon Sagemaker ground truth.

Here we will be using a Jupyter notebook to create a ground truth labeling job using a custom UI template with AWS-provided lambda functions using an AWS SDK such as boto3. To do so follow the below steps:

Step 1: First create a custom UI template file named customui.html to create a semantic segmentation job. A sample code has been given below:

HTML

<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form>
    <crowd-semantic-segmentation name="crowd-semantic-segmentation" src="{{ task.input.taskObject | grant_read_access }}" header= "{{ task.input.header }}" labels="{{ task.input.labels | to_json | escape }}">

        <full-instructions header= "Segmentation Instructions">
            <ol>
                <li>Inspect the Image</li>
                <li>Add appropriate label for the image.</li>
            </ol>
        </full-instructions>

        <short-instructions>
            
<p>Use the tools to label the requested items in the image</p>

        </short-instructions>
    </crowd-semantic-segmentation>
</crowd-form>

Step 2: Now create a JSON file named testlabels.json for the labels and an input manifest file named input.manifest for the images in Amazon Simple Storage Service.

Step 3: Upload the HTML, manifest, and JSON files to amazon simple storage service by executing this python code:

Python3

import boto3
import os

bucket = 'labelingjobdemoinputz'
prefix ='GroundTruthCustom'

boto3.Session().resource( 's3').Bucket(bucket).Object(os.path.join(prefix,
                                                                   'customUI.html')).upload_file( 'CustomUI.html')
boto3.Session().resource('s3').Bucket (bucket).Object(os.path.join(prefix,
                                                                   'input.manifest')).upload_file('input.manifest')
boto3.Session().resource('s3').Bucket (bucket).Object(os.path.join(prefix,
                                                                   'testLabels.json')).upload_file('testLabels.json')

Step 4: Retrieve the Amazon Resource Names(ARNs) for the pre-processing and annotation consolidation Lambda functions provided by AWS. For example here is the semantic segmentation ARNs:

Step 5: Now create a labeling job using an AWS SDK. Make sure to replace the default variables in the script with the corresponding amazon S3 file paths and ARNs.

Python3

import boto3

client = boto3.client('sagemaker')
client.create_labeling_job(LabelingJobName='SemanticSeg-CustomUI',
    LabelAttributeName='output-ref',
    InputConfig={
        'DataSource': {
            'S3DataSource': {
                'ManifestS3Uri': 'INPUT_MANIFEST_IN_S3'
            }
        },
        'DataAttributes': {
            'ContentClassifiers' : [
                'FreeOfPersonallyIdentifiableInformation',
            ]
        }
    },
    OutputConfig={
        'S3OutputPath' : 'S3_OUTPUT_PATH' 
    },
    RoleArn='IAM_ROLE_ARN',
    LabelCategoryConfigS3Uri='LABELS_JSON_FILE_IN_S3,
    StoppingConditions={
        'MaxPercentageOfInputDatasetLabeled': 100
    },
    HumanTaskConfig={
        'WorkteamArn': 'WORKTEAM_ARN',
        'UiConfig': {
            'UiTemplateS3Uri' : 'HTML_TEMPLATE_IN_S3'
        },
        'PreHumanTaskLambdaArn' : 'YOUR_ARNs_HERE',
        'TaskKeywords': [
            'SemanticSegmentation',
        ],
        'TaskTitle': 'Semantic Segmentation',
        'TaskDescription': 'Draw around the specified labels using the tools',
        'NumberOfHumanWorkersPerDataObject': 1,
        'TaskTimeLimitInSeconds': 3600,
        'TaskAvailabilityLifetimeInSeconds': 1800,
        'MaxConcurrentTaskCount': 1,
        'AnnotationConsolidationConfig': {
            'AnnotationConsolidationLambdaArn': 'YOUR_ARNs_HERE
        }
    
    },
    Tags=[
        {
            'Key': 'reason',
            'Value': 'CustomUI'
        }
    ])