Personalizar tu asistente visual

Hoy vamos a personalizar tu asistente visual, modificando las imágenes que aparecen en pantalla cuando hablas con él.

Este proceso está explicado en la documentación de Home Assistant y, aunque hacen mención al ESP32-S3-BOX-3, lo cierto es que también puedes aplicarlo a otros dispositivos como el M5Stack CoreS3SE.

Requisitos previos

Para poder personalizar tu asistente visual, previamente necesitas:

• Haber configurado Assist en Home Assistant.
• Haber instalado ESPHome en Home Assistant.
• Algún dispositivo que haga de asistente visual (como el M5Stack CoreS3 SE o el ESP32-S3-BOX-3).

-14%

Aliexpress

32,49€ 37,78€

el controlador oficial M5Stack CoreS3 SE IoT sin parte inferior de la batería

32,49€ en Aliexpress

-56%

Aliexpress

47,30€ 107,50€

Controlador M5Stack CoreS3 SE IoT ESP32 Series S3, Kit de desarrollo, WiFi, pantalla de 2,0 pulgadas para bricolaje, desarrollo de proyectos, hogar inteligente

47,30€ en Aliexpress

-14%

Aliexpress

54,71€ 63,62€

ESP32-S3-BOX-3/3B Kit de desarrollo de aplicaciones AIoT de código abierto

54,71€ en Aliexpress

-16%

Aliexpress

48,81€ 58,11€

ESP32-S3-BOX-3/ESP32-S3-BOX-3B Kit de desarrollo de aplicaciones AIOT

48,81€ en Aliexpress

🥑 Si estás configurando Assist, te recomiendo que veas el taller de la academia para sacarle el máximo partido!

Esquema de imágenes

Para personalizar tu asistente visual tienes que partir de la base de que el Assist utiliza 6 imágenes diferentes para interactuar contigo, dependiendo de de fase en la que se encuentre (conectándose, a la espera, escuchando, pensando, contestando o error). Por defecto, las imágenes que vas a ver son las siguientes:

Creación de tus propias imágenes

Las imágenes anteriores pueden ser sustituidas por las que tú quieras, para de esta forma personalizar tu asistente visual. Los únicos parámetros que tienes que seguir es que sean imágenes con una resolución de 320*240 pixels (si es más grande, el resto no aparecerá en pantalla) y que esté en formato PNG, JPEG, o SVG.

En mi caso he generado las siguientes, que puedes descargar desde este enlace.

💡 Si vas a utilizar a un "personaje" como asistente, te recomiendo que crees una imagen con el personaje en el centro y el fondo transparente. A partir de ahí puedes jugar con los colores de fondo y el resto de elementos para mostrar cada fase.

Configuración de las imágenes

Una vez que ya has generado todas tus imágenes para personalizar tu asistente visual, mételas en una carpeta y llámala como quieras (por ejemplo «visual-assistant»). Luego copia esta carpeta en tu servidor de Home Assistant, dentro de la ruta ‘/config/esphome’ (para ello te recomiendo que utilices Samba Share).

Hecho esto sólo tienes que volver a entrar al complemento de ESPHome desde HA, y acceder al código de configuración de tu dispositivo. En las primeras líneas tendrás que adaptar la ruta que apunta a tus imágenes, de la siguiente forma:

  loading_illustration_file: visual-assistant/loading.png
  idle_illustration_file: visual-assistant/idle.png
  listening_illustration_file: visual-assistant/listening.png
  thinking_illustration_file: visual-assistant/thinking.png
  replying_illustration_file: visual-assistant/replying.png
  error_illustration_file: visual-assistant/error.png