Función de generación con IA

Introducción

SenseCraft HMI es la plataforma de diseño de interfaces interactivas de Seeed Studio creada específicamente para productos con pantalla. Una de sus características más poderosas es la función de Generación con IA, que te permite crear hermosos diseños de pantalla e imágenes simplemente describiendo lo que deseas en lenguaje natural.

Este tutorial te guiará en el uso de las capacidades de Generación con IA tanto en las secciones de Galería como de Canvas de SenseCraft HMI, permitiéndote:

• Generar imágenes personalizadas basadas en descripciones de texto
• Crear diseños de interfaz completos con componentes posicionados correctamente
• Refinar y ajustar el contenido generado por IA a través de conversación
• Implementar tus diseños directamente en tu dispositivo con un solo clic

Este artículo utilizará el reTerminal E1002 como ejemplo para explicar cómo usar esta función en la plataforma SenseCraft HMI.

Primeros pasos

La función de Generación con IA está disponible tanto en las secciones de Galería como de Canvas de SenseCraft HMI. Cada implementación tiene un propósito diferente:

La función de generación con IA se puede usar tanto en las secciones de Imagen como de Diseño de SenseCraft HMI. Cada método de implementación tiene su aplicación específica:

• Generador de imágenes con IA: Basándose en tu descripción, crea una imagen independiente.
• Generador de diseño con IA: Diseña un diseño completo con componentes funcionales (como botones, campos de texto y visualizaciones de datos)

Exploremos cómo usar cada una de estas funciones de manera efectiva.

Iniciar el proyecto de IA

• Abre la plataforma SenseCraft

  SenseCraft HMI

• Selecciona Diseñador de UI

• Haz clic en el botón de IA a la derecha, luego selecciona Generador de imágenes con IA o Generador de diseño con IA según tus necesidades reales.

Generador de imágenes con IA

El Generador de imágenes con IA te permite crear imágenes personalizadas para tu pantalla sin necesidad de habilidades de diseño ni herramientas externas.

Crear imágenes con IA

Paso 1. Haz clic en el botón de IA a la derecha, luego selecciona Generador de imágenes con IA, y aparecerá la siguiente pantalla.

Paso 2. Ingresa una descripción detallada de la imagen que deseas crear. Por ejemplo:

• Un hermoso paisaje montañoso con un amanecer y pinos
• Un panel de control minimalista que muestra iconos de temperatura y humedad
• Un patrón de placa de circuito con el logo de Seeed Studio en el centro

Paso 3. Haz clic en el botón Generar (icono de varita mágica) para iniciar el proceso de generación de imágenes

Paso 4. Espera mientras la IA procesa tu solicitud. Esto generalmente toma de 10 a 30 segundos dependiendo de la complejidad de tu descripción.

Paso 5. Una vez completado, haz clic en el botón Agregar a lista de páginas, y la imagen generada por IA aparecerá en tu galería

Optimizar imágenes generadas

Después de generar una imagen, puedes refinarla a través de la conversación con la IA:

Paso 1. Si no estás satisfecho con el resultado, puedes proporcionar comentarios directamente en el panel del Generador de IA. Por ejemplo:

• Haz los colores más vibrantes
• Agrega algunos animales y colores
• Cambia el fondo a azul

Paso 2. Haz clic en Generar nuevamente para crear una nueva versión basada en tus comentarios

Paso 3. Continúa este proceso iterativo hasta que estés satisfecho con el resultado

Demostración de efecto

Vista previa y carga de la imagen

• Haz clic en Vista previa y podrás ver la imagen de vista previa.

Consejo

El color de vista previa predeterminado es Blanco y Negro. Haz clic en Modo de difuminado y selecciona Seis colores para mostrar colores.

• Haz clic en el botón Implementar para cargar la imagen.

Demostración de efecto:

Generador de diseño con IA

El Generador de diseño con IA es más poderoso, permitiéndote crear interfaces interactivas completas con componentes funcionales.

Crear diseño con IA

Paso 1. Haz clic en el botón de IA a la derecha, luego selecciona Generador de diseño con IA, y aparecerá la siguiente pantalla.

