Voice & Image Search

The widget allows searching for products using voice or images, providing a multimodal search experience.

Voice Search

Activation

Voice search is enabled by default:

NeuroonWidget.init({
  features: {
    voiceSearch: true, // Default: true
  },
});

Requirements

Requirement	Detail
HTTPS	Required (except localhost)
Browsers	Chrome, Safari, Edge
Permissions	Microphone access

Supported languages

Language	Code	Accuracy
Spanish	es-ES	High
English	en-US	High

Language is automatically detected based on the widget's locale setting.

How it works

1. User clicks the microphone icon
2. Microphone permission is requested (first time)
3. Widget shows "Listening..."
4. User dictates their search
5. Speech is transcribed and search executed automatically

Error handling

The widget displays error messages automatically when issues occur:

Error	User message
Permission denied	"Please allow microphone access"
No speech detected	"I didn't hear you. Try again"
Browser not supported	"Your browser does not support voice search"
Network error	"Connection error"

Technology

The widget uses the Web Speech API internally.

Customize voice texts

NeuroonWidget.init({
  translations: {
    voice: {
      listening: 'Listening...',
      speak: 'Say what you are looking for',
      processing: 'Processing...',
      noMatch: "I didn't understand. Can you repeat?",
      notSupported: 'Your browser does not support voice search',
      permissionDenied: 'Microphone access required',
    },
  },
});

---

Image Search

Activation

Image search is enabled by default:

NeuroonWidget.init({
  features: {
    imageSearch: true, // Default: true
  },
});

Supported formats

Format	Extension	Support
JPEG	.jpg, .jpeg	Full
PNG	.png	Full
WebP	.webp	Full
GIF	.gif	First frame only
HEIC	.heic	Auto-conversion

Limits

Parameter	Value
Maximum size	5 MB
Minimum resolution	100x100 px
Maximum resolution	4096x4096 px

Input methods

1. Upload file: Click camera icon → Select file
2. Drag and drop: Drag & drop image onto widget
3. Camera capture: On mobile, option to take photo

How it works

1. User uploads/captures an image
2. Image is resized if needed (max 1024px)
3. Sent to backend for analysis
4. Engine generates image embeddings (OpenCLIP)
5. Visually similar products are searched
6. Results sorted by visual similarity

Error handling

The widget displays error messages automatically:

Error	User message
Invalid format	"Use JPG, PNG, or WebP"
File too large	"Image too large (max 5MB)"
Low resolution	"Image too small"
Server error	"Error processing image"

Customize image texts

NeuroonWidget.init({
  translations: {
    image: {
      upload: 'Upload a product photo',
      dragDrop: 'Drag an image here',
      takePhoto: 'Take photo',
      searching: 'Searching similar products...',
      noResults: 'No similar products found',
      formatError: 'Invalid format. Use JPG, PNG, or WebP',
      sizeError: 'Image too large. Maximum 5MB',
    },
  },
});

---

Responding to searches

To execute logic when the user searches (by voice, image, or text), use the onSearch callback:

NeuroonWidget.init({
  callbacks: {
    onSearch: (query) => {
      console.log('User searched:', query);
      // Send analytics, etc.
    },
  },
});

Available callbacks

Callbacks are the only way to respond to widget events. See the callbacks documentation for all available options.

---

Accessibility

Both features are designed with accessibility in mind:

Voice

• ARIA announcement when microphone is active
• Visual + audio feedback
• Configurable timeout (10s default)

Image

• Descriptive button labels
• Accessible progress feedback
• Alt text for results

---

Disable Features

If you don't need these features:

NeuroonWidget.init({
  features: {
    voiceSearch: false,  // Hides microphone icon
    imageSearch: false,  // Hides camera icon
  },
});

Next steps

• Product Comparison - Compare results
• Accessibility - WCAG compliance
• Callbacks - Respond to widget events