<commit_before>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Connect 4k</title>
    <meta name="viewport" content="width=device-width">
    <style>
      body {
        background: #041634;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 0;
        display: flex;
        justify-content: center;
      }

      a {
        position: absolute;
        text-decoration: none;
        color: #405261;
      }

      canvas {
        width: 100%;
        height: 100%;
      }

      #author {
        top: 5px;
        left: 5px;
      }

      #createjs {
        bottom: 5px;
        right: 8px;
      }

      #createjs img {
        display: inline;
        width: 100px;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <a id="author" href="http://herebefrogs.com">
      @herebefrogs
    </a>
    <a id="createjs" href="http://createjs.com">
      Built with <img src="images/createjs-logo-horizontal-gray-darker.svg"/>
    </a>
    <canvas id="canvas" width="600" height="600"></canvas>

    <script async="" src="//www.google-analytics.com/analytics.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-39675296-3', 'auto');
      ga('send', 'pageview');
    </script>

    <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
    <script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

    <script>
      'use strict';

      var stage;
      var container;

      var STROKE_COLOR = '#fff';
      var SPACER = 50;            // px
      var STROKE_THIN = 1;        // px
      var STROKE_THICK = 3;        // px
      var RADIUS_THIN_SMALL = 5;  // px
      var RADIUS_THIN_MEDIUM = 10;  // px
      var RADIUS_THIN_LARGE = 15;  // px
      var RADIUS_THICK_SMALL = 3;  // px
      var RADIUS_THICK_MEDIUM = 8;  // px
      var RADIUS_THICK_LARGE = 13;  // px
      var MAX_CIRCLES = 56;

      // max excluded
      var random = function(min, max) {
        return Math.random() * (max - min) + min;
      };

      // max included
      var randomInt = function(min, max) {
        return Math.floor(random(min, max + 1));
      }

      var draw = function(shape, stroke, radius) {
        shape.graphics.setStrokeStyle(stroke)
                      .beginStroke(STROKE_COLOR)
                      .drawCircle(0, 0, radius);
      }
      var createCircle = function(x, y, id) {
        var shape = new createjs.Shape();

        // break down the pattern number into a sum of basic patterns
        if ((id & 1) === 1) {
          draw(shape, STROKE_THIN, RADIUS_THIN_SMALL);
        }
        if ((id & 2) === 2) {
          draw(shape, STROKE_THIN, RADIUS_THIN_MEDIUM);
        }
        if ((id & 4) === 4) {
          draw(shape, STROKE_THIN, RADIUS_THIN_LARGE);
        }
        if ((id & 8) === 8) {
          draw(shape, STROKE_THICK, RADIUS_THICK_SMALL);
        }
        if ((id & 16) === 16) {
          draw(shape, STROKE_THICK, RADIUS_THICK_MEDIUM);
        }
        if ((id & 32) === 32) {
          draw(shape, STROKE_THICK, RADIUS_THICK_LARGE);
        }

        shape.x = x;
        shape.y = y;
        container.addChild(shape);

        return shape;
      };

      var init = function() {
        stage = new createjs.Stage('canvas');
        container = new createjs.Container();
        stage.addChild(container);

        update();
      };

      var update = function() {
        // resize canvas to fit screen
        if (stage.canvas.width !== window.innerWidth ||
            stage.canvas.height !== window.innerHeight) {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
        }

        // remove previous circles
        container.removeAllChildren();

        // add new ones
        var x, y;
        for (y = SPACER - RADIUS_THICK_LARGE; y < stage.canvas.height; y += SPACER) {
          for (x = SPACER - RADIUS_THICK_LARGE; x < stage.canvas.width; x += SPACER) {
            createCircle(x, y, randomInt(0, MAX_CIRCLES));
          }
        }

        stage.update();
      }

      // regenerate on resize and every X seconds
      window.addEventListener('resize', update);
      setInterval(update, 60000);

      init();
    </script>
