MetaPerson Creator

https://docs.metaperson.avatarsdk.com/
Admin
MetaPerson Creator is a revolutionary 3D avatar builder that allows users to create and customize...
Tokens:17,665
Snippets:239
Trust Score:9.6
Update:2 months ago
Show doc for...
Tokens:
Raw
### Event Listener Setup

Source: https://docs.metaperson.avatarsdk.com/js_api

How to listen for messages sent by the MetaPerson Creator.

```APIDOC
## Event Listener

### Description
Listen for 'message' events on the window object to receive notifications from the MetaPerson Creator.

### Implementation
```javascript
window.addEventListener("message", (evt) => {
    if (evt.data?.source === "metaperson_creator") {
        const eventName = evt.data?.eventName;
        // Handle eventName
    }
});
```
```

--------------------------------

### Define Texture Profiles in Export Template

Source: https://docs.metaperson.avatarsdk.com/js_api

Example JSON structure specifying texture profiles and lists for avatar, outfits, and haircuts slots.

```json
{
  "avatar":
  {
    "textures" :
    {
      "profile" : "2K.jpg",
      "list":
      [
        "Color",
        "Normal",
        "Roughness",
        "UnityMetallicSmoothness",
        "GltfMetallicRoughness"
      ]
    }
  },
  "outfits":
  {
    "textures" :
    {
      "profile" : "1K.jpg",
      "list":
      [
        "Color",
        "Normal",
        "Roughness",
        "UnityMetallicSmoothness",
        "GltfMetallicRoughness",
        "RecoloringMask"
      ]
    }
  },
  "haircuts":
  {
    "textures" :
    {
      "profile" : "4K.png",
      "list":
      [
        "AO",
        "Alpha",
        "Color",
        "Depth",
        "GltfMetallicRoughness",
        "Normal",
        "Root",
        "Roughness",
        "ScalpShade",
        "ScalpShadeAOAlpha",
        "ScalpShadeAlpha",
        "Shade",
        "UniqueID",
        "UnityMetallicSmoothness"
      ]
    }
  }
}
```

--------------------------------

### Access Token Response

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Example JSON response containing the access token.

```json
{
  "access_token": "PAvD64lbikgVA0GzxgKV2ZhLnPbZ8P",
  "token_type": "Bearer",
  "expires_in": 36000,
  "scope": "read write"
}
```

--------------------------------

### LiveSpeak event payloads

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Example JSON payloads for different LiveSpeak events.

```json
{  
  source: 'livespeak',  
  eventName: 'livespeak_loaded'  
}  
```

```json
{  
  source: 'livespeak',  
  eventName: 'avatar_state_changed',  
  avatarState: 'Ready'  
}  
```

```json
{  
  source: 'livespeak',  
  eventName: 'message_processing_error',  
  failedEventName: 'load_model',  
  reason: 'Unable to load the model.'  
}  
```

--------------------------------

### Configure Visibility Masks in Export Template

Source: https://docs.metaperson.avatarsdk.com/js_api

Example JSON structure to disable visibility masks for the outfits_shoes slot.

```json
{
  "outfits_shoes":
  {
    "apply_visibility_masks" : false
  }
}
```

--------------------------------

### Configure MetaPerson Creator Desktop UI parameters

Source: https://docs.metaperson.avatarsdk.com/js_api

Use this message structure to set UI visibility and behavior parameters for the MetaPerson Creator Desktop via postMessage.

```javascript
let uiParametersMessage = {  
    // Common parameters for Mobile and Desktop versions  
    "eventName": "set_ui_parameters",  
    "isExportButtonVisible" : true,  
    "outfitsBlackList" : ["ARPI", "SEVAN"],  
    "skipViewerControls" : ['color', 'animations'],  
      
    // Desktop version specific parameters  
    "isScreenshotButtonVisible": true,  
    "closeExportDialogWhenExportCompleted" : false,  
    "isLanguageSelectionVisible" : true,  
    "language" : "",  
    "showLatestCreatedAvatar" : true,  
    "metaPersonLabelText" : "MetaPerson Avatars",  
    "isTakeSelfieButtonVisible" : true,  
    "isBrowsePhotoButtonVisible" : true,  
    "showSampleAvatars" : true,  
    "ageSelectionAvailable" : true,  
    "pipelineSelectionAvailable" : true,  
    "defaultPipeline" : "male",  
    "computationParametersPanelVisible" : true,  
    "enableLipsync": false,  
    "isGifButtonVisible" : false,  
    "isPngButtonVisible" : false,  
    "isAnimateButtonVisible": false  
};  
evt.source.postMessage(uiParametersMessage, "*");  
```

--------------------------------

### LeapUtils.PrepareArchiveForCloudComputations

Source: https://docs.metaperson.avatarsdk.com/leap

Prepares a local avatar archive for cloud-based computation.

