From 6710b9f7f223acd01ac82171d9f9f4eb577f5885 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 13 Jan 2019 18:08:49 +0100
Subject: serializing image failed, writing to tmp file instead

---
 client/common/upload.helpers.js             |  6 ++--
 client/common/uploadImage.component.js      |  3 +-
 client/faceAnalysis/faceAnalysis.actions.js | 39 +++++++++++----------
 client/faceAnalysis/faceAnalysis.query.js   | 10 ++----
 client/faceAnalysis/faceAnalysis.reducer.js |  1 +
 client/faceAnalysis/faceAnalysis.result.js  | 54 +++--------------------------
 6 files changed, 33 insertions(+), 80 deletions(-)

(limited to 'client')

diff --git a/client/common/upload.helpers.js b/client/common/upload.helpers.js
index 5a041fd4..eb42a993 100644
--- a/client/common/upload.helpers.js
+++ b/client/common/upload.helpers.js
@@ -15,15 +15,15 @@ function base64ToUint8Array(string, start, finish) {
 }
 
 function getOrientation(uri) {
-  const exif = new ExifReader()
   // Split off the base64 data
   const base64String = uri.split(',')[1]
   // Read off first 128KB, which is all we need to
   // get the EXIF data
   const arr = base64ToUint8Array(base64String, 0, 2 ** 17)
   try {
-    exif.load(arr.buffer)
-    return exif.getTagValue('Orientation')
+    const tags = ExifReader.load(arr.buffer)
+    // console.log(tags)
+    return tags.Orientation
   } catch (err) {
     return 1
   }
diff --git a/client/common/uploadImage.component.js b/client/common/uploadImage.component.js
index eb8cc60f..bc88828e 100644
--- a/client/common/uploadImage.component.js
+++ b/client/common/uploadImage.component.js
@@ -20,7 +20,7 @@ export default class UploadImageComponent extends Component {
         img.onload = null
         this.resizeAndUpload(img)
       }
-      img.src = fileReaderEvent.result
+      img.src = fileReaderEvent.target.result
     }
     fr.readAsDataURL(files[0])
   }
