AI Generation Function

Introduction

SenseCraft HMI is Seeed Studio’s interactive interface design platform specifically created for screen-based products. One of its most powerful features is the AI Generation function, which allows you to create beautiful display layouts and images by simply describing what you want in natural language.

This tutorial will guide you through using the AI Generation capabilities in both the Gallery and Canvas sections of SenseCraft HMI, enabling you to:

• Generate custom images based on text descriptions
• Create complete interface layouts with properly positioned components
• Refine and adjust AI-generated content through conversation
• Deploy your designs directly to your device with one click

This article will use the reTerminal E1002 as an example to explain how to use this feature on the SenseCraft HMI platform.

Getting Started

The AI Generation feature is available in both the Gallery and Canvas sections of SenseCraft HMI. Each implementation serves a different purpose:

The AI generation function can be used in both the Image and Layout sections of the SenseCraft HMI. Each implementation method has its own specific application:

• AI Image Generator: Based on your description, create an independent image.
• AI Layout Generator: Design a complete layout with functional components (such as buttons, text fields and data displays)

Let’s explore how to use each of these features effectively.

Start the AI project

• Open the SenseCraft platform

  SenseCraft HMI

• Select UI Designer

• Click the AI button on the right, and then select AI Image Generatoror AI Layout Generator according to your actual needs.

AI Image Generator

The AI Image Generator allows you to create custom images for your display without needing any design skills or external tools.

Creating Images with AI

Step 1. Click the AI button on the right, then select AI Image Generator, and the following screen will appear.

Step 2. Enter a detailed description of the image you want to create. For example:

• A beautiful mountain landscape with a sunrise and pine trees
• A minimalist dashboard showing temperature and humidity icons
• A circuit board pattern with Seeed Studio logo in the center

Step 3. Click the Generate button (magic wand icon) to start the image generation process

Step 4. Wait while the AI processes your request. This typically takes 10-30 seconds depending on the complexity of your description.

Step 5. Once completed, click the Add to Pagelist button，and the AI-generated image will appear in your gallery

Optimize generated images

After generating an image, you can refine it through conversation with the AI:

Step 1. If you’re not satisfied with the result, you can provide feedback directly in the AI Generator panel. For example:

• Make the colors more vibrant
• Add some animals and colors
• Change the background to blue

Step 2. Click Generate again to create a new version based on your feedback

Step 3. Continue this iterative process until you’re satisfied with the result

Effect demonstration

Preview and upload the image

• Click Preview and you can view the preview image.

Tip

The default preview color is Black and White. Click on Dither Mode and select Six Colors to display colors.

• Click the Deploy button to upload the image.

Effect Demonstration:

AI Layout Generator

The AI Layout Generator is more powerful, allowing you to create complete interactive interfaces with functional components.

Creating Layout with AI

Step 1. Click the AI button on the right, then select AI Layout Generator, and the following screen will appear.

Step 2. Notice the AI Generator panel on the right side of the screen, similar to the one in image

Creating Interfaces with AI in Layout

Step 1. In the AI Generator panel, enter a description of the interface you want to create. Be specific about the components you need. For example:

• Create a weather dashboard with temperature display, humidity gauge, and forecast icons
• Design a smart home control panel with buttons for lights, thermostat, and security”
• Make a fitness tracker interface with step counter, heart rate display, and activity history

Step 2. Click the Generate button to start the interface generation process

Step 3. Wait while the AI processes your request and creates the interface layout

Step 4. Once complete, the AI will place various components on your Canvas according to your description

Optimize the generated Canvas

The AI is designed for iterative improvement:

Step 1. Review the generated interface and identify any changes you’d like to make

Step 2. You can provide specific feedback in the AI Generator panel. For example:

• Move the temperature display to the top right
• Make the buttons larger and add labels below them
• Change the color scheme to dark mode
• Add a clock at the top center

Step 3. Click Generate again to update the interface based on your feedback

Step 4. If the AI components do not meet your expected results, you can manually drag the components on the canvas to the position you have specified.

Edit with Components

The layout AI can create and position a variety of components:

Basic Components:

• Text
• Data
• Shapes (rectangles, circles, line and so on)
• QR code
• Drawing

Device Data Components:

• Temperature
• Humidity
• Battery
• SenseCAP

Data:

• Weather
• Weather Icon
• Github
• Github Repo
• Stock
• Youtube

When generating an interface, you can specifically request these components in your prompt.

upload

• Select Six Colors, click Save, and then click Deploy to upload.

• Effect Demonstration:

Best Practices for AI Generation

To get the most out of the AI Generation feature, follow these tips:

Tips for Effective Prompts

1. Be specific: Instead of “Create a dashboard,” try “Create a dashboard with temperature display in the center, humidity on the right, and a clock at the top”
2. Mention colors and style: “Use a blue and white color scheme with rounded corners for all elements”
3. Reference familiar designs: “Make it look like a smart thermostat interface” or “Design it similar to a fitness tracker display”

Iterative Refinement

The most successful designs often come from multiple rounds of feedback:

1. Start with a general description
2. Generate the initial design
3. Provide specific feedback on what to change
4. Generate an updated version
5. Repeat until satisfied

AI Meets Manual Editing

For the best results:

1. Use AI to quickly create the basic layout and components
2. Manually fine-tune the positioning, sizing, and properties of individual elements
3. Add any custom functionality or data bindings manually
4. Use AI again if you want to add new sections or make major changes

Conclusion

Create stunning interfaces in minutes with SenseCraft HMI’s AI Generation. Powered by AI and seamless deployment, it helps you design professional, interactive screens—without design experience.

From images in Gallery to full interfaces in Canvas, AI Generation brings your imagination to life with speed and ease.