579
edits
No edit summary |
No edit summary |
||
Line 350: | Line 350: | ||
var show_inceptionv1 = document.getElementById('show_inceptionv1'); | var show_inceptionv1 = document.getElementById('show_inceptionv1'); | ||
show_inceptionv1.onclick = function () { | show_inceptionv1.onclick = function () { | ||
view_fps.setColumns([0,1 | view_fps.setColumns([0,1]); | ||
view_fps.hideColumns([4,5,6 | view_fps.hideColumns([2, 3, 4, 5, 6]); | ||
materialChart_fps.draw(view_fps, materialOptions); | materialChart_fps.draw(view_fps, materialOptions); | ||
} | } | ||
Line 765: | Line 765: | ||
</style> | </style> | ||
<div id=" | <div id="Buttons_Model_Onnxrt_Fps" style="margin: auto; width: 1300px; height: auto;"> | ||
<button class="button" id=" | <button class="button" id="show_inceptionv1_onnxrt_fps">Show InceptionV1 </button> | ||
<button class="button" id=" | <button class="button" id="show_inceptionv2_onnxrt_fps">Show InceptionV2 </button> | ||
<button class="button" id=" | <button class="button" id="show_inceptionv3_onnxrt_fps">Show InceptionV3 </button> | ||
<button class="button" id=" | <button class="button" id="show_inceptionv4_onnxrt_fps">Show InceptionV4 </button> | ||
<button class="button" id=" | <button class="button" id="show_tinyyolov2_onnxrt_fps">Show TinyYoloV2 </button> | ||
<button class="button" id=" | <button class="button" id="show_tinyyolov3_onnxrt_fps">Show TinyYoloV3 </button> | ||
</div> | </div> | ||
<br><br> | <br><br> | ||
<div id="chart_onnxrt" style="margin: auto; width: 800px; height: 500px;"></div> | <div id="chart_onnxrt" style="margin: auto; width: 800px; height: 500px;"></div> | ||
<br><br> | <br><br> | ||
<script> | <script> | ||
google.charts.load('current', {'packages':['corechart', 'bar']}); | google.charts.load('current', {'packages':['corechart', 'bar']}); | ||
google.charts.setOnLoadCallback( | google.charts.setOnLoadCallback(drawStuffFpsOnnxrt); | ||
function drawStuffFpsOnnxrt() { | |||
var onnxrt_chartDiv = document.getElementById('chart_onnxrt'); | |||
var | var table_backend_platform_onnxrt_fps = google.visualization.arrayToDataTable([ | ||
['Platform', //Colunm 0 | ['Platform', //Colunm 0 | ||
'InceptionV1 \n | 'InceptionV1 \n Tensorflow', //Colunm 1 | ||
' | 'InceptionV1 \n Tensorflow-Lite',//Colunm 2 | ||
' | 'InceptionV1 \n EdgeTPU', //Colunm 3 | ||
' | 'InceptionV2 \n Tensorflow', //Colunm 4 | ||
' | 'InceptionV2 \n Tensorflow-Lite',//Colunm 5 | ||
' | 'InceptionV2 \n EdgeTPU', //Colunm 6 | ||
'InceptionV3 \n Tensorflow', //Colunm 7 | |||
'InceptionV3 \n Tensorflow-Lite',//Colunm 8 | |||
'InceptionV3 \n EdgeTPU', //Colunm 9 | |||
'InceptionV4 \n Tensorflow', //Colunm 10 | |||
'InceptionV4 \n Tensorflow-Lite',//Colunm 11 | |||
[' | 'InceptionV4 \n EdgeTPU', //Colunm 12 | ||
[' | 'TinyYoloV2 \n Tensorflow', //Colunm 13 | ||
[' | 'TinyYoloV2 \n Tensorflow-Lite', //Colunm 14 | ||
[' | 'TinyYoloV2 \n EdgeTPU', //Colunm 15 | ||
[' | 'TinyYoloV3 \n Tensorflow', //Colunm 16 | ||
[' | 'TinyYoloV3 \n Tensorflow-Lite', //Colunm 17 | ||
'TinyYoloV3 \n EdgeTPU'], //Colunm 18 | |||
['x86', 63.747, 22.781, 0, 48.381, 14.164, 0, 20.482, 12.164, 0, 10.338, 10.164, 0, 24.255, 12.164, 0, 27.113, 10.164, 0], | |||
['x86+GPU', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //row 1 | |||
['TX2', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //row 2 | |||
['TX2-GPU', 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //row 3 | |||
['Coral', 0, 3.107, 0, 0, 2.311, 0, 0, 0.903, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], //row 4 | |||
['Coral+TPU', 0, 0, 41.489, 0, 0, 42.001, 0, 0, 15.232, 0, 0, 8.405, 0, 0, 0, 0, 0, 0] //row 5 | |||
]); | ]); | ||
var onnxrt_materialOptions = { | |||
width: 900, | |||
chart: { | |||
title: 'Model Vs Platform per backend', | |||
}, | |||
series: { | |||
}, | |||
axes: { | |||
y: { | |||
distance: {side: 'left',label: 'FPS'}, // Left y-axis. | |||
} | |||
} | |||
}; | |||
var materialChart_onnxrt_fps = new google.charts.Bar(onnxrt_chartDiv); | |||
view_onnxrt_fps = new google.visualization.DataView(table_backend_platform_onnxrt_fps); | |||
function drawMaterialChart() { | |||
var materialChart_onnxrt_fps = new google.charts.Bar(onnxrt_chartDiv); | |||
materialChart_onnxrt_fps.draw(table_backend_platform_onnxrt_fps, google.charts.Bar.convertOptions(onnxrt_materialOptions)); | |||
init_charts(); | |||
} | |||
function init_charts(){ | |||
view_onnxrt_fps.setColumns([0,1,2,3]); | |||
view_onnxrt_fps.hideColumns([4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]); | |||
materialChart_onnxrt_fps.draw(view_fps, onnxrt_materialOptions); | |||
} | |||
// REF_MODEL | |||
/*Select the Model that you want to show in the chart*/ | |||
var show_inceptionv1 = document.getElementById('show_inceptionv1'); | |||
show_inceptionv1.onclick = function () { | |||
view_fps.setColumns([0,1]); | |||
view_fps.hideColumns([2, 3, 4, 5, 6]); | |||
materialChart_fps.draw(view_fps, onnxrt_materialOptions); | |||
} | |||
var show_inceptionv2 = document.getElementById("show_inceptionv2"); | |||
show_inceptionv2.onclick = function() { | |||
view_fps.setColumns([0,4,5,6]); | |||
view_fps.hideColumns([1,2,3,7,8,9,10,11,12,13,14,15,16,17,18]); | |||
materialChart_fps.draw(view_fps, onnxrt_materialOptions); | |||
} | |||
var show_inceptionv3 = document.getElementById('show_inceptionv3'); | |||
show_inceptionv3.onclick = function() { | |||
view_fps.setColumns([0,7,8,9]); | |||
view_fps.hideColumns([1,2,3,4,5,6,10,11,12,13,14,15,16,17,18]); | |||
materialChart_fps.draw(view_fps, onnxrt_materialOptions); | |||
} | |||
var show_inceptionv4 = document.getElementById("show_inceptionv4"); | |||
show_inceptionv4.onclick = function() { | |||
view_fps.setColumns([0,10,11,12]); | |||
view_fps.hideColumns([1,2,3,4,5,6,7,8,9,13,14,15,16,17,18]); | |||
materialChart_fps.draw(view_fps, onnxrt_materialOptions); | |||
} | |||
var show_tinyyolov2 = document.getElementById("show_tinyyolov2"); | |||
show_tinyyolov2.onclick = function() { | |||
view_fps.setColumns([0,13,14,15]); | |||
view_fps.hideColumns([1,2,3,4,5,6,7,8,9,10,11,12,16,17,18]); | |||
materialChart_fps.draw(view_fps, onnxrt_materialOptions); | |||
} | |||
var show_tinyyolov3 = document.getElementById("show_tinyyolov3"); | |||
show_tinyyolov3.onclick = function() { | |||
view_fps.setColumns([0,16,17,18]); | |||
view_fps.hideColumns([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]); | |||
materialChart_fps.draw(view_fps, onnxrt_materialOptions); | |||
} | |||
drawMaterialChart(); | |||
}; | |||
</script> | </script> | ||
</html> | </html> | ||
edits