@@ -28,6 +28,7 @@ export default class UploadImageComponent extends Component {
   resizeAndUpload(img) {
     const canvas = renderThumbnail(img)
     canvas.toBlob(blob => {
+      // console.log(blob)
       this.props.onUpload(blob)
     }, 'image/jpeg', 80)
   }
diff --git a/client/faceAnalysis/faceAnalysis.actions.js b/client/faceAnalysis/faceAnalysis.actions.js
index 6a318b5d..860d3292 100644
--- a/client/faceAnalysis/faceAnalysis.actions.js
+++ b/client/faceAnalysis/faceAnalysis.actions.js
@@ -8,7 +8,7 @@ import { get, post } from '../util'
 // urls
 
 const url = {
-  upload: () => process.env.API_HOST + '/task/upload/sleep',
+  upload: () => process.env.API_HOST + '/task/upload/blur',
 }
 export const publicUrl = {
 }
@@ -45,22 +45,6 @@ export const updateOptions = opt => dispatch => {
 
 // API functions
 
-export const upload = (payload, file) => dispatch => {
-  // const { options } = store.getState().faceAnalysis
-  const tag = 'task'
-  const fd = new FormData()
-  fd.append('query_img', file)
-  // fd.append('limit', options.perPage)
-  // if (!query) {
-  dispatch(loading(tag))
-  // }
-  post(url.upload(payload.dataset), fd)
-    .then(data => {
-      dispatch(loaded(tag, data))
-    })
-    .catch(err => dispatch(error(tag, err)))
-}
-
 // task polling
 
 const POLL_DELAY = 500
@@ -68,12 +52,31 @@ let pollTimeout = null
 
 export const poll = (payload, taskURL) => dispatch => {
   clearTimeout(pollTimeout)
+  console.log('polling...')
   get(taskURL)
     .then(data => {
+      console.log('poll', data)
       dispatch(polled(data))
-      if (!data.complete) {
+      if (data.state !== 'error' && data.state !== 'complete') {
         pollTimeout = setTimeout(() => poll(payload, taskURL), POLL_DELAY)
       }
     })
     .catch(err => dispatch(error('result', err)))
 }
+
+export const upload = (payload, file) => dispatch => {
+  const tag = 'task'
+  const fd = new FormData()
+  fd.append('query_img', file)
+  dispatch(loading(tag))
+  post(url.upload(), fd)
+    .then(data => {
+      console.log('loaded!', tag, data)
+      dispatch(loaded(tag, data))
+      const { result, taskURL } = data
+      if (result && taskURL) {
+        poll(payload, taskURL)(dispatch)
+      }
+    })
+    .catch(err => dispatch(error(tag, err)))
+}
diff --git a/client/faceAnalysis/faceAnalysis.query.js b/client/faceAnalysis/faceAnalysis.query.js
index 6b92b70d..a79e3e78 100644
--- a/client/faceAnalysis/faceAnalysis.query.js
+++ b/client/faceAnalysis/faceAnalysis.query.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
-import { Loader } from '../common'
+import { Loader, UploadImage } from '../common'
 import * as actions from './faceAnalysis.actions'
 
 // function parse_bbox(s) {
@@ -37,13 +37,7 @@ class FaceAnalysisQuery extends Component {
         <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
-            />
+            <UploadImage onUpload={this.upload.bind(this)} />
           </div>
         {result.loading && (
           <div className='loading' style={style}>
diff --git a/client/faceAnalysis/faceAnalysis.reducer.js b/client/faceAnalysis/faceAnalysis.reducer.js
index 54a6d5eb..de6e5b0a 100644
--- a/client/faceAnalysis/faceAnalysis.reducer.js
+++ b/client/faceAnalysis/faceAnalysis.reducer.js
@@ -28,6 +28,7 @@ export default function faceAnalysisReducer(state = initialState(), action) {
       }
 
     case types.faceAnalysis.error:
+      console.log('error', action)
       return {
         ...state,
         [action.tag]: { error: action.err },
diff --git a/client/faceAnalysis/faceAnalysis.result.js b/client/faceAnalysis/faceAnalysis.result.js
index b825a0cb..f9531eba 100644
--- a/client/faceAnalysis/faceAnalysis.result.js
+++ b/client/faceAnalysis/faceAnalysis.result.js
@@ -26,12 +26,6 @@ const errors = {
       {"Sorry, an error occured."}
     </div>
   ),
-  bad_dataset: (
-    <div>
-      <h2>{""}</h2>
-      {""}
-    </div>
-  ),
   not_an_image: (
     <div>
       <h2>{"Not an image"}</h2>
@@ -42,19 +36,19 @@ const errors = {
 
 class FaceAnalysisResult extends Component {
   render() {
-    const { dataset } = this.props.payload
-    const { query, distances, results, loading, error } = this.props.result
+    const { query, task, result, loading, error } = this.props.result
     console.log(this.props.result)
     if (loading) {
       return (
         <div className='result'>
           <div>
             <Loader /><br />
-            <h2>Searching...</h2>
+            <h2>Uploading...</h2>
           </div>
         </div>
       )
     }
+    console.log(task, result)
     if (error) {
       // console.log(error)
       let errorMessage = errors[error] || errors.error
@@ -62,53 +56,13 @@ class FaceAnalysisResult extends Component {
         <div className='result'>{errorMessage}</div>
       )
     }
-    if (!results) {
-      return <div className='result'></div>
-    }
-    if (!results.length) {
-      return (
-        <div className='result'>{errors.nomatch}</div>
-      )
-    }
-    const els = results.map((result, i) => {
-      const distance = distances[i]
-      const { uuid } = result.file_record
-      const { x, y, w, h } = result.face_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 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')}{' in dataset'}<br />
-          {Math.round((1 - distance) * 100)}{'% match'}
-        </div>
-      )
-    })
+    if (!task && !result) return
 
     return (
       <div className='result'>
         <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>
     )
   }
-- 
cgit v1.2.3-70-g09d2