├── docs ├── model │ ├── emotion │ │ ├── group1-shard1of1 │ │ ├── group2-shard1of1 │ │ ├── group3-shard1of1 │ │ ├── group4-shard1of1 │ │ ├── group5-shard1of1 │ │ ├── group6-shard1of1 │ │ ├── group7-shard1of1 │ │ ├── group8-shard1of1 │ │ ├── group9-shard1of1 │ │ ├── group10-shard1of1 │ │ ├── group11-shard1of1 │ │ ├── group12-shard1of1 │ │ ├── group13-shard1of1 │ │ ├── group14-shard1of1 │ │ ├── group15-shard1of1 │ │ ├── group16-shard1of1 │ │ ├── group17-shard1of1 │ │ ├── group18-shard1of1 │ │ ├── group19-shard1of1 │ │ ├── group20-shard1of1 │ │ ├── group21-shard1of1 │ │ ├── group22-shard1of1 │ │ ├── group23-shard1of1 │ │ ├── group24-shard1of1 │ │ ├── group25-shard1of1 │ │ ├── group26-shard1of1 │ │ ├── group27-shard1of1 │ │ ├── group28-shard1of1 │ │ ├── group29-shard1of1 │ │ ├── group30-shard1of1 │ │ ├── group31-shard1of1 │ │ ├── group32-shard1of1 │ │ ├── group33-shard1of1 │ │ ├── group34-shard1of1 │ │ ├── group35-shard1of1 │ │ ├── group36-shard1of1 │ │ ├── group37-shard1of1 │ │ ├── group38-shard1of1 │ │ ├── group39-shard1of1 │ │ ├── group40-shard1of1 │ │ ├── group41-shard1of1 │ │ ├── group42-shard1of1 │ │ ├── group43-shard1of1 │ │ ├── group44-shard1of1 │ │ ├── group45-shard1of1 │ │ ├── group46-shard1of1 │ │ ├── group47-shard1of1 │ │ ├── group48-shard1of1 │ │ ├── group49-shard1of1 │ │ ├── group50-shard1of1 │ │ ├── group51-shard1of1 │ │ ├── group52-shard1of1 │ │ ├── group53-shard1of1 │ │ ├── group54-shard1of1 │ │ ├── group55-shard1of1 │ │ └── model.json │ ├── gender │ │ ├── group1-shard1of1 │ │ ├── group10-shard1of1 │ │ ├── group11-shard1of1 │ │ ├── group12-shard1of1 │ │ ├── group13-shard1of1 │ │ ├── group14-shard1of1 │ │ ├── group15-shard1of1 │ │ ├── group16-shard1of1 │ │ ├── group17-shard1of1 │ │ ├── group18-shard1of1 │ │ ├── group19-shard1of1 │ │ ├── group2-shard1of1 │ │ ├── group20-shard1of1 │ │ ├── group21-shard1of1 │ │ ├── group22-shard1of1 │ │ ├── group23-shard1of1 │ │ ├── group24-shard1of1 │ │ ├── group25-shard1of1 │ │ ├── group26-shard1of1 │ │ ├── group27-shard1of1 │ │ ├── group28-shard1of1 │ │ ├── group29-shard1of1 │ │ ├── group3-shard1of1 │ │ ├── group30-shard1of1 │ │ ├── group31-shard1of1 │ │ ├── group32-shard1of1 │ │ ├── group33-shard1of1 │ │ ├── group34-shard1of1 │ │ ├── group35-shard1of1 │ │ ├── group36-shard1of1 │ │ ├── group37-shard1of1 │ │ ├── group38-shard1of1 │ │ ├── group39-shard1of1 │ │ ├── group4-shard1of1 │ │ ├── group40-shard1of1 │ │ ├── group41-shard1of1 │ │ ├── group42-shard1of1 │ │ ├── group43-shard1of1 │ │ ├── group44-shard1of1 │ │ ├── group45-shard1of1 │ │ ├── group46-shard1of1 │ │ ├── group47-shard1of1 │ │ ├── group48-shard1of1 │ │ ├── group49-shard1of1 │ │ ├── group5-shard1of1 │ │ ├── group50-shard1of1 │ │ ├── group51-shard1of1 │ │ ├── group52-shard1of1 │ │ ├── group53-shard1of1 │ │ ├── group54-shard1of1 │ │ ├── group55-shard1of1 │ │ ├── group6-shard1of1 │ │ ├── group7-shard1of1 │ │ ├── group8-shard1of1 │ │ └── group9-shard1of1 │ └── emotion_space │ │ ├── encModel.weights.bin │ │ └── encModel.json ├── images │ └── face_classification_og.png ├── js │ ├── util.js │ ├── model_gender.js │ ├── model_emotion.js │ ├── video.js │ ├── webcam.js │ ├── index.js │ └── tracking-min.js ├── css │ └── style.css ├── webcam.html ├── video.html ├── index.html └── emotion_tensorspace.html ├── .gitignore ├── LICENSE └── README.md /docs/model/emotion/group1-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group1-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group2-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group2-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group3-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group3-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group4-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group4-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group5-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group5-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group6-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group6-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group7-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group7-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group8-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group8-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group9-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group9-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group1-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group1-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group10-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group10-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group11-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group11-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group12-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group12-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group13-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group13-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group14-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group14-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group15-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group15-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group16-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group16-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group17-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group17-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group18-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group18-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group19-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group19-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group2-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group2-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group20-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group20-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group21-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group21-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group22-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group22-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group23-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group23-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group24-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group24-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group25-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group25-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group26-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group26-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group27-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group27-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group28-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group28-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group29-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group29-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group3-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group3-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group30-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group30-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group31-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group31-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group32-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group32-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group33-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group33-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group34-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group34-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group35-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group35-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group36-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group36-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group37-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group37-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group38-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group38-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group39-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group39-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group4-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group4-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group40-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group40-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group41-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group41-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group42-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group42-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group43-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group43-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group44-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group44-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group45-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group45-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group46-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group46-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group47-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group47-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group48-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group48-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group49-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group49-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group5-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group5-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group50-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group50-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group51-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group51-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group52-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group52-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group53-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group53-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group54-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group54-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group55-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group55-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group6-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group6-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group7-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group7-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group8-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group8-shard1of1 -------------------------------------------------------------------------------- /docs/model/gender/group9-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/gender/group9-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group10-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group10-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group11-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group11-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group12-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group12-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group13-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group13-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group14-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group14-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group15-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group15-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group16-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group16-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group17-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group17-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group18-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group18-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group19-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group19-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group20-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group20-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group21-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group21-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group22-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group22-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group23-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group23-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group24-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group24-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group25-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group25-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group26-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group26-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group27-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group27-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group28-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group28-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group29-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group29-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group30-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group30-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group31-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group31-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group32-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group32-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group33-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group33-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group34-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group34-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group35-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group35-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group36-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group36-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group37-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group37-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group38-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group38-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group39-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group39-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group40-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group40-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group41-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group41-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group42-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group42-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group43-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group43-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group44-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group44-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group45-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group45-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group46-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group46-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group47-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group47-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group48-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group48-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group49-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group49-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group50-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group50-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group51-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group51-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group52-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group52-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group53-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group53-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group54-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group54-shard1of1 -------------------------------------------------------------------------------- /docs/model/emotion/group55-shard1of1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion/group55-shard1of1 -------------------------------------------------------------------------------- /docs/images/face_classification_og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/images/face_classification_og.png -------------------------------------------------------------------------------- /docs/model/emotion_space/encModel.weights.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tupleblog/face-classification-js/HEAD/docs/model/emotion_space/encModel.weights.bin -------------------------------------------------------------------------------- /docs/js/util.js: -------------------------------------------------------------------------------- 1 | var LABEL_EMOTIONS = {0:'Angry', 1:'Disgust', 2:'Fear', 3:'Happy', 4:'Sad', 5:'Surprise', 6:'Neutral'}; 2 | var LABEL_GENDER = {0:'Woman', 1:'Man'}; 3 | 4 | function preprocess_input(im) { 5 | img = tf.fromPixels(im, 1).toFloat() 6 | offset = tf.scalar(255); 7 | x1 = tf.scalar(0.5); 8 | x2 = tf.scalar(2); 9 | normalized = img.div(offset).sub(x1).mul(x2); 10 | batched = normalized.reshape([1, 64, 64, 1]); 11 | 12 | return batched; 13 | } 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ### macOS ### 2 | *.DS_Store 3 | .AppleDouble 4 | .LSOverride 5 | 6 | # Icon must end with two \r 7 | Icon 8 | 9 | # Thumbnails 10 | ._* 11 | 12 | # Files that might appear in the root of a volume 13 | .DocumentRevisions-V100 14 | .fseventsd 15 | .Spotlight-V100 16 | .TemporaryItems 17 | .Trashes 18 | .VolumeIcon.icns 19 | .com.apple.timemachine.donotpresent 20 | 21 | # Directories potentially created on remote AFP share 22 | .AppleDB 23 | .AppleDesktop 24 | Network Trash Folder 25 | Temporary Items 26 | .apdisk 27 | .tags 28 | -------------------------------------------------------------------------------- /docs/js/model_gender.js: -------------------------------------------------------------------------------- 1 | var MODEL_GENDER; 2 | var IS_MODEL_GENDER_LOADED = false; 3 | initGender = async () => { 4 | MODEL_GENDER = await tf.loadModel("./model/gender/model.json"); 5 | console.log("Model Gender Loaded"); 6 | 7 | //Warm up network 8 | MODEL_GENDER.predict(tf.zeros([1, 64, 64, 1])); 9 | IS_MODEL_GENDER_LOADED = true 10 | M.toast({html: 'Model Gender Loaded.', displayLength: 1000}) 11 | }; 12 | 13 | initGender(); 14 | 15 | function predictGender(input) { 16 | var r = MODEL_GENDER.predict(input); 17 | var result = r.dataSync(); 18 | var tresult = tf.tensor(result) 19 | var label_index = tf.argMax(tresult).dataSync()[0] 20 | 21 | var label_percent = result[label_index].toFixed(4) * 100; 22 | 23 | return {"result": result, "label": LABEL_GENDER[label_index], "percent": label_percent}; 24 | } 25 | -------------------------------------------------------------------------------- /docs/js/model_emotion.js: -------------------------------------------------------------------------------- 1 | var MODEL_EMOTION; 2 | var IS_MODEL_EMOTION_LOADED = false; 3 | initEmotion = async () => { 4 | MODEL_EMOTION = await tf.loadModel("./model/emotion/model.json"); 5 | console.log("Model Emotion Loaded"); 6 | 7 | //Warm up network 8 | MODEL_EMOTION.predict(tf.zeros([1, 64, 64, 1])); 9 | IS_MODEL_EMOTION_LOADED = true; 10 | M.toast({html: 'Model Emotion Loaded.', displayLength: 1000}) 11 | }; 12 | 13 | initEmotion(); 14 | 15 | function predictEmotion(input) { 16 | var startTime = performance.now(); 17 | 18 | var r = MODEL_EMOTION.predict(input); 19 | var result = r.dataSync(); 20 | var tresult = tf.tensor(result) 21 | var label_index = tf.argMax(tresult).dataSync()[0] 22 | 23 | var label_percent = result[label_index].toFixed(4) * 100; 24 | 25 | var totalTime = performance.now() - startTime; 26 | //console.log('Predict Emotion Time: ' + Math.floor(totalTime)); 27 | 28 | return {"result": result, "label": LABEL_EMOTIONS[label_index], "percent": label_percent}; 29 | } 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 tupleblog 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 | # face-classification-js 2 | 3 | Repository for gender and emotion classification using [TensorFlow.js](https://js.tensorflow.org/). 4 | The original repository can be seen at [oarriaga/face_classification](https://github.com/oarriaga/face_classification). 5 | We train [MobileNet](https://www.tensorflow.org/api_docs/python/tf/keras/applications/MobileNet) 6 | to classify gender and emotion of the face based on FER2013 and IMDB datasets. 7 | The face tracking part is done by using [`trackingjs`](https://trackingjs.com/), 8 | lightweight JavaScript core for computer vision. 9 | 10 | You can see more details of analysis and examples on [tupleblog](https://tupleblog.github.io/). 11 | 12 | 13 | ## demo 14 | 15 | Try out the image classification demo at 16 | [tupleblog.github.io/face-classification-js](http://tupleblog.github.io/face-classification-js/). 17 | You can also try webcam real-time video classification on web browser at 18 | [tupleblog.github.io/face-classification-js/webcam.html](https://tupleblog.github.io/face-classification-js/webcam.html) 19 | 20 | 21 | ## contributors 22 | 23 | - [kittinan](https://github.com/kittinan) 24 | - [titipata](https://github.com/titipata) 25 | - [bluenex](https://github.com/bluenex/) 26 | 27 | from [tupleblog](https://tupleblog.github.io/) 28 | -------------------------------------------------------------------------------- /docs/css/style.css: -------------------------------------------------------------------------------- 1 | /* sticky footer */ 2 | * { 3 | margin: 0; 4 | } 5 | 6 | html, body { 7 | height: 100%; 8 | font-family: 'CMUSansSerifMedium', serif; 9 | } 10 | 11 | .wrapper { 12 | min-height: 100%; 13 | height: auto !important; 14 | height: 100%; 15 | margin: 0 auto -5em; 16 | } 17 | 18 | .footer, .push { 19 | height: 5em; 20 | color: rgba(255,255,255,0.8); 21 | } 22 | 23 | /* center footer */ 24 | .flex-container { 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | .flex-item { 31 | text-align: center; 32 | } 33 | 34 | /* images */ 35 | #card-item-container { 36 | visibility: hidden; 37 | } 38 | 39 | #image-container { 40 | position: relative; 41 | padding: 10px; 42 | } 43 | 44 | #show-img { 45 | max-width: 100%; 46 | } 47 | 48 | .face-frame { 49 | border: 2px solid #ff0000; 50 | position: absolute; 51 | } 52 | 53 | .canvas-face { 54 | display: none; 55 | } 56 | .chart-result-profile canvas { 57 | border-radius: 50px; 58 | } 59 | 60 | #head-container { 61 | font-size: 2.1rem; 62 | } 63 | 64 | #webcam { 65 | width: 100%; 66 | } 67 | #canvas_webcam { 68 | width: 100%; 69 | position: absolute; 70 | top: 10px; 71 | left: 10px; 72 | } 73 | #webcam_frame { 74 | width: 100%; 75 | position: absolute; 76 | top: 0; 77 | left: 0; 78 | border: 2px solid #ff0000; 79 | } 80 | #btn-share { 81 | display: none; 82 | } 83 | #btn-manual { 84 | display: none; 85 | } 86 | .cropper-modal { 87 | opacity: 0.05; 88 | } 89 | #main-container { 90 | font-family: Roboto, sans-serif; 91 | } 92 | 93 | @media only screen and (max-width: 992px) { 94 | #head-container { 95 | text-align: center; 96 | font-size: 1.8rem; 97 | } 98 | } 99 | 100 | @media only screen and (max-width: 640px) { 101 | #head-container { 102 | text-align: center; 103 | font-size: 1.5rem; 104 | } 105 | } 106 | -------------------------------------------------------------------------------- /docs/webcam.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 |
42 |
43 | 44 | 45 |
46 |
47 |
48 | 49 |
50 |
51 |
52 | 53 |
54 | 55 | 56 |
57 |
58 | 59 |
60 |
61 | 62 |
63 |
64 |
65 |
66 |
67 |
68 | 69 | 70 |
71 |
72 | 73 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 105 | 113 | 114 | 115 | 122 | 123 | 124 | 125 | -------------------------------------------------------------------------------- /docs/video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
41 |
42 |

