AI Visualizer

<!DOCTYPE html> JS is far too hard for me to understand whereas PY is very easy -- the cell coloring is somehow wrong
<html>
<head>
<title>AI Visualizer</title>
<style>
#visualizer {
  width: 1400px;
  height: 600px;
  overflow-y: scroll;
  background-color: black;
}

.cell {
  width: 20px;
  height: 18px;
  display: inline-block;
  text-align: center;
  color: white;
  font-size: 12px;
}

.result,
.gain,
.weights-container,
.line {
  display: inline-block;
  width: 80px;
  text-align: left;
  color: white;
  padding-left: 10px;
}
</style>
</head>
<body>
<h1>AI Visualizer</h1>
<button id="start">Start</button>
<button id="pause">Pause</button>
<button id="reset">Reset</button>
<div id="controls">
<div id="visualizer"></div>
</div>

<script>
let running = false;
let data = [];
let weights = {};
let progress = [];
let line = 0;

// Color constants
const j = 256 / 400;
const a = Array.from({ length: 400 }, (_, i) => Math.floor(i * j));
const b = Array.from({ length: 300 }, () => 0);
const red = [...a.reverse(), ...b, ...b];
const green = [...b, ...b, ...a];
const blue = [...b, ...a, ...b];

function initializeData() {
  // Generate 5000 data points
  for (let i = 0; i < 5000; i++) {
    const category = (i % 5) + 1;
    const string = generateString(category);
    data.push({ string, category });
  }

  // Initialize weights
  for (let i = 1; i <= 5; i++) {
    weights[i] = {};
  }
}

function generateString(category) {
  let result = '';
  switch(category) {
    case 1:
      result = '1234567yellow';
      break;
    case 2:
      result = '123456789helloworld';
      break;
    case 3:
      result = 'python3407';
      break;
    case 4:
      result = 'thankyou12345';
      break;
    case 5:
      for (let i = 0; i < 12; i++) {
        result += String.fromCharCode(65 + Math.floor(Math.random() * 26));
        result += Math.floor(Math.random() * 10);
      }
      result += String.fromCharCode(65 + Math.floor(Math.random() * 26));
      break;
  }
  while (result.length < 25) {
    result += String.fromCharCode(65 + Math.floor(Math.random() * 26));
  }
  return result.split('').sort(() => Math.random() - 0.5).join('');
}

function getNodes(string) {
  const nodes = [];
  for (let i = 0; i < string.length; i++) {
    for (let j = i + 1; j < string.length; j++) {
      nodes.push(`${string[i]}:${i}:${string[j]}:${j}`);
    }
  }
  return nodes;
}

function predict(nodes, string) {
  const w = {};
  const cell_colors = {};
  for (let i = 0; i < string.length; i++) {
    cell_colors[i] = {};
    cell_colors[i][string[i]] = 0;
  }
  for (let category = 1; category <= 5; category++) {
    w[category] = 0;
    for (const node of nodes) {
      const [chr, idxStr] = node.split(':');
      const idx = parseInt(idxStr);
      const sum = weights[category][node] || 0;
      w[category] += sum;
      cell_colors[idx][chr] += sum;
    }
  }
  return [Object.entries(w).sort((a, b) => b[1] - a[1]), cell_colors];
}

function train(correctCategory, nodes) {
    for (const node of nodes) {
      weights[correctCategory][node] = (weights[correctCategory][node] || 50) + 1;
    }
}

function step() {
  const { string, category } = data[line % data.length];
  const nodes = getNodes(string);
  const [ sortedSums, cell_colors ] = predict(nodes, string);
  const prediction = sortedSums[0][0];

  const isCorrect = prediction == category;
  if (!isCorrect) {
    train(category, nodes);
  }
  progress.push(isCorrect ? 1 : 0);
  if (progress.length > 100) progress.shift();

  const gain = progress.reduce((a, b) => a + b, 0);
  const gainText = `${gain}% gain`;
  const resultText = isCorrect ? `Y [${category}]` : `N [${category}]`;

  visualize(string, category, isCorrect, gainText, resultText, nodes, sortedSums, cell_colors);

  line++;
}

function visualize(string, category, isCorrect, gainText, resultText, nodes, sortedSums, cell_colors) {
  const visualizer = document.getElementById('visualizer');
  const row = document.createElement('div');

  let valuesString = '';
  for (let idx = 0; idx < string.length; idx++) {
    let chr = string[idx];
    valuesString += `cell_colors[${idx}][${chr}] = ${cell_colors[idx][chr]}\n`;
  }

  for (let i = 0; i < string.length; i++) {
    const cell = document.createElement('div');
    cell.className = 'cell';
    cell.textContent = string[i];
    const value = cell_colors[i] ? cell_colors[i][string[i]] : 0;
    cell.style.backgroundColor = getColor(value || 0)
    row.appendChild(cell);
  }

  const result = document.createElement('span');
  result.className = 'result';
  result.textContent = resultText;
  row.appendChild(result);

  const gainElement = document.createElement('span');
  gainElement.className = 'gain';
  gainElement.textContent = gainText;
  row.appendChild(gainElement);

  for (let i = 0; i < sortedSums.length; i++) {
    const [category, weight] = sortedSums[i];
    const weightContainer = document.createElement('span');
    weightContainer.className = 'weights-container';
    const weightElement = document.createElement('span');
    weightElement.className = 'weights';
    weightElement.textContent = `${category}: ${weight}`;
    weightContainer.appendChild(weightElement);
    row.appendChild(weightContainer);
  }

  const lineElement = document.createElement('span');
  lineElement.className = 'line';
  lineElement.textContent = line + 1;
  row.appendChild(lineElement);

  visualizer.appendChild(row);
  visualizer.scrollTop = visualizer.scrollHeight;
}


function getColor(value) {
  const index = Math.min(Math.floor(value), 999);
  return `rgb(${red[index]}, ${green[index]}, ${blue[index]})`;
}

document.getElementById('start').addEventListener('click', () => {
  running = true;
  run();
});

document.getElementById('pause').addEventListener('click', () => {
  running = false;
});

document.getElementById('reset').addEventListener('click', () => {
  running = false;
  visualizer.innerHTML = '';
  line = 0;
  progress = [];
  weights = {};
  initializeData();
});

function run() {
  if (running) {
    step();
    requestAnimationFrame(run);
  }
}

initializeData();
</script>
</body>
</html>