demo.html

<!doctype html>
<html>
	<head>
		<title>Ocracy - Optical Character Recognition in Javascript</title>
		<meta charset="utf8">
		<style>
			body {
				font-family: sans-serif;
				
				background: #eee;
				-moz-transition: background-color 0.5s;
				-webkit-transition: background-color 0.5s;
				-o-transition: background-color 0.5s;
				transition: background-color 0.5s;
			}
			body.dragging {
				background-color: #F0E6DC;
			}
			#main {
				margin-right: auto;
				margin-left: auto;
				padding: 10px;
				width: 600px;
			}
			h1 {
				font-size: 400%;
				margin-top: 30px;

			}
			div.content {
				padding: 50px;
			}
			canvas.content {
				
			}
			.output {
				background: rgb(255, 245, 211);
			}
			#output {
				padding: 20px;
				padding-bottom: 0;
				text-align: center; 
				min-height: 80px;
				-moz-transition: background-color 0.5s;
				-webkit-transition: background-color 0.5s;
				-o-transition: background-color 0.5s;
				transition: background-color 0.5s;
			}
			.content {
				background: white;
				margin-bottom: 50px;
				line-height: 1.5em;
			}
			.content.inverse {
				background: rgb(56, 56, 56);
				color: white;
			}

			.processing {
				background-color: rgb(211, 232, 255);
			}
			a {
				text-decoration: none;
				font-weight: bold;
			}
			h3 {
				text-align: center;
				font-style: italic;
			}
			.footer {
				font-size: x-small;
				text-align: center;
				margin-bottom: 50px;
			}
			#squish.squish { font-size: xx-small; }
			#squish.squishsquish { font-size: 7px; }
			#squish.squishsquishsquish { font-size: 5px; }
			#squish.squishsquishsquishsquish { font-size: 2px; }
			#squish.squishsquishsquishsquishsquish { display: none; }

			.buttons {
				position: absolute;
				margin-left: -60px;
				margin-top: -250px;
			}
			#demo {
				box-shadow: 0px 0px 35px rgba(0,0,0,0.2);
				margin-bottom: 50px;
				background: white;
			}
			#timing {
				font-size: x-small;
			}
			hr {
				border: none;
			}
			.buttons #clear { color: red; font-size: 400%; font-weight: bold; cursor: pointer;}
			.buttons #word { color: blue; font-size: 300%; font-weight: bold; cursor: pointer; margin-left: -2px;}
			.nose {
				-moz-transition: background-color 0.5s;
				-webkit-transition: background-color 0.5s;
				-o-transition: background-color 0.5s;
				transition: background-color 0.5s;
			}
			.nose:hover {
				background-color: rgb(255, 222, 211);
			}
		</style>
	</head>
	<body>
		<script src="console.image.js"></script>
		<div id="main">
			<input type="file" style="position:absolute; top: -100px" id="picker" onchange="picked_file(this.files[0])">

			<h1>the<span style="color: orange">ocr</span>acy&nbsp;<div style="font-size: small; font-weight: normal; display: inline">Optical Character Recognition in JS</div></h1>
			<div class="content">
				You know what would be really cool? If there was a thing where you could choose different prefixes for ocracy
				and clicking on them loads their respective sample documents

				plutocracy - something money related, 
				democracy - omg its a demo, murrica maybe
				aristocracy - the highest class in certain societies, especially those holding hereditary titles or offices. something british maybe
				isocracy - An isocracy is a form of government where all citizens have equal political power. The term derives from Greek "ἴσος" meaning "equal" and "κρατεῖν" meaning
				theocracy - something with dogma'an
				autocracy - a system of government by one person with absolute power.
				ethnocracy - Ethnocracy is a type of political regime, in which the state apparatus is appropriated by a dominant identity group to further its interests, power and resources.
				stratocracy - A stratocracy (from στρατός, stratos, "army" and κράτος, kratos, "dominion", "power") is a form of government headed by military chief
				idiocracy - wow such elitism
			</div>
			
			<div class="content inverse">
				Below is a <strong>simple demo</strong>, which should hopefully demonstrate the <strong>capabilities</strong> but will more likely show the substantial <strong>limitations</strong> of the library. 
				<hr>

				Hit the buttons on the left to <strong>reset the canvas</strong> or to randomly <strong>put some text</strong> in a random font. You can also try to <strong>draw something</strong> with your cursor.
			</div>
			<div id="demo">
				<div class="output">

					<div id="output">
						<div id="text"></div>
						<span id="timing"></span>
					</div>
				</div>
				<canvas id='c' class="" width="600" height="300"></canvas>
				<div class="buttons">
					<div id="clear" onclick="reset_canvas()">&times;</div>
					<div id="word" onclick="da_word()">&#8635;</div>
				</div>
				<div class="output nose" style="padding: 25px; cursor: pointer" onclick="open_picker()">
					You can also <strong>drag and drop</strong> an image from your computer <small>(JPEG, PNG, GIF, BMP, SVG, or NetPBM)</small> to feed into the text recognizer or <strong>choose a file</strong> by clicking anywhere on this box. 
					
				</div>

			</div>

			<div class="content">
				Many Exquisite

			</div>

			<div class="content">
				Such
				<div style="padding: 20px; font-family: monospace">
				Monospace
				</div>

				
			</div>

			<div class="content">
				Top <strong>Amusement</strong>
			</div>


			<div class="content">
				Much writing
			</div>

			<div class='footer'><div id='squish'>Hi. This was made by <a href="http://antimatter15.com">Kevin A-15</a>. Guillermo helped, but only about as much as I am big. I am a tiny footer, please don't <a href="javascript:void(document.getElementById('squish').className+='squish')">squish</a> me.</div>
			</div>
		</div>