Paso 2. Observa el panel del Generador de IA en el lado derecho de la pantalla, similar al de la imagen

Crear interfaces con IA en diseño

Paso 1. En el panel del Generador de IA, ingresa una descripción de la interfaz que deseas crear. Sé específico sobre los componentes que necesitas. Por ejemplo:

• Crea un panel de control meteorológico con visualización de temperatura, medidor de humedad e iconos de pronóstico
• Diseña un panel de control de hogar inteligente con botones para luces, termostato y seguridad
• Haz una interfaz de rastreador de fitness con contador de pasos, visualización de frecuencia cardíaca e historial de actividad

Paso 2. Haz clic en el botón Generar para iniciar el proceso de generación de interfaz

Paso 3. Espera mientras la IA procesa tu solicitud y crea el diseño de la interfaz

Paso 4. Una vez completo, la IA colocará varios componentes en tu Canvas según tu descripción

Optimizar el Canvas generado

La IA está diseñada para mejora iterativa:

Paso 1. Revisa la interfaz generada e identifica cualquier cambio que te gustaría hacer

Paso 2. Puedes proporcionar comentarios específicos en el panel del Generador de IA. Por ejemplo:

• Mueve la visualización de temperatura a la parte superior derecha
• Haz los botones más grandes y agrega etiquetas debajo de ellos
• Cambia el esquema de color a modo oscuro
• Agrega un reloj en la parte superior central

Paso 3. Haz clic en Generar nuevamente para actualizar la interfaz según tus comentarios

Paso 4. Si los componentes de IA no cumplen con tus resultados esperados, puedes arrastrar manualmente los componentes en el lienzo a la posición que has especificado.

Editar con componentes

La IA de diseño puede crear y posicionar una variedad de componentes:

Componentes básicos:

• Texto
• Datos
• Formas (rectángulos, círculos, líneas, etc.)
• Código QR
• Dibujo

Componentes de datos del dispositivo:

• Temperatura
• Humedad
• Batería
• SenseCAP

Datos:

• Clima
• Icono del clima
• Github
• Repositorio de Github
• Acciones
• Youtube

Cuando generes una interfaz, puedes solicitar específicamente estos componentes en tu indicación.

Cargar

• Selecciona Seis colores, haz clic en Guardar y luego haz clic en Implementar para cargar.

• Demostración de efecto:

Mejores prácticas para la generación con IA

Para aprovechar al máximo la función de Generación con IA, sigue estos consejos:

Consejos para indicaciones efectivas

1. Sé específico: En lugar de “Crea un panel de control”, intenta “Crea un panel de control con visualización de temperatura en el centro, humedad a la derecha y un reloj en la parte superior”
2. Menciona colores y estilo: “Usa un esquema de color azul y blanco con esquinas redondeadas para todos los elementos”
3. Haz referencia a diseños familiares: “Hazlo parecer una interfaz de termostato inteligente” o “Diseña similar a una pantalla de rastreador de fitness”

Refinamiento iterativo

Los diseños más exitosos a menudo provienen de múltiples rondas de comentarios:

1. Comienza con una descripción general
2. Genera el diseño inicial
3. Proporciona comentarios específicos sobre qué cambiar
4. Genera una versión actualizada
5. Repite hasta estar satisfecho

IA se encuentra con edición manual

Para obtener los mejores resultados:

1. Usa IA para crear rápidamente el diseño básico y los componentes
2. Ajusta manualmente el posicionamiento, el tamaño y las propiedades de elementos individuales
3. Agrega cualquier funcionalidad personalizada o vinculación de datos manualmente
4. Usa IA nuevamente si deseas agregar nuevas secciones o hacer cambios importantes

Conclusión

Crea interfaces impresionantes en minutos con la Generación con IA de SenseCraft HMI. Impulsado por IA y con implementación sin problemas, te ayuda a diseñar pantallas profesionales e interactivas, sin experiencia en diseño.

Desde imágenes en Galería hasta interfaces completas en Canvas, la Generación con IA da vida a tu imaginación con velocidad y facilidad.