Image Workbench
Last updated
Was this helpful?
Last updated
Was this helpful?
· The Image Workbench provides Iframe-based editors for image-related capabilities – such as image translation, background removal, scene generation, and marketing image creation – supporting users’ advanced editing and optimization needs. It can be quickly integrated into customer business workflows.
· Built upon each single-capability image editor, the Image Workbench offers a one-stop editing platform that connects multiple image-related capabilities, allowing users to meet the diverse product image design and processing needs for business scenarios within a single workbench.
· The Workbench’s tool combinations can be freely customized according to integrator’s needs
· Canvas content is preserved when switching between different capability editors to support further editing
· Offers a wealth of continuously updated templates and design materials for full-scenario use
The pricing of each capability in the Workbench is consistent with the corresponding API product. Charges are based on prepaid resource packages per product, and you may purchase resource packages on demand according to the actual situation. Resource packs are valid for 1 year and are currently non-refundable. Pricing for each capability is detailed on each product introduction page.
· In order to use each capability integrated in the Workbench, please first purchase the editor resource package for the corresponding capability. For example, to use the Image Translation and Intelligent Elimination features in the Workbench, please purchase the corresponding editor resource packs for these two capabilities at the same time.
· Editor products and API products are independent of each other, and their resource packages are not interchangeable. For example, if you need both the Image Translation API and the Image Translation Editor, please purchase both packages separately.
· In the editor, charges only occur when ‘Generate’ button is clicked. Before billing, a confirmation will be presented to the integrator (see the Editor Integration Guide for configuration details).
Integration instructions and code examples can be found in the Editor Integration Guide.
In particular, as stated in the ‘Embedding the Editor Static Page’ section of the Editor Integration Guide, the capability routing and input parameters required for the construction of the src field are as follows.
If the integrator needs to access a multi-capability combined workbench, it is necessary to configure the workbench route.
📢Note：If only a single capability is required, it is sufficient to configure only the route corresponding to that specific capability editor. For each capability route, please refer to the respective capability editor product documentation.
The workbench route address is as follows
'https://editor.d.design/editor/index.html/#/station'
Depending on the content that the integrator wishes to present when opening the editor page, different input parameters can be selected.
All parameters are optional. If none are filled in, the editor will display the initial state upon opening the page. Users can then upload images and other operations within the editor to complete the generation task.
imageUrl
String
No
Image URL.
Image requirements:
No larger than 3000x3000 pixels;
Size no more than 10MB;
Supports png, jpeg, jpg, bmp, webp formats.
toolList
Array<string>
No
Configure the capabilities and their order displayed in the workspace.
By default, all capabilities supported by the workspace will be displayed.
For specific configuration methods, please refer to the next section ‘Toolbar Customization’.
You can append the toolList parameter to the src field to customize the toolbar layout and order of capabilities shown in the Workbench.
If not configured, the toolbar will display all available capabilities by default.
Example parameter configuration：
toolList = ['cutout', 'elimination', 'marketing-image', 'clothes', 'scene', 'virtual-try-on', 'translate']
The order of the parameter values determines the order of tools displayed in the toolbar.
The workbench currently supports combination of the following 7 capabilities:
· cutout=Background removal
· elimination=Image erasure
· marketing-image=Marketing image generation
· clothes=Model re-skinning
· scene=Scene image generation
· virtual-try-on=Virtual try-on
· translate=Image translation
See individual editor product documentation for detailed introductions to each capability.
const sceneParam = { apiHost: 'ae', lang: 'zh-cn', imageUrl: "https://nhci-aigc.oss-cn-zhangjiakou.aliyuncs.com/ppc-records/dev_results/Mt2PGS4CmQ_layout.png?OSSAccessKeyId=LTAI5tCv9DpB7gYic1oGsAyv&Expires=4910584301&Signature=mknYqU8RgQO2jpLWlzxuli0hWG8=" }; // Processed into a string that can be concatenated const payloadString = encodeURIComponent(JSON.stringify(sceneParam));
// Tool page URL const sceneURL = 'https://editor.d.design/editor/index.html/#/scene';
// Concatenated into the final link
const iframeURL = ${sceneURL}?payload=${payloadString};
📢Note：Ensure that the field name of payloadString matches the corresponding field name in the server-provided page API.
Integrator can obtain result data in two ways: (1) Event listener; (2) Manual trigger. See the ‘Result Retrieval’ section in the Editor Integration Guide for detailed implementation.
Error messages are uniformly returned via API. Please kindly refer to the Editor Integration Guide for the returned data structure.
Each capability’s specific error codes can be found in its respective editor product documentation.
Example：
