Calculating Bounding box for a face on an image

This time we’re using the Bounding box returned by Clarifai’s Face Model API . Google Vision and Amazon Face Detection Rekognition APIs are returning different type of data (x,y,width, height).

Amazon Rekognition:
left = image.width*BoundingBox.Left
top = image.height*BoundingBox.Top

 

Based on the description Face Detection Model’s response on this page https://www.clarifai.com/models/face-detection-image-recognition-model/a403429f2ddf4b49b307e318f00e528b#documentation, we’ll calculate the top-left corner and bottom-right corner.

given original image size 500 width x 333 height, the top-left coordinate of the image is (0.0, 0.0), and the bottom-right of the image is (1.0, 1.0)
Bounding Box:{
“top_row”: 0.22296476,
“left_col”: 0.6717238,
“bottom_row”: 0.33909792,
“right_col”: 0.74911636
}

The calculations are essentially percentages that are measures from the (0,0) top-left corner of the image and you can interpret them as:

The Top Left Corner of the bounding box is 22% from the top and 67% from the Left
The Bottom Right Corner of the bounding box is 33% from the top and 75% from the left

The corresponding “pixel” coordinates of this box would be:

Top Left: (335, 74)
Bottom Right: (375, 110)
Width:40
Height:36

These values (x,y,width,height) are used for client to draw a blur/opacity/solid boxes on faces on a picture.

Face Detection Programming

Face Detector API and its docs are ready for deployment on github (master and dev-binh branches). The API is written in NodeJS. It’s been tested. Clients must pass a Base64 of a photo URL encoded. This API will return how many faces on a photos and bounding boxes of face areas.

FaceDetector-rest

Express Nodejs App

Dependencies

==========

  1. “express”: “~4.14.1”
  2. “clarify”: “^2.2.0”
  3. “body-parser”: “~1.16.0”
  4. “jade”: “~1.11.0”

ENVIRONMENT Variables Settings in .env

CLARIFAI_API_KEY=ADD-YOUR-CLARIFAI-API-KEY-HERE (see Instruction below *)

PORT = 8081 (or default 8080 if not set in .env)

REST API Details:

face_detector URL:

http://DETECTOR-SERVER.com:8081/detector/face_detector

Method:

POST

Header:

No

Body:

image = urlencode of BASE64-IMAGE-STRING

Response: JSON

{ “status”: { “code”: 10000, “description”: “Ok” }, “faces”: 2, “data”: { “regions”: [{ “id”: “xim9fidd7n34”, “region_info”: { “bounding_box”: { “top_row”: 0.43710598, “left_col”: 0.7332351, “bottom_row”: 0.6192386, “right_col”: 0.8545874 } } }, { “id”: “y2f8i861gphb”, “region_info”: { “bounding_box”: { “top_row”: 0.18810849, “left_col”: 0.8596386, “bottom_row”: 0.38669994, “right_col”: 0.9917106 } } }] } }

How to build a Chrome extension, Part 1: Loading a form in a popup window

  • make sure that you’ll be able to prove ownership of the site that hosts your web app.
  • bookmark this page: https://chrome.google.com/webstore/developer/dashboard
  • create a new directory on your local computer, create a text file named manifest.json and copy the following code into it, changing the italicized text to reflect your app feature.
  • {
      "manifest_version": 2,
      "name": "Your App Name",
      "description": "This extension displays a form for an realtor to import MLS data, analyze the data imported, and return a PDF form for download.",
      "version": "1.0",
    
      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Your App Title"
      },
      "permissions": [
        "activeTab",
        "https://ajax.googleapis.com/"
      ]
    }
    

Your app requires icon 128px x 128px and tiny icon of 19px x 19px

Step 4: Get the popup.js file

Download the initial popup.js file here

Step 5: Load the Extension for testing and packing

  1. Type chrome://extensions in browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox: The menu's icon is three horizontal bars. and select Extensions under the Tools menu to get to the same place).
  2. Make sure that the Developer mode checkbox in the top right-hand corner is checked.
  3. Click Load unpacked extension… to pop up a file-selection dialog.
  4. Navigate to the directory in which your extension files live, and select it.

This is just a basic how to start to build a Chrome Extension. If you need more powerful API to build complex extension, please visit this page https://developer.chrome.com/extensions/api_index

How to Convert your javascript file to a Windows .exe or .dll

Nowadays an average web developer will need to know a broad matrix of skills in order to do his/her development job. HTML, CSS, JavaScript, AJAX, XML, some server side language, some linux/unix/redhat command skills, some apache, some database skills, standards, accessibility, SEO, etc…, the list goes on. Parts of the list are also multiplied by (or raised to the power of at least 10) number of browsers you want to support.
What is Javascript can be used for?

  • create rich and powerful web applications (the kind that runs inside the browser)
  • write server-side code such as ASP scripts or for example code that is run using Rhino (A JavaScript engine written in Java)
  • create rich media applications (Flash, Flex) using ActionScript which is based on ECMAScript, which is JavaScript
  • write scripts that automate administrative tasks on your Windows desktop, using Windows Scripting Host
  • write extensions/plugins for a plethora of desktop application such as Firefox or Dreamweaver
  • create web applications that store information off-line on user’s desktop, using Google Gears
  • create Yahoo!, or Mac, or dunno-what-type-of widgets
  • create Windows apps (those that end in .exe) and libraries (.dll)

Get the JS Compiler

You’ll find the jsc.exe (found one on mine in C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727), then add this path to your environment path: Right-click My Computer – Advanced – Environment Variables – System Variables – Path – Edit

Now open command prompt (Start – Run – “cmd” – OK) and type “jsc”+ENTER. You should see a list of help options for the compiler.

First .exe

The last time I created an .exe file is probably years ago, when I was developing a desktop app for a Limosine Management Company in Visual Basic.

Create a file called test.js in C:\\myapps directory with the following content:

var d = new Date();
var n = Math.random();
print('Hello World, \\ntoday is ' + d + '\\nand this is random - ' + n);

Now let’s compile!

C:\\myapps>jsc test.js

No error messages, so we’ll take that as an OK.

Let’s run it.

C:\\myapps>test

That’s so cool, the compiled program works!

Making a DLL

Now, we’re convinced that we have a good thing going here, so let’s create a DLL, meaning create a library that other applications such as Delphi, C#, C++ can use.

JScript.NET has the notion of namespaces and packages and class-based objects. So if we simply wrap our code in a package and a class and we create a new file LibTest.js:

package LibTest{
    class Hello {
        function sayhello() {
            var d = new Date();
            var n = Math.random();
            return 'Hello World, \\ntoday is ' + d + '\\nand this is random - ' + n;
        }
    }
}

Let’s compile this into a library, we need the /t:library option when compiling

C:\\myapps>jsc /t:library LibTest.js

Consuming the lib

Finally, let’s create an app that leverages the new library we just created.

Create consumer.js with the following:

import LibTest;
var h = new LibTest.Hello();
print(h.sayhello());

Compile and run:

C:\\myapps>jsc consumer.js
C:\\myapps>consumer.exe
Hello World,
today is Mon Aug 07 19:53:29 PDT 2017
and this is random - 0.45013379838789525

Turning on/off warnings and errors in PHP

Write a script to determine whether the page is on a local, testing, or live server, and set $state to “local”, “testing”, or “live”. Then:


if( $state == "local" || $state == "testing" )
{
 ini_set( "display_errors", "1" );
 error_reporting( E_ALL & ~E_NOTICE );
}
else
{
 error_reporting( 0 );
}

Or if you are sure your script is working perfectly, you can get rid of Warning and notices by putting this line at the beginning of your php script:

error_reporting(E_ERROR);

Before that, during the development, I would properly debug my script so that all notice or warning disappear one by one. So we should first set it as verbose as possible with:

error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE);

To log errors instead of displaying them is to record errors into a file so only the php developer sees the error messages, not the users. A possible implementation is via the .htaccess file, useful if you don’t have access to the php.ini file:


# supress php errors
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off
php_value docref_root 0
php_value docref_ext 0
# enable PHP error logging
php_flag  log_errors on
php_value error_log  /home/path/public_html/domain/PHP_errors.log
# prevent access to PHP error log
<Files PHP_errors.log>
 Order allow,deny
 Deny from all
 Satisfy All
</Files>