开放能力
开发平台
行业应用
生态合作
开发与教学
资讯 社区 控制台
技术能力
语音技术
文字识别
人脸与人体
图像技术
语言与知识
视频技术
AR与VR
数据智能
场景方案
部署方案
行业应用
智能教育
智能医疗
智能零售
智能工业
企业服务
智能政务
信息服务
智能园区

浏览器或小程序部署

浏览器或小程序部署

简介

本文档介绍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
上一篇
端云协同部署
下一篇
模型加速整体说明