Skip to main content

PPT生成最佳实践

本文提供 PPT生成 链路API的最佳实践，帮助您快速入门并开发您自己的业务应用。

调用前须知：请通过本地环境直接调用 PPT 流式接口，避免使用阿里云 OpenAPI。

1 环境准备

后端 

<dependency>
  <groupId>com.aliyun</groupId>
  <artifactId>alibabacloud-aimiaobi20230801</artifactId>
  <version>1.0.104</version>
</dependency>

前端

分步骤调用操作步骤

step1：生成PPT大纲 

public static AsyncClient getClient() {
    if (client == null) {
        synchronized (ClientHelper.class) {
            if (client == null) {
                StaticCredentialProvider provider = StaticCredentialProvider.create(
                    Credential.builder()
                            .accessKeyId("access-key-id")
                            .accessKeySecret("access-key-secret")
                            .build()
            );
            client = AsyncClient.builder()
                    .region("cn-beijing")
                    .credentialsProvider(provider)
                    .serviceConfiguration(Configuration.create().setSignatureVersion(SignatureVersion.V3))
                    .overrideConfiguration(
                            ClientOverrideConfiguration.create()
                                    .setProtocol("HTTPS")
                                    .setEndpointOverride("aimiaobi.cn-beijing.aliyuncs.com")
                    )
                    .build();
            }
        }
    }
    return client;
}
AsyncClient client = getClient();
RunPptOutlineGenerationRequest runRequest = RunPptOutlineGenerationRequest.builder()
      .workspaceId(workspaceId)
      .prompt("生成一个关于消防主题的ppt")
      .build();
ResponseIterator<RunPptOutlineGenerationResponseBody> iterator = client.runPptOutlineGenerationWithResponseIterable(runRequest).iterator();
while (iterator.hasNext()) {
    RunPptOutlineGenerationResponseBody event = iterator.next();
    System.out.println(new Date() + " === " + JSON.toJSONString(event));
}

step2：生成PPT内容

获取PPT组件配置 -- 获取编辑PPT作品所需的code信息 

AsyncClient client = ClientHelper.getClient();
GetPptConfigRequest request = GetPptConfigRequest.builder()
      .workspaceId(workspaceId)
      .build();
CompletableFuture<GetPptConfigResponse> future = client.getPptConfig(request);
try {
    GetPptConfigResponse response = future.get();
    System.out.println("result: " + JSON.toJSONString(response));
} catch (InterruptedException e) {
    throw new RuntimeException(e);
} catch (ExecutionException e) {
    throw new RuntimeException(e);
}

初始化PPT创建操作-- 获取生成PPT过程中所需参数

  • 温馨提示：这个接口涉及到扣费，请注意费用
  • 提供信息：
    1. 下发用于初始化“PPT生成”的前端组件的signature；
    2. 针对不同场景下发需要的其他参数（如PPT流程ID、作品ID、任务ID）。

3 创作场景说明

场景一：全链路创建生成PPT

一站式SaaS解决方案，最接近控制台的SaaS全量功能，可全部交由前端SDK完成。

step1：初始化创建PPT的会话

后端：
通过初始化PPT创建操作接口初始化创建PPT的会话，如下为示例代码： 
taskId = "xxxx";
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
      .workspaceId(workspaceId)
      .taskId(taskId)
      .outline("# 中国传统文化艺术的魅力")
      .isMobile(true) // 是否是移动端，按需填入
      .build();
