页面实例获取

SDK 提供 getPage 函数获取页面实例, 目前提供了数字人克隆、音色克隆页面和作品列表页面实例。

enum PageName {
    VoiceClone = 'VoiceClone', // 音色克隆页面
    AvatarClone = 'AvatarClone', // 数字人克隆页面
    Creations = 'Creations', // 作品列表页面
}

const page = PomegranateEditorSDK.getPage(pageName);

基本用法

数字人克隆页面

let avatarPage = PomegranateEditorSDK.getPage("AvatarClone");
const page = avatarPage.init(document.getElementById('dom-id'), {
  etoken: 'your-etoken',
  ept: 'your-platform',
  eid: 'your-eid', 
  beforeCreateAvatar: () => {
    // 可以在这里查询余额或做些其他操作，resolve 继续进行  reject 停止进行
    console.log('克隆音色前钩子');
    return new Promise((resolve, reject) => {
      // todo something
    })
  },
  afterCreateAvatar: () => {
     // 可以在这里进行扣费及其他相关操作
    console.log('克隆数字人后钩子');
    return new Promise((resolve, reject) => {
      // todo something
    })
  },
  backFunc: () => {
    // 页面左上角返回按钮点击事件
    router.go(-1);
  }
});
// 清空已填写的名称、文件等输入，回到初始状态
avatarPage.reset();
// 离开后置销毁页面实例
avatarPage.destroy();

音色克隆页面

let voicePage = PomegranateEditorSDK.getPage("VoiceClone");
const page = voicePage.init(document.getElementById('dom-id'), {
  etoken: 'your-etoken',
  ept: 'your-platform',
  eid: 'your-eid', 
  beforeCreateVoice: () => {
    // 可以在这里查询余额或做些其他操作，resolve 继续进行  reject 停止进行
    console.log('克隆音色前钩子');
     return new Promise((resolve, reject) => {
      // todo something
     })
  },
  afterCreateVoice: () => {
    // 可以在这里进行扣费及其他相关操作
    console.log('克隆音色后钩子');
    return new Promise((resolve, reject) => {
      // todo something
    })
  },
  backFunc: () => {
    // 页面左上角返回按钮点击事件
    router.go(-1);
  }
});
// 清空已填写的名称、文件等输入，回到初始状态
voicePage.reset();
// 离开后置销毁页面实例
voicePage.destroy();

作品列表页面

let creationsPage = PomegranateEditorSDK.getPage("Creations");
const page = creationsPage.init(document.getElementById('dom-id'), {
  etoken: 'your-etoken',
  ept: 'your-platform',
  eid: 'your-eid', 
  // 点击草稿/草稿编辑处理
  handleDraftFunc: (data: {
    vid: number // 当前视频id  用来获取作品信息
  }) => {
    console.log(data);
    // router.push(xxx?vid=data.vid&nvid=data.nvid)
    new PomegranateEditorSDK(container, {
        // other params ----
        vid: data.vid,
        // other params ----
    })
  },
  // 点击重做/编辑处理
  remakeFunc: (data:{
    vid: number, // 当前视频id  用来获取作品信息
    nvid: number // 新建视频id  用来保存草稿信息
  }) =>{
    console.log(data);
    // 跳转到编辑器承载页面将vid和 nvid 传入
    // router.push(xxx?vid=data.vid&nvid=data.nvid)
    new PomegranateEditorSDK(container, {
        // other params ----
        vid: data.vid,
        nvid: data.nvid,
        // other params ----
    })
  }
});
// 离开后置销毁页面实例
creationsPage.destroy();

页面实例方法

通过 getPage 获取的页面实例提供以下方法：

方法	说明	适用页面
init(container, options)	初始化并挂载页面到指定 DOM 容器	全部
reset()	清空已填写的名称、上传/录制的文件等输入，回到初始状态	VoiceClone、AvatarClone
destroy()	卸载页面组件并清理 DOM、释放资源	全部

reset()

清空当前页面表单，回到初始状态，无需销毁重建即可让用户重新填写：

let voicePage = PomegranateEditorSDK.getPage("VoiceClone");
voicePage.init(document.getElementById('dom-id'), { /* ... */ });

// 例如：提交成功后清空表单，继续克隆下一个
voicePage.reset();

说明：

• 音色克隆页：清空声音名称、已上传/录制的音频，并停止正在进行的录音、回到默认录制模式。
• 数字人克隆页：回到第一步选择类型，清空各步骤已填写的名称与文件。
• 需在 init() 之后调用；页面尚未初始化时调用仅告警、不生效。