Skip to main content

Best practices for PPT generation

This document provides best practices for the PPT generation API workflow to help you get started quickly and develop your own business applications.

Before you begin:To call the PPT streaming API, use your local environment, not the Alibaba Cloud OpenAPI.

1. Prerequisites

Backend 

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

Frontend

2. Procedure

Step 1: Generate a PPT outline 

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("Generate a PPT about fire safety")
      .build();
ResponseIterator<RunPptOutlineGenerationResponseBody> iterator = client.runPptOutlineGenerationWithResponseIterable(runRequest).iterator();
while (iterator.hasNext()) {
    RunPptOutlineGenerationResponseBody event = iterator.next();
    System.out.println(new Date() + " === " + JSON.toJSONString(event));
}

Step 2: Generate PPT content

Get PPT component configuration to obtain the code required for editing a PPT artifact. 

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);
}

Initialize PPT creationto obtain the parameters required for the PPT generation process.

  • Note: This API call incurs charges. Be mindful of the costs.
  • Returned information:
    1. A signature to initialize the frontend component for PPT generation.
    2. Other parameters required for different scenarios, such as the PPT process ID, artifact ID, and task ID.

3. Use cases

Use case 1: Create a PPT end-to-end

This one-stop SaaS solution provides the full functionality of the console. The frontend SDK handles the entire workflow.

Step 1: Initialize the PPT creation session

Backend:
Call the Initialize PPT Creation API to initialize a PPT creation session. The following code shows an example: 
taskId = "xxxx";
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
      .workspaceId(workspaceId)
      .taskId(taskId)
      .outline("# The charm of traditional Chinese culture and art")
      .isMobile(true) // Specifies whether to use the mobile mode. Set as needed.
      .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);
}
Frontend:
Globally load and initialize the quanmiao-sdk. The following code shows an example: 
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);
In your business workflow, call the creation API. For editing or viewing workflows, see Use case 3. The following code shows an example: 
// Make sure the SDK is loaded.
await window.Quanmiao.createPPT({
    appkey: 'your appkey', // Required. Obtain this from the backend API.
    signature: 'your signature', // Required. Obtain this from the backend API.
    container: document.getElementById('XXX'), // Required. The container DOM element to mount.
    content: 'PPT outline content' , // Required.
    speaker: 'PPT speaker', // Optional. Default: 'XXX'.
    isMobile: true, // Optional. Specifies whether to use the mobile mode. Default: false.
    onMessage(type, data) {
      if (type === 'SET_PPT_MAKING_STATUS') {
        if (data?.status === '1') {
          // Generation in progress.
        }
        if (data?.status === '0') {
          // Generation complete.
        }
      }
      if (type === 'GENERATE_PPT_SUCCESS') {
        // You can get the PPT artifact ID here: data?.id
        console.log('artifact ID', data?.id);
      }
    },
  });
} catch (e) {
  console.log('PPT SDK call err=>', e);
  message.error(e?.msg || e?.message || 'Operation failed');
}

Step 2: Bind the PPT artifact data 

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);
}

Use case 2: Generate from a custom template

Step 1: Customize the template

You can call Query Enterprise PPT Templates to get test templates for this use case.

Step 2: Generate content from a template

Backend:
Use the backend API to get the required parameters.
  • pptProcessId: Corresponds to the aipptTaskId input parameter of the frontend SDK.
  • signature
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
        .workspaceId(workspaceId)
        .taskId(UUID.randomUUID().toString())
        .processType(1) // Note the process type.
        .isMobile(true) // Specifies whether to use the mobile mode. Set as needed.
        .outline("# The charm of traditional Chinese culture and art\n## 1. The long history of traditional culture and art\n### 1.1 The development of ancient Chinese art\n#### 1.1.1 The evolution of ancient painting\n- From Neolithic pottery painting to the silk paintings of the Eastern Han Dynasty, painting forms became richer, showing the ancients' unique pursuit of beauty.\n- Tang Dynasty painting had diverse styles. Wu Daozi's 'The Presentation of the Heavenly King' features smooth lines and brilliant colors, reflecting the superb skill of Tang painting.\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);
}
Frontend:
In your business workflow, call the creation API. For editing or viewing workflows, see Use case 3. The following code shows an example: 
// Make sure the SDK is loaded.
await window.Quanmiao.createPPT({
    appkey: 'your appkey', // Required. Obtain this from the backend API.
    signature: 'your signature', // Required. Obtain this from the backend API.
    container: document.getElementById('XXX'), // Required. The container DOM element to mount.
    content: ' PPT outline content' , // Required.
    speaker: 'PPT speaker', // Optional. Default: 'XXX'.
    isMobile: true, // Optional. Specifies whether to use the mobile mode. Default: false.
    templateId: 88888, // The template ID.
    aipptTaskId: 88888888, // Required for this workflow. The creation task ID obtained from the backend API.
    isEnterprise: false,// Specifies whether this is an enterprise template. This parameter takes effect only when a template ID is provided. Default: true. If you use a built-in template instead of a custom enterprise template, set this to false.
    onMessage(type, data) {
      if (type === 'SET_PPT_MAKING_STATUS') {
        if (data?.status === '1') {
          // Generation in progress.
        }
        if (data?.status === '0') {
          // Generation complete.
        }
      }
      if (type === 'GENERATE_PPT_SUCCESS') {
        // You can get the PPT artifact ID here: data?.id
        console.log('artifact ID', data?.id);
      }
    },
  });
} catch (e) {
  console.log('PPT SDK call err=>', e);
  message.error(e?.msg || e?.message || 'Operation failed');
}

Use case 3: Cloud creation and frontend editing

Step 1: (Backend)Create the PPT artifact

Parameters returned:
  • pptProcessId
  • pptArtifactId: Corresponds to the id input parameter (artifact ID) of the frontend SDK.
Because this use case is computationally intensive and has high response times (RT), it runs asynchronously. You must poll the GetPptInfo API to retrieve the results.
  1. Initialize the creation. The following code shows an example.
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
        .workspaceId(workspaceId)
        .taskId(UUID.randomUUID().toString())
        .processType(2) // Note the process type.
        .outline("# The charm of traditional Chinese culture and art\n## 1. The long history of traditional culture and art\n### 1.1 The development of ancient Chinese art\n#### 1.1.1 The evolution of ancient painting\n- From Neolithic pottery painting to the silk paintings of the Eastern Han Dynasty, painting forms became richer, showing the ancients' unique pursuit of beauty.\n- Tang Dynasty painting had diverse styles. Wu Daozi's 'The Presentation of the Heavenly King' features smooth lines and brilliant colors, reflecting the superb skill of Tang painting.\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. Poll for the pptArtifactId. The following code shows an example.
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;

Step 2: (Frontend) Edit or view the artifact 

// Make sure the SDK is loaded.
await window.Quanmiao.editPPT({
  appkey: 'your appkey', // Required. Obtain this from the backend API.
  code: 'your code', // Required. Obtain this from the backend API.
  container: document.getElementById('XXX'), // Required. The container DOM element to mount.
  id: 88888, // Required. The artifact ID, obtained from the backend API or from the frontend generation step.
  isMobile: true, // Optional. Specifies whether to use the mobile mode. Default: false.
  editorModel: false // Specifies whether to use edit mode. Default: true.
});

Use case 4: Cloud creation with polling for results

The service creates and exports the PPT artifact on the cloud, returning an exportTaskId. Use this exportTaskId to poll the Query PPT Export Task Result API and retrieve the download link for the PPT file. This is an asynchronous process, similar to Use case 3.
  1. Initiate the creation to get a taskId. The following code shows an example.
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
        .workspaceId(workspaceId)
        .taskId(UUID.randomUUID().toString())
        .processType(3) // Note the process type.
        .outline("# The charm of traditional Chinese culture and art\n## 1. The long history of traditional culture and art\n### 1.1 The development of ancient Chinese art\n#### 1.1.1 The evolution of ancient painting\n- From Neolithic pottery painting to the silk paintings of the Eastern Han Dynasty, painting forms became richer, showing the ancients' unique pursuit of beauty.\n- Tang Dynasty painting had diverse styles. Wu Daozi's 'The Presentation of the Heavenly King' features smooth lines and brilliant colors, reflecting the superb skill of Tang painting.\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. Poll the GetPptInfo API by using the taskId to get the exportTaskId. The following code shows an example.
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. Poll for the task result by using the exportTaskId. The following code shows an example.
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);
    }
}
The PPT artifact is created and exported on the cloud. The service returns a file link. This is an asynchronous process, similar to Use case 3.
  1. Initiate the creation to get a taskId. The following code shows an example.
