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.

Basic Usage

Add the <youzu-search-lens> tag to your HTML:

<youzu-search-lens></youzu-search-lens>

Demo

Integration with Search Input

<div style="position: relative; width: 400px; margin: 0 auto;">
  <input 
    type="text" 
    id="product-search"
    placeholder="Search for products..."
    style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px;"
  />
  <youzu-search-lens 
    input-id="product-search"
    placeholder="Search for products..."
    show-caption="false">
  </youzu-search-lens>
</div>

Usage Options

<youzu-search-lens 
  input-id="product-search"
  placeholder="Search for products..."
  show-caption="false">
</youzu-search-lens>

const searchLens = document.querySelector('youzu-search-lens');

// Listen for search results
searchLens.addEventListener('searchResults', event => {
  console.log('Products found:', event.detail.results);
});

// Listen for errors
searchLens.addEventListener('searchError', event => {
  console.error('Search error:', event.detail.error);
});

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

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

import requests

# Upload an image file
with open('product-image.jpg', 'rb') as image_file:
    files = {'file': image_file}
    headers = {'x-client-id': 'YOUR_CLIENT_ID'}
    
    response = requests.post(
        'https://platform-api.youzu.ai/api/v1/lens',
        files=files,
        headers=headers
    )
    
    if response.status_code == 200:
        products = response.json()
        print('Products found:', products)
    else:
        print('Error:', response.status_code, response.text)

curl -X POST https://platform-api.youzu.ai/api/v1/lens \
  -H "x-client-id: YOUR_CLIENT_ID" \
  -F "file=@product-image.jpg"

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

Example with Event Listeners

<div style="width: 400px; margin: 0 auto;">
  <youzu-search-lens 
    id="searchLensEvents" 
    input-id="product-search-events"
    placeholder="Search products..."
    show-caption="false">
  </youzu-search-lens>

  <div id="eventLog" style="margin-top: 20px; padding: 15px; background: #f5f5f5; border-radius: 4px; font-family: monospace; max-height: 200px; overflow-y: auto;">
    Event log:
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const searchLens = document.getElementById('searchLensEvents');
    const eventLog = document.getElementById('eventLog');

    if (searchLens && eventLog) {
      const logEvent = (eventName, detail) => {
        const logItem = document.createElement('div');
        logItem.textContent = `${eventName}: ${JSON.stringify(detail)}`;
        eventLog.appendChild(logItem);
        eventLog.scrollTop = eventLog.scrollHeight;
      };

      searchLens.addEventListener('imageSelected', event => {
        logEvent('imageSelected', event.detail);
      });

      searchLens.addEventListener('searchResults', event => {
        logEvent('searchResults', event.detail);
      });

      searchLens.addEventListener('searchError', event => {
        logEvent('searchError', event.detail);
      });
      
      searchLens.addEventListener('searchStart', event => {
        logEvent('searchStart', {});
      });
    }
  });
</script>