Tutorial

You can find here a set of examples that demonstrate how to use the F.A.C.E. API and its features. You can download the source code of the examples contained in this page here.


Example 1 : Basic request

Here is the most basic example. It demonstrates how to perform a API call with the minimum set of parameters through an html form.

<html>
  <body>
    <form method="post" action="https://api.sightcorp.com/api/detect/"
          enctype="multipart/form-data">
      <input type="text" name="app_key" value="Your Key"/>
      <input type="text" name="client_id" value="Your Client ID"/>
      <input type="file" name="img"/>
      <input type="submit"/>
    </form>
  </body>
</html>
    

Example 2 : Remote image resource

The F.A.C.E. API accepts images embedded in the request as well as a url pointing to a remote image. In this example the remote location of an image resource is given.

<html>
  <body>
    <form method="post" action="https://api.sightcorp.com/api/detect/"
          enctype="multipart/form-data">
      <input type="text" name="app_key" value="Your Key"/>
      <input type="text" name="client_id" value="Your Client ID"/>
      <input type="text" name="url"
          value="http://www.naircare.co.uk/images/main/hub/bg-face.jpg"/>
      <input type="submit"/>
    </form>
  </body>
</html>
    

Example 3 : Selecting analysis features

In this example you can see how it is possible to control the features that are returned by the F.A.C.E. API analysis. The attribute parameter allows to ask only a subset of the features returned by the API. If attribute is empty or not specified, all the features are returned by default. In this example the age and gender features are queried.

<html>
  <body>
    <form method="post" action="https://api.sightcorp.com/api/detect/"
          enctype="multipart/form-data">
      <input type="text" name="app_key" value="Your Key"/>
      <input type="text" name="client_id" value="Your Client ID"/>
      <input type="text" name="attribute" value="age,gender"/>
      <input type="file" name="img"/>
      <input type="submit"/>
    </form>
  </body>
</html>
    

Example 4 : Ajax

In this example you can see how to perform asyncronous calls with Javascript. The code below preprocesses the API request before it is sent. Uppon receipt of the F.A.C.E. API response, the successCallback() function is triggered and its code executed.

<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  </head>
  <body>
    <form id="myform" method="post" action="https://api.sightcorp.com/api/detect/"
          enctype="multipart/form-data">
      <input type="text" name="app_key" value="Your Key"/>
      <input type="text" name="client_id" value="Your Client ID"/>
      <input type="file" name="img"/>
      <input type="submit"/>
    </form>
    <div id="result">
    </div>

    <script>
$(document).ready(function() {

  var successCallback = function( data, textStatus, jqXHR ) {
    alert( JSON.stringify( data ) );
    alert( "First person Age : " + data.persons[0].age.value );
  };

  var failCallback = function( jqXHR, textStatus, errorThrown ) {
    alert( "There has been an error!" );
  };

  $( "#myform" ).submit(
    function(e) {
      e.preventDefault();
      var formdata = new FormData( document.getElementById( "myform" ) );
      $.ajax( { url         :  $( this ).attr( 'action' ),
                type        : "POST",
                data        : formdata,
                success     : successCallback,
                error       : failCallback,
                processData : false,
                contentType : false } );
    });

});
    </script>
  </body>
</html>
    

Example 5 : Interactivity

This example shows how to add interactivity to a web page by changing the advertisment banner depending on the gender of the person in front of the webcam. To achieve this, a small Javascript library (FACE-1.0.js, included in the example package) is used in order to facilitate the control of the webcam and the communication with the F.A.C.E. API server.

<html>
  <body>
  
    <!-- Main page content -->
    <video id="webcam_preview" autoplay></video>
    <img id="img_snapshot" src=""/>
    <div><img id="advertisement" src="man.jpg"/></div>

    <!-- Load jquery and FACE libraries -->
    <script src="FACE-1.0.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <!-- Page control -->
    <script>
      var client_id = 'Your Client ID';
      var app_key   = 'Your Key';

      function success( result ) {
        if( result.persons.length > 0 ) {
          age        = result.persons[0].age.value;
          gender     = result.persons[0].gender.value;
          confidence = result.persons[0].gender.confidence;
          
          if ( gender == "Male" && confidence > 50 )
            $('#advertisement').attr( 'src', 'man.jpg' )
          else if ( gender == "Female" && confidence > 50)
            $('#advertisement').attr( 'src', 'woman.jpg' )
        }      
      }
  
      function failure( error ) {
        alert( error );
      }
  
      function sendDetectRequest() {
        var img = document.querySelector( "#img_snapshot" );
        // Check if a snapshot has been taken
        if( img.naturalWidth == 0 ||  img.naturalHeight == 0 )
          return;
        var imgBlob = FACE.util.dataURItoBlob( img.src );
        FACE.sendImage( imgBlob, success, failure, app_key, client_id, 'age,gender' );
      }
  
      function startCapture() {
        FACE.webcam.startPlaying( "webcam_preview" );
        setInterval( function()
        {
          FACE.webcam.takePicture( "webcam_preview", "img_snapshot" );
          sendDetectRequest();
        },
        1100 );
      }

      // Trigger the start
      $( document ).ready( function() {
        if( client_id =='' ) {
          alert( 'Please specify your keys in the source' );
        } else {
          startCapture();
        }
      });
    </script>    
  </body>
</html>