website.html

<!DOCTYPE html>
<html>
<head>
	<title>OCR Website</title>
	<style type="text/css"></style>
</head>
<body>
	
    <center>
	<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
    <div id="imgTest"></div>
    <h3>OCR Output</h3>
    <p id="ocrOutput">OCR Result</p>
    <h3>Spanish translate</h3>
    <p id="translate">Spanish text</p>
    </center>
    <script type='text/javascript'>
    function encodeImageFileAsURL() {

    var filesSelected = document.getElementById("inputFileToLoad").files;
    
    if (filesSelected.length > 0) {

        var fileToLoad = filesSelected[0];
        var fileReader = new FileReader();

        fileReader.onload = function(fileLoadedEvent) {

        var srcData = fileLoadedEvent.target.result; // <--- data: base64
        var newImage = document.createElement('img');
        
        newImage.src = srcData;
        document.getElementById("imgTest").innerHTML = newImage.outerHTML;
        
        console.log(srcData);

        var request = new XMLHttpRequest();

        request.open('GET', "http:localhost:5000/ocr?img="+srcData, true);
        request.onload = function(){
        
        var data = JSON.parse(this.response);
        document.getElementById("ocrOutput").innerHTML = data.ocrText;
        document.getElementById("translate").innerHTML = data.trans;

        console.log(data.ocrText);
        console.log(data.trans);
        }
        
        request.send();
    }
    fileReader.readAsDataURL(fileToLoad);

    }
  }
</script>

</body>
</html>