From bb7efd0af0db8183b5b3f96ac0de1bfd9cd249ae Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 13 Jan 2019 00:04:35 +0100 Subject: face analysis frontend scaffolding --- client/common/index.js | 2 + client/common/upload.helpers.js | 155 +++++++++++++++++++++++++++++++++ client/common/uploadImage.component.js | 46 ++++++++++ 3 files changed, 203 insertions(+) create mode 100644 client/common/upload.helpers.js create mode 100644 client/common/uploadImage.component.js (limited to 'client/common') diff --git a/client/common/index.js b/client/common/index.js index cfb34b32..cbd3166e 100644 --- a/client/common/index.js +++ b/client/common/index.js @@ -3,6 +3,7 @@ import DetectionBoxes from './detectionBoxes.component' import DetectionList from './detectionList.component' // import Header from './header.component' import Loader from './loader.component' +import UploadImage from './uploadImage.component' import Sidebar from './sidebar.component' import Gate from './gate.component' import Video from './video.component' @@ -12,6 +13,7 @@ import './common.css' export { Sidebar, Loader, + UploadImage, Gate, TableObject, TableArray, diff --git a/client/common/upload.helpers.js b/client/common/upload.helpers.js new file mode 100644 index 00000000..5a041fd4 --- /dev/null +++ b/client/common/upload.helpers.js @@ -0,0 +1,155 @@ +import ExifReader from 'exifreader' + +export const MAX_SIDE = 300 + +function base64ToUint8Array(string, start, finish) { + start = start || 0 + finish = finish || string.length + // atob that shit + const binary = atob(string) + const buffer = new Uint8Array(binary.length) + for (let i = start; i < finish; i++) { + buffer[i] = binary.charCodeAt(i) + } + return buffer +} + +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') + } catch (err) { + return 1 + } +} + +function applyRotation(canvas, ctx, deg) { + const radians = deg * (Math.PI / 180) + if (deg === 90) { + ctx.translate(canvas.width, 0) + } else if (deg === 180) { + ctx.translate(canvas.width, canvas.height) + } else if (deg === 270) { + ctx.translate(0, canvas.height) + } + ctx.rotate(radians) +} + +/** + * Mapping from EXIF orientation values to data + * regarding the rotation and mirroring necessary to + * render the canvas correctly + * Derived from: + * http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/ + */ +const orientationToTransform = { + 1: { rotation: 0, mirror: false }, + 2: { rotation: 0, mirror: true }, + 3: { rotation: 180, mirror: false }, + 4: { rotation: 180, mirror: true }, + 5: { rotation: 90, mirror: true }, + 6: { rotation: 90, mirror: false }, + 7: { rotation: 270, mirror: true }, + 8: { rotation: 270, mirror: false } +} + +function applyOrientationCorrection(canvas, ctx, uri) { + const orientation = getOrientation(uri) + // Only apply transform if there is some non-normal orientation + if (orientation && orientation !== 1) { + const transform = orientationToTransform[orientation] + const { rotation } = transform + const flipAspect = rotation === 90 || rotation === 270 + if (flipAspect) { + // Fancy schmancy swap algo + canvas.width = canvas.height + canvas.width + canvas.height = canvas.width - canvas.height + canvas.width -= canvas.height + } + if (rotation > 0) { + applyRotation(canvas, ctx, rotation) + } + } +} + +function getScale(width, height, viewportWidth, viewportHeight, fillViewport) { + function fitHorizontal() { + return viewportWidth / width + } + function fitVertical() { + return viewportHeight / height + } + fillViewport = !!fillViewport + const landscape = (width / height) > (viewportWidth / viewportHeight) + if (landscape) { + if (fillViewport) { + return fitVertical() + } + if (width > viewportWidth) { + return fitHorizontal() + } + } else { + if (fillViewport) { + return fitHorizontal() + } + if (height > viewportHeight) { + return fitVertical() + } + } + return 1 +} + +export function renderToCanvas(img, options) { + if (!img) return null + options = options || {} + + // Canvas max size for any side + const maxSize = 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) + // Still need to apply the user defined scale + scale *= initialScale + canvas.width = Math.round(img.width * scale) + canvas.height = Math.round(img.height * scale) + const { correctOrientation } = options + const jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i) + const hasDataURI = !!img.src.match(/^data:/) + + ctx.save() + + // Can only correct orientation on JPEGs represented as dataURIs + // for the time being + if (correctOrientation && jpeg && hasDataURI) { + applyOrientationCorrection(canvas, ctx, img.src) + } + // Resize image if too large + if (scale !== 1) { + ctx.scale(scale, scale) + } + + ctx.drawImage(img, 0, 0) + ctx.restore() + + return canvas +} + +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 +} diff --git a/client/common/uploadImage.component.js b/client/common/uploadImage.component.js new file mode 100644 index 00000000..eb8cc60f --- /dev/null +++ b/client/common/uploadImage.component.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react' + +import { renderThumbnail } from './upload.helpers' + +export default class UploadImageComponent extends Component { + upload(e) { + const files = e.dataTransfer ? e.dataTransfer.files : e.target.files + let i + let file + for (i = 0; i < files.length; i++) { + file = files[i] + if (file && file.type.match('image.*')) break + } + if (!file) return + const fr = new FileReader() + fr.onload = fileReaderEvent => { + fr.onload = null + const img = new Image() + img.onload = () => { + img.onload = null + this.resizeAndUpload(img) + } + img.src = fileReaderEvent.result + } + fr.readAsDataURL(files[0]) + } + + resizeAndUpload(img) { + const canvas = renderThumbnail(img) + canvas.toBlob(blob => { + this.props.onUpload(blob) + }, 'image/jpeg', 80) + } + + render() { + return ( + + ) + } +} -- cgit v1.2.3-70-g09d2 From 6710b9f7f223acd01ac82171d9f9f4eb577f5885 Mon Sep 17 00:00:00 2001 From: Jules Laplace 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 +++-------------------------- megapixels/app/server/api_task.py | 48 ++++++++++--------------- megapixels/app/server/tasks/blur.py | 27 ++++++--------- package-lock.json | 29 +++++++++------- package.json | 1 + 10 files changed, 81 insertions(+), 137 deletions(-) (limited to 'client/common') 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 {
{image ? null : } - +
{result.loading && (
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."}
), - bad_dataset: ( -
-

{""}

- {""} -
- ), not_an_image: (

{"Not an image"}

@@ -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 (

-

Searching...

+

Uploading...

) } + console.log(task, result) if (error) { // console.log(error) let errorMessage = errors[error] || errors.error @@ -62,53 +56,13 @@ class FaceAnalysisResult extends Component {
{errorMessage}
) } - if (!results) { - return
- } - if (!results.length) { - return ( -
{errors.nomatch}
- ) - } - 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 ( -
-
- -
-
- {fullname} {'('}{gender}{')'}
- {description}
- {courtesyS(images, 'image')}{' in dataset'}
- {Math.round((1 - distance) * 100)}{'% match'} -
- ) - }) + if (!task && !result) return return (
-

Did we find you?

- {'These faces matched images in the '} - {dataset} - {' dataset with over 70% probability.'} -
Query took {query.timing.toFixed(2)} seconds
-
- {els} -
) } diff --git a/megapixels/app/server/api_task.py b/megapixels/app/server/api_task.py index 23e11454..fb24c154 100644 --- a/megapixels/app/server/api_task.py +++ b/megapixels/app/server/api_task.py @@ -3,6 +3,7 @@ import re import uuid import time import dlib +import tempfile import simplejson as json import numpy as np from flask import Blueprint, request, jsonify @@ -64,62 +65,51 @@ def sleep_test(): Test the Celery system using a task that sleeps. """ async_task = task_lookup['sleep']['task'].apply_async(args=['sleep_test']) - task_url = '/task/{}/{}'.format('sleep', async_task.id) + task_url = '/task/status/{}/{}'.format('sleep', async_task.id) return jsonify({ 'result': True, 'task_url': task_url, }) -@api_task.route('/upload/:style', methods=['POST']) -def upload(style): +@api_task.route('/upload/blur', methods=['POST']) +def upload(): """ Process a images in a particular style """ + style = 'blur' print('style: {}'.format(style)) if style in task_lookup: task = task_lookup[style]['task'] - print('task',task) + print('task', task) else: return jsonify({ 'result': False, 'error': 'Unknown task', }) - file = request.files['user_image'] - ext = request.form['ext'] - if ext is None: - ext = request.files['ext'] + print('get file...') + file = request.files['query_img'] - uuid_name = str(uuid.uuid4()) + uuid_str = str(uuid.uuid4()) - app.logger.info('[+] style: {}'.format(style)) - app.logger.info('[+] ext: {}'.format(ext)) - app.logger.info('[+] uuid_name: {}'.format(uuid_name)) - - # convert PNG to JPG - print('[+] Resizing image') + print('[+] style: {}'.format(style)) + print('[+] uuid_name: {}'.format(uuid_str)) im = Image.open(file.stream).convert('RGB') - im = ImageOps.fit(im, (256, 256)) - - # # Save image to disk - # print('[+] Save image to {}'.format(fpath)) - # im.save(fpath, 'JPEG', quality=100) - # im_pil_256 = im.resize((256,256)) + im = ImageOps.fit(im, (256, 256,)) - # print('[+] ensure_np...') - # im_np = imx.ensure_np(im_pil_256) + tmpfile = tempfile.NamedTemporaryFile(delete=False) - celery_result = { - im: im, - } + # Save image to disk + print('[+] Save image to temporary file') + im.save(tmpfile, 'JPEG', quality=80) print('[+] Start celery') - async_task = task.apply_async(args=[uuid_name, celery_result]) - task_url = '/task/{}/{}'.format(style, async_task.id) + async_task = task.apply_async(args=[uuid_str, tmpfile.name]) + task_url = '/task/status/{}/{}'.format(style, async_task.id) return jsonify({ 'result': True, 'taskURL': task_url, - 'uuid': uuid_name + 'uuid': uuid_str }) diff --git a/megapixels/app/server/tasks/blur.py b/megapixels/app/server/tasks/blur.py index 3b7e20be..d1f67f54 100644 --- a/megapixels/app/server/tasks/blur.py +++ b/megapixels/app/server/tasks/blur.py @@ -16,18 +16,13 @@ celery_logger = get_task_logger(__name__) import imutils @celery.task(bind=True) -def blur_task(self, uuid_name, extra): +def blur_task(self, uuid_name, fn): """Process image and update during""" celery_logger.debug('process_image_task, uuid: {}'.format(uuid_name)) files = [] - im = Image.open(os.path.join(upload_dir, uuid_name + '.jpg')).convert('RGB') - im = im.resize((256,256)) - files.append({ - 'title': 'Original image', - 'fn': upload_uri + uuid_name + '.jpg' - }) + im = Image.open(fn).convert('RGB') self.update_state( state = 'PROCESSING', @@ -42,13 +37,13 @@ def blur_task(self, uuid_name, extra): im_blur_pil = ensure_pil(im_blur) fn = uuid_name + '_blur.jpg' - fpath = os.path.join(render_dir, fn) - im_blur_pil.save(fpath, 'JPEG', quality=95) + # fpath = os.path.join(render_dir, fn) + # im_blur_pil.save(fpath, 'JPEG', quality=95) - files.append({ - 'title': 'Blurred image', - 'fn': render_uri + uuid_name + '_blur.jpg' - }) + # files.append({ + # 'title': 'Blurred image', + # 'fn': render_uri + uuid_name + '_blur.jpg' + # }) time.sleep(3) @@ -67,9 +62,9 @@ def blur_task(self, uuid_name, extra): 'files': files } - json_path = os.path.join(json_dir, uuid_name + '.json') - with open(json_path, 'w') as json_file: - json.dump(data, json_file) + # json_path = os.path.join(json_dir, uuid_name + '.json') + # with open(json_path, 'w') as json_file: + # json.dump(data, json_file) celery_logger.debug('ok') diff --git a/package-lock.json b/package-lock.json index da0dfcae..60a74ece 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3427,6 +3427,11 @@ "strip-eof": "^1.0.0" } }, + "exif-reader": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/exif-reader/-/exif-reader-1.0.2.tgz", + "integrity": "sha1-AkCLl7YQKOpPReW4k6g2+aoorE8=" + }, "exifreader": { "version": "2.5.0", "resolved": "https://registry.npmjs.org/exifreader/-/exifreader-2.5.0.tgz", @@ -3498,7 +3503,7 @@ "dependencies": { "array-flatten": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=", "dev": true } @@ -3633,7 +3638,7 @@ }, "finalhandler": { "version": "1.1.1", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", + "resolved": "http://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", "dev": true, "requires": { @@ -4405,7 +4410,7 @@ }, "globby": { "version": "6.1.0", - "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz", + "resolved": "http://registry.npmjs.org/globby/-/globby-6.1.0.tgz", "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=", "dev": true, "requires": { @@ -4418,7 +4423,7 @@ "dependencies": { "pify": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", + "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=", "dev": true } @@ -4720,7 +4725,7 @@ }, "http-errors": { "version": "1.6.3", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", + "resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", "dev": true, "requires": { @@ -4749,7 +4754,7 @@ }, "http-proxy-middleware": { "version": "0.18.0", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz", + "resolved": "http://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.18.0.tgz", "integrity": "sha512-Fs25KVMPAIIcgjMZkVHJoKg9VcXcC1C8yb9JUgeDvVXY0S/zgVIhMb+qVswDIgtJe2DfckMSY2d6TuTEutlk6Q==", "dev": true, "requires": { @@ -4835,7 +4840,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -4855,7 +4860,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { @@ -5833,7 +5838,7 @@ }, "media-typer": { "version": "0.3.0", - "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", + "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=", "dev": true }, @@ -6717,7 +6722,7 @@ "dependencies": { "async": { "version": "1.5.2", - "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz", + "resolved": "http://registry.npmjs.org/async/-/async-1.5.2.tgz", "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=", "dev": true } @@ -10191,7 +10196,7 @@ }, "is-accessor-descriptor": { "version": "0.1.6", - "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", + "resolved": "http://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", "dev": true, "requires": { @@ -10211,7 +10216,7 @@ }, "is-data-descriptor": { "version": "0.1.4", - "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", + "resolved": "http://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", "dev": true, "requires": { diff --git a/package.json b/package.json index 1848cc7c..fcabb7e1 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "data-uri-to-buffer": "^2.0.0", "date-fns": "^1.29.0", "dotenv": "^6.0.0", + "exif-reader": "^1.0.2", "exifreader": "^2.5.0", "fetch-jsonp": "^1.1.3", "file-saver": "^2.0.0-rc.3", -- cgit v1.2.3-70-g09d2 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 --- .gitignore | 1 + client/common/upload.helpers.js | 27 +++++------ 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 ++++++++--- megapixels/app/server/api.py | 1 - megapixels/app/server/api_task.py | 10 ++-- megapixels/app/server/tasks/blur.py | 67 ++++++++++++++------------- megapixels/app/server/tasks/fullmonte.py | 6 +-- megapixels/app/server/tasks/sleep.py | 2 +- megapixels/app/settings/app_cfg.py | 1 + site/assets/css/applets.css | 17 ++++++- 14 files changed, 132 insertions(+), 69 deletions(-) (limited to 'client/common') diff --git a/.gitignore b/.gitignore index 30c69fbe..b800c5b8 100644 --- a/.gitignore +++ b/.gitignore @@ -158,4 +158,5 @@ scraper/reports/papers/ .creds site/assets/js/dist/ +site/public/user_content 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 ( -
+
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, }) diff --git a/megapixels/app/server/api.py b/megapixels/app/server/api.py index 663f52cc..5ad454d8 100644 --- a/megapixels/app/server/api.py +++ b/megapixels/app/server/api.py @@ -39,7 +39,6 @@ def show(dataset_name): else: return jsonify({ 'status': 404 }) - @api.route('/dataset//face', methods=['POST']) def upload(dataset_name): """Query an image against FAISS and return the matching identities""" diff --git a/megapixels/app/server/api_task.py b/megapixels/app/server/api_task.py index fb24c154..c9bc19ed 100644 --- a/megapixels/app/server/api_task.py +++ b/megapixels/app/server/api_task.py @@ -31,22 +31,23 @@ def task_status(task_name, task_id): return jsonify({ 'state': 'error', 'percent': 100, - 'message': 'Unknown task' + 'message': 'Unknown task', }) - # app.logger.info('task state: {}'.format(task.state)) if task.state == 'PENDING': response = { 'state': task.state, 'percent': 0, - 'message': 'Pending...' + 'message': 'Pending...', + 'data': task.info, } elif task.state != 'FAILURE': response = { 'state': task.state, 'percent': task.info.get('percent', 0), 'uuid': task.info.get('uuid', 0), - 'message': task.info.get('message', '') + 'message': task.info.get('message', ''), + 'data': task.info, } if 'result' in task.info: response['result'] = task.info['result'] @@ -56,6 +57,7 @@ def task_status(task_name, task_id): 'state': task.state, 'percent': 100, 'message': str(task.info), # this is the exception raised + 'data': task.info, } return jsonify(response) diff --git a/megapixels/app/server/tasks/blur.py b/megapixels/app/server/tasks/blur.py index d1f67f54..42977097 100644 --- a/megapixels/app/server/tasks/blur.py +++ b/megapixels/app/server/tasks/blur.py @@ -9,6 +9,8 @@ import numpy as np from app.utils.im_utils import ensure_np, ensure_pil from flask import current_app as app +import app.settings.app_cfg as cfg + from app.server.tasks import celery from celery.utils.log import get_task_logger @@ -19,57 +21,58 @@ import imutils def blur_task(self, uuid_name, fn): """Process image and update during""" celery_logger.debug('process_image_task, uuid: {}'.format(uuid_name)) + celery_logger.debug('fn: {}'.format(fn)) files = [] + meta = { + 'step': 0, + 'total': 3, + 'message': 'Starting', + 'uuid': uuid_name, + 'data': {}, + } + self.update_state(state='PROCESSING', meta=meta) + im = Image.open(fn).convert('RGB') + os.remove(fn) - self.update_state( - state = 'PROCESSING', - meta = { - 'percent': 0.25, - 'message': 'Applying blur', - 'uuid': uuid_name - }) + meta['step'] += 1 + meta['message'] = 'Applying blur' + self.update_state(state='PROCESSING', meta=meta) im_np = ensure_np(im) im_blur = cv.blur(im_np, (5,5), 1.0) im_blur_pil = ensure_pil(im_blur) fn = uuid_name + '_blur.jpg' - # fpath = os.path.join(render_dir, fn) - # im_blur_pil.save(fpath, 'JPEG', quality=95) + fpath = os.path.join(cfg.DIR_SITE_USER_CONTENT, fn) + im_blur_pil.save(fpath, 'JPEG', quality=80) + celery_logger.debug('fpath: {}'.format(fpath)) + print('fpath: {}'.format(fpath)) # files.append({ # 'title': 'Blurred image', # 'fn': render_uri + uuid_name + '_blur.jpg' # }) + meta['step'] += 1 + meta['message'] = 'Applying blur' + meta['data']['blur_fn'] = os.path.join('/user_content/', fn) + self.update_state(state='PROCESSING', meta=meta) time.sleep(3) - self.update_state( - state = 'PROCESSING', - meta = { - 'percent': 0.75, - 'message': 'Sleeping some more', - 'uuid': uuid_name - }) - time.sleep(2) + if os.path.exists(fpath): + os.remove(fpath) - data = { - 'uuid': uuid_name, - 'date': str(datetime.datetime.now()), - 'files': files - } + meta['step'] += 1 + meta['message'] = 'Securely deleting user content' + self.update_state(state='PROCESSING', meta=meta) + time.sleep(2) - # json_path = os.path.join(json_dir, uuid_name + '.json') - # with open(json_path, 'w') as json_file: - # json.dump(data, json_file) + celery_logger.debug('done!!') + + meta['step'] = meta['total'] + meta['state'] = 'complete' + return meta - celery_logger.debug('ok') - - return { - 'percent': 100, - 'state': 'complete', - 'uuid': uuid_name, - } diff --git a/megapixels/app/server/tasks/fullmonte.py b/megapixels/app/server/tasks/fullmonte.py index 17ca9403..8215656a 100644 --- a/megapixels/app/server/tasks/fullmonte.py +++ b/megapixels/app/server/tasks/fullmonte.py @@ -17,15 +17,15 @@ from app.processors import face_detector, face_landmarks from app.models.data_store import DataStore @celery.task(bind=True) -def fullmonte_task(self, uuid_name): - return - +def fullmonte_task(self, uuid_name, fn): # TOOD add selective testing opt_run_pose = True opt_run_2d_68 = True opt_run_3d_68 = True opt_run_3d_68 = True + return + # ------------------------------------------------- # init here diff --git a/megapixels/app/server/tasks/sleep.py b/megapixels/app/server/tasks/sleep.py index 9b91cc52..fa40b0e9 100644 --- a/megapixels/app/server/tasks/sleep.py +++ b/megapixels/app/server/tasks/sleep.py @@ -22,7 +22,7 @@ def sleep_task(self, uuid_name): for i,m in enumerate(msgs): percent = int(float(i)/float(len(msgs))*100.0) self.update_state( - state = 'PROCESSING', + state = 'processing', meta = { 'percent': percent, 'message': m['msg'], diff --git a/megapixels/app/settings/app_cfg.py b/megapixels/app/settings/app_cfg.py index a8f41819..fea47572 100644 --- a/megapixels/app/settings/app_cfg.py +++ b/megapixels/app/settings/app_cfg.py @@ -148,6 +148,7 @@ S3_DATASETS_PATH = "v1" # datasets is already in the filename DIR_SITE_PUBLIC = "../site/public" DIR_SITE_CONTENT = "../site/content" DIR_SITE_TEMPLATES = "../site/templates" +DIR_SITE_USER_CONTENT = "../site/public/user_content" # ----------------------------------------------------------------------------- # Celery diff --git a/site/assets/css/applets.css b/site/assets/css/applets.css index b64da4b7..e5b73562 100644 --- a/site/assets/css/applets.css +++ b/site/assets/css/applets.css @@ -25,6 +25,9 @@ font-size: 9pt; padding-top: 10px; } + +/* search results */ + .results { margin-top: 10px; padding-bottom: 10px; @@ -119,4 +122,16 @@ } .tabulator-row.tabulator-row-even { background-color: rgba(255,255,255,0.1); -} \ No newline at end of file +} + +/* analysis results */ + +.analysisContainer .result div { + width: 256px; + text-align: center; + border: 1px solid white; + padding: 10px; +} +.analysisContainer .result div img { + max-width: 100%; +} -- cgit v1.2.3-70-g09d2