Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d157cd3

Browse files
committed
Add joker face
1 parent d45e27e commit d157cd3

18 files changed

+12812
-0
lines changed

‎joker-face/.gitignore

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
8+
# Runtime data
9+
pids
10+
*.pid
11+
*.seed
12+
*.pid.lock
13+
14+
# Directory for instrumented libs generated by jscoverage/JSCover
15+
lib-cov
16+
17+
# Coverage directory used by tools like istanbul
18+
coverage
19+
20+
# nyc test coverage
21+
.nyc_output
22+
23+
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24+
.grunt
25+
26+
# Bower dependency directory (https://bower.io/)
27+
bower_components
28+
29+
# node-waf configuration
30+
.lock-wscript
31+
32+
# Compiled binary addons (http://nodejs.org/api/addons.html)
33+
build/Release
34+
35+
# Dependency directories
36+
node_modules/
37+
jspm_packages/
38+
39+
# Typescript v1 declaration files
40+
typings/
41+
42+
# Optional npm cache directory
43+
.npm
44+
45+
# Optional eslint cache
46+
.eslintcache
47+
48+
# Optional REPL history
49+
.node_repl_history
50+
51+
# Output of 'npm pack'
52+
*.tgz
53+
54+
# dotenv environment variable files
55+
.env*
56+
57+
# gatsby files
58+
.cache/
59+
public
60+
61+
# Mac files
62+
.DS_Store
63+
64+
# Yarn
65+
yarn-error.log
66+
.pnp/
67+
.pnp.js
68+
# Yarn Integrity file
69+
.yarn-integrity

‎joker-face/.prettierignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
.cache
2+
package.json
3+
package-lock.json
4+
public

‎joker-face/.prettierrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"arrowParens": "avoid",
3+
"semi": false
4+
}

‎joker-face/LICENSE

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

‎joker-face/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Jokey your face
2+
3+
Using [face-api.js](https://github.com/justadudewhohacks/face-api.js) to add a mask on your face
4+
5+
## Result
6+
7+
![](./static/images/result.gif)

‎joker-face/gatsby-config.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
/**
2+
* Configure your Gatsby site with this file.
3+
*
4+
* See: https://www.gatsbyjs.org/docs/gatsby-config/
5+
*/
6+
7+
module.exports = {
8+
/* Your site config here */
9+
plugins: [
10+
{
11+
resolve: "gatsby-plugin-emoji-favicon",
12+
options: {
13+
emoji: "🤡",
14+
},
15+
},
16+
],
17+
}

‎joker-face/package.json

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "gatsby-starter-hello-world",
3+
"private": true,
4+
"description": "A simplified bare-bones starter for Gatsby",
5+
"version": "0.1.0",
6+
"license": "0BSD",
7+
"scripts": {
8+
"build": "gatsby build",
9+
"develop": "gatsby develop",
10+
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
11+
"start": "npm run develop",
12+
"serve": "gatsby serve",
13+
"clean": "gatsby clean",
14+
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
15+
},
16+
"dependencies": {
17+
"face-api.js": "^0.22.2",
18+
"gatsby": "^2.23.12",
19+
"gatsby-plugin-emoji-favicon": "^1.5.0",
20+
"react": "^16.12.0",
21+
"react-dom": "^16.12.0"
22+
},
23+
"devDependencies": {
24+
"prettier": "2.0.5"
25+
},
26+
"repository": {
27+
"type": "git",
28+
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
29+
},
30+
"bugs": {
31+
"url": "https://github.com/gatsbyjs/gatsby/issues"
32+
}
33+
}

‎joker-face/src/pages/index.js

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import React, { useEffect } from "react"
2+
import { jokerface } from "../utils/jokerface"
3+
import "./styles.css"
4+
5+
export default function Home() {
6+
useEffect(() => {
7+
jokerface()
8+
}, [])
9+
10+
return (
11+
<div className="layout">
12+
<header>
13+
<h1>Joker your face with Machine Learning</h1>
14+
<p>
15+
This demo uses{" "}
16+
<a href="https://github.com/justadudewhohacks/face-api.js">
17+
face-api.js
18+
</a>{" "}
19+
to find faces, then we do some math to determine face size and nose
20+
detection so we can put a joker face!
21+
</p>
22+
</header>
23+
<main>
24+
<p>
25+
<code className="status">Detecting...</code>
26+
</p>
27+
<div className="container-image">
28+
<img
29+
className="mask-image"
30+
src="images/mark-hamill-joker-face-mask.png"
31+
alt=""
32+
/>
33+
<img
34+
className="target-image"
35+
crossOrigin="anonymous"
36+
src="images/IMG_0640.jpg"
37+
alt=""
38+
/>
39+
</div>
40+
</main>
41+
<footer></footer>
42+
</div>
43+
)
44+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /