Best practices for PPT generation

Backend

• Go to the PPT Generation Purchase Page to activate the service.

• Get a workspace ID.

• Get an API key.

• Import the Miaobi SDK. Ensure you use the latest version.

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

alibabacloud-tea-openapi-sse==1.0.2

"@alicloud/openapi-core": "^1.0.2",
"@alicloud/tea-typescript": "^1.7.1",
"@alicloud/openapi-client": "^0.4.12",

Frontend

• Resource URL: https://quanmiao-public.oss-cn-beijing.aliyuncs.com/quanmiao-sdk/v2.0.0/index.js

• Special configuration: API requests must support the Referer attribute.

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

# Prerequisites:
# 1. Python 3.7+
# 2. Install dependencies: pip3 install alibabacloud-tea-openapi-sse==1.0.2
import os
from alibabacloud_tea_openapi_sse.client import Client as OpenApiClient
from alibabacloud_tea_openapi_sse import models as open_api_models
from alibabacloud_tea_util_sse import models as util_models
import asyncio
import json
biz_param = ('{"WorkspaceId":"llm-xxxxxx","Prompt":"Generate a PPT about fire safety"}')
class AiMiaoBi:
    def __init__(self) -> None:
        # Leaking your project code can expose your Access Key and compromise the security of all your resources. The following code is for reference only.
        # We recommend using a more secure method such as STS. For more information about authentication methods, see https://help.aliyun.com/document_detail/378659.html.
        self.access_key_id = os.environ['accessKeyId']
        self.access_key_secret = os.environ['accessKeySecret']
        # Replace the preceding fields with your actual values.
        self.endpoint = 'aimiaobi.cn-beijing.aliyuncs.com'
        self._client = None
        self._api_info = self._create_api_info()
        self._runtime = util_models.RuntimeOptions(read_timeout=1000 * 100)
        self._client = self._create_client(self.access_key_id, self.access_key_secret, self.endpoint)
    def _create_client(
            self,
            access_key_id: str,
            access_key_secret: str,
            endpoint: str,
    ) -> OpenApiClient:
        config = open_api_models.Config(
            access_key_id=access_key_id,
            access_key_secret=access_key_secret,
            endpoint=endpoint
        )
        return OpenApiClient(config)
    def _create_api_info(self) -> open_api_models.Params:
        """
        API Info
        @param path: params
        @return: OpenApi.Params
        """
        params = open_api_models.Params(
            # API operation name
            action='RunPptOutlineGeneration',
            # API version
            version='2023-08-01',
            # API protocol
            protocol='HTTPS',
            # HTTP method
            method='POST',
            auth_type='AK',
            style='RPC',
            # API path
            pathname='/quanmiao/aimiaosou/runPptOutlineGeneration',
            # Request body format
            req_body_type='json',
            # Response body format
            body_type='sse'
        )
        return params
    async def do_sse_query(self):
        if biz_param == '':
            param = {}
        else:
            param: dict = json.loads(biz_param)
        request = open_api_models.OpenApiRequest(
            body=param
        )
        sse_receiver = self._client.call_sse_api_async(params=self._api_info, request=request, runtime=self._runtime)
        return sse_receiver
# API call
async def run():
    aiMiaoBi = AiMiaoBi()
    async for res in await aiMiaoBi.do_sse_query():
        try:
            data = json.loads(res.get('event').data)
            print(data)
        except json.JSONDecodeError:
            print('------json.JSONDecodeError--------')
            print(res.get('headers'))
            print(res.get('event').data)
            print('------json.JSONDecodeError-end--------')
            continue
    print('------end--------')
if __name__ == '__main__':
    asyncio.run(run())

'use strict';
var __asyncValues = (this && this.__asyncValues) || function (o) {
    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
    var m = o[Symbol.asyncIterator], i;
    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
};
const OpenApi = require('@alicloud/openapi-core');
const Dara = require('@darabonba/typescript');
class Client {
    /**
     * Use an AK and SK to initialize the client.
     * @return Client
     * @throws Exception
     */
    static createClient() {
        let config = new OpenApi.$OpenApiUtil.Config({
            accessKeyId: 'xxxx',
            accessKeySecret: 'xxxx',
        });
        config.endpoint = `aimiaobi.cn-beijing.aliyuncs.com`;
        return new OpenApi.default(config);
    }
    /**
     * API Info
     * @param path params
     * @return OpenApi.Params
     */
    static createApiInfo() {
        let params = new OpenApi.$OpenApiUtil.Params({
            // API operation name
            action: 'RunPptOutlineGeneration',
            // API version
            version: '2023-08-01',
            // API protocol
            protocol: 'HTTPS',
            // HTTP method
            method: 'POST',
            authType: 'AK',
            style: 'V3',
            // API path
            pathname: `/quanmiao/miaosou/runPptOutlineGeneration`,
            // Request body format
            reqBodyType: 'json',
            // Response body format
            bodyType: 'sse',
        });
        return params;
    }
    static async main(args) {
        var _a, e_1, _b, _c;
        let client = Client.createClient();
        let params = Client.createApiInfo();
        let body = { };
        body['WorkspaceId'] = 'llm-xxxxx';
        body['Prompt'] = 'Generate a PPT about fire safety';
        let request = new OpenApi.$OpenApiUtil.OpenApiRequest({
            body: body,
        });
        try {
            let response = await client.callSSEApi(params, request, new Dara.RuntimeOptions({"readTimeout": 60000, "connectTimeout": 60000}));
            //console.log(response);
            try {
                for (var _d = true, response_1 = __asyncValues(response), response_1_1; response_1_1 = await response_1.next(), _a = response_1_1.done, !_a; _d = true) {
                    _c = response_1_1.value;
                    _d = false;
                    const value = _c;
                    console.log('-'.repeat(30));
                    console.log(value.event);
                }
            }
            catch (e_1_1) { e_1 = { error: e_1_1 }; }
            finally {
                try {
                    if (!_d && !_a && (_b = response_1.return)) await _b.call(response_1);
                }
                finally { if (e_1) throw e_1.error; }
            }
        }
        catch (error) {
            console.log(error);
        }
    }
}
exports.Client = Client;
Client.main(process.argv.slice(2));

Step 2: Generate PPT content

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

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.

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

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

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

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

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

// 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

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

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;

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

2. 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;

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

Use case 5: Cloud creation with download link polling

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

2. 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;

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:

• Java: ppt-generation-demo.zip

• Python: ppt-generation-demo-py.zip

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."