├── .htmlnanorc ├── .github └── demo.png ├── CHANGELOG.md ├── package.json ├── src ├── styles.less ├── index.ts └── index.pug ├── LICENSE ├── README.md ├── .gitignore ├── CODE_OF_CONDUCT.md └── CONTRIBUTING.md /.htmlnanorc: -------------------------------------------------------------------------------- 1 | { 2 | "minifySvg": false 3 | } 4 | -------------------------------------------------------------------------------- /.github/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CorentinTh/emotion/HEAD/.github/demo.png -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | All notable changes to this project will be documented in this file. 3 | 4 | The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), 5 | and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). 6 | 7 | 8 | ## 1.0.0 9 | - First release 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "emotion", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "dev": "parcel src/index.pug -d dev", 8 | "build": "parcel build src/index.pug -d dist" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "less": "^3.12.2", 15 | "parcel-bundler": "^1.12.4", 16 | "pug": "^3.0.0", 17 | "typescript": "^3.9.7" 18 | }, 19 | "dependencies": { 20 | "face-api.js": "^0.22.2", 21 | "spectre.css": "^0.5.9" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/styles.less: -------------------------------------------------------------------------------- 1 | html{ 2 | height: 100%; 3 | } 4 | 5 | body{ 6 | padding: 0; 7 | margin: 0; 8 | min-height: 100%; 9 | } 10 | 11 | video{ 12 | width: 100%; 13 | } 14 | 15 | #emoji-wrapper{ 16 | width: 100%; 17 | height: 100%; 18 | display: flex; 19 | align-items: center; 20 | justify-content: center; 21 | font-size: 100px; 22 | } 23 | 24 | #expressions-wrapper{ 25 | table{ 26 | td{ 27 | padding: 0 5px; 28 | } 29 | } 30 | } 31 | 32 | h1 { 33 | margin: 0 !important; 34 | } 35 | 36 | .github-icon{ 37 | width: 42px; 38 | height: 42px; 39 | fill: #fff; 40 | } 41 | 42 | .bg-primary{ 43 | a { 44 | color: white; 45 | 46 | &:hover{ 47 | border-bottom: 1px dotted; 48 | text-decoration: none; 49 | color: white; 50 | } 51 | 52 | &:visited{ 53 | color: white; 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Corentin THOMASSET 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. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Emotion 2 | Live facial expression to emoji with your webcam. Test it [here](emotion.ctmsst.vercel.app). 3 | 4 | ![demo](.github/demo.png) 5 | 6 | ## Dev 7 | Install dependencies by running the following command: 8 | ```shell 9 | npm install 10 | ``` 11 | 12 | Then compiles and hot-reloads for development: 13 | ```shell 14 | npm run dev 15 | ``` 16 | 17 | Compile for production by running: 18 | ```shell 19 | npm run build 20 | ``` 21 | 22 | ## Contribute 23 | **Pull requests are welcome !** Feel free to contribute. 24 | 25 | ## Credits 26 | Coded with ❤️ by [Corentin Thomasset](https://twitter.com/cthmsst). 27 | 28 | This project is built using the [parcel bundler](https://github.com/parcel-bundler/parcel), 29 | [less](https://github.com/less/less.js), [pug](https://github.com/pugjs/pug), and 30 | [typescript](https://github.com/microsoft/TypeScript), it is continuously deployed using 31 | [vercel.com](https://vercel.com) and uses [face-api.js](https://github.com/justadudewhohacks/face-api.js) and 32 | [spectre css](https://github.com/picturepan2/spectre) to run. 33 | 34 | ## License 35 | This project is under the [MIT license](LICENSE). 36 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import 'spectre.css'; 2 | import * as faceapi from 'face-api.js'; 3 | 4 | const modelsBaseURL = 'https://cdn.jsdelivr.net/gh/justadudewhohacks/face-api.js@latest/weights' 5 | 6 | const emotions = { 7 | happy: "😀", 8 | angry: "😡", 9 | disgusted: "🤢", 10 | fearful: "😱", 11 | neutral: "😐", 12 | surprised: "😳", 13 | sad: '😟' 14 | }; 15 | 16 | const expressionsWrapperEl: HTMLElement = document.getElementById('expressions-wrapper'); 17 | const videoEl: HTMLVideoElement = document.getElementById('video'); 18 | const cameraPermissionEl: HTMLElement = document.getElementById('camera-permission'); 19 | const loadingWrapperEl: HTMLElement = document.getElementById('loading-wrapper'); 20 | const resultWrapperEl: HTMLElement = document.getElementById('result-wrapper'); 21 | const emojiWrapperEl: HTMLElement = document.getElementById('emoji-wrapper'); 22 | 23 | const loop = async () => { 24 | const result = await faceapi.detectSingleFace(videoEl, new faceapi.TinyFaceDetectorOptions()).withFaceExpressions(); 25 | 26 | if(result){ 27 | const expressions = result.expressions.asSortedArray() 28 | const emotionLabel = expressions[0].expression; 29 | const emoji = emotions[emotionLabel]; 30 | 31 | emojiWrapperEl.innerText = emoji 32 | expressionsWrapperEl.innerHTML = '' + expressions 33 | .map(e => ``) 34 | .join('') + '
${e.expression}${e.probability.toFixed(2)}
' 35 | } 36 | 37 | requestAnimationFrame(() => loop()); 38 | } 39 | 40 | const setup = async () => { 41 | await faceapi.nets.tinyFaceDetector.loadFromUri(modelsBaseURL); 42 | await faceapi.nets.faceExpressionNet.loadFromUri(modelsBaseURL); 43 | 44 | try { 45 | videoEl.srcObject = await navigator.mediaDevices.getUserMedia({video: true, audio: false}); 46 | videoEl.onloadedmetadata = loop; 47 | resultWrapperEl.hidden = false; 48 | }catch (e) { 49 | cameraPermissionEl.hidden = false; 50 | } 51 | loadingWrapperEl.hidden = true; 52 | } 53 | 54 | window.onload = setup; 55 | 56 | 57 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | # IDE 107 | .idea 108 | 109 | dev 110 | -------------------------------------------------------------------------------- /src/index.pug: -------------------------------------------------------------------------------- 1 | doctype html 2 | html(lang='en') 3 | head 4 | title Emotion - Detect your facial emotion 5 | link(rel='stylesheet', href='./styles.less') 6 | meta( name='viewport', content='width=device-width, initial-scale=1' ) 7 | meta(name='description' content='Live facial expression to emoji with your webcam') 8 | 9 | body.bg-gray 10 | .hero.hero-sm.bg-primary 11 | .hero-body.columns 12 | .col-ml-auto.col-3.col-sm-6 13 | h1 Emotion 14 | p Live facial expression to emoji with your webcam 15 | .col-mr-auto.col-3.col-sm-6.text-right 16 | a(href='//github.com/CorentinTh/emotion') 17 | svg.github-icon(role='img' viewbox='0 0 24 24' xmlns='http://www.w3.org/2000/svg') 18 | path(d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12') 19 | 20 | p By #[a(href='//github.com/CorentinTh') Corentin Thomasset] 21 | 22 | #loading-wrapper: .loading.loading-lg.mt-2 23 | #camera-permission.col-mx-auto.col-6.col-sm-12.mt-2.text-center(hidden) 24 | .card 25 | .card-header.h5 Oups... 26 | .card-body 27 | | This app needs you to make silly faces, so we need to access your camera. 28 | br 29 | | Allow access to camera to continue (on desktop, click on the locker on the left of the url, on mobile access your app permissions). 30 | 31 | #result-wrapper(hidden) 32 | .columns 33 | .column.col-6: video#video(autoplay, muted, playsinline) 34 | .column.col-6: #emoji-wrapper: .loading.loading-lg 35 | .column.col-12#expressions-wrapper 36 | 37 | script(src='../src/index.ts', async, defer) 38 | 39 | if process.env.GA_TAG 40 | script(async='', src='https://www.googletagmanager.com/gtag/js?id=' + process.env.GA_TAG) 41 | script. 42 | window.dataLayer = window.dataLayer || []; 43 | function gtag() {dataLayer.push(arguments);} 44 | gtag('js', new Date()); 45 | gtag('config', '#{process.env.GA_TAG}'); 46 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at contact@corentin-thomasset.fr. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | Please note we have a code of conduct, please follow it in all your interactions with the project. 7 | 8 | ## Pull Request Process 9 | 10 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 11 | build. 12 | 2. Update the README.md with details of changes to the interface, this includes new environment 13 | variables, exposed ports, useful file locations and container parameters. 14 | 3. Increase the version numbers in any examples files and the README.md to the new version that this 15 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 16 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 17 | do not have permission to do that, you may request the second reviewer to merge it for you. 18 | 19 | ## Code of Conduct 20 | 21 | ### Our Pledge 22 | 23 | In the interest of fostering an open and welcoming environment, we as 24 | contributors and maintainers pledge to making participation in our project and 25 | our community a harassment-free experience for everyone, regardless of age, body 26 | size, disability, ethnicity, gender identity and expression, level of experience, 27 | nationality, personal appearance, race, religion, or sexual identity and 28 | orientation. 29 | 30 | ### Our Standards 31 | 32 | Examples of behavior that contributes to creating a positive environment 33 | include: 34 | 35 | * Using welcoming and inclusive language 36 | * Being respectful of differing viewpoints and experiences 37 | * Gracefully accepting constructive criticism 38 | * Focusing on what is best for the community 39 | * Showing empathy towards other community members 40 | 41 | Examples of unacceptable behavior by participants include: 42 | 43 | * The use of sexualized language or imagery and unwelcome sexual attention or 44 | advances 45 | * Trolling, insulting/derogatory comments, and personal or political attacks 46 | * Public or private harassment 47 | * Publishing others' private information, such as a physical or electronic 48 | address, without explicit permission 49 | * Other conduct which could reasonably be considered inappropriate in a 50 | professional setting 51 | 52 | ### Our Responsibilities 53 | 54 | Project maintainers are responsible for clarifying the standards of acceptable 55 | behavior and are expected to take appropriate and fair corrective action in 56 | response to any instances of unacceptable behavior. 57 | 58 | Project maintainers have the right and responsibility to remove, edit, or 59 | reject comments, commits, code, wiki edits, issues, and other contributions 60 | that are not aligned to this Code of Conduct, or to ban temporarily or 61 | permanently any contributor for other behaviors that they deem inappropriate, 62 | threatening, offensive, or harmful. 63 | 64 | ### Scope 65 | 66 | This Code of Conduct applies both within project spaces and in public spaces 67 | when an individual is representing the project or its community. Examples of 68 | representing a project or community include using an official project e-mail 69 | address, posting via an official social media account, or acting as an appointed 70 | representative at an online or offline event. Representation of a project may be 71 | further defined and clarified by project maintainers. 72 | 73 | ### Enforcement 74 | 75 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 76 | reported by contacting the project team at contact@corentin-thomasset.fr. All 77 | complaints will be reviewed and investigated and will result in a response that 78 | is deemed necessary and appropriate to the circumstances. The project team is 79 | obligated to maintain confidentiality with regard to the reporter of an incident. 80 | Further details of specific enforcement policies may be posted separately. 81 | 82 | Project maintainers who do not follow or enforce the Code of Conduct in good 83 | faith may face temporary or permanent repercussions as determined by other 84 | members of the project's leadership. 85 | 86 | ### Attribution 87 | 88 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 89 | available at [http://contributor-covenant.org/version/1/4][version] 90 | 91 | [homepage]: http://contributor-covenant.org 92 | [version]: http://contributor-covenant.org/version/1/4/ 93 | --------------------------------------------------------------------------------