personage

Personage is a VIE widget that allows to annotate depicted persons with schema.org structures.

It creates a VIE entity for the entire image; and also creates separate VIE entitie(s) for fragment(s) of the image corresponding to the person(s) detected. Both image- and fragment-related entities are of the http://schema.org/ImageObject VIE type.

The widget also includes a functionality for tagging the detected fragments using existing semantic markup on the page: e.g. the page contains the text with a hidden markup

<span about="http://dbpedia.org/resource/John_Lennon" typeof="Person"> John Lennon </span>

you can drag this text ("John Lennon") and drop it on the appropriate detected fragment of the image. This creates a semantic relation between two entities: person and image objects.

Another functionality allows to highlight the text and and the image, which are semanticaly related (like described above): every time the cursor hovers over the text or the fragment - both get highlighted.

The demo utilizes skybiometry: a service for face detection and face recogntion.

Example

http://2529742.github.io/personage/

1. Load the dependency scripts in the following order:

   <!-- jQuery and jQuery UI -->
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script>
   <!-- VIE dependencies: uderderscore, backbone, rdfquery; and wigdet-specific script: livequery -->
   <script type="text/javascript" src="https://github.com/2529742/personage/raw/master/underscore.js"></script>    
   <script type="text/javascript" src="https://github.com/2529742/personage/raw/master/backbone.js"></script>
   <script type="text/javascript" src="https://github.com/2529742/personage/raw/master/jquery.rdfquery.js"></script>
   <script type="text/javascript" src="https://github.com/2529742/personage/raw/master/jquery.livequery.js"></script>
   <!-- VIE: VIE library and the widget -->
   <script type="text/javascript" src="https://github.com/2529742/personage/raw/master/vie-2.1.0.js"></script>
   <script type="text/javascript" src="https://github.com/2529742/personage/raw/master/vie.widget.personage.js"></script>

and create a new script for your code:

    <script type="text/javascript">
    //...your code...
    </script>

2. Write there a function that would call the widget:

   function startAnnotation(){
       //initialize face tagger 
       $('#photos').viePersonage({ //call the widget on the container with the images or on a particular image
           services: { //face detection services
                   skybiometry: {
                       use: true,  // flag to indicate that this service will be used for face detection (if there are many)
                       api_key: "YOUR_API_KEY",
                       api_secret: "YOUR_API_SECRET"
                   }
           },
           myVIE: myVIE, //your VIE instance
           done: imageResults, // callback function to process the resulted image fragment entities
           //drag-and-drop and hightlight functionality for existing semantic markup on the page:
           draggable: none, // a filter for activating draggables, e.g. for all markup with persons use draggable: [Person]
           highlight: true // use/not use highlighting
       });
   }

3. Write another function to process the results:

   function imageResults(entities){
       for(var f = 0; f < entities.length; f++){
           var fragment = entities[f];
           console.log(fragment);
       }
   }

4. Call the startAnnotation function whenever you need, e.g. on the button click:

   <button id="start" onclick="startAnnotation()">Start image annotation</button>