{"id":13602476,"url":"https://github.com/zamhown/wear-a-mask","last_synced_at":"2025-04-09T22:17:41.034Z","repository":{"id":38141782,"uuid":"235636693","full_name":"zamhown/wear-a-mask","owner":"zamhown","description":"😷 An SPA that uses only the front-end to perform deep-learning-based facial landmark detection on images and automatically adds breathing mask stickers.","archived":false,"fork":false,"pushed_at":"2023-01-05T05:47:18.000Z","size":10888,"stargazers_count":238,"open_issues_count":25,"forks_count":49,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-09T22:17:35.276Z","etag":null,"topics":["canvas","deep-learning","face-apijs","face-detection","javascript","tensorflow-js","vue"],"latest_commit_sha":null,"homepage":"https://zamhown.github.io/wear-a-mask","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zamhown.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-22T18:21:37.000Z","updated_at":"2024-04-09T18:26:17.000Z","dependencies_parsed_at":"2023-02-03T14:16:23.918Z","dependency_job_id":null,"html_url":"https://github.com/zamhown/wear-a-mask","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zamhown%2Fwear-a-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zamhown%2Fwear-a-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zamhown%2Fwear-a-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zamhown%2Fwear-a-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zamhown","download_url":"https://codeload.github.com/zamhown/wear-a-mask/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248119286,"owners_count":21050755,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","deep-learning","face-apijs","face-detection","javascript","tensorflow-js","vue"],"created_at":"2024-08-01T18:01:24.605Z","updated_at":"2025-04-09T22:17:41.014Z","avatar_url":"https://github.com/zamhown.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg width=\"400\" src=\"https://raw.githubusercontent.com/zamhown/wear-a-mask/master/assets/logo-title-en.png\" alt=\"logo\"\u003e\u003c/p\u003e\n\n# Wear a Mask on Your Avatar\nA single-page application that uses only the front-end to perform deep-learning-based facial landmark detection on images and automatically adds breathing mask stickers.   \n**Wear a mask on your SNS avatars, just make more people aware of epidemic diseases and public health!**  \n  \nApplication link: [https://zamhown.github.io/wear-a-mask](https://zamhown.github.io/wear-a-mask)  \nApplication link (Chinese version): [https://zamhown.gitee.io/wear-a-mask](https://zamhown.gitee.io/wear-a-mask)  \n  \n[中文版ReadMe](https://github.com/zamhown/wear-a-mask/blob/master/readme/README-chs.md)  \n\n## Usage\nAfter the user uploads his or her avatar, the page will automatically detect the face in the picture, and identify the key points to match the most suitable mask sticker.  Then the user can change the position, size, rotation angle and flip of the sticker in an editor implemented by canvas, and then export the modified avatar.  The entire process is performed on the front end, and the pictures do not need to be uploaded to the server.  \n  \nUsage case screenshot：  \n![example](https://raw.githubusercontent.com/zamhown/wear-a-mask/master/assets/example-en.jpg)  \n\n## Face Detection and Facial Landmark Detection\nThe project uses [face-api.js](https://github.com/justadudewhohacks/face-api.js) which is based on [TensorFlow.js](https://github.com/tensorflow/tfjs).  \nThe face detection task uses the SSD MobileNet V1 model (trained with the [WIDERFACE dataset](http://mmlab.ie.cuhk.edu.hk/projects/WIDERFace)), and the facial landmark detection task uses a 68-point CNN-based detection model built by the author of face-api.js (the training dataset contains about 35,000 facial images). The models' weight data comes from face-api.js.  \n\n## Automatic Selection and Positioning of Mask Stickers\nThe project contains several mask sticker images and data for each mask. Three key points were marked on each mask sticker (upper left corner, upper right corner, and bottom of chin). After detecting the landmarks on the user's avatar, the mask sticker that best matches the face shape can be automatically selected based on these data. After calculating the corresponding geometric transformation, the sticker image will be put in the appropriate position on the avatar.  \n![mask example](https://raw.githubusercontent.com/zamhown/wear-a-mask/master/assets/mask-example.png)  \n\n## Image Editor With Sticker Editing Function\nThe image editor for this project is implemented using canvas, based on the npm package [xl_canvas](https://www.npmjs.com/package/xl_canvas). Because the package can not be used directly, it was deeply modified, and a series of functions such as flip, touch support, and export at the original resolution were added and finally integrated into the project.\n\n## Commands\n### Project setup\n```\nnpm install\n```\n\n### Compiles and hot-reloads for development\n```\nnpm run serve\n```\n\n### Compiles and minifies for production\nRun `build.bat`.  \n  \n---\nHave fun!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzamhown%2Fwear-a-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzamhown%2Fwear-a-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzamhown%2Fwear-a-mask/lists"}