dirty.html

<canvas id="canvas"></canvas>
<script src="lib/jsfeat-custom.js"></script>
<script src="lib/lodash.js"></script>
<!-- <script src="calipers2.js"></script> -->
<script src="src/helpers.js"></script>
<script src="src/lstm.js"></script>
<script src="models/zeus.min.js"></script>
<script src="experiments/test.js"></script>
<script src="src/swtcore.js"></script>
<script src="src/chull.js"></script>

<script>

onload = function(){}


var img = new Image();
img.src = 'images/rotation.png';

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d')

img.onload = function(){
	canvas.width = img.naturalWidth;
	canvas.height = img.naturalHeight;
	ctx.drawImage(img, 0, 0);
	var data = ctx.getImageData(0, 0, canvas.width, canvas.height)
	textdetect(data)
}

var params = {
	// the kernel size for the gaussian blur before canny
	kernel_size: 3,
	// low and high thresh are parameters for the canny edge detector
	low_thresh: 124,
	high_thresh: 204,
	// maximum stroke width, this is the number of iterations
	// the core stroke width transform loop will go through 
	// before giving up and saying that there is no stroke here
	max_stroke: 35,
	// the maximum ratio between adjacent strokes for the 
	// connected components algorithm to consider part of the
	// same actual letter
	stroke_ratio: 2,
	// this is the pixel connectivity required for stuff to happen
	min_connectivity: 4,
	// the minimum number of pixels in a connected component to
	// be considered a candidate for an actual letter
	min_area: 30, //default: 38
	// maximum stroke width variation allowed within a letter
	std_ratio: 0.83,
	// maximum aspect ratio to still be considered a letter
	// for instance, a really long line wouldn't be considered
	// a letter (obviously if this number is too low, it'll start
	// excluding l's 1's and i's which would be bad)
	aspect_ratio: 10, // default: 8
	// maximum ratio between the median thicknesses of adjacent 
	// letters to be considered part of the same line
	thickness_ratio: 3,
	// maximum ratio between adjacent letter heights to be considered
	// part of the same line
	height_ratio: 2.5, // original: 1.7
}


function Dot(a, b){ return a[0] * b[0] + a[1] * b[1] }
function Mag(a){ return Math.sqrt(a[0] * a[0] + a[1] * a[1]) }
function Mul(a, n){ return [a[0] * n, a[1] * n] }
function Div(a, n){ return Mul(a, 1 / n)}
function Unit(a) { return Div(a, Mag(a)) }
function Sub(a, b){ return [a[0] - b[0], a[1] - b[1]]}
function Add(a, b){ return [a[0] + b[0], a[1] + b[1]]}
function Rot90(a) { return [-a[1], a[0]] }
function Sum(x) { for(var i = 0, s = 0; i < x.length; i++) s += x[i]; return s }
function Mean(x) { return Sum(x) / x.length }
function Diff(x) { for(var i = 1, k = []; i < x.length; i++) k[i - 1] = x[i] - x[i - 1]; return k}
function Mod(x, n) { return x - Math.round(x / n) * n }
function moveTo(c, a) { c.moveTo(a[0], a[1]) }
function lineTo(c, a) { c.lineTo(a[0], a[1]) }



function adiff(a, b){
	var d = Math.abs(a - b) % (Math.PI * 2);
	var r = d > Math.PI ? (Math.PI * 2) - d : d;
	return Math.abs(r)
}