```APIDOC
## LeapUtils.PrepareArchiveForCloudComputations

### Description
Converts a local avatar code into a byte array suitable for cloud processing.

### Parameters
- **avatarCode** (string) - Required - The local avatar code.

### Response
- **archiveBytes** (byte[]) - The prepared archive data.
```

--------------------------------

### Render Video with FFmpeg

Source: https://docs.metaperson.avatarsdk.com/leap

Command to convert a sequence of PNG images generated by the Unreal Engine sequencer into an MP4 video file.

```bash
ffmpeg -r 60  -i "Saved\MovieRenders\LevelSequence_RealisticAnim_0.%04d.png" -c:v libx265 -crf 2 -vf format=yuv420p10le -tag:v hvc1  "I:\renders\video0.mp4" -y  
```

--------------------------------

### Create HTML structure for MetaPerson Creator

Source: https://docs.metaperson.avatarsdk.com/web_integration

Initial boilerplate HTML structure for the integration page.

```html
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>MetaPerson Creator Web Sample</title>  
     <style>  
      * {  
        margin: 0;  
        padding: 0;  
      }  
    </style>  
  </head>  
    
  <body>  
  </body>  
    
  <script>  
  </script>  
  
</html>
```

--------------------------------

### Initialize JavaScript message listener

Source: https://docs.metaperson.avatarsdk.com/web_integration

Set up event listeners to handle incoming messages from the MetaPerson Creator iframe.

```javascript
document.addEventListener('DOMContentLoaded', function onDocumentReady() {  
  window.addEventListener("message", onWindowMessage);  
});  
  
function onWindowMessage(evt) {  
  if (evt.type === "message") {  
    if (evt.data?.source === "metaperson_creator"){  
      let data = evt.data;  
      let evtName = data?.eventName;  
      switch (evtName) {  
      }  
    }  
  }  
}
```

--------------------------------

### Create and Embed LiveSpeak Iframe

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Initializes the LiveSpeak iframe with required sandbox and permission attributes, appending it to a container element.

```javascript
const iframe = document.createElement('iframe');  
iframe.id = 'livespeak-iframe';  
iframe.src = 'https://metaperson.avatarsdk.com/livespeak/index.html?mode=tts_azure1&lang=English';  
iframe.title = 'LiveSpeak';  
iframe.sandbox = 'allow-scripts allow-same-origin allow-forms';  
iframe.allow = 'autoplay;';  
iframe.style.width = '100%';  
iframe.style.height = '600px';  
  
document.getElementById('container').appendChild(iframe);
```

--------------------------------

### set_ui_parameters

Source: https://docs.metaperson.avatarsdk.com/js_api

Sends a postMessage to the MetaPerson Creator to configure UI visibility and default settings.

```APIDOC
## set_ui_parameters

### Description
Configures the UI elements and default behaviors of the MetaPerson Creator Desktop application by sending a message to the window source.

### Parameters
- **eventName** (string) - Required - Must be set to 'set_ui_parameters'.
- **isExportButtonVisible** (boolean) - Optional - Specifies if the Export button is visible. Default: true.
- **outfitsBlackList** (array) - Optional - List of outfit identifiers to hide.
- **skipViewerControls** (array) - Optional - List of viewer controls to hide (e.g., 'style', 'outfits', 'animations').
- **isScreenshotButtonVisible** (boolean) - Optional - Specifies if the Screenshot button is visible. Default: true.
- **closeExportDialogWhenExportCompleted** (boolean) - Optional - Specifies if the export dialog is shown after export. Default: false.
- **isLanguageSelectionVisible** (boolean) - Optional - Specifies if the UI language selection is visible. Default: true.
- **language** (string) - Optional - UI language ('EN', '漢語'). Default: 'EN'.
- **showLatestCreatedAvatar** (boolean) - Optional - Specifies if the latest avatar is accessible from the home screen. Default: true.
- **metaPersonLabelText** (string) - Optional - Text for the main screen label. Default: 'MetaPerson Avatars'.
- **isTakeSelfieButtonVisible** (boolean) - Optional - Specifies if the 'Take a selfie' button is visible.
- **isBrowsePhotoButtonVisible** (boolean) - Optional - Specifies if the 'Browse for photo' button is visible.
- **showSampleAvatars** (boolean) - Optional - Specifies if sample avatars are available.
- **ageSelectionAvailable** (boolean) - Optional - Specifies if age selection controls are available.
- **pipelineSelectionAvailable** (boolean) - Optional - Specifies if gender selection controls are available.
- **defaultPipeline** (string) - Optional - Default pipeline ('male' or 'female').
- **computationParametersPanelVisible** (boolean) - Optional - Specifies if the computation parameters panel is visible.
- **enableLipsync** (boolean) - Optional - Enables LipSync. Default: false.
- **isGifButtonVisible** (boolean) - Optional - Specifies if the GIF generation button is visible. Default: false.
- **isPngButtonVisible** (boolean) - Optional - Specifies if the PNG generation button is visible. Default: false.
- **isAnimateButtonVisible** (boolean) - Optional - Specifies if the animation generation button is visible. Default: false.

### Request Example
{
  "eventName": "set_ui_parameters",
  "isExportButtonVisible": true,
  "language": "EN"
}
```

