<commit_before><!DOCTYPE html>
<html>
  <meta charset="utf-8">

  <style>
    th {
      font: bold 12px Verdana, Arial, Helvetica,
      sans-serif;
      text-align: left;
      padding: 4px 4px 4px 12px;
      background: no-repeat;
    }

    td {
      font: bold 12px Verdana, Arial, Helvetica;
      padding-left: 8px;
      text-align: right;
    }

    h1 {
      font: bold 32px Verdana, Arial, Helvetica sans-serif;
    }

    h4 {
      font: bold 10px Verdana, Arial, Helvetica sans-serif;
    }
  </style>

  <link type="text/css" href="jquery/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>

  
  <script type='text/javascript'>
      var Module = {
        noInitialRun: true
      };
  </script>
  <script src='broadway.js' type='text/javascript'></script>

  <script type="text/javascript">

      $(function(){
        $( "#tabs" ).tabs();
        $( "button").button();
        $( "#play").click(function() { play(); });
        $( "#plot").click(function() { plot(); });

        $( "#downloadProgress" ).progressbar();
        
      });


      var options = {
          series: { shadowSize: 0 }, // drawing is faster without shadows
          yaxis: { min: 0, max: 100 },
          xaxis: { show: false },
          lines: { show: true },
          points: { show: true }
      };

      var fpsData = [];
      var fpsSinceStartData = [];

      function updateChart() {
        var plot = $.plot($("#chart"), [ {
              data: fpsData,
              lines: { show: true }, 
              color: "rgb(255, 100, 123)"
            },
            {
              data: fpsSinceStartData,
              lines: { show: true },
              points: { show: false },
              color: "rgb(0, 255, 0)"
            }], options);
        plot.draw();
      }

      var scoreCalculated = false;

      var plotting = false;
      var polluted = false;

      function plot() {
        plotting = !plotting;
        if (plotting) {
          polluted = true;
        }
      }

      var steadySampleCounter = 0;
      var steadyFpsCounter = 0;

      function updateStats(fps, fpsSinceStart, elapsed) {
        if (plotting) {
          var maxSamples = 32;
          if (fpsData.length > maxSamples)
            fpsData = fpsData.slice(1);
          fpsData.push([elapsed, fps])
          if (fpsSinceStartData.length > maxSamples)
            fpsSinceStartData = fpsSinceStartData.slice(1);
          fpsSinceStartData.push([elapsed, fpsSinceStart])
          updateChart();
        }

        var steadyElapsedThreshold = 5;
        if (elapsed > steadyElapsedThreshold) {
          steadySampleCounter ++;
          steadyFpsCounter += fps;
        }

        document.getElementById('fps').innerHTML = fps.toFixed(2);
        document.getElementById('fpsSinceStart').innerHTML = fpsSinceStart.toFixed(2);
        document.getElementById('fpsSinceSteady').innerHTML = (steadyFpsCounter / steadySampleCounter).toFixed(2);
        document.getElementById('elapsed').innerHTML = elapsed.toFixed(2);
        
        var scoreTimeout = 60;
        if (elapsed > scoreTimeout && scoreCalculated == false) {
          scoreCalculated = true;
          document.getElementById('score').innerHTML = fpsSinceStart.toFixed(2);
        }
        if (scoreCalculated == false) {
          if (polluted) {
            document.getElementById('score').innerHTML = "Invalid";
          } else {
            document.getElementById('score').innerHTML = "Calculating: " + (scoreTimeout - elapsed).toFixed(0);
          }
        }
      }
  </script>

  <script type='text/javascript'>
      function stop() {
          clearInterval(Module.mainLoopInterval);
      }
      
      function transferComplete(evt){
        document.getElementById('downloadProgress').innerHTML = "Download Complete, Playing ...";
      }  

      function play() {

        document.getElementById('downloadProgress').innerHTML = "Downloading, Please Wait ...";

        $( "#play").hide();

        var clip = $( "#clip" ).val();

        // Get the file
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", transferComplete, false);  
        xhr.open("GET", clip, false);
        xhr.responseType = "arraybuffer";
        xhr.send(null);
        var arrayBuffer = xhr.response;
        if (arrayBuffer) {
          var byteArray = new Uint8Array(arrayBuffer);
          var array = Array.prototype.slice.apply(byteArray);
          Module.FS.createDataFile('/', 'video.264', array, true, false);
        } else alert('load fail :(');

        // Pass canvas and context to the generated code, and do the actual run() here
        Module.canvas = document.getElementById('canvas');
        Module.ctx2D = Module.canvas.getContext('2d');
        if (!Module.ctx2D) {
          alert('Canvas not available :(');
          return;
        }
        _paint = function () {};
        console.info("Running: " + clip);
        Module.run(['video.264']);

      }
  </script>

  <div>
  <h1>Broadway.js</h1>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">H.264 Decoding w/ Canvas</a></li>
    </ul>
    <div id="tabs-1">
      <span>
        Clip: 
        <select id="clip">
          <option value="mozilla.264">Mozilla</option>
          <option value="admiral.264">Admiral</option>
        </select>
      </span>
      <span style="margin-top: 10px; border: 0px" id="downloadProgress"></span>
      <div style="width: 1000px">
        <div style="background-color: black; width: 640px; height: 480px; margin-top: 10px; margin-bottom: 10px; float: left;">
          <canvas id='canvas'></canvas>
        </div>
        <!-- Stats -->
        <div style="height: 480px; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; float: left;">
          <div id="chart" style="width:300px; height:340px;"></div>
          <table style="margin-top: 10px; width: 300;">
            <tr>
              <th>FPS</th><commit_msg>Commenting out previously committed _paint override.<commit_after><!DOCTYPE html>
