let pre = null;

let probTable = null;

​

function preload(){

  loadClassifier('0.0.1');

}

​

function setup() {

  let canvas = createCanvas(200,200);

  canvas.parent('Canvas');

  background(255);

  let predict = select('#predict');

  predict.mousePressed(guessTheNumber);

  let cb = select('#clearB');

  cb.mousePressed(cc);

  pre = select('#pred');

  probTable = select('#probTable'); // Add a reference to the table element

}

function cc(){

  clear();

  background(255);

}

​

function guessTheNumber() {

  let inputs = [];

  let img = get();

  img.resize(28, 28);

  img.loadPixels();

  for (let i = 0; i < 28 * 28; i++) {

    let bright = img.pixels[i * 4];

    inputs[i] = (255 - bright) / 255.0;

  }

  pred(inputs);

}

​

function pred(input) {

  if (window.classifier) {

    window.classifier.predict([tf.tensor(input).reshape([1, 28, 28, 1])]).array().then(function(scores) {

      scores = scores[0];

​

      let predicted = scores.indexOf(Math.max(...scores));

      pre.html("Erkannt: " + predicted);

​

      updateProbabilitiesTable(scores); // Update the probabilities table

    });

  } else {

    setTimeout(function() {

      pred(input)

    }, 50);

    s.html("Loading Model...Please Wait!");

  }

}

​

function updateProbabilitiesTable(scores) {

  // Clear the table first

  probTable.html('');

​

  // Add table headers

  let headerRow = createElement('tr');

  headerRow.child(createElement('th', 'Ziffer'));

  headerRow.child(createElement('th', 'Wahrscheinlichkeiten'));

  probTable.child(headerRow);

  scores = normalize(scores);

  console.log(scores)

​

  // Populate the table with probabilities

  for (let i = 0; i < scores.length; i++) {

    let row = createElement('tr');

    row.child(createElement('td', i));

    let formattedScore = scores[i] < 0.001 ? '0.000' : nf(scores[i], 1, 3);

    row.child(createElement('td', formattedScore));

    probTable.child(row);

  }

}

​

function normalize(array) {

  // Berechne die Summe des Arrays

  let sum = array.reduce((a, b) => a + b, 0);

  console.log(sum)

​

  // Wenn die Summe 0 ist, um eine Division durch 0 zu vermeiden

  if (sum === 0) {

    return array; // Gebe das unveränderte Array zurück, da es nicht normalisiert werden kann

  }

​

  // Teile jedes Element des Arrays durch die Summe, um die Wahrscheinlichkeiten zu normalisieren

  return array.map(item => item / sum);

}

​

function draw() {

  stroke(0);

  strokeWeight(12);

  if (mouseIsPressed) {

    line(pmouseX, pmouseY, mouseX, mouseY);

  }

}

​