Detect faces in images and replace them with Duke Dog

README.md

@@ -1,3 +1,10 @@
 # madify
 
-This is the source code for https://madi.fi. This project serves as a demonstration of using a custom [CamanJS](http://camanjs.com/) filter (in this case, the [customscale filter](https://www.npmjs.com/package/@jmu-cs/customscale-camanjs-filter), which defaults to [JMU colors](https://www.jmu.edu/identity/our-style/color.shtml)) to modify a user's image and offer it back for them to save it, all done (client-side) in the user's own browser.
+This is the source code for https://madi.fi. This project serves as a demonstration of using a custom [CamanJS](http://camanjs.com/) filter (in this case, the [customscale filter](https://www.npmjs.com/package/@jmu-cs/customscale-camanjs-filter), which defaults to [JMU colors](https://www.jmu.edu/identity/our-style/color.shtml)) to modify a user's image and offer it back for them to save it, all done (client-side) in the user's own browser.
+
+## Local usage
+- Run `python -m SimpleHTTPServer` from the root of the repository
+- Navigate to `localhost:8000`
+- Drag and drop (or upload) an image 
+  - It may take a few moments for your madified image to appear
+- Click on the image to download your madified image

index.html

@@ -31,27 +31,22 @@
             </ul>
         </div>
     </nav>
-
 
-    <!-- <div class="editor-buttons"> -->
-        <form id="my-awesome-dropzone" class="dropzone dz-clickable" action="/dev/null">
-            <div class="preview-wrapper hidden mx-auto">
-                <canvas id="canvas" class="mx-auto"></canvas>
-                <p class="download-message">Click to save</p>
-            </div>
-            <!-- <label for="upload-file">Upload a Picture</label> -->
-            <input class="hidden dz-message" type="file" id="upload-file" placeholder="Upload a Picture" />
-            <!-- <button id="download-btn">Download Image</button> -->
-        </form>
-        <!-- <br /> -->
-        <!-- </div> -->
-
+    <form id="my-awesome-dropzone" class="dropzone dz-clickable" action="/dev/null">
+        <div class="preview-wrapper hidden mx-auto">
+            <canvas id="canvas" class="mx-auto"></canvas>
+            <p class="download-message">Click to save</p>
+        </div>
+
+        <input class="hidden dz-message" type="file" id="upload-file" placeholder="Upload a Picture" />
+    </form>
 
     <script src="node_modules/caman/dist/caman.min.js"></script>
     <script src="node_modules/@jmu-cs/customscale-camanjs-filter/index.js"></script>
     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="node_modules/dropzone/dist/min/dropzone.min.js"></script>
     <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="node_modules/face-api.js/dist/face-api.min.js"></script>
     <script src="js/index.js"></script>
 </body>
-</html>
+</html>

js/index.js

@@ -1,42 +1,65 @@
-var img = new Image()
 var canvas = document.getElementById('canvas')
 var ctx = canvas.getContext('2d')
-var fileName = ''
+var reader = newFileReader()
+
+var fileName
 
 Caman.allowRevert = false
 
+faceapi.loadSsdMobilenetv1Model('./weights')
+
 Dropzone.options.myAwesomeDropzone = {
   autoProcessQueue: false,
   autoQueue: false,
   createImageThumbnails: false,
-  init: function () {
-    this.on("addedfile", function (file) {
-      var reader = new FileReader()
-      if (file) {
-        fileName = file.name
-        reader.readAsDataURL(file)
-      }
-      reader.addEventListener('load', function () {
-        img = new Image()
-        img.src = reader.result
-        img.onload = function () {
-          canvas.width = img.width
-          canvas.height = img.height
-          $(".preview-wrapper").css("width", img.width)
-          $(".preview-wrapper").css("height", img.height)
-          ctx.drawImage(img, 0, 0, img.width, img.height)
-          $('#canvas').removeAttr('data-caman-id')
-          Caman('#canvas', function () {
-            // this.revert(false)
-            this.customscale()
-            this.render()
-            $(".preview-wrapper").removeClass("hidden")
-            $(".navbar-text").toggleClass("removed")
-          })
-        }
-      }, false)
-    })
-  }
+  init: initDropzone
+}
+
+const filters = [
+  faceReplaceFilter,
+  camanFilter
+]
+
+function initDropzone () {
+  this.on("addedfile", function (file) {
+    if (file) {
+      fileName = file.name
+      reader.readAsDataURL(file)
+    }
+  })
+}
+
+function newFileReader () {
+  r = new FileReader()
+
+  r.addEventListener('load', function () {
+    img = new Image()
+    img.src = r.result
+    img.onload = async () => filters.forEach(async filter => await filter())
+  }, false)
+
+  return r
+}
+
+async function camanFilter () {
+  canvas.width = img.width
+  canvas.height = img.height
+  $(".preview-wrapper").css("width", img.width)
+  $(".preview-wrapper").css("height", img.height)
+  ctx.drawImage(img, 0, 0)
+  $('#canvas').removeAttr('data-caman-id')
+  Caman('#canvas', function () {
+    this.customscale()
+    this.render()
+    $(".preview-wrapper").removeClass("hidden")
+    $(".navbar-text").toggleClass("removed")
+  })
+}
+
+async function faceReplaceFilter () {
+  const detections = await faceapi.detectAllFaces(canvas)
+  faces = detections.map(d => d.box)
+  faces.forEach(drawDukeDog)
 }
 
 $('#canvas').on('click', function (e) {
@@ -47,6 +70,12 @@ $('#canvas').on('click', function (e) {
   download(canvas, actualName + '-madifyed.jpg')
 })
 
+async function drawDukeDog (face) {
+  i = new Image()
+  i.onload = () => { ctx.drawImage(i, face.x, face.y, face.width, face.height) }
+  i.src = './img/duke-dog.png'
+}
+
 function download (canvas, filename) {
   var e
   var lnk = document.createElement('a')
@@ -62,4 +91,4 @@ function download (canvas, filename) {
   else if (lnk.fireEvent) {
     lnk.fireEvent('onclick')
   }
-}
+}