Merge pull request PaddlePaddle#49 from changy1105/beta

refactor(examples): add mobileNet
LeHuth · Dec 31, 2020 · 88c5a88 · 88c5a88
2 parents ebd6721 + c357a33
commit 88c5a88
Show file tree

Hide file tree

Showing 9 changed files with 1,287 additions and 0 deletions.
diff --git a/packages/paddlejs-examples/mobileNet/data/map.json b/packages/paddlejs-examples/mobileNet/data/map.json
diff --git a/packages/paddlejs-examples/mobileNet/img/banana.jpeg b/packages/paddlejs-examples/mobileNet/img/banana.jpeg
diff --git a/packages/paddlejs-examples/mobileNet/img/car.jpg b/packages/paddlejs-examples/mobileNet/img/car.jpg
diff --git a/packages/paddlejs-examples/mobileNet/img/mayon-volcano-erupt.jpg b/packages/paddlejs-examples/mobileNet/img/mayon-volcano-erupt.jpg
diff --git a/packages/paddlejs-examples/mobileNet/index.html b/packages/paddlejs-examples/mobileNet/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>paddle web demo</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style>
+        .demo-nav {
+            background-color: #2932e1;
+            color: #fff;
+        }
+        .paddle-demo-card {
+            margin-right: 0;
+            margin-left: 0;
+            background-color: #fff;
+            border: 1px solid #ddd;
+        }
+        .infobox {
+            background-color: #fff;
+            border-radius: 6px;
+            margin-bottom: 30px;
+            padding: 20px;
+            position: relative;
+            min-height: 350px;
+            box-sizing: border-box;
+            color: #707070;
+        }
+        </style>
+    </head>
+    <body>
+        <header class="navbar navbar-static-top bs-docs-nav demo-nav">
+            <div class="container">
+                <div class="navbar-header">
+                    <div class="navbar-brand">paddleJS Demo Page</div>
+                </div>
+            </div>
+        </header>
+        <div class="container">
+            <div class="col-xs-12">
+                <div class="row">
+
+                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 continfobox">
+                        <div class="paddle-demo-card infobox text-center">
+                            <div class="flip-container">
+                                <div class="paddle-demo-block-wrapper">
+                                    <div class="h2">操作面板：</div><input type="file" id="uploadImg">
+                                    <p class="help-block">点击按钮，选择图片触发计算.</p>
+                                    <div class="paddle-demo-block-wrapper">
+                                        <img id="image" src="https://mms-voice.cdn.bcebos.com/mumstory/banana.jpg" style="height: 50px" alt="Responsive image">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 continfobox">
+                        <div class="paddle-demo-card infobox text-center">
+                            <div class="flip-container">
+                                <div class="paddle-demo-block-wrapper">
+                                    <div class="h2">预测结果：</div><div id="txt">...</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 continfobox">
+                        <div class="paddle-demo-card infobox text-center">
+                            <div class="flip-container">
+                                <div class="paddle-demo-block-wrapper">
+                                    <div class="h2">性能分析：</div><div id="all-performance-time">...</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
diff --git a/packages/paddlejs-examples/mobileNet/index.ts b/packages/paddlejs-examples/mobileNet/index.ts
@@ -0,0 +1,66 @@
+import { Runner } from '@paddlejs/paddlejs-core';
+import registerWebGLBackend from '@paddlejs/paddlejs-backend-webgl';
+import map from './data/map.json';
+// Register the WebGL backend to the global backend registry before initializing runner
+registerWebGLBackend();
+
+declare let window: Window & {
+    statistic: any
+};
+window.statistic = [];
+
+async function run(input: HTMLElement) {
+    const path = 'https://paddlejs.cdn.bcebos.com/models/mobileNetV2/model.json';
+    const runner = new Runner({
+        modelPath: path,
+        fileCount: 4,
+        feedShape: {
+            fw: 224,
+            fh: 224
+        },
+        fill: '#fff',
+        inputType: 'image',
+        targetSize: {
+            height: 224,
+            width: 224
+        },
+        mean: [0.485, 0.456, 0.406],
+        std: [0.229, 0.224, 0.225]
+    });
+    window.statistic.startTime = (+new Date());
+    await runner.init();
+    const res = await runner.predict(input);
+    window.statistic.endTime = (+new Date()) - window.statistic.startTime;
+    const maxItem = getMaxItem(res);
+    document.getElementById('txt')!.innerHTML = map['' + maxItem.index];
+    document.getElementById('all-performance-time')!.innerHTML = '计算时间是' + window.statistic.endTime;
+}
+
+// selectImage
+document.getElementById('uploadImg')!.onchange = function () {
+    selectImage(this);
+};
+
+function selectImage(file) {
+    if (!file.files || !file.files[0]) {
+        return;
+    }
+    const reader = new FileReader();
+    reader.onload = function (evt) {
+        const img = document.getElementById('image') as HTMLImageElement;
+        if (evt.target && typeof evt.target.result === 'string') {
+            img.src = evt.target.result;
+        }
+        img.onload = function () {
+            run(img);
+        };
+    };
+    reader.readAsDataURL(file.files[0]);
+}
+
+// 获取数组中的最大值和索引
+function getMaxItem(datas: number[] = []) {
+    const max: number = Math.max.apply(null, datas);
+    const index: number = datas.indexOf(max);
+    return { value: max, index };
+}
diff --git a/packages/paddlejs-examples/mobileNet/package.json b/packages/paddlejs-examples/mobileNet/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "mobilenet",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server",
+    "build": "webpack",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@paddlejs/paddlejs-backend-webgl": "0.0.2-beta.3",
+    "js-file-download": "^0.4.10",
+    "source-map-loader": "^2.0.0",
+    "vconsole": "^3.3.2"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.9.6",
+    "@babel/runtime": "^7.7.2",
+    "@paddlejs/paddlejs-core": "0.0.2-beta.9",
+    "babel-loader": "^8.2.2",
+    "clean-webpack-plugin": "^2.0.1",
+    "css-loader": "^2.1.1",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^26.0.1",
+    "js-file-download": "^0.4.10",
+    "@paddlejs/paddlejs-backend-webgl": "0.0.2-beta.3",
+    "ts-jest": "^26.4.4",
+    "ts-loader": "^8.0.12",
+    "typescript": "^3.9.5",
+    "url-loader": "^1.1.2",
+    "vconsole": "^3.3.2",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  }
+}
diff --git a/packages/paddlejs-examples/mobileNet/tsconfig.json b/packages/paddlejs-examples/mobileNet/tsconfig.json
@@ -0,0 +1,13 @@
+{
+    "extends": "../../../tsconfig",
+    "include": [
+        "index.ts"
+    ],
+    "exclude": [
+        "node_modules/"
+    ],
+    "compilerOptions": {
+        "outDir": "dist",
+        "types": ["jest", "node"]
+    }
+}
diff --git a/packages/paddlejs-examples/mobileNet/webpack.config.js b/packages/paddlejs-examples/mobileNet/webpack.config.js
@@ -0,0 +1,85 @@
+const path = require('path');
+const os = require('os');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+// 定义自动获取本地ip的方法开始
+function getNetworkIp() {
+    // 打开的host
+    let needHost = '';
+    try {
+        // 获得网络接口列表
+        const network = os.networkInterfaces();
+        for (const dev in network) {
+            const iface = network[dev];
+            for (let i = 0; i < iface.length; i++) {
+                const alias = iface[i];
+                if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {
+                    needHost = alias.address;
+                }
+            }
+        }
+    }
+    catch (e) {
+        needHost = 'localhost';
+    }
+    return needHost;
+}
+
+module.exports = {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    entry: './index.ts',
+    devServer: {
+        hot: true,
+        host: getNetworkIp(),
+        port: 9000
+    },
+    plugins: [
+        new CleanWebpackPlugin({
+            // 允许清除在当前脚本的工作目录外边的匹配的文件
+            dangerouslyAllowCleanPatternsOutsideProject: true
+        }),
+        new HtmlWebpackPlugin({
+            template: './index.html',
+            inject: 'body',
+            filename: 'index.html'
+        }),
+        new ExtractTextPlugin({
+            filename: 'index.css'
+        })
+    ],
+    resolve: {
+        // Add ".ts" and ".tsx" as resolvable extensions.
+        extensions: ['.ts', '.js', '.json']
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                loader: 'ts-loader',
+                exclude: /node_modules/
+            },
+            {
+                test: /\.(es6|js)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: 'babel-loader',
+                    options: {
+                        presets: ['@babel/preset-env'],
+                        plugins: ['@babel/transform-runtime']
+                    }
+                }
+            },
+            {
+                test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
+                loader: 'url-loader?limit=30000&name=[name].[ext]'
+            }
+        ]
+    },
+    output: {
+        filename: 'index.js',
+        path: path.resolve(__dirname, 'dist')
+    }
+};