--------------------------------

### Loading a custom model via postMessage

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Sends the load_model command to the iframe after receiving the ModelAwaiting state event. Ensure the model URL is publicly accessible and includes required blendshapes.

```javascript
// Recommended: wait for ModelAwaiting state before sending load_model  
window.addEventListener('message', (event) => {  
  const data = event.data;  
  if (!data || data.source !== 'livespeak') return;  
  
  if (data.eventName === 'avatar_state_changed' && data.avatarState === 'ModelAwaiting') {  
    const modelUrl = 'https://metaperson.avatarsdk.com/avatars/9b51b708-387c-440c-9f25-a310fef8c01e/model.glb';  
    iframe.contentWindow.postMessage({  
      eventName: 'load_model',  
      modelUrl: modelUrl  
    }, '*');  
  }  
});  
```

--------------------------------

### Prepare Archive for Cloud Computation

Source: https://docs.metaperson.avatarsdk.com/leap

Convert local avatar data into a Base64 string suitable for cloud processing. Use LeapUtils to handle the byte conversion.

```csharp
byte[] archiveBytes = LeapUtils.PrepareArchiveForCloudComputations("local_leap_avatar_code");  
string base64Archive = Convert.ToBase64String(archiveBytes);  
```

--------------------------------

### Handle authentication event

Source: https://docs.metaperson.avatarsdk.com/web_integration

Authenticate the session by sending credentials upon receiving the loaded event.

```javascript
switch (evtName) {  
  case "metaperson_creator_loaded":  
    let authenticationMessage = {  
      "eventName": "authenticate",  
      "clientId": CLIENT_ID,  
      "clientSecret": CLIENT_SECRET  
    };  
    evt.source.postMessage(authenticationMessage, "*");  
  break;  
}
```

--------------------------------

### Configure Export Parameters

Source: https://docs.metaperson.avatarsdk.com/js_api

Sends a set_export_parameters message to the MetaPerson Creator instance to define output format, LOD, and texture quality.

```javascript
let exportParametersMessage = {  
    "eventName": "set_export_parameters",  
    "format" : "gltf",  
    "lod" : 1,  
    "textureProfile" : "1K.jpg",  
    "useZip" : true,  
    "headOnly" : "false",  
    "removeNeckLayers" : 0  
    "exportTemplateJson": "{\"outfits_shoes\":{\"apply_visibility_masks\" : false}}"  
};  
evt.source.postMessage(exportParametersMessage, "*");  
```

--------------------------------

### authenticate

Source: https://docs.metaperson.avatarsdk.com/js_api

Sends authentication credentials to the MetaPerson Creator to authorize the session.

```APIDOC
## authenticate

### Description
Authenticates the developer account with the MetaPerson Creator using client credentials or an access token.

### Parameters
- **eventName** (string) - Required - Must be set to "authenticate".
- **clientId** (string) - Optional - The CLIENT_ID of your developer account.
- **clientSecret** (string) - Optional - The CLIENT_SECRET of your developer account.
- **accessToken** (string) - Optional - An access token obtained via the REST API for enhanced security.

### Request Example
{
  "eventName": "authenticate",
  "clientId": "CLIENT_ID",
  "clientSecret": "CLIENT_SECRET",
  "accessToken": "ACCESS_TOKEN"
}

### Response
- The MetaPerson Creator sends the result of the authentication in the `authentication_status` event.
```

--------------------------------

### set_ui_parameters

Source: https://docs.metaperson.avatarsdk.com/js_api

Configures the visibility of UI elements, available outfits, and default avatar settings in the MetaPerson Creator.

```APIDOC
## set_ui_parameters

### Description
Sends a configuration message to the MetaPerson Creator to customize UI visibility, theme, and avatar defaults.

### Parameters
- **eventName** (string) - Required - Must be set to 'set_ui_parameters'.
- **isExportButtonVisible** (boolean) - Optional - Specifies if the Export button is visible. Default: true.
- **isLoginButtonVisible** (boolean) - Optional - Specifies if the Login button is visible. Default: true.
- **isHomeButtonVisible** (boolean) - Optional - Specifies if the Home button is visible. Default: true.
- **outfitsBlackList** (array) - Optional - List of outfit names to hide.
- **skipViewerControls** (array) - Optional - List of controls to hide. Available: 'outfits', 'hairstyles', 'glasses', 'age', 'body', 'head', 'color', 'animations', 'lighting'.
- **isScreenshotButtonVisible** (boolean) - Optional - Specifies if the Screenshot button is visible. Default: true.
- **isNoPhotoVisible** (boolean) - Optional - Specifies if sample avatars are available. Default: true.
- **exportButtonText** (string) - Optional - Custom text for the Export button.
- **age** (string) - Optional - Sets default age. Values: 'adult', 'teen15', 'teen12'.
- **theme** (string) - Optional - UI theme. Values: 'dark', 'light'.
- **gender** (string) - Optional - Sets default gender. Values: 'male', 'female'.
```

