Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Aug 15, 2019. It is now read-only.

Commit 6a94672

Browse files
Add memory info to benchmarks page. (#1875)
FEATURE
1 parent 0d79535 commit 6a94672

File tree

1 file changed

+64
-26
lines changed

1 file changed

+64
-26
lines changed

‎benchmarks/index.html‎

Lines changed: 64 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -44,40 +44,40 @@
4444
font-size: 10px;
4545
}
4646

47-
#trendline-container svg {
47+
div[id*='trendline-container'] svg {
4848
overflow: visible;
4949
border-bottom: 1px solid #ccc;
5050
border-left: 1px solid #ccc;
5151
}
5252

53-
#trendline-container .label {
53+
div[id*='trendline-container'] .label {
5454
font-size: 14px;
5555
font-weight: bold;
5656
}
5757

58-
#trendline-container path {
58+
div[id*='trendline-container'] path {
5959
fill: none;
6060
stroke: #222;
6161
}
6262

63-
#trendline {
63+
.trendline {
6464
position: relative;
6565
margin-top: 20px;
6666
}
6767

68-
#trendline #yMax,
69-
#trendline #yMin {
68+
.trendline .yMax,
69+
.trendline .yMin {
7070
position: absolute;
7171
right: calc(100% + 6px);
7272
font-size: 11px;
7373
white-space: nowrap;
7474
}
7575

76-
#trendline #yMin {
76+
.trendline .yMin {
7777
bottom: 0;
7878
}
7979

80-
#trendline #yMax {
80+
.trendline .yMax {
8181
top: 0;
8282
}
8383

@@ -146,11 +146,31 @@ <h2>TensorFlow.js Model Benchmark</h2>
146146
<tbody>
147147
</tbody>
148148
</table>
149-
<div class="box" id="trendline-container">
150-
<div class="label"></div>
151-
<div id="trendline">
152-
<div id="yMax"></div>
153-
<div id="yMin">0 ms</div>
149+
<div class="box" id="perf-trendline-container">
150+
<div class="label">Inference times</div>
151+
<div class="trendline">
152+
<div class="yMax"></div>
153+
<div class="yMin"></div>
154+
<svg>
155+
<path></path>
156+
</svg>
157+
</div>
158+
</div>
159+
<div class="box" id="mem-trendline-container">
160+
<div class="label">Number of tensors</div>
161+
<div class="trendline">
162+
<div class="yMax"></div>
163+
<div class="yMin"></div>
164+
<svg>
165+
<path></path>
166+
</svg>
167+
</div>
168+
</div>
169+
<div class="box" id="bytes-trendline-container">
170+
<div class="label">Number of bytes used</div>
171+
<div class="trendline">
172+
<div class="yMax"></div>
173+
<div class="yMin"></div>
154174
<svg>
155175
<path></path>
156176
</svg>
@@ -322,7 +342,7 @@ <h2>TensorFlow.js Model Benchmark</h2>
322342
const modalDiv = document.getElementById('modal-msg');
323343
const timeTable = document.querySelector('#timings tbody');
324344
const envDiv = document.getElementById('env');
325-
let model, isAsync, predict;
345+
let model, isAsync, predict,chartWidth;
326346

327347
async function showMsg(message) {
328348
if (message != null) {
@@ -413,15 +433,30 @@ <h2>TensorFlow.js Model Benchmark</h2>
413433
appendRow(timeTable, 'Model load', printTime(elapsed));
414434
}
415435

436+
const chartHeight = 150;
437+
function populateTrendline(node, data, forceYMinToZero = false, yFormatter = d => d) {
438+
node.querySelector("svg").setAttribute("width", chartWidth);
439+
node.querySelector("svg").setAttribute("height", chartHeight);
440+
441+
const yMax = Math.max(...data);
442+
const yMin = forceYMinToZero ? 0 : Math.min(...data);
443+
444+
node.querySelector(".yMin").textContent = yFormatter(yMin);
445+
node.querySelector(".yMax").textContent = yFormatter(yMax);
446+
447+
const xIncrement = chartWidth / (data.length - 1);
448+
node.querySelector("path")
449+
.setAttribute("d", `M${data.map((d, i) => `${i * xIncrement},${chartHeight - ((d - yMin) / (yMax - yMin)) * chartHeight}`).join('L')}`);
450+
}
451+
416452
async function measureAveragePredictTime() {
417-
document.querySelector("#trendline-container .label").textContent = `Inference times over ${state.numRuns} runs`;
418453
await showMsg(`Running predict ${state.numRuns} times`);
419-
const chartHeight = 150;
420-
const chartWidth = document.querySelector("#trendline-container").getBoundingClientRect().width;
421-
document.querySelector("#trendline-container svg").setAttribute("width", chartWidth);
422-
document.querySelector("#trendline-container svg").setAttribute("height", chartHeight);
454+
chartWidth = document.querySelector("#perf-trendline-container").getBoundingClientRect().width;
423455

424456
const times = [];
457+
const numTensors = [];
458+
const numBytes = [];
459+
425460
for (let i = 0; i < state.numRuns; i++) {
426461
const start = performance.now();
427462
let res = predict(model);
@@ -434,18 +469,21 @@ <h2>TensorFlow.js Model Benchmark</h2>
434469
}
435470

436471
times.push(performance.now() - start);
472+
const memInfo = tf.memory();
473+
numTensors.push(memInfo.numTensors);
474+
numBytes.push(memInfo.numBytes);
437475
}
438476

439-
const average = times.reduce((acc, curr) => acc + curr, 0) / times.length;
440-
const max = Math.max(...times);
441-
const min = Math.min(...times);
442-
const xIncrement = chartWidth / times.length;
477+
const forceInferenceTrendYMinToZero = true;
478+
populateTrendline(document.querySelector("#perf-trendline-container"), times, forceInferenceTrendYMinToZero, printTime);
479+
populateTrendline(document.querySelector("#mem-trendline-container"), numTensors);
443480

444-
document.querySelector("#trendline-container #yMax").textContent = printTime(max);
445-
document.querySelector("#trendline-container path")
446-
.setAttribute("d", `M${times.map((d, i) => `${i * xIncrement},${chartHeight - (d / max) * chartHeight}`).join('L')}`);
481+
const forceBytesTrendlineYMinToZero = false;
482+
populateTrendline(document.querySelector("#bytes-trendline-container"), numBytes, forceBytesTrendlineYMinToZero, d => `${(d / 1e6).toPrecision(3)}MB`);
447483

448484
await showMsg(null);
485+
const average = times.reduce((acc, curr) => acc + curr, 0) / times.length;
486+
const min = Math.min(...times);
449487
appendRow(timeTable, `Subsequent average (${state.numRuns} runs)`, printTime(average));
450488
appendRow(timeTable, 'Best time', printTime(min));
451489
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /