basic blurring applet

6 files changed, 69 insertions, 27 deletions

diff --git a/client/common/upload.helpers.js b/client/common/upload.helpers.js
index eb42a993..4b38fb09 100644
--- a/client/common/upload.helpers.js
+++ b/client/common/upload.helpers.js
@@ -1,6 +1,6 @@
 import ExifReader from 'exifreader'
 
-export const MAX_SIDE = 300
+export const MAX_SIDE = 256
 
 function base64ToUint8Array(string, start, finish) {
   start = start || 0
@@ -110,16 +110,17 @@ export function renderToCanvas(img, options) {
   options = options || {}
 
   // Canvas max size for any side
-  const maxSize = MAX_SIDE
+  const maxSide = MAX_SIDE
   const canvas = document.createElement('canvas')
   const ctx = canvas.getContext('2d')
   const initialScale = options.scale || 1
   // Scale to needed to constrain canvas to max size
-  let scale = getScale(img.width * initialScale, img.height * initialScale, maxSize, maxSize, true)
+  let scale = getScale(img.naturalWidth * initialScale, img.naturalHeight * initialScale, maxSide, maxSide, true)
+  console.log(scale)
   // Still need to apply the user defined scale
   scale *= initialScale
-  canvas.width = Math.round(img.width * scale)
-  canvas.height = Math.round(img.height * scale)
+  canvas.width = Math.round(img.naturalWidth * scale)
+  canvas.height = Math.round(img.naturalHeight * scale)
   const { correctOrientation } = options
   const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i)
   const hasDataURI = !!img.src.match(/^data:/)
@@ -144,12 +145,12 @@ export function renderToCanvas(img, options) {
 
 export function renderThumbnail(img) {
   const resized = renderToCanvas(img, { correctOrientation: true })
-  const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
-  const ctx = canvas.getContext('2d')
-  ctx.fillStyle = 'black'
-  ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE)
-  const xOffset = (MAX_SIDE - resized.width) / 2
-  const yOffset = (MAX_SIDE - resized.height) / 2
-  ctx.drawImage(resized, xOffset, yOffset)
-  return canvas
+  // const canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas')
+  // const ctx = canvas.getContext('2d')
+  // ctx.fillStyle = 'black'
+  // ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE)
+  // const xOffset = (MAX_SIDE - resized.width) / 2
+  // const yOffset = (MAX_SIDE - resized.height) / 2
+  // ctx.drawImage(resized, xOffset, yOffset, resized.width, resized.height)
+  return resized
 }
diff --git a/client/faceAnalysis/faceAnalysis.actions.js b/client/faceAnalysis/faceAnalysis.actions.js
index 860d3292..f8d8973f 100644
--- a/client/faceAnalysis/faceAnalysis.actions.js
+++ b/client/faceAnalysis/faceAnalysis.actions.js
@@ -16,17 +16,20 @@ export const publicUrl = {
 // standard loading events
 
 const loading = (tag, offset) => ({
+  ts: Date.now(),
   type: types.faceAnalysis.loading,
   tag,
   offset
 })
 const loaded = (tag, data, offset = 0) => ({
+  ts: Date.now(),
   type: types.faceAnalysis.loaded,
   tag,
   data,
   offset
 })
 const polled = (data, offset = 0) => ({
+  ts: Date.now(),
   type: types.faceAnalysis.poll,
   data,
   offset
@@ -52,13 +55,19 @@ let pollTimeout = null
 
 export const poll = (payload, taskURL) => dispatch => {
   clearTimeout(pollTimeout)
-  console.log('polling...')
+  // console.log('polling...')
   get(taskURL)
     .then(data => {
-      console.log('poll', data)
+      // console.log('poll', data)
       dispatch(polled(data))
-      if (data.state !== 'error' && data.state !== 'complete') {
-        pollTimeout = setTimeout(() => poll(payload, taskURL), POLL_DELAY)
+      // console.log(data.state)
+      if (data.state === 'COMPLETE' || data.state === 'SUCCESS') {
+        console.log('complete!')
+      } else if (data.state === 'ERROR' || data.state === 'FAILURE') {
+        console.log('errorr!')
+        dispatch(error(data))
+      } else {
+        pollTimeout = setTimeout(() => poll(payload, taskURL)(dispatch), POLL_DELAY)
       }
     })
     .catch(err => dispatch(error('result', err)))
@@ -71,8 +80,8 @@ export const upload = (payload, file) => dispatch => {
   dispatch(loading(tag))
   post(url.upload(), fd)
     .then(data => {
-      console.log('loaded!', tag, data)
-      dispatch(loaded(tag, data))
+      // console.log('loaded!', tag, data)
+      dispatch(polled(tag, data))
       const { result, taskURL } = data
       if (result && taskURL) {
         poll(payload, taskURL)(dispatch)
diff --git a/client/faceAnalysis/faceAnalysis.container.js b/client/faceAnalysis/faceAnalysis.container.js
index a86bcaa4..24848455 100644
--- a/client/faceAnalysis/faceAnalysis.container.js
+++ b/client/faceAnalysis/faceAnalysis.container.js
@@ -12,7 +12,7 @@ class FaceAnalysisContainer extends Component {
     const { payload } = this.props
     // console.log(payload)
     return (
-      <div className='searchContainer'>
+      <div className='analysisContainer'>
         <FaceAnalysisQuery payload={payload} />
         <FaceAnalysisResult payload={payload} />
       </div>
diff --git a/client/faceAnalysis/faceAnalysis.query.js b/client/faceAnalysis/faceAnalysis.query.js
index a79e3e78..33dd641f 100644
--- a/client/faceAnalysis/faceAnalysis.query.js
+++ b/client/faceAnalysis/faceAnalysis.query.js
@@ -19,13 +19,23 @@ class FaceAnalysisQuery extends Component {
   }
 
   upload(blob) {
+    if (this.state.image) {
+      URL.revokeObjectURL(this.state.image)
+    }
+    const url = URL.createObjectURL(blob)
+    this.setState({ image: url })
     this.props.actions.upload(this.props.payload, blob)
   }
 
+  componentWillUnmount() {
+    if (this.state.image) {
+      URL.revokeObjectURL(this.state.image)
+    }
+  }
+
   render() {
     const { result } = this.props
     const { image } = this.state
-    console.log(result)
     const style = {}
     if (image) {
       style.backgroundImage = 'url(' + image + ')'
diff --git a/client/faceAnalysis/faceAnalysis.reducer.js b/client/faceAnalysis/faceAnalysis.reducer.js
index de6e5b0a..d9be7447 100644
--- a/client/faceAnalysis/faceAnalysis.reducer.js
+++ b/client/faceAnalysis/faceAnalysis.reducer.js
@@ -5,25 +5,32 @@ const initialState = () => ({
   task: {},
   result: {},
   loading: false,
+  startTime: 0,
+  timing: 0,
 })
 
 export default function faceAnalysisReducer(state = initialState(), action) {
+  const { startTime } = state
   switch (action.type) {
     case types.faceAnalysis.loading:
       return {
         ...state,
+        startTime: action.ts,
+        timing: 0,
         [action.tag]: { loading: true },
       }
 
     case types.faceAnalysis.loaded:
       return {
         ...state,
+        timing: action.ts - startTime,
         [action.tag]: action.data,
       }
 
     case types.faceAnalysis.poll:
       return {
         ...state,
+        timing: action.ts - startTime,
         result: action.data,
       }
 
@@ -31,6 +38,7 @@ export default function faceAnalysisReducer(state = initialState(), action) {
       console.log('error', action)
       return {
         ...state,
+        timing: action.ts - startTime,
         [action.tag]: { error: action.err },
       }
 
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,
 })