<commit_before><!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>Background Subtraction using WebGL</title>
  <style>
html, body {
  text-align: center;
  margin:0;
  padding:0;
}

div.main {
    width: 700px;
    display: inline-block;
}

div.main canvas {
  background-color: black;
}

div.main p {
    height: 50px;
}

  </style>
  <script src="../../build/glimp-0.0.1.js"></script>
  <script src="../../js/profiler.js"></script>
  <script src="../../js/compatibility.js"></script>
  <script src="../../js/dat.gui.min.js"></script>
  <script type='text/javascript'>
    window.addEventListener('load', function() {
        var section = document.querySelector('div.main'),
          video = section.querySelector('video'),
          canvases = section.getElementsByTagName('canvas');
          log = document.querySelector('#log');
        try {
            glimp.setCanvas(canvases[0]);
        } catch (error) {
            log.innerHTML = "<h4>"+error+"</h4>";
        }
        
        var ctx1 = canvases[1].getContext('2d'),
            ctx2 = canvases[2].getContext('2d'),
            img1 = ctx1.createImageData(320,240),
            img2 = ctx2.createImageData(320,240);
            view1 = new Uint8Array(img1.data.buffer),
            view2 = new Uint8Array(img2.data.buffer);

        var stat = new profiler();

        var start = function() {
            var options = new(function(){
                this.alpha = 0.2;
                this.threshold = 0.1;
                this.basic = true;
                this.average = true;
                this.gaussian = true;
            });
            
            var gui = new dat.GUI();
            
            gui.add(options, 'alpha',0.01,1.0).step(0.01);
            gui.add(options, 'threshold',0,1).step(0.05);
            gui.add(options, 'basic').listen();
            gui.add(options, 'average').listen();
            gui.add(options, 'gaussian').listen();
                                                                        
            var nframes,basic,average,gaussian,videoFrame,renderFrame;
            
            var setup = function() {
                nframes = 0;
                basic = glimp.bgfg('basic');
                average = glimp.bgfg('average');
                gaussian = glimp.bgfg('gaussian');
            }

            var tick = function() {
                stat.new_frame();
                if (video.readyState === video.HAVE_ENOUGH_DATA) {
                    nframes++;
                    if(!videoFrame) {
                        videoFrame = glimp.frame(video);
                        renderFrame = glimp.frame(null,320,240,false);
                    } else {
                        videoFrame.load(video);
                        if(options.basic){
                            basic.process(videoFrame,null,options.threshold);
                        }
                        if(options.average){                            
                            average.process(videoFrame,renderFrame,Math.max(options.alpha,1/nframes),options.threshold);
                            renderFrame.copy(view1)
                            ctx1.putImageData(img1,0,0);
                        }
                        if(options.gaussian){                            
                            gaussian.process(videoFrame,renderFrame,Math.max(options.alpha,1/nframes),options.threshold);
                            renderFrame.copy(view2)
                            ctx2.putImageData(img2,0,0);
                        }
                    }
                }
                log.innerHTML = stat.log();
                compatibility.requestAnimationFrame(tick);
            }
            setup();
            tick();
        }
        start();

    });
  </script>
</head>
<body>
  <header>
  <h1>Background Subtraction using WebGL</h1>
  </header>
  <div class="main">
    <table>
        <tr>
            <td>
                <p>Input</p>
                <video width=320 height=240 src='../media/capture.webm' autoplay loop>
                </video>
            </td>
            <td>
                <p>"Basic" bg subtraction<br/>
                difference with the previous frame < threshold</p>
                <canvas width=320 height=240></canvas><commit_msg>Updated title of bgfg example<commit_after><!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <title>glimp: Background Subtraction using WebGL</title>
  <style>
html, body {
  text-align: center;
  margin:0;
  padding:0;
}

div.main {
    width: 700px;
    display: inline-block;
}

div.main canvas {
  background-color: black;
}

div.main p {
    height: 50px;
}

  </style>
  <script src="../../build/glimp-0.0.1.js"></script>
  <script src="../../js/profiler.js"></script>
  <script src="../../js/compatibility.js"></script>
  <script src="../../js/dat.gui.min.js"></script>
  <script type='text/javascript'>
    window.addEventListener('load', function() {
        var section = document.querySelector('div.main'),
          video = section.querySelector('video'),
          canvases = section.getElementsByTagName('canvas');
          log = document.querySelector('#log');
        try {
            glimp.setCanvas(canvases[0]);
        } catch (error) {
            log.innerHTML = "<h4>"+error+"</h4>";
        }
        
        var ctx1 = canvases[1].getContext('2d'),
            ctx2 = canvases[2].getContext('2d'),
            img1 = ctx1.createImageData(320,240),
            img2 = ctx2.createImageData(320,240);
            view1 = new Uint8Array(img1.data.buffer),
            view2 = new Uint8Array(img2.data.buffer);

        var stat = new profiler();

        var start = function() {
            var options = new(function(){
                this.alpha = 0.2;
                this.threshold = 0.1;
                this.basic = true;
                this.average = true;
                this.gaussian = true;
            });
            
            var gui = new dat.GUI();
            
            gui.add(options, 'alpha',0.01,1.0).step(0.01);
            gui.add(options, 'threshold',0,1).step(0.05);
            gui.add(options, 'basic').listen();
            gui.add(options, 'average').listen();
            gui.add(options, 'gaussian').listen();
                                                                        
            var nframes,basic,average,gaussian,videoFrame,renderFrame;
            
            var setup = function() {
                nframes = 0;
                basic = glimp.bgfg('basic');
                average = glimp.bgfg('average');
                gaussian = glimp.bgfg('gaussian');
            }

            var tick = function() {
                stat.new_frame();
                if (video.readyState === video.HAVE_ENOUGH_DATA) {
                    nframes++;
                    if(!videoFrame) {
                        videoFrame = glimp.frame(video);
                        renderFrame = glimp.frame(null,320,240,false);
                    } else {
                        videoFrame.load(video);
                        if(options.basic){
                            basic.process(videoFrame,null,options.threshold);
                        }
                        if(options.average){                            
                            average.process(videoFrame,renderFrame,Math.max(options.alpha,1/nframes),options.threshold);
                            renderFrame.copy(view1)
                            ctx1.putImageData(img1,0,0);
                        }
                        if(options.gaussian){                            
                            gaussian.process(videoFrame,renderFrame,Math.max(options.alpha,1/nframes),options.threshold);
                            renderFrame.copy(view2)
                            ctx2.putImageData(img2,0,0);
                        }
                    }
                }
                log.innerHTML = stat.log();
                compatibility.requestAnimationFrame(tick);
            }
            setup();
            tick();
        }
        start();

    });
  </script>
</head>
<body>
  <header>
  <h1>glimp: Background Subtraction using WebGL</h1>
  </header>
  <div class="main">
    <table>
        <tr>
            <td>
                <p>Input</p>
                <video width=320 height=240 src='../media/capture.webm' autoplay loop>
                </video>
            </td>
            <td>
                <p>"Basic" bg subtraction<br/>
                difference with the previous frame < threshold</p>
                <canvas width=320 height=240></canvas>
{'fraction_non_alphanumeric': 0.13403718154693597, 'fraction_numerical': 0.022033509295386736, 'mean_word_length': 1.3471586318340965, 'pattern_counts': {'":': 0, '<': 87, '<?xml version=': 0, '>': 85, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4856812', 'n_tokens_mistral': 2493, 'n_tokens_neox': 2320, 'n_words': 381}