CompletableFuture<InitiatePptCreationV2Response> future = client.initiatePptCreationV2(request);
try {
    InitiatePptCreationV2Response response = future.get();
    System.out.println("result: " + JSON.toJSONString(response));
} catch (InterruptedException e) {
    throw new RuntimeException(e);
} catch (ExecutionException e) {
    throw new RuntimeException(e);
}
前端：
全局加载初始化quanmiao-sdk，如下为示例代码： 
const SDK_URL = "https://quanmiao-public.oss-cn-beijing.aliyuncs.com/quanmiao-sdk/v2.0.0/index.js";
const script = document.createElement('script');
script.src = SDK_URL;
script.async = true;
document.body.appendChild(script);
业务链路中调用创建API（后续编辑 / 查看链路参考【场景三】），如下为示例代码： 
// 确保SDK已经加载完
await window.Quanmiao.createPPT({
    appkey: 'your appkey', // 必填，由服务端API获取
    signature: 'your signature', // 必填，由服务端API获取
    container: document.getElementById('XXX'), // 必填，挂载容器DOM元素
    content: 'PPT大纲内容' , // 必填
    speaker: 'PPT主讲人', // 非必填，默认为 'XXX'
    isMobile: true, // 是否使用移动端模式。非必填，默认为false
    onMessage(type, data) {
      if (type === 'SET_PPT_MAKING_STATUS') {
        if (data?.status === '1') {
          // 正在生成中
        }
        if (data?.status === '0') {
          // 生成完成
        }
      }
      if (type === 'GENERATE_PPT_SUCCESS') {
        // 这里可以拿到PPT的作品id：data?.id
        console.log('作品id', data?.id);
      }
    },
  });
} catch (e) {
  console.log('调用PPT SDK err=>', e);
  message.error(e?.msg || e?.message || '操作异常');
}

step2：绑定PPT作品数据 -- 基于step1中前端SDK获取到的作品id 

taskId = "6831f55d-fa3b-4592-b3fd-bdf47ca2ab96";
AsyncClient client = ClientHelper.getClient();
BindPptArtifactRequest request = BindPptArtifactRequest.builder()
      .workspaceId(workspaceId)
      .taskId(taskId)
      .artifactId(12345)
      .build();
CompletableFuture<BindPptArtifactResponse> future = client.bindPptArtifact(request);
try {
    BindPptArtifactResponse response = future.get();
    System.out.println("result: " + JSON.toJSONString(response));
} catch (InterruptedException e) {
    throw new RuntimeException(e);
} catch (ExecutionException e) {
    throw new RuntimeException(e);
}

场景二：基于客户定制模板，开始生成PPT

step1：定制模板 -- 通过全妙官方渠道联系我们

可以通过查询企业专属PPT模板列表获取测试模板，试用当前场景效果

step2：基于已有模板生成PPT内容

后端：
通过后端API按需获取对应参数，下发参数及示例代码如下：
  • pptProcessId -- 对应前端SDK入参aipptTaskId；
  • signature；
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
        .workspaceId(workspaceId)
        .taskId(UUID.randomUUID().toString())
        .processType(1) //注意这里的类型
        .isMobile(true) // 是否是移动端，按需填入
        .outline("#说说中国传统文化艺术的魅力\n##1. 传统文化艺术的源远流长\n###1.1 中国古代艺术发展历程\n####1.1.1 古代绘画艺术的演变\n- 从新石器时代的彩陶绘画到东汉时期帛画的出现，绘画形式不断丰富，展现了古人对美的独特追求。\n- 唐代绘画风格多样，吴道子的《送子天王图》线条流畅，色彩绚丽，体现了唐代绘画的高超技艺。\n")
        .build();
