From b4ed297a6dc73ec5f5cf2772ca1b754ea3f98cae Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 13 Jan 2019 21:06:51 +0100 Subject: basic blurring applet --- client/faceAnalysis/faceAnalysis.actions.js | 21 +++++++++++++++------ client/faceAnalysis/faceAnalysis.container.js | 2 +- client/faceAnalysis/faceAnalysis.query.js | 12 +++++++++++- client/faceAnalysis/faceAnalysis.reducer.js | 8 ++++++++ client/faceAnalysis/faceAnalysis.result.js | 26 ++++++++++++++++++++------ 5 files changed, 55 insertions(+), 14 deletions(-) (limited to 'client/faceAnalysis') 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 ( -
+
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 (
@@ -48,7 +50,6 @@ class FaceAnalysisResult extends Component {
) } - console.log(task, result) if (error) { // console.log(error) let errorMessage = errors[error] || errors.error @@ -56,12 +57,24 @@ class FaceAnalysisResult extends Component {
{errorMessage}
) } - if (!task && !result) return - + // console.log(result) + if (!total) { + return ( +
+ ) + } + let blurImg = data.data.blur_fn && ( +
+ + Blurred image +
+ ) return (
+ {!(step && total && message) ? '' : ({step} / {total}: {message})} + {blurImg}
- Query took {query.timing.toFixed(2)} seconds + Query took {(timing / 1000).toFixed(2)} s.
) @@ -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, }) -- cgit v1.2.3-70-g09d2