diff --git a/README.md b/README.md index 680e5f60..f9f65661 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,6 @@ Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep learning framework running in the browser. Paddle.js can either load a pre-trained model, or transforming a model from paddle-hub with model transforming tools provided by Paddle.js. It could run in every browser with WebGL/WebGPU/WebAssembly supported. It could also run in Baidu Smartprogram and WX miniprogram. - - ## Ecosystem | Project | version | Description | @@ -71,6 +69,9 @@ Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep [facedetect-status]: https://img.shields.io/npm/v/@paddlejs-models/facedetect [facedetect-package]: https://npmjs.com/package/@paddlejs-models/facedetect +## Website +https://paddlejs.baidu.com + ## Key Features ### Module @@ -92,15 +93,40 @@ Paddle.js is a web project for Baidu PaddlePaddle, which is an open source deep ## Examples - [image classification game](./packages/paddlejs-examples/clasGame/README.md) image classification game example in wx miniprogram -- [gesture](./packages/paddlejs-examples/gesture/README.md) gesture recognition example -- [humanStream](./packages/paddlejs-examples/humanStream/README.md) video-streaming human segmentation -- [humanseg](./packages/paddlejs-examples/humanseg/README.md) human segmentation example -- [ocr](./packages/paddlejs-examples/ocr/README.md) optical character recognition example -- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) optical character detection example -- [mobilenet](./packages/paddlejs-examples/mobilenet) classify images into 1000 object categories -- [wine](./packages/paddlejs-examples/wine) classify bottles into 7 categories +- [gesture](./packages/paddlejs-examples/gesture/README.md) gesture recognition example [online experience](https://paddlejs.baidu.com/gesture) +- [humanStream](./packages/paddlejs-examples/humanStream/README.md) video-streaming human segmentation [online experience](https://paddlejs.baidu.com/humanStream) +- [humanseg](./packages/paddlejs-examples/humanseg/README.md) human segmentation example [online experience](https://paddlejs.baidu.com/humanseg) +- [ocr](./packages/paddlejs-examples/ocr/README.md) optical character recognition example [online experience](https://paddlejs.baidu.com/ocr) +- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) optical character detection example [online experience](https://paddlejs.baidu.com/ocrdet) +- [mobilenet](./packages/paddlejs-examples/mobilenet) classify images into 1000 object categories [online experience](https://paddlejs.baidu.com/mobilenet) +- [wine](./packages/paddlejs-examples/wine) classify bottles into 7 categories [online experience](https://paddlejs.baidu.com/wine) - [webglworker](./packages/paddlejs-examples/webglWorker) This demo help us to use Paddle.js in WebWorker. +

+ + clasGame + + + wine + + + gesture + +

+

+ + ocr + +

+

+ + humanseg + + + facedetect + +

+ ### Browser/Platforms Coverage diff --git a/README_cn.md b/README_cn.md index 16a5a6d3..74c32c25 100644 --- a/README_cn.md +++ b/README_cn.md @@ -69,6 +69,8 @@ Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏 [facedetect-status]: https://img.shields.io/npm/v/@paddlejs-models/facedetect [facedetect-package]: https://npmjs.com/package/@paddlejs-models/facedetect +## 官网 +https://paddlejs.baidu.com ## 主要特点 @@ -91,15 +93,40 @@ Paddle.js 是百度 PaddlePaddle 的 web 方向子项目，是一个运行在浏 ## 案例 demo - [image classification game](./packages/paddlejs-examples/clasGame/README.md) 物品识别微信小程序——寻物小游戏 -- [gesture](./packages/paddlejs-examples/gesture/README.md) 手势识别 demo -- [humanStream](./packages/paddlejs-examples/humanStream/README.md) 基于视频流的人像分割 demo -- [humanseg](./packages/paddlejs-examples/humanseg/README.md) 人像分割 demo -- [ocr](./packages/paddlejs-examples/ocr/README.md) 文本识别 demo -- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) 文本检测 demo -- [mobilenet](./packages/paddlejs-examples/mobilenet) 1000 物品分类 demo -- [wine](./packages/paddlejs-examples/wine) 酒瓶识别 demo +- [gesture](./packages/paddlejs-examples/gesture/README.md) 手势识别 demo [在线体验](https://paddlejs.baidu.com/gesture) +- [humanStream](./packages/paddlejs-examples/humanStream/README.md) 基于视频流的人像分割 demo [在线体验](https://paddlejs.baidu.com/humanStream) +- [humanseg](./packages/paddlejs-examples/humanseg/README.md) 人像分割 demo [在线体验](https://paddlejs.baidu.com/humanseg) +- [ocr](./packages/paddlejs-examples/ocr/README.md) 文本识别 demo [在线体验](https://paddlejs.baidu.com/ocr) +- [ocr detection](./packages/paddlejs-examples/ocrdetection/README.md) 文本检测 demo [在线体验](https://paddlejs.baidu.com/ocrdet) +- [mobilenet](./packages/paddlejs-examples/mobilenet) 1000 物品分类 demo [在线体验](https://paddlejs.baidu.com/mobilenet) +- [wine](./packages/paddlejs-examples/wine) 酒瓶识别 demo [在线体验](https://paddlejs.baidu.com/wine) - [webglworker](./packages/paddlejs-examples/webglWorker) 如何在 Web Worker 中运行 Paddle.js +

