Cómo construir un comparador de imágenes tipo ComfyUI en HTML y JavaScript

Crear herramientas interactivas en la web no siempre tiene por qué ser complicado. Si queremos lograr un comparador de imágenes tipo «antes y después», podemos usar HTML, CSS y JavaScript puro para construir algo muy funcional sin necesidad de frameworks pesados. Es básicamente una lógica de superposición: tenemos dos capas de imagen, una capa oculta que actúa como máscara, y un control deslizante que mueve esa máscara para revelar la segunda imagen debajo.

El código base para este comparador es bastante directo. Utilizamos un contenedor principal que define el tamaño de nuestra vista, con dos etiquetas img posicionadas absolutamente una encima de la otra. La clave está en el CSS: aplicamos un overlay sobre la segunda imagen y usamos JavaScript para rastrear los eventos del ratón, calculando la posición exacta donde hacemos clic dentro del contenedor.

Ahora, ¿cómo se conecta esto con esa idea de los nodos visuales como ComfyUI? Aunque nuestro ejemplo inicial es un control manual de «blend» o mezcla, la lógica subyacente puede expandirse mucho más allá. Podríamos implementar modos de wipe vertical u horizontal para transiciones dinámicas, o incluso añadir opacidad para mezclar las capas en lugar de solo cortarlas.

Imagina un entorno donde podrías cargar imágenes mediante arrastrar y soltar directamente sobre los nodos, permitiendo encadenar múltiples capas o leer outputs generados automáticamente. Al final del día, este comparador simple es la base perfecta para construir una herramienta visual mucho más compleja que realmente capture la potencia de esos flujos de trabajo.