Jump to content

GstInference/Benchmarks: Difference between revisions

Line 164: Line 164:
   </style>
   </style>
    
    
   <button class="button" id="addData">Show CPU </button>
   <button class="button" id="show_inceptionv1">Show InceptionV1 </button>
   <button class="button" id="showFPS">Show FPS </button>
   <button class="button" id="show_inceptionv2">Show InceptionV2 </button>
   <button class="button" id="reset">Show All</button>
   <button class="button" id="show_inceptionv3">Show InceptionV3 </button>
   Show InceptionV1: <input class="button" type="checkbox" id="myCheck" checked=true>
   <button class="button" id="show_inceptionv4">Show InceptionV4 </button>
  Show InceptionV2: <input  class="button" type="checkbox" id="myCheck2" checked=true>


<br><br>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
<br><br>
<button class="button" id="show_tensorflow">Show Tensorflow </button>
<button class="button" id="show_tflite">Show Tensorflow-Lite </button>
<div id="chart_div1" style="width: 800px; height: 500px;"></div>
<br><br>
<button class="button" id="show_x86">Show x86 </button>
<button class="button" id="show_x86_gpu">Show X86+GPU </button>
<button class="button" id="show_tx2">Show Tx2 </button>
<button class="button" id="show_tx2_gpu">Show TX2+GPU </button>
<button class="button" id="show_coral">Show Coral </button>
<button class="button" id="show_coral_tpu">Show Coral+TPU </button>
<div id="chart_div2" style="width: 800px; height: 500px;"></div>


