AiPPT的API接口使用

弓长三

已于 2024-07-24 15:54:49 修改

阅读量822

点赞数 10

文章标签： ppt powerpoint ai AIGC AI编程 harmonyos 华为

于 2024-07-24 15:30:45 首次发布

本文链接：https://blog.csdn.net/GongChangSan/article/details/140663245

版权

好消息，终于可以在自己的项目中加入AIPPT的功能了。不用自己实现，直接调用API即可。

目前AIPPT相关的工具井喷般爆发，笔者也是测试了多款AIPPT生成工具。目前推荐文多多AiPPT,官网：文多多 AiPPT | 一键搞定PPT。最为关键的是，该工具在github上进行了开源：GitHub - veasion/aippt，很是良心。

日前，文多多AiPPT发布了开放平台，提供了API与UI接入两种方式，使得文多多AiPPT更加良心了。API的调用适合专业技术人员，UI接入可快速实现调用。文多多AiPPT的UI接入通过iframe方案实现，经过一些简单的步骤，就能将AiPPT加入到自己的业务系统中。

文多多AiPPT的iframe方案官方代码：

<body>
  <div id="container"></div>

  <script>
    const docmeeUI = new DocmeeUI({
      token: 'sk_*****************', // 调用 createApiToken 接口获取的 token
      container: document.querySelector('#container'), // 挂载 iframe 的容器
      page: 'creator', // 'dashboard' ppt列表; 'creator' 创建页面
      themeColor: '#a83aaf', // 主题色
      background: 'linear-gradient(140deg, #ec81af, #af22ce)', // 背景色，支持颜色与图片url地址
      padding: '40px', // 内边距（也就是css的padding，语法相同）
      onMessage(message) {
        console.log(message)

        if (message.type === 'invalid-token') {
          console.log('token 认证错误') // 在token失效时触发
        }
        if (message.type === 'beforeGenerate') {
          const { subtype, fields } = message.data
          if (subtype === 'outline') {
            // 生成大纲前触发
            console.log('即将生成ppt大纲', fields)
            return true
          } else if (subtype === 'ppt') {
            // 生成ppt前触发
            console.log('即将生成ppt', fields)
            docmeeUI.sendMessage({
              type: 'success',
              content: '继续生成PPT',
            })
            return true
          }
        }
        if (message.type === 'beforeDownload') {
          return `PPT_${new Date().getTime()}.pptx`
        }
      },
    })
  </script>
</body>

需要引入官方的SDK文件，可在官网下载。

<head>
  <script src="/docmee-ui-sdk-iframe.min.js"></script>
  <head></head>
</head>

官方代码参数说明

参数	类型	是否必填	说明	例
`token`	string	✔︎	调用 API 创建接口 token 获取 token，提供给您的用户	sk_xxxxx
`container`	HTMLElement	✔︎	挂载 iframe 的容器
`themeColor`	string	⨯	主题色	#4b39b8
`page`	'dashboard' \| 'creator'	⨯	进入页面，'dashboard'表示文档列表页，'creator'生成 ppt 页面	dashboard
`background`	string	⨯	iframe 背景颜色，可填入颜色或者图片 url 地址	#f1f1f1
`padding`	string	⨯	内边距（也就是 css 的 padding，语法相同）	`20px 10px 20px 10px`
`onMessage`	function	⨯	事件处理钩子详见事件类型	function (message) {}

iframe挂载完成

{
  type: 'mounted',
}

PPT生成前触发 (用户点击“生成大纲”，以及选择完模版，点击“开始创作”时触发,通过subtype区分)

{
  type: 'beforeGenerate',
  data: {
    subtype: 'outline', // "outline" 生成大纲前触发，"ppt"生成ppt前触发
    fields: {} // 用户用于生成PPT的参数
  }
}

该事件可以返回 true/false (也可以返回异步 Promise<boolean>) 来决定用户是否能够继续生成。

PPT生成后触发

{
  type: 'afterGenerate',
  data: {
    id: 'xxxxxx' // ppt id
  }
}

下载前出发（需返回布尔值或字符串（文件名））

{
  type: 'beforeDownload',
  data: {
    id: 'xxxxxx' // ppt id
  }
}

该事件可以返回 true/false 或 string (也可以返回异步Promise<boolean | string>) 来决定用户是否能够继续下载 PPT，或指定ppt文档名称，返回的名称需要以.pptx结尾才表示重命名文件。

用户信息

{
  type: 'user-info',
  data: {
   "uid": null, // 用户 id
   "availableCount": 0, // 可用生成次数
   "usedCount": 0 // 已使用的次数
  }
}

错误

{
  type: 'error',
  data: {
    code: 88, // 次数用完了
    message:"您的次数已用完，请开通会员"
  }
}

HTML完整测试代码，注意需要去文多多AiPPT官网申请token

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./docmee-ui-sdk-iframe.min.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        #container {
            width: 100vh;
            height: 100vh;
            border: 1px solid red;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container"></div>
  
    <script>
      const docmeeUI = new DocmeeUI({
        token: '*****************', // 调用 createApiToken 接口获取的 token
        container: document.querySelector('#container'), // 挂载 iframe 的容器
        page: 'creator', // 'dashboard' ppt列表; 'creator' 创建页面
        themeColor: '#a83aaf', // 主题色
        background: 'linear-gradient(140deg, #ec81af, #af22ce)', // 背景色，支持颜色与图片url地址
        padding: '40px', // 内边距（也就是css的padding，语法相同）
        onMessage(message) {
          console.log(message)
  
          if (message.type === 'invalid-token') {
            console.log('token 认证错误') // 在token失效时触发
          }
          if (message.type === 'beforeGenerate') {
            const { subtype, fields } = message.data
            if (subtype === 'outline') {
              // 生成大纲前触发
              console.log('即将生成ppt大纲', fields)
              return true
            } else if (subtype === 'ppt') {
              // 生成ppt前触发
              console.log('即将生成ppt', fields)
              docmeeUI.sendMessage({
                type: 'success',
                content: '继续生成PPT',
              })
              return true
            }
          }
          if (message.type === 'beforeDownload') {
            return `PPT_${new Date().getTime()}.pptx`
          }
        },
      })
    </script>
  </body>
</html>

至此，即可快速将文多多AiPPT嵌入到自己的项目里了。小伙伴们，赶紧去试试吧，很好用哦！