--------------------------------

### Handle MetaPerson Creator events in JavaScript

Source: https://docs.metaperson.avatarsdk.com/business-integration/ue/metaperson_creator_integration

This script listens for window messages from the MetaPerson Creator, handles authentication, sets export parameters, and triggers the Unreal Engine proxy callback upon model export.

```javascript
function onWindowMessage(evt) {  
    if (evt.type === 'message') {  
        if (evt.data?.source === 'metaperson_creator') {  
            let data = evt.data;  
            let evtName = data?.eventName;  
            if (evtName === 'unity_loaded') {  
                onUnityLoaded(evt, data);  
            } else if (evtName === 'model_exported') {  
                window.ue.avatarsdk_proxy.avatarexportcallback(event.data.url);  
            }  
        }  
    }  
}  
  
function onUnityLoaded(evt, data) {  
    let authenticationMessage = {  
        'eventName': 'authenticate',  
        'clientId': CLIENT_ID,  
        'clientSecret': CLIENT_SECRET,  
        'exportTemplateCode': '',  
    };  
    evt.source.postMessage(authenticationMessage, '*');  
    let exportParametersMessage = {  
        'eventName': 'set_export_parameters',  
        'format': 'glb',  
        'lod': 1,  
        'textureProfile': '2K.png'  
    };  
    evt.source.postMessage(exportParametersMessage, '*');  
  
}  
window.addEventListener('message', onWindowMessage);
```

--------------------------------

### Loading Screen Customization

Source: https://docs.metaperson.avatarsdk.com/js_api

Customize the loading screen image by appending query parameters to the iframe URL.

```APIDOC
## Loading Screen URL Parameters

### Description
Customize the loading screen image displayed in the Desktop version by passing specific arguments to the iframe URL.

### Parameters
#### Query Parameters
- **logoUrl** (string) - Optional - The URL of the image to be displayed.
- **logoWidth** (number) - Optional - The width of the image area (default: 512px).
- **logoHeight** (number) - Optional - The height of the image area (default: 120px).

### Example
https://metaperson.avatarsdk.com/iframe.html?logoUrl=https://example.com/logo.png&logoWidth=300&logoHeight=300
```

--------------------------------

### Generate Avatar with LeapProcess

Source: https://docs.metaperson.avatarsdk.com/leap

Use LeapProcess to asynchronously generate an avatar from captured data. Ensure the archive path is valid before calling GenerateAvatar.

```csharp
LeapProcess leapProcess = new LeapProcess();  
bool isGenerated = await leapProcess.GenerateAvatar("path_to_an_archive_with_captured_data", AvatarGender.Male);  
if (isGenerated)  
{  
  string avatarCode = leapProcess.AvatarCode;  
}  
else  
  Debug.LogError("Failed to generate avatar");  
```

--------------------------------

### Authenticate MetaPerson Creator via JavaScript

Source: https://docs.metaperson.avatarsdk.com/js_api

Send an authentication message to the MetaPerson Creator using postMessage. Ensure CLIENT_ID, CLIENT_SECRET, or an ACCESS_TOKEN are provided.

```javascript
let authenticationMessage = {  
    "eventName": "authenticate",  
    "clientId": CLIENT_ID,  
    "clientSecret": CLIENT_SECRET,  
    "accessToken": ACCESS_TOKEN  
};  
evt.source.postMessage(authenticationMessage, "*");  
```

--------------------------------

### authenticate

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Authenticates the host page with LiveSpeak using developer credentials or an access token.

```APIDOC
## postMessage: authenticate

### Description
Authenticates the LiveSpeak instance using developer credentials or an access token.

### Parameters
- **eventName** (string) - Required - Must be set to 'authenticate'.
- **clientId** (string) - Optional - CLIENT_ID of your developer account.
- **clientSecret** (string) - Optional - CLIENT_SECRET of your developer account.
- **accessToken** (string) - Optional - An access token for enhanced security.

### Request Example
{
  "eventName": "authenticate",
  "clientId": "your_client_id",
  "clientSecret": "your_client_secret"
}
```

--------------------------------

### make_screenshot

Source: https://docs.metaperson.avatarsdk.com/js_api

Triggers a screenshot of the avatar within the MetaPerson Creator.

```APIDOC
## make_screenshot

### Description
The `make_screenshot` event captures a preview image of the avatar. It returns a link to the image via the `model_screenshot` event.

### Parameters
- **eventName** (string) - Required - Must be set to "make_screenshot".
- **width** (number) - Optional - Width of the screenshot image (default: 640).
- **height** (number) - Optional - Height of the screenshot image (default: 480).
- **mode** (string) - Optional - Camera capture mode: "head" or "body".

### Request Example
{
  "eventName": "make_screenshot",
  "width": 640,
  "height": 480,
  "mode": "head"
}
```

