Búsqueda por Voz e Imagen

El widget permite buscar productos usando voz o imágenes, ofreciendo una experiencia de búsqueda multimodal.

Búsqueda por Voz

Activación

La búsqueda por voz está habilitada por defecto:

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

Requisitos

Requisito	Detalle
HTTPS	Obligatorio (excepto localhost)
Navegadores	Chrome, Safari, Edge
Permisos	Acceso al micrófono

Idioma

La búsqueda por voz usa Español (es-ES) como idioma de reconocimiento.

Cómo funciona

1. Usuario hace clic en el icono de micrófono
2. Se solicita permiso del micrófono (primera vez)
3. El widget muestra "Escuchando..."
4. Usuario dicta su búsqueda
5. Se transcribe y ejecuta la búsqueda automáticamente

Manejo de errores

El widget muestra mensajes de error automáticamente cuando ocurren problemas:

Error	Mensaje al usuario
Permiso denegado	"Permite el acceso al micrófono"
No se detectó voz	"No te escuché. Inténtalo de nuevo"
Navegador no soportado	"Tu navegador no soporta búsqueda por voz"
Error de red	"Error de conexión"

Tecnología

El widget usa la Web Speech API internamente.

Personalizar textos de voz

NeuroonWidget.init({
  translations: {
    voice: {
      noAudioDetected: 'No se detectó audio. Intenta de nuevo.',
      noVoiceDetected: 'No se detectó voz. Intenta de nuevo.',
      submit: 'Enviar búsqueda por voz',
      audioProcessError: 'Error al procesar audio',
      recordingError: 'Error al grabar audio',
      microphonePermissionDenied: 'Permiso de micrófono denegado',
      microphoneAccessFailed: 'No se pudo acceder al micrófono',
      microphoneBlockedByPolicy: 'El micrófono está bloqueado...',
      browserNotSupported: 'Tu navegador no soporta búsqueda por voz',
      tapToSend: 'Toca para enviar',
    },
  },
});

---

Búsqueda por Imagen

Activación

La búsqueda por imagen está habilitada por defecto:

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

Formatos soportados

Formato	Extensión	Soporte
JPEG	.jpg, .jpeg	Completo
PNG	.png	Completo
WebP	.webp	Completo
GIF	.gif	Solo primer frame
HEIC	.heic	Conversión automática

Límites

Parámetro	Valor
Tamaño máximo	10 MB
Resolución mínima	100x100 px
Resolución máxima	4096x4096 px

Métodos de entrada

1. Subir archivo: Click en el icono de cámara → Seleccionar archivo
2. Arrastrar y soltar: Drag & drop de imagen sobre el widget
3. Captura de cámara: En móviles, opción de tomar foto

Cómo funciona

1. Usuario sube/captura una imagen
2. Imagen se redimensiona si es necesario (máx 1024px)
3. Se envía al backend para análisis
4. El motor genera embeddings de imagen (OpenCLIP)
5. Se buscan productos visualmente similares
6. Resultados ordenados por similitud visual

Manejo de errores

El widget muestra mensajes de error automáticamente:

Error	Mensaje al usuario
Formato no válido	"Usa JPG, PNG o WebP"
Archivo muy grande	"La imagen es muy grande (máx 10MB)"
Resolución baja	"La imagen es muy pequeña"
Error de servidor	"Error al procesar la imagen"

Personalizar textos de imagen

NeuroonWidget.init({
  translations: {
    image: {
      cancel: 'Cancelar',
      analyze: 'Analizar imagen',
      uploading: 'Subiendo...',
      analyzing: 'Analizando...',
      analyzingImage: 'Analizando imagen...',
      identifyingProducts: 'Identificando productos',
      selectedImage: 'Imagen seleccionada',
      removeImage: 'Eliminar imagen',
      search: 'Búsqueda por imagen',
      unsupportedFormat: 'Formato no soportado. Usa JPG, PNG, WebP o GIF.',
      fileTooLarge: 'El archivo es muy grande. Máximo 10MB.',
      dragHere: 'Arrastra una imagen aquí',
      orClickSelect: 'o haz click para seleccionar',
      uploadFile: 'Subir archivo',
      useCamera: 'Usar cámara',
      supportedFormats: 'JPG, PNG, WebP, GIF • Máximo 10MB',
      dropHere: 'Suelta la imagen aquí',
      uploadHint: 'Sube una foto para encontrar productos',
      analysisError: 'Error al analizar la imagen.',
    },
  },
});

---

Accesibilidad

Ambas funcionalidades están diseñadas con accesibilidad en mente:

Voz

• Anuncio ARIA cuando el micrófono está activo
• Feedback visual + sonoro
• Timeout configurable (10s por defecto)

Imagen

• Labels descriptivos en botones
• Feedback de progreso accesible
• Texto alternativo para resultados

---

Desactivar funcionalidades

Si no necesitas estas funcionalidades:

NeuroonWidget.init({
  features: {
    voiceSearch: false,  // Oculta icono de micrófono
    imageSearch: false,  // Oculta icono de cámara
  },
});

Próximos pasos

• Comparación de Productos - Comparar resultados
• Accesibilidad - Cumplimiento WCAG
• Callbacks - Responder a eventos del widget