// Load the Keras model
model = tf.loadModel('model.json');

model.then(function(model) {
  window.keras_model = model;
  window.classes = [
    '20',
    '30',
    '50',
    '[...]',
    'Kreisverkehr',
    'Überholverbot für PkWs aufgehoben',
    'Überholverbot für LkWs aufgehoben',
  ];
}).catch(function(e){alert(e);})

function loadImage() {
      var input, file, fr, img;

      if (typeof window.FileReader !== 'function') {
        alert("The file API isn't supported on this browser yet.");
        return;
      }

      input = document.getElementById('imgfile');
      else if (!input.files) {
        alert("This browser doesn't seem to support the `files` property of file inputs.");
      }
      else if (!input.files[0]) {
        alert("Please select a file before clicking 'Load'");
      }
      else {
        file = input.files[0];
        fr = new FileReader();
        fr.onload = createImage;
        fr.readAsDataURL(file);
      }

      function createImage() {
        img = new Image();
        img.onload = imageLoaded;
        img.src = fr.result;
      }

      function predict() {
        // see below
        [...]
      }

      function imageLoaded() {
        var canvas = document.getElementById("canvas")
        canvas.width = 32;
        canvas.height = 32;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, 32, 32);

        predict();
      }
         
      function show_result(top_n, data) {
         // see below
        [...]
      }
    }

function predict() {
  // Get the pixels from the canvas
  var canvas = document.getElementById("canvas")
  tensor = tf.fromPixels(canvas)

  // convert the int8 rgb values which are from 0 to 255
  // to float values -> this is how the model was trained ]0, 1]
  float_tensor = tensor.toFloat().div(tf.scalar(255));

  // Make sure the image has the correct size under every circumstance
  sized = tf.image.resizeBilinear(float_tensor, [32, 32])
  // The predict method of a model works on batches of images so 
  // we wrap the single image into a batch
  batch = sized.expandDims(0);

  // this returns an operation and not an array
  predictions = window.keras_model.predict(batch)

  // evaluate the operation and grab the data
  predictions.data().then((data) => {
    // data is a TypedArray
    console.log(data);
    // convert it to a usual Array
    var data =  Array.prototype.slice.call(data);
    
    // We could use tensorflowjs to get the best prediction
    // result = predictions.as1D().argMax();
    // result.print()
    // result.data().then(function(res) {alert(window.classes[res]); })
    
    // But we want to get the top 5 guesses so we use a custom function
    var top_n = get_top_n(data, 5);
    show_result(top_n, data);
  })
}

function get_top_n(iterable, n) {
  var top_n_idx = [];
  var max_ = 0;
  var candidate;

  // make a copy
  var ary = iterable.slice();

  // iterate n times
  for (var i=0; i<n; i++) {
    max_ = -1;
    candidate = null;

    // get the max entry
    for (var c=0; c<ary.length; c++) {
      if (max_ < ary[c]) {
        candidate = c;
        max_ = ary[c];
      }
    }

    top_n_idx.push(candidate);

    // take the max entry out of the race by setting it
    // to a low value
    ary[candidate] = -1;
  }

  return top_n_idx;
}

function show_result(top_n, data) {
  // A flexbox container with a div on the left side and
  // one on the right side
  var d = document.createElement('div');
  d.className = "container";
  var d2 = document.createElement('div');
  d2.className = "fixed";
  var d3 = document.createElement('div');
  d3.className = "flex-item";

  // A canvas to show the image
  var c = document.createElement('canvas');
  c.width = 32*4;
  c.height = 32*4;
  var ctx_large = c.getContext("2d");
  ctx_large.drawImage(img,0,0, 32*4, 32*4);

  // Add the image on the left side
  d2.appendChild(c);

  // Add a list of top n predictions on the right side
  var ul = document.createElement('ol');
  for (var i=0; i<top_n.length; i++) {
    if (data[top_n[i]]) {
      var txt = window.classes[top_n[i]] + " " + data[top_n[i]].toFixed(2); + ",";
    } else {
      var txt = "null";
    }
    var li = document.createElement('li');
    li.innerHTML = txt;
    ul.appendChild(li);
  }
  d3.appendChild(ul);

  d.appendChild(d2);
  d.appendChild(d3);
  
  // the container for all results
  var results = document.getElementById("results");

  // insert the new result at the beginning of the list
  results.insertBefore(d, results.firstChild);
}