Select your video

43 |
44 |
45 | Select video 46 | 47 | video_library 48 |
49 |
50 | 51 |
52 |
53 |
54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 |
62 | 63 | 64 |
65 |
66 |
67 | 68 |
69 |
70 |
71 | 72 |
73 | 74 | 75 |
76 |
77 | 78 |
79 |
80 |
81 |
82 |
83 |
84 | 85 | 86 |
87 |
88 | 89 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 121 | 129 | 130 | 131 | 138 | 139 | 140 | 141 | -------------------------------------------------------------------------------- /docs/js/video.js: -------------------------------------------------------------------------------- 1 | var WEBCAM = document.getElementById('webcam'); 2 | var FACE_FRAME = document.getElementById('webcam_frame'); 3 | var CANVAS_FRAME = document.getElementById('canvas_webcam'); 4 | var CANVAS_FRAME_CTX = CANVAS_FRAME.getContext('2d'); 5 | var CANVAS_FACE = document.getElementById('face_profile_chart'); 6 | var CANVAS_FACE_CTX = CANVAS_FACE.getContext('2d'); 7 | var CANVAS_FACE_GREY = document.getElementById('face_profile_greyscale'); 8 | var CANVAS_FACE_GREY_CTX = CANVAS_FACE_GREY.getContext('2d'); 9 | var CHART_EMOTION; 10 | var CHART_GENDER; 11 | var EXPAND_BOX = {'x': 0, 'y': 0, 'w': 0, 'h': 0}; 12 | var TRACKER = new tracking.ObjectTracker(['face']); 13 | TRACKER.setEdgesDensity(0.1); 14 | TRACKER.setInitialScale(4); 15 | TRACKER.setStepSize(1); 16 | 17 | $(document).ready(function() { 18 | 19 | $(document).on("change", "#local_file", function(evt) { 20 | var $source = $('#webcam'); 21 | $source[0].src = URL.createObjectURL(this.files[0]); 22 | //$source.parent()[0].load(); 23 | }); 24 | 25 | tracking.track('#webcam', TRACKER, { }); 26 | setTimeout(function(){ setCanvasFrameSize(); }, 3000); 27 | initChart(); 28 | 29 | if (window.screen.availWidth > 900) { 30 | //EXPAND_BOX = {'x': -5, 'y': -5, 'w': 5, 'h': 5}; 31 | } 32 | 33 | }); 34 | 35 | 36 | 37 | TRACKER.on('track', function(faces) { 38 | 39 | CANVAS_FRAME_CTX.clearRect(0, 0, CANVAS_FRAME.width, CANVAS_FRAME.height); 40 | 41 | if (faces.data.length == 0 42 | || IS_MODEL_EMOTION_LOADED == false) { 43 | return; 44 | } 45 | 46 | var rect = faces.data[0]; 47 | 48 | rect.x = rect.x - EXPAND_BOX.x; 49 | rect.y = rect.y - EXPAND_BOX.y; 50 | rect.width = rect.width + EXPAND_BOX.w; 51 | rect.height = rect.height + EXPAND_BOX.h; 52 | 53 | drawFaceFrame(rect); 54 | cropFace(rect); 55 | 56 | var result_emotion = getResultEmotion(CANVAS_FACE_GREY); 57 | updateResultChart(result_emotion); 58 | }); 59 | 60 | function setCanvasFrameSize() { 61 | 62 | var w = $('#webcam').width(); 63 | var h = $('#webcam').height(); 64 | CANVAS_FRAME.width = w; 65 | CANVAS_FRAME.height = h; 66 | } 67 | 68 | function drawFaceFrame(rect) { 69 | 70 | CANVAS_FRAME_CTX.strokeStyle = '#a64ceb'; 71 | CANVAS_FRAME_CTX.strokeRect(rect.x, rect.y, rect.width, rect.height); 72 | } 73 | 74 | function cropFace(rect) { 75 | 76 | var x = rect.x 77 | var y = rect.y; 78 | var w = rect.width; 79 | var h = rect.height; 80 | 81 | var w_w = $(WEBCAM).width(); 82 | var w_h = $(WEBCAM).height(); 83 | var video_w = WEBCAM.videoWidth; 84 | var video_h = WEBCAM.videoHeight; 85 | 86 | var ratio = video_w / w_w; 87 | //console.log(ratio); 88 | 89 | CANVAS_FACE_CTX.drawImage(WEBCAM, x*ratio, y*ratio, w * ratio, h * ratio, 0, 0, 64, 64); 90 | 91 | //Convert Image to Greyscale 92 | var imageData = CANVAS_FACE_CTX.getImageData(0, 0, CANVAS_FACE.width, CANVAS_FACE.height); 93 | var data = imageData.data; 94 | for (var i = 0; i < data.length; i += 4) { 95 | var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; 96 | data[i] = avg; // red 97 | data[i + 1] = avg; // green 98 | data[i + 2] = avg; // blue 99 | } 100 | CANVAS_FACE_GREY_CTX.putImageData(imageData, 0, 0); 101 | } 102 | 103 | function getResultEmotion(im) { 104 | var input = preprocess_input(im); 105 | var result = predictEmotion(input); 106 | return result; 107 | } 108 | 109 | function getResultGender(im) { 110 | var input = preprocess_input(im); 111 | var result = predictGender(input); 112 | return result; 113 | } 114 | 115 | function updateResultChart(result_emotion, result_gender) { 116 | 117 | CHART_EMOTION.data.datasets[0].label = 'Emotion: ' + result_emotion.label; 118 | CHART_EMOTION.data.datasets[0].data = result_emotion.result; 119 | CHART_EMOTION.update(50); 120 | } 121 | 122 | function initChart() { 123 | var options = { 124 | /*"animation": false,*/ 125 | "responsive": true, 126 | "maintainAspectRatio": false, 127 | "scales":{ 128 | "xAxes":[ 129 | { 130 | "ticks":{ 131 | "beginAtZero":true 132 | } 133 | } 134 | ] 135 | } 136 | }; 137 | 138 | CHART_EMOTION = new Chart(document.getElementById('chart_emotion'), { 139 | type: 'horizontalBar', 140 | data: { 141 | "labels":[ 142 | "Angry", 143 | "Disgust", 144 | "Fear", 145 | "Happy", 146 | "Sad", 147 | "Surprise", 148 | "Neutral" 149 | ], 150 | "datasets":[ 151 | { 152 | "label":"Emotion: ", 153 | "data": [0, 0, 0, 0, 0, 0, 0], 154 | "fill": false, 155 | "backgroundColor":[ 156 | "rgba(255, 99, 132, 0.2)", 157 | "rgba(255, 159, 64, 0.2)", 158 | "rgba(255, 205, 86, 0.2)", 159 | "rgba(75, 192, 192, 0.2)", 160 | "rgba(54, 162, 235, 0.2)", 161 | "rgba(153, 102, 255, 0.2)", 162 | "rgba(201, 203, 207, 0.2)" 163 | ], 164 | "borderColor":[ 165 | "rgb(255, 99, 132)", 166 | "rgb(255, 159, 64)", 167 | "rgb(255, 205, 86)", 168 | "rgb(75, 192, 192)", 169 | "rgb(54, 162, 235)", 170 | "rgb(153, 102, 255)", 171 | "rgb(201, 203, 207)" 172 | ], 173 | "borderWidth":1 174 | } 175 | ] 176 | }, 177 | options: options 178 | }); 179 | 180 | } 181 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 34 | 35 | 36 |
37 |
38 | 39 |
40 |
41 |
42 |

Select your photo

43 |
44 |
45 | Select photo 46 | 47 | add_a_photo 48 |
49 |
50 | 51 |
52 |
53 |
54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 |
62 | 63 | 64 |
65 |
66 |
67 |
68 |
69 | 70 | 71 | 84 | 85 |
86 |
87 |
88 | 89 | 90 |
91 |
92 |
93 |
94 |
95 | 96 |
97 |
98 |
99 |
100 |
101 |
102 | 103 | 104 |
105 |
106 | 107 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /docs/js/webcam.js: -------------------------------------------------------------------------------- 1 | var WEBCAM = document.getElementById('webcam'); 2 | var FACE_FRAME = document.getElementById('webcam_frame'); 3 | var CANVAS_FRAME = document.getElementById('canvas_webcam'); 4 | var CANVAS_FRAME_CTX = CANVAS_FRAME.getContext('2d'); 5 | var CANVAS_FACE = document.getElementById('face_profile_chart'); 6 | var CANVAS_FACE_CTX = CANVAS_FACE.getContext('2d'); 7 | var CANVAS_FACE_GREY = document.getElementById('face_profile_greyscale'); 8 | var CANVAS_FACE_GREY_CTX = CANVAS_FACE_GREY.getContext('2d'); 9 | var CHART_EMOTION; 10 | var CHART_GENDER; 11 | var EXPAND_BOX = {'x': 0, 'y': 0, 'w': 0, 'h': 0}; 12 | var TRACKER = new tracking.ObjectTracker(['face']); 13 | TRACKER.setEdgesDensity(0.1); 14 | TRACKER.setInitialScale(4); 15 | TRACKER.setStepSize(1); 16 | 17 | $(document).ready(function() { 18 | 19 | tracking.track('#webcam', TRACKER, { camera: true }); 20 | setTimeout(function(){ setCanvasFrameSize(); }, 3000); 21 | initChart(); 22 | 23 | if (window.screen.availWidth > 900) { 24 | //EXPAND_BOX = {'x': -5, 'y': -5, 'w': 5, 'h': 5}; 25 | } 26 | 27 | }); 28 | 29 | 30 | 31 | TRACKER.on('track', function(faces) { 32 | 33 | CANVAS_FRAME_CTX.clearRect(0, 0, CANVAS_FRAME.width, CANVAS_FRAME.height); 34 | 35 | if (faces.data.length == 0 36 | || IS_MODEL_GENDER_LOADED == false 37 | || IS_MODEL_EMOTION_LOADED == false) { 38 | return; 39 | } 40 | 41 | var rect = faces.data[0]; 42 | 43 | rect.x = rect.x - EXPAND_BOX.x; 44 | rect.y = rect.y - EXPAND_BOX.y; 45 | rect.width = rect.width + EXPAND_BOX.w; 46 | rect.height = rect.height + EXPAND_BOX.h; 47 | 48 | drawFaceFrame(rect); 49 | cropFace(rect); 50 | 51 | var result_emotion = getResultEmotion(CANVAS_FACE_GREY); 52 | var result_gender = getResultGender(CANVAS_FACE_GREY); 53 | updateResultChart(result_emotion, result_gender); 54 | }); 55 | 56 | function setCanvasFrameSize() { 57 | 58 | var w = $('#webcam').width(); 59 | var h = $('#webcam').height(); 60 | CANVAS_FRAME.width = w; 61 | CANVAS_FRAME.height = h; 62 | } 63 | 64 | function drawFaceFrame(rect) { 65 | 66 | CANVAS_FRAME_CTX.strokeStyle = '#a64ceb'; 67 | CANVAS_FRAME_CTX.strokeRect(rect.x, rect.y, rect.width, rect.height); 68 | } 69 | 70 | function cropFace(rect) { 71 | 72 | var x = rect.x 73 | var y = rect.y; 74 | var w = rect.width; 75 | var h = rect.height; 76 | 77 | var w_w = $(WEBCAM).width(); 78 | var w_h = $(WEBCAM).height(); 79 | var video_w = WEBCAM.videoWidth; 80 | var video_h = WEBCAM.videoHeight; 81 | 82 | var ratio = video_w / w_w; 83 | //console.log(ratio); 84 | 85 | CANVAS_FACE_CTX.drawImage(WEBCAM, x*ratio, y*ratio, w * ratio, h * ratio, 0, 0, 64, 64); 86 | 87 | //Convert Image to Greyscale 88 | var imageData = CANVAS_FACE_CTX.getImageData(0, 0, CANVAS_FACE.width, CANVAS_FACE.height); 89 | var data = imageData.data; 90 | for (var i = 0; i < data.length; i += 4) { 91 | var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; 92 | data[i] = avg; // red 93 | data[i + 1] = avg; // green 94 | data[i + 2] = avg; // blue 95 | } 96 | CANVAS_FACE_GREY_CTX.putImageData(imageData, 0, 0); 97 | } 98 | 99 | function getResultEmotion(im) { 100 | var input = preprocess_input(im); 101 | var result = predictEmotion(input); 102 | return result; 103 | } 104 | 105 | function getResultGender(im) { 106 | var input = preprocess_input(im); 107 | var result = predictGender(input); 108 | return result; 109 | } 110 | 111 | function updateResultChart(result_emotion, result_gender) { 112 | //console.log(result_emotion); 113 | //console.log(result_gender); 114 | CHART_GENDER.data.datasets[0].label = 'Gender: ' + result_gender.label; 115 | CHART_GENDER.data.datasets[0].data = result_gender.result; 116 | CHART_GENDER.update(50); 117 | 118 | CHART_EMOTION.data.datasets[0].label = 'Emotion: ' + result_emotion.label; 119 | CHART_EMOTION.data.datasets[0].data = result_emotion.result; 120 | CHART_EMOTION.update(50); 121 | } 122 | 123 | function initChart() { 124 | var options = { 125 | /*"animation": false,*/ 126 | "responsive": true, 127 | "maintainAspectRatio": false, 128 | "scales":{ 129 | "xAxes":[ 130 | { 131 | "ticks":{ 132 | "beginAtZero":true 133 | } 134 | } 135 | ] 136 | } 137 | }; 138 | 139 | CHART_EMOTION = new Chart(document.getElementById('chart_emotion'), { 140 | type: 'horizontalBar', 141 | data: { 142 | "labels":[ 143 | "Angry", 144 | "Disgust", 145 | "Fear", 146 | "Happy", 147 | "Sad", 148 | "Surprise", 149 | "Neutral" 150 | ], 151 | "datasets":[ 152 | { 153 | "label":"Emotion: ", 154 | "data": [0, 0, 0, 0, 0, 0, 0], 155 | "fill": false, 156 | "backgroundColor":[ 157 | "rgba(255, 99, 132, 0.2)", 158 | "rgba(255, 159, 64, 0.2)", 159 | "rgba(255, 205, 86, 0.2)", 160 | "rgba(75, 192, 192, 0.2)", 161 | "rgba(54, 162, 235, 0.2)", 162 | "rgba(153, 102, 255, 0.2)", 163 | "rgba(201, 203, 207, 0.2)" 164 | ], 165 | "borderColor":[ 166 | "rgb(255, 99, 132)", 167 | "rgb(255, 159, 64)", 168 | "rgb(255, 205, 86)", 169 | "rgb(75, 192, 192)", 170 | "rgb(54, 162, 235)", 171 | "rgb(153, 102, 255)", 172 | "rgb(201, 203, 207)" 173 | ], 174 | "borderWidth":1 175 | } 176 | ] 177 | }, 178 | options: options 179 | }); 180 | 181 | CHART_GENDER = new Chart(document.getElementById('chart_gender'), { 182 | type: 'horizontalBar', 183 | data: { 184 | "labels":[ 185 | "Woman", 186 | "Man", 187 | ], 188 | "datasets":[ 189 | { 190 | "label":"Gender: ", 191 | "data": [0, 0], 192 | "fill": false, 193 | "backgroundColor":[ 194 | "rgba(255, 99, 132, 0.2)", 195 | "rgba(75, 192, 192, 0.2)", 196 | ], 197 | "borderColor":[ 198 | "rgb(255, 99, 132)", 199 | "rgb(75, 192, 192)", 200 | ], 201 | "borderWidth":1 202 | } 203 | ] 204 | }, 205 | options: options 206 | }); 207 | 208 | } 209 | -------------------------------------------------------------------------------- /docs/emotion_tensorspace.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 34 | 35 | 36 |
37 |
38 | 39 |
40 |
41 |
42 |

Select your photo

43 |
44 |
45 | Select photo 46 | 47 | add_a_photo 48 |
49 |
50 | 51 |
52 |
53 |
54 |
55 |
56 | 57 | 58 |
59 |
60 |
61 |
62 | 63 | 64 |
65 |
66 |
67 |
68 |
69 | 70 | 71 | 72 | 73 | 88 | 89 |
90 |
91 |
92 | 93 | 94 |
95 |
96 |
97 |
98 |
99 | 100 |
101 |
102 |
103 |
104 |
105 |
106 | 107 |
108 | 109 | 110 |
111 |
112 | 113 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 403 | 404 | 405 | -------------------------------------------------------------------------------- /docs/js/index.js: -------------------------------------------------------------------------------- 1 | var TRACKER = new tracking.ObjectTracker(['face']); 2 | var COUNT_FACE = 0; 3 | var COUNT_TRY_DETECT_FACE = 0; 4 | var MODEL_READY_CHECKER; 5 | var CROPPER; 6 | var CROPPER_IMG; 7 | 8 | //TRACKER.setEdgesDensity(0.2); 9 | //TRACKER.setInitialScale(1); 10 | //TRACKER.setStepSize(1.5); 11 | 12 | $(document).ready(function() { 13 | $('#input_url').change(function() { 14 | COUNT_TRY_DETECT_FACE = 0; 15 | renderImageUrl($(this).val(), false); 16 | }); 17 | 18 | $('#btn-share').click(onBtnShareClicked); 19 | $('#btn-manual').click(enableManualCrop); 20 | 21 | MODEL_READY_CHECKER = setInterval(function(){ 22 | if (IS_MODEL_EMOTION_LOADED && IS_MODEL_GENDER_LOADED) { 23 | clearInterval(MODEL_READY_CHECKER); 24 | console.log("Model Ready"); 25 | // Auto fill url 26 | var u = new URL(window.location.href); 27 | var url = u.searchParams.get("url"); 28 | if (url != null) { 29 | $('#input_url').val(url).trigger('change'); 30 | } 31 | 32 | var share_url = u.searchParams.get("share_url"); 33 | if (share_url != null) { 34 | var decode_url = atob(share_url); 35 | $('#input_url').val(decode_url).trigger('change'); 36 | } 37 | 38 | } 39 | 40 | }, 1000); 41 | 42 | 43 | }); 44 | 45 | 46 | $("#local_file").change(function() { 47 | $('#btn-share').hide(); 48 | $('#input_url').val(''); 49 | COUNT_TRY_DETECT_FACE = 0; 50 | renderImage(this.files[0]); 51 | $('#result_emotion').html(" "); 52 | $('#result_gender').html(" "); 53 | }); 54 | 55 | TRACKER.on('track', function(faces) { 56 | COUNT_TRY_DETECT_FACE++; 57 | 58 | if (faces.data.length == 0 && COUNT_TRY_DETECT_FACE == 1) { 59 | //Try to detect face again 60 | console.log('Try to detect face again: params-1') 61 | TRACKER.setEdgesDensity(0.1); 62 | tracking.track('#show-img', TRACKER); 63 | return; 64 | } else if (faces.data.length == 0 && COUNT_TRY_DETECT_FACE == 2) { 65 | console.log('Try to detect face again: params-2'); 66 | TRACKER.setEdgesDensity(0.1); 67 | TRACKER.setInitialScale(4); 68 | TRACKER.setStepSize(1); 69 | tracking.track('#show-img', TRACKER); 70 | return; 71 | } 72 | 73 | resetTrackerParam(); 74 | 75 | if (faces.data.length == 0) { 76 | console.log("Face not found"); 77 | swal( 78 | 'Sorry', 79 | 'We couldn\'t identify the face T_T
Try manually crop the face.', 80 | 'error' 81 | ); 82 | return; 83 | } 84 | 85 | faces.data.forEach(function(rect) { 86 | var face_id = 'face_' + ++COUNT_FACE; 87 | //console.log(rect); 88 | drawFaceFrame(rect); 89 | cropFace(rect, face_id); 90 | 91 | var result_emotion = getResultEmotion(document.getElementById(face_id), face_id); 92 | var result_gender = getResultGender(document.getElementById(face_id), face_id); 93 | generateResultChart(face_id, result_emotion, result_gender); 94 | }); 95 | }); 96 | 97 | function resetTrackerParam() { 98 | TRACKER.setEdgesDensity(0.2); 99 | TRACKER.setInitialScale(1); 100 | TRACKER.setStepSize(1.5); 101 | } 102 | 103 | function renderImageUrl(url, showError) { 104 | if (url.length == 0) { 105 | $('#btn-share').hide(); 106 | return; 107 | } 108 | 109 | disableManualCrop(); 110 | $('#image-loading').show(); 111 | var img = new Image; 112 | img.crossOrigin = "Anonymous"; 113 | img.onload = function(){ 114 | $('#btn-share').show(); 115 | $('#image-loading').hide(); 116 | $('#card-item-container').css('visibility', 'visible'); 117 | $('#btn-manual').show(); 118 | console.log('Image Loaded'); 119 | document.getElementById("show-img").src = this.src; 120 | clearFaceFrame(); 121 | findFaces(); 122 | }; 123 | img.onerror = function() { 124 | $('#image-loading').hide(); 125 | if (showError == false) { 126 | renderImageUrlProxy(url); 127 | return; 128 | } 129 | swal( 130 | 'แย่จัง', 131 | 'ไม่สามารถโหลดภาพนี้ได้', 132 | 'error' 133 | ); 134 | }; 135 | 136 | img.src = url; 137 | } 138 | 139 | function renderImageUrlProxy(url) { 140 | var proxy_url = 'https://cors-anywhere.herokuapp.com/' + url; 141 | renderImageUrl(proxy_url, true); 142 | } 143 | 144 | function renderImage(file) { 145 | var reader = new FileReader(); 146 | 147 | reader.onload = function(event) { 148 | disableManualCrop(); 149 | $('#card-item-container').css('visibility', 'visible'); 150 | $('#btn-manual').show(); 151 | the_url = event.target.result; 152 | //var html = ""; 153 | $('#show-img').attr("src", the_url); 154 | clearFaceFrame(); 155 | setTimeout(function(){ 156 | findFaces(); 157 | }, 500); 158 | 159 | //findFaces(); 160 | }; 161 | reader.readAsDataURL(file); 162 | } 163 | 164 | function findFaces() { 165 | tracking.track('#show-img', TRACKER); 166 | } 167 | 168 | function clearFaceFrame() { 169 | $('#image-container .face-frame').remove(); 170 | $('.chart-result').remove(); 171 | $('.canvas-face').remove(); 172 | } 173 | 174 | function drawFaceFrame(rect) { 175 | var container_padding_top = parseInt($('#image-container').css('paddingTop')); 176 | var container_padding_left = parseInt($('#image-container').css('paddingLeft')); 177 | 178 | var top = rect.y + container_padding_top; 179 | var left = rect.x + container_padding_left; 180 | var width = rect.width; 181 | var height = rect.height; 182 | 183 | var div = $('
'); 184 | $(div).addClass('face-frame'); 185 | $(div).css({top: top, left: left, width: width, height: height}); 186 | $('#image-container').append(div); 187 | } 188 | 189 | function cropFace(rect, face_id) { 190 | 191 | var img = document.getElementById('show-img'); 192 | 193 | var x = rect.x 194 | var y = rect.y; 195 | var w = rect.width; 196 | var h = rect.height; 197 | 198 | var ratio = img.naturalWidth / img.width; 199 | 200 | var canvas = document.createElement('canvas'); 201 | ctx = canvas.getContext('2d'); 202 | canvas.id = face_id; 203 | canvas.className = "canvas-face"; 204 | canvas.width = 64; 205 | canvas.height = 64; 206 | ctx.drawImage(img, x*ratio, y*ratio, w * ratio, h * ratio, 0, 0, 64, 64); 207 | 208 | var canvas_color = document.createElement('canvas'); 209 | ctx_color = canvas_color.getContext('2d'); 210 | canvas_color.id = face_id + '_color'; 211 | canvas_color.className = "canvas-face"; 212 | canvas_color.width = 100; 213 | canvas_color.height = 100; 214 | ctx_color.drawImage(img, x*ratio, y*ratio, w * ratio, h * ratio, 0, 0, 100, 100); 215 | document.body.appendChild(canvas_color); 216 | 217 | 218 | //Convert Image to Greyscale 219 | var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); 220 | var data = imageData.data; 221 | for (var i = 0; i < data.length; i += 4) { 222 | var avg = (data[i] + data[i + 1] + data[i + 2]) / 3; 223 | data[i] = avg; // red 224 | data[i + 1] = avg; // green 225 | data[i + 2] = avg; // blue 226 | } 227 | ctx.putImageData(imageData, 0, 0); 228 | document.body.appendChild(canvas) 229 | } 230 | 231 | function getResultEmotion(im, face_id) { 232 | var input = preprocess_input(im); 233 | var result = predictEmotion(input); 234 | return result; 235 | } 236 | 237 | function getResultGender(im, face_id) { 238 | var input = preprocess_input(im); 239 | var result = predictGender(input); 240 | return result; 241 | } 242 | 243 | function onBtnShareClicked() { 244 | var input_url = $('#input_url').val(); 245 | //TODO: validate is url 246 | if (input_url.length == 0) { 247 | return; 248 | } 249 | 250 | var share_url = generateShareUrl(input_url); 251 | var html = ` 252 |
253 |
254 | 255 |
256 |
257 | `; 258 | 259 | swal({ 260 | title: 'Share this result', 261 | html: html, 262 | showCloseButton: true, 263 | }); 264 | 265 | } 266 | 267 | function generateShareUrl(input_url) { 268 | 269 | var share_url = 'https://tupleblog.github.io/face-classification-js/index.html?share_url='; 270 | //share_url = btoa(pako.deflate(input_url, { to: 'string' })); 271 | share_url += btoa(input_url); 272 | return share_url; 273 | } 274 | 275 | function disableManualCrop() { 276 | $('#show-img').cropper('destroy'); 277 | } 278 | 279 | function enableManualCrop() { 280 | clearFaceFrame(); 281 | CROPPER_IMG = $('#show-img'); 282 | CROPPER_IMG.cropper({ 283 | aspectRatio: 1, 284 | zoomable: false, 285 | minCropBoxWidth: 32, 286 | minCropBoxHeight: 32, 287 | ready: function () { 288 | console.log('build'); 289 | CROPPER_IMG.cropper("setCropBoxData", { width: 124, height: 124 }); 290 | }, 291 | cropend: function(event) { 292 | console.log('cropend'); 293 | clearFaceFrame(); 294 | var rect = CROPPER.getData(); 295 | var face_id = 'face_1'; 296 | cropFace(rect, face_id); 297 | 298 | var result_emotion = getResultEmotion(document.getElementById(face_id), face_id); 299 | var result_gender = getResultGender(document.getElementById(face_id), face_id); 300 | generateResultChart(face_id, result_emotion, result_gender); 301 | } 302 | }); 303 | CROPPER = CROPPER_IMG.data('cropper'); 304 | 305 | } 306 | 307 | function generateResultChart(face_id, result_emotion, result_gender) { 308 | var chart_emotion_id = face_id + '_emotion_chart'; 309 | var chart_gender_id = face_id + '_gender_chart'; 310 | var html = ` 311 |
312 |
313 |
314 |
315 |
316 | 317 |
318 |
319 | 320 |
321 |
322 |
323 |
`; 324 | $('#card-item-container').append(html); 325 | 326 | var canvas_color = document.getElementById(face_id + '_color'); 327 | var ctx_color = canvas_color.getContext("2d"); 328 | var canvas_profile = document.getElementById(face_id + '_profile_chart'); 329 | var ctx_profile = canvas_profile.getContext("2d"); 330 | ctx_profile.drawImage(canvas_color, 0, 0); 331 | 332 | var options = { 333 | "responsive": true, 334 | "maintainAspectRatio": false, 335 | "scales":{ 336 | "xAxes":[ 337 | { 338 | "ticks":{ 339 | "beginAtZero":true 340 | } 341 | } 342 | ] 343 | } 344 | }; 345 | var chart_emotion = new Chart(document.getElementById(chart_emotion_id), { 346 | type: 'horizontalBar', 347 | data: { 348 | "labels":[ 349 | "Angry", 350 | "Disgust", 351 | "Fear", 352 | "Happy", 353 | "Sad", 354 | "Surprise", 355 | "Neutral" 356 | ], 357 | "datasets":[ 358 | { 359 | "label":"Emotion: " + result_emotion.label, 360 | "data": result_emotion.result , 361 | "fill": false, 362 | "backgroundColor":[ 363 | "rgba(255, 99, 132, 0.2)", 364 | "rgba(255, 159, 64, 0.2)", 365 | "rgba(255, 205, 86, 0.2)", 366 | "rgba(75, 192, 192, 0.2)", 367 | "rgba(54, 162, 235, 0.2)", 368 | "rgba(153, 102, 255, 0.2)", 369 | "rgba(201, 203, 207, 0.2)" 370 | ], 371 | "borderColor":[ 372 | "rgb(255, 99, 132)", 373 | "rgb(255, 159, 64)", 374 | "rgb(255, 205, 86)", 375 | "rgb(75, 192, 192)", 376 | "rgb(54, 162, 235)", 377 | "rgb(153, 102, 255)", 378 | "rgb(201, 203, 207)" 379 | ], 380 | "borderWidth":1 381 | } 382 | ] 383 | }, 384 | options: options 385 | }); 386 | 387 | var chart_emotion = new Chart(document.getElementById(chart_gender_id), { 388 | type: 'horizontalBar', 389 | data: { 390 | "labels":[ 391 | "Woman", 392 | "Man", 393 | ], 394 | "datasets":[ 395 | { 396 | "label":"Gender: " + result_gender.label, 397 | "data": result_gender.result , 398 | "fill": false, 399 | "backgroundColor":[ 400 | "rgba(255, 99, 132, 0.2)", 401 | "rgba(75, 192, 192, 0.2)", 402 | ], 403 | "borderColor":[ 404 | "rgb(255, 99, 132)", 405 | "rgb(75, 192, 192)", 406 | ], 407 | "borderWidth":1 408 | } 409 | ] 410 | }, 411 | options: options 412 | }); 413 | 414 | if (typeof generateResultChartTrigger == 'function') { 415 | generateResultChartTrigger(face_id); 416 | } 417 | } 418 | -------------------------------------------------------------------------------- /docs/js/tracking-min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * tracking - A modern approach for Computer Vision on the web. 3 | * @author Eduardo Lundgren 4 | * @version v1.1.3 5 | * @link http://trackingjs.com 6 | * @license BSD 7 | */ 8 | !function(r,t){r.tracking=r.tracking||{},tracking.inherits=function(r,t){function n(){}n.prototype=t.prototype,r.superClass_=t.prototype,r.prototype=new n,r.prototype.constructor=r,r.base=function(r,n){var e=Array.prototype.slice.call(arguments,2);return t.prototype[n].apply(r,e)}},tracking.initUserMedia_=function(t,n){r.navigator.mediaDevices.getUserMedia({video:!0,audio:!(!n||!n.audio)}).then(function(r){t.srcObject=r})["catch"](function(r){throw Error("Cannot capture user camera.")})},tracking.isNode=function(r){return r.nodeType||this.isWindow(r)},tracking.isWindow=function(r){return!!(r&&r.alert&&r.document)},tracking.one=function(r,t){return this.isNode(r)?r:(t||document).querySelector(r)},tracking.track=function(r,t,n){if(r=tracking.one(r),!r)throw new Error("Element not found, try a different element or selector.");if(!t)throw new Error("Tracker not specified, try `tracking.track(element, new tracking.FaceTracker())`.");switch(r.nodeName.toLowerCase()){case"canvas":return this.trackCanvas_(r,t,n);case"img":return this.trackImg_(r,t,n);case"video":return n&&n.camera&&this.initUserMedia_(r,n),this.trackVideo_(r,t,n);default:throw new Error("Element not supported, try in a canvas, img, or video.")}},tracking.trackCanvas_=function(r,t){var n=this,e=new tracking.TrackerTask(t);return e.on("run",function(){n.trackCanvasInternal_(r,t)}),e.run()},tracking.trackCanvasInternal_=function(r,t){var n=r.width,e=r.height,a=r.getContext("2d"),i=a.getImageData(0,0,n,e);t.track(i.data,n,e)},tracking.trackImg_=function(r,t){var n=r.naturalWidth,e=r.naturalHeight,a=document.createElement("canvas");a.width=n,a.height=e;var i=new tracking.TrackerTask(t);return i.on("run",function(){tracking.Canvas.loadImage(a,r.src,0,0,n,e,function(){tracking.trackCanvasInternal_(a,t)})}),i.run()},tracking.trackVideo_=function(t,n){var e,a,i=document.createElement("canvas"),o=i.getContext("2d"),c=function(){e=t.offsetWidth,a=t.offsetHeight,i.width=e,i.height=a};c(),t.addEventListener("resize",c);var s,g=function(){s=r.requestAnimationFrame(function(){if(t.readyState===t.HAVE_ENOUGH_DATA){try{o.drawImage(t,0,0,e,a)}catch(r){}tracking.trackCanvasInternal_(i,n)}g()})},h=new tracking.TrackerTask(n);return h.on("stop",function(){r.cancelAnimationFrame(s)}),h.on("run",function(){g()}),h.run()},r.URL||(r.URL=r.URL||r.webkitURL||r.msURL||r.oURL),navigator.getUserMedia||(navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia||navigator.mozGetUserMedia||navigator.msGetUserMedia)}(window),function(){tracking.EventEmitter=function(){},tracking.EventEmitter.prototype.events_=null,tracking.EventEmitter.prototype.addListener=function(r,t){if("function"!=typeof t)throw new TypeError("Listener must be a function");return this.events_||(this.events_={}),this.emit("newListener",r,t),this.events_[r]||(this.events_[r]=[]),this.events_[r].push(t),this},tracking.EventEmitter.prototype.listeners=function(r){return this.events_&&this.events_[r]},tracking.EventEmitter.prototype.emit=function(r){var t=this.listeners(r);if(t){for(var n=Array.prototype.slice.call(arguments,1),e=0;e>2,i=e?new Uint32Array(a):new Uint8Array(a),o=new Uint32Array(r.buffer||new Uint8Array(r).buffer),c=0,s=0,g=0;if(e)for(;c>>16&255)+46871*(s>>>8&255)+4732*(255&s)>>>16,i[c++]=65793*g|4278190080&s;else for(;c>>16&255)+46871*(s>>>8&255)+4732*(255&s)>>>16,i[c++]=g;return new Uint8Array(i.buffer)},tracking.Image.horizontalConvolve=function(r,t,n,e,a){for(var i=e.length,o=Math.floor(i/2),c=new Float32Array(t*n*4),s=a?1:0,g=0;g0&&(s=new Int32Array(t*n)),tracking.Image.computeIntegralImage(r,t,n,k,f,u,s);for(var l=c[0],m=c[1],d=e*a,v=d*l|0,p=d*m|0;v0&&this.isTriviallyExcluded(o,s,w,T,t,v,p)||this.evalStages_(c,k,f,u,w,T,t,v,p,d)&&(h[g++]={width:v,height:p,x:T,y:w});d*=a,v=d*l|0,p=d*m|0}return this.mergeRectangles_(h)},tracking.ViolaJones.isTriviallyExcluded=function(r,t,n,e,a,i,o){var c=n*a+e,s=c+i,g=c+o*a,h=g+i,k=(t[c]-t[s]-t[g]+t[h])/(i*o*255);return k0&&(v=Math.sqrt(d));for(var p=r.length,y=2;y=this.REGIONS_OVERLAP&&h/(f*(k/f))>=this.REGIONS_OVERLAP&&t.union(n,a)}}for(var u={},l=0;l>1)*(this.N>>5)),a=0,i=this.getRandomOffsets_(t),o=0,c=0;c>1,i=n.length>>1,o=new Array(a),c=0;c>5;fn},tracking.Fast.isCorner=function(r,t,n){if(this.isTriviallyExcluded(t,r,n))return!1;for(var e=0;e<16;e++){for(var a=!0,i=!0,o=0;o<9;o++){var c=t[e+o&15];if(!this.isBrighter(r,c,n)&&(i=!1,a===!1))break;if(!this.isDarker(r,c,n)&&(a=!1,i===!1))break}if(i||a)return!0}return!1},tracking.Fast.isDarker=function(r,t,n){return t-r>n},tracking.Fast.isTriviallyExcluded=function(r,t,n){var e=0,a=r[8],i=r[12],o=r[4],c=r[0];return this.isBrighter(c,t,n)&&e++,this.isBrighter(o,t,n)&&e++,this.isBrighter(a,t,n)&&e++,this.isBrighter(i,t,n)&&e++,e<3&&(e=0,this.isDarker(c,t,n)&&e++,this.isDarker(o,t,n)&&e++,this.isDarker(a,t,n)&&e++,this.isDarker(i,t,n)&&e++,e<3)},tracking.Fast.getCircleOffsets_=function(r){if(this.circles_[r])return this.circles_[r];var t=new Int32Array(16);return t[0]=-r-r-r,t[1]=t[0]+1,t[2]=t[1]+r+1,t[3]=t[2]+r+1,t[4]=t[3]+r,t[5]=t[4]+r,t[6]=t[5]+r-1,t[7]=t[6]+r-1,t[8]=t[7]-1,t[9]=t[8]-1,t[10]=t[9]-r-1,t[11]=t[10]-r-1,t[12]=t[11]-r,t[13]=t[12]-r,t[14]=t[13]-r+1,t[15]=t[14]-r+1,this.circles_[r]=t,t}}(),function(){tracking.Math={},tracking.Math.distance=function(r,t,n,e){var a=n-r,i=e-t;return Math.sqrt(a*a+i*i)},tracking.Math.hammingWeight=function(r){return r-=r>>1&1431655765,r=(858993459&r)+(r>>2&858993459),16843009*(r+(r>>4)&252645135)>>24},tracking.Math.uniformRandom=function(r,t){return r+Math.random()*(t-r)},tracking.Math.intersectRect=function(r,t,n,e,a,i,o,c){return!(a>n||oe||cn&&(n=c),se&&(e=s)}return{width:n-a,height:e-i,x:a,y:i}},tracking.ColorTracker.prototype.getColors=function(){return this.colors},tracking.ColorTracker.prototype.getMinDimension=function(){return this.minDimension},tracking.ColorTracker.prototype.getMaxDimension=function(){return this.maxDimension},tracking.ColorTracker.prototype.getMinGroupSize=function(){return this.minGroupSize},tracking.ColorTracker.prototype.getNeighboursForWidth_=function(r){if(tracking.ColorTracker.neighbours_[r])return tracking.ColorTracker.neighbours_[r];var t=new Int32Array(8);return t[0]=4*-r,t[1]=4*-r+4,t[2]=4,t[3]=4*r+4,t[4]=4*r,t[5]=4*r-4,t[6]=-4,t[7]=4*-r-4,tracking.ColorTracker.neighbours_[r]=t,t},tracking.ColorTracker.prototype.mergeRectangles_=function(r){for(var t,n=[],e=this.getMinDimension(),a=this.getMaxDimension(),i=0;i=e&&o.height>=e&&o.width<=a&&o.height<=a&&n.push(o)}return n},tracking.ColorTracker.prototype.setColors=function(r){this.colors=r},tracking.ColorTracker.prototype.setMinDimension=function(r){this.minDimension=r},tracking.ColorTracker.prototype.setMaxDimension=function(r){this.maxDimension=r},tracking.ColorTracker.prototype.setMinGroupSize=function(r){this.minGroupSize=r},tracking.ColorTracker.prototype.track=function(r,t,n){var e=this,a=this.getColors();if(!a)throw new Error('Colors not specified, try `new tracking.ColorTracker("magenta")`.');var i=[];a.forEach(function(a){i=i.concat(e.trackColor_(r,t,n,a))}),this.emit("track",{data:i})},tracking.ColorTracker.prototype.trackColor_=function(n,e,a,i){var o,c,s,g,h,k=tracking.ColorTracker.knownColors_[i],f=new Int32Array(n.length>>2),u=new Int8Array(n.length),l=this.getMinGroupSize(),m=this.getNeighboursForWidth_(e),d=new Int32Array(n.length),v=[],p=-4;if(!k)return v;for(var y=0;y=0;)if(s=d[h--],c=d[h--],g=d[h--],k(n[g],n[g+1],n[g+2],n[g+3],g,c,s)){f[o++]=s,f[o++]=c;for(var T=0;T=0&&M=0&&_=l){var C=this.calculateDimensions_(f,o);C&&(C.color=i,v.push(C))}}return this.mergeRectangles_(v)},tracking.ColorTracker.registerColor("cyan",function(r,t,n){var e=50,a=70,i=r-0,o=t-255,c=n-255;return t-r>=e&&n-r>=a||i*i+o*o+c*c<6400}),tracking.ColorTracker.registerColor("magenta",function(r,t,n){var e=50,a=r-255,i=t-0,o=n-255;return r-t>=e&&n-t>=e||a*a+i*i+o*o<19600}),tracking.ColorTracker.registerColor("yellow",function(r,t,n){var e=50,a=r-255,i=t-255,o=n-0;return r-n>=e&&t-n>=e||a*a+i*i+o*o<1e4});var r=new Int32Array([-1,-1,0,1,1,1,0,-1]),t=new Int32Array([0,1,1,1,0,-1,-1,-1])}(),function(){tracking.ObjectTracker=function(r){tracking.ObjectTracker.base(this,"constructor"),r&&(Array.isArray(r)||(r=[r]),Array.isArray(r)&&r.forEach(function(t,n){if("string"==typeof t&&(r[n]=tracking.ViolaJones.classifiers[t]),!r[n])throw new Error('Object classifier not valid, try `new tracking.ObjectTracker("face")`.')})),this.setClassifiers(r)},tracking.inherits(tracking.ObjectTracker,tracking.Tracker),tracking.ObjectTracker.prototype.edgesDensity=.2,tracking.ObjectTracker.prototype.initialScale=1,tracking.ObjectTracker.prototype.scaleFactor=1.25,tracking.ObjectTracker.prototype.stepSize=1.5,tracking.ObjectTracker.prototype.getClassifiers=function(){return this.classifiers},tracking.ObjectTracker.prototype.getEdgesDensity=function(){return this.edgesDensity},tracking.ObjectTracker.prototype.getInitialScale=function(){return this.initialScale},tracking.ObjectTracker.prototype.getScaleFactor=function(){return this.scaleFactor},tracking.ObjectTracker.prototype.getStepSize=function(){return this.stepSize},tracking.ObjectTracker.prototype.track=function(r,t,n){var e=this,a=this.getClassifiers();if(!a)throw new Error('Object classifier not specified, try `new tracking.ObjectTracker("face")`.');var i=[];a.forEach(function(a){i=i.concat(tracking.ViolaJones.detect(r,t,n,e.getInitialScale(),e.getScaleFactor(),e.getStepSize(),e.getEdgesDensity(),a))}),this.emit("track",{data:i})},tracking.ObjectTracker.prototype.setClassifiers=function(r){this.classifiers=r},tracking.ObjectTracker.prototype.setEdgesDensity=function(r){this.edgesDensity=r},tracking.ObjectTracker.prototype.setInitialScale=function(r){this.initialScale=r},tracking.ObjectTracker.prototype.setScaleFactor=function(r){this.scaleFactor=r},tracking.ObjectTracker.prototype.setStepSize=function(r){this.stepSize=r}}(),function(){tracking.LandmarksTracker=function(){tracking.LandmarksTracker.base(this,"constructor")},tracking.inherits(tracking.LandmarksTracker,tracking.ObjectTracker),tracking.LandmarksTracker.prototype.track=function(r,t,n){var e=tracking.ViolaJones.classifiers.face,a=tracking.ViolaJones.detect(r,t,n,this.getInitialScale(),this.getScaleFactor(),this.getStepSize(),this.getEdgesDensity(),e),i=tracking.LBF.align(r,t,n,a);this.emit("track",{data:{faces:a,landmarks:i}})}}(),function(){tracking.LBF={},tracking.LBF.Regressor=function(r){this.maxNumStages=r,this.rfs=new Array(r),this.models=new Array(r);for(var t=0;t