![\"Satya](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-16-BobbleGen-01.gif\" "\\"Satya")
<\/p>\n
Bobblehead Generator<\/h2>\n
Of course, we don’t just want one bobblehead…we want so many <\/em>bobbleheads! So let\u2019s have a bit of fun with Node.js\u2014for beginners and experienced Node developers alike\u2014by implementing a bobblehead generator as follows:<\/p>\n To start, go ahead and install the following:<\/p>\n First, use Next, run the following commands (and of course you don\u2019t need to enter the comments!):<\/p>\n In Visual Studio Code, open the Explore pane on the left hand side to see what’s been generated.<\/p>\n Let\u2019s verify that this newly-scaffolded app is working. Just run Press If you\u2019re new to npm, the Additionally, you can always just add dependencies directly to Here are two more very helpful npm tips:<\/p>\n To minimize context-switching, let’s configure Visual Studio Code to launch the application directly from the editor. Press F5<\/b> and select the Node.js<\/b> debug engine to automatically generate the .vscode\/launch.json<\/b> configuration file. Now, simply press F5<\/b> again to launch the app with the debugger attached. Set a breakpoint in routes\/index.js<\/b> and try reloading localhost:3000<\/b>. You’ll find that you can use the debugging pane to inspect the call stack, variables, etc.<\/p>\n Visual Studio Code also provides code completion and IntelliSense for Node.js and many popular packages:<\/p>\n Because JavaScript is a dynamically-typed language, IntelliSense relies heavily on typings files<\/a> (.d.ts) that are often included with npm packages. The community has also contributed typings files that you install using the tsd<\/b> (TypeScript definitions) package:<\/p>\n The scaffolding for the application includes a basic Express web service, so let\u2019s have it accept a file upload. First, add a basic browse and upload UI by replacing the contents of If you restart the app here in Visual Studio code and refresh localhost:3000<\/b> in the browser, the UI is available attempting to upload a file gives you a 404 error because we’re not yet handling the POST request. To do that, stop the debugger and append the following code to routes\/index.js <\/b>to process the file in JavaScript’s asynchronous nature sometimes makes it challenging to follow application flow. Here we\u2019re using the new EcmaScript 6 feature of Promises to sequentially execute Now when you run the app you should see the three TODOs on the console, but we’re still not saving the file to any particular location. To do that, add the following code to app.js<\/b> right before where the With this, restart the application and you\u2019ll see it render an uploaded photo, which is stored in public\/images<\/b>.<\/p>\n It sounds like a lot of work, but fortunately this kind of artificial intelligence is ready accessible through the Face APIs of Project Oxford<\/a>. In routes\/index.js, <\/b>make the As you can see, you’ll need an API key retrieved from the OXFORD_API<\/b> environment variable to use the Project Oxford client. Click here to sign up (free)<\/a>, then request an also-free Face API key. This will appear on your subscriptions page (click Show<\/b> to see the key): To produce an animated bobblehead GIF, we’ll create three images with different rotations of the detected face area. For this, paste the code below in place of the The workhorse here is the following This function reads the uploaded image, then expands the boundaries of Because we\u2019re doing asynchronous work here, the images created by from Running the application now, you’ll find three PNG files in We\u2019re ready for the final step! We’ll use the gifencoder<\/b> and \n
express<\/code> Node.js web framework.<\/li>\n![\"Overall](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-16-BobbleGen-02.png\" "\\"Overall")
<\/a><\/p>\nReady, set, Node!<\/h2>\n
\n
Scaffolding the application<\/h2>\n
npm <\/code>to install the express-generator<\/i> package globally.<\/p>\n\n
C:src> npm install express-generator -g<\/pre>\n<\/blockquote>\n
\n
C:src> express myapp #generate Express scaffolding in a project folder\nC:src> cd myapp #switch to the project folder\nC:srcmyapp> npm install #install dependencies in package.json\nC:srcmyapp> code . #start Visual Studio Code in this folder!<\/pre>\n<\/blockquote>\n
![\"Explore](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-16-BobbleGen-03.png\" "\\"Explore")
<\/p>\n\n
npm install<\/code> goes through this file to download and installs each dependency automatically.<\/li>\nnpm install<\/code> stores all those dependencies.<\/li>\nrequire('..\/app.js')<\/code> to invoke the code in app.js<\/b> before it goes on to spin up the relevant ports.<\/li>\n\/<\/code>, and \/users<\/code>.<\/li>\n<\/ul>\nnode .\/bin\/www<\/code> from the command line, then visit localhost:3000 <\/b>in a browser to see the app running.<\/p>\n![\"\"](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-16-BobbleGen-04.png\")
<\/p>\nCtrl+C<\/code> on the command line to stop the server, because we now need to install a few other npm packages as follows:<\/p>\n\n
C:srcmyapp> npm install --save gifencoder jimp multer png-file-stream project-oxford<\/pre>\n<\/blockquote>\n
--save<\/code> parameter instructs npm to also create entries for these packages in the \u201cdependencies\u201d section of your package.json<\/b>. This way, if you give your source code to other developers without all the packages in node_modules <\/b>(as when you put code in a repo), they can just do npm install<\/code> to quickly download all those dependencies.<\/p>\npackage.json<\/code>, where Visual Studio Code gives you IntelliSense and auto-complete for available packages and their current versions! Then you can just run npm install<\/code> again to do the work.<\/p>\n\n
npm doc <package-name><\/code><\/li>\n--save-dev<\/code> parameter instead of --save<\/code>, the dependency is written into a section called \u201cdev-dependencies\u201d. This is where you list packages for development tools like test frameworks and task runners that won\u2019t be included in the deployed application.<\/li>\n<\/ul>\nConfiguring your Editor: debugger launch and IntelliSense<\/h2>\n
![\"Inspecting](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-16-BobbleGen-05.png\" "\\"Inspecting")
<\/a><\/p>\n![\"Code](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-16-BobbleGen-06.png\" "\\"Code")
<\/a><\/p>\n\n
C:src> npm install tsd \u2013g\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 #install tsd as a global tool\nC:src> cd myapp\nC:srcmyapp> tsd install express\u00a0\u00a0 #install IntelliSense for express<\/pre>\n<\/blockquote>\n
Uploading a file<\/h2>\n
views\/index.jade<\/code> with the following template:<\/p>\n\n
<!-- views\/index.jade -->\n\u00a0\nextends<\/span> layout\n\u00a0\nblock<\/span> content\n div<\/span>(style<\/span>='width:400px'<\/span>)\n h1<\/span>=<\/span> title\n p<\/span>=<\/span> location\n p<\/span> Upload a picture of a head to get started!\n\u00a0\n form<\/span>(action<\/span>='\/'<\/span> method<\/span>='post'<\/span> enctype<\/span>=\"multipart\/form-data\"<\/span>)\n input<\/span>(type<\/span>=\"file\"<\/span> name<\/span>=\"userPhoto\"<\/span>)\n input<\/span>(type<\/span>=\"submit\"<\/span> value<\/span>=\"Upload Image\"<\/span> name<\/span>=\"submit\"<\/span>)\n\n img<\/span>(src<\/span>=<\/span> image<\/span>)\n\n<\/pre>\n<\/blockquote>\nreq.file.path<\/code>, ultimately to display the output bobblehead on the page.<\/p>\n\n
\/\/ Required Dependencies<\/span>\nvar<\/span> fs = require<\/span>('fs'<\/span>);\nvar<\/span> oxford = require<\/span>('project-oxford'<\/span>);\nvar<\/span> Jimp = require<\/span>('jimp'<\/span>);\nvar<\/span> pngFileStream = require<\/span>('png-file-stream'<\/span>);\nvar<\/span> GIFEncoder = require<\/span>('gifencoder'<\/span>);\n\n\/\/ Handle POST request<\/span>\nrouter.post('\/'<\/span>, function<\/span> (req, res, next) {\n\u00a0\u00a0\u00a0 var<\/span> imgSrc = req.file ? req.file.path : ''<\/span>;\n\u00a0\u00a0\u00a0 Promise.resolve(imgSrc)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .then(function<\/span> detectFace(image) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(\"TODO: detect face using Oxford API.\"<\/span>);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 })\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .then(function<\/span> generateBobblePermutations (response) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log(\"TODO: generate multiple images with head rotated.\"<\/span>);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 })\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .then(function<\/span> generateGif (dimensions) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 console.log('TODO: generate GIF'<\/span>)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return<\/span> imgSrc;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }).then(function<\/span> displayGif(gifLocation) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 res.render('index'<\/span>, { title: 'Done!'<\/span>, image: gifLocation })\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\n});\n<\/pre>\n<\/blockquote>\ndetectFace<\/code>, generateBobblePermutations<\/code>, and generateGif<\/code> while keeping our code readable.<\/p>\n\/<\/code> and \/users<\/code> routes are defined with app.use<\/code> (around like 25):<\/p>\n\n
\/\/ Expose files available in public\/images so they can be viewed in the browser. <\/span>\napp.use('\/public\/images'<\/span>, express.static('public\/images'<\/span>));\n\n\/\/ Use multer middleware to upload a photo to public\/images<\/span>\nvar<\/span> multer = require<\/span>('multer'<\/span>);\napp.use(multer({dest: '.\/public\/images'<\/span>}).single('userPhoto'<\/span>));\n<\/pre>\n<\/blockquote>\nDetect the face<\/h2>\n
detectFace<\/code> function in the promise chain look like the following:<\/p>\n\n
function<\/span> detectFace(image) {\n\u00a0\u00a0\u00a0 var<\/span> client = new<\/span> oxford.Client(process.env.OXFORD_API);\n\u00a0\u00a0\u00a0 return<\/span> client.face.detect({path: image});\n}\n<\/pre>\n<\/blockquote>\n![\"API](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-16-BobbleGen-07.png\" "\\"API")
<\/a> Next set the OXFORD_API<\/b> environment variable on your machine to the Primary Key value, so that it is available to your code through the process.env.OXFORD_API<\/code> property. (Note: you may need to restart Visual Studio Code after setting the variable for it to be picked up.) This is generally a much better practice than pasting a secure key into code that might be publicly visible in a repository.) Now set a breakpoint on the console.log<\/code> call within the generateBobblePermutations<\/code> step, run the application, and verify that face detection worked by checking response[0].faceRectangle<\/code>. (Again, restart Visual Studio Code if you see an error about the API key not being there.) ![\"Verifying](\"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-content\/uploads\/sites\/4\/2016\/02\/2016-02-16-BobbleGen-08.png\" "\\"Verifying")
<\/a> The Project Oxford APIs are pretty neat, so definitely explore the other APIs and options you can set. For instance, passing the following options into client.face.detect<\/code> tries Project Oxford’s hand at guessing an age and gender for the person in the photo (this is the same technology that powers https:\/\/how-old.net\/<\/a>).<\/p>\n\n
{\n\u00a0\u00a0\u00a0 path: image,\n\u00a0\u00a0\u00a0 analyzesAge: true,\n\u00a0\u00a0\u00a0 analyzesGender: true\n}\n<\/pre>\n<\/blockquote>\nCrop, rotate, and paste the face in various configurations<\/h2>\n
generateBobblePermutations<\/code> function in routes\/index.js<\/b>:<\/p>\n\n
function<\/span> generateBobblePermutations(response) {\n \u00a0\u00a0\u00a0 var<\/span> promises = [];\n \u00a0\u00a0\u00a0 var<\/span> degrees = [10<\/span>, 0<\/span>, -10<\/span>];\n\n\u00a0 \u00a0 \u00a0 for<\/span> (var<\/span> i = 0<\/span>; i < degrees.length; i++) {\n var<\/span> outputName = req.file.path + '-'<\/span> + i + '.png'<\/span>;\n promises.push(cropHeadAndPasteRotated(req.file.path,\n response[0<\/span>].faceRectangle, degrees[i], outputName))\n }\n return<\/span> Promise.all(promises);\n}<\/pre>\n<\/blockquote>\ncropHeadAndPasteRotated<\/code> function that you need to append to routes\/index.js<\/b>:<\/p>\n\n
function<\/span> cropHeadAndPasteRotated(inputFile, faceRectangle, degrees, outputName) {\n\u00a0\u00a0\u00a0 return<\/span> new<\/span> Promise (function<\/span> (resolve, reject) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Jimp.read(inputFile).then(function<\/span> (image) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Face detection only captures a small portion of the face,<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ so compensate for this by expanding the area appropriately.<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var<\/span> height = faceRectangle['height'<\/span>];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var<\/span> top = faceRectangle['top'<\/span>] - height * 0.5<\/span>;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 height *= 1.6<\/span>;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var<\/span> left = faceRectangle['left'<\/span>];\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var<\/span> width = faceRectangle['width'<\/span>];\n\u00a0<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Crop head, scale up slightly, rotate, and paste on original image<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 image.crop(left, top, width, height)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .scale(1.05<\/span>)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .rotate(degrees, function<\/span>(err, rotated) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Jimp.read(inputFile).then(function<\/span> (original) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 original.composite(rotated, left-0.1<\/span>*width, top-0.05<\/span>*height)\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 .write(outputName, function<\/span> () {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 resolve([original.bitmap.width, original.bitmap.height]);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\n\u00a0\u00a0\u00a0 });\n}\n<\/pre>\n<\/blockquote>\nfaceRectangle<\/code> to capture the full head (rather than just a portion of the face). We then crop this area, scale it up a bit, rotate it, and paste back to the original image.<\/p>\ncropHeadAndPasteRotated<\/code> are not available immediately. This is why we call resolve<\/code> to inform the application that the file has been written successfully.<\/p>\npublic\/images<\/code> alongside the original image. You can click on these in Visual Studio Code to see them directly in the editor.<\/p>\nProduce a GIF<\/h2>\n