@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,300;0,400;0,500;0,900;1,300;1,400;1,500;1,700&display=swap");

@font-face {
  font-family: 'Roboto';
  src: url('https://cdn.prod.website-files.com/62000f475eba4d3330543f5b/652d7a00b58f4090a56b69d4_Nacelle-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.my-gradient {
  background: rgb(167,56,149);
  background: linear-gradient(90deg, rgba(167,56,149,1) 0%, rgba(0,152,217,1) 50%, rgba(41,183,135,1) 100%);
}

/* Footer email under socials */
footer .footer-socials::after {
  content: "info@visual-layer.com";
  display: block;
  margin-top: 0.75rem;
  color: var(--muted-text-color, #888);
  font-size: 0.875rem;
}



:root {
  --dark-mode-aware-p-color-alt : rgba(0, 0, 0, 0.50);
  --dark-mode-aware-dark-background-color: #1A283B;
  --dark-mode-aware-dark-border-color: #666;
  --dark-mode-aware-dark-text-color: #eee;
  --dark-mode-aware-dark-wrapper-background-color: #364150;
  --dark-mode-aware-dark-link-color: #ffffff;
  --dark-mode-aware-keybpoard-shortcut: "rgba(18, 18, 18, 0.85)";
  --hero-background-image-light: url("https://mintlify.s3.us-west-1.amazonaws.com/blinkops-2/img/HeroLightV.svg");
  --hero-background-image-dark: url("https://mintlify.s3.us-west-1.amazonaws.com/blinkops-2/img/HeroDark.svg");
  --landing-page-image-light: url("https://mintlify.s3.us-west-1.amazonaws.com/blinkops-2/img/Hero.svg");
  --landing-page-image-dark: url("https://mintlify.s3.us-west-1.amazonaws.com/blinkops-2/img/HeroDark.svg");
}

h1,
h2,
h3,
h4 {
  font-family: 'Roboto';
  letter-spacing: normal !important;
}

.prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin-right: 7px;
  
}

#fc .prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  margin-right: 7px;
  
}

#fc-actions .prose :where(img):not(:where([class~=not-prose],[class~=not-prose] *)) {
  margin-bottom: 2em !important;
  margin-right: 7px;
}


.hero-text h1{
  font-family: "Roboto";
  font-size: 60px;
  font-style: normal;
  font-weight: 800;
  line-height: 63px;
  letter-spacing: 2.4px;
}

.hero-text h3{
  font-family: "Roboto";
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 25.2px;
  letter-spacing: 0.96px;
}

.background-image{
 background-image: var(--landing-page-image-light);
 height: 330px;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 position: relative;
 width: 100%; 
 display: flex; 
 align-items: center;
 justify-content: center;
 overflow: hidden;
}

.dark .background-image{
  background-image: var(--landing-page-image-dark);
}


.paragraph-block{
  text-align: start;
  text-wrap:inherit;
}

.paragraph{
  display: block;
  margin-block-start: 0.5em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  font-family: Roboto;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
 line-height: normal;
 color: var(----dark-mode-aware-p-color)
}

.dark .paragraph{
  color: #ffffff;
}

.iframe {
  height: 800px;
  width: 100%;
}

.iframe-wrapper {
  display: unset;
}

.iframe-media {
  display: none;
}

