ready for deployment

Web.config

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     This configuration file is required if iisnode is used to run node processes behind
+     IIS or IIS Express.  For more information, visit:
+
+     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
+-->
+
+<configuration>
+  <system.webServer>
+    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
+    <webSocket enabled="false" />
+    <handlers>
+      <!-- Indicates that the server.js file is a node.js site to be handled by the iisnode module -->
+      <add name="iisnode" path="server/main.js" verb="*" modules="iisnode"/>
+    </handlers>
+    <rewrite>
+      <rules>
+        <!-- Do not interfere with requests for node-inspector debugging -->
+        <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
+          <match url="^server/main.js\/debug[\/]?" />
+        </rule>
+
+        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
+        <rule name="StaticContent">
+          <action type="Rewrite" url="dist{REQUEST_URI}"/>
+        </rule>
+
+        <!-- All other URLs are mapped to the node.js site entry point -->
+        <rule name="DynamicContent">
+          <conditions>
+            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
+          </conditions>
+          <action type="Rewrite" url="server/main.js"/>
+        </rule>
+      </rules>
+    </rewrite>
+
+    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
+    <security>
+      <requestFiltering>
+        <hiddenSegments>
+          <remove segment="bin"/>
+        </hiddenSegments>
+      </requestFiltering>
+    </security>
+
+    <!-- Make sure error responses are left untouched -->
+    <httpErrors existingResponse="PassThrough" />
+
+    <!--
+      You can control how Node is hosted within IIS using the following options:
+        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
+        * node_env: will be propagated to node as NODE_ENV environment variable
+        * debuggingEnabled - controls whether the built-in debugger is enabled
+
+      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
+    -->
+    <!--<iisnode watchedFiles="web.config;*.js"/>-->
+  </system.webServer>
+</configuration>

docs/_config.yml

@@ -13,7 +13,7 @@
 # you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
 # You can create any custom variable you would like, and they will be accessible
 # in the templates via {{ site.myvariable }}.
-title: Training Phase
+title: Training Faces
 email: haolu@microsoft.com
 description: >
   A Dashboard for training your Microsoft Cognitive Services API

iisnode.yml

@@ -0,0 +1 @@
+nodeProcessCommandLine: "%SystemDrive%\Program Files (x86)\nodejs\6.9.4\node.exe"

package.json

@@ -37,7 +37,7 @@
       }
     },
     "deploy": {
-      "command": "npm run lint && npm run test && npm run clean && npm run compile",
+      "command": "npm run lint && npm run clean && npm run compile",
       "env": {
         "DEBUG": "app:*"
       }
@@ -144,6 +144,8 @@
     "karma-webpack-with-fast-source-maps": "^1.9.2",
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
+    "lodash.get": "^4.4.2",
+    "lodash.set": "^4.3.2",
     "mocha": "^3.0.1",
     "nodemon": "^1.10.2",
     "phantomjs-prebuilt": "^2.1.12",

src/components/content/FaceImageViewer/FaceImageViewer.js

@@ -24,9 +24,9 @@ class FaceImageViewer extends Component {
       ctx.strokeRect(x, y, width, height)
       if (bottomLabel) {
         ctx.fillStyle = color
-        ctx.fillRect(x, y + height, width, 10)
+        ctx.fillRect(x, y + height, width, 18)
         ctx.strokeStyle = 'white'
-        ctx.strokeText(bottomLabel, x + 10, y + height + 10)
+        ctx.strokeText(bottomLabel, x + 10, y + height + 13)
       }
     })
   }

src/components/content/NewFaceWebcamModal/NewFaceWebcamModal.js

@@ -50,7 +50,6 @@ class NewFaceWebcamModal extends Component {
 }
 
 NewFaceWebcamModal.propTypes = {
-  className: PropTypes.string,
   onCaptureClick: PropTypes.func,
   visible: PropTypes.bool,
   capturedImage: PropTypes.string,

src/components/core/OpenModal/OpenModal.js

@@ -23,7 +23,6 @@ OpenModal.propTypes = {
   openFunc: PropTypes.func.isRequired,
   modalVisible: PropTypes.bool.isRequired,
   closeModal: PropTypes.func.isRequired,
-  uid: PropTypes.string,
   size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']).isRequired
 }
 

src/components/pages/IdentifyPage/IdentifyPage.js

@@ -6,7 +6,6 @@ import WebcamInput from 'components/forms/WebcamInput'
 import FaceImageViewer from 'components/content/FaceImageViewer'
 import JSONTree from 'react-json-tree'
 import themes from 'constants/uiThemes'
-import AceEditor from 'react-ace'
 import 'brace/mode/json'
 import 'brace/theme/github'
 

src/components/pages/IdentifyPage/IdentifyPageContainer.js

@@ -4,17 +4,18 @@ import { inputChangeWebcamIdentifyImage } from 'actions/webcam'
 import { detectFace, setDetectedFaces, identifyFace, resetIdentifyFace, setIdentifiedResults } from 'actions/face'
 import { setIdentifyGroup } from 'actions/group'
 import { requestListPersons, setPersons } from 'actions/person'
+import get from 'lodash.get'
 
 const transformFacesToShapes = (facesArray, results, persons = []) => {
   return facesArray.map((face) => {
     const { faceId } = face
     const { left: x, top: y, width, height } = face.faceRectangle
-    const result = results.find((result) => result.faceId === faceId) || { candidates: [] }
-    const personId = result.candidates[0] ? result.candidates[0].personId : ''
+    const result = results.find((result) => result.faceId === faceId)
+    const personId = get(result, 'candidates[0].personId', '')
     const person = personId ? persons.find((person) => person.personId === personId) : {}
     const personName = person.name
     return {
-      topLabel: faceId.slice(0, 8) + '...',
+      topLabel: 'faceId: ' + faceId.slice(0, 8) + '...',
       dimension: { x, y, width, height },
       bottomLabel: personName
     }