<script>
<script>
Line 179: Line 190:
       function drawStuff() {
       function drawStuff() {


        var check_box2 = document.getElementById("myCheck2");
 
          check_box2.onchange = show_1;
 
          var check_box = document.getElementById("myCheck");
          check_box.onchange = show_0;
         var chartDiv = document.getElementById('chart_div');
         var chartDiv = document.getElementById('chart_div');
        var chartDiv1 = document.getElementById('chart_div1');
        var chartDiv2 = document.getElementById('chart_div2');


         var data = google.visualization.arrayToDataTable([
         var table_backend_platform = google.visualization.arrayToDataTable([
           ['Model', 'x86-FPS', 'Xavier-FPS', 'x64-CPU', 'Xavier-CPU'],
          ['Platform',
           ['InceptionV1', 20.164, 7.642, 48, 71],
          'InceptionV1 \n Tensorflow',
           ['InceptionV2', 14.821, 5.587, 44, 68],
          'InceptionV1 \n Tensorflow-Lite',
           ['InceptionV3', 6.086,  2.286, 50, 72],
          'InceptionV2 \n Tensorflow',
           ['InceptionV4', 2.977,  1.153, 50, 72],
          'InceptionV2 \n Tensorflow-Lite',
           ['TinyyoloV2',  9.111, 2.966, 47, 67],
          'InceptionV3 \n Tensorflow',
           ['TinyyoloV3',  10.286, 3.43, 45, 63]
          'InceptionV3 \n Tensorflow-Lite',
          'InceptionV4 \n Tensorflow',
          'InceptionV4 \n Tensorflow-Lite'],
          ['x86',      20.164, 19.545, 18.164, 17.642, 16.164, 15.642, 14.164, 13.642],
          ['x86+GPU',  25.821, 24.587, 23.164, 22.642, 21.164, 20.642, 19.164, 18.642],
          ['TX2',      24.821, 23.587, 22.164, 21.642, 20.164, 19.642, 18.164, 17.642],
          ['TX2-GPU',  27.821, 26.587, 25.164, 24.642, 23.164, 22.642, 21.164, 20.642],
          ['Coral',    16.111, 15.966, 14.164, 13.642, 12.164, 11.642, 10.164, 9.642],
          ['Coral+TPU', 18.111, 17.966, 16.164, 15.642, 14.164, 13.642, 12.164, 11.642]
        ]);
        var table_model_platform = google.visualization.arrayToDataTable([
           ['Model',
          'Tensorflow \n x86',
          'Tensorflow \n x86+GPU',
          'Tensorflow \n TX2',
          'Tensorflow \n TX2+GPU',
          'Tensorflow \n Coral',
          'Tensorflow \n Coral+TPU',
          'Tensorflow-Lite \n x86',
          'Tensorflow-Lite \n x86+GPU',
          'Tensorflow-Lite \n TX2',
          'Tensorflow-Lite \n TX2+GPU',
          'Tensorflow-Lite \n Coral',
          'Tensorflow-Lite \n Coral+TPU'],
           ['InceptionV1',   20.164, 25.642, 24.164, 27.642, 16.164, 18.642, 19.164, 24.642, 23.164, 26.642, 15.164, 17.642],
           ['InceptionV2',   18.821, 23.587, 22.164, 25.642, 14.164, 16.642, 17.164, 22.642, 21.164, 24.642, 13.164, 15.642],
           ['InceptionV3',   16.086,  21.286, 20.164, 23.642, 12.164, 14.642, 15.164, 20.642, 19.164, 22.642, 11.164, 13.642],
           ['InceptionV4',   14.977,  19.153, 18.164, 21.642, 10.164, 12.642, 13.164, 18.642, 17.164, 20.642, 9.164, 11.642]
        ]);
        var table_model_backend = google.visualization.arrayToDataTable([
        ['Model',
          'Tensorflow \n x86',
          'Tensorflow \n x86+GPU',
          'Tensorflow \n TX2',
          'Tensorflow \n TX2+GPU',
          'Tensorflow \n Coral',
          'Tensorflow \n Coral+TPU',
          'Tensorflow-Lite \n x86',
          'Tensorflow-Lite \n x86+GPU',
          'Tensorflow-Lite \n TX2',
          'Tensorflow-Lite \n TX2+GPU',
          'Tensorflow-Lite \n Coral',
          'Tensorflow-Lite \n Coral+TPU'],
          ['InceptionV1',  20.164, 25.642, 24.164, 27.642, 16.164, 18.642, 19.164, 24.642, 23.164, 26.642, 15.164, 17.642],
          ['InceptionV2',  18.821, 23.587, 22.164, 25.642, 14.164, 16.642, 17.164, 22.642, 21.164, 24.642, 13.164, 15.642],
           ['InceptionV3',  16.08621.286, 20.164, 23.642, 12.164, 14.642, 15.164, 20.642, 19.164, 22.642, 11.164, 13.642],
           ['InceptionV4',  14.97719.153, 18.164, 21.642, 10.164, 12.642, 13.164, 18.642, 17.164, 20.642, 9.164, 11.642]
         ]);
         ]);


Line 198: Line 255:
           width: 900,
           width: 900,
           chart: {
           chart: {
             title: 'Model performance',
            title: 'Backend Vs Platform per model',
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
          },
          axes: {
            y: {
              distance: {side: 'left',label: 'FPS'}, // Left y-axis.
            }
          }
        };
        var materialOptions1 = {
          width: 900,
          chart: {
             title: 'Model Vs Platform per backend',
          },
          series: {
            0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
          },
          axes: {
            y: {
              distance: {side: 'left',label: 'FPS'}, // Left y-axis.
            }
          }
        };
        var materialOptions2 = {
          width: 900,
          chart: {
            title: 'Model Vs Backend per Platform',
           },
           },
           series: {
           series: {
             0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
             0: { axis: 'distance' }, // Bind series 0 to an axis named 'distance'.
            //1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
           },
           },
           axes: {
           axes: {
             y: {
             y: {
               distance: {side: 'left',label: 'FPS'}, // Left y-axis.
               distance: {side: 'left',label: 'FPS'}, // Left y-axis.
              brightness: {side: 'right', label: 'CPU usage'} // Right y-axis.
             }
             }
           }
           }
         };
         };
         var materialChart = new google.charts.Bar(chartDiv);
         var materialChart = new google.charts.Bar(chartDiv);
         view = new google.visualization.DataView(data);
        var materialChart1 = new google.charts.Bar(chartDiv1);
        var materialChart2 = new google.charts.Bar(chartDiv2);
         view = new google.visualization.DataView(table_backend_platform);
        view1 = new google.visualization.DataView(table_model_platform);
        view2 = new google.visualization.DataView(table_model_backend);
 
         function drawMaterialChart() {
         function drawMaterialChart() {
           var materialChart = new google.charts.Bar(chartDiv);
           var materialChart = new google.charts.Bar(chartDiv);
           materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
          var materialChart1 = new google.charts.Bar(chartDiv1);
           view = new google.visualization.DataView(data);
          var materialChart2 = new google.charts.Bar(chartDiv2);
           materialChart.draw(table_backend_platform, google.charts.Bar.convertOptions(materialOptions));
           materialChart1.draw(table_model_platform, google.charts.Bar.convertOptions(materialOptions1));
          materialChart2.draw(table_model_backend, google.charts.Bar.convertOptions(materialOptions2));
          init_charts();
        }
        function init_charts(){
          view.setColumns([0,1,2]);
          view.hideColumns([3,4,5,6,7,8]);
          materialChart.draw(view, materialOptions);
          view1.setColumns([0,1,2,3,4,5,6]);
          view1.hideColumns([7,8,9,10,11,12]);
          materialChart1.draw(view1, materialOptions1);
          view2.setColumns([0,1,7]);
          view2.hideColumns([2,3,4,5,6,8,9,10,11,12]);
          materialChart2.draw(view2, materialOptions2);
 
        }


          //button.onclick = addNewRow;


        /*Select the backend to filter the data to show in the chart*/
        var show_inceptionv1 = document.getElementById('show_inceptionv1');
        show_inceptionv1.onclick = function () {
          view.setColumns([0,1,2]);
          view.hideColumns([3,4,5,6,7,8]);
          materialChart.draw(view, materialOptions);
         }
         }
         var button = document.getElementById('addData');
         var show_inceptionv2 = document.getElementById("show_inceptionv2");
         button.onclick = function() {
         show_inceptionv2.onclick = function() {
          //data.removeRow(0);
          //data.removeColumn(2);
          //view = new google.visualization.DataView(data);
           view.setColumns([0,3,4]);
           view.setColumns([0,3,4]);
           view.hideColumns([1]);
           view.hideColumns([1,2,5,6,7,8]);
          view.hideColumns([2]);
           materialChart.draw(view, materialOptions);
           materialChart.draw(view, materialOptions);
          //data.insertRows(0, [['Test-A-changed', 14, 13]]);
          //drawMaterialChart();
         }
         }
         var showFPS_only = document.getElementById("showFPS");
        var show_inceptionv3 = document.getElementById('show_inceptionv3');
        show_inceptionv3.onclick = function() {
          view.setColumns([0,5,6]);
          view.hideColumns([1,2,3,4,7,8]);
          materialChart.draw(view, materialOptions);
        }
        var show_inceptionv4 = document.getElementById("show_inceptionv4");
        show_inceptionv4.onclick = function() {
          view.setColumns([0,7,8]);
          view.hideColumns([1,2,3,4,5,6]);
          materialChart.draw(view, materialOptions);
        }
        /*Select the backend to filter the data to show in the chart*/
        var button = document.getElementById('show_tensorflow');
        button.onclick = function() {
          view1.setColumns([0,1,2,3,4,5,6]);
          view1.hideColumns([7,8,9,10,11,12]);
          materialChart1.draw(view1, materialOptions1);
        }
         var showFPS_only = document.getElementById("show_tflite");
         showFPS_only.onclick = function() {
         showFPS_only.onclick = function() {
           //view = new google.visualization.DataView(data);
           view1.setColumns([0,7,8,9,10,11,12]);
           view.setColumns([0,1,2]);
          view1.hideColumns([1,2,3,4,5,6]);
           view.hideColumns([3]);
          materialChart1.draw(view1, materialOptions1);
           view.hideColumns([4]);
        }
           materialChart.draw(view, materialOptions);
        /*Select the Platform to filter the data to show in the chart*/
        var show_x86 = document.getElementById('show_x86');
        show_x86.onclick = function() {
           view2.setColumns([0,1,7]);
          view2.hideColumns([2,3,4,5,6,8,9,10,11,12]);
           materialChart2.draw(view2, materialOptions2);
        }
        var show_x86_gpu = document.getElementById("show_x86_gpu");
        show_x86_gpu.onclick = function() {
          view2.setColumns([0,2,8]);
          view2.hideColumns([1,3,4,5,6,7,9,10,11,12]);
           materialChart2.draw(view2, materialOptions2);
        }
        var show_tx2 = document.getElementById('show_tx2');
        show_tx2.onclick = function() {
          view2.setColumns([0,3,9]);
          view2.hideColumns([1,2,4,5,6,7,8,10,11,12]);
           materialChart2.draw(view2, materialOptions2);
         }
         }
          function show_0() {
        var show_tx2_gpu = document.getElementById("show_tx2_gpu");
          //view = new google.visualization.DataView(data);
        show_tx2_gpu.onclick = function() {
          if (check_box.checked == false){
          view2.setColumns([0,4,10]);
            view.hideRows([0]);
           view2.hideColumns([1,2,3,5,6,7,8,9,11,12]);
            materialChart.draw(view, materialOptions);
           materialChart2.draw(view2, materialOptions2);
            //show_1();
           }else{
            view.setRows([0,1,2,3,4,5]);
            materialChart.draw(view, materialOptions);
            //show_1();
          }
         
          //view.setColumns([0,1,2]);
          //view.hideColumns([3]);
          //view.hideColumns([4]);
           //materialChart.draw(view, materialOptions);
         }
         }
          
         var show_coral = document.getElementById('show_coral');
        function show_1() {
        show_coral.onclick = function() {
          //view = new google.visualization.DataView(data);
          view2.setColumns([0,5,11]);
          if (check_box2.checked == false){
           view2.hideColumns([1,2,3,4,6,7,8,9,10,12]);
            view.hideRows([1]);
           materialChart2.draw(view2, materialOptions2);
            materialChart.draw(view, materialOptions);
           
           }else{
            view.setRows([0,1,2,3,4,5]);
            materialChart.draw(view, materialOptions);
            //show_0();
          }
          //show_0();
          //view.setColumns([0,1,2]);
          //view.hideColumns([3]);
          //view.hideColumns([4]);
           //materialChart.draw(view, materialOptions);
         }
         }
        drawMaterialChart();
         var show_coral_tpu = document.getElementById("show_coral_tpu");
         var hideSal = document.getElementById("reset");
         show_coral_tpu.onclick = function() {
         hideSal.onclick = function() {
           view2.setColumns([0,6,12]);
           view.setRows([0,1,2,3,4,5]);
           view2.hideColumns([1,2,3,4,5,7,8,9,10,11]);
           view.setColumns([0,1,2,3,4,]);
          materialChart2.draw(view2, materialOptions2);
            materialChart.draw(view, materialOptions);
          //drawMaterialChart();
         }
         }
         drawMaterialChart();
         drawMaterialChart();
     };
     };
507

edits

Cookies help us deliver our services. By using our services, you agree to our use of cookies.