--------------------------------

### Play Animation with Leap Animator

Source: https://docs.metaperson.avatarsdk.com/leap

Load a model using an avatar code and trigger animation playback. Requires a Leap Animator component configured with a Meta Person Loader.

```csharp
string avatarCode = leapProcess.AvatarCode;  
bool isLoaded = await leapAnimator.LoadModel(avatarCode);  
if (isLoaded)  
  leapAnimator.PlayAnimation();  
else  
  Debug.LogError("Failed to load avatar model");  
```

--------------------------------

### prompt

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Sends text to the chatbot backend for processing and pronunciation.

```APIDOC
## postMessage: prompt

### Description
Sends text to the chatbot backend. The avatar will automatically pronounce the response.

### Parameters
- **eventName** (string) - Required - Must be set to 'prompt'.
- **prompt** (string) - Required - The text prompt to send to the chatbot.
```

--------------------------------

### Subscribing to LiveSpeak Events

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

How to listen for and handle events sent from the LiveSpeak iframe.

```APIDOC
## Event Subscription

### Description
Subscribe to messages on the parent window to receive updates from the LiveSpeak iframe. All events are sent via `window.postMessage` and should be filtered by `event.data.source === 'livespeak'`.

### Event Structure
- **source** (string) - Always 'livespeak'
- **eventName** (string) - The type of event being triggered

### Supported Events
- **livespeak_loaded**: Triggered when the iframe is initialized.
- **avatar_state_changed**: Triggered when the avatar's internal state changes.
- **message_processing_error**: Triggered when a command sent to LiveSpeak fails.

### Example
```javascript
window.addEventListener('message', (event) => {
  const data = event.data;
  if (!data || data.source !== 'livespeak') return;

  switch (data.eventName) {
    case 'livespeak_loaded':
      console.log("LiveSpeak is ready");
      break;
    case 'message_processing_error':
      console.error("Error processing", data.failedEventName, data.reason);
      break;
    case 'avatar_state_changed':
      console.log(data.avatarState);
      break;
  }
});
```
```

--------------------------------

### Configure MetaPerson Creator Mobile UI

Source: https://docs.metaperson.avatarsdk.com/js_api

Sends a set_ui_parameters message to the MetaPerson Creator to toggle UI elements and set default avatar attributes.

```javascript
let uiParametersMessage = {  
    "eventName": "set_ui_parameters",  
    "isExportButtonVisible": true,  
    "isLoginButtonVisible": false,  
    "isHomeButtonVisible": true,  
    "outfitsBlackList" : ["ARPI", "SEVAN"],  
    "skipViewerControls" : ['age', 'animations'],  
      
    // Mobile version specific parameters  
    "isScreenshotButtonVisible": true,  
    "isNoPhotoVisible": true,  
    "exportButtonText": "Export",  
    "age": "teen12",  
    "theme": "dark",   
    "gender": "female",  
};  
evt.source.postMessage(uiParametersMessage, "*");  
```

--------------------------------

### load_model

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

The load_model command allows developers to load a custom MetaPerson avatar in GLB format into the LiveSpeak iframe. This command is only effective when the iframe is initialized with the custom_model flag and should be triggered after receiving the avatar_state_changed event with the ModelAwaiting state.

```APIDOC
## load_model

### Description
Loads a custom GLB model into the LiveSpeak iframe. The model must be publicly accessible or served with appropriate CORS headers.

### Method
postMessage

### Parameters
- **eventName** (string) - Required - Must be set to "load_model".
- **modelUrl** (string) - Required - The URL pointing to the GLB model file.

### Request Example
{
  "eventName": "load_model",
  "modelUrl": "https://your-server.com/path/to/avatar.glb"
}
```

--------------------------------

### Subscribe to LiveSpeak events

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Listen for messages on the parent window and filter by the 'livespeak' source to handle various event types.

```javascript
window.addEventListener('message', (event) => {  
  const data = event.data;  
  if (!data || data.source !== 'livespeak') return;  
  
  switch (data.eventName) {  
    case 'livespeak_loaded':  
      console.log("LiveSpeak is ready");  
      break;  
    case 'message_processing_error':  
      console.error("Error processing", data.failedEventName, data.reason);  
      break;  
    case 'avatar_state_changed':  
      console.log(data.avatarState);  
      break;  
  }  
});  
```

--------------------------------

### pcm

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Streams raw PCM audio data to LiveSpeak.

```APIDOC
## postMessage: pcm

### Description
Streams raw single-channel PCM audio data (16000 Hz) to LiveSpeak.

### Parameters
- **eventName** (string) - Required - Must be set to 'pcm'.
- **buffer** (ArrayBuffer) - Required - The raw audio buffer.
```

--------------------------------

### show_avatar

Source: https://docs.metaperson.avatarsdk.com/js_api

Opens a previously generated avatar in the MetaPerson Creator for further customization.

```APIDOC
## show_avatar

### Description
Loads an existing avatar into the editor using its unique avatar code and optional state.

### Parameters
- **eventName** (string) - Required - Must be set to "show_avatar".
- **avatarCode** (string) - Required - The unique code of the avatar to open.
- **avatarState** (string) - Optional - A JSON string containing serialized avatar customization data.

### Request Example
{
  "eventName": "show_avatar",
  "avatarCode": "AVATAR_CODE_TO_SHOW"
}
```

--------------------------------

### Handle action_availability_changed event

Source: https://docs.metaperson.avatarsdk.com/js_api

Listens for window messages from the MetaPerson Creator to toggle button states based on action availability.

```javascript
function onWindowMessage(evt) {  
    if (evt.type === "message") {  
        if (evt.data?.source === "metaperson_creator"){  
            let data = evt.data;  
            let evtName = data?.eventName;  
            if (evtName === "action_availability_changed"){  
                if (data.actionName == "avatar_generation") {  
                    browseImage.disabled = !data.isAvailable;  
                } else if (data.actionName == "avatar_export") {  
                    exportButton.disabled = !data.isAvailable;  
                } else if (data.actionName == "avatar_screenshot") {  
                    screenshotButton.disabled = !data.isAvailable;  
                }  
            }  
        }  
    }  
}  
```

--------------------------------

### Load Existing Avatar

Source: https://docs.metaperson.avatarsdk.com/js_api

Opens a previously generated avatar in the MetaPerson Creator using its unique avatar code.

```javascript
let showAvatarMessage = {  
    "eventName": "show_avatar",  
    "avatarCode": AVATAR_CODE_TO_SHOW  
};  
evt.source.postMessage(showAvatarMessage, "*");  
```

--------------------------------

### Obtain Access Token via cURL

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Retrieves an access token for secure authentication using client credentials.

```bash
CLIENT_ID="xFXeBr4shmgHUiymYwW7sDOO9BbwtL3eJkCE3OKu"  
CLIENT_SECRET="hpAYUxCLfKHEkIvRgXTZzGyMvgDj7Tdg4gBhu5nmXjtW0ODMj0HUCt3tmKMBtm94qzcNsVhK6xXj2PKEop7BxBi1W9XMvyx3p9tJVP6mGY19THuS6mNSnJiQI1vQ0QE6"  
  
  
curl -X POST "https://metaperson-api.avatarsdk.com/o/token/" \  
     --user "${CLIENT_ID}:${CLIENT_SECRET}" \  
     -F "grant_type=client_credentials"  
```

--------------------------------

### Listen for MetaPerson Creator events

Source: https://docs.metaperson.avatarsdk.com/js_api

Registers a message event listener to handle communications from the MetaPerson Creator iframe.

```javascript
document.addEventListener('DOMContentLoaded', function onDocumentReady() {  
    window.addEventListener("message", onWindowMessage);  
});  
  
function onWindowMessage(evt) {  
    if (evt.type === "message") {  
        if (evt.data?.source === "metaperson_creator"){  
            let data = evt.data;  
            let evtName = data?.eventName;  
              
            switch (evtName) {  
                // handle received events here  
            }  
        }  
    }  
}  
```

--------------------------------

### Generate Avatar via postMessage

Source: https://docs.metaperson.avatarsdk.com/js_api

Initiates avatar generation by sending a base64 encoded image and configuration parameters to the MetaPerson Creator.

```javascript
let generateAvatarMessage = {  
    "eventName": "generate_avatar",  
    "gender": "male",  
    "age": "adult",  
    "blends": [ { "name": "Body", "value": 0.5 }, { "name": "LowerHeadWidth", "value": 0.25 } ],  
    "image": "image_encoded_to_base64_string"  
};  
evt.source.postMessage(generateAvatarMessage, "*");
```

--------------------------------

### Embedding LiveSpeak via iframe

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Instructions for creating and configuring the LiveSpeak iframe element within a web page.

```APIDOC
## Embedding LiveSpeak

### Description
Embed the LiveSpeak interface into your web page using an iframe. The iframe must be configured with specific permissions for scripts and audio playback.

### Endpoint
https://metaperson.avatarsdk.com/livespeak/index.html

### Query Parameters
- **mode** (string) - Required - Selects the playback/animation mode: tts_azure1, tts_azure2, tts_azure3, tts_elevenlabs, or raw_stream.
- **lang** (string) - Optional - Sets the voice language.
- **custom_model** (flag) - Optional - Tells the iframe to expect a custom model via command and hide the default sample model.

### Implementation Example
```javascript
const iframe = document.createElement('iframe');
iframe.id = 'livespeak-iframe';
iframe.src = 'https://metaperson.avatarsdk.com/livespeak/index.html?mode=tts_azure1&lang=English';
iframe.title = 'LiveSpeak';
iframe.sandbox = 'allow-scripts allow-same-origin allow-forms';
iframe.allow = 'autoplay;';
iframe.style.width = '100%';
iframe.style.height = '600px';

