diff --git a/examples/benchmark/config.vue b/examples/benchmark/config.vue index 04eb23eafe72775d735a57db60140152844efd63..f6bfed4de348f4c7853a27e43c00b9ab3d8973da 100644 --- a/examples/benchmark/config.vue +++ b/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,9 +217,23 @@ export default Vue.extend({ // this.remainOthersT = +(remainWholeT / (curTimes - 2).toFixed(4)); const {queryList} = this.paddle.model.graph; - const quertyResults = this.query(queryList); - if (!opCount) { - opCount = quertyResults.length; + + + if (queryList && queryList.length) { + const quertyResults = this.query(queryList); + + if (!opCount) { + opCount = quertyResults.length; + } + for (let item of quertyResults) { + progress.push({ + index: curTimes, + time: item.time, + name: item.name + }); + } + + ops.push(this.getOpPerf(quertyResults, this.aggregate, {}, true)); } progress.push({ @@ -228,18 +242,7 @@ export default Vue.extend({ name: 'total' }); - for (let item of quertyResults) { - progress.push({ - index: curTimes, - time: item.time, - name: item.name - }); - } - - totaltimeList.push(t); - - ops.push(this.getOpPerf(quertyResults, this.aggregate, {}, true)); 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; - this.ops = Object.keys(opInfos).map(opname => { - return { - name: opname, - time: opInfos[opname].time - }; - }); + + 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() { diff --git a/examples/mobileNet/index.es6 b/examples/mobileNet/index.es6 index 7c4411f398827810c8f58eae50a3e2ef8653b821..86a0361d3c4c3f0d281ca693aa3be6c87114bca6 100644 --- a/examples/mobileNet/index.es6 +++ b/examples/mobileNet/index.es6 @@ -1,10 +1,10 @@ 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) { diff --git a/examples/mobileNet/index.html b/examples/mobileNet/index.html index b7f89d39eacd0905b5226e79b438835a891a7365..fd2ea2048efea0074b1b16dd33a54027a2d1de60 100644 --- a/examples/mobileNet/index.html +++ b/examples/mobileNet/index.html @@ -3,12 +3,107 @@ paddle web demo - + + + - - -
+
+
+
+
paddleJS Demo Page
+
+
+
+
+
+
+ +
+
+
+
+
操作面板：
+

点击按钮，选择图片触发计算.

+

模型加载中.

+
+
+ Responsive image +
+
+
+
+
+ +
+
+
+
+
预测结果：
...
+
+
+
+
+
+ +
+
+
+
+
性能分析：
...
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/feed/ImageFeed.es6 b/src/feed/ImageFeed.es6 index 596c9b1a832da41a265fbfdf3bd93999b34f6f15..15109afbc455e585a8a1a53898d53c8c917fd9a6 100644 --- a/src/feed/ImageFeed.es6 +++ b/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; diff --git a/src/graph/graph.es6 b/src/graph/graph.es6 index 185cd89fad631fe943f66c51c02519cf0f313fd5..2be28c5f6514bb1f33bbdc4ca8ac09053c2ed0b9 100644 --- a/src/graph/graph.es6 +++ b/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); - this.queryList.push({name: executor.type, query, count: 1}); - query = Utils.endQuery(gl, query); + if (query) { + this.queryList.push({name: executor.type, query, count: 1}); + query = Utils.endQuery(gl,this.glVersion, query); + } if (false && executor.opData && opindex >= 184){ console.log('return!'); diff --git a/src/utils/utils.es6 b/src/utils/utils.es6 index 95a10ed4f69ce78a1b652430771589a253df902e..9fed1e4a9e91c4a292a1c6ef009c52c5a8afc721 100644 --- a/src/utils/utils.es6 +++ b/src/utils/utils.es6 @@ -15,21 +15,26 @@ export default { // Return milliseconds. return timeElapsedNanos; }, - beginQuery(gl) { - const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2'); - if (!ext) { - return; + beginQuery(gl, glVersion) { + if (glVersion === 2) { + const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2'); + if (!ext) { + return; + } + const query = gl.createQuery(); + gl.beginQuery(ext.TIME_ELAPSED_EXT, query); + return query; } - const query = gl.createQuery(); - gl.beginQuery(ext.TIME_ELAPSED_EXT, query); - return query; + return null; }, - endQuery(gl, query) { - const ext = gl.getExtension('EXT_disjoint_timer_query_webgl2'); - if (!ext) { - return; + 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); } - gl.endQuery(ext.TIME_ELAPSED_EXT); return query; }, // todo: 适用2维矩阵乘法，以后实现通用版本