+ + clasGame + + + wine + + + gesture + +

+

+ + ocr + +

+

+ + humanseg + + + facedetect + +

+ ### 浏览器/系统覆盖范围 * PC浏览器: Chrome、Safari、Firefox diff --git a/packages/paddlejs-examples/gesture/README.md b/packages/paddlejs-examples/gesture/README.md index 7f7a6a5a..dc9a6ede 100644 --- a/packages/paddlejs-examples/gesture/README.md +++ b/packages/paddlejs-examples/gesture/README.md @@ -31,3 +31,10 @@ await gesture.load(); const res = await gesture.classify(img); ``` + +# Online experience + +https://paddlejs.baidu.com/gesture + +# Performance +gesture diff --git a/packages/paddlejs-examples/gesture/README_cn.md b/packages/paddlejs-examples/gesture/README_cn.md index ea681ed5..779382fa 100644 --- a/packages/paddlejs-examples/gesture/README_cn.md +++ b/packages/paddlejs-examples/gesture/README_cn.md @@ -31,3 +31,9 @@ await gesture.load(); const res = await gesture.classify(img); ``` +# 在线体验 + +https://paddlejs.baidu.com/gesture + +# 效果 +gesture diff --git a/packages/paddlejs-examples/humanStream/README.md b/packages/paddlejs-examples/humanStream/README.md index ba835135..4dd403d8 100644 --- a/packages/paddlejs-examples/humanStream/README.md +++ b/packages/paddlejs-examples/humanStream/README.md @@ -53,3 +53,9 @@ npm 库 [@paddlejs-models/humanseg](https://github.com/PaddlePaddle/Paddle.js/tr ## 3.5 loading什么时候消失？ 模型第一次加载会有预热，导致第一次加载时间比较长，加载完成会自动去除loading，如长时间loading未消失，可在控制台查看是否环境有问题，导致无法调起摄像头。 + +## 4. 在线体验 + +弹幕效果：https://paddlejs.baidu.com + +视频流效果：https://paddlejs.baidu.com/humanStream diff --git a/packages/paddlejs-examples/humanseg/README.md b/packages/paddlejs-examples/humanseg/README.md index a0038c02..66f202b4 100644 --- a/packages/paddlejs-examples/humanseg/README.md +++ b/packages/paddlejs-examples/humanseg/README.md @@ -51,3 +51,10 @@ const canvas3 = document.getElementById('mask') as HTMLCanvasElement; await humanseg.drawMask(input, canvas3, back_canvas); ``` + +# Online experience + +https://paddlejs.baidu.com/humanseg + +# Performance +humanseg diff --git a/packages/paddlejs-examples/humanseg/README_cn.md b/packages/paddlejs-examples/humanseg/README_cn.md index 65f41e02..0ca943c0 100644 --- a/packages/paddlejs-examples/humanseg/README_cn.md +++ b/packages/paddlejs-examples/humanseg/README_cn.md @@ -49,3 +49,13 @@ const canvas3 = document.getElementById('mask') as HTMLCanvasElement; await humanseg.drawMask(input, canvas3, back_canvas); ``` + +# 在线体验 + +https://paddlejs.baidu.com/humanseg + +# 效果 +humanseg + + + diff --git a/packages/paddlejs-examples/mobilenet/README.md b/packages/paddlejs-examples/mobilenet/README.md new file mode 100644 index 00000000..e2adc910 --- /dev/null +++ b/packages/paddlejs-examples/mobilenet/README.md @@ -0,0 +1,42 @@ +[中文版](./README_cn.md) + +# mobilenet + +mobilenet model can classify img. It provides simple interfaces to use. You can use your own category model to classify img. + +# Setup +``` +npm install +``` + +### Compiles and hot-reloads for development +``` +npm run dev +``` + +# Usage + +```js + +import * as mobilenet from '@paddlejs-models/mobilenet'; + +// You need to specify your model path and the binary file count +// If your has mean and std params, you need to specify them. +// map is the results your model can classify. +await mobilenet.load({ + path, + mean: [0.485, 0.456, 0.406], + std: [0.229, 0.224, 0.225] +}, map); + +// get the result the mobilenet model classified. +const res = await mobilenet.classify(img); + +``` + +# Online experience + +mobileNet：https://paddlejs.baidu.com/mobilenet + +# Performance +image diff --git a/packages/paddlejs-examples/mobilenet/README_cn.md b/packages/paddlejs-examples/mobilenet/README_cn.md new file mode 100644 index 00000000..da5f4344 --- /dev/null +++ b/packages/paddlejs-examples/mobilenet/README_cn.md @@ -0,0 +1,41 @@ +[English](./README.md) + +# mobilenet + +mobilenet 模型可以对图片进行分类，提供的接口简单，使用者传入自己的分类模型去分类。 + +# 安装 +``` +npm install +``` + +### 编译 +``` +npm run dev +``` + +# 使用 + +```js +import * as mobilenet from '@paddlejs-models/mobilenet'; + +// 使用者需要提供分类模型的地址和二进制参数文件个数，且二进制参数文件，参考 chunk_1.dat、chunk_2.dat，... +// 模型参数支持 mean 和 std。如果没有，则不需要传 +// 还需要传递分类映射文件 +await mobilenet.load({ + path, + fileCount: 4, + mean: [0.485, 0.456, 0.406], + std: [0.229, 0.224, 0.225] +}, map); + +// 获取图片分类结果 +const res = await mobilenet.classify(img); + +``` +# 在线体验 + +1000物品识别：https://paddlejs.baidu.com/mobilenet + +# 效果 +image diff --git a/packages/paddlejs-examples/ocr/README.md b/packages/paddlejs-examples/ocr/README.md index 9d6eff0f..d622bfdc 100644 --- a/packages/paddlejs-examples/ocr/README.md +++ b/packages/paddlejs-examples/ocr/README.md @@ -48,3 +48,10 @@ console.log(res.text); // text area points console.log(res.points); ``` + +# Online experience + +https://paddlejs.baidu.com/ocr + +# Performance +ocr diff --git a/packages/paddlejs-examples/ocr/README_cn.md b/packages/paddlejs-examples/ocr/README_cn.md index e63c644f..f8edd08a 100644 --- a/packages/paddlejs-examples/ocr/README_cn.md +++ b/packages/paddlejs-examples/ocr/README_cn.md @@ -47,3 +47,10 @@ console.log(res.text); // 文本区域坐标 console.log(res.points); ``` + +# 在线体验 + +https://paddlejs.baidu.com/ocr + +# 效果 +ocr diff --git a/packages/paddlejs-examples/ocrdetection/README.md b/packages/paddlejs-examples/ocrdetection/README.md index da392b9f..e8b63782 100644 --- a/packages/paddlejs-examples/ocrdetection/README.md +++ b/packages/paddlejs-examples/ocrdetection/README.md @@ -32,3 +32,10 @@ await ocr.load(); const res = await ocr.detect(img); ``` + +# Online experience + +https://paddlejs.baidu.com/ocrdet + +# Performance +image diff --git a/packages/paddlejs-examples/ocrdetection/README_cn.md b/packages/paddlejs-examples/ocrdetection/README_cn.md index b2f428d7..29e0ed02 100644 --- a/packages/paddlejs-examples/ocrdetection/README_cn.md +++ b/packages/paddlejs-examples/ocrdetection/README_cn.md @@ -31,3 +31,10 @@ await ocr.load(); const res = await ocr.detect(img); ``` + +# 在线体验 + +https://paddlejs.baidu.com/ocrdet + +# 效果 +image diff --git a/packages/paddlejs-examples/wine/README.md b/packages/paddlejs-examples/wine/README.md new file mode 100644 index 00000000..6462bf1d --- /dev/null +++ b/packages/paddlejs-examples/wine/README.md @@ -0,0 +1,44 @@ +[中文版](./README_cn.md) + +# wine + +Wine is a wine bottle recognition module. Based on mobilenetv2 model, users need to input the model file path and classification mapping file to obtain the classification results. + +# Setup +``` +npm install +``` + +### Compiles and hot-reloads for development +``` +npm run dev +``` + +### Compiles and minifies for production +``` +npm run build +``` + +# Usage + +```js +import * as mobilenet from '@paddlejs-models/mobilenet'; + +// model load +const path = 'https://paddlejs.bj.bcebos.com/models/fuse/mobilenet/wine_fuse_activation/model.json'; +await mobilenet.load({ + path, + mean: [0.485, 0.456, 0.406], + std: [0.229, 0.224, 0.225] +}, map); + +// get classification results +const res = await mobilenet.classify(img); + +``` +# Online experience + +wine：https://paddlejs.baidu.com/wine + +# Performance +wine diff --git a/packages/paddlejs-examples/wine/README_cn.md b/packages/paddlejs-examples/wine/README_cn.md new file mode 100644 index 00000000..8707db1d --- /dev/null +++ b/packages/paddlejs-examples/wine/README_cn.md @@ -0,0 +1,45 @@ +[English](./README.md) + +# wine + +wine 为酒瓶识别模块，基于 MobileNetV2 model，使用者需传入模型文件路径和分类映射文件，即可获得分类结果。 + +# 安装 +``` +npm install +``` + +### 编译 +``` +npm run dev +``` + +### 构建 +``` +npm run build +``` + +# 使用 + +```js +import * as mobilenet from '@paddlejs-models/mobilenet'; + +// 模型加载 +const path = 'https://paddlejs.bj.bcebos.com/models/fuse/mobilenet/wine_fuse_activation/model.json'; +await mobilenet.load({ + path, + mean: [0.485, 0.456, 0.406], + std: [0.229, 0.224, 0.225] +}, map); + +// 获取分类结果 +const res = await mobilenet.classify(img); + +``` +# 在线体验 + +酒瓶识别：https://paddlejs.baidu.com/wine + +# 效果 +wine + diff --git a/packages/paddlejs-examples/wine/page.vue b/packages/paddlejs-examples/wine/page.vue index 251c4a23..69ba07a9 100644 --- a/packages/paddlejs-examples/wine/page.vue +++ b/packages/paddlejs-examples/wine/page.vue @@ -52,7 +52,6 @@ export default { this.isPredicting = false; }, async load() { - // const path = 'https://paddlejs.cdn.bcebos.com/models/wine'; const path = 'https://paddlejs.bj.bcebos.com/models/fuse/mobilenet/wine_fuse_activation/model.json'; await mobilenet.load({ path, diff --git a/packages/paddlejs-models/gesture/README.md b/packages/paddlejs-models/gesture/README.md index ff3413f5..c191d147 100644 --- a/packages/paddlejs-models/gesture/README.md +++ b/packages/paddlejs-models/gesture/README.md @@ -29,3 +29,10 @@ await gesture.load(); const res = await gesture.classify(img); ``` + +# Online experience + +https://paddlejs.baidu.com/gesture + +# Performance +gesture diff --git a/packages/paddlejs-models/gesture/README_cn.md b/packages/paddlejs-models/gesture/README_cn.md index 6392e6ab..82fead85 100644 --- a/packages/paddlejs-models/gesture/README_cn.md +++ b/packages/paddlejs-models/gesture/README_cn.md @@ -27,3 +27,12 @@ await gesture.load(); const res = await gesture.classify(img); ``` + +# 在线体验 + +https://paddlejs.baidu.com/gesture + +# 效果 +gesture + + diff --git a/packages/paddlejs-models/humanseg/README.md b/packages/paddlejs-models/humanseg/README.md index 525400ef..440a0c3b 100644 --- a/packages/paddlejs-models/humanseg/README.md +++ b/packages/paddlejs-models/humanseg/README.md @@ -84,6 +84,12 @@ await humanseg.drawMask(input, canvas3, back_canvas); ``` +# Online experience + +image human segmentation：https://paddlejs.baidu.com/humanseg + +video-streaming human segmentation：https://paddlejs.baidu.com/humanStream + # Performance @@ -94,4 +100,4 @@ await humanseg.drawMask(input, canvas3, back_canvas);

