Editor Integration
Last updated
Was this helpful?
Last updated
Was this helpful?
When a user triggers an API call on the editor page, the editor will first send the request parameters to the integrator’s frontend via postMessage before calling the API. Once the integrator’s frontend listens for this message, it will pass the request parameters to the integrator’s backend. The integrator’s backend will generate a signature parameter using the java util method that we provide and return it to the integrator’s frontend. The integrator’s frontend will then send the signature parameter back to the editor. The editor will use the returned signature parameters to initiate signature verification and API call requests. Once the result is returned, it will be presented to the user within the editor.
The integrator’s backend needs to implement the signing logic based on the signing method we provide and expose a signing interface to the integrator’s frontend.
This signing interface is used by the editor to encrypt the parameters when calling the API, enhancing security.
The default interface URL is /open/api/signature. If modification is needed, please add a mapping in INTL_OP_FRAME_SDK_CONFIG.apiMap.
For the convenience of data transmission, the interface method must be defined as POST.
📢 Note: The integrator’s frontend and backend do not need to concern about specific details of the parameters passed during the call. These will be initiated by the communication SDK (the integration method for the communication SDK is detailed in the next section).
Input Parameter Definitions
Parameter Name
Parameter Type
Mandatory or not
Parameter Description
api
String
Yes
Actual API Path for Calling the Open Platform.
params
Map<String, String>
Yes
The input parameters for calling the API.
The backend needs to obtain the parameter, perform the signing process using keys such as the sk, and then return the signed result.
📢Note: Since the parameters for each API call may vary, the value of this parameter is not fixed.
Input Parameter Data Structure
@Data public class SignRequest { String api; Map<String, String> params; }
Example
{ "api": "/ai/editorComponent/getFontList", "params": { "format": "json", "pageNo": "1", "pageSize": "999", "simplify": "true" } }
Output Parameter Definitions
Parameter Name
Parameter Type
Parameter Description
appKey
String
appKey.
targetAppKey
String
appKey.
signMethod
String
Signing method.
timestamp
Long
Calculate the timestamp for signing.
signStr
String
The string returned after signing.
Output Parameter Data Structure
@Data @Builder @AllArgsConstructor @NoArgsConstructor
public class SignResponse implements Serializable { private String appKey; private String targetAppKey; private String signMethod; private Long timestamp; private String signStr; }
Example
📢 Note: The data format returned by the interface must strictly follow the example below.
{ "code": 200, "message":"", "success":true, "requestId": "2131332717267296208106298e1648", "data": { "appKey": "500006", "targetAppKey": "500006", "signMethod": "sha256", "timestamp": 1726729620966, "signStr": "C3C29C4DB83960B7F36B48771483AE74680580E638013BD8D2A5A236C15318CC" }, "result": null }
In this example, the APP_KEY and SECRET_KEY are obtained by the integrator after registering on the open platform.
The signing encryption method is asymmetric encryption, and the verification method involves both the integrator and the verifier using the same encryption method and keys to encrypt the parameters. The encrypted results are then identically compared, and if the comparison is successful, the verification is passed. Therefore, the integrator must strictly follow the implementation example of the following encryption interface:
package com.aidc.api.hub.gateway.web.service;
import com.aidc.api.hub.gateway.web.dto.SignResponse; import com.global.iop.util.IopUtils; import lombok.extern.slf4j.Slf4j; import org.apache.commons.lang.StringUtils; import org.springframework.stereotype.Service;
import javax.crypto.Mac; import javax.crypto.SecretKey; import javax.crypto.spec.SecretKeySpec; import java.io.IOException; import java.util.*;
/**
@author yixuan
@date 2023/12/4 15:28 */
@Slf4j @Service public class SignatureService { public static final String CHARSET_UTF8 = "UTF-8"; public static final String SIGN_METHOD_SHA256 = "sha256"; public static final String SIGN_METHOD_HMAC_SHA256 = "HmacSHA256";
} /** * Transfer binary array to HEX string. */ public static String byte2hex(byte[] bytes) { StringBuilder sign = new StringBuilder(); for (byte aByte : bytes) { String hex = Integer.toHexString(aByte & 0xFF); if (hex.length() == 1) { sign.append("0"); } sign.append(hex.toUpperCase()); } return sign.toString(); }
The Communication SDK is used to forward the call request from the editor during the signing process.
<!DOCTYPE html> <html> <head><head> <body> <script> // open sdk extention configuration window.INTL_OP_FRAME_SDK_CONFIG = { // API mapping apiMap: { '/open/api/signature': '/api/v2/signature.do', }, }; </script> <script src="https://g.alicdn.com/code/npm/@ali/intl-op-frame-sdk/0.1.10/main.min.js"></script> </body> </html>
📢Note：
1. The version number 0.1.10 in the CDN address may be updated. Please refer to the latest version number.
2. INTL_OP_FRAME_SDK_CONFIG is an extension configuration and must be placed before the CDN script, i.e., in the order shown in the example above.
📢 Note: Pre-release resources may be used to test new features. Please do not use pre-release resources in a production environment!!
// window.INTL_OP_FRAME_SDK_CONFIG interface IFrameSDKConfig { /** * Used to map the interface requested by the iframe to the interface actually provided by the backend. If this item is not set, the default request path will be used * It can also be mapped to an asynchronous function, and if this method is used, the asynchronous function must return the correct signed result */ apiMap?: Record<string, string | function>; /** * For `POST|PUT` requests, the default data format is `json`, an optional format is 'formData' * @default 'json' */ dataType?: 'json' | 'formData'; /** * [Optional] Additional parameters for sending data requests. The definition is as follows: */ requestOptions?: RequestOptions; } // Additional Parameters for Sending Data Requests interface RequestOptions { /** Request headers */ headers?: Record<string, string>; /** * Cookie credential sending policy * @default 'same-origin' */ credentials?: 'include' | 'omit' | 'same-origin'; /** * Request mode * @see https://developer.mozilla.org/zh-CN/docs/Web/API/Request/mode */ mode?: RequestMode; }
window.INTL_OP_FRAME_SDK_CONFIG = { // Signing Interface Path Mapping apiMap: { "/open/api/signature": "/mock/signature" } }
The relevant editor page is introduced into the page via the tag. The src field is stitched together by the integrator according to the corresponding parameters of the editor’s capabilities that need to be introduced, and the tag needs to be given an unified class aidc-open-frame.
<iframe class="aidc-open-frame" src="xxx"></iframe>
src is concatenated in the form: Domain Name + Capability Route + Parameters
· Current domain: https://editor.d.design/editor/index.html/#/
· The editor route for each capability is detailed on the product description page for each capability editor.
· The parameters include (1) common parameters; (2) the input parameters of the capability need to be introduced, where the capability input parameters are non-essential concatenated parameters.
(1) Common Parameters
Common parameters refer to the parameter fields that must be concatenated to embed all capabilities of the editor. Please carefully consider whether you need to try the input parameters according to your registered platform environment.
Parameter Name
Parameter Type
Parameter Example
Mandatory or not
Parameter Meaning
apiHost
string
'ae'
'aib'
'aibcn'
Yes
Platform code,
'ae' represents the AE Open Platform (open.aliexpress.com).
‘aib’ represents the Aidge official English site (aidc-ai.com).
‘aibcn’ represents the Aidge official Chinese site (cn.aidc-ai.com).
Please use the platform code corresponding to the platform where you are registered. If you have any questions, please contact the respective operation team.
trial
boolean
'true'
'false'
No
Whether or not to use the trial amount, the default setting is false.
Each ability comes with a trial credit before official purchase.
If you need to use the credit, please set the trial parameter to true in the src field.
lang
string
'zh-cn'
'en-us'
'ja-jp'
No
Set the display language of the editor.
The default is zh-cn, display as Chinese. Optional en-us, display as English. Optional ja-jp, display as Japanese.
charge
boolean
'true'
'false'
No
Whether to enable production interception, set to false by default.
When enabled (set to true), it allows the integrator to control user’s paid API call requests.
Please refer to the ‘ Editor Customization Feature’ – ‘Production Interception’ section below for specific implementation methods.
reEdit
boolean
'true'
'false'
No
Whether to enable re-editing of historical results, set to false by default.
When enabled (set to true), it supports loading historical result data in the editor and continuing to edit.
To implement the re-editing functionality, the integrator needs to pass in the JSON protocol. Specific implementation methods can be found in the ‘Editor Customization Features’ – ‘Re-editing’ section below.
Differences in capabilities, such as image translation, intelligent elimination, scene graph generation, etc., can lead to differences in their input parameters. Consequently, the concatenated result of the src field will change according to the different capabilities that the integrator needs to introduce.
Capability input parameters are optional concatenation parameters, depending on the initial state that the integrator needs to present when introducing the editor page.
The editor routing and specific input parameters for each capability can be found on the product introduction pages for each capability editor.
Below is a concatenation example of the src field for embedding the image translation editor.
📢 Note: The payloadString field name must be consistent with the field names of the page interface provided by the server-side.
// Parameters that need to be concatenated, using image translation as an example. In this case, apiHost and lang are common parameters, while the others are capability input parameters. const translateParam = { apiHost: 'ae', lang: 'zh-cn', imageUrl: "https://img.alicdn.com/imgextra/i3/O1CN01F84hLR29Futc7Oshz_!!6000000008039-0-tps-750-1000.jpg", sourceLanguage: 'zh', targetLanguage: 'en' }; // Process as concatenated string const payloadString = encodeURIComponent(JSON.stringify(translateParam));
// Tool page URL const hostUrl = 'https://editor.d.design/editor/index.html/#/';
// Capability route const router = 'translate';
// Concatenate the final src field. Pay attention to the use of slashes during the concatenation process
const iframeURL = ${hostUrl}${router}?payload=${payloadString};g};
The preset editor display language can be modified by sending a message to the editor via postMessage.
const messages = { lang: 'en-us', }; targetWindow.postMessage(messages, '*'); // This is a reference to the targetWindow that did not receive the message
<iframe id="myiframe"></iframe>
document.getElementById('myiframe').contentWindow.postMessage({lang:'zh-cn'}, '*')
This feature only takes effect when the common parameter charge is set to true in the concatenated src field, while the above editor page is embedded.
The production interception feature allows the integrator to control the user’s paid API requests. In other words, it enables the integrator to decide whether to proceed with the API call based on the results returned by the integrator, achieving a second confirmation before the API call.
Usage scenarios:
The integrator can verify whether the user has sufficient available balance or permissions each time the user makes a paid API call in the editor.
(1)Listen for messages from the editor page and implement the subsequent judgment logic of the integrator.
window.addEventListener("message", (ev) => { const { data, action, errMessage, code } = ev.data; if (action === 'generate') { // todo Based on the needs, complete your processing logic and retrieve the number of images generated by the current user via imageNum. const { imageNum } = data; console.log(data); } });
(2)Return a message to control whether to continue the production process. When the success field in the returned message is true, the user’s request will not be blocked, and the production process will continue. When it is false, the user’s request will be blocked, and a prompt will be sent.
// If success is returned as true, the production steps will proceed, and costs will be incurred. If false is returned, the production will be interrupted. The integrator can send the result back on its own after checking whether the user has enough balance iframeEle.contentWindow.postMessage({ biz: receiveBiz, action: 'respond', success: true }, '*')
This feature only takes effect when the common parameter reEdit is set to true in the concatenated src field, while the above editor page is embedded.
The re-editing feature allows the editor to load the user’s historical result data and continue editing.
When enabled (set to true), the integrator needs to pass the corresponding JSON protocol for loading a specific historical result and enabling the re-editing functionality. If the protocol is not passed, the editor will display its initial state based on the capability input parameters concatenated in the src field.
The JSON protocol is included in the data returned by the editor. For details on how to get it, please refer to the ‘Result Retrieval’ section below.
The integrator needs to send the full JSON protocol to the editor after listening for the initialization render completion of the editor page.
(1) Page event listener: listen for the event where the action is pageReady
// need to listen for events where the action is pageReady window.addEventListener("message", (ev) => { const { data, action} = ev.data; if(action === 'pageReady'){ console.log('the page initialization is complete, wait for the data to be passed in'); // todo Implement your own data retrieval and data sending logic here } });
(2)Send the JSON protocol: send the event where the action is renderSchema
// need to send events where action is renderSchema window.addEventListener("message", (ev) => { // The full protocol content needs to be returned, as this will be used as the result field when the data is saved in the workspace const schema: any = {}; iframe.contentWindow.postMessage({ data: JSON.stringify(schema), action: 'renderSchema', }, '*',) });
After the user triggers the generation service call request and successfully executes it, the result data for the task will be returned upon completion.
The integrator can retrieve the task result data by listening for the message event, where action is taskSuccess.
The result data includes: (1) result list; (2) ID tag for each result: the ID tag is a unique identifier of each result and can be used to track results subsequently after user’s editing has been saved.
📢Note: The generated task result data represents the algorithm-generated output, not the final result as modified by the user. It does not include user actions such as adding, editing, or modifying within the editor.
window.addEventListener("message", (ev) => { const { data, action, biz, errMessage } = ev.data; if(action === 'taskSuccess'){ console.log('business：', biz ,'generation task completed, result -》',data); // Example result printed // business：nhci-scene generation task completed, result -》 [{id: '8198193e-2645-42eb-a12e-3876432e0375', url: 'https://aibz-aigc-record.oss-ap-southeast-1.aliyun…6082&Signature=YzGmouFX2rnm4e0rSO%2FvhUM%2FWa4%3D'}, {id: '63f02e77-dfcc-48f7-b34b-aee20c72afb3', url: 'https://aibz-aigc-record.oss-ap-southeast-1.aliyun…676082&Signature=Z1C%2FpEwknqEOIF8mjWgkrrOnHSg%3D'}] } });
// Format of the returned result data type Result = Array
type ResultItem = { id: string; url: string; }
The integrator can listen for the message event on the page to retrieve the data returned by the editor.
We will return the result data to the integrator when the user triggers the following 3 situations:
(1) When the user clicks the ‘Save’ button, the current canvas result image and protocol will be returned to the integrator.
(2) When the user clicks the ‘Download’ button, the current canvas result image will be downloaded to the user’s local device, and the result image and protocol will be returned to the integrator.
window.addEventListener("message", (ev) => { const { data, action, errMessage, code } = ev.data; if (action === 'submitAll') { // ToDo Implement your own data retrieval and data sending logic here alert('receive task result：', data) } });
If the integrator needs to retrieve the result data in the editor from outside, you can do so by sending an event where action is requestResult.
// The event with the action requestResult needs to be sent window.addEventListener("message", (ev) => { iframe.contentWindow.postMessage({ action: 'requestResult', }, '*',) });
Upon receiving the above message, the editor will return the complete result data in the message format shown in the example below.
window.addEventListener("message", (ev) => { const { data, action, errMessage, code } = ev.data; if (action === 'submitAll') { // ToDo Implement your own data retrieval and data sending logic here const result: ResultType[] = data; console.log('returned result example：', result) } })
The returned result data includes the image URL and the JSON protocol.
The image URL represents the result image of the user’s current canvas. The JSON protocol contains the result data record within the current editor.
The JSON protocol needs to be saved by the integrator. When the re-editing feature is enabled, this protocol can be passed in to load and continue editing the historical result data in the editor.
📢Note: We kindly request the integrator do not make any modifications to the JSON protocol during storage or transmission. Any changes may affect the editor’s ability to read and load historical data.
📢Note: We kindly remind the integrator to promptly save the returned image URL to avoid the image expiration, which may lead to invalidation.
Format and examples of returned data results:
interface ResultType { id: string, // result ID, used to track both the algorithm-generated results and the user-adjusted results originalUrl: string, // original processed image url?: string, // the result image of the current canvas in the editor, when there are multiple results, only the current canvas will return the image URL in the url field schema: any, // the protocol content used for re-editing, which can be passed in again to restore the editing state on the page tool: string, // tools used for production, can be: translate、 scene 、cutout .... }
/** Returned result example： [ { "id":"8198193e-2645-42eb-a12e-3876432e0375" "originalUrl": "https://nhci-editor-sg.oss-accelerate.aliyuncs.com/iframe/500618/translate/20241017/c984e7af706345d0b40999557ae816c5/0346075b-3aa4-4cf5-851f-6cc6dcff07ec.png?Expires=1729234389&OSSAccessKeyId=LTAI5tQscCMKL8fkacJQ9Gei&Signature=tt%2FOmV749rSEpZRKvuC0JEiH9J4%3D", "url": "https://piccopilot.oss-accelerate.aliyuncs.com/compose/3ce6b762-7b39-4b66-881b-637b588c0195.png?OSSAccessKeyId=LTAI5tR9CxJh5q35LYbhGAeT&Expires=4945820006&Signature=CBT%2FtFogWYqEyxU98wJlpKRCFMk%3D", "schema": "{"id":"7cf2bea0-8c54-11ef-abe7-00163e0aaaa0","language":"fr","type":"template","layers":[{"type":"image","top":451,"left":471,"width":942,"height":902,"scaleX":1,"scaleY":1,"selectable":false,"visible":true,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":true,"id":"5653870c-6363-4a79-aff4-0023eea08fc8","src":"https://aib-image.oss-ap-southeast-1.aliyuncs.com/tufan%2F7ca54e18-8c54-11ef-88cb-00163e0aaaa0.png?OSSAccessKeyId=LTAI5tSEGjGp5wixZgHLc3bV&Expires=4945819996&Signature=QU1j1d4TqbeMDgGjVpYb%2BwmUxpE%3D","zIndex":1},{"visible":false,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":true,"id":"bbf34187-04c9-4935-bf98-e6aea3b57c1e","type":"image","top":633.5,"left":680.5,"width":273,"height":51,"scaleX":1,"scaleY":1,"src":"https://imagine-oss.oss-accelerate.aliyuncs.com/compose/20748cb0-94b7-4a56-b53e-5d8430d2e890.png?OSSAccessKeyId=LTAI5tR9CxJh5q35LYbhGAeT&Expires=4945819998&Signature=25OKEzSalAxFlwcHe1g50OyDA%2B8%3D","zIndex":3,"refId":"461e1eef-f51b-4631-893a-e160d3209d99"},{"visible":false,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":true,"id":"bae41ecc-247e-4c63-a0cb-d06017d33cbe","type":"image","top":744.5,"left":677,"width":272,"height":29,"scaleX":1,"scaleY":1,"src":"https://imagine-oss.oss-accelerate.aliyuncs.com/compose/dd8152c7-c946-4983-b2f0-f06c7331a7f1.png?OSSAccessKeyId=LTAI5tR9CxJh5q35LYbhGAeT&Expires=4945819998&Signature=06AUwc%2FigWZmAcF8wJ9tOZ0aW0c%3D","zIndex":5,"refId":"d10363cc-528c-405a-9728-21590dbfb492"},{"visible":false,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":true,"id":"7a2b412e-a24c-4105-a6bf-fe9a70c5ce18","type":"image","top":523.5,"left":678,"width":274,"height":51,"scaleX":1,"scaleY":1,"src":"https://imagine-oss.oss-accelerate.aliyuncs.com/compose/0521221b-50bc-49f0-a5aa-00c29edb51b9.png?OSSAccessKeyId=LTAI5tR9CxJh5q35LYbhGAeT&Expires=4945819998&Signature=rEuJV37nIilzxUvReOUaIAwN%2Fws%3D","zIndex":2,"refId":"eedc08e1-c951-4829-8ae9-44af97a9c130"},{"visible":false,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":true,"id":"01a63f6d-e2a2-4515-80be-d3ef7320f5ef","type":"image","top":266.5,"left":653.5,"width":373,"height":45,"scaleX":1,"scaleY":1,"src":"https://imagine-oss.oss-accelerate.aliyuncs.com/compose/994a7eaf-2900-4a73-8015-e32c052b5618.png?OSSAccessKeyId=LTAI5tR9CxJh5q35LYbhGAeT&Expires=4945819998&Signature=UFaOibFMFqnTA7DK7Ma5nAxQQj8%3D","zIndex":4,"refId":"2195463f-0e46-4950-a29c-be259ffaa6f3"},{"visible":false,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":true,"id":"47aeec40-b1b6-4043-8ce1-34a9955dfcf9","type":"image","top":154,"left":649.5,"width":325,"height":40,"scaleX":1,"scaleY":1,"src":"https://imagine-oss.oss-accelerate.aliyuncs.com/compose/433023b0-7c40-48c3-b382-e53d6980e617.png?OSSAccessKeyId=LTAI5tR9CxJh5q35LYbhGAeT&Expires=4945819998&Signature=p3qS2bcCPeX7boZBnKwOVJdTGH4%3D","zIndex":6,"refId":"93c165df-6510-4ec4-a0a5-76c64bc254e1"},{"visible":false,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":true,"id":"661852cd-716e-4a27-ad2b-b3301686dfaf","type":"image","top":409,"left":681,"width":270,"height":22,"scaleX":1,"scaleY":1,"src":"https://imagine-oss.oss-accelerate.aliyuncs.com/compose/d92c74c2-a505-426f-b8cd-7493990fb25d.png?OSSAccessKeyId=LTAI5tR9CxJh5q35LYbhGAeT&Expires=4945819998&Signature=DcsT2%2B75PI1uPUbYi1HCvjuNkws%3D","zIndex":7,"refId":"3faf9d58-04a2-4ed6-bae8-d7384a9385bc"},{"id":"db26cc3c-7df2-4a50-813e-f061c6065398","type":"image","top":451,"left":471,"width":942,"height":902,"scaleX":1,"scaleY":1,"selectable":false,"visible":false,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":false,"src":"https://nhci-editor-sg.oss-accelerate.aliyuncs.com/iframe/500618/translate/20241017/c984e7af706345d0b40999557ae816c5/0346075b-3aa4-4cf5-851f-6cc6dcff07ec.png?Expires=1729234389&OSSAccessKeyId=LTAI5tQscCMKL8fkacJQ9Gei&Signature=tt%2FOmV749rSEpZRKvuC0JEiH9J4%3D","zIndex":14,"label":"original"},{"visible":true,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":false,"id":"461e1eef-f51b-4631-893a-e160d3209d99","type":"text","splitByGrapheme":false,"top":634,"left":680.5,"width":269,"height":46,"fontSize":22,"content":"Les factures spéciales peuvent être émises. Ed","originalFontSize":22,"originalContent":"Special invoices can be issu. ed","scaleX":1,"scaleY":1,"fontFamily":"AlibabaSans-Bold","textAlign":"center","fontStyle":"normal","fontWeight":"normal","color":"#ffffff","backgroundColor":"transparent","textDecoration":"none","zIndex":1000,"refId":"bbf34187-04c9-4935-bf98-e6aea3b57c1e","editorType":"material"},{"visible":true,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":false,"id":"d10363cc-528c-405a-9728-21590dbfb492","type":"text","splitByGrapheme":false,"top":744.5,"left":677,"width":270,"height":27,"fontSize":19,"content":"SF Express Livraison gratuite","originalFontSize":19,"originalContent":"Sf express free shipping","scaleX":1,"scaleY":1,"fontFamily":"AlibabaSans-Bold","textAlign":"right","fontStyle":"normal","fontWeight":"normal","color":"#fefefc","backgroundColor":"transparent","textDecoration":"none","zIndex":1000,"refId":"bae41ecc-247e-4c63-a0cb-d06017d33cbe","editorType":"material"},{"visible":true,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":false,"id":"eedc08e1-c951-4829-8ae9-44af97a9c130","type":"text","splitByGrapheme":false,"top":522.5,"left":678,"width":270,"height":45,"fontSize":19,"content":"Si vous payez dix pour un faux, vous serez indemnisé.","originalFontSize":19,"originalContent":"If you pay ten for a fake one , you will be compensated.","scaleX":1,"scaleY":1,"fontFamily":"AlibabaSans-Bold","textAlign":"center","fontStyle":"normal","fontWeight":"normal","color":"#fefefe","backgroundColor":"transparent","textDecoration":"none","zIndex":1000,"refId":"7a2b412e-a24c-4105-a6bf-fe9a70c5ce18","editorType":"material"},{"visible":true,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":false,"id":"2195463f-0e46-4950-a29c-be259ffaa6f3","type":"text","splitByGrapheme":false,"top":266.5,"left":653.5,"width":369,"height":41,"fontSize":40,"content":"Téléphone satellite","originalFontSize":40,"originalContent":"Satellite phone","scaleX":1,"scaleY":1,"fontFamily":"AlibabaSans-Bold","textAlign":"center","fontStyle":"normal","fontWeight":"normal","color":"#061549","backgroundColor":"transparent","textDecoration":"none","zIndex":1000,"refId":"01a63f6d-e2a2-4515-80be-d3ef7320f5ef","editorType":"material"},{"visible":true,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":false,"id":"93c165df-6510-4ec4-a0a5-76c64bc254e1","type":"text","splitByGrapheme":false,"top":154,"left":638,"width":346,"height":38,"fontSize":38,"content":"9575 d'iridium","originalFontSize":38,"originalContent":"Iridium 9575","scaleX":1,"scaleY":1,"fontFamily":"AlibabaSans-Bold","textAlign":"right","fontStyle":"normal","fontWeight":"normal","color":"#fefefd","backgroundColor":"transparent","textDecoration":"none","zIndex":1000,"refId":"47aeec40-b1b6-4043-8ce1-34a9955dfcf9","editorType":"material"},{"visible":true,"opacity":1,"rotate":0,"flipX":false,"flipY":false,"locked":false,"id":"3faf9d58-04a2-4ed6-bae8-d7384a9385bc","type":"text","splitByGrapheme":false,"top":409,"left":681,"width":268,"height":20,"fontSize":19,"content":"Véritable nouvelle machine.","originalFontSize":19,"originalContent":"Genuine new machine.","scaleX":1,"scaleY":1,"fontFamily":"AlibabaSans-Bold","textAlign":"right","fontStyle":"normal","fontWeight":"normal","color":"#fdfdfd","backgroundColor":"transparent","textDecoration":"none","zIndex":1000,"refId":"661852cd-716e-4a27-ad2b-b3301686dfaf","editorType":"material"}],"width":942,"height":902,"backgroundColor":"transparent"}", "tool": "translate" } ] */
iframeImage path： bizid：
let iframeEle = null; let type = "banner"; let baseUrl = "https://editor.d.design/editor/index.html/#/"; let selectsLang = 'zh'; let selecttLang = 'en'; let apiHost = 'ae'; let trial = true; let lang = 'zh-cn'; // language function getSourceLang() { var slang = document.getElementsByName("sourceLanguage"); for (var i = 0; i < slang.length; i++) { if (slang[i].checked) { selectsLang = slang[i].value; break; } } } function getTargetLang() { var tlang = document.getElementsByName("targetLanguage"); for (var i = 0; i < tlang.length; i++) { if (tlang[i].checked) { selecttLang = tlang[i].value; break; } } } const okBtn = document.querySelector(".okBtn"); okBtn.onclick = handleLang; function getPageUrl() { if (type === "banner") { const payloadString = encodeURIComponent( JSON.stringify({ apiHost, trial, productImageUrl: "https://piccopilot.oss-accelerate.aliyuncs.com/daily/compose/9227eba1-84fd-41b1-b598-63992a8bcacf.png?Expires=2018329037&OSSAccessKeyId=LTAI5t8wTopfofNtRDRrpsJY&Signature=NDZCqF1xULoN51A%2BgPHaROvVoTs%3D", sellingPointExtractionRequest: { productCategory : ["Home & Garden"], productTitle: "For Car 500ML 9H Hardness Car Detailing Ceramic Coating Car Products Car Accessories Nano Glass Voiture Plastic Restorer Tools", productDescription: "SpecificationProduct Name: Paint Crystal PlatingCapacity: 500mlMaterial: siliconStatus: Liquid hand sprayCuring speed: instant film formationConstruction method: one spray and one wipeScope of use: universal for all carsNotice1. Photos was been shoot based on real products and a professional camera, due to the light and the screen display being different, there will be a certain color, which can not be avoided, it is not a quality problem.2. Due to the personal measurement technique being different and the elastic fabric of the material/There may be a 1-inch error the physical, Please choose the size accordingly.", }, lang: lang, }), ); return `${baseUrl}banner?payload=${payloadString}`; } else if (type === "scene") { const payloadString = encodeURIComponent( JSON.stringify({ apiHost, trial, url: "https://next-ubanner.oss-cn-beijing.aliyuncs.com/ALIWOOD_TEMPLATE/2020-06-03/test/data_plain.png", lang: lang, }), ); return `${baseUrl}scene?payload=${payloadString}`; } else if (type === "clothes") { const payloadString = encodeURIComponent( JSON.stringify({ apiHost, trial, url: "https://img.alicdn.com/imgextra/i3/O1CN01pDHDHn1rGE3Qfc9Ev_!!6000000005603-0-tps-750-1000.jpg", lang: lang, }), ); return `${baseUrl}clothes?payload=${payloadString}`; } else if(type === "translate"){ const langInput = document.getElementById('langInput').value; const bizidInput = document.getElementById('bizid').value; const payloadString = encodeURIComponent( JSON.stringify({ apiHost, trial, imageUrl: langInput, sourceLanguage: selectsLang, targetLanguage: selecttLang, translatingTextInTheProduct: true, imageEditorId: bizidInput, lang: lang, }), ); return `${baseUrl}translate?payload=${payloadString}`; } else if (type === "elimination") { const payloadString = encodeURIComponent( JSON.stringify({ apiHost, trial, width: 800, height: 800, imageUrl: 'https://next-ubanner.oss-cn-beijing.aliyuncs.com/ALIWOOD_TEMPLATE/2020-06-03/test/test1.jpg', lang: lang, }), ); return `${baseUrl}elimination?payload=${payloadString}`; } } function createIframe(src) { if (iframeEle) { document.body.removeChild(iframeEle); } iframeEle = document.createElement("iframe"); iframeEle.src = src; iframeEle.className = "aidc-open-frame"; iframeEle.id = "myiframe"; iframeEle.frameborder = "0"; document.body.insertBefore(iframeEle, document.body.children[0]); } // open sdk extension configuration window.INTL_OP_FRAME_SDK_CONFIG = { // API mapping apiMap: { "/open/api/signature": "/mock/signature", }, }; var translatebox = document.querySelector('.translatebox'); function handleLang(event) { translatebox.style.display = "none"; type='translate'; createIframe(getPageUrl()); event.preventDefault(); } createIframe(getPageUrl()); function handleswitch() { if (type === "banner") { type = "scene"; } else if (type === "scene") { type = "clothes"; } else if (type === "clothes") { type = "translate" } else if (type === "translate") { type = "elimination"; } else if (type === "elimination") { type = "banner"; } createIframe(getPageUrl()); } const myBtn = document.getElementById("myBtn"); myBtn.onclick = handleswitch; const aeBtn = document.getElementById("ae"); aeBtn.onclick = () => { apiHost = 'ae'; createIframe(getPageUrl()); }; const aibBtn = document.getElementById("aib"); aibBtn.onclick = () => { apiHost = 'aib'; createIframe(getPageUrl()); }; const aibcnBtn = document.getElementById("aibcn"); aibcnBtn.onclick = () => { apiHost = 'aibcn'; createIframe(getPageUrl()); }; const trialBtn= document.getElementById("trial"); trialBtn.onclick = () => { trial = true; createIframe(getPageUrl()); }; const notrialBtn= document.getElementById("notrial"); notrialBtn.onclick = () => { trial = false; createIframe(getPageUrl()); }; const chLangBtn = document.getElementById("langCH"); chLangBtn.onclick = () => { lang = 'zh-cn'; createIframe(getPageUrl()); }; const enLangBtn = document.getElementById("langEN"); enLangBtn.onclick = () => { lang = 'en-gb'; createIframe(getPageUrl()); }; function handlemessage(list) { alert("Receive a picture message" + JSON.stringify(list)); } window.addEventListener("message", (ev) => { console.log("---------------", ev.data); const { data, action } = ev.data; if (action === "submit") { handlemessage(data); }else if (action === "model") { translatebox.style.display = "block"; } }); </script>
{ biz: 'nhci-common', action: 'error', errCode: 'request-ErrCode', errMessage: errMsg, }
For detailed error messages and codes, please refer to the product introduction page of each capability editor. The integrator can customize the error message to the user based on the errCode.
Pre-release：
Production：