function textdetect(src){
	width = src.width
	height = src.height;
	
	var img_u8 = new jsfeat.matrix_t(width, height, jsfeat.U8C1_t)
	var img_dxdy = new jsfeat.matrix_t(width, height, jsfeat.S32C2_t);

	console.time("image processing")
	jsfeat.imgproc.grayscale(src.data, img_u8.data)
	// visualize_matrix(img_u8)
	jsfeat.imgproc.sobel_derivatives(img_u8, img_dxdy)
	jsfeat.imgproc.gaussian_blur(img_u8, img_u8, params.kernel_size, 0)
	jsfeat.imgproc.canny(img_u8, img_u8, params.low_thresh, params.high_thresh)

	console.timeEnd("image processing")

	params.direction = -1
	swt = raw_swt(img_u8, img_dxdy, params).swt;
	console.time('connected components')
	contours = connected_swt(swt, params).map(wrap_contours);
	console.timeEnd('connected components')
	c = visualize_matrix(swt, contours)

	console.time('morphological dilation')
	var dilation = document.createElement('canvas'),
		dtx = dilation.getContext('2d');
	dilation.width = width;
	dilation.height = height;
	// document.body.appendChild(dilation)
	dtx.fillStyle = 'black'
	dtx.fillRect(0, 0, width, height)
	dtx.fillStyle = 'white'
	contours.forEach(function(s){
		dtx.fillRect(s.x0 - s.width, s.y0 - s.height, s.width * 3, s.height * 3)
	})
	// we can short-circuit all of this by sticking points into the convex hull list
	// wait no we need connected components
	console.timeEnd('morphological dilation')

	console.time('region finding')
	var dilmat = new jsfeat.matrix_t(width, height, jsfeat.U8C1_t)
	jsfeat.imgproc.grayscale(dtx.getImageData(0, 0, width, height).data, dilmat.data)
	regions = connected_swt(dilmat, params).map(wrap_contours);
	
	console.timeEnd('region finding')
	dd = visualize_matrix(dilmat, regions)
	console.time('rotating calipers')
	var lines = regions.map(function(region){
		var points = region.contours;
		// caliper = new RotatingCalipers(points.map(function(p){
		// 	var x = p % width, y = Math.floor(p / width);
		// 	return [x, y]
		// }))
		// var hull = caliper.convexHull();
		var nicelyFormatedPoints = points.map(function(p){
			return {x:p % width, y:Math.floor(p / width)}
		})
		var hull = convexHull(nicelyFormatedPoints)

		dd.beginPath()
		dd.moveTo(hull[0].x, hull[0].y)
		for(var i = 1; i < hull.length; i++){
			dd.lineTo(hull[i].x, hull[i].y)
		}
		dd.closePath()
		dd.strokeStyle = 'yellow'
		dd.lineWidth = 4
		dd.stroke()

		// var rect = caliper.minAreaEnclosingRectangle();
		// console.log(rect.angle)
		// maer = rect.vertices;

		var maer = min_enclosing_rect(hull)

		dd.beginPath()
		dd.moveTo(maer[0].x, maer[0].y)
		for(var i = 1; i < maer.length; i++){
			dd.lineTo(maer[i].x, maer[i].y)
		}
		dd.closePath()
		dd.strokeStyle = 'green'
		dd.lineWidth = 4
		dd.stroke()

		var kevinMaer = maer.map(function(p){
			return [p.x,p.y]
		})
		var roof = _.sortBy(_.sortBy(kevinMaer, 1).slice(0, 2), 0);
		var dx = roof[1][0] - roof[0][0], 
			dy = roof[1][1] - roof[0][1];
		angle = Math.atan2(dy, dx)
		console.log('angle', angle)

		var cx = Mean(_.pluck(kevinMaer, 0)), cy = Mean(_.pluck(kevinMaer, 1));

		// dd.beginPath()
		// dd.moveTo(cx - 5, cy - 5)
		// dd.lineTo(cx + 5, cy + 5)
		// dd.moveTo(cx + 5, cy - 5)
		// dd.lineTo(cx - 5, cy + 5)
		// dd.stroke()

		var dir = Rot90(Unit([dx, dy]))
		dd.fillStyle = 'rgba(0, 144, 0, 0.1)'
		
		var dim = Math.ceil(Math.max(region.width, region.height) / 2)
		var hist = new Uint32Array(dim * 2);
		var range_min = Infinity, range_max = 0;

		var in_region = contours.filter(function(s){
			return s.cx > region.x0 && s.cx < region.x1 && s.cy > region.y0 && s.cy < region.y1
		})


		in_region.forEach(function(s){
			var proj = Dot(Sub([s.cx, s.cy], [cx, cy]), dir);
			dd.fillRect(cx, cy + proj, 5, 5)

			// var r = Math.max(s.width, s.height) / 2;
			var r = Math.sqrt(s.width * s.height) / 2;
			for(var i = Math.floor(proj - r); i < proj + r; i++){
				hist[i + dim]++;
				range_min = Math.min(range_min, i + dim);
				range_max = Math.max(range_max, i + dim);
			}
		})
		dd.fillStyle = '#007fff'
		// var metahist = new Uint32Array(range_max - range_min + 1)
		for(var i = range_min; i < range_max; i++){
			// metahist[hist[i]]++;
			dd.fillRect(cx, cy + i - dim, hist[i], 1)
		}

		// wumbo = _.toArray(hist.subarray(range_min, range_max))
		wumbo = _.toArray(hist)

		function t(x){return x >= 3};  // minimum number of letters on a line

		var peaks = array_split(_.range(wumbo.length), function(x,y){return t(wumbo[x]) == t(wumbo[y])})
			.filter(function(x){return t(wumbo[x[0]])})
			.map(function(x){return _.max(x, function(k){return wumbo[k]})});

		peaks.forEach(function(p){
			var inliers = [];
			in_region.forEach(function(s){
				var proj = Dot(Sub([s.cx, s.cy], [cx, cy]), dir);
				if(Math.abs((p - dim) - proj) < 5){
					inliers.push(s)
				}
			});
			inliers.forEach(function(s){
				c.fillStyle = 'green'
				c.fillRect(s.cx, s.cy, 5, 5)
			})
		})

		peaks.forEach(function(p){
			c.beginPath()
			var cl = Add([cx, cy], Mul(dir, p - dim));
			moveTo(c, Add(cl, Mul(Rot90(dir), dim)))
			lineTo(c, Add(cl, Mul(Rot90(dir), -dim)))
			c.lineWidth = 2;
			c.strokeStyle = 'green'
			c.stroke()

			var line = document.createElement('canvas')
			var s = 1.3;
			line.width = dim * 2 * s
			line.height = 28
			var lx = line.getContext('2d')
			lx.rotate(-angle)
			// lx.drawImage(img, cl[0] - dim, cl[1] - 50, dim * 2, 100, 0, 0, dim * 2, 100);
			
			lx.drawImage(img, (-cl[0] + dim) * s, (-cl[1] + 9) * s, s * img.naturalWidth, s * img.naturalHeight);
			document.body.appendChild(line)

			var imdata = lx.getImageData(0, 0, line.width, line.height);
			var rows = [];
			for(var i = 0; i < imdata.width; i++){
				var col = []
				for(var j = 0; j < imdata.height; j++){
					col.push(1 - imdata.data[4 * (i + j * imdata.width)] / 255);
				}
				rows.push(col)
			}
			console.log(rows)


	        // 
	        document.body.appendChild(document.createElement('br'))
	        displayImage(rows);
	        var text = net.predictString(rows);
	        console.log(text)
	        document.body.appendChild(document.createTextNode(text))
	        document.body.appendChild(document.createElement('br'))
	        visualizeOutput(net.output);
	        document.body.appendChild(document.createElement('br'))
	        sparkline(net)
	        document.body.appendChild(document.createElement('br'))


		})
		// dd.fillStyle = 'green'
		// for(var i = 0; i < metahist.length; i++){
		// 	dd.fillRect(cx, cy + i, -metahist[i], 1)
		// }



	})
	console.timeEnd('rotating calipers')

}

// hough transform, try to solve for a set of parallel lines at a particular orientation and line height (2 parameters)
// alternatively, use rotating calipers to solve for the orientation of a region
// or use rotating calipers as an initial estimate and do gradient-descent with hough transform (or ransac)


function wrap_contours(points){
	var size = points.length;
	var x0 = Infinity, y0 = Infinity, x1 = 0, y1 = 0;

	for(var i = 0; i < size; i++){
		var p = points[i];
		var 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);
	}

	var cy = y0 + (y1 - y0) / 2,
		cx = x0 + (x1 - x0) / 2;

	return {
		x0: x0,
		y0: y0,
		y1: y1,
		x1: x1,
		cx: cx,
		cy: cy,
		width: x1 - x0 + 1,
		height: y1 - y0 + 1,
		size: size,
		contours: points
	}
}

</script>