basic blurring applet

1 files changed, 20 insertions, 6 deletions

diff --git a/client/faceAnalysis/faceAnalysis.result.js b/client/faceAnalysis/faceAnalysis.result.js
index f9531eba..63a23d65 100644
--- a/client/faceAnalysis/faceAnalysis.result.js
+++ b/client/faceAnalysis/faceAnalysis.result.js
@@ -36,8 +36,10 @@ const errors = {
 
 class FaceAnalysisResult extends Component {
   render() {
-    const { query, task, result, loading, error } = this.props.result
-    console.log(this.props.result)
+    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'>
@@ -48,7 +50,6 @@ class FaceAnalysisResult extends Component {
         </div>
       )
     }
-    console.log(task, result)
     if (error) {
       // console.log(error)
       let errorMessage = errors[error] || errors.error
@@ -56,12 +57,24 @@ class FaceAnalysisResult extends Component {
         <div className='result'>{errorMessage}</div>
       )
     }
-    if (!task && !result) return
-
+    // console.log(result)
+    if (!total) {
+      return (
+        <div className='result'></div>
+      )
+    }
+    let blurImg = data.data.blur_fn && (
+      <div>
+        <img src={data.data.blur_fn} />
+        <span>Blurred image</span>
+      </div>
+    )
     return (
       <div className='result'>
+        {!(step && total && message) ? '' : (<span>{step} / {total}: {message}</span>)}
+        {blurImg}
         <div className="about">
-          <small>Query took {query.timing.toFixed(2)} seconds</small>
+          <small>Query took {(timing / 1000).toFixed(2)} s.</small>
         </div>
       </div>
     )
@@ -71,6 +84,7 @@ class FaceAnalysisResult extends Component {
 const mapStateToProps = state => ({
   query: state.faceAnalysis.query,
   result: state.faceAnalysis.result,
+  timing: state.faceAnalysis.timing,
   options: state.faceAnalysis.options,
 })