Writing a trigger to generate uuid in a table

If you never had a field containing uuid before in MySQL table, now you can add a new field default is null. Then create a trigger so that every time there’s a new record inserted, the uuid will be automatically generated for that row. Here’s how you write a trigger to add uuid to a field “user_api_key” in the table “api_users”

DELIMITER $$

CREATE
    /*[DEFINER = { user | CURRENT_USER }]*/
    TRIGGER `test`.`add uuid to api_users table` AFTER INSERT
    ON `test`.`api_users`
    FOR EACH ROW BEGIN
	IF new.user_api_key IS NULL THEN
	SET new.user_api_key =UUID();
	END IF;
    END$$

DELIMITER ;

If you run into this error, make sure you don’t duplicate the trigger.

This version of MySQL doesn’t yet support ‘multiple triggers with the same action time and event for one table.

To check for duplicate trigger, use this statement

SHOW TRIGGERS WHERE `table` = 'api_users';

Color Detection Programming

Today we’re going to use NodeJS to write a program that can detect colors from an image. User uploads an image, NodeJS will process the image on the Server side and response with a list of color RGB values. It will return predictions about the dominant colors in an image.

We test with a US flag PNG image using NodeJS

.from('./_lab/img/usflag.png').getPalette((err, palette) => console.log(palette))
.from('./_lab/img/usflag.png').getSwatches((err, swatches) => console.log(swatches))

And the response from server is:

Swatch {
_rgb: [220, 4, 4],
_population: 324,
_hsl: [0, 0.9642857142857144, 0.4392156862745098]
},
LightVibrant:
Swatch {
_rgb: [228, 70, 70],
_population: 360,
_hsl: [0, 0.7452830188679245, 0.5843137254901961]
},
DarkVibrant:
Swatch {
_rgb: [5, 5, 82],
_population: 319,
_hsl: [0.6666666666666666, 0.885057471264368, 0.17058823529411765]
},
Muted:
Swatch {
_rgb: [168, 108, 112],
_population: 0,
_hsl: [0.9888888888888889, 0.2564102564102564, 0.5411764705882353]
},
LightMuted:
Swatch {
_rgb: [181, 181, 193],
_population: 50,
_hsl: [0.6666666666666666, 0.08823529411764695, 0.7333333333333334]
},
DarkMuted:
Swatch {
_rgb: [66, 57, 114],
_population: 56,
_hsl: [0.6929824561403509, 0.3333333333333333, 0.33529411764705885]
}

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