<commit_before><!doctype html>
<html lang="en">
	<head>
		<title>Face Tracker</title>
		<meta charset="utf-8">
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

			body {
				font-family: 'Lato';
				background-color: #f0f0f0;
				margin: 0px auto;
				max-width: 1150px;
			}
			
			#overlay {
				position: absolute;
				top: 0px;
				left: 0px;
			}

			#container {
				position : relative;
				width : 700px;
				height : 500px;
				/*margin : 0px auto;*/
			}

			#content {
				margin-top : 70px;
				margin-left : 100px;
				margin-right : 100px;
				max-width: 950px;
			}
			
			#sketch {
				display: none;
			}
			
			#filter {
				display: none;
			}

			#convergence {
				display : inline;
			}

			h2 {
				font-weight : 400;
			}

			.btn {
				font-family: 'Lato';
				font-size: 16px;
			}

			.hide {
				display : none;
			}
		</style>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-32642923-1']);
			_gaq.push(['_trackPageview']);

			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</head>
	<body>
		<script src="./js/utils.js"></script>
		<script src="./js/dat.gui.min.js"></script>
		<script src="./js/numeric-1.2.6.min.js"></script>
		<script src="./js/mosse.js"></script>
		<script src="./js/jsfeat-min.js"></script>
		<script src="./js/frontalface.js"></script>
		<script src="./js/jsfeat_detect.js"></script>
		<script src="./js/left_eye_filter.js"></script>
		<script src="./js/right_eye_filter.js"></script>
		<script src="./js/nose_filter.js"></script>
		<script src="./models/model_pca_20_svm.js"></script>
		<script src="./js/clm.js"></script>
		<script src="./js/svmfilter_webgl.js"></script>
		<script src="./js/svmfilter_fft.js"></script>
		<script src="./js/mossefilter.js"></script>
		<script src="./js/Stats.js"></script>
		
		<link rel="stylesheet" type="text/css" href="./styles/imgareaselect-default.css" />
		<script src="./js/jquery.min.js"></script>
		<script src="./js/jquery.imgareaselect.pack.js"></script>
		<script src="./js/BlobBuilder.min.js"></script>
		<script src="./js/Filesaver.min.js"></script>
		
		<div id="content">
			<h2>Face tracking in images</h2>
			<div id="container">
				<canvas id="image" width="625" height="500"></canvas>
				<canvas id="overlay" width="625" height="500"></canvas>
			</div>
			<br/>
			<input type="button" class="btn" value="start" onclick="animate()"></input>
			<input type="button" class="btn" value="manually select face" onclick="selectBox()"></input>
			<input type="file" class="btn" id="files" name="files[]" />
			<p id="convergence"></p>
			<div id="text">
				<p>This is an example of precise face-tracking in an image using the javascript library <a href="https://github.com/auduno/clmtrackr"><em>clmtrackr</em></a>. To try it out, simply click start.</p>
				<span id="loadimagetext"><p>To try it out with your own image, choose a file above by clicking "choose file". If the tracking has problems, try selecting the face in the image manually by clicking "manually select face", and click and hold to drag a square around the face in the image.</p></span>
			</div>
			<p>The image is from the <a href="http://www-prima.inrialpes.fr/FGnet/data/01-TalkingFace/talking_face.html‎">FG-net Talking Face</a> project</p>
			<a href="https://github.com/auduno/clmtrackr"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub"></a>

			<script>
				var cc = document.getElementById('image').getContext('2d');
				var overlay = document.getElementById('overlay');
				var overlayCC = overlay.getContext('2d');
			
				var img = new Image();
				img.onload = function() {
					cc.drawImage(img,0,0,625, 500);
				};
				img.src = './media/franck_02159.jpg';
			
				var ctrack = new clm.tracker({stopOnConvergence : true});
				ctrack.init(pModel);
			
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				document.getElementById('container').appendChild( stats.domElement );
				
				var drawRequest;
				
				function animate(box) {
					ctrack.start(document.getElementById('image'), box);
					drawLoop();
				}
				
				function drawLoop() {
					drawRequest = requestAnimFrame(drawLoop);
					overlayCC.clearRect(0, 0, 720, 576);
					if (ctrack.getCurrentPosition()) {
						ctrack.draw(overlay);
					}
				}
				
				// detect if tracker fails to find a face
				document.addEventListener("clmtrackrNotFound", function(event) {
					ctrack.stop();
					alert("The tracking had problems with finding a face in this image. Try selecting the face in the image manually.")
				}, false);
				<commit_msg>Fixes to image example<commit_after><!doctype html>
