$(document).ready(function() {

        //initialize all modals           
        $('.modal').modal();

    $(".btnanalyze").click(function() {
        analyze();
    });
});

var loading = false;

function analyze() {
    var img = document.getElementById("canvas").toDataURL();

    Tesseract.recognize(img).progress((progress) => {

        if (progress.status == "recognizing text") {
           loading = true;
        }
    }).then((result) => {
        loading = false;
        $(".output").text(result.text);
        $('.modal').modal("open");

        $(".determinate").css("width", "0%");
    });
}

setInterval(updateProgress(), 500);

function updateProgress(percent) {
    if(loading == true) {
        $(".determinate").css("width", progress.progress * 100 + "%");
    }
    
}