<script src="1grams.js"></script>
<script src="2grams.js"></script>
<script src="threegrams_end.js"></script>
<script src="threegrams_start.js"></script>
<script src="threegrams_middle.js"></script>
<script src="grams.js"></script>


		<script src="convnet.js"></script>
		<script src="data/muchcommonequivfreqnoise28x10x30"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script> 

		<script>
			var c = document.getElementById('c'),
				o = c.getContext('2d');

			function reset_canvas(){
				o.fillStyle = 'white'
				o.fillRect(0, 0, c.width, c.height)
				o.fillStyle = 'black'	
			}

			// here's a really simple little drawing app so people can try their luck at
			// the lottery that is offline handwriting recognition
			var drag = false, lastX, lastY;
			c.onmousedown = function(e){ drag = true; lastX = 0; lastY = 0; e.preventDefault(); c.onmousemove(e) }
			c.onmouseup   = function(e){ drag = false; e.preventDefault(); runOCR() }
			c.onmousemove = function(e){
				e.preventDefault()
				var rect = c.getBoundingClientRect();
				var r = 5;

				function dot(x, y){
					o.beginPath()
					o.moveTo(x + r, y)
					o.arc(x, y, r, 0, Math.PI * 2)
					o.fill()
				}
				if(drag){
					var x = e.clientX - rect.left, 
						y = e.clientY - rect.top;
					
					if(lastX && lastY){
						var dx = x - lastX, dy = y - lastY;
						var d = Math.sqrt(dx * dx + dy * dy);
						for(var i = 1; i < d; i += 2){
							dot(lastX + dx / d * i, lastY + dy / d * i)
						}
					}
					dot(x, y)

					lastX = x;
					lastY = y;
				}
			}


			document.body.ondragover = function(){ document.body.className = 'dragging'; return false }
			document.body.ondragend = function(){ document.body.className = ''; return false }
			document.body.onclick = function(){document.body.className = '';}
			document.body.ondrop = function(e){
				e.preventDefault();
				document.body.className = '';
				picked_file(e.dataTransfer.files[0]);
				return false;
			}

			function open_picker(){
				var e = document.createEvent("MouseEvents");	
				e.initEvent('click', true, true);
				document.getElementById('picker').dispatchEvent(e);
			}

			function picked_file(file){
				if(!file) return;
				// document.getElementById("output").className = 'processing'

				var ext = file.name.split('.').slice(-1)[0];
				var reader = new FileReader();

				if(file.type == "image/x-portable-bitmap" || ext == 'pbm' || ext == 'pgm' || ext == 'pnm' || ext == 'ppm'){
					reader.onload = function(){
						reset_canvas();
						document.getElementById("text").innerHTML = 'Recognizing Text... This may take a while...'
						o.font = '30px sans-serif'
						o.fillText('No previews for NetPBM format.', 50, 100);
						runOCR(new Uint8Array(reader.result), true);
					}
					reader.readAsArrayBuffer(file)
				}else{
					reader.onload = function(){
						var img = new Image();
						img.src = reader.result;
						img.onerror = function(){
							reset_canvas();
							o.font = '30px sans-serif'
							o.fillText('Error: Invalid Image ' + file.name, 50, 100);
						}
						img.onload = function(){
							document.getElementById("text").innerHTML = 'Recognizing Text... This may take a while...'
							reset_canvas();
							var rat = Math.min(c.width / img.width, c.height / img.height);
							o.drawImage(img, 0, 0, img.width * rat, img.height * rat)
							var tmp = document.createElement('canvas')
							tmp.width = img.width;
							tmp.height = img.height;
							var ctx = tmp.getContext('2d')
							ctx.drawImage(img, 0, 0)
							var image_data = ctx.getImageData(0, 0, tmp.width, tmp.height);
							runOCR(image_data, true)
						}
						
					}
					reader.readAsDataURL(file)
				}
				
			}

			function mode(list,height){
				max = 0
				j=0
				b=[]
				for (var m=0;m< list.length;m++){
					var i=list[m]
					
					b[i] = typeof b[i] !== "undefined" ? b[i]+1:1
					if (b[i] > max) {max=b[i];j=i};
				}
				return j
			}

			net = new convnetjs.Net();
  			net.fromJSON(trained_network);

			function runOCR(image_data, raw_feed){
				document.getElementById("output").className = 'processing'
				var start = Date.now()
				
				image_data = o.getImageData(0, 0, c.width, c.height);
				var gray = grayscale(image_data);
				var contours = connected_img(mask(gray, 110))
				o.strokeStyle = 'red'
				o.fillStyle = 'red'
				o.font = '10px sans-serif'


				baselines = [[]];
				lastx = -1;

				blah = []

				// var tmp = document.createElement('canvas')
				// var tmpc = tmp.getContext('2d')
				// tmp.width = image_data.width
				// tmp.height = image_data.height
				// tmpc.putImageData(image_data,0,0)
				// console.image(tmp.toDataURL())

				equivalence_classes(
					contours.map(function(contour){
							return measure(contour, c.width)
						}
					), 
					function same_line(a, b){
							var v_overlap = Math.min(a.y1, b.y1) - Math.max(a.y0, b.y0);
							return v_overlap > 5;
				}).sort(function(a, b){
					return a[0].cy - b[0].cy
					// return a.cx - b.cx
				}).forEach(function(line){
					
					var lettersizes = []
					var i = 0;	

					var lettersbysize = equivalence_classes(line, function(metricsa, metricsb){
						return Math.abs(metricsa.y0-metricsb.y0)<3 //&&  Math.abs(metricsa.height-metricsb.height)<3
					}).sort(function(lettersa,lettersb){
						return lettersa[0].y0 - lettersb[0].y0
					}).forEach(function(letters){
						var lettersize = i++
						var j = 0
						var subclasses = equivalence_classes(letters, function(metricsa, metricsb){
							return Math.abs(metricsa.height-metricsb.height)<3 //&&  Math.abs(metricsa.height-metricsb.height)<3
						}).sort(function(lettersa,lettersb){
							return lettersa[0].height - lettersb[0].height
						}).forEach(function(subletters){
							var subsize = j++
							subletters.forEach(function(letter){
								lettersizes[[letter.cx, letter.cy]] = [lettersize,subsize]
								//console.log(letter)
							})							
						})

					})


					var y0 = line[0].y0+line[0].height

					line.sort(function(a, b){
						return a.cx - b.cx
					}).forEach(function(metrics){						
						o.strokeRect(metrics.x0, metrics.y0, metrics.width, metrics.height)
						var angle = 0;
						var vol = contour_to_vol(gray, metrics, c.width, angle)
						net.forward(vol)
						var type = 
						o.fillText(lettersizes[[metrics.cx, metrics.cy]][0].toString(), metrics.x0, y0+20)

						
						blah.push(trained_symbols[net.getPrediction()])
						// blah.push({
						// 	choices: trained_symbols[net.getPrediction()],
						// 	type: lettersizes[[metrics.cx, metrics.cy]]
						// })
					})
					console.log(blah)
					console.log(fullword(blah))
				})
				//console.log(contours)


			}


			function contour_to_vol(gray, metrics, width, angle){
				var vol = new convnetjs.Vol(24,24,1,0.0);
				var max_dim = Math.max(metrics.width, metrics.height) + 15;

				var aleph = document.createElement('canvas')
				aleph.width = max_dim;
				aleph.height = max_dim;

				var ale = aleph.getContext('2d')


				var zed = document.createElement('canvas')
				zed.width = 24;
				zed.height = 24;

				var ctx = zed.getContext('2d');
				document.body.appendChild(zed)
				
				var contour = metrics.shape;

				// ctx.drawImage(c, )
				ale.fillStyle = 'black'
				ale.fillRect(0, 0, max_dim, max_dim)
				ale.fillStyle = 'white'
				for(var i = 0; i < contour.length; i++){
					var p = contour[i],
						x = p % width,
						y = Math.floor(p / width);

					ale.fillRect(x - metrics.cx + max_dim / 2, y - metrics.cy + max_dim / 2, 2, 2)
				// 	var px = 12 + 24 * (x - metrics.cx) / max_dim,
				// 		py = 12 + 24 * (y - metrics.cy) / max_dim;

				// 	ctx.fillRect(px, py, 1, 1)
				// 	vol.w[Math.floor(px) + Math.floor(py) * 24] = 1;
				}
				ctx.fillRect(0, 0, zed.width, zed.height);

				ctx.translate(0, 0)
				ctx.rotate(angle)
				ctx.drawImage(aleph, 0, 0, zed.width, zed.height)

				var p = ctx.getImageData(0, 0, 24, 24).data;

				for(var i = 0; i < 24 * 24; i++){
					vol.w[i] = p[i * 4] / 255
				}

				// document.body.appendChild(aleph)
				return vol
			}

			function measure(contour, width){
				var x0 = Infinity, y0 = Infinity,
					x1 = 0,        y1 = 0;

				for(var i = 0; i < contour.length; i++){
					var p = contour[i],
						x = p % width,
						y = Math.floor(p / width);
					x0 = Math.min(x0, x);
					y0 = Math.min(y0, y);
					x1 = Math.max(x1, x);
					y1 = Math.max(y1, y);
				}
				return {
					width: x1 - x0 + 1,
					height: y1 - y0 + 1,
					x0: x0, y0: y0,
					x1: x1, y1: y1,
					cx: x0 / 2 + x1 / 2,
					cy: y0 / 2 + y1 / 2,
					size: contour.length,
					shape: contour
				}
			}

			function mask(img, thresh){
				var arr = new Uint8Array(img.width * img.height);
				for(var i = 0; i < arr.length; i++){
					if(img.data[i] > thresh) arr[i] = 1;
				}
				return {
					data: arr,
					width: img.width,
					height: img.height
				}
			}

			function grayscale(img){
				var arr = new Uint8Array(img.width * img.height);

				for(var i = 0; i < img.data.length; i += 4){
					var intensity = .2126 * img.data[i] + .7152 * img.data[i + 1] + .0722 * img.data[i + 2]
					arr[i / 4] = 255 - intensity;
				}
				return {
					data: arr,
					width: img.width,
					height: img.height
				}
			}

			function equivalence_classes(elements, is_equal){
				var node = []
				for(var i = 0; i < elements.length; i++){
					node.push({
						parent: 0,
						element: elements[i],
						rank: 0
					})
				}
				for(var i = 0; i < node.length; i++){
					var root = node[i]
					while(root.parent){
						root = root.parent;
					}
					for(var j = 0; j < node.length; j++){
						if(i == j) continue;
						if(!is_equal(node[i].element, node[j].element)) continue;
						var root2 = node[j];
						while(root2.parent){
							root2 = root2.parent;
						}
						if(root2 != root){
							if(root.rank > root2.rank){
								root2.parent = root;
							}else{
								root.parent = root2;
								if(root.rank == root2.rank){
									root2.rank++  
								}
								root = root2;
							}
							var node2 = node[j];
							while(node2.parent){
								var temp = node2;
								node2 = node2.parent;
								temp.parent = root;
							}
							var node2 = node[i];
							while(node2.parent){
								var temp = node2;
								node2 = node2.parent;
								temp.parent = root;
							}
						}
					}
				}
				var index = 0;
				var clusters = [];
				for(var i = 0; i < node.length; i++){
					var j = -1;
					var node1 = node[i]
					while(node1.parent){
						node1 = node1.parent
					}
					if(node1.rank >= 0){
						node1.rank = ~index++;
					}
					j = ~node1.rank;

					if(clusters[j]){
						clusters[j].push(elements[i])
					}else{
						clusters[j] = [elements[i]]
					}
				}
				return clusters;
			}

			function connected_img(img){
				var dx8 = [-1, 1, -1, 0, 1, -1, 0, 1];
				var dy8 = [0, 0, -1, -1, -1, 1, 1, 1];
				var width = img.width, 
					height = img.height;

				// var marker = new jsfeat.matrix_t(width, height, jsfeat.U8C1_t)
				var marker = new Uint8Array(width * height);
				var contours = []
				
				for(var i = 0; i < width * height; i++){
					if(marker[i] || !img.data[i]) continue;

					var ix = i % width, iy = Math.floor(i / width)
					
					marker[i] = 1
					var contour = []
					var stack = [i]
					var closed;
					
					while(closed = stack.shift()){
						contour.push(closed)
						var cx = closed % width, cy = Math.floor(closed / width);
						var w = img.data[closed];
						for(var k = 0; k < 8; k++){
							var nx = cx + dx8[k]
							var ny = cy + dy8[k]
							var n = ny * width + nx;

							if(nx >= 0 && nx < width &&
							   ny >= 0 && ny < height &&
							   img.data[n] &&
							   !marker[n]){
								marker[n] = 1
								// update the average stroke width
								w = (w * stack.length + img.data[n]) / (stack.length + 1)
								stack.push(n)
							}
						}
					}
					if(contour.length >= 10){
						contours.push(contour)	
					}
				}
				return contours
			}


			reset_canvas()


			var quotes = [
				'Welcome to Ocrad.JS!',
				'Grumpy wizards make toxic brew for the evil Queen and Jack.',
				'The Quick Brown Fox Jumped Over The Lazy Dog.',
				'Everything is linear when plotted log-log with a fat magic marker.',
				'Hello OCR!',
				'This demo better put Engelbart to shame!',
				'Very OCR. Such Recognize. Wow.',
				'Much Text. Wow. So Letters. Very Recognition. Wow.',
				"I don't know what to say.",
				'Here are some words.',
				'Words words words words words words words - Hamlet.',
				'The Very Quick, Much Brown Fox Jumped So Over Such Lazy Doge. Wow.',
				'Is this algorithm better than a fifth grader? (no)',
				'I am Cow. Hear me moo! I weigh twice as much as you.',
				'Nineteen Eighty Four',
				'How many tweets would a twit-chuck tweet if a tweet could tweet.',
				'I shall call him squishy and he shall be my squishy.',
				'Such Text. Very OCR. Much Optical. Wow.',
				"Here's to looking at pixels, kid.",
				"Do or do not, there is no try.",
				"Yo Banana Boy!",
				"This shit is bananas, B-A-N-A-N-A-S.",
				"I have discovered a truly marvelous proof which this box is too small to contain.",
				"Tech-mol-ogy is it good or is it whack?",
				"Say What Again! I dare you! I double-dare you!",
				"D-I-N-O-S-A-YOU ARE A DINOSAUR",
				"Hello my name is dug. I have just met you. I love you.",
				"ABC DEF GHI JKL MNO PQR STU VWX YZ",
				"abc def ghi jkl mno pqr stu vwx yz",
				"0 1 2 3 4 5 6 7 8 9",
				"One Two Three Four Five Six Seven Eight Nine Ten",
				"Your mother was a hamster and your father smelt of elderberries.",
				"Hello World!",
				"Goodnight, cruel world!",
				"Do not go gentle into that good night",
				"To be, or not to be: That is the question. Whether tis nobler in the mind to suffer the slings and arrows of outrageous fortune.",
				"You're not crazy!",
				"Time flies like an arrow, Fruit flies like a banana.",
				"This message is bludgeoning the deceased equine.",
				"Rawr! I'm a dinosaur!",
				"Hesitation is always easy but rarely useful.",
				"Quis custodiet ipsos custodes?",
				"Tuesday's meeting of the apathy club was canceled due to lack of interest.",
				"We sell your users so you don't have to!",
				"Life is good.",
				"A true magician never unveils his trick.",
				"Ceci n'est pas une pipe."
			];
			var fonts = ['Droid Sans', 'Philosopher', 'Alegreya Sans', 'Chango', 'Coming Soon', 'Allan', 'Cardo', 'Bubbler One', 'Bowlby One SC', 'Prosto One', 'Rufina', 'Cantora One', 'Denk One', 'Play', 'Architects Daughter', 'Nova Square', 'Inder', 'Gloria Hallelujah', 'Telex', 'Comfortaa', 'Merienda', 'Boogaloo', 'Krona One', 'Orienta', 'Sofadi One', 'Source Sans Pro', 'Revalia', 'Overlock', 'Kelly Slab', 'Rye', 'Butcherman', 'Lato', 'Milonga', 'Aladin', 'Princess Sofia', 'Audiowide', 'Italiana', 'Michroma', 'Cabin Condensed', 'Jura', 'Marko One', 'PT Mono', 'Bubblegum Sans', 'Amaranth', 'Times New Roman']
			

			function fisher_yates(a) {
				for (var i = a.length - 1; i > 0; i--) {
					var j = Math.floor(Math.random() * (i + 1));
					var temp = a[i]; a[i] = a[j]; a[j] = temp;
				}
			}

			fisher_yates(fonts);
			fisher_yates(quotes);

			function da_word(){
				reset_canvas()
				
				var font = fonts.shift(); fonts.push(font); // do a rotation

				if(Math.random() > 0.7){
					var phrase = font;
				}else{
					var phrase = quotes.shift() //quotes[Math.floor(quotes.length * Math.random())];
					quotes.push(phrase);
				}
				
				WebFont.load({
					google: {
						families: [font]
					},
					active: function(){
						o.font = '30px "' + font + '"'
						var words = phrase.split(' '), buf = [], n = 70;
						for(var i = 0; i < words.length; i++){
							//buf.push(words[i])
							//if(buf.join(' ').length > 15 || i == words.length - 1){
								// o.fillText(buf.join(' '), 50, n);
								//buf = []
								// n += 50
							// }
							o.fillText(words[i], 50, n);
							n+=50
						}
						runOCR(phrase);
					}
				})
			}

			o.font = '30px sans-serif'
			o.fillText("Welcome to demo ocracy!", 50, 100);
			runOCR();
		</script>
	</body>
</html>