<commit_before>var RESIZE = 10; // Scale pattern canvas by this much

var out = document.getElementById('out');
var scaled = document.getElementById('scaled');

var img = null;
document.getElementById('file').onchange = function(e) {
  var files = e.target.files || e.dataTransfer.files;
  update(files[0]);
};

document.getElementById('palette').onchange = function(e) {
  if (img == null) { return; }
  palettize();
};

var samples = document.getElementsByTagName('img');
for (var i = 0; i < samples.length; i++) {
  samples[i].onclick = function(e) {
    img = e.target;
    palettize();
  };
  samples[i].style.cursor = 'pointer';
}

function colorAt(arr, w, x, y) {
  var idx = 4*w*y + 4*x;
  return arr[idx], arr[idx+1], arr[idx+2], arr[idx+3];
}

function palettize() {
  var orig = document.createElement('canvas');
  var origCtx = orig.getContext('2d');
  orig.width = img.width;
  orig.height = img.height;
  origCtx.drawImage(img, 0, 0);
  document.getElementById('orig').src = orig.toDataURL();

  var outCtx = out.getContext('2d');
  out.width = img.width;
  out.height = img.height;

  // Apply palette to the image
  var imgd = origCtx.getImageData(0, 0, orig.width, orig.height);
  var palette = palettes[document.getElementById('palette').value];
  var pix = imgd.data;
  var map = {};
  closestMap = {};
  for (var i = 0, n = pix.length; i < n; i += 4) {
    var r = pix[i  ] * pix[i+3]/255;
    var g = pix[i+1] * pix[i+3]/255;
    var b = pix[i+2] * pix[i+3]/255;
    if (pix[i+3] == 0) {
      // transparent
      continue;
    }
    var cl = closest([r, g, b], palette.colors);
    if (cl in map) { map[cl]++; } else { map[cl] = 1; }
    pix[i  ] = cl[0];
    pix[i+1] = cl[1];
    pix[i+2] = cl[2];
  }
  outCtx.putImageData(imgd, 0, 0);
  out.onclick = function() { window.open(out.toDataURL()); };

  if (orig.width * orig.height < 1000000 ||
      !window.confirm('This is a large image, are you sure you want to generate the pattern? It may take a while...')) {
    drawCanvas();
  }

  drawCanvas();

  var s = document.getElementById('selected');
  var st = document.getElementById('selected-text');
  var sc = document.getElementById('selected-color');
  scaled.onmousemove = function(e) {
    var x = Math.floor(e.offsetX / RESIZE);
    var y = Math.floor(e.offsetY / RESIZE);
    var p = outCtx.getImageData(x, y, 1, 1).data;
    s.style.display = (p[3] == 0) ? 'none': '';
    if (p[3] == 0) {
      return;
    }
    s.style.position = 'absolute';
    s.style.top = e.pageY + 20;
    s.style.left = e.pageX + 20;
    for (var i = 0; i < palette.colors.length; i++) {<commit_msg>improve performance for mousemove on large canvases<commit_after>var RESIZE = 10; // Scale pattern canvas by this much

var out = document.getElementById('out');
var scaled = document.getElementById('scaled');

var img = null;
document.getElementById('file').onchange = function(e) {
  var files = e.target.files || e.dataTransfer.files;
  update(files[0]);
};

document.getElementById('palette').onchange = function(e) {
  if (img == null) { return; }
  palettize();
};

var samples = document.getElementsByTagName('img');
for (var i = 0; i < samples.length; i++) {
  samples[i].onclick = function(e) {
    img = e.target;
    palettize();
  };
  samples[i].style.cursor = 'pointer';
}

function colorAt(arr, w, x, y) {
  var idx = 4*w*y + 4*x;
  return arr[idx], arr[idx+1], arr[idx+2], arr[idx+3];
}

function palettize() {
  var orig = document.createElement('canvas');
  var origCtx = orig.getContext('2d');
  orig.width = img.width;
  orig.height = img.height;
  origCtx.drawImage(img, 0, 0);
  document.getElementById('orig').src = orig.toDataURL();

  var outCtx = out.getContext('2d');
  out.width = img.width;
  out.height = img.height;

  // Apply palette to the image
  var imgd = origCtx.getImageData(0, 0, orig.width, orig.height);
  var palette = palettes[document.getElementById('palette').value];
  var pix = imgd.data;
  var map = {};
  closestMap = {};
  for (var i = 0, n = pix.length; i < n; i += 4) {
    var r = pix[i  ] * pix[i+3]/255;
    var g = pix[i+1] * pix[i+3]/255;
    var b = pix[i+2] * pix[i+3]/255;
    if (pix[i+3] == 0) {
      // transparent
      continue;
    }
    var cl = closest([r, g, b], palette.colors);
    if (cl in map) { map[cl]++; } else { map[cl] = 1; }
    pix[i  ] = cl[0];
    pix[i+1] = cl[1];
    pix[i+2] = cl[2];
  }
  outCtx.putImageData(imgd, 0, 0);
  out.onclick = function() { window.open(out.toDataURL()); };

  if (orig.width * orig.height < 1000000 ||
      !window.confirm('This is a large image, are you sure you want to generate the pattern? It may take a while...')) {
    drawCanvas();
  }

  drawCanvas();

  var s = document.getElementById('selected');
  var st = document.getElementById('selected-text');
  var sc = document.getElementById('selected-color');
  scaled.onmousemove = function(e) {
    var x = Math.floor(e.offsetX / RESIZE);
    var y = Math.floor(e.offsetY / RESIZE);
    var idx = y*out.width*4 + x*4;
    var p = imgd.data.subarray(idx, idx+4);
    s.style.display = (p[3] == 0) ? 'none': '';
    if (p[3] == 0) {
      return;
    }
    s.style.position = 'absolute';
    s.style.top = e.pageY + 20;
    s.style.left = e.pageX + 20;
    for (var i = 0; i < palette.colors.length; i++) {
{'fraction_non_alphanumeric': 0.18250519554128095, 'fraction_numerical': 0.022482524088418665, 'mean_word_length': 3.2015873015873018, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, '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': '1136562', 'n_tokens_mistral': 2038, 'n_tokens_neox': 1932, 'n_words': 474}