diff --git a/web/README-2.md b/web/README-2.md new file mode 100644 index 0000000000000000000000000000000000000000..2b2d303b766cdc2b3ea214d0924875b17043fc40 --- /dev/null +++ b/web/README-2.md @@ -0,0 +1,46 @@ +[中文版](https://github.com/PaddlePaddle/Paddle-Lite/blob/develop/web/README_cn.md) + +# Web + +Web project is an open source deep learning framework designed to work on web browser. It could run on nearly every browser with WebGL support. + +## Key Features + +### Modular + +Web project is built on Atom system which is a versatile framework to support GPGPU operation on WebGL. It is quite modular and could be used to make computation tasks faster by utilizing WebGL. + +### High Performance + +Web project could run TinyYolo model in less than 30ms on chrome. This is fast enough to run deep learning models in many realtime scenarios. + +### Browser Coverage + +* PC: Chrome +* Mac: Chrome +* Android: Baidu App and QQ Browser + +## How To Build & Deploy Demo + +```bash +cd web # enter root directory for web project +npm i # install dependencies for npm +mkdir dist # create deployment directory +cd dist # enter deployment directory +git clone https://github.com/DerekYangMing/Paddle-Web-Models.git # get models +mv Paddle-Web-Models/separablemodel . # move models to specific directory +cd .. # return to root directory for web project +npm run testVideoDemo # start demo +``` + +## How To Preview Demo + +1. Open chrome with url: https://localhost:8123/ +2. Start demo by pressing the 【start detection】 button. +3. Ensure at least one face is recorded by the camera. The face detection rectangle should be displayed if everything goes fine. + +## Feedback and Community Support + +- Questions, reports, and suggestions are welcome through Github Issues! +- Forum: Opinions and questions are welcome at our [PaddlePaddle Forum](https://ai.baidu.com/forum/topic/list/168)！ +- QQ group chat: 696965088 diff --git a/web/README.md b/web/README.md index 2b2d303b766cdc2b3ea214d0924875b17043fc40..2876d64915849eed9a16f17939ca01d63d3b38fc 100644 --- a/web/README.md +++ b/web/README.md @@ -2,7 +2,7 @@ # Web -Web project is an open source deep learning framework designed to work on web browser. It could run on nearly every browser with WebGL support. +Paddle.js is an Web project for Baidu Paddle, which is an an open source deep learning framework designed to work on web browser. Load a pretrained paddle.js SavedModel or Paddle Hub module into the browser and run inference through Paddle.js. It could run on nearly every browser with WebGL support. ## Key Features @@ -20,24 +20,93 @@ Web project could run TinyYolo model in less than 30ms on chrome. This is fast e * Mac: Chrome * Android: Baidu App and QQ Browser -## How To Build & Deploy Demo +### Supported operations + +Currently Paddle.js only supports a limited set of Paddle Ops. See the full list. If your model uses unsupported ops, the Paddle.js script will fail and produce a list of the unsupported ops in your model. Please file issues to let us know what ops you need support with. + +[Supported operations Pages](./src/factory/fshader/README.md) + + +## Loading and running in the browser + +If the original model was a SavedModel, use paddle.load(). ```bash -cd web # enter root directory for web project -npm i # install dependencies for npm -mkdir dist # create deployment directory -cd dist # enter deployment directory -git clone https://github.com/DerekYangMing/Paddle-Web-Models.git # get models -mv Paddle-Web-Models/separablemodel . # move models to specific directory -cd .. # return to root directory for web project -npm run testVideoDemo # start demo + + import * as tf from 'paddlejs'; + + + let feed = io.process({ + input: document.getElementById('image'), + params: { + gapFillWith: '#000', // What to use to fill the square part after zooming + targetSize: { + height: fw, + width: fh + }, + targetShape: [1, 3, fh, fw], // Target shape changed its name to be compatible with previous logic + // shape: [3, 608, 608], // Preset sensor shape + mean: [117.001, 114.697, 97.404], // Preset mean + // std: [0.229, 0.224, 0.225] // Preset std + } + }); + + const MODEL_CONFIG = { + dir: `/${path}/`, // model URL + main: 'model.json', // main graph + }; + + const paddle = new Paddle({ + urlConf: MODEL_CONFIG, + options: { + multipart: true, + dataType: 'binary', + options: { + fileCount: 1, // How many model have been cut + getFileName(i) { + return 'chunk_' + i + '.dat'; + } + } + } + }); + + model = await paddle.load(); + + // + let inst = model.execute({ + input: feed + }); + + // There should be a fetch execution call or a fetch output + let result = await inst.read(); + + ``` -## How To Preview Demo +Please see feed documentation for details. + +Please see fetch documentation for details. + + +## Run the converter script provided by the pip package: + +The converter expects a Paddlejs SavedModel, Paddle Hub module, Tpaddle.js JSON format for input. + + +## Web-friendly format + +The conversion script above produces 2 types of files: + + - model.json (the dataflow graph and weight manifest file) + - group1-shard\*of\* (collection of binary weight files) + + +## Preview Demo + +Paddle.js has some pre-converted models to Paddle.js format .There are some demos in the following URL, open a browser page with the demo. + +[Supported Demo Pages](./examples/README.md) -1. Open chrome with url: https://localhost:8123/ -2. Start demo by pressing the 【start detection】 button. -3. Ensure at least one face is recorded by the camera. The face detection rectangle should be displayed if everything goes fine. ## Feedback and Community Support diff --git a/web/README_cn 2.md b/web/README_cn 2.md index ef10c63bca928ced79fc6ec5091afd1b51d98d72..0d8e6a07601f08776f3778904e9543784cb82f45 100644 --- a/web/README_cn 2.md +++ b/web/README_cn 2.md @@ -1,6 +1,6 @@ # PaddleJS Examples -百度PaddleJS使用现成的 JavaScript 模型或转换 Paddle 模型以在浏览器中运行。 +百度PaddleJS使用现成的或者通过转换工具转换的 JavaScript 友好的paddle模型以在浏览器中运行，在浏览器中实现在线推理能力。 ## 演示