<html lang="en">
	<head>
		<title>Face Tracker</title>
		<meta charset="utf-8">
		<style>
			@import url(https://fonts.googleapis.com/css?family=Lato:300italic,700italic,300,700);

			body {
				font-family: 'Lato';
				background-color: #f0f0f0;
				margin: 0px auto;
				max-width: 1150px;
			}
			
			#overlay {
				position: absolute;
				top: 0px;
				left: 0px;
			}

			#container {
				position : relative;
				width : 700px;
				height : 500px;
				/*margin : 0px auto;*/
			}

			#content {
				margin-top : 70px;
				margin-left : 100px;
				margin-right : 100px;
				max-width: 950px;
			}
			
			#sketch {
				display: none;
			}
			
			#filter {
				display: none;
			}

			#convergence {
				display : inline;
			}

			h2 {
				font-weight : 400;
			}

			.btn {
				font-family: 'Lato';
				font-size: 16px;
			}

			.hide {
				display : none;
			}
		</style>
		<script type="text/javascript">
			var _gaq = _gaq || [];
			_gaq.push(['_setAccount', 'UA-32642923-1']);
			_gaq.push(['_trackPageview']);

			(function() {
				var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
				ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
				var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			})();
		</script>
	</head>
	<body>
		<script src="./js/utils.js"></script>
		<script src="./js/dat.gui.min.js"></script>
		<script src="./js/numeric-1.2.6.min.js"></script>
		<script src="./js/mosse.js"></script>
		<script src="./js/jsfeat-min.js"></script>
		<script src="./js/frontalface.js"></script>
		<script src="./js/jsfeat_detect.js"></script>
		<script src="./js/left_eye_filter.js"></script>
		<script src="./js/right_eye_filter.js"></script>
		<script src="./js/nose_filter.js"></script>
		<script src="./models/model_pca_20_svm.js"></script>
		<script src="./js/clm.js"></script>
		<script src="./js/svmfilter_webgl.js"></script>
		<script src="./js/svmfilter_fft.js"></script>
		<script src="./js/mossefilter.js"></script>
		<script src="./js/Stats.js"></script>
		
		<link rel="stylesheet" type="text/css" href="./styles/imgareaselect-default.css" />
		<script src="./js/jquery.min.js"></script>
		<script src="./js/jquery.imgareaselect.pack.js"></script>
		<script src="./js/BlobBuilder.min.js"></script>
		<script src="./js/Filesaver.min.js"></script>
		
		<div id="content">
			<h2>Face tracking in images</h2>
			<div id="container">
				<canvas id="image" width="625" height="500"></canvas>
				<canvas id="overlay" width="625" height="500"></canvas>
			</div>
			<br/>
			<input type="button" class="btn" value="start" onclick="animateClean()"></input>
			<input type="button" class="btn" value="manually select face" onclick="selectBox()"></input>
			<input type="file" class="btn" id="files" name="files[]" />
			<p id="convergence"></p>
			<div id="text">
				<p>This is an example of precise face-tracking in an image using the javascript library <a href="https://github.com/auduno/clmtrackr"><em>clmtrackr</em></a>. To try it out, simply click start.</p>
				<span id="loadimagetext"><p>To try it out with your own image, choose a file above by clicking "choose file". If the tracking has problems, try selecting the face in the image manually by clicking "manually select face", and click and hold to drag a square around the face in the image.</p></span>
			</div>
			<p>The image is from the <a href="http://www-prima.inrialpes.fr/FGnet/data/01-TalkingFace/talking_face.html‎">FG-net Talking Face</a> project</p>
			<a href="https://github.com/auduno/clmtrackr"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub"></a>

			<script>
				var cc = document.getElementById('image').getContext('2d');
				var overlay = document.getElementById('overlay');
				var overlayCC = overlay.getContext('2d');
			
				var img = new Image();
				img.onload = function() {
					cc.drawImage(img,0,0,625, 500);
				};
				img.src = './media/franck_02159.jpg';
			
				var ctrack = new clm.tracker({stopOnConvergence : true});
				ctrack.init(pModel);
			
				stats = new Stats();
				stats.domElement.style.position = 'absolute';
				stats.domElement.style.top = '0px';
				document.getElementById('container').appendChild( stats.domElement );
				
				var drawRequest;
				
				function animateClean() {
					ctrack.start(document.getElementById('image'));
					drawLoop();
				}

				function animate(box) {
					ctrack.start(document.getElementById('image'), box);
					drawLoop();
				}
				
				function drawLoop() {
					drawRequest = requestAnimFrame(drawLoop);
					overlayCC.clearRect(0, 0, 720, 576);
					if (ctrack.getCurrentPosition()) {
						ctrack.draw(overlay);
					}
				}
				
				// detect if tracker fails to find a face
				document.addEventListener("clmtrackrNotFound", function(event) {
					ctrack.stop();
					alert("The tracking had problems with finding a face in this image. Try selecting the face in the image manually.")
				}, false);
				
{'fraction_non_alphanumeric': 0.18151654142675905, 'fraction_numerical': 0.021860056601932274, 'mean_word_length': 3.2968553459119496, 'pattern_counts': {'":': 0, '<': 183, '<?xml version=': 0, '>': 183, 'https://': 10, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2917631', 'n_tokens_mistral': 4390, 'n_tokens_neox': 3484, 'n_words': 735}