summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/common/upload.helpers.js27
-rw-r--r--client/faceAnalysis/faceAnalysis.actions.js21
-rw-r--r--client/faceAnalysis/faceAnalysis.container.js2
-rw-r--r--client/faceAnalysis/faceAnalysis.query.js12
-rw-r--r--client/faceAnalysis/faceAnalysis.reducer.js8
-rw-r--r--client/faceAnalysis/faceAnalysis.result.js26
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,
})
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 16:07:50 +0000