Universal Data Tool
  • Universal Data Tool Docs
  • Installation
  • Running On-Premise
  • Collaborative Labeling
  • Building and Labeling Datasets
    • Image Segmentation
    • Image Classification
    • Text Classification
    • Named Entity Recognition
    • Entity Relations / Part of Speech Tagging
    • Audio Transcription
    • Data Entry
    • Video Segmentation
    • Composite Interfaces
    • Landmark / Pose Annotation
  • Importing Data
    • Upload or Open Directories
    • Import File URLs
    • Import COCO Images
    • Import from Google Drive
    • Import from AWS S3 Bucket
    • Import from CSV or JSON
    • Import using AWS Cognito
    • Import Text Snippets
  • The Format .udt.json
    • What is the .udt.json format?
    • What is the .udt.csv format?
  • Machine Learning
    • Jupyter Notebook Integration
    • Import Datasets into Pandas
    • Fast.ai
      • Fast.ai Image Classification
      • Fast.ai Image Segmentation
  • Integrate with Any Web Page
    • Integrate with the Javascript Library
    • Getting Started with React
  • Train your Workforce
    • Getting Started with UDT Courses
  • Frequently Asked Questions
Powered by GitBook
On this page
  • Quick Start: UDT in Static HTML Page
  • Installation
  • Usage

Was this helpful?

  1. Integrate with Any Web Page

Integrate with the Javascript Library

Use the Universal Data Tool in any javascript application using a <script /> import tage.

PreviousFast.ai Image SegmentationNextGetting Started with React

Last updated 4 years ago

Was this helpful?

Quick Start: UDT in Static HTML Page

Installation

Put a script tag at the top of your page importing the Universal Data Tool "vanilla" library.

The vanilla library bundles all the Universal Data Tool dependencies together into a single file, making it easy to use anywhere!

<script
    type="application/javascript"
    src="https://unpkg.com/universal-data-tool@0.13.2/vanilla.js"
></script>

Usage

Add a container element to your body. Then call window.UniversalDataTool.open to open the UDT in your element.

<body>
  <div id="udt"></div>
  <script type="application/javascript">
    window.UniversalDataTool.open({
      container: document.getElementById("udt"),

      // Your UDT dataset
      // https://github.com/UniversalDataTool/udt-format
      udt: {
        interface: {
          type: "image_classification",
          labels: ["A", "B"]
        },
        samples: [
          {
            imageUrl: "https://placekitten.com/408/287"
          }
        ]
      },

      // Called when sample is saved
      onSaveSample: (index, sample) => {
        console.log(index, sample);
      }
    });
  </script>
</body>