Clarifai Demo

Demo code for Geeksroom blog article.

HTML

<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
token id 
  	<input type="text" id="token" placeholder="App Token" value=""> <br> <br>
  		
  	image url
	<input type="text" id="imageurl" placeholder="Image URL" value="" onblur="$('#img').attr('src',$(this).val());"> <br>
	example:<br> http://xdesktopwallpapers.com/wp-content/uploads/2012/07/Maldives%20Islands%20Beach%20Scene.jpg<br><br>
	
	<img id="img" style="width:200px;"> <br> <br> 
	<input type="button" onclick="doAnalizeImage();"> Analize Image  <br> <br> 
	
	<textarea id="ResponseArea" style="width:400px; height:400px;"></textarea>

JavaScript

var clientID = null;
  var secretID = null;
  	function doAnalizeImage()
  	{
  		var tokenID = $('#token').val();
  		var image = $('#imageurl').val();
  		
  		if (tokenID && image)
  		{
  			// Request Token
  			/*
  			$.ajax({
			    url: "https://api.clarifai.com/v1/token/",
			    beforeSend: function(xhr) {
			    },
			    type: 'POST',
			    data: { 
			    	client_id : clientID, 
			    	secret_id : secretID,
			    	grant_type : "client_credentials"
			    },
			    success: function (data) {
			      var accesstoken = data.access_token;
			      $('#ResponseArea').text(accesstoken);
			    },
			    error: function(error){
			      alert("Cannot get token data");
			      $('#ResponseArea').text( JSON.stringify(error) );
			    }
			});
			*/
			
			// Request Analysis
  			$.ajax({
			    url: "https://api.clarifai.com/v1/tag/",
			    beforeSend: function(xhr) {
			    	xhr.setRequestHeader("Authorization","Bearer " + tokenID);
			    },
			    type: 'POST',
			    data: { 
			    	url:$('#imageurl').val(),
			    },
			    success: function (data) {
			      $('#ResponseArea').text( JSON.stringify(data.results[0].result.tag.classes) );
			    },
			    error: function(error){
			      alert("Cannot get image data");
			      $('#ResponseArea').text( JSON.stringify(error) );
			    }
			});
  		}
  		else
  			alert("All fields are mandatory");
  	}