背景
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/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/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/developer/article/1684093
https://mp.weixin.qq/wxopen/plugindevdoc?appid=wx7138a7bb793608c3
https://github/PaddlePaddle/Paddle.js/tree/master/packages/paddlejs-models/humanseg
https://blog.csdn/weixin_45449540/article/details/108114307
更多推荐
AI和前端结合-使用paddle.js打造智能化应用并同时支持web和小程序
发布评论