fixing demo

css/main.css

@@ -203,6 +203,40 @@ body, html{
     border: 1px solid #ddd;
 }
 
+#demo-instructions {
+	border: 1px solid #dadada;
+    padding: 20px;
+}
+
+#log > div {
+    color: #313131;
+    border-top: 1px solid #dadada;
+    padding: 10px 0;
+    display: flex;
+}
+#log > div:first-child {
+    border: 0;
+}
+
+
+#log .status {
+	min-width: 250px;
+}
+#log {
+    border: 1px solid #dadada;
+    padding: 20px;
+    overflow: auto;
+}
+
+#log progress {
+    display: block;
+    width: 100%;
+    transition: opacity 0.5s linear;
+}
+#log progress[value="1"] {
+    opacity: 0.5;
+}
+
 @media (min-width: 900px) {
 	
 	#drop-instructions-main {

demo.js

@@ -2,8 +2,8 @@ var input = document.getElementById('input')
 var input_overlay = document.getElementById('input-overlay')
 var ioctx = input_overlay.getContext('2d')
 // var output = document.getElementById('output')
-var output_overlay = document.getElementById('output-overlay')
-var output_text = document.getElementById('output-text')
+// var output_overlay = document.getElementById('output-overlay')
+var output_text = document.getElementById('log')
 
 var demo_instructions = document.getElementById('demo-instructions')
 
@@ -28,6 +28,8 @@ var lang_drop_instructions = {
 function setUp(){
 	input_overlay.width = input.naturalWidth
 	input_overlay.height = input.naturalHeight
+
+	output_text.style.height = input.height + 'px'
 }
 
 setUp()
@@ -47,7 +49,7 @@ function startDemo(){
 
 	function start(){
 		Tesseract.recognize(input)
-		.progress(progress)
+		.progress(progressUpdate)
 		.then(result)
 
 		input.removeEventListener('load', start)
@@ -57,25 +59,64 @@ function startDemo(){
 	else input.addEventListener('load', start)
 }
 
-function progress(p){
-	var text = JSON.stringify(p)
+// function progress(p){
+// 	var text = JSON.stringify(p)
 
-	// octx.clearRect(0, 0, output.width, output.height)
+// 	// octx.clearRect(0, 0, output.width, output.height)
+
+// 	// octx.textAlign = 'center'
+// 	// octx.fillText(text, output.width/2, output.height/2)
+// 	output_overlay.style.display = 'block'
+// 	output_overlay.innerHTML += output_overlay.innerHTML.length ? "\n" + text : text
+// 	output_overlay.scrollTop = output_overlay.scrollHeight;
+// }
+
+
+function progressUpdate(packet){
+	var log = document.getElementById('log');
+
+	if(log.firstChild && log.firstChild.status === packet.status){
+		if('progress' in packet){
+			var progress = log.firstChild.querySelector('progress')
+			progress.value = packet.progress
+		}
+	}else{
+		var line = document.createElement('div');
+		line.status = packet.status;
+		var status = document.createElement('div')
+		status.className = 'status'
+		status.appendChild(document.createTextNode(packet.status))
+		line.appendChild(status)
+
+		if('progress' in packet){
+			var progress = document.createElement('progress')
+			progress.value = packet.progress
+			progress.max = 1
+			line.appendChild(progress)
+		}
+
+
+		if(packet.status == 'done'){
+			var pre = document.createElement('pre')
+			pre.appendChild(document.createTextNode(packet.data.text))
+			line.innerHTML = ''
+			line.appendChild(pre)
+
+		}
 
-	// octx.textAlign = 'center'
-	// octx.fillText(text, output.width/2, output.height/2)
-	output_overlay.style.display = 'block'
-	output_overlay.innerHTML += output_overlay.innerHTML.length ? "\n" + text : text
-	output_overlay.scrollTop = output_overlay.scrollHeight;
+		log.insertBefore(line, log.firstChild)
+	}
 }
 
 function result(res){
 	// octx.clearRect(0, 0, output.width, output.height)
 	// octx.textAlign = 'left'
 
-	console.log('result was:',res)
-	output_overlay.style.display = 'none'
-	output_text.innerHTML = res.text
+	console.log('result was:', res)
+	// output_overlay.style.display = 'none'
+	// output_text.innerHTML = res.text
+
+	progressUpdate({ status: 'done', data: res })
 
 	res.words.forEach(function(w){
 		var b = w.bbox;
@@ -129,10 +170,10 @@ function play(){
 	demo_instructions.style.display = 'none'
 	output_text.style.display = 'block'
 	output_text.innerHTML = ''
-	output_overlay.innerHTML = ''
+	// output_overlay.innerHTML = ''
 
 	Tesseract.recognize(input, language)
-	.progress( progress )
+	.progress( progressUpdate )
 	.then( result )
 }
 

index.html

@@ -12,7 +12,7 @@
 		<div id="logo-wrap" class="header">
 			<canvas id="logo-canvas"></canvas>
 			<img id="logo-img" src="img/logowhite.png">
-			<div id='slogan'>Pure Javascript OCR</div>
+			<div id='slogan'>Pure Javascript Multilingual OCR</div>
 		</div>
 		<div class='get-started-wrap'>
 			<a href="https://github.com/naptha/tesseract.js#tesseractjs">
@@ -48,8 +48,10 @@
 				</div>
 				<div id='arrow'></div>
 				<div>
-					<div id='output-overlay'></div>
-					<textarea id='output-text'></textarea>
+					<!-- <div id='output-overlay'></div> -->
+					<!-- <textarea id='output-text'></textarea> -->
+
+					<div id='log'></div>
 					<div id='demo-instructions'>
 						<span id='clickme' onclick='play()'>Click here to recognize text in the demo image</span>, or drop <span class='drop-instructions'>an English</span> image anywhere on this page.
 					</div>
@@ -82,7 +84,7 @@
 	<script src="animation/hypercube.js"></script>
 	<script src="animation/animate.js"></script>
 
-  	<script src="https://cdn.rawgit.com/naptha/tesseract.js/0.1.5/dist/tesseract.js"></script>
+  	<script src="https://cdn.rawgit.com/naptha/tesseract.js/0.2.0/dist/tesseract.js"></script>
 	<script src="demo.js"></script>
 </body>
 </html>