</body>
</html><commit_msg>add query parameter to control refresh speed<commit_after>
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Connect 4k</title>
    <meta name="viewport" content="width=device-width">
    <style>
      body {
        background: #041634;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 0;
        display: flex;
        justify-content: center;
      }

      a {
        position: absolute;
        text-decoration: none;
        color: #405261;
      }

      canvas {
        width: 100%;
        height: 100%;
      }

      #author {
        top: 5px;
        left: 5px;
      }

      #createjs {
        bottom: 5px;
        right: 8px;
      }

      #createjs img {
        display: inline;
        width: 100px;
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <a id="author" href="http://herebefrogs.com">
      @herebefrogs
    </a>
    <a id="createjs" href="http://createjs.com">
      Built with <img src="images/createjs-logo-horizontal-gray-darker.svg"/>
    </a>
    <canvas id="canvas" width="600" height="600"></canvas>

    <script async="" src="//www.google-analytics.com/analytics.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-39675296-3', 'auto');
      ga('send', 'pageview');
    </script>

    <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
    <script src="https://code.createjs.com/tweenjs-0.6.2.min.js"></script>

    <script>
      'use strict';

      var stage;
      var container;

      var STROKE_COLOR = '#fff';
      var SPACER = 50;            // px
      var STROKE_THIN = 1;        // px
      var STROKE_THICK = 3;        // px
      var RADIUS_THIN_SMALL = 5;  // px
      var RADIUS_THIN_MEDIUM = 10;  // px
      var RADIUS_THIN_LARGE = 15;  // px
      var RADIUS_THICK_SMALL = 3;  // px
      var RADIUS_THICK_MEDIUM = 8;  // px
      var RADIUS_THICK_LARGE = 13;  // px
      var MAX_CIRCLES = 56;
      var INTERVAL = 60000; // in ms

      // max excluded
      var random = function(min, max) {
        return Math.random() * (max - min) + min;
      };

      // max included
      var randomInt = function(min, max) {
        return Math.floor(random(min, max + 1));
      };

      var parseQuery = function() {
        var query = {};
        if (location.search.length) {
          var parts = location.search.substring(1).split('&');
          parts.forEach(function(part) {
            var pair = part.split('=');
            var key = pair[0];
            var newValue = pair.length > 1 ? decodeURIComponent(pair[1]) : undefined;

            if (!query[key]) {
              query[key] = newValue;
            } else {
              var oldValue = query[key];
              if (typeof(oldValue) === 'object' && oldValue.hasOwnProperty('length')) {
                oldValue.push(newValue);
              } else {
                query[key] = [ oldValue, newValue ];
              }
            }
          });
        }
        return query;
      };

      var packQuery = function(query) {
        var queryString = '';
        Object.keys(query).forEach(function(key) {
          if (queryString.length === 0) {
            queryString += '?';
          } else if (queryString.charAt(queryString.length - 1) !== '?') {
              queryString += '&';
          }

          queryString += key;

          if (query[key]) {
            queryString += '=' + encodeURIComponent(query[key]);
          }
        });
        return queryString;
      }

      var draw = function(shape, stroke, radius) {
        shape.graphics.setStrokeStyle(stroke)
                      .beginStroke(STROKE_COLOR)
                      .drawCircle(0, 0, radius);
      };

      var createCircle = function(x, y, id) {
        var shape = new createjs.Shape();

        // break down the pattern number into a sum of basic patterns
        if ((id & 1) === 1) {
          draw(shape, STROKE_THIN, RADIUS_THIN_SMALL);
        }
        if ((id & 2) === 2) {
          draw(shape, STROKE_THIN, RADIUS_THIN_MEDIUM);
        }
        if ((id & 4) === 4) {
          draw(shape, STROKE_THIN, RADIUS_THIN_LARGE);
        }
        if ((id & 8) === 8) {
          draw(shape, STROKE_THICK, RADIUS_THICK_SMALL);
        }
        if ((id & 16) === 16) {
          draw(shape, STROKE_THICK, RADIUS_THICK_MEDIUM);
        }
        if ((id & 32) === 32) {
          draw(shape, STROKE_THICK, RADIUS_THICK_LARGE);
        }

        shape.x = x;
        shape.y = y;
        container.addChild(shape);

        return shape;
      };

      var init = function() {
        stage = new createjs.Stage('canvas');
        container = new createjs.Container();
        stage.addChild(container);

        var query = parseQuery();
        if (query.speed) {
          var value = parseInt(query.speed);
          if (!isNaN(value) && value !== INTERVAL) {
            INTERVAL = parseInt(query.speed);
          }
        } else {
          query.speed = INTERVAL;
          location.search = packQuery(query);
        }

        update();
      };

      var update = function() {
        // resize canvas to fit screen
        if (stage.canvas.width !== window.innerWidth ||
            stage.canvas.height !== window.innerHeight) {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
        }

        // remove previous circles
        container.removeAllChildren();

        // add new ones
        var x, y;
        for (y = SPACER - RADIUS_THICK_LARGE; y < stage.canvas.height; y += SPACER) {
          for (x = SPACER - RADIUS_THICK_LARGE; x < stage.canvas.width; x += SPACER) {
            createCircle(x, y, randomInt(0, MAX_CIRCLES));
          }
        }

        stage.update();
      }

      init();

      // regenerate on resize and every X seconds
      window.addEventListener('resize', update);
      setInterval(update, INTERVAL);

    </script>
</body>
</html>
{'fraction_non_alphanumeric': 0.14755148741418764, 'fraction_numerical': 0.017391304347826087, 'mean_word_length': 1.81307929969104, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 64, 'https://': 4, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7013181', 'n_tokens_mistral': 3820, 'n_tokens_neox': 3602, 'n_words': 734}