El Editor Canvas
El Canvas es donde ocurre la magia en Armox. Es un editor visual basado en nodos donde conectas diferentes componentes para crear potentes flujos de trabajo de generación de contenido.
¿Qué es el Canvas?
El editor Canvas con un flujo de trabajo completo: múltiples nodos conectados para crear un pipeline de generación de contenido.
El Canvas es el editor visual de flujos de trabajo de Armox. En lugar de escribir código o usar interfaces complejas, tú:
- 🎨 Arrastras y sueltas nodos en un canvas visual
- 🔗 Conectas nodos con líneas simples
- ▶️ Ejecutas flujos de trabajo con un solo clic
- 👀 Ves resultados directamente en el canvas
Piensa en él como un diagrama de flujo que realmente funciona—cada caja hace algo, y las líneas muestran cómo fluyen los datos entre ellas.
Resumen de la Interfaz del Canvas
Cuando abres un Canvas, verás:
| Área | Propósito |
|---|---|
| Canvas Principal | Tu espacio de trabajo con fondo de cuadrícula |
| Barra Lateral Izquierda | Tipos de nodos para agregar |
| Barra Superior | Nombre del canvas, guardar, ejecutar todo, configuración |
| Minimapa | Vista general de todo tu canvas (esquina inferior derecha) |
| Panel Derecho | Configuraciones del nodo cuando uno está seleccionado |
Navegación
Zoom
- Rueda del ratón — Acercar y alejar
- Gesto de pellizco — En trackpad
- Controles de zoom — En la barra de herramientas
Desplazamiento
- Clic y arrastrar — En espacio vacío del canvas
- Botón central del ratón — Clic y arrastrar
- Barra espaciadora + arrastrar — Método alternativo
Minimapa
El minimapa en la esquina inferior derecha muestra todo tu canvas:
- Clic en el minimapa para saltar a esa área
- Arrastra el rectángulo de vista para navegar
- Activa/desactiva el minimapa en configuración
Creando un Nuevo Canvas
- Haz clic en Canvas en la barra lateral
- Haz clic en + Nuevo Canvas
- Ingresa un nombre para tu canvas
- ¡Comienza a agregar nodos!
Un canvas nuevo y vacío listo para tu flujo de trabajo.
Tu canvas se guarda automáticamente mientras trabajas.
Agregando Nodos
Desde la Barra Lateral
- Abre la barra lateral izquierda (haz clic en el ícono de menú si está oculta)
- Explora las categorías de nodos:
- Texto — Para prompts y generación de texto
- Imagen — Para generación de imágenes con IA
- Video — Para generación de video con IA
- Audio — Para música y voz
- Carga — Para tus propios archivos
- Herramientas — Para procesamiento y mejora
- Arrastra un nodo al canvas, o haz clic para agregar
El panel de Agregar Nodo mostrando todos los tipos de nodos disponibles organizados por categoría.
Agregar Rápido
- Clic derecho en el canvas para un menú contextual
- Selecciona un tipo de nodo para agregarlo en esa ubicación
Seleccionando Nodos
Selección Individual
- Clic en un nodo para seleccionarlo
- Los nodos seleccionados muestran un borde resaltado
- El panel derecho muestra las configuraciones del nodo
Selección Múltiple
- Shift + Clic — Agregar a la selección
- Arrastrar un recuadro — Seleccionar múltiples nodos a la vez
- Ctrl/Cmd + A — Seleccionar todos los nodos
Moviendo Nodos
- Arrastra los nodos seleccionados para reposicionarlos
- Teclas de flecha — Mover nodos seleccionados con precisión
- Múltiples nodos seleccionados se mueven juntos
Conectando Nodos
Creando Conexiones
- Encuentra el conector de salida (pequeño círculo en el lado derecho de un nodo)
- Haz clic y arrastra desde el conector de salida
- Arrastra hacia un conector de entrada (lado izquierdo de otro nodo)
- Suelta para crear la conexión
Colores de Conexión
Las conexiones están codificadas por color según el tipo de datos:
| Color | Tipo | Ejemplo |
|---|---|---|
| Amarillo | Texto | Prompts, descripciones |
| Azul | Imagen | Fotos, gráficos |
| Verde | Video | Clips, animaciones |
| Naranja | Audio | Música, voz |
Eliminando Conexiones
- Clic en una línea de conexión para seleccionarla
- Presiona Suprimir o Retroceso
- O clic derecho y selecciona "Eliminar"
Configuraciones de Nodo
Cuando seleccionas un nodo, el panel derecho muestra sus configuraciones:
Configuraciones Comunes
| Configuración | Descripción |
|---|---|
| Modelo | Qué modelo de IA usar |
| Prompt | Entrada de texto (para nodos de IA) |
| Relación de Aspecto | Dimensiones de salida |
| Calidad | Nivel de calidad de salida |
Secciones Colapsables
Las configuraciones están organizadas en secciones colapsables:
- Básico — Configuraciones esenciales
- Avanzado — Opciones de ajuste fino
- Salida — Vista previa y descarga
Ejecutando Flujos de Trabajo
Ejecutar un Solo Nodo
- Selecciona el nodo que quieres ejecutar
- Haz clic en el botón ▶ Play en el nodo
- Observa el indicador de progreso
- Ve el resultado en la vista previa del nodo
Ejecutar Todo el Flujo de Trabajo
- Haz clic en Ejecutar Todo en la barra de herramientas
- Los nodos se ejecutan en orden basado en las conexiones
- Cada nodo muestra su progreso
- Los resultados aparecen a medida que cada nodo completa
Orden de Ejecución
Los nodos se ejecutan en orden de dependencia:
- Los nodos sin entradas se ejecutan primero
- Luego los nodos que dependen de esas salidas
- Continúa hasta que todos los nodos completen
Viendo Resultados
Vista Previa en el Nodo
El contenido generado aparece directamente en el nodo:
- Imágenes — Vista previa en miniatura
- Videos — Reproductor de video
- Audio — Reproductor de audio
- Texto — Visualización de texto
Vista Previa Completa
- Clic en la vista previa para verla más grande
- Botón de Descarga para guardar en tu computadora
- El contenido también se guarda en tu Galería
Guardando y Organizando
Guardado Automático
Los canvas se guardan automáticamente mientras trabajas. Verás un indicador "Guardado" en la barra de herramientas.
Guardado Manual
- Presiona Ctrl/Cmd + S para forzar guardado
- O haz clic en Guardar en la barra de herramientas
Renombrando
- Haz clic en el nombre del canvas en la barra de herramientas
- Escribe un nuevo nombre
- Presiona Enter
Organizando Canvas
- Crea nombres descriptivos
- Usa convenciones de nombres (ej., "Cliente - Proyecto - Versión")
- Elimina canvas viejos que ya no necesites
Atajos de Teclado
| Acción | Atajo |
|---|---|
| Guardar | Ctrl/Cmd + S |
| Deshacer | Ctrl/Cmd + Z |
| Rehacer | Ctrl/Cmd + Shift + Z |
| Seleccionar Todo | Ctrl/Cmd + A |
| Eliminar Seleccionado | Suprimir / Retroceso |
| Acercar | Ctrl/Cmd + Más |
| Alejar | Ctrl/Cmd + Menos |
| Ajustar Vista | Ctrl/Cmd + 0 |
| Desplazar | Barra espaciadora + Arrastrar |
Mejores Prácticas del Canvas
Consejos de Diseño
- Flujo de izquierda a derecha — Entradas a la izquierda, salidas a la derecha
- Deja espacio — No amontones los nodos
- Agrupa nodos relacionados — Mantén funciones similares cerca
- Usa el minimapa — Para navegar flujos de trabajo grandes
Consejos de Flujo de Trabajo
- Comienza simple — Empieza con 2-3 nodos, luego expande
- Prueba incrementalmente — Ejecuta nodos uno a uno para verificar
- Guarda frecuentemente — Aunque el autoguardado funciona, los guardados manuales ayudan
- Nombra claramente — Usa nombres descriptivos para los canvas
Consejos de Rendimiento
- No sobrecargues — Canvas muy grandes pueden ralentizarse
- Ejecuta selectivamente — Solo ejecuta los nodos que necesitas
- Limpia — Elimina nodos y conexiones no utilizados
Solución de Problemas
El Canvas No Carga
- Actualiza la página
- Verifica tu conexión a internet
- Prueba un navegador diferente
Los Nodos No Se Conectan
- Verifica que los tipos sean compatibles (colores coinciden o texto a cualquier cosa)
- Asegúrate de arrastrar de salida a entrada
- Intenta eliminar y recrear la conexión
Los Resultados No Aparecen
- Verifica que el nodo terminó de ejecutarse (sin spinner)
- Busca mensajes de error en el nodo
- Verifica tu saldo de créditos
Próximos Pasos
Ahora que conoces el Canvas, profundiza en:
- Conectando Nodos — Construye flujos de trabajo complejos
- Ejecutando Flujos de Trabajo — Ejecuta y gestiona tus creaciones
- Creando Apps — Convierte flujos de trabajo en Apps reutilizables