├── server
├── .gitignore
├── package.json
└── index.js
├── assets
├── glasses.png
└── harlequinmask.png
├── LICENSE
├── README.md
└── public
└── index.html
/server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
3 | package-lock.json
--------------------------------------------------------------------------------
/assets/glasses.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unicodeveloper/face-detection/HEAD/assets/glasses.png
--------------------------------------------------------------------------------
/assets/harlequinmask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unicodeveloper/face-detection/HEAD/assets/harlequinmask.png
--------------------------------------------------------------------------------
/server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "faceoverlay",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1"
8 | },
9 | "author": "",
10 | "license": "ISC",
11 | "dependencies": {
12 | "body-parser": "^1.18.1",
13 | "cloudinary": "^1.9.0",
14 | "connect-multiparty": "^2.0.0",
15 | "cors": "^2.8.4",
16 | "express": "^4.15.4"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/server/index.js:
--------------------------------------------------------------------------------
1 | const express = require('express');
2 | const app = express();
3 | const multipart = require('connect-multiparty');
4 | const bodyParser = require('body-parser');
5 | const cloudinary = require('cloudinary');
6 | const cors = require('cors');
7 |
8 | app.use(cors());
9 | app.use(bodyParser.urlencoded({ extended: false }));
10 | app.use(bodyParser.json());
11 |
12 | cloudinary.config({
13 | cloud_name: 'xxxxxxx',
14 | api_key: 'xxxxxxx',
15 | api_secret: 'xxxxxxx'
16 | });
17 |
18 | // Multiparty middleware
19 | const multipartMiddleware = multipart();
20 |
21 | app.post('/upload', multipartMiddleware, function(req, res) {
22 |
23 | cloudinary.uploader.upload(req.files.image.path, function(result) {
24 | res.json(result);
25 | },
26 | {
27 | transformation: [
28 | {width: 700, radius: "max", crop: "scale"},
29 | { flags: "region_relative", gravity: "adv_eyes", overlay: req.body.item, width: "1.7"}
30 | ]
31 | });
32 |
33 | });
34 |
35 |
36 | app.listen(3333);
37 | console.log('Listening on localhost:3333');
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2017 Prosper Otemuyiwa
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Face Overlay App
3 |
4 |
5 | 👨 👩 An app to detect facial attributes (with focus on the eyes), on a human and append a pair of glasses or harlequin mask.
6 |
7 |
8 |
9 |
10 |
11 |
12 | ## Setting things up
13 |
14 | ### Clone the repository
15 | ```sh
16 | $ git clone git@github.com:unicodeveloper/face-detection.git
17 | ```
18 |
19 | ### Install Dependencies
20 |
21 | Before continuing, this app requires [node](https://nodejs.org/en/) $ [npm](https://www.npmjs.com/) installed on your machine.
22 | Once you have confirmed your node installation,
23 |
24 | - Change directory into the server directory of the app
25 | ```sh
26 | $ cd face-detection/server
27 | ```
28 |
29 | - Install npm packages
30 | ```sh
31 | $ npm install
32 | ```
33 |
34 | - Set up http server
35 | To render our static html files, you could use a simple http server like [http-server](https://www.npmjs.com/package/http-server). To install run the command
36 |
37 | ```sh
38 | $ npm install http-server -g
39 | ```
40 |
41 | ### Working with Cloudinary
42 | This application is dependent on [Cloundary's API](https://cloudinary.com/).
43 | To continue, you will need to [sign up](https://cloudinary.com/users/register/free) here. Once that's done, on your [console](https://cloudinary.com/console) fetch your `cloud_name`, `api_key`, `api_secret` and then add them to your `index.js` file located in the `server/` directory.
44 |
45 | NB:
46 | - You also need to activate [Advanced Facial Attributes](https://cloudinary.com/console/addons#adv_face) on your cloudinary account - don't worry it's 'kinda' free 😜 .
47 | - You need to upload the images from the `assets` directory to your [media library](https://cloudinary.com/console/media_library) and rename them to `glasses` and `harlequinmask` since those are the two masks we are considering
48 |
49 | ## Running things
50 | To run the app, in the root directory of our app we start our backend server with this command
51 | ```sh
52 | $ node server
53 | ```
54 |
55 | You'll get a response like
56 | ```sh
57 | Listening on localhost:3333
58 | ```
59 |
60 | This means your backend server is running on `http://localhost:3333/`
61 |
62 | You also need to run your `http-server` by using the command
63 | ```sh
64 | $ http-server
65 | ```
66 |
67 | Once that's done, you get a response like
68 | ```sh
69 | Starting up http-server, serving ./public
70 | Available on:
71 | http://127.0.0.1:8080
72 | http://172.20.10.9:8080
73 | ```
74 |
75 | Now you can navigate to `http://127.0.0.1:8080/` to see the app at work 😇
76 |
77 | License
78 | ----
79 |
80 | MIT
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Welcome to Face Overlay
5 |
6 |
7 |
8 |
9 |
10 |
9 | 
10 | 
17 | Glasses
18 | 
21 | Harlequin Mask
22 |