1 files changed, 131 insertions, 0 deletions
diff --git a/client/faceAnalysis/faceAnalysis.result.js b/client/faceAnalysis/faceAnalysis.result.js
new file mode 100644
index 00000000..9d77f258
--- /dev/null
+++ b/client/faceAnalysis/faceAnalysis.result.js
@@ -0,0 +1,131 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import * as actions from './faceAnalysis.actions'
+import { Loader } from '../common'
+
+const errors = {
+  bbox: (
+    <div>
+      <h2>No face found</h2>
+      {"Sorry, we didn't detect a face in that image. "}
+      {"Please choose an image where the face is large and clear."}
+    </div>
+  ),
+  nomatch: (
+    <div>
+      <h2>{"You're clear"}</h2>
+      {"No images in this dataset match your face.  We show only matches above 70% probability."}
+    </div>
+  ),
+  error: (
+    <div>
+      <h2>{"No matches found"}</h2>
+      {"Sorry, an error occured."}
+    </div>
+  ),
+  not_an_image: (
+    <div>
+      <h2>{"Not an image"}</h2>
+      {"Sorry, the file you uploaded was not recognized as an image. Please upload a JPG or PNG image and try again."}
+    </div>
+  ),
+}
+
+class FaceAnalysisResult extends Component {
+  render() {
+    const { result, timing } = this.props
+    const { data, error, loading, message } = result
+    let { step, total } = data || {}
+    // console.log(step, total)
+    if (loading) {
+      return (
+        <div className='result'>
+          <div>
+            <Loader /><br />
+            <h2>Uploading...</h2>
+          </div>
+        </div>
+      )
+    }
+    if (error) {
+      // console.log(error)
+      let errorMessage = errors[error] || errors.error
+      return (
+        <div className='result'>{errorMessage}</div>
+      )
+    }
+    // console.log(result)
+    if (!total) {
+      return (
+        <div className='result'></div>
+      )
+    }
+
+    console.log(data.data)
+    const results = [
+      'blur_fn', 'points_3d_68', 'landmarks_3d_68', 'landmarks_2d_68', 'pose',
+    ].map(tag => {
+      if (tag in data.data) {
+        const { title, url } = data.data[tag]
+        return (
+          <div key={tag}>
+            <img src={url} />
+            <span>{title}</span>
+          </div>
+        )        
+      }
+      return null
+    }).filter(a => a)
+
+    const statisticsLabels = ['Age (Real)', 'Age (Apparent)', 'Gender', 'Beauty score', 'Emotion']
+    const statistics = [
+      'age_real', 'age_apparent', 'gender', 'beauty', 'emotion'
+    ].map((tag, i) => {
+      if (tag in data.data.statistics) {
+        return (
+          <tr key={tag}>
+            <td>
+              {statisticsLabels[i]}
+            </td>
+            <td>
+              {data.data.statistics[tag]}
+            </td>
+          </tr>
+        )
+      }
+      return null
+    }).filter(a => a)
+
+    return (
+      <div>
+        <div className='results'>
+          {results}
+        </div>
+        {!!statistics.length && (
+          <table>
+            {statistics}
+          </table>
+        )}
+        <div className="about">
+          <small>Step {step} / {total} {message}</small><br />
+          <small>Query {step === total ? 'took' : 'timer:'} {(timing / 1000).toFixed(2)} s.</small>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  query: state.faceAnalysis.query,
+  result: state.faceAnalysis.result,
+  timing: state.faceAnalysis.timing,
+  options: state.faceAnalysis.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators({ ...actions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(FaceAnalysisResult)