Visual search

The widget lets users search for products from an image, either by selecting a file from the device or capturing with the camera. The component is ImageSearchModal.

How it works

1. The user clicks the "image" button on the input. If features.imageSearch = false, the button is hidden.
2. The modal opens with two paths:
   • Upload: drag & drop or <input type="file"> for JPG/PNG/WebP.
   • Camera: getUserMedia({ video: true }) and capture into <canvas>.
3. The image is sent to the backend as multipart/form-data:

POST/api/widget/search/visual

curl -X POST https://api.neuroon.ai/api/widget/search/visual \
  -H "X-Widget-Token: $WIDGET_TOKEN" \
  -F "image=@product.jpg"

Controller at WidgetSearchController.java.

4. The backend extracts visual embeddings, identifies likely similar products, generates a natural-language query and returns SearchResponse with aiResponse indicating the query used.

Client-side validation

Restriction	Value
Formats	image/jpeg, image/png, image/webp
Maximum size	10 MB
Recommended minimum resolution	256 × 256

If the file does not comply, the modal shows image.unsupportedFormat or image.fileTooLarge (requires HTTPS and explicit permission. If the host appliesPermissions-Policy, we recommend camera=(self "https://cdn.neuroon.ai")`.

Further reading

• Text search
• Accessibility — the modal honors focus trap.
• Reference → Errors