31:T59c,button = { let button = Inputs.button("Tour faces"); if (face_info.faces.length > 0) { d3.select(button).on("click", function () { let img = d3.select(image).select("img"); let horizontal_shift_scaler = face_info.width / w; let vertical_shift_scaler = face_info.height / h; d3.select(button).select("button").property("disabled", true); d3.range(face_info.faces.length).forEach(function (i) { Promises.delay(1000 * i).then(function () { let box = face_info.faces[order[i]].box; let sw = face_info.width / box._width; let sh = face_info.height / box._height; let sf = 0.9 * d3.min([sw, sh]); let x = box._x - 0.25 * box._width; let y = box._y; img .transition() .duration(1000) .style( "transform", `scale(${sf}) translate(${-x / horizontal_shift_scaler}px, ${ -y / vertical_shift_scaler }px)` ); }); }); Promises.delay(1000 * face_info.faces.length).then(function () { img .transition() .duration(1000) .style("transform", `scale(1) translate(0px, 0px)`); }); Promises.delay(1000 * (face_info.faces.length + 1)).then(function () { d3.select(button).select("button").property("disabled", false); }); }); } return button; }32:T586,// The images are detected in an apparently random fashion. // This bit of code uses a heuristic approach to the travelling salesman // problem to display the faces in a less chaotic fashion. order = { if (face_info.faces.length > 0) { const tsp = new TravelingSalesman(); tsp.maxCycles = 100; let points = face_info.faces.map((o, i) => { let pt = [o._box._x + o._box._width / 2, o._box._y + o._box._height / 2]; pt.index = i; return pt; }); tsp.createFirstNeuron(); tsp.cities = points.map((d, i) => ({ x: d[0], y: d[1] })); var done, pos; do { done = tsp.surveyRun(); let n = tsp.neurons.start; pos = [[n.x, n.y]]; for (let i = 0; i < tsp.neurons.length; i++) { n = n.right; pos.push([n.x, n.y]); } } while (!done && tsp.cycle < tsp.maxCycles); let D = d3.Delaunay.from(pos); let order = points.map((d) => D.find(d[0], d[1])); order = points .map((pt) => pt) // Copy the points since the next sort reorders them .sort((a, b) => order[a.index] - order[b.index]) .map((pt) => pt.index); // This bit just reorders so that John Lennon shows up first on the // Sgt Pepper tour - at least on my Mac. let start = order.slice(0, 13); let fin = order.slice(13); order = fin.concat(start); return order[0] === -1 ? this : order; } else { return []; } }33:T615,images = [ { // https://en.wikipedia.org/wiki/Yalta_Conference#/media/File:Yalta_Conference_(Churchill,_Roosevelt,_Stalin)_(B&W).jpg name: "Yalta", attachment: FileAttachment("Yalta.jpg"), comment: `

The Yalta conference was arguably one of the most important meetings of the 20th century. This image shows the three leaders in attendance.

` }, { // https://en.wikipedia.org/wiki/1968_Olympics_Black_Power_salute#/media/File:John_Carlos,_Tommie_Smith,_Peter_Norman_1968cr.jpg name: "Olympic black power", attachment: FileAttachment("John_Carlos_Tommie_Smith_black_power.jpg"), comment: `

One of the great moments in the history of the Olympics and Civil Rights was in Mexico City. Tommie Smith became the first person to run 200 meters in under 20 seconds, yet he's remembered more for his Black Power salute.

This image also shows that the software can detect faces in profile.

` }, { // https://beatles.fandom.com/wiki/Category:Copyrighted_free_use_files name: "Sgt. Pepper", attachment: FileAttachment("sgt-pepper.jpg"), comment: `

The Sgt. Pepper album cover seems like a good challenge. According to Wikipedia, there are 71 faces on the cover, though some are obscured and/or not photographs. The software captures 54 faces on my Macintosh, though that number seems to be platform dependent.