.hero {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
  padding: 2rem, 2rem, 2rem, 2rem;
  background-image: var(--hero-background-image-light);
  height: 326px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.dark .hero {
  background-image: var(--hero-background-image-dark);
}


.hero-content {
  display: flex;
  flex-direction: column;
  align-items:flex-start;
  margin-bottom: 1rem;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: black;
}

.search-bar {
  display: flex;
  align-items: center;
  background: transparent;
  border: 1px solid #d6d8db;
  border-radius: 0.5rem;
  overflow: hidden;
}

.search-bar input {
  border: none;
  padding: 0.75rem 1rem;
  width: 400px;
  height: 43px;
  background: transparent;
  font-size: 1rem;
  flex-grow: 1;
  outline: none;
  border-radius: var(--Sizes-Radius-R-4-px, 4px);
  border: 1px solid var(--Color-Transparent-White-10, rgba(255, 255, 255, 0.10));
  background: var(--Color-Transparent-White-05, rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(8px);
}

.keyboard-shortcut {
  display: flex;
  align-items: center;
  background:transparent;
  border-radius: var(--Sizes-Radius-R-4-px, 4px);
  border: 1px solid var(--Color-Transparent-White-10, rgba(255, 255, 255, 0.10));
  backdrop-filter: blur(8px);
  padding: 0.5rem;
}

.keys span {
  font-size: 14px;
  background: rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(62, 149, 255, 0.04);
  color: rgba(18, 18, 18, 0.85);
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  margin: 0 0.2rem;
}

.dark .keys span{
  background-color: rgba(62, 149, 255, 0.16);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(62, 149, 255, 0.04);
}

.grid-table{
  margin-top: 2rem;
  grid-column-gap: 2.5rem;
  grid-row-gap: 2.5rem;
  flex-flow: column;
   display: flex;
  align-items: center;
}

#api-grid {
  grid-column-gap: 5rem;
  grid-row-gap: 1.25rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  justify-items: center;
}

.api-item {
  display: flex;
  padding: var(--Sizes-Padding-Possitive-32-px, 32px) var(--Sizes-Padding-Possitive-16-px, 16px);
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  height: 100px;
  width: 300px;
  border-radius: 16px;
  border: 1px solid rgba(62, 149, 255, 0.04);
  background: #F4F4F4;
}

.api-item img {
  height: 24px;
  width: 24px;
  padding: 9px, 9px,9px 9px;
}

.api-item span {
  font-size: 1rem;
  font-weight: 400;
  color: #FFF;
}

.vendor-link{ 
color: #000000;
text-overflow: ellipsis;
font-family: Roboto;
font-size: 20px;
font-style: normal;
font-weight: 500;
padding-left: 24px;
letter-spacing: 1.12px;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #E3DFDF;
}

.dark .dark-mode-aware {
  border: 1px solid rgba(62, 149, 255, 0.04);
  background: #1A283B;
}

.dark .wrapper {
  background-color: #364150;
}

.dark .vendor-link {
color: #ffffff;
text-overflow: ellipsis;
font-family: Roboto;
font-size: 20px;
font-style: normal;
font-weight: 500;
padding-left: 24px;
letter-spacing: 1.12px;
}

table {
  display: table;
  max-width: 90%;
  margin: 20px auto;
}

.integrations-table table {
  border-collapse: collapse;
  border-style: solid;

  max-width: fit-content;
  text-align: left;
  table-layout: fixed;
  align-items: left;
  border-color: #000000;
}

.integrations-table code a {
  pointer-events: none;
  text-decoration: none;
  color: var(--ifm-table-cell-color);
  cursor: default;
}

.integrations-table th:first-child {
  width: fit-content;
}


.integrations-table th:second-child {
  width: 50%;
  padding-right: 10px;
}


#var-table th:first-child {
  width: 25%;
}

#var-table  th:nth-child(2){
  width: 50%;
}


.flow-table {
  width: 100%;
  overflow-x: auto; 
}

.flow-table td {
  line-height: 1;
  height: 15px; 
  vertical-align: middle; 
}


.flow-table table {
  border-collapse: collapse;
  border-style: solid;
  width: 100%;
  max-width: 100%;
  text-align: left;
  table-layout: fixed;
  align-items: left;
}

.flow-table th,
.flow-table td {
  width: 25%;
  height:25%;
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.table-functions {
  border-collapse: collapse;
  border-style: hidden;
  width: 100%;
  max-width: 100%;
  text-align: left;
  table-layout: fixed;
}

.footer-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  margin-top: 100px;
  align-items: center;
}

.footer-icons {
  display: flex;
  gap: 32px;
}

.footer-title {
  font-family: Roboto;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.footer-display{
  display: flex;
  flex-direction: row;
}

.flow-control{
  display: flex;
}


@media only screen and (max-width: 768px) {

  .hero{
    flex-direction: column;
    justify-content: center;
  }

  #api-grid {
    grid-template-columns: 1fr 1fr; 
    grid-column-gap: 2rem;
  }

  .iframe {
    max-height: 100%;
    height: unset;
    border-radius: 32px;
  }

  .iframe-wrapper {
    display: block;
    position: relative;
    max-height: 200px;
    border-radius: 32px;
  }

  .iframe-media {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    backdrop-filter: blur(0.5em);
    background-color: rgba(34, 33, 38, 0.8);
    border-radius: 32px;
  }

  .table-functions th:first-child {
  width: 17%;
}

}
 

@media (max-width: 996px) {

  .hero{
    flex-direction: column;
    justify-content: center;
  }

  #api-grid {
    grid-template-columns: 1fr 1fr; 
    grid-column-gap: 2rem;
  }
  
}

/* Existing CSS code remains unchanged */
/* Navbar styling */
.navbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  width: 100%;
}

/* Dropdown container styling */
.dropdown-container {
  position: absolute;
  right: 0; /* Position dropdown to the right */
  top: 100%; /* Position below the navbar */
  background-color: white;
  padding: 10px;
  display: none; /* Hidden by default */
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Primary button styling for "Try Now" */
.navbar .primary {
  background-color: #0097D9;
  color: white;
  font-size: 14px;
  padding: 12px 24px;
  border: none;
  border-radius: 5px;
  z-index: 1; /* Ensure "Try Now" button stays on top */
}

/* Dropdown button styling */
.dropdown-btn {
  background-color: #f2f2f2;
  color: black;
  font-size: 14px;
  padding: 10px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  z-index: 2; /* Ensure the button stays clickable above the dropdown */
}

/* Show dropdown content when hovering the dropdown button */
.navbar .dropdown-btn:hover + .dropdown-container {
  display: block; /* Show the dropdown when hovering over the button */
}

/* Dropdown content links styling */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 160px;
  z-index: 3; /* Ensure dropdown content stays above the button */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

/* Ensure the dropdown stays below the button */
.dropdown-container {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  padding: 10px;
  background: white;
  border: 1px solid #ccc;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  visibility: hidden;
}

/* Hover to show the dropdown */
.navbar .dropdown-container:hover {
  visibility: visible;
}

/* End of CSS */

Example Views

Cluster Previews

Finding Similar Items

Clustering Granularity

How Visual Layer automatically groups visually similar content to simplify exploration and analysis.

Understanding Clusters

Visual Layer Documentation

Introduction to Visual Layer

Set up, create a dataset, and start exploring your data in just a few steps.

Quick start

Choose the deployment option that best fits your organization’s infrastructure, security, and needs.

Deploy Visual Layer

System requirements

Set up the environment

Basic operations

User management

Use Configuration settings to customize behavior and output when running Visual Layer backend tools or scripts.

Configuration

Troubleshooting

Amazon S3

CVAT - soon

Labelbox - soon

Learn how to create datasets with Visual Layer.

Upload data

Easily preserve, reuse, and share filtered views of your dataset to streamline exploration and ensure consistency across teams.

Save views

Use tags to organize your dataset, manage workflows, and simplify downstream processes like relabeling or exclusion.

User Tags

Enable seamless collaboration by securely sharing datasets with internal teammates or external partners.

Share dataset

Export your data from Visual Layer to use in external tools or workflows. You can export the entire dataset, a filtered subset, or just specific items—depending on your needs.

Export dataset

Update data - soon

Update metadata - soon

Customize metadata - soon

Visual Layer helps you efficiently extract insights from large-scale, unstructured datasets using intuitive search, filtering, and quality tools.

Exploration overview

Retrieve relevant images and objects based on natural language and contextual understanding—beyond keyword matching.

Semantic search

Learn how to use advanced operators when searching by image captions in Visual Layer.

Caption search

Find visually similar images, objects, or patterns in your dataset using Visual Layer's powerful similarity search options.

Visual search

Use filters to narrow down, explore, and manage your dataset more effectively.

Filter dataset

Understand how mislabels occur, why they matter, and how to detect and fix them using Visual Layer.

Mislabels

Detect unclassified images and objects in your dataset using Visual Layer's filters.

Unlabeled

Learn how duplicate images and objects affect your dataset, and how to detect and remove them using Visual Layer.

Duplicates

Learn what outliers are, why they affect dataset quality, and how to detect and manage them using Visual Layer.

Outliers

Surface only the most visually distinctive images or objects in your dataset.

Select unique items

Select AI models to enrich your dataset with labels, captions, and metadata using Visual Layer's enrichment flow.

Enrich dataset

Browse all available enrichment models in Visual Layer's catalog and learn how each can enhance your dataset.

Explore model catalog

Learn how to explore, search, and export your enriched metadata using Visual Layer tools.

Analyze enriched dataset

Use custom models – coming soon

Troubleshoot issues

Find FAQs

Join the Community

Learn how to retrieve API credentials and generate JWT tokens for authenticated API access in Visual Layer Cloud.

Authentication – Cloud Only

Learn how to create a new dataset in Visual Layer using data from a public S3 bucket.

Create a Dataset from a Public S3 Bucket

Use this API to trigger dataset creation from a local folder on self-hosted Visual Layer installations.

Create a Dataset from a Local Folder for On-Prem Installations

Use this endpoint to check the processing status and metadata for a specific dataset in Visual Layer.

Retrieve Dataset Status

Use this endpoint to securely share a dataset with a registered user in your Visual Layer workspace.

Share a Dataset with Another User

Learn how to retrieve visually duplicate media items from a dataset using the API.

Duplicate Retrieval

Learn how to search for visually similar media using an uploaded image as the query.

Visual Search

Use AI-powered caption understanding to search your visual data semantically—not just by keyword.

Semantic Search

Search your image dataset using natural language captions—powered by semantic understanding.

Caption Search

Learn how to export datasets from Visual Layer using shell commands—no SDK required.

Getting started

On-premises

Integrations

Creating datasets

Managing datasets

Exploring datasets

Dataset enrichment

Help & support

Understanding Clusters

Cluster Previews

Example Views

Finding Similar Items

Clustering Granularity

Getting started

On-premises

Integrations

Creating datasets

Managing datasets

Exploring datasets

Dataset enrichment

Help & support

​Cluster Previews

​Example Views

​Finding Similar Items

​Clustering Granularity

Cluster Previews

Example Views

Finding Similar Items

Clustering Granularity