This guide explains the main options in the AI Image module. The module is used to build an AI image generation interface in BM Builder, including the upload area, generation button, style picker, default comparison images, and RunningHub workflow configuration.
Add the AI Image Module
In BM Builder, open the content module picker and choose AI Image. This adds an AI image generation module to the page.
General Settings Overview
The General Settings tab controls the user-facing layout and labels. Use this area to decide how the AI image tool appears on the frontend.
Layout
Layout selects the frontend display style. The Classic layout shows the upload area, option area, and result comparison in a guided flow.
Generate Button Text
Generate Button Text changes the label of the button users click to start image generation. Use clear action text such as Generate Image.
Credits Cost
Credits Cost sets how many credits are deducted from the logged-in user for each generation. Set this value according to your subscription or credit pricing model.
Reverse Panel Layout
Reverse Panel Layout swaps the left and right panels on the frontend. Enable it when the upload or control panel should appear on the opposite side.
Style
Style controls the visual preset for the module. In the screenshot, the module uses the Classic style.
Classic Intro Text
Classic Intro Text appears above the upload area in the Classic layout. HTML is allowed, so you can add a heading, short description, or introductory instructions for users.
Upload Title Text
Upload Title Text is shown above the upload area. Use it to label the required source image, such as 1. Reference Image.
Upload Description Text
Upload Description Text appears below the upload title in the Classic layout. Leave it empty if you do not want to show extra upload instructions.
Enable Preset Upload Images
Enable Preset Upload Images shows selectable preset images below the Classic upload area. Turn it on if users should be able to start from prepared sample images.
Enable Style Picker
Enable Style Picker displays a second image selector, such as a hairstyle, makeup style, filter, or other reference style used by the AI workflow.
Enable Style Picker Tabs
Enable Style Picker Tabs shows tabs in the style picker. This is useful when style images need to be grouped into categories.
Choose Style Text
Choose Style Text changes the label above the style picker. Use it to guide users through the next step, for example 2. Choose a style.
Style Picker Items
Style Picker Items defines the available style groups. Each item is one tab group with multiple selectable images. Use Add Tab to create more groups, then edit each tab to add its style images.
Default Before Image
Default Before Image is shown in the Classic comparison area before the user uploads a photo. It can be used as a placeholder or example starting image.
Default After Image
Default After Image is shown in the Classic comparison area before generation finishes. It can preview the expected result style or keep the comparison layout balanced before the AI result is ready.
Advanced Settings Overview
The Advanced Settings tab connects the frontend module to the AI workflow. These settings are usually configured by the site builder or developer.
Workflow ID
Workflow ID identifies the RunningHub workflow used by this module. Enter the workflow ID that should process the uploaded images and option values.
Upload Components JSON
Upload Components JSON defines the upload areas shown to users. Each upload area can include an ID, label, maximum image count, description, and file note.
Options HTML
Options HTML adds custom form controls for the AI workflow, such as prompt fields, number inputs, or other user-adjustable parameters. Wrap each control with .option-item and use stable input names or IDs.
Node Configuration JSON
Node Configuration JSON maps frontend values to workflow nodes. Upload values and custom option values can be referenced with placeholders such as ${image}, ${prompt}, or ${steps}, then passed into the correct node fields.