` } ]34:[{"id":"c7a11252ee377dc55357a6d0143478ba9ed50eb7012e910a1eb126cf18da9ba93ed3dfdef6718c9b239d4af5c43ab86fd036cff61f7725d985fb39c69a832f4b","href":"https://static.observableusercontent.com/files/c7a11252ee377dc55357a6d0143478ba9ed50eb7012e910a1eb126cf18da9ba93ed3dfdef6718c9b239d4af5c43ab86fd036cff61f7725d985fb39c69a832f4b","name":"John_Carlos_Tommie_Smith_black_power.jpg","type":"image/jpeg","lastModified":1639715871880.534,"size":89291},{"id":"6cccf07833e662d7f74c4a52569e85c0490783eb6d1c6e188fe57c63f84005290b42844db02b7f6508709afa59273ec957ce15d66e52614537d2cb70ffb422c1","href":"https://static.observableusercontent.com/files/6cccf07833e662d7f74c4a52569e85c0490783eb6d1c6e188fe57c63f84005290b42844db02b7f6508709afa59273ec957ce15d66e52614537d2cb70ffb422c1","name":"Yalta.jpg","type":"image/jpeg","lastModified":1639751266201.557,"size":415199},{"id":"1c3ba8525b1f9c89e13ca398709c10a00335fb941504a2c725c2575c665b21c086fe5d158b800aeba141387da0d5437d7b141abb635f114fbb963e413abdc8c0","href":"https://static.observableusercontent.com/files/1c3ba8525b1f9c89e13ca398709c10a00335fb941504a2c725c2575c665b21c086fe5d158b800aeba141387da0d5437d7b141abb635f114fbb963e413abdc8c0","name":"sgt-pepper.jpg","type":"image/jpeg","lastModified":1639755600832.626,"size":323387}] 2f:{"title":"Tour faces","cells":[{"id":0,"value":"# Tour faces\n\nThis notebook uses [face-api](https://justadudewhohacks.github.io/face-api.js/docs/index.html) to detect faces in a JPG or PNG image. You can then press the \"Tour faces\" button to take a tour of the detected faces in the image. You can upload your own image or just try one of the ${images.length} sample images.","pinned":false,"hidden":false,"mode":"md"},{"id":765,"value":"viewof selected_file = Inputs.select(images, {\n label: \"Sample:\",\n format: (o) => o.name\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"viewof input_file = {\n selected_file;\n let input_file = Inputs.file({\n label: \"Upload:\",\n accept: [\"jpg\", \"png\"]\n });\n return input_file;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"image = {\n let div = d3\n .create(\"div\")\n .style(\"position\", \"relative\")\n .style(\"overflow\", \"hidden\")\n .style(\"width\", `${w}px`)\n .style(\"height\", `${h}px`);\n let img = div\n .append(\"img\")\n .attr(\"src\", await file.url())\n .style(\"width\", `${w}px`)\n .style(\"height\", `${h}px`)\n .style(\"transform\", `scale(1) translate(0px, 0px)`)\n .style(\"transform-origin\", \"top left\");\n\n return div.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"comment = html`\n

${face_info.faces.length == 0 ? \"No\" : face_info.faces.length} face${\n face_info.faces.length == 1 ? \"\" : \"s\"\n} detected.

\n${input_file ? \"\" : `${selected_file.comment}`}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":667,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":501,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"// Detect the faces and store some info about the image\nface_info = {\n let im = await file.image();\n let im_width = im.width;\n let im_height = im.height;\n const options = new faceapi.SsdMobilenetv1Options({\n minConfidence: 0.4\n });\n let faces = await faceapi.detectAllFaces(im, options);\n return { width: im_width, height: im_height, faces: faces };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":754,"value":"file = {\n if (input_file) {\n return input_file;\n } else {\n return selected_file.attachment;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":630,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"### Parameters for image size","pinned":false,"hidden":false,"mode":"md"},{"id":704,"value":"h = w / aspect;","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"aspect = face_info.width / face_info.height","pinned":true,"hidden":false,"mode":"ojs"},{"id":698,"value":"w = width < 700 ? width : 700","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"// From https://observablehq.com/@radames/face-api-js-face-landmarks-with-d3-geo\nfaceapi = {\n const f = await import(\"@vladmandic/face-api/dist/face-api.esm.js\");\n\n await f.loadSsdMobilenetv1Model(\n \"https://cdn.jsdelivr.net/gh/vladmandic/face-api@1.4.1/model/\"\n );\n return f;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"import { TravelingSalesman } from \"@fil/som-tsp\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}