<commit_before><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body, div, canvas, img {
  margin: 0;
  padding: 0;
}
#targetImage {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}
canvas {
  display: block;
}
#pictureCanvas, #selectCanvas, #downloadContainer {
  position: fixed;
}
#downloadContainer {
  visibility: hidden;
}
#downloadContainer .label {
  position: absolute;
  width: 500px;
  bottom: -20px;
  font-family: sans-serif;
  font-size: 17px;
  color: #444;
}
#selectCanvas {
  opacity: 0.5;
  cursor: default;
}
</style>
<script>
var CanvasRegionToImage = (function () {
  'use strict';

  var width = 400,
      height = 500;

  // Returns a random RGB string (RGBA if alpha is true).
  function randomColor(alpha) {
    var rgb = [
      Math.floor(Math.random() * 255),
      Math.floor(Math.random() * 255),
      Math.floor(Math.random() * 255)
    ];
    if (alpha) {
      rgb.push(Math.random());
    }
    return 'rgb' + (alpha ? 'a' : '') + '(' + rgb.join(', ') + ')';
  }

  // Paints the given canvas with random circles and rectangles.
  function paintRandomPicture(canvas) {
    var context = canvas.getContext('2d'),
        width = canvas.width,
        height = canvas.height,
        i, x, y, r;
    context.fillStyle = randomColor();
    context.fillRect(0, 0, width, height);
    for (i = 0; i < 300; ++i) {
      x = Math.floor(Math.random() * width);
      y = Math.floor(Math.random() * height);
      r = Math.floor(Math.random() * width/3);
      context.fillStyle = randomColor(true);
      context.save();
      context.translate(x, y);
      context.rotate(Math.random() * Math.PI);
      context.scale(1, Math.random() * 2);
      if (Math.floor(Math.random() * 2) === 0) {
        context.fillRect(-r/2, -r/2, r/2, r/2);
      } else {
        context.beginPath();
        context.arc(0, 0, r/2, 0, 2 * Math.PI);
        context.closePath();
        context.fill();
      }
      context.restore();
    }
    return canvas;
  }

  function startAnts(canvas, x0, y0, dx, dy) {
    var context = canvas.getContext('2d');
    context.fillStyle = '#000';
    context.fillRect(x0, y0, dx, dy);
  }

  function stopAnts(canvas) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
  }

  function load() {
    var targetImage = document.getElementById('targetImage'),
        downloadContainer = document.getElementById('downloadContainer'),
        pictureCanvas = document.getElementById('pictureCanvas'),
        selectCanvas = document.getElementById('selectCanvas'),
        clipCanvas = document.createElement('canvas'),
        clipContext = clipCanvas.getContext('2d');
    selectCanvas.onmousedown = function (event) {
      var x0 = Math.max(0, Math.min(event.clientX, width)),
          y0 = Math.max(0, Math.min(event.clientY, height));
      function mousemove(event) {
        var x = Math.max(0, Math.min(event.clientX, width)),
            y = Math.max(0, Math.min(event.clientY, height)),
            dx = x - x0, w = Math.abs(dx),
            dy = y - y0, h = Math.abs(dy);
        clipCanvas.width = w;
        clipCanvas.height = h;
        stopAnts(selectCanvas);
        if (w*h == 0) {
          downloadContainer.style.visibility = 'hidden';
          return;
        }
        startAnts(selectCanvas, x0, y0, dx, dy);
        downloadContainer.style.visibility = 'visible';
        clipContext.drawImage(pictureCanvas,
          x0 + Math.min(0, dx), y0 + Math.min(0, dy), w, h,
          0, 0, w, h);
        downloadContainer.style.visibility = (w*h == 0 ? 'hidden' : 'visible');
        downloadContainer.style.top = Math.min(y0, y) + 'px';
      }
      function mouseup(event) {
        selectCanvas.onmousemove = undefined;
        document.onmouseup = undefined;
        targetImage.src = clipCanvas.toDataURL();
        targetImage.style.display = 'block';
      }
      selectCanvas.onmousemove = mousemove;
      document.onmouseup = mouseup;
      targetImage.style.display = 'none';
      mousemove(event);
    };
    pictureCanvas.width = selectCanvas.width = width;
    pictureCanvas.height = selectCanvas.height = height;
    downloadContainer.style.left = width + 25 + 'px';
    downloadContainer.appendChild(clipCanvas);
    paintRandomPicture(pictureCanvas);
  }

  return {
    load: load
  };
})();

onload = CanvasRegionToImage.load;
</script>
</head>
<body>

<canvas id="pictureCanvas"></canvas>

<canvas id="selectCanvas"></canvas>

<div id="downloadContainer">
  <div class="label"> right-click above to download this image </div>
  <img id="targetImage">
</div>