CompletableFuture<InitiatePptCreationV2Response> future = client.initiatePptCreationV2  (request);
try {
    InitiatePptCreationV2Response response = future.get();
    System.out.println("result: " + JSON.toJSONString(response));
} catch (InterruptedException e) {
    throw new RuntimeException(e);
} catch (ExecutionException e) {
    throw new RuntimeException(e);
}
前端：
业务链路中调用创建API（后续编辑 / 查看链路参考【场景三】），如下为示例代码： 
// 确保SDK已经加载完
await window.Quanmiao.createPPT({
    appkey: 'your appkey', // 必填，由服务端API获取
    signature: 'your signature', // 必填，由服务端API获取
    container: document.getElementById('XXX'), // 必填，挂载容器DOM元素
    content: ' PPT大纲内容' , // 必填
    speaker: 'PPT主讲人', // 非必填，默认为 'XXX'
    isMobile: true, // 是否使用移动端模式。非必填，默认为false
    templateId: 88888, // 模板id
    aipptTaskId: 88888888, // 创建生成任务id -- 由服务端API获取；当前链路需填入
    isEnterprise: false,// 是否为企业模板 -- 传入了模板id的时候才生效，默认是true；如果传入的模板是全妙内置模板（非用户自有的企业模板），需要传入false进行覆盖生效
    onMessage(type, data) {
      if (type === 'SET_PPT_MAKING_STATUS') {
        if (data?.status === '1') {
          // 正在生成中
        }
        if (data?.status === '0') {
          // 生成完成
        }
      }
      if (type === 'GENERATE_PPT_SUCCESS') {
        // 这里可以拿到PPT的作品id：data?.id
        console.log('作品id', data?.id);
      }
    },
  });
} catch (e) {
  console.log('调用PPT SDK err=>', e);
  message.error(e?.msg || e?.message || '操作异常');
}

场景三：云端完成PPT作品的创建，跳转前端界面编辑 / 查看作品

step1：（后端）完成PPT作品的创建

下发参数：
  • pptProcessId
  • pptArtifactId -- 对应前端SDK入参作品id
由于该场景涉及大量计算操作，RT较高，所以进行了异步设计。用户需要通过GetPptInfo接口获取对应的数据，然后再进行后续操作。
  1. 初始化，如下为代码示例。
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
        .workspaceId(workspaceId)
        .taskId(UUID.randomUUID().toString())
        .processType(2) //注意这里的类型
        .outline("#说说中国传统文化艺术的魅力\n##1. 传统文化艺术的源远流长\n###1.1 中国古代艺术发展历程\n####1.1.1 古代绘画艺术的演变\n- 从新石器时代的彩陶绘画到东汉时期帛画的出现，绘画形式不断丰富，展现了古人对美的独特追求。\n- 唐代绘画风格多样，吴道子的《送子天王图》线条流畅，色彩绚丽，体现了唐代绘画的高超技艺。\n")
        .build();
CompletableFuture<InitiatePptCreationV2Response> future = client.initiatePptCreationV2  (request);
try {
    InitiatePptCreationV2Response response = future.get();
    System.out.println("result: " + JSON.toJSONString(response));
} catch (InterruptedException e) {
    throw new RuntimeException(e);
} catch (ExecutionException e) {
    throw new RuntimeException(e);
}
  1. 轮询pptArtifactId，如下为代码示例。
AsyncClient client = ClientHelper.getClient();
GetPptInfoRequest request = GetPptInfoRequest.builder()
        .workspaceId(PublicConfig.get("workspace-id"))
        .taskId(taskId)
        .build();
CompletableFuture<GetPptInfoResponse> future = client.getPptInfo(request);
try {
    GetPptInfoResponse response = future.get();
    System.out.println("getPptInfo result: " + JSON.toJSONString(response));
    GetPptInfoResponseBody.Data data = response.getBody().getData();
    return GetPptInfoResp.builder()
            .taskId(data.getTaskId())
            .pptProcessId(data.getPptProcessId())
            .pptArtifactId(data.getPptArtifactId())
            .exportTaskId(data.getExportTaskId())
            .exportFileLink(data.getExportFileLink())
            .query(data.getQuery())
            .build();
} catch (InterruptedException e) {
    e.printStackTrace();
} catch (ExecutionException e) {
    e.printStackTrace();
}
return null;

step2：（前端）界面编辑 / 查看作品 

// 确保SDK已经加载完
await window.Quanmiao.editPPT({
  appkey: 'your appkey', // 必填，由服务端API获取
  code: 'your code', // 必填，由服务端API获取
  container: document.getElementById('XXX'), // 必填，挂载容器DOM元素
  id: 88888, // 作品id，必填；从服务端API获取，也可从前端生成步骤获取
  isMobile: true, // 是否使用移动端模式。非必填，默认为false
  editorModel: false // 是否是编辑模式。默认是true
});

