├── LICENSE
├── README.md
├── assets
    ├── glasses.png
    └── harlequinmask.png
├── public
    └── index.html
└── server
    ├── .gitignore
    ├── index.js
    └── package.json


/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 | <p align=“center”><a href=“LICENSE”><img alt=“GitHub license” src="https://img.shields.io/github/license/laravelnigeria/website.svg"></a></p>
 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 | <div>
 8 | <img style="width:50%" src="http://res.cloudinary.com/og-tech/image/upload/v1507395290/demo_a_gefjqp.png" />
 9 | <img style="width:50%" src="http://res.cloudinary.com/og-tech/image/upload/v1507395294/demo_b_uerqes.png" />
10 | </div>
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


--------------------------------------------------------------------------------
/assets/glasses.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unicodeveloper/face-detection/60ab0be4f9c54bf9eca8e53b2f1d14efe1d1558e/assets/glasses.png


--------------------------------------------------------------------------------
/assets/harlequinmask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/unicodeveloper/face-detection/60ab0be4f9c54bf9eca8e53b2f1d14efe1d1558e/assets/harlequinmask.png


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |   <title>Welcome to Face Overlay</title>
  5 |   <script src="https://unpkg.com/vue"></script>
  6 |   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  7 |   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  8 | </head>
  9 | <body>
 10 |   <div id="app">
 11 |     <div class="container" style="margin-top: 3%; margin-left: 2%;">
 12 |       <h1>Welcome to Face Overlay App</h1>
 13 |       <div class="col-md-6">
 14 |         <div>
 15 |           <div class="col-md-6">
 16 |           <img src="http://res.cloudinary.com/unicodeveloper/image/upload/v1505797868/glasses.png" width="200" height="100" />
 17 |           <span> Glasses </span>
 18 |           </div>
 19 |           <div class="col-md-6">
 20 |           <img src="http://res.cloudinary.com/unicodeveloper/image/upload/v1505794374/harlequinmask.png" width="200" height="100" />
 21 |           <span> Harlequin Mask </span>
 22 |           </div>
 23 |         </div>
 24 | 
 25 |         <hr />
 26 | 
 27 |         <form enctype="multipart/form-data" @submit.prevent="onSubmit">
 28 |           <div class="form-group">
 29 |             <select class="form-control" name="item" v-model="model.item">
 30 |               <option disabled value="">Choose an item</option>
 31 |               <option value="glasses"> Glasses </option>
 32 |               <option value="harlequinmask"> Harlequin Mask </option>
 33 |             </select>
 34 |           </div>
 35 |           <div class="form-group">
 36 |             <label for="">File:</label>
 37 |             <input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)">
 38 |           </div>
 39 |           <div class="form-group">
 40 |             <button class="btn btn-primary" >Upload</button>
 41 |             {{ loading }}
 42 |           </div>
 43 |         </form>
 44 |       </div>
 45 | 
 46 |       <div class="col-md-4">
 47 |         <div class="col-md-6" style="margin-top: 20%;">
 48 |           <img id="originalface" class="img-responsive" alt="" width="600" height="600">
 49 |         </div>
 50 |         <div class="col-md-6" style="margin-top: 20%;">
 51 |           <img :src="maskedface" class="img-responsive" alt="" width="400" height="400">
 52 |         </div>
 53 |       </div>
 54 |     </div>
 55 |   </div>
 56 | 
 57 |   <script>
 58 |     new Vue({
 59 |       el: '#app',
 60 |       data: function() {
 61 |         return {
 62 |           model: {
 63 |            text: '',
 64 |            image: null,
 65 |            item: ''
 66 |           },
 67 |           maskedface: null,
 68 |           loading: '',
 69 |         }
 70 |       },
 71 |       methods: {
 72 |         upload: function(files) {
 73 |           this.model.image = files[0]
 74 |           this.showPreview(files[0]);
 75 |         },
 76 |         showPreview: function(file) {
 77 |           var reader = new FileReader();
 78 |           reader.onload = function (e) {
 79 |               document.getElementById("originalface").src = e.target.result;
 80 |           };
 81 |           // read the image file as a data URL.
 82 |           reader.readAsDataURL(file);
 83 |         },
 84 |         onSubmit: function() {
 85 |           // Assemble form data
 86 |           const formData = new FormData()
 87 |           formData.append('image', this.model.image);
 88 |           formData.append('item', this.model.item);
 89 |           this.loading = "Processing....Please be patient."
 90 | 
 91 |           // Post to server
 92 |           axios.post('http://localhost:3333/upload', formData)
 93 |           .then(res => {
 94 |             // Update UI
 95 |             this.maskedface = res.data.url
 96 |             this.loading = ''
 97 |           })
 98 |         }
 99 |       }
100 |     })
101 |   </script>
102 | </body>
103 | </html>
104 | 


--------------------------------------------------------------------------------
/server/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 
3 | package-lock.json


--------------------------------------------------------------------------------
/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');


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------