-

\ No newline at end of file +

diff --git a/packages/paddlejs-models/humanseg/README_cn.md b/packages/paddlejs-models/humanseg/README_cn.md index 5b45cfdb..69d55d30 100644 --- a/packages/paddlejs-models/humanseg/README_cn.md +++ b/packages/paddlejs-models/humanseg/README_cn.md @@ -82,6 +82,12 @@ await humanseg.drawMask(input, canvas3, back_canvas); ``` +# 在线体验 + +图片人像分割：https://paddlejs.baidu.com/humanseg + +基于视频流人像分割：https://paddlejs.baidu.com/humanStream + # 效果 从左到右：原图、背景虚化、背景替换、人型遮罩 @@ -94,4 +100,4 @@ await humanseg.drawMask(input, canvas3, back_canvas);

-

\ No newline at end of file +

diff --git a/packages/paddlejs-models/mobilenet/README.md b/packages/paddlejs-models/mobilenet/README.md index f4461d3d..3ae816e1 100644 --- a/packages/paddlejs-models/mobilenet/README.md +++ b/packages/paddlejs-models/mobilenet/README.md @@ -25,7 +25,6 @@ import * as mobilenet from '@paddlejs-models/mobilenet'; // map is the results your model can classify. await mobilenet.load({ path, - fileCount: 4, mean: [0.485, 0.456, 0.406], std: [0.229, 0.224, 0.225] }, map); @@ -33,4 +32,13 @@ await mobilenet.load({ // get the result the mobilenet model classified. const res = await mobilenet.classify(img); -``` \ No newline at end of file +``` + +# Online experience + +mobileNet：https://paddlejs.baidu.com/mobilenet + +wine：https://paddlejs.baidu.com/wine + +# Performance +image diff --git a/packages/paddlejs-models/mobilenet/README_cn.md b/packages/paddlejs-models/mobilenet/README_cn.md index e5752705..e1ef9efb 100644 --- a/packages/paddlejs-models/mobilenet/README_cn.md +++ b/packages/paddlejs-models/mobilenet/README_cn.md @@ -24,7 +24,6 @@ import * as mobilenet from '@paddlejs-models/mobilenet'; // 还需要传递分类映射文件 await mobilenet.load({ path, - fileCount: 4, mean: [0.485, 0.456, 0.406], std: [0.229, 0.224, 0.225] }, map); @@ -32,4 +31,12 @@ await mobilenet.load({ // 获取图片分类结果 const res = await mobilenet.classify(img); -``` \ No newline at end of file +``` +# 在线体验 + +1000物品识别：https://paddlejs.baidu.com/mobilenet + +酒瓶识别：https://paddlejs.baidu.com/wine + +# 效果 +image diff --git a/packages/paddlejs-models/ocr/README.md b/packages/paddlejs-models/ocr/README.md index 16ab2f3d..7d78077d 100644 --- a/packages/paddlejs-models/ocr/README.md +++ b/packages/paddlejs-models/ocr/README.md @@ -44,3 +44,10 @@ console.log(res.text); // text area points console.log(res.points); ``` + +# Online experience + +https://paddlejs.baidu.com/ocr + +# Performance +ocr diff --git a/packages/paddlejs-models/ocr/README_cn.md b/packages/paddlejs-models/ocr/README_cn.md index c151fa0c..cdfbe911 100644 --- a/packages/paddlejs-models/ocr/README_cn.md +++ b/packages/paddlejs-models/ocr/README_cn.md @@ -42,3 +42,10 @@ console.log(res.text); // 文本区域坐标 console.log(res.points); ``` + +# 在线体验 + +https://paddlejs.baidu.com/ocr + +# 效果 +ocr diff --git a/packages/paddlejs-models/ocrdetection/README.md b/packages/paddlejs-models/ocrdetection/README.md index 212ebf3b..2dd403a8 100644 --- a/packages/paddlejs-models/ocrdetection/README.md +++ b/packages/paddlejs-models/ocrdetection/README.md @@ -28,3 +28,10 @@ await ocr.load(); const res = await ocr.detect(img); ``` + +# Online experience + +https://paddlejs.baidu.com/ocrdet + +# Performance +image diff --git a/packages/paddlejs-models/ocrdetection/README_cn.md b/packages/paddlejs-models/ocrdetection/README_cn.md index 3e5bdb4d..fb901986 100644 --- a/packages/paddlejs-models/ocrdetection/README_cn.md +++ b/packages/paddlejs-models/ocrdetection/README_cn.md @@ -26,3 +26,11 @@ await ocr.load(); const res = await ocr.detect(img); ``` + +# 在线体验 + +https://paddlejs.baidu.com/ocrdet + +# 效果 +image +