Merge pull request #28 from wangqunbaidu/master

[change]修复版本bug

examples/benchmark/config.vue

@@ -147,7 +147,7 @@ export default Vue.extend({
                 {name: 'preheat time', t: this.preheatT},
                 {name: 'subsequent average time', t: this.remainOthersT},
                 {name: 'best time', t: this.bestT},
-                {name: 'op count', t: this.opCount}
+                {name: 'op count', t: this.opCount || '暂无'}
             ]
         }
     },
@@ -217,17 +217,14 @@ export default Vue.extend({
                     // this.remainOthersT = +(remainWholeT / (curTimes - 2).toFixed(4));
 
                 const {queryList} = this.paddle.model.graph;
+
+
+                if (queryList && queryList.length) {
                     const quertyResults = this.query(queryList);
+
                     if (!opCount) {
                         opCount = quertyResults.length;
                     }
-
-                progress.push({
-                    index: curTimes,
-                    time: t,
-                    name: 'total'
-                });
-
                     for (let item of quertyResults) {
                         progress.push({
                             index: curTimes,
@@ -236,10 +233,16 @@ export default Vue.extend({
                         });
                     }
 
+                    ops.push(this.getOpPerf(quertyResults, this.aggregate, {}, true));
+                }
 
-                totaltimeList.push(t);
+                progress.push({
+                    index: curTimes,
+                    time: t,
+                    name: 'total'
+                });
 
-                ops.push(this.getOpPerf(quertyResults, this.aggregate, {}, true));
+                totaltimeList.push(t);
                 curTimes++;
             }
 
@@ -247,16 +250,20 @@ export default Vue.extend({
             totaltimeList.sort((a, b) => a - b);
             this.bestT = totaltimeList[0];
 
-            const opInfos = this.getOpPerf(ops, this.merge);
-            this.opCount = opCount;
             this.remainOthersT = (remainWholeT / this.times).toFixed(4);
             this.progress = progress;
+
+            if (ops && ops.length) {
+                const opInfos = this.getOpPerf(ops, this.merge);
+                this.opCount = opCount;
                 this.ops = Object.keys(opInfos).map(opname => {
                     return {
                         name: opname,
                         time: opInfos[opname].time
                     };
                 });
+            }
+
             this.stage = 4;
         },
         async run() {

examples/mobileNet/index.es6

 import 'babel-polyfill';
 import Paddle from '../../src/paddle/paddle';
-import IO from '../../src/feed/imageFeed';
+import IO from '../../src/feed/ImageFeed';
 import Utils from '../../src/utils/utils';
 // 获取map表
-import Map from '../../test/data/map';
-
+// import Map from '../../test/data/map';
+let map = {};
 const fileDownload = require('js-file-download');
 
 /**
@@ -33,6 +33,9 @@ const outputShape = fetchShape[modelType];
 let loaded = false;
 let model = {};
 window.statistic = [];
+let loading = document.getElementsByClassName('data-loading');
+let modelTxt = document.getElementById('model-txt');
+
 async function run(input) {
     // const input = document.getElementById('mobilenet');
     const io = new IO();
@@ -54,19 +57,25 @@ async function run(input) {
     const path = 'https://paddlejs.cdn.bcebos.com/models/mobileNetV2';
 
     if (!loaded) {
+
+        fetch(path + '/map.json')
+            .then(response => response.json())
+            .then(data => (map = data));
         const MODEL_CONFIG = {
             dir: `${path}/`, // 存放模型的文件夹
             main: 'model.json', // 主文件
         };
         loaded = true;
+        modelTxt.style.visibility = 'visible';
+        loading[0].style.visibility = 'visible';
         const paddle = new Paddle({
             urlConf: MODEL_CONFIG,
             options: {
                 multipart: true,
                 dataType: 'binary',
                 options: {
-                    fileCount: 4, // 切成了多少文件
-                    getFileName(i) { // 获取第i个文件的名称
+                    // fileCount: 4, // 切成了多少文件
+                    getFileName(i) { // 自定义chunk文件名，获取第i个文件的名称
                         return 'chunk_' + i + '.dat';
                     }
                 },
@@ -74,14 +83,20 @@ async function run(input) {
             }
         });
         model = await paddle.load();
+        loading[0].style.visibility = 'hidden';
+        modelTxt.innerText = '模型加载完成！';
     }
-
+    loading[1].style.visibility = 'visible';
+    loading[2].style.visibility = 'visible';
+    window.statistic.startTime = (+new Date());
     let inst = model.execute({
         input: feed
     });
 
     let result = await inst.read();
-
+    loading[1].style.visibility = 'hidden';
+    loading[2].style.visibility = 'hidden';
+    window.statistic.endTime = (+new Date()) - window.statistic.startTime;
     let N = outputShape[0];
     let C = outputShape[1];
     let H = outputShape[2];
@@ -98,8 +113,9 @@ async function run(input) {
 
     let maxItem = Utils.getMaxItem(nchwData);
     console.log(maxItem);
-    document.getElementById('txt').innerHTML = Map['' + maxItem.index];
-    console.log('识别出的结果是' + Map['' + maxItem.index]);
+    document.getElementById('txt').innerHTML = map['' + maxItem.index];
+    document.getElementById('all-performance-time').innerHTML = '计算时间是' + window.statistic.endTime;
+    console.log('识别出的结果是' + map['' + maxItem.index]);
 };
 var image = '';
 function selectImage(file) {

examples/mobileNet/index.html

@@ -3,12 +3,107 @@
     <head>
         <meta charset="utf-8">
         <title>paddle web demo</title>
-        <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/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;
+        }
+        @-webkit-keyframes spin {
+            from {
+                -webkit-transform: rotate(0deg);
+            }
+            to {
+                -webkit-transform: rotate(360deg);
+            }
+        }
+        @keyframes spin {
+            from {
+                transform: rotate(0deg);
+            }
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        .data-loading {
+            visibility: hidden;
+            -webkit-animation: spin 1s linear 1s 5 alternate;
+                    animation: spin 1s linear infinite;
+        }
+        #model-txt {
+            visibility: hidden;
+        }
+        </style>
     </head>
     <body>
-        <img id="image" src="https://m.baidu.com/se/static/img/iphone/logo.png" style="max-width: 100%;">
-        <input type="file" id="uploadImg">
-        <div id="txt"></div>
+        <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>
+                                    <p id="model-txt">模型加载中.</p>
+                                    <div class="glyphicon glyphicon-refresh data-loading"></div>
+                                    <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 class="glyphicon glyphicon-refresh data-loading"></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 class="glyphicon glyphicon-refresh data-loading"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <script src="index.es6"></script>
     </body>
 </html>
\ No newline at end of file

src/feed/ImageFeed.es6

@@ -170,21 +170,11 @@ export default class imageFeed {
         // 原始图片宽高
         const width = this.pixelWidth;
         const height = this.pixelHeight;
-        // 缩放后的宽高
+        // Resize后的宽高
         let sw = width;
         let sh = height;
-        // 最小边缩放到scale
-        if (width < height) {
-            sw = params.scale || width;
-            sh = Math.round(sw * height / width);
-        }
-        else if (width > height){
-            sh = params.scale || height;
-            sw = Math.round(sh * width / height);
-        }
-        else {
-            sw = sh = params.scale || width;
-        }
+        // 直接Resize
+        sw = sh = params.scale ;
 
         this.fromPixels2DContext.canvas.width = sw;
         this.fromPixels2DContext.canvas.height = sh;

src/graph/graph.es6

@@ -32,6 +32,7 @@ export default class Graph {
         // 网络层数
         this.iLayer = 0;
         this.queryList = [];
+        this.glVersion = 2;
 
         if (this.options && this.options.options ) {
             if (this.options.options.test === true) {
@@ -46,7 +47,8 @@ export default class Graph {
         if (!this.inst) {
             // op runner
             this.inst = new Runtime(this.options.options);
-            factory.setWebglVersion(this.inst.getWebglVersion());
+            this.glVersion = this.inst.getWebglVersion();
+            factory.setWebglVersion(this.glVersion);
             factory.setIsFrameBufferSupportFloat(this.inst.getIsFrameBufferSupportFloat());
             Utils.setTextureMaxSize(this.inst.getWebglMaxTextureSize());
 
@@ -95,13 +97,15 @@ export default class Graph {
         }
 
         const gl = this.inst.gpu.gl;
-        let query = Utils.beginQuery(gl);
+        let query = Utils.beginQuery(gl, this.glVersion);
 
         opindex++;
         executor.execute(this.inst, this.isExecuted);
 
+        if (query) {
             this.queryList.push({name: executor.type, query, count: 1});
-        query = Utils.endQuery(gl, query);
+            query = Utils.endQuery(gl,this.glVersion, query);
+        }
 
         if (false && executor.opData && opindex >= 184){
             console.log('return!');

src/utils/utils.es6

@@ -15,7 +15,8 @@ export default {
         // Return milliseconds.
         return timeElapsedNanos;
     },
-    beginQuery(gl) {
+    beginQuery(gl, glVersion) {
+        if (glVersion === 2) {
             const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
             if (!ext) {
                 return;
@@ -23,13 +24,17 @@ export default {
             const query = gl.createQuery();
             gl.beginQuery(ext.TIME_ELAPSED_EXT, query);
             return query;
+        }
+        return null;
     },
-    endQuery(gl, query) {
+    endQuery(gl, glVersion, query) {
+        if (glVersion === 2) {
             const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2');
             if (!ext) {
                 return;
             }
             gl.endQuery(ext.TIME_ELAPSED_EXT);
+        }
         return query;
     },
     // todo: 适用2维矩阵乘法，以后实现通用版本