GstInference/Benchmarks: Difference between revisions

mNo edit summary
Line 149: Line 149:
<html>
<html>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
   <button id="addData">Show CPU </button>
   <style>
   <button id="showFPS">Show FPS </button>
    .button {
   <button id="reset">Show both</button>
    background-color: #008CBA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }
  </style>
 
  <button class="button" id="addData">Show CPU </button>
   <button class="button" id="showFPS">Show FPS </button>
   <button class="button" id="reset">Show All</button>
  Show InceptionV1: <input class="button" type="checkbox" id="myCheck" checked=true>
  Show InceptionV2: <input  class="button" type="checkbox" id="myCheck2" checked=true>


<br><br>
<br><br>
Line 157: Line 174:


<script>
<script>
        google.charts.load('current', {'packages':['corechart', 'bar']});
      google.charts.load('current', {'packages':['corechart', 'bar']});
       google.charts.setOnLoadCallback(drawStuff);
       google.charts.setOnLoadCallback(drawStuff);


       function drawStuff() {
       function drawStuff() {


         var button = document.getElementById('addData');
         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 data = google.visualization.arrayToDataTable([
         var data = google.visualization.arrayToDataTable([
           ['Model', 'FPS', 'CPU'],
           ['Model', 'x86-FPS', 'Xavier-FPS', 'x64-CPU', 'Xavier-CPU'],
           ['InceptionV1', 21.060, 47],
           ['InceptionV1', 20.164, 7.642, 48, 71],
           ['InceptionV2', 16.050, 43],
           ['InceptionV2', 14.821, 5.587, 44, 68],
           ['InceptionV3', 6.52048],
           ['InceptionV3', 6.0862.286, 50, 72],
           ['InceptionV4', 3.28948],
           ['InceptionV4', 2.9771.153, 50, 72],
           ['TinyyoloV2',  9.75745],
           ['TinyyoloV2',  9.1112.966, 47, 67],
           ['TinyyoloV2',  10.842, 45]
           ['TinyyoloV3',  10.286, 3.43, 45, 63]
         ]);
         ]);


Line 182: Line 202:
           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'.
             //1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
           },
           },
           axes: {
           axes: {
             y: {
             y: {
               distance: {label: 'FPS'}, // Left y-axis.
               distance: {side: 'left',label: 'FPS'}, // Left y-axis.
               brightness: {side: 'right', label: 'CPU usage'} // Right y-axis.
               brightness: {side: 'right', label: 'CPU usage'} // Right y-axis.
             }
             }
Line 192: Line 212:
         };
         };
         var materialChart = new google.charts.Bar(chartDiv);
         var materialChart = new google.charts.Bar(chartDiv);
 
        view = new google.visualization.DataView(data);
         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));
           materialChart.draw(data, google.charts.Bar.convertOptions(materialOptions));
           button.onclick = addNewRow;
           view = new google.visualization.DataView(data);
 
          //button.onclick = addNewRow;


         }
         }
         function addNewRow() {
         var button = document.getElementById('addData');
        button.onclick = function() {
           //data.removeRow(0);
           //data.removeRow(0);
           //data.removeColumn(2);
           //data.removeColumn(2);
           view = new google.visualization.DataView(data);
           //view = new google.visualization.DataView(data);
          view.setColumns([0,3,4]);
           view.hideColumns([1]);
           view.hideColumns([1]);
          view.hideColumns([2]);
           materialChart.draw(view, materialOptions);
           materialChart.draw(view, materialOptions);
           //data.insertRows(0, [['Test-A-changed', 14, 13]]);
           //data.insertRows(0, [['Test-A-changed', 14, 13]]);
Line 210: Line 235:
         var showFPS_only = document.getElementById("showFPS");
         var showFPS_only = document.getElementById("showFPS");
         showFPS_only.onclick = function() {
         showFPS_only.onclick = function() {
           view = new google.visualization.DataView(data);
           //view = new google.visualization.DataView(data);
           view.hideColumns([2]);
          view.setColumns([0,1,2]);
           view.hideColumns([3]);
          view.hideColumns([4]);
           materialChart.draw(view, materialOptions);
           materialChart.draw(view, materialOptions);
        }
          function show_0() {
          //view = new google.visualization.DataView(data);
          if (check_box.checked == false){
            view.hideRows([0]);
            materialChart.draw(view, materialOptions);
            //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);
        }
       
        function show_1() {
          //view = new google.visualization.DataView(data);
          if (check_box2.checked == false){
            view.hideRows([1]);
            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();
         drawMaterialChart();
         var hideSal = document.getElementById("reset");
         var hideSal = document.getElementById("reset");
         hideSal.onclick = function() {
         hideSal.onclick = function() {
           drawMaterialChart();
           view.setRows([0,1,2,3,4,5]);
          view.setColumns([0,1,2,3,4,]);
            materialChart.draw(view, materialOptions);
          //drawMaterialChart();
         }
         }
         drawMaterialChart();
         drawMaterialChart();
Line 223: Line 288:
</script>
</script>
</html>
</html>
<br>
<br>
<noinclude>
<noinclude>
{{GstInference/Foot|Example Applications/DispTec|Model Zoo}}
{{GstInference/Foot|Example Applications/DispTec|Model Zoo}}
</noinclude>
</noinclude>
507

edits