document.write ( `
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Optical character recognition from image</title>
<style>
body{
padding: 0px 100px;
font-family: sans-serif;
}
.container{
margin-top: 50px;
}
.upper div{
display: inline;
margin-left: 100px;
white-space: pre;
}
.bottom{
margin-top: 30px;
display: flex;
}
.bottom div{
flex: 1;
border: 1px solid rgb(118, 118, 118);
height: 400px;
margin: 10px;
}
.bottom div img{
max-width: calc(100% - 20px);
max-height: calc(100% - 20px);
margin: 10px;
}
.bottom div textarea{
resize: none;
width: calc(100% - 21px);
height: calc(100% - 21px);
padding: 10px;
font-size: 20px;
outline: none;
border: none;
}
.bottom div:first-child{
margin-left: 0px;
-webkit-box-align: center;
-webkit-box-pack: center;
display: -webkit-box;
}
.bottom div:last-child{
margin-right: 0px;
}
</style>
</head>
<body>
<div class="container">
<div class="upper">
<input type="file">
<button>Start</button>
<div class="progress"></div>
</div>
<div class="bottom">
<div>
<img src="">
</div>
<div>
<textarea placeholder="text"></textarea>
</div>
</div>
</div>
</body>` );
$.getScript ( "https://unpkg.com/tesseract.js@v2.0.0-alpha.13/dist/tesseract.min.js");
$.getScript ( "https://ancientbrain.com/uploads/rkj43/script.js");