LogoLogo
API ReferenceGitHubSlackService StatusLogin
v3.9.16
v3.9.16
  • 🏠Deep Lake Docs
  • List of ML Datasets
  • 🏗️SETUP
    • Installation
    • User Authentication
      • Workload Identities (Azure Only)
    • Storage and Credentials
      • Storage Options
      • Setting up Deep Lake in Your Cloud
        • Microsoft Azure
          • Configure Azure SSO on Activeloop
          • Provisioning Federated Credentials
          • Enabling CORS
        • Google Cloud
          • Provisioning Federated Credentials
          • Enabling CORS
        • Amazon Web Services
          • Provisioning Role-Based Access
          • Enabling CORS
  • 📚Examples
    • Deep Learning
      • Deep Learning Quickstart
      • Deep Learning Guide
        • Step 1: Hello World
        • Step 2: Creating Deep Lake Datasets
        • Step 3: Understanding Compression
        • Step 4: Accessing and Updating Data
        • Step 5: Visualizing Datasets
        • Step 6: Using Activeloop Storage
        • Step 7: Connecting Deep Lake Datasets to ML Frameworks
        • Step 8: Parallel Computing
        • Step 9: Dataset Version Control
        • Step 10: Dataset Filtering
      • Deep Learning Tutorials
        • Creating Datasets
          • Creating Complex Datasets
          • Creating Object Detection Datasets
          • Creating Time-Series Datasets
          • Creating Datasets with Sequences
          • Creating Video Datasets
        • Training Models
          • Splitting Datasets for Training
          • Training an Image Classification Model in PyTorch
          • Training Models Using MMDetection
          • Training Models Using PyTorch Lightning
          • Training on AWS SageMaker
          • Training an Object Detection and Segmentation Model in PyTorch
        • Updating Datasets
        • Data Processing Using Parallel Computing
      • Deep Learning Playbooks
        • Querying, Training and Editing Datasets with Data Lineage
        • Evaluating Model Performance
        • Training Reproducibility Using Deep Lake and Weights & Biases
        • Working with Videos
      • Deep Lake Dataloaders
      • API Summary
    • RAG
      • RAG Quickstart
      • RAG Tutorials
        • Vector Store Basics
        • Vector Search Options
          • LangChain API
          • Deep Lake Vector Store API
          • Managed Database REST API
        • Customizing Your Vector Store
        • Image Similarity Search
        • Improving Search Accuracy using Deep Memory
      • LangChain Integration
      • LlamaIndex Integration
      • Managed Tensor Database
        • REST API
        • Migrating Datasets to the Tensor Database
      • Deep Memory
        • How it Works
    • Tensor Query Language (TQL)
      • TQL Syntax
      • Index for ANN Search
        • Caching and Optimization
      • Sampling Datasets
  • 🔬Technical Details
    • Best Practices
      • Creating Datasets at Scale
      • Training Models at Scale
      • Storage Synchronization and "with" Context
      • Restoring Corrupted Datasets
      • Concurrent Writes
        • Concurrency Using Zookeeper Locks
    • Deep Lake Data Format
      • Tensor Relationships
      • Version Control and Querying
    • Dataset Visualization
      • Visualizer Integration
    • Shuffling in Dataloaders
    • How to Contribute
Powered by GitBook
On this page
  • How to embed the Activeloop visualizer into your own web applications
  • HTML iframe (Alpha)
  • Javascript API (Alpha)

Was this helpful?

Edit on GitHub
  1. Technical Details
  2. Dataset Visualization

Visualizer Integration

How to embed our visualizer in your application.

PreviousDataset VisualizationNextShuffling in Dataloaders

Was this helpful?

How to embed the Activeloop visualizer into your own web applications

Visualization engine allows the user to visualize, explore, and interact with Deep Lake datasets. In addition to using through the or , the Activeloop visualizer can also be embedded into your application.

HTML iframe (Alpha)

To embed into your html page, you can use our iframe integration:

<iframe src="https://app.activeloop.ai/visualizer/iframe?url=hub://activeloop/imagenet-train" width="800px" height="600px">

iframe URL: https://app.activeloop.ai/visualizer/iframe?url=hub://$org/$ds&{checkpoint=$checkpoint}&{vs=$visualizer_state}&{token=$token}

Params:

url - The url of the dataset vs - Visualizer state, which can be obtained from the platform url token - User token, for private datasets. If the value is ask then the UI will be populated for entering the token checkpoint - Dataset checkpoint query - Query string to apply on the dataset

Javascript API (Alpha)

To have more fine grained control, you can embed the visualizer using Javascript:

<div id='container'></div>
<script src="https://app.activeloop.ai/visualizer/vis.js"></script>
<script>
  let container = document.getElementById('container')
  window.vis.visualize("hub://activeloop/imagenet-train", null, null, container, null)
</script>

or to visualize private datasets with authentication

<div id='container'></div>
<script src="https://app.activeloop.ai/visualizer/vis.js"></script>
<script>
  let container = document.getElementById('container')
  window.vis.visualize("hub://org/private", null, null, container, {
		requireSignin: true
	})
</script>

Interface

Below you can find definitions of the arguments.

/// ds - Dataset url
/// commit - optional commit id
/// state - optional initial state of the visualizer
/// container - HTML element serving as container for visualizer elements
/// options - optional Visualization options
static visualize(
  ds: string,
  commit: string | null = null,
  state: string | null = null,
  container: HTMLElement,
  options: VisOptions | null
): Promise<Vis>;

/// backlink - Show backlink to platform button
/// singleSampleView - Enable single sample view through enter key
/// requireSignin - Requires signin to get access token
/// token - Token id
/// gridMode - Canvas vs Grid
/// queryString - Query to apply on the iframe
export type VisOptions = {
  backlink?: Boolean
  singleSampleView?: Boolean
  requireSignin?: Boolean
  token: string | null
  gridMode?: "canvas" | "grid"
  queryString?: string
}

This visualize returns Promise<Vis> which can be used to dynamically change the visualizer state. Vis supports only query functions for now

class Vis
{
	/// Asynchronously runs a query and resolves the promise when query completed.
  /// In case of error in query, rejects the promise.
	query(queryString: string): Promise<void>
}

🔬
Activeloop UI
in Python