AI和前端结合-使用paddle.js打造智能化应用并同时支持web和小程序

背景

Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏览器中的开源深度学习框架。Paddle.js 可以加载提前训练好的 paddle 模型，或者将 paddle hub 中的模型通过 Paddle.js 的模型转换工具 paddlejs-converter 变成浏览器友好的模型进行在线推理预测使用。目前，Paddle.js 可以在支持 WebGL/WebGPU/WebAssembly 的浏览器中运行，也可以在百度小程序和微信小程序环境下运行。

以上是：官方介绍

近几年百度的人工智能做的挺不错的，之前如果想使用 AI 的能力，需要 AI 团队出模型之后，后端再包一层，然后前端来调接口使用。现在百度的 paddlejs 可以让前端直接调用模型。

浏览器中使用

下载包

npm i @paddlejs/paddlejs-core @paddlejs/paddlejs-backend-webgl -S

我们简单封装一个 paddle.js 如下：

import { Runner, env } from '@paddlejs/paddlejs-core'
import '@paddlejs/paddlejs-backend-webgl'

let runner

export const isInited = () => {
  return !!runner
}

export const init = async (path) => {
  const mp = 'https://paddlejs.bj.bcebos.com/models/fuse/humanseg/humanseg_398x224_fuse_activation/model.json'
  runner = new Runner({
    modelPath: mp,
    fill: '#fff',
    mean: [0.485, 0.456, 0.406],
    std: [0.229, 0.224, 0.225],
    scale: 256,
    feedshape: { fw: 224, fh: 224 },
    needPreheat: true
  })
  env.set('webgl_pack_channel', true)
  try {
    await runner.init()
  } catch (e) {
    console.log('e => ', e)
  }
}

export const predict = async (path) => {
  const result = await runner.predict(path)
  return result
}

使用：

<template>
  <div>
    <div @click="toBegin">
      开始推断
    </div>
  </div>
</template>

<script>
import { init, predict, isInited } from '@/utils/paddle'
export default {
  data () {
    return {
      // 是否初始化完成
      screenLodingShow: false
    }
  },
  mounted () {
    if (!isInited()) {
      this.screenLodingShow = true

      init().then(() => {
        this.screenLodingShow = false
      })
    }
  },
  methods: {
    async toBegin () {
      const imgUrl = 'https://xxx.png'
      const res = await predict(imgUrl)
      console.log('res', res)
    }
  }
}
</script>

这个就是返回的 res

小程序中使用

下载包

npm i @paddlejs/paddlejs-core @paddlejs/paddlejs-backend-webgl -S

添加 官方插件

"plugins": {
  "paddlejs-plugin": {
    "version": "2.0.1",
    "provider": "wx7138a7bb793608c3"
  }
}

封装一下，或者直接放到 app.js 中

import * as paddlejs from '@paddlejs/paddlejs-core'
import '@paddlejs/paddlejs-backend-webgl'
const plugin = requirePlugin('paddlejs-plugin')
plugin.register(paddlejs, wx)

const initPaddle = () => {
  return new Promise((resolve, reject) => {
    const pdjs = new paddlejs.Runner({
      modelPath: 'https://paddlejs.bj.bcebos.com/models/fuse/humanseg/humanseg_398x224_fuse_activation/model.json',
      feedShape: {
        fw: 224,
        fh: 224
      },
      fill: '#fff',
      targetSize: {
        height: 224,
        width: 224
      },
      mean: [0.485, 0.456, 0.406],
      std: [0.229, 0.224, 0.225]
    })
    pdjs.init().then(() => {
     // 初始化完成
      console.log('初始化成功')
      resolve(pdjs)
    })
  })
}

全局引入 app.js

globalData: {
  paddleRunner: null
},
async onLaunch() {
  this.$options.globalData.paddleRunner = await initPaddle()
},

页面中使用

getApp().$wepy.$options.globalData.paddleRunner.predict({}, function (data) {
 // 推理完成，data是推理结果
 console.log('data', data)
})

参考资料

https://cloud.tencent.com/developer/article/1684093
https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx7138a7bb793608c3
https://github.com/PaddlePaddle/Paddle.js/tree/master/packages/paddlejs-models/humanseg
https://blog.csdn.net/weixin_45449540/article/details/108114307