浏览器或小程序部署

更新时间：2022-11-02

浏览器或小程序部署

简介

本文档介绍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.lock

demo基于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

端云协同部署

模型加速整体说明