AsyncClient client = ClientHelper.getClient();
InitiatePptCreationV2Request request = InitiatePptCreationV2Request.builder()
        .workspaceId(workspaceId)
        .taskId(UUID.randomUUID().toString())
        .processType(4) // Note the process type.
        .outline("# The charm of traditional Chinese culture and art\n## 1. The long history of traditional culture and art\n### 1.1 The development of ancient Chinese art\n#### 1.1.1 The evolution of ancient painting\n- From Neolithic pottery painting to the silk paintings of the Eastern Han Dynasty, painting forms became richer, showing the ancients' unique pursuit of beauty.\n- Tang Dynasty painting had diverse styles. Wu Daozi's 'The Presentation of the Heavenly King' features smooth lines and brilliant colors, reflecting the superb skill of Tang painting.\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. Poll for the exportFileLink. The following code shows an example.
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 One-Click Call Examples

To improve development efficiency and user experience, we provide complete demo code samples. You can call them with a single click for fast integration and debugging.
Backend:
Download the demo samples: Local web page URL: http://localhost:8080/ppt. After you open the page, the Outline settings interface appears. It contains the AI-powered outline generation tab, a multi-line text box, and the Generate outline button. The page is initially blank, waiting for your input. Enter a topic, such as "Development trends of traditional culture in Beijing", in the text box and click the Generate outline button. The system automatically generates an outline and displays the progress status and task ID. When generation is complete, the Outline editor area displays the content in a hierarchical structure. This structure includes five levels: Topic, Chapter, Section, Subsection, and Content. Each level is distinguished by increasing indentation and different colored vertical lines on the left. Edit the title and description for each level in its corresponding input box. Open the local web page. In the Select a scenario and generate a PPT area, there are four buttons for different integration scenarios: One-stop SaaS: Complete the entire process using the JS SDK, Create the project on the server, then edit using the JS SDK, No JS SDK integration: Complete on the backend, return an export task ID, and poll for the result, and Complete entirely on the backend and directly poll for the exported file link. Click any scenario button to generate a PPT. After generation, the page displays an Export complete! message and a Click to download the PPT file link. Click the link to download the generated PPT file.
Frontend example
The following code is a frontend configuration example. Enter the required API parameters and start the local service to quickly see the results. Download the demo from the document below: ppt-frontend-demo.zip Example result (Check the console for detailed debugging information): After starting the local service, the SDK Debugging panel appears on the left. This panel contains five buttons: Generate PPT from Built-in Template, Generate PPT from Custom Template, Edit PPT (currently highlighted), Preview PPT, and Destroy PPT. The main editing area displays the AI-generated PPT cover slide. The top toolbar provides editing tools, such as Text, Shape, Image, Material, Table, Chart, Formula, and LOGO. The panels on the right provide auxiliary tools for Design, Template, Beautify, Compose, Background, Outline, and Notes. A note at the bottom reads, "AI-generated content is for reference only."

5 Others

Destroy the frontend SDK:
Use this function with caution. The SDK is typically destroyed automatically when the user leaves the page.
windows.Quanmiao.deleteIframe();
Agent Development
Agent Context
Agent Governance & Evolution
Store
Application Marketplace
Use Cases
Support