Open Ango Hub Contact Us

Attachments

Attachments are media files like text, images, and videos that can be shown to labelers while annotating certain assets.

On Ango Hub, you can upload text, images, videos, or HTML to be shown to labelers next to specific assets during labeling.

Properties of Attachments

  • Text, image, video files or arbitrary HTML shown next to specific assets

  • Viewable by labelers during labeling

  • Unique to each asset, that is, you can show data that belongs to the asset being labeled right next to the asset itself

  • Uploadable in bulk with a simple JSON structure

  • An asset can have an unlimited number of attachments

How to View an Attachment

From the labeling editor, navigate to an asset with an attachment.

Click on the "Attachment" tab on the right side of the screen. (1)

The attachment drawer will open. If more than one attachment was uploaded for the asset in question, each attachment is shown in its own tab. (2)

How to Upload Attachments

From the Assets tab in your project, click on Import. A dialogue will pop up.

Enter the Import Attachment tab.

From here, you'll upload a JSON containing your attachments. Here's what a sample JSON looks like for image, text, or video attachments:

[
  {
    "externalId": "image-sample.jpg",
    "attachments": [
      {
        "type": "IMAGE",
        "value": "https://sample-image.jpg"
      },
      {
        "type": "TEXT",
        "value": "Some sample text."
      }
    ]
  },
  {
    "externalId": "image-sample.jpg",
    "attachments": [
      {
        "type": "VIDEO",
        "value": "http://sample-video.mp4"
      }
    ]
  }
]

Here is a sample JSON with an HTML attachment:

[
  {
    "externalId": "external-id.png",
    "attachments": [
      {
        "type": "TEXT",
        "value": "<!DOCTYPE html> <html> <head> <title>Images in a Row</title> <style>  .image-row {   display: flex;   justify-content: space-around;   margin-bottom: 20px;  }  img {   width: 30%;   height: auto;  }  .header, .footer {   text-align: center;   margin: 20px 0;  } </style> </head> <body> <div class='header'>  <h1>Header Placeholder Text</h1> </div> <div class='image-row'>  <img src='https://via.placeholder.com/150' alt='Placeholder Image 1'>  <img src='https://via.placeholder.com/150' alt='Placeholder Image 2'>  <img src='https://via.placeholder.com/150' alt='Placeholder Image 3'> </div> <div class='footer'>  <h2>Footer Placeholder Text</h2> </div> </body> </html>"
      }
    ]
  }
]

Only text, .jpg images, and .mp4 videos are supported. Videos must be encoded in such a way that the browser can play them. See here for a list of codecs supported by browsers.

URLs may not contain spaces or "+" signs anywhere.

If attachment upload is successful, a notification will pop up on the screen notifying you of how many assets were given an attachment.

Uploading Attachments from Private Buckets

If you have created an integration between Ango Hub and your private storage, either on AWS S3 or on GCP, you can upload attachments that link to files in your private bucket. The file will never be copied or moved anywhere, and will only be shown to labelers when they open the Attachments drawer.

First, create an integration from the Storages tab of your Organization page. You can read how to do so here.

Then, from the same page, copy the storage ID of your newly created storage, by clicking on the "Copy" button next to the ID:

Prepare a JSON in the same format as the one prepared in the previous section, but with the addition of storage IDs in the URLs. For example:

[
  {
    "externalId": "image-sample.jpg",
    "attachments": [
      {
        "type": "IMAGE",
        "value": "https://sample-image.jpg?storageId=1234567890"
      },
      {
        "type": "TEXT",
        "value": "Some sample text."
      }
    ]
  },
  {
    "externalId": "image-sample.jpg",
    "attachments": [
      {
        "type": "VIDEO",
        "value": "http://sample-video.mp4?storageId=1234567890"
      }
    ]
  }
]

Importing Attachments during Asset Import

Hub allows you to import attachments together with assets, at the same time.

To do so, you will have to use the Cloud Import JSON method for importing assets, as explained below:

  1. In your project, go to the Assets tab and click on the Add Data button.

  2. From the dialog that appears, enter the Upload Data URL tab.

  3. Prepare a JSON formatted like the following. It is an array of objects, with each object representing an asset. Each object, then, in its attachments property, will have a list of attachments, like so:

[
    {
        "externalId":"my_external_id",
        "data":"https://url-to.asset/video.mp4",
        "attachments":[
            {"type":"IMAGE","value":"https://angohub-public-assets.s3.eu-central-1.amazonaws.com/uploaded-data-6cbc3c56-58f9-4430-990d-863bd5a1a755.jpg"},
            {"type":"TEXT","value":"This is a text attachment."}
        ]
    }
]

In AWS S3, if your URL does not contain region information, your attachments may not be visible. When using S3, please ensure the region information is contained in the URL right after the bucket name, like so:

https://bucket-name.s3.eu-central-1.amazonaws.com/filename.JPG?storageId=111bb111389ff80015f2b914

  1. Drag and drop the JSON you've just created on the Upload Data URL file box:

  1. Your assets with attachments will appear in the Assets tab.

PreviousAssetsNextBatches

Last updated