text: //========================================================================
  // Drag and drop image handling
  //========================================================================
  
  var fileDrag = document.getElementById("file-drag");
  var fileSelect = document.getElementById("file-upload");
  
  // Add event listeners
  fileDrag.addEventListener("dragover", fileDragHover, false);
  fileDrag.addEventListener("dragleave", fileDragHover, false);
  fileDrag.addEventListener("drop", fileSelectHandler, false);
  fileSelect.addEventListener("change", fileSelectHandler, false);
  
  function fileDragHover(e) {
    // prevent default behaviour
    e.preventDefault();
    e.stopPropagation();
  
    fileDrag.className = e.type === "dragover" ? "upload-box dragover" : "upload-box";
  }
  
  function fileSelectHandler(e) {
    // handle file selecting
    var files = e.target.files || e.dataTransfer.files;
    fileDragHover(e);
    for (var i = 0, f; (f = files[i]); i++) {
      previewFile(f);
    }
  }
  
  //========================================================================
  // Web page elements for functions to use
  //========================================================================
  
  var imagePreview = document.getElementById("image-preview");
  var imageDisplay = document.getElementById("image-display");
  var uploadCaption = document.getElementById("upload-caption");
  var predResult = document.getElementById("pred-result");
  var download = document.getElementById("download");
  var loader = document.getElementById("loader");
  
  //========================================================================
  // Main button events
  //========================================================================
  
  function submitImage() {
  
    predResult.style.display = "none";
  
    // action for the submit button
    //console.log("submit");
    console.log("hi");
  
    if (!imageDisplay.src || !imageDisplay.src.startsWith("data")) {
      window.alert("Please select an image before submit.");
      return;
    }
  
    loader.classList.remove("hidden");
    imageDisplay.classList.add("loading");
    console.log("HELLO");
  
  
  
    // call the predict function of the backend
    //predResult.src = predictImage(imageDisplay.src);
  
    fetch("/predict", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(imageDisplay.src)
    })
      .then(resp => {
        if (resp.ok)
          resp.json().then(data => {
            displayResult(data, "pred-result");
            console.log("RESULT:");
            console.log(data.result);
            console.log(data);
  
            predResult.src = "data:image/png;base64," + data.result;
  
            predResult.style.display = "block";
            console.log("updating download");
            download.href = predResult.src;
            show(download);
          });
      })
      .catch(err => {
        console.log("An error occured", err.message);
        window.alert("Oops! Something went wrong.");
      });
  
  
  }
  
  function clearImage() {
    // reset selected files
    fileSelect.value = "";
  
    // remove image sources and hide them
    imagePreview.src = "";
    imageDisplay.src = "";
    //predResult.innerHTML = "";
    predResult.src = "";
  
    hide(imagePreview);
    hide(imageDisplay);
    hide(loader);
    hide(predResult);
    hide(download)
    show(uploadCaption);
  
    imageDisplay.classList.remove("loading");
  }
  
  function previewFile(file) {
    // show the preview of the image
    console.log(file.name);
    var fileName = encodeURI(file.name);
  
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      imagePreview.src = URL.createObjectURL(file);
  
      show(imagePreview);
      hide(uploadCaption);
  
      // reset
      //predResult.innerHTML = "";
      //predResult.src = "";
      imageDisplay.classList.remove("loading");
  
      displayImage(reader.result, "image-display");
    };
  }
  
  //========================================================================
  // Helper functions
  //========================================================================
  
  function predictImage(image) {
    fetch("/predict", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify(image)
    })
      .then(resp => {
        if (resp.ok)
          resp.json().then(data => {
            displayResult(data, "pred-result");
            console.log("RESULT:");
            console.log(data.result);
            console.log(data);
            //var image = document.createElement('img');
            //image.src = `data:image/png;base64,${data.result}`;
            //image.src = "data:image/png;base64," + data.result;
            //predResult.src = "data:image/png;base64," + data.result;
            let source = "data:image/png;base64," + data.result
            return(source);
            //return(`data:image/png;base64,${data.result}`)
  
            //displayResult(data);
          });
      })
      .catch(err => {
        console.log("An error occured", err.message);
        window.alert("Oops! Something went wrong.");
      });
  
  
  }
  
  function displayImage(image, id) {
    // display image on given id <img> element
    let display = document.getElementById(id);
    display.src = image;
    show(display);
  }
  
  
  
  function displayResult(image, id) {
    // display image on given id <img> element
    hide(loader);
    let display = document.getElementById(id);
    display.src = image;
    show(display);
  }
  
  /*function displayResult(data) {
    // display the result
    // imageDisplay.classList.remove("loading");
    hide(loader);
    predResult.innerHTML = data.result;
    show(predResult);
  }*/
  
  function hide(el) {
    // hide an element
    el.classList.add("hidden");
  }
  
  function show(el) {
    // show an element
    el.classList.remove("hidden");
  }