Automated Image Description Workflow

Project Access Link

https://editor.momen.app/tool/KrABb5M5Jn4/WEB?code=ZlJOE7CSqs4eg&ref=0562398 

Introduction

• Goal: Create a feature that allows users to upload a product image and automatically receive a professional title and marketing description generated by AI.
• Applicable Scenario: E-commerce platforms, CMS content management, or social media marketing tools.
• Core Logic: UI (Image Picker) -> Actionflow (Input) -> AI Agent (Vision Analysis) -> Database (Insert Record).

Steps

Data Storage

First, we need a table to store the original images and the metadata generated by the AI.

• Data Model: Go to the Data tab and create a table named product.

AI Agent Configuration

We need to configure an AI Agent capable of “seeing” the image and returning structured data.

1. Inputs: Add an input named product_image and set its type to Image.
2. Prompt Template:
   • Role: Expert E-commerce Copywriter.
   • Goals: Analyze the user’s product_image, identify key features (category, material, style, condition), and write descriptive copy.
3. Structured Output: To ensure the backend can save the data easily, set the output type to Structured. Define an object body containing:
   • title (String)
   • description (String)

Actionflow Construction

The Actionflow handles the logic of passing the image to the AI and saving the result. Set the Execution Mode to Async (Asynchronous) in the right panel.

1. Input Node: Define a parameter product_image (Type: Image).
2. .AI Node: Select the Start conversation action.
   • Select AI: Choose the agent configured in the previous step.
   • Inputs: Bind product_image to the Actionflow’s input data.
3. Database Node: Select Insert data for the product table.
   • image: Map to Actionflow data / input-data / product_image.
   • title: Map to Actionflow data / AI node / data / title.
   • description: Map to Actionflow data / AI node / data / description.

UI Construction & Interaction

Now, build the interface to trigger the process.

1. Component Tree:
   • Image picker: For the user to upload the photo.
   • Button: To trigger the AI analysis.
2. Interaction Configuration:
   • Select the Button and go to the Interaction panel.
   • Event: OnClick -> Actionflow.
   • Action: Select AI Image Description.
   • Parameters: Bind product_image to the value of the Image picker component.

Verification

1. Click Preview in the top right corner.
2. Upload a clear product image (e.g., a glass teapot) using the Image Picker.
3. Click the “Get Started” (Button).
4. Navigate to Data Source -> Database and check the product table. You should see a new record with the uploaded image and AI-generated text.