肇庆小学招生报名，你不知道这些连学都没得上
更新时间：2025-08-06
浏览器或小程序部署
简介
本文档介绍EasyDL的浏览器/小程序部署SDK的使用方法，
SDK支持范围
浏览器部署
PC浏览器: Chrome、Safari、Firefox
手机浏览器: Baidu App、Safari、Chrome、UC and QQ Browser
小程序部署
小程序: 百度小程序、微信小程序
支持的操作系统
系统: MacOS、Windows
demo文件结构
SDK解压缩之后，目录结构如下
|--public
| |--model
| |--model.json
| |--chunk_n.dat
|--src
| |--components
| |--App.vue
| |--config.json
| |--env.d.ts
| |--label.json
| |--main.ts
| |--modelInfo.json
| |--usePredict.ts
|--index.html
|--package.json
|--READ.md
|--tsconfig.json
|--tsconfig.node.json
|--vite.config.ts
|--yarn.lockdemo基于vite，其中public/model下的model.json、chunk_1.dat...chunk_n.dat为模型文件，src下为业务代码，index.html为入口文件
快速开始
依赖node及npm，如果没有node，请前往node官网下载长期维护版本
安装依赖：npm install
启动项目：npm run dev
启动后控制台输出
vite v2.8.4 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose到浏览器打开 http://localhost:3000/ 即可体验demo
模型预测结果示例
图像分类示例
[0.4450492858886719, 0.3961234986782074, 0.0122891990467906, 0.14653800427913666]数组的index为对应的标签，值为置信度
物体检测示例
[[1, 0.2247152328491211, 0.11200979351997375, 0.07523892819881439, 0.8540866374969482, 0.5503567457199097], [2, 0.1224712328491211, 0.511200979351997375, 0.27523892819881439, 0.8540866374969482, 0.5503567457199097],...]输出结果是一个二维数组，第二维的结果为：[标签， 置信度，矩形框x1坐标, 矩形框y1坐标, 矩形框x2坐标, 矩形框y2坐标]
浏览器开发
参考src/usePredict文件
// 加载推理引擎
import {Runner, env} from '@paddlejs/paddlejs-core';
// 使用webgl计算方案(暂不能使用wasm、webgpu等计算方案)
import '@paddlejs/paddlejs-backend-webgl';
...
// 注册引擎
const runner = new Runner({
modelPath: '/model',
keepRatio: config.rescale_mode === 'keep_ratio',
mean: config.img_mean.reduce((memo, v) => [...memo, +((v / 255).toFixed(3))], [] as number[]),
std: config.scale.reduce((memo, v) => [...memo, +((1 / 255 / v).toFixed(3))], [] as number[]),
bgr: config.colorFormat === 'BGR',
feedShape: {
fw: config.resize[0],
fh: config.resize[1]
}
});
...
// init runner
await runner.init();
...
// predict and get result
await runner.predict(img);更多可参考PaddleJS工程页
小程序开发
####微信小程序
微信小程序需添加 Paddle.js微信小程序插件
步骤：
小程序管理界面 --> 设置 --> 第三方设置 --> 插件管理 --> 添加插件 --> 搜索 wx7138a7bb793608c3 并添加
####掌上百度小程序
手百小程序需添加paddlejs百度智能小程序动态库
引入动态库代码包
代码示例：
{
"dynamicLib": {
// 定义一个别名，小程序中用这个别名引用动态库。
"paddlejs": {
"provider": "paddlejs"
}
}
}使用动态库
在使用页面的json文件里配置如下信息：
{
"usingSwanComponents": {
"paddlejs": "dynamicLib://paddlejs/paddlejs"
}
}从而页面中可以使用此组件：
<view class="container">
<view>下面这个自定义组件来自于动态库</view>
<paddlejs />
</view>示例
index.swan
<view class="container">
<!--index.wxml-->
<image style="width:100%; height: 300px; " src="{{imgPath}}"></image>
<button bindtap="chooseImage">选择图片</button>
<button bindtap="doPredict" class="btn" type="primary">新鲜度预测</button>
<!-- 返回结果 -->
<view class="result" s-if="resultType">预测结果：{{resultType}}</view>
<view class="result" s-if="resultVal">预测可信度：{{resultVal}}</view>
<paddlejs options="{{options}}" status="{{status}}" imgBase64="{{imgBase64}}" bindchildmessage="predict" />
</view>index.js
Page({
data: {
imgPath: '',
content: '',
resultType: '',
resultVal: '',
isShow: true,
options: { // 模型配置项
modelPath: 'http://localhost:3000/model',
fileCount: 3,
needPreheat: true,
feedShape: {
fw: 224,
fh: 224
},
fetchShape: [1, 7, 1, 1],
fill: [255, 255, 255, 255],
scale: 256,
targetSize: { height: 224, width: 224 },
mean: [0.485, 0.456, 0.406],
std: [0.229, 0.224, 0.225]
},
status: '' // 初始值为''， 变为'predict'时会触发模型预测
},
/**
* 选择图片
*/
chooseImage: function () {
const me = this;
this.setData({
ishow: false
});
swan.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success(res) {
const path = res.tempFilePaths[0];
swan.getFileSystemManager().readFile({
filePath: path,
encoding: 'base64',
success: res => {
me.setData({
imgBase64: res && res.data,
imgPath: path
});
},
fail: res => {
console.log(res);
}
});
}
});
},
predict(e) {
const status = e && e.detail && e.detail.status;
if (status === 'loaded') {
this.setData({status: 'loaded', isShow: false});
}
else if (status === 'complete') {
const data = e.detail.data;
const maxItem = this.getMaxItem(data);
this.setData({status: '', resultType: maps[maxItem.index], resultVal: maxItem.value});
}
},
doPredict() {
this.setData({status: 'predict'});
},
getMaxItem(datas = []) {
let max = Math.max.apply(null, datas);
let index = datas.indexOf(max);
return {value: max, index};
},
});Prop
| 名称 | 类型 | 默认值 | 是否必选 | 描述 |
|---|---|---|---|---|
| options | string | 是 | 模型配置项，参考src/usePridict | |
| imgBase64 | string | 是 | 要预测的图像的base64 | |
| status | string | '' | 是 | 当前状态，status变化触发组件调用相应的api，当status变为predict时，组件会读取imgBase64作为输入的图像，调用模型预测APi |