2b:null 2c:["$","title",null,{"children":"Face Detection | Feng Yifei | Observable"}] 31:[{"id":"7b3c7b7fd582765991d7518f46d37dc38e9e46690c3af91952d4d8d85e840d8642d8e219e07a1041bed2579b872ae9800b4258970980cf33617e162333bc5c0d","href":"https://static.observableusercontent.com/files/7b3c7b7fd582765991d7518f46d37dc38e9e46690c3af91952d4d8d85e840d8642d8e219e07a1041bed2579b872ae9800b4258970980cf33617e162333bc5c0d","name":"face-api.js","type":"application/javascript","lastModified":1579437335248.066,"size":845491}] 2f:{"id":"0fbd53a04deb3c70","slug":"face-detection","title":"Face Detection","thumbnail":"c724a77860bd9c8594e9251aede6491bbd14965bf779bd564de9120f8f681b47","access_level":"public","create_time":"$D2020-01-19T12:33:12.848Z","update_time":"$D2020-01-20T08:21:33.381Z","view_time":null,"first_public_time":"$D2020-01-19T12:36:30.248Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":"starter_2024"},"version":51,"publish_version":51,"role":null,"authored":false,"authors":[{"type":"individual","id":"582cdf51952494b0","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":null}],"members":[{"type":"individual","id":"582cdf51952494b0","login":"fengyfei","name":"Feng Yifei","avatar_url":"https://avatars-next.observableusercontent.com/c5b93e151f999a0d3ae3ddc3285ea44aaaaf234cd045885cc92d8c1d0a529148","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"36d5dc24593ae87c","slug":"lab","title":"Lab","owner":{"id":"2a278c3908e45a90","login":"fengyfei","name":"Feng Yifei"}},"type":"notebook","body":{"title":"Face Detection","cells":[{"id":0,"value":"md`# Face Detection`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`\n## Basic\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":44,"value":"html`\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"{\n await visibility();\n\n const start = document.getElementById('start');\n const url = document.getElementById('url');\n const origin = document.getElementById('origin');\n const canvas = document.getElementById('canvas');\n\n start.onclick = () => {\n const path = url.value;\n origin.src = path;\n origin.crossOrigin = 'anonymous'; // required\n };\n\n origin.onload = async () => {\n const loaded = await loadFaceModels();\n if (!loaded) {\n return 'Load Model Failed';\n }\n\n await detectFaces(origin, canvas);\n };\n\n return 'Setup finished';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"html`\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`\n## Face API\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`\n### Models\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"{\n let message = '| Net | Features |\\n| ----- | ----- |';\n\n const nets = Object.keys(faceapi.nets);\n nets.forEach(n => {\n message = `${message}\\n | ${n} | |`;\n });\n return md`${message}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"md`\n### Load Models\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"loadFaceModels = async () => {\n const modelsURL = 'https://justadudewhohacks.github.io/face-api.js/models/';\n\n try {\n await faceapi.loadSsdMobilenetv1Model(modelsURL);\n await faceapi.loadFaceLandmarkModel(modelsURL);\n await faceapi.loadFaceDetectionModel(modelsURL);\n } catch (err) {\n return false;\n }\n\n return faceapi.nets.ssdMobilenetv1.params;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"md`\n### Face Detection\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"detectFaces = async (img, canvas) => {\n const faces = await faceapi.detectAllFaces(img).withFaceLandmarks();\n faceapi.matchDimensions(canvas, img);\n\n const resized = faceapi.resizeResults(faces, img);\n faceapi.draw.drawDetections(canvas, resized);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"md`\n## Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"import { button, checkbox } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"faceapi = require(await FileAttachment(\"face-api.js\").url())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"