Add joker face

Author: flexbox

joker-face/.gitignore

@@ -0,0 +1,69 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variable files
+.env*
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity

joker-face/.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public

joker-face/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "arrowParens": "avoid",
+  "semi": false
+}

joker-face/LICENSE

@@ -0,0 +1,14 @@
+The BSD Zero Clause License (0BSD)
+
+Copyright (c) 2020 Gatsby Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

joker-face/README.md

@@ -0,0 +1,7 @@
+# Jokey your face
+
+Using [face-api.js](https://github.com/justadudewhohacks/face-api.js) to add a mask on your face
+
+## Result
+
+![](./static/images/result.gif)

joker-face/gatsby-config.js

@@ -0,0 +1,17 @@
+/**
+ * Configure your Gatsby site with this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/gatsby-config/
+ */
+
+module.exports = {
+  /* Your site config here */
+  plugins: [
+    {
+      resolve: "gatsby-plugin-emoji-favicon",
+      options: {
+        emoji: "🤡",
+      },
+    },
+  ],
+}

joker-face/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "gatsby-starter-hello-world",
+  "private": true,
+  "description": "A simplified bare-bones starter for Gatsby",
+  "version": "0.1.0",
+  "license": "0BSD",
+  "scripts": {
+    "build": "gatsby build",
+    "develop": "gatsby develop",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+    "start": "npm run develop",
+    "serve": "gatsby serve",
+    "clean": "gatsby clean",
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+  },
+  "dependencies": {
+    "face-api.js": "^0.22.2",
+    "gatsby": "^2.23.12",
+    "gatsby-plugin-emoji-favicon": "^1.5.0",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "devDependencies": {
+    "prettier": "2.0.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
+  },
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  }
+}

joker-face/src/pages/index.js

@@ -0,0 +1,44 @@
+import React, { useEffect } from "react"
+import { jokerface } from "../utils/jokerface"
+import "./styles.css"
+
+export default function Home() {
+  useEffect(() => {
+    jokerface()
+  }, [])
+
+  return (
+    <div className="layout">
+      <header>
+        <h1>Joker your face with Machine Learning</h1>
+        <p>
+          This demo uses{" "}
+          <a href="https://github.com/justadudewhohacks/face-api.js">
+            face-api.js
+          </a>{" "}
+          to find faces, then we do some math to determine face size and nose
+          detection so we can put a joker face!
+        </p>
+      </header>
+      <main>
+        <p>
+          <code className="status">Detecting…</code>
+        </p>
+        <div className="container-image">
+          <img
+            className="mask-image"
+            src="images/mark-hamill-joker-face-mask.png"
+            alt=""
+          />
+          <img
+            className="target-image"
+            crossOrigin="anonymous"
+            src="images/IMG_0640.jpg"
+            alt=""
+          />
+        </div>
+      </main>
+      <footer></footer>
+    </div>
+  )
+}