document.getElementById('container').appendChild(iframe);
```
```

--------------------------------

### model_screenshot

Source: https://docs.metaperson.avatarsdk.com/js_api

Event sent as a response to a screenshot request.

```APIDOC
## Event: model_screenshot

### Description
Returns a screenshot of the current avatar.

### Data
- **source** (string) - "metaperson_creator"
- **eventName** (string) - "model_screenshot"
- **screenshotUrl** (string) - Link to local screenshot file
- **imageBytes** (array) - PNG bytes (Desktop only)
```

--------------------------------

### Authenticate with LiveSpeak

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Sends developer credentials to the LiveSpeak iframe to establish an authenticated session.

```javascript
const authMsg = {  
  eventName: 'authenticate',  
  clientId: clientId,  
  clientSecret: clientSecret  
};  
iframe.contentWindow.postMessage(authMsg, '*');  
```

--------------------------------

### set_export_parameters

Source: https://docs.metaperson.avatarsdk.com/js_api

Method to specify export parameters using a JSON template for the Desktop version.

```APIDOC
## set_export_parameters

### Description
Specifies the export template for the avatar using a JSON configuration. This method allows defining parameters for various slots such as avatar, haircuts, and outfits.

### Parameters
- **template** (JSON) - Required - A JSON object containing configuration slots (avatar, haircuts, outfits, etc.) and their respective parameters like `apply_visibility_masks` and `textures`.

### Request Example
{
  "outfits_shoes": {
    "apply_visibility_masks": false
  }
}
```

--------------------------------

### Check MetaPerson Creator load status

Source: https://docs.metaperson.avatarsdk.com/js_api

Directly checks the loading state of the MetaPerson Creator via the iframe content window.

```javascript
iframe.contentWindow.metaPersonCreator.isLoaded  
```

--------------------------------

### generate_avatar

Source: https://docs.metaperson.avatarsdk.com/js_api

Initiates the avatar generation process by sending a base64 encoded image and configuration parameters to the MetaPerson Creator.

```APIDOC
## generate_avatar

### Description
Initiates avatar generation from an image encoded as a base64 string.

### Parameters
- **eventName** (string) - Required - Must be set to "generate_avatar".
- **gender** (string) - Optional - Specifies gender: "male" or "female".
- **age** (string) - Optional - Specifies age: "adult", "teen15", or "teen12". Default is "adult".
- **blends** (array) - Optional - Desktop version only. Array of objects with "name" and "value" to configure body/head proportions.
- **image** (string) - Required - Image in JPEG or PNG format encoded as a base64 string.

### Request Example
{
  "eventName": "generate_avatar",
  "gender": "male",
  "age": "adult",
  "blends": [ { "name": "Body", "value": 0.5 } ],
  "image": "image_encoded_to_base64_string"
}
```

--------------------------------

### Stream Raw PCM Audio

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Streams single-channel 16000 Hz PCM audio data to the avatar for animation.

```javascript
const payload = {  
  eventName: 'pcm',  
  buffer: chunk.buffer  
};  
iframe.contentWindow.postMessage(payload, '*', [chunk.buffer]);  
```

--------------------------------

### Set Language

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Defines the language for speech synthesis and chatbot responses.

```javascript
iframe.contentWindow.postMessage({  
  eventName: 'set_language',  
  language: 'en_m' // English Male  
}, '*');  
```

--------------------------------

### set_export_parameters

Source: https://docs.metaperson.avatarsdk.com/js_api

Sends a message to the MetaPerson Creator to configure the export settings for an avatar.

```APIDOC
## set_export_parameters

### Description
Configures the output format, quality, and animation settings for avatar exports.

### Parameters
- **eventName** (string) - Required - Must be set to "set_export_parameters".
- **format** (string) - Optional - File format: "gltf", "glb", or "fbx".
- **lod** (number) - Optional - Level of detail: 1 or 2.
- **textureProfile** (string) - Optional - Texture quality profile (e.g., "1K.jpg", "4K.png").
- **useZip** (boolean) - Optional - Whether to return a ZIP archive or a direct file link.
- **headOnly** (string) - Optional - Exports only the head portion.
- **removeNeckLayers** (number) - Optional - Number of neck polygon layers to remove (0-12 for LOD1, 0-8 for LOD2).
- **removeTransparentCornea** (boolean) - Optional - Removes Cornea mesh if transparent.
- **animationName** (string) - Optional - Name of the animation to export.
- **animationAsBindPose** (boolean) - Optional - Uses the first animation frame as the bind pose.
- **exportModelInfo** (boolean) - Optional - Includes _model.json_ with color data.
- **exportTemplateJson** (string) - Optional - JSON string with common parameters applied to all exported avatars.

### Request Example
{
  "eventName": "set_export_parameters",
  "format": "gltf",
  "lod": 1,
  "textureProfile": "1K.jpg",
  "useZip": true
}
```

