karthik20522 · February 24, 2016 21:54
diff --git a/gistfile1.txt b/gistfile1.txt
 <html>
 <head>
  <style type="text/css">
    body {
       margin: 0;
       padding: 0;
       background: #EEE;
       font: 10px/13px 'Lucida Sans',sans-serif;
    }
 	.wrap {       
       margin: 10px;
 	   margin-top: 100px;
    }
    .box {   
 		float:left;
 		position:relative;	
 		padding:10px;
    }   
 	</style>
 </head>
 <body>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
 	 <select id="algoSelect">
 		<option value="CEDD">CEDD</option>
 		<option value="PHOG">PHOG</option>
 		<option value="JPEG_COEFFICIENT_HISTOGRAM">JPEG_COEFFICIENT_HISTOGRAM</option>
 		<option value="JOINT_HISTOGRAM">JOINT_HISTOGRAM</option>
 		<option value="COLOR_LAYOUT">COLOR_LAYOUT</option>
 		<option value="ROTATION_INVARIANT_LOCAL_BINARY_PATTERNS">ROTATION_INVARIANT_LOCAL_BINARY_PATTERNS</option>
 		<option value="SIMPLE_COLOR_HISTOGRAM">SIMPLE_COLOR_HISTOGRAM</option>
 		<option value="LUMINANCE_LAYOUT">LUMINANCE_LAYOUT</option>
 		<option value="GABOR">GABOR</option>
 		<option value="OPPONENT_HISTOGRAM">OPPONENT_HISTOGRAM</option>
 		<option value="BINARY_PATTERNS_PYRAMID">BINARY_PATTERNS_PYRAMID</option>
 		<option value="LOCAL_BINARY_PATTERNS">LOCAL_BINARY_PATTERNS</option>
 		<option value="AUTO_COLOR_CORRELOGRAM">AUTO_COLOR_CORRELOGRAM</option>
 		<option value="TAMURA">TAMURA</option>
 		<option value="EDGE_HISTOGRAM">EDGE_HISTOGRAM</option>
 		<option value="SCALABLE_COLOR">SCALABLE_COLOR</option>
 		<option value="FCTH">FCTH</option>
 	</select> 
 	<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
 	<div id="imgTest" style="height: 100px; width:100px;"></div>
 	<div id="wrap" class="wrap"></div>  
 <script type='text/javascript'>
 	
 	$('select[id="algoSelect"]').change(function(){
 encodeImageFileAsURL();
 	});
 	function encodeImageFileAsURL(){

 		var filesSelected = document.getElementById("inputFileToLoad").files;
 		if (filesSelected.length > 0)
 		{
 			var fileToLoad = filesSelected[0];

 			var fileReader = new FileReader();

 			fileReader.onload = function(fileLoadedEvent) {
 				var srcData = fileLoadedEvent.target.result; // <--- data: base64
 				var newImage = document.createElement('img');
 				
 				newImage.src = srcData;
 				newImage.setAttribute('width', '166px');
 				newImage.setAttribute('height', '156px');
 				
 				document.getElementById("imgTest").innerHTML = newImage.outerHTML;
 				
 				doSearch(srcData.replace('data:image/jpeg;base64,', ''));
 			}
 			fileReader.readAsDataURL(fileToLoad);
 		}
 		else {
 			alert('NO FILE SELCTED');
 		}
 	}
 	
 	function getQuery(baseData, algo){
 		var data = {
 			  _source: [ "sku", "imageUrl" ],
 			  size: 25,
 			  query: {
 				image: {
 				  imageData: {
 					feature: algo,
 					image: baseData
 				  }
 				}
 			  }
 			}
 			
 			return data;
 	}

 	function doSearch(baseData){
 			$.ajax({
 				url: 'http://45.55.49.152:9200/test/asset/_search',
 				type: 'POST',                        
 				dataType: 'json',
 				data: JSON.stringify(getQuery(baseData, $('#algoSelect').val())),
 				success: function(response) {
 					var data = response.hits.hits;      
 					var body = $("#wrap");
 					body.empty();
 					if (data.length > 0) {
 						for (var i = 0; i < data.length; i++) {
 							source = data[i]._source;
 							$(body).append('<div class="box"><div class="boxInner"><img width="96" height="124" src="' + source.imageUrl + '" /><br><table><tr>' + source.sku + '</tr></table></div></div>');                        
 						}
 					} else {
 						$(body).append("<h3>NO DATA FOUND<h3>" + data);                    
 					}
 				},
 				error: function(jqXHR, textStatus, errorThrown) {
 					var jso = jQuery.parseJSON(jqXHR.responseText);
 					$(body).append("<h3>FAILED<h3>" + jso);  
 				}
 			});
 	}

 </script>

 </body>
 </html>
	<html>
	<head>
	<style type="text/css">
	body {
	margin: 0;
	padding: 0;
	background: #EEE;
	font: 10px/13px 'Lucida Sans',sans-serif;
	}
	.wrap {
	margin: 10px;
	margin-top: 100px;
	}
	.box {
	float:left;
	position:relative;
	padding:10px;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
	<select id="algoSelect">
	<option value="CEDD">CEDD</option>
	<option value="PHOG">PHOG</option>
	<option value="JPEG_COEFFICIENT_HISTOGRAM">JPEG_COEFFICIENT_HISTOGRAM</option>
	<option value="JOINT_HISTOGRAM">JOINT_HISTOGRAM</option>
	<option value="COLOR_LAYOUT">COLOR_LAYOUT</option>
	<option value="ROTATION_INVARIANT_LOCAL_BINARY_PATTERNS">ROTATION_INVARIANT_LOCAL_BINARY_PATTERNS</option>
	<option value="SIMPLE_COLOR_HISTOGRAM">SIMPLE_COLOR_HISTOGRAM</option>
	<option value="LUMINANCE_LAYOUT">LUMINANCE_LAYOUT</option>
	<option value="GABOR">GABOR</option>
	<option value="OPPONENT_HISTOGRAM">OPPONENT_HISTOGRAM</option>
	<option value="BINARY_PATTERNS_PYRAMID">BINARY_PATTERNS_PYRAMID</option>
	<option value="LOCAL_BINARY_PATTERNS">LOCAL_BINARY_PATTERNS</option>
	<option value="AUTO_COLOR_CORRELOGRAM">AUTO_COLOR_CORRELOGRAM</option>
	<option value="TAMURA">TAMURA</option>
	<option value="EDGE_HISTOGRAM">EDGE_HISTOGRAM</option>
	<option value="SCALABLE_COLOR">SCALABLE_COLOR</option>
	<option value="FCTH">FCTH</option>
	</select>
	<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
	<div id="imgTest" style="height: 100px; width:100px;"></div>
	<div id="wrap" class="wrap"></div>
	<script type='text/javascript'>

	$('select[id="algoSelect"]').change(function(){
	encodeImageFileAsURL();
	});
	function encodeImageFileAsURL(){

	var filesSelected = document.getElementById("inputFileToLoad").files;
	if (filesSelected.length > 0)
	{
	var fileToLoad = filesSelected[0];

	var fileReader = new FileReader();

	fileReader.onload = function(fileLoadedEvent) {
	var srcData = fileLoadedEvent.target.result; // <--- data: base64
	var newImage = document.createElement('img');

	newImage.src = srcData;
	newImage.setAttribute('width', '166px');
	newImage.setAttribute('height', '156px');

	document.getElementById("imgTest").innerHTML = newImage.outerHTML;

	doSearch(srcData.replace('data:image/jpeg;base64,', ''));
	}
	fileReader.readAsDataURL(fileToLoad);
	}
	else {
	alert('NO FILE SELCTED');
	}
	}

	function getQuery(baseData, algo){
	var data = {
	_source: [ "sku", "imageUrl" ],
	size: 25,
	query: {
	image: {
	imageData: {
	feature: algo,
	image: baseData
	}
	}
	}
	}

	return data;
	}

	function doSearch(baseData){
	$.ajax({
	url: 'http://45.55.49.152:9200/test/asset/_search',
	type: 'POST',
	dataType: 'json',
	data: JSON.stringify(getQuery(baseData, $('#algoSelect').val())),
	success: function(response) {
	var data = response.hits.hits;
	var body = $("#wrap");
	body.empty();
	if (data.length > 0) {
	for (var i = 0; i < data.length; i++) {
	source = data[i]._source;
	$(body).append('<div class="box"><div class="boxInner"><img width="96" height="124" src="' + source.imageUrl + '" /><br><table><tr>' + source.sku + '</tr></table></div></div>');
	}
	} else {
	$(body).append("<h3>NO DATA FOUND<h3>" + data);
	}
	},
	error: function(jqXHR, textStatus, errorThrown) {
	var jso = jQuery.parseJSON(jqXHR.responseText);
	$(body).append("<h3>FAILED<h3>" + jso);
	}
	});
	}

	</script>

	</body>
	</html>