</body>
</html>
<commit_msg>Animate a 1x1 square moving around the selection<commit_after><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body, div, canvas, img {
  margin: 0;
  padding: 0;
}
#targetImage {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
}
canvas {
  display: block;
}
#pictureCanvas, #selectCanvas, #downloadContainer {
  position: fixed;
}
#downloadContainer {
  visibility: hidden;
}
#downloadContainer .label {
  position: absolute;
  width: 500px;
  bottom: -25px;
  font-family: sans-serif;
  font-size: 17px;
  color: #444;
}
#selectCanvas {
  opacity: 0.5;
  cursor: default;
}
</style>
<script>
var CanvasRegionToImage = (function () {
  'use strict';

  var width = 400,
      height = 500,
      ants = {
        size: 3
      };

  // Returns a random RGB string (RGBA if alpha is true).
  function randomColor(alpha) {
    var rgb = [
      Math.floor(Math.random() * 255),
      Math.floor(Math.random() * 255),
      Math.floor(Math.random() * 255)
    ];
    if (alpha) {
      rgb.push(Math.random());
    }
    return 'rgb' + (alpha ? 'a' : '') + '(' + rgb.join(', ') + ')';
  }

  // Paints the given canvas with random circles and rectangles.
  function paintRandomPicture(canvas) {
    var context = canvas.getContext('2d'),
        width = canvas.width,
        height = canvas.height,
        i, x, y, r;
    context.fillStyle = randomColor();
    context.fillRect(0, 0, width, height);
    for (i = 0; i < 300; ++i) {
      x = Math.floor(Math.random() * width);
      y = Math.floor(Math.random() * height);
      r = Math.floor(width/9 + Math.random() * width/4);
      context.fillStyle = randomColor(true);
      context.save();
      context.translate(x, y);
      context.rotate(Math.random() * Math.PI);
      context.scale(1, 0.2 + 1.6*Math.random());
      if (Math.random() < 0.6) {
        context.fillRect(-r/2, -r/2, r/2, r/2);
      } else {
        context.beginPath();
        context.arc(0, 0, r/3, 0, 2 * Math.PI);
        context.fill();
        context.closePath();
      }
      context.restore();
    }
    return canvas;
  }

  function startAnts(canvas, x, y, w, h) {
    var context = canvas.getContext('2d'),
        c = 2*(w + h + 2),
        startTime;
    function update() {
      var elapsed = Date.now() - startTime,
          s = elapsed / 50;
      while (s >= c) {
        s -= c;
      }
      s = Math.round(s);
      context.clearRect(0, 0, canvas.width, canvas.height);
      if (!ants.running) {
        return;
      }
      context.fillStyle = '#fff';
      context.fillRect(x - 1, y - 1, w + 2, h + 2);
      context.clearRect(x, y, w, h);
      context.fillStyle = '#000';
      if (s < w + 1) {
        context.fillRect(x - 1 + s, y - 1, 1, 1);
      } else if (s < w + h + 2) {
        s -= w + 1;
        context.fillRect(x + w, y - 1 + s, 1, 1);
      } else if (s < 2*w + h + 3) {
        s -= w + h + 2;
        context.fillRect(x + w - s, y + h, 1, 1);
      } else {
        s -= 2*w + h + 3;
        context.fillRect(x - 1, y + h - s, 1, 1);
      }
      requestAnimationFrame(update);
    }
    ants.running = true;
    startTime = Date.now();
    update();
  }

  function stopAnts(canvas) {
    ants.running = false;
  }

  function load() {
    var targetImage = document.getElementById('targetImage'),
        downloadContainer = document.getElementById('downloadContainer'),
        pictureCanvas = document.getElementById('pictureCanvas'),
        selectCanvas = document.getElementById('selectCanvas'),
        clipCanvas = document.createElement('canvas'),
        clipContext = clipCanvas.getContext('2d');
    selectCanvas.onmousedown = function (event) {
      var x0 = Math.max(0, Math.min(event.clientX, width)),
          y0 = Math.max(0, Math.min(event.clientY, height));
      function mousemove(event) {
        var x = Math.max(0, Math.min(event.clientX, width)),
            y = Math.max(0, Math.min(event.clientY, height)),
            dx = x - x0, w = Math.abs(dx),
            dy = y - y0, h = Math.abs(dy);
        clipCanvas.width = w;
        clipCanvas.height = h;
        stopAnts(selectCanvas);
        if (w*h == 0) {
          downloadContainer.style.visibility = 'hidden';
          return;
        }
        startAnts(selectCanvas, Math.min(x0, x), Math.min(y0, y), w, h);
        downloadContainer.style.visibility = 'visible';
        clipContext.drawImage(pictureCanvas,
          x0 + Math.min(0, dx), y0 + Math.min(0, dy), w, h,
          0, 0, w, h);
        downloadContainer.style.visibility = (w*h == 0 ? 'hidden' : 'visible');
        downloadContainer.style.top = Math.min(y0, y) + 'px';
      }
      function mouseup(event) {
        selectCanvas.onmousemove = undefined;
        document.onmouseup = undefined;
        targetImage.src = clipCanvas.toDataURL();
        targetImage.style.display = 'block';
      }
      selectCanvas.onmousemove = mousemove;
      document.onmouseup = mouseup;
      targetImage.style.display = 'none';
      mousemove(event);
    };
    pictureCanvas.width = selectCanvas.width = width;
    pictureCanvas.height = selectCanvas.height = height;
    downloadContainer.style.left = width + 25 + 'px';
    downloadContainer.appendChild(clipCanvas);
    paintRandomPicture(pictureCanvas);
  }

  return {
    load: load
  };
})();

onload = CanvasRegionToImage.load;
</script>
</head>
<body>

<canvas id="pictureCanvas"></canvas>

<canvas id="selectCanvas"></canvas>

<div id="downloadContainer">
  <div class="label"> right-click above to download as an image </div>
  <img id="targetImage">
</div>

</body>
</html>

{'fraction_non_alphanumeric': 0.15535870729095688, 'fraction_numerical': 0.019663194782439403, 'mean_word_length': 2.5100785787495727, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 46, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 26, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2909363', 'n_tokens_mistral': 3512, 'n_tokens_neox': 3349, 'n_words': 784}