<html>
  <meta charset="utf-8">

  <style>
    th {
      font: bold 12px Verdana, Arial, Helvetica,
      sans-serif;
      text-align: left;
      padding: 4px 4px 4px 12px;
      background: no-repeat;
    }

    td {
      font: bold 12px Verdana, Arial, Helvetica;
      padding-left: 8px;
      text-align: right;
    }

    h1 {
      font: bold 32px Verdana, Arial, Helvetica sans-serif;
    }

    h4 {
      font: bold 10px Verdana, Arial, Helvetica sans-serif;
    }
  </style>

  <link type="text/css" href="jquery/css/custom-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
    <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script>

  
  <script type='text/javascript'>
      var Module = {
        noInitialRun: true
      };
  </script>
  <script src='broadway.js' type='text/javascript'></script>

  <script type="text/javascript">

      $(function(){
        $( "#tabs" ).tabs();
        $( "button").button();
        $( "#play").click(function() { play(); });
        $( "#plot").click(function() { plot(); });

        $( "#downloadProgress" ).progressbar();
        
      });


      var options = {
          series: { shadowSize: 0 }, // drawing is faster without shadows
          yaxis: { min: 0, max: 100 },
          xaxis: { show: false },
          lines: { show: true },
          points: { show: true }
      };

      var fpsData = [];
      var fpsSinceStartData = [];

      function updateChart() {
        var plot = $.plot($("#chart"), [ {
              data: fpsData,
              lines: { show: true }, 
              color: "rgb(255, 100, 123)"
            },
            {
              data: fpsSinceStartData,
              lines: { show: true },
              points: { show: false },
              color: "rgb(0, 255, 0)"
            }], options);
        plot.draw();
      }

      var scoreCalculated = false;

      var plotting = false;
      var polluted = false;

      function plot() {
        plotting = !plotting;
        if (plotting) {
          polluted = true;
        }
      }

      var steadySampleCounter = 0;
      var steadyFpsCounter = 0;

      function updateStats(fps, fpsSinceStart, elapsed) {
        if (plotting) {
          var maxSamples = 32;
          if (fpsData.length > maxSamples)
            fpsData = fpsData.slice(1);
          fpsData.push([elapsed, fps])
          if (fpsSinceStartData.length > maxSamples)
            fpsSinceStartData = fpsSinceStartData.slice(1);
          fpsSinceStartData.push([elapsed, fpsSinceStart])
          updateChart();
        }

        var steadyElapsedThreshold = 5;
        if (elapsed > steadyElapsedThreshold) {
          steadySampleCounter ++;
          steadyFpsCounter += fps;
        }

        document.getElementById('fps').innerHTML = fps.toFixed(2);
        document.getElementById('fpsSinceStart').innerHTML = fpsSinceStart.toFixed(2);
        document.getElementById('fpsSinceSteady').innerHTML = (steadyFpsCounter / steadySampleCounter).toFixed(2);
        document.getElementById('elapsed').innerHTML = elapsed.toFixed(2);
        
        var scoreTimeout = 60;
        if (elapsed > scoreTimeout && scoreCalculated == false) {
          scoreCalculated = true;
          document.getElementById('score').innerHTML = fpsSinceStart.toFixed(2);
        }
        if (scoreCalculated == false) {
          if (polluted) {
            document.getElementById('score').innerHTML = "Invalid";
          } else {
            document.getElementById('score').innerHTML = "Calculating: " + (scoreTimeout - elapsed).toFixed(0);
          }
        }
      }
  </script>

  <script type='text/javascript'>
      function stop() {
          clearInterval(Module.mainLoopInterval);
      }
      
      function transferComplete(evt){
        document.getElementById('downloadProgress').innerHTML = "Download Complete, Playing ...";
      }  

      function play() {

        document.getElementById('downloadProgress').innerHTML = "Downloading, Please Wait ...";

        $( "#play").hide();

        var clip = $( "#clip" ).val();

        // Get the file
        var xhr = new XMLHttpRequest();
        xhr.addEventListener("load", transferComplete, false);  
        xhr.open("GET", clip, false);
        xhr.responseType = "arraybuffer";
        xhr.send(null);
        var arrayBuffer = xhr.response;
        if (arrayBuffer) {
          var byteArray = new Uint8Array(arrayBuffer);
          var array = Array.prototype.slice.apply(byteArray);
          Module.FS.createDataFile('/', 'video.264', array, true, false);
        } else alert('load fail :(');

        // Pass canvas and context to the generated code, and do the actual run() here
        Module.canvas = document.getElementById('canvas');
        Module.ctx2D = Module.canvas.getContext('2d');
        if (!Module.ctx2D) {
          alert('Canvas not available :(');
          return;
        }
        // _paint = function () {};
        console.info("Running: " + clip);
        Module.run(['video.264']);

      }
  </script>

  <div>
  <h1>Broadway.js</h1>
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">H.264 Decoding w/ Canvas</a></li>
    </ul>
    <div id="tabs-1">
      <span>
        Clip: 
        <select id="clip">
          <option value="mozilla.264">Mozilla</option>
          <option value="admiral.264">Admiral</option>
        </select>
      </span>
      <span style="margin-top: 10px; border: 0px" id="downloadProgress"></span>
      <div style="width: 1000px">
        <div style="background-color: black; width: 640px; height: 480px; margin-top: 10px; margin-bottom: 10px; float: left;">
          <canvas id='canvas'></canvas>
        </div>
        <!-- Stats -->
        <div style="height: 480px; margin-top: 10px; margin-left: 10px; margin-bottom: 10px; float: left;">
          <div id="chart" style="width:300px; height:340px;"></div>
          <table style="margin-top: 10px; width: 300;">
            <tr>
              <th>FPS</th>
{'fraction_non_alphanumeric': 0.149335232668566, 'fraction_numerical': 0.019309908198797087, 'mean_word_length': 2.1156311637080867, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 119, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1829023', 'n_tokens_mistral': 4003, 'n_tokens_neox': 3708, 'n_words': 788}