1 files changed, 61 insertions, 15 deletions

diff --git a/client/faceSearch/faceSearch.result.js b/client/faceSearch/faceSearch.result.js
index 1882def0..936bc8d2 100644
--- a/client/faceSearch/faceSearch.result.js
+++ b/client/faceSearch/faceSearch.result.js
@@ -4,51 +4,97 @@ import { connect } from 'react-redux'
 import { courtesyS } from '../util'
 
 import * as actions from './faceSearch.actions'
+import { Loader } from '../common'
 
 const errors = {
-  'bbox': "Sorry, we couldn't find a face in that image.  Please choose an image where the face is large and clear.",
-  'nomatch': "We didn't find a match.",
-  'default': "There was an error!",
+  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>
+  ),
 }
 
 class FaceSearchResult extends Component {
   render() {
     const { dataset } = this.props.payload
-    const { distances, results, error } = this.props.result
+    const { query, distances, results, loading, error } = this.props.result
+    console.log(this.props.result)
+    if (loading) {
+      return (
+        <div className='result'>
+          <div>
+            <Loader /><br />
+            <h2>Searching...</h2>
+          </div>
+        </div>
+      )
+    }
     if (error) {
-      let errorMessage = errors[error.message] || errors.default
+      // console.log(error)
+      let errorMessage = errors[error] || errors.error
       return (
         <div className='result'>{errorMessage}</div>
       )
     }
     if (!results) {
-      return (
-        <div className='result'></div>
-      )
+      return <div className='result'></div>
     }
-    if (!this.props.result.results.length) {
+    if (!results.length) {
       return (
-        <div className='result'>No results</div>
+        <div className='result'>{errors.nomatch}</div>
       )
     }
     const els = results.map((result, i) => {
       const distance = distances[i]
       const { uuid } = result.uuid
+      const { x, y, w, h } = result.roi
       const { fullname, gender, description, images } = result.identity
+      const bbox = {
+        left: (100 * x) + '%',
+        top: (100 * y) + '%',
+        width: (100 * w) + '%',
+        height: (100 * h) + '%',
+      }
+      // console.log(bbox)
       return (
-        <div>
-          <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
+        <div key={i}>
+          <div className='img'>
+            <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
+            <div className='bbox' style={bbox} />
+          </div>
           {fullname} {'('}{gender}{')'}<br/>
           {description}<br/>
-          {courtesyS(images, 'image')}<br />
-          {distance}
+          {courtesyS(images, 'image')}{' in dataset'}<br />
+          {Math.round((1 - distance) * 100)}{'% match'}
         </div>
       )
     })
 
     return (
       <div className='result'>
-        <div class='results'>
+        <div className="about">
+          <h2>Did we find you?</h2>
+          {'These faces matched images in the '}
+          <b><tt>{dataset}</tt></b>
+          {' dataset with over 70% probability.'}
+          <br />
+          <small>Query took {query.timing.toFixed(2)} seconds</small>
+        </div>
+        <div className='results'>
           {els}
         </div>
       </div>