--------------------------------

### metaperson_creator_loaded

Source: https://docs.metaperson.avatarsdk.com/js_api

Event sent when the MetaPerson Creator page is fully loaded.

```APIDOC
## Event: metaperson_creator_loaded

### Description
Indicates that the MetaPerson Creator is initialized and ready to receive configuration messages.

### Data
- **source** (string) - "metaperson_creator"
- **eventName** (string) - "metaperson_creator_loaded"
```

--------------------------------

### set_language

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Defines the language used for speech synthesis and chatbot responses.

```APIDOC
## postMessage: set_language

### Description
Sets the language for speech synthesis and chatbot responses.

### Parameters
- **eventName** (string) - Required - Must be set to 'set_language'.
- **language** (string) - Required - The language code (e.g., 'en_m', 'zh_f').
```

--------------------------------

### LeapAnimator.LoadModel

Source: https://docs.metaperson.avatarsdk.com/leap

Loads a generated avatar model into the scene for animation.

```APIDOC
## LeapAnimator.LoadModel

### Description
Loads an avatar model into the Leap Animator component using its unique avatar code.

### Method
Async Method

### Parameters
- **avatarCode** (string) - Required - The unique code of the generated avatar.

### Response
- **isLoaded** (bool) - Returns true if the model was loaded successfully.
```

--------------------------------

### generate_leap_avatar (JS API)

Source: https://docs.metaperson.avatarsdk.com/leap

Sends a message to the MetaPerson Creator to generate an avatar using a Base64-encoded ZIP archive.

```APIDOC
## generate_leap_avatar

### Description
Sends a postMessage to the MetaPerson Creator window to initiate avatar generation.

### Parameters
- **eventName** (string) - Required - Must be 'generate_leap_avatar'.
- **gender** (string) - Required - The desired gender.
- **zipArchiveBase64** (string) - Required - Base64-encoded ZIP archive containing photo.jpg, data.bin, and faceGeometry1.obj.
```

--------------------------------

### authentication_status

Source: https://docs.metaperson.avatarsdk.com/js_api

Event sent as a response to an authentication request.

```APIDOC
## Event: authentication_status

### Description
Contains the result of an authentication attempt (Desktop version only).

### Data
- **source** (string) - "metaperson_creator"
- **eventName** (string) - "authentication_status"
- **isAuthenticated** (boolean) - Success status
- **errorMessage** (string) - Error description if failed
```

--------------------------------

### speak

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Commands the avatar to pronounce exact text without chatbot processing.

```APIDOC
## postMessage: speak

### Description
Commands the avatar to pronounce exact text.

### Parameters
- **eventName** (string) - Required - Must be set to 'speak'.
- **text** (string) - Required - The exact text to be spoken.
```

--------------------------------

### export_avatar

Source: https://docs.metaperson.avatarsdk.com/js_api

Initiates an avatar export process, allowing external control of the export functionality.

```APIDOC
## export_avatar

### Description
Initiates an avatar export. Use this when implementing a custom export button outside the iframe.

### Parameters
- **eventName** (string) - Required - Must be set to "export_avatar".

### Request Example
{
  "eventName": "export_avatar"
}
```

--------------------------------

### load_model message structure

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

The JSON object structure required for the load_model postMessage command.

```json
{
  eventName: "load_model",  
  modelUrl: 'https://your-server.com/path/to/avatar.glb'  
}
```

--------------------------------

### Embed MetaPerson Creator via iframe

Source: https://docs.metaperson.avatarsdk.com/web_integration

Add the iframe element to the body to load the MetaPerson Creator interface.

```html
<body>  
  <div style="display: flex; height: 100vh; width: 100vw;">  
    <iframe id="editor_iframe" src="https://metaperson.avatarsdk.com/iframe.html" allow="fullscreen" frameborder="0" style="width: 100%; height: 100%;"></iframe>  
  </div>  
</body>
```

--------------------------------

### Set Voice Name

Source: https://docs.metaperson.avatarsdk.com/livespeak/integration

Specifies a concrete TTS voice for Azure Speech.

```javascript
iframe.contentWindow.postMessage({  
  eventName: 'set_voice_name',  
  voiceName: 'en-US-AriaNeural'  
}, '*');  
```

--------------------------------

### LeapProcess.GenerateAvatar

Source: https://docs.metaperson.avatarsdk.com/leap

Generates an avatar asynchronously from a captured data archive.

```APIDOC
## LeapProcess.GenerateAvatar

### Description
Generates an avatar from a provided archive path and gender. This operation is asynchronous.

### Method
Async Method

### Parameters
- **archivePath** (string) - Required - Path to the archive containing captured data.
- **gender** (AvatarGender) - Required - The gender of the avatar (e.g., AvatarGender.Male).

### Response
- **isGenerated** (bool) - Returns true if generation was successful.
- **AvatarCode** (string) - The identifier for the generated model, accessible via the LeapProcess instance.
```
Tokens:
Raw