场景四：全云端完成PPT作品的创建 -- 轮询任务过程 及 最终作品下载链接

由云端完成PPT作品的创建和导出，下发exportTaskId（导出任务ID）。 用户根据exportTaskId调用 查询PPT导出任务的结果进行轮询，获取PPT文件的下载地址。 异步设计，同【场景三】。
  1. 获取导出任务的ID，如下为代码示例。
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
        .workspaceId(workspaceId)
        .taskId(UUID.randomUUID().toString())
        .processType(3) //注意这里的类型
        .outline("#说说中国传统文化艺术的魅力\n##1. 传统文化艺术的源远流长\n###1.1 中国古代艺术发展历程\n####1.1.1 古代绘画艺术的演变\n- 从新石器时代的彩陶绘画到东汉时期帛画的出现，绘画形式不断丰富，展现了古人对美的独特追求。\n- 唐代绘画风格多样，吴道子的《送子天王图》线条流畅，色彩绚丽，体现了唐代绘画的高超技艺。\n")
        .build();
CompletableFuture<InitiatePptCreationV2Response> future = client.initiatePptCreationV2  (request);
try {
    InitiatePptCreationV2Response response = future.get();
    System.out.println("result: " + JSON.toJSONString(response));
} catch (InterruptedException e) {
    throw new RuntimeException(e);
} catch (ExecutionException e) {
    throw new RuntimeException(e);
}
  1. 轮询exportTaskId，如下为代码示例。
AsyncClient client = ClientHelper.getClient();
GetPptInfoRequest request = GetPptInfoRequest.builder()
        .workspaceId(PublicConfig.get("workspace-id"))
        .taskId(taskId)
        .build();
CompletableFuture<GetPptInfoResponse> future = client.getPptInfo(request);
try {
    GetPptInfoResponse response = future.get();
    System.out.println("getPptInfo result: " + JSON.toJSONString(response));
    GetPptInfoResponseBody.Data data = response.getBody().getData();
    return GetPptInfoResp.builder()
            .taskId(data.getTaskId())
            .pptProcessId(data.getPptProcessId())
            .pptArtifactId(data.getPptArtifactId())
            .exportTaskId(data.getExportTaskId())
            .exportFileLink(data.getExportFileLink())
            .query(data.getQuery())
            .build();
} catch (InterruptedException e) {
    e.printStackTrace();
} catch (ExecutionException e) {
    e.printStackTrace();
}
return null;
  1. 轮询任务结果，如下为示例代码。
AsyncClient client = MyClientHelper.getClient();
GetPptArtifactExportResultRequest request = GetPptArtifactExportResultRequest.builder()
        .workspaceId(workspaceId)
        .exportTaskId("2dxxx529c-b065-43ff-a04d-xxx")
        .build();
for(int i = 0; i < 30; i++) {
    CompletableFuture<GetPptArtifactExportResultResponse> future = client.getPptArtifactExportResult(request);
    try {
        GetPptArtifactExportResultResponse response = future.get();
        System.out.println("result: " + JSON.toJSONString(response));
    } catch (InterruptedException e) {
        throw new RuntimeException(e);
    } catch (ExecutionException e) {
        throw new RuntimeException(e);
    }
    try {
        Thread.sleep(3000L);
    } catch (InterruptedException e) {
        throw new RuntimeException(e);
    }
}

场景五：全云端完成PPT作品的创建 -- 只轮询最终作品下载链接

由云端完成PPT作品的创建和导出，下发文件链接。 异步设计，同【场景三】。
  1. 获取导出任务的ID，如下为示例代码。
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
        .workspaceId(workspaceId)
        .taskId(UUID.randomUUID().toString())
        .processType(4) //注意这里的类型
        .outline("#说说中国传统文化艺术的魅力\n##1. 传统文化艺术的源远流长\n###1.1 中国古代艺术发展历程\n####1.1.1 古代绘画艺术的演变\n- 从新石器时代的彩陶绘画到东汉时期帛画的出现，绘画形式不断丰富，展现了古人对美的独特追求。\n- 唐代绘画风格多样，吴道子的《送子天王图》线条流畅，色彩绚丽，体现了唐代绘画的高超技艺。\n")
        .build();
CompletableFuture<InitiatePptCreationV2Response> future = client.initiatePptCreationV2  (request);
try {
    InitiatePptCreationV2Response response = future.get();
    System.out.println("result: " + JSON.toJSONString(response));
} catch (InterruptedException e) {
    throw new RuntimeException(e);
} catch (ExecutionException e) {
    throw new RuntimeException(e);
}
  1. 轮询exportFileLink，如下为示例代码。
AsyncClient client = ClientHelper.getClient();
GetPptInfoRequest request = GetPptInfoRequest.builder()
        .workspaceId(PublicConfig.get("workspace-id"))
        .taskId(taskId)
        .build();
CompletableFuture<GetPptInfoResponse> future = client.getPptInfo(request);
try {
    GetPptInfoResponse response = future.get();
    System.out.println("getPptInfo result: " + JSON.toJSONString(response));
    GetPptInfoResponseBody.Data data = response.getBody().getData();
    return GetPptInfoResp.builder()
            .taskId(data.getTaskId())
            .pptProcessId(data.getPptProcessId())
            .pptArtifactId(data.getPptArtifactId())
            .exportTaskId(data.getExportTaskId())
            .exportFileLink(data.getExportFileLink())
            .query(data.getQuery())
            .build();
} catch (InterruptedException e) {
    e.printStackTrace();
} catch (ExecutionException e) {
    e.printStackTrace();
}
return null;

4 一键调用示例

为提升开发效率和使用体验，我们已提供完整的Demo示例代码，支持用户一键调用，便于快速集成与调试，
后端：
Demo示例可下载如下文档： 本地网页端口：http://localhost:8080/ppt。 打开该页面后，显示大纲设置界面，包含AI智能生成大纲标签页、一个多行文本输入框以及生成大纲按钮，页面初始状态为空白，等待用户输入内容。 在文本框中输入主题（如"北京传统文化发展趋势"），单击生成大纲按钮，系统自动生成大纲并显示进度状态与任务ID。生成完成后，下方大纲编辑区域以层级结构展示大纲内容，包含主题、章节、小节、子节和内容五个层级，各层级通过递增缩进和不同颜色的左侧竖线加以区分，支持在对应输入框中编辑各级标题与描述文字。 打开本地网页后，在选择场景，生成PPT区域提供四种集成场景按钮：一站式SaaS，全部流程通过JS SDK来进行、先由服务端创建作品，然后通过JS SDK编辑作品、不集成JS SDK，完全由后端完成，并返回导出任务ID，然后轮询作品结果、完全由后端完成，直接轮询获取导出文件链接。单击任一场景按钮即可生成PPT，完成后页面显示导出完成!提示及点击下载 PPT 文件链接，单击即可下载生成的PPT文件。
前端示例：
以下是前端配置参考示例代码，填入相关接口参数后，本地服务启动界面即可快速查看效果，Demo示例可下载如下文档： ppt-frontend-demo.zip 示例效果（具体调试信息，请关注控制台打印信息）： 启动本地服务后，界面左侧显示SDK 调试面板，包含基于内置模板生成PPT、基于自定义模板生成PPT、编辑PPT作品（当前高亮选中）、预览PPT作品、销毁PPT五个功能按钮。主编辑区域展示AI生成的PPT封面幻灯片，顶部工具栏提供文本、形状、图片、素材、表格、图表、公式、LOGO等编辑工具，右侧提供设计、模板、美化、合成、背景、大纲、备注等辅助面板，底部标注"*AI生成内容，仅供参考"。

5 其他

前端SDK销毁：
业务处理过程中谨慎调用，一般离开界面处理即可
windows.Quanmiao.deleteIframe();
Agent 开发运行
Agent 上下文
Agent 治理与进化
Store
应用广场
实践教程
服务支持