face analysis frontend scaffolding

1 files changed, 82 insertions, 0 deletions

diff --git a/client/faceAnalysis/faceAnalysis.query.js b/client/faceAnalysis/faceAnalysis.query.js
new file mode 100644
index 00000000..86dbe1ae
--- /dev/null
+++ b/client/faceAnalysis/faceAnalysis.query.js
@@ -0,0 +1,82 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { Loader } from '../common'
+import * as actions from './faceAnalysis.actions'
+
+// function parse_bbox(s) {
+//   // "BBox: (77,86), (166, 177), width:89, height:91"
+//   try {
+//     const [x, y, w, h, width, height] = s.replace(/\D/g, ' ').replace(/\s+/g, ' ').trim().split(' ')
+//     return { x, y, w, h }
+//   }
+// }
+
+class FaceAnalysisQuery extends Component {
+  state = {
+    image: null
+  }
+
+  upload(blob) {
+    this.props.actions.upload(this.props.payload, blob)
+  }
+
+  render() {
+    const { result } = this.props
+    const { image } = this.state
+    console.log(result)
+    const style = {}
+    if (image) {
+      style.backgroundImage = 'url(' + image + ')'
+      style.backgroundSize = 'cover'
+      style.opacity = 1
+    }
+    return (
+      <div className='query row'>
+        <div className='uploadContainer'>
+          <div style={style}>
+            {image ? null : <img src="/assets/img/icon_camera.svg" />}
+            <input
+              type="file"
+              name="img"
+              accept="image/*"
+              onChange={this.upload.bind(this)}
+              required
+            />
+          </div>
+        {result.loading && (
+          <div className='loading' style={style}>
+            <Loader />
+          </div>
+        )}
+        </div>
+        <div className='cta'>
+          <h2>Face Analysis</h2>
+          <p>
+            {'Put yourself under the microscope of various facial recognition algorithms. See what can be determined from a photo.'}
+          </p>
+          <ol>
+            <li>Upload a photo of yourself</li>
+            <li>{'Your search data is never stored and immediately cleared '}
+            {'once you leave this page.'}</li>
+          </ol>
+          <p>
+            Read more about <a href='/about/privacy/'>privacy</a>.
+          </p>
+        </div>
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  result: state.faceAnalysis.result,
+  options: state.faceAnalysis.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+  actions: bindActionCreators({ ...actions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(FaceAnalysisQuery)