Youzu Search Lens

The Youzu Search Lens component attaches to search inputs and allows users to search by image. It includes object detection capabilities with resizable bounding boxes.

API

The Lens API allows you to search for products using an image. This is a synchronous endpoint that returns matching products immediately.

Authentication

Requires:

Authorization: Bearer YOUR_TOKEN header (obtain from /api/v1/token)

Search by Image

Endpoint: POST /api/v1/lens

Search for products by uploading an image or providing an image URL.

curl -X POST "https://platform.youzu.ai/api/v1/lens" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -F "file=@product-image.jpg"

// Search for products using an image
const formData = new FormData();
formData.append('file', document.getElementById('image-input').files[0]);

fetch('https://platform.youzu.ai/api/v1/lens', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('Products found:', data);
  // data is an array of Product objects
})
.catch(error => {
  console.error('Error:', error);
});

import requests

# Search for products using an image
url = 'https://platform.youzu.ai/api/v1/lens'

headers = {
    'Authorization': 'Bearer YOUR_TOKEN'
}

files = {
    'file': open('product-image.jpg', 'rb')
}

response = requests.post(url, headers=headers, files=files)

if response.status_code == 200:
    products = response.json()
    print('Products found:', products)
    # products is a list of Product objects
else:
    print('Error:', response.status_code, response.text)

Search by URL

You can also search using an image URL instead of uploading a file:

curl -X POST "https://platform.youzu.ai/api/v1/lens" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -F "imageUrl=https://example.com/product.jpg"

// Search using image URL
const formData = new FormData();
formData.append('imageUrl', 'https://example.com/product.jpg');

fetch('https://platform.youzu.ai/api/v1/lens', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  body: formData
})
.then(response => response.json())
.then(data => {
  console.log('Products found:', data);
})
.catch(error => {
  console.error('Error:', error);
});

import requests

# Search using image URL
url = 'https://platform.youzu.ai/api/v1/lens'

headers = {
    'Authorization': 'Bearer YOUR_TOKEN'
}

data = {
    'imageUrl': 'https://example.com/product.jpg'
}

response = requests.post(url, headers=headers, data=data)

if response.status_code == 200:
    products = response.json()
    print('Products found:', products)
else:
    print('Error:', response.status_code, response.text)

Search with Object Detection API

You can also search using a specific detected object region from the Object Detection API. First, call the /api/v1/object-detection endpoint to detect all objects in an image, then use the detection_id from the response to search for products matching that specific object:

Step 1: Detect Objects

Detect objects in an image to get their detection IDs:

curl -X POST "https://platform.youzu.ai/api/v1/object-detection" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -F "image=@room.jpg"

const detectFormData = new FormData();
detectFormData.append('image', document.getElementById('image-input').files[0]);

const detections = await fetch('https://platform.youzu.ai/api/v1/object-detection', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  body: detectFormData
}).then(r => r.json());

// Get the detection_id of the object you want to search for
const detectionId = detections[0].detection_id;

import requests

detect_url = 'https://platform.youzu.ai/api/v1/object-detection'
detect_headers = {'Authorization': 'Bearer YOUR_TOKEN'}
detect_files = {'image': open('room.jpg', 'rb')}

detections = requests.post(detect_url, headers=detect_headers, files=detect_files).json()

# Get the detection_id of the object you want to search for
detection_id = detections[0]['detection_id']

Step 2: Search Products

Use the detection ID to search for products matching that specific object:

curl -X POST "https://platform.youzu.ai/api/v1/lens" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -F "detectionId=detect_abc123"

const searchFormData = new FormData();
searchFormData.append('detectionId', detectionId);

const products = await fetch('https://platform.youzu.ai/api/v1/lens', {
  method: 'POST',
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN'
  },
  body: searchFormData
}).then(r => r.json());

console.log('Products found for detected object:', products);

search_url = 'https://platform.youzu.ai/api/v1/lens'
search_headers = {'Authorization': 'Bearer YOUR_TOKEN'}
search_data = {'detectionId': detection_id}

products = requests.post(search_url, headers=search_headers, data=search_data).json()
print('Products found for detected object:', products)

SDK

Props

Prop	Attribute	Type	Default	Description
`buttonClass`	`button-class`	String	`''`	CSS class for the lens button
`captionText`	`caption-text`	String	`'Search by image'`	Caption text for the button
`dropdownClass`	`dropdown-class`	String	`''`	CSS class for the dropdown panel
`inputClass`	`input-class`	String	`''`	CSS class for the input field
`inputId`	`input-id`	String	`''`	ID for the input field
`inputName`	`input-name`	String	`''`	Name attribute for the input field
`inputValue`	`input-value`	String	`''`	Initial value for the input field
`lang`	`lang`	String	`undefined`	Language code for internationalization
`placeholder`	`placeholder`	String	`'Search for products...'`	Placeholder text for the input field
`showCaption`	`show-caption`	Boolean	`false`	Whether to show the caption text below the button

Events

Event	Description	Type
`imageSelected`		`CustomEvent<{ imageUrl: string; }>`
`searchError`		`CustomEvent<{ error: string; }>`
`searchResults`		`CustomEvent<SearchResultsEventData>`
`searchStart`		`CustomEvent<void>`

Methods

Method	Parameters	Return Type	Description
`switchTo3D`	`options?: LensOptions`	`Promise<void>`	Switch to 3D view
`toggleView`		`Promise<void>`	Toggle between 2D and 3D views

Authentication

Shop the Look