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/actions.js | 2 + client/applet.js | 3 + client/common/index.js | 2 + client/common/upload.helpers.js | 155 ++++++++++++++++++++++++++ client/common/uploadImage.component.js | 46 ++++++++ client/faceAnalysis/faceAnalysis.actions.js | 75 +++++++++++++ client/faceAnalysis/faceAnalysis.container.js | 24 ++++ client/faceAnalysis/faceAnalysis.query.js | 82 ++++++++++++++ client/faceAnalysis/faceAnalysis.reducer.js | 32 ++++++ client/faceAnalysis/faceAnalysis.result.js | 127 +++++++++++++++++++++ client/faceAnalysis/index.js | 5 + client/faceSearch/faceSearch.query.js | 42 ++----- client/faceSearch/upload.js | 154 ------------------------- client/store.js | 2 + client/types.js | 4 + client/util.js | 17 ++- 16 files changed, 585 insertions(+), 187 deletions(-) create mode 100644 client/common/upload.helpers.js create mode 100644 client/common/uploadImage.component.js create mode 100644 client/faceAnalysis/faceAnalysis.actions.js create mode 100644 client/faceAnalysis/faceAnalysis.container.js create mode 100644 client/faceAnalysis/faceAnalysis.query.js create mode 100644 client/faceAnalysis/faceAnalysis.reducer.js create mode 100644 client/faceAnalysis/faceAnalysis.result.js create mode 100644 client/faceAnalysis/index.js delete mode 100644 client/faceSearch/upload.js (limited to 'client') diff --git a/client/actions.js b/client/actions.js index 2be8229d..7007eb76 100644 --- a/client/actions.js +++ b/client/actions.js @@ -1,7 +1,9 @@ +import * as faceAnalysis from './faceAnalysis/faceAnalysis.actions' import * as faceSearch from './faceSearch/faceSearch.actions' import * as nameSearch from './nameSearch/nameSearch.actions' export { + faceAnalysis, faceSearch, nameSearch, } diff --git a/client/applet.js b/client/applet.js index 80d40657..25291401 100644 --- a/client/applet.js +++ b/client/applet.js @@ -1,12 +1,15 @@ import React, { Component } from 'react' import { Container as FaceSearchContainer } from './faceSearch' +import { Container as FaceAnalysisContainer } from './faceAnalysis' import { Container as NameSearchContainer } from './nameSearch' export default class Applet extends Component { render() { // console.log(this.props) switch (this.props.payload.cmd) { + case 'face_analysis': + return case 'face_search': return case 'name_search': 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 ( + + ) + } +} diff --git a/client/faceAnalysis/faceAnalysis.actions.js b/client/faceAnalysis/faceAnalysis.actions.js new file mode 100644 index 00000000..90d7156f --- /dev/null +++ b/client/faceAnalysis/faceAnalysis.actions.js @@ -0,0 +1,75 @@ +// import fetchJsonp from 'fetch-jsonp' +import * as types from '../types' +// import { hashPath } from '../util' +import { store } from '../store' +import { get, post } from '../util' +// import querystring from 'query-string' + +// urls + +const url = { + upload: (dataset) => process.env.API_HOST + '/api/dataset/' + dataset + '/face', +} +export const publicUrl = { +} + +// standard loading events + +const loading = (tag, offset) => ({ + type: types.faceAnalysis.loading, + tag, + offset +}) +const loaded = (tag, data, offset = 0) => ({ + type: types.faceAnalysis.loaded, + tag, + data, + offset +}) +const error = (tag, err) => ({ + type: types.faceAnalysis.error, + tag, + err +}) + +// search UI functions + +export const updateOptions = opt => dispatch => { + dispatch({ type: types.faceAnalysis.update_options, opt }) +} + +// API functions + +export const upload = (payload, file) => dispatch => { + // const { options } = store.getState().faceAnalysis + const tag = 'result' + 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 +let pollTimeout = null + +export const poll = (payload, taskURL) => dispatch => { + const tag = 'poll' + clearTimeout(pollTimeout) + dispatch(loading(tag)) + get(taskURL) + .then(data => { + dispatch(loaded(tag, data)) + // check if complete + pollTimeout = setTimeout(() => poll(payload, taskURL), POLL_DELAY) + }) + .catch(err => dispatch(error(tag, err))) +} diff --git a/client/faceAnalysis/faceAnalysis.container.js b/client/faceAnalysis/faceAnalysis.container.js new file mode 100644 index 00000000..a86bcaa4 --- /dev/null +++ b/client/faceAnalysis/faceAnalysis.container.js @@ -0,0 +1,24 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import * as actions from './faceAnalysis.actions' + +import FaceAnalysisQuery from './faceAnalysis.query' +import FaceAnalysisResult from './faceAnalysis.result' + +class FaceAnalysisContainer extends Component { + render() { + const { payload } = this.props + // console.log(payload) + return ( +
+ + +
+ ) + } +} + + +export default FaceAnalysisContainer diff --git a/client/faceAnalysis/faceAnalysis.query.js b/client/faceAnalysis/faceAnalysis.query.js new file mode 100644 index 00000000..86dbe1ae --- /dev/null +++ b/client/faceAnalysis/faceAnalysis.query.js @@ -0,0 +1,82 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { Loader } from '../common' +import * as actions from './faceAnalysis.actions' + +// function parse_bbox(s) { +// // "BBox: (77,86), (166, 177), width:89, height:91" +// try { +// const [x, y, w, h, width, height] = s.replace(/\D/g, ' ').replace(/\s+/g, ' ').trim().split(' ') +// return { x, y, w, h } +// } +// } + +class FaceAnalysisQuery extends Component { + state = { + image: null + } + + upload(blob) { + this.props.actions.upload(this.props.payload, blob) + } + + render() { + const { result } = this.props + const { image } = this.state + console.log(result) + const style = {} + if (image) { + style.backgroundImage = 'url(' + image + ')' + style.backgroundSize = 'cover' + style.opacity = 1 + } + return ( +
+
+
+ {image ? null : } + +
+ {result.loading && ( +
+ +
+ )} +
+
+

Face Analysis

+

+ {'Put yourself under the microscope of various facial recognition algorithms. See what can be determined from a photo.'} +

+
    +
  1. Upload a photo of yourself
    2. +
  2. {'Your search data is never stored and immediately cleared '} + {'once you leave this page.'}
    3. +
+

+ Read more about privacy. +

+
+
+ ) + } +} + +const mapStateToProps = state => ({ + result: state.faceAnalysis.result, + options: state.faceAnalysis.options, +}) + +const mapDispatchToProps = dispatch => ({ + actions: bindActionCreators({ ...actions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(FaceAnalysisQuery) diff --git a/client/faceAnalysis/faceAnalysis.reducer.js b/client/faceAnalysis/faceAnalysis.reducer.js new file mode 100644 index 00000000..d8e914ab --- /dev/null +++ b/client/faceAnalysis/faceAnalysis.reducer.js @@ -0,0 +1,32 @@ +import * as types from '../types' + +const initialState = () => ({ + query: {}, + result: {}, + loading: false, +}) + +export default function faceAnalysisReducer(state = initialState(), action) { + switch (action.type) { + case types.faceAnalysis.loading: + return { + ...state, + [action.tag]: { loading: true }, + } + + case types.faceAnalysis.loaded: + return { + ...state, + [action.tag]: action.data, + } + + case types.faceAnalysis.error: + return { + ...state, + [action.tag]: { error: action.err }, + } + + default: + return state + } +} diff --git a/client/faceAnalysis/faceAnalysis.result.js b/client/faceAnalysis/faceAnalysis.result.js new file mode 100644 index 00000000..b825a0cb --- /dev/null +++ b/client/faceAnalysis/faceAnalysis.result.js @@ -0,0 +1,127 @@ +import React, { Component } from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { courtesyS } from '../util' + +import * as actions from './faceAnalysis.actions' +import { Loader } from '../common' + +const errors = { + bbox: ( +
+

No face found

+ {"Sorry, we didn't detect a face in that image. "} + {"Please choose an image where the face is large and clear."} +
+ ), + nomatch: ( +
+

{"You're clear"}

+ {"No images in this dataset match your face. We show only matches above 70% probability."} +
+ ), + error: ( +
+

{"No matches found"}

+ {"Sorry, an error occured."} +
+ ), + bad_dataset: ( +
+

{""}

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

{"Not an image"}

+ {"Sorry, the file you uploaded was not recognized as an image. Please upload a JPG or PNG image and try again."} +
+ ), +} + +class FaceAnalysisResult extends Component { + render() { + const { dataset } = this.props.payload + const { query, distances, results, loading, error } = this.props.result + console.log(this.props.result) + if (loading) { + return ( +
+
+
+

Searching...

+
+
+ ) + } + if (error) { + // console.log(error) + let errorMessage = errors[error] || errors.error + return ( +
{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'} +
+ ) + }) + + 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} +
+
+ ) + } +} + +const mapStateToProps = state => ({ + query: state.faceAnalysis.query, + result: state.faceAnalysis.result, + options: state.faceAnalysis.options, +}) + +const mapDispatchToProps = dispatch => ({ + actions: bindActionCreators({ ...actions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(FaceAnalysisResult) diff --git a/client/faceAnalysis/index.js b/client/faceAnalysis/index.js new file mode 100644 index 00000000..efa39ded --- /dev/null +++ b/client/faceAnalysis/index.js @@ -0,0 +1,5 @@ +import Container from './faceAnalysis.container' + +export { + Container, +} diff --git a/client/faceSearch/faceSearch.query.js b/client/faceSearch/faceSearch.query.js index 9f778ca0..2d140813 100644 --- a/client/faceSearch/faceSearch.query.js +++ b/client/faceSearch/faceSearch.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 './faceSearch.actions' // function parse_bbox(s) { @@ -18,23 +18,8 @@ class FaceSearchQuery extends Component { image: null } - upload(e) { - const { payload } = this.props - 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 = () => { - fr.onload = null - this.setState({ image: fr.result }) - } - fr.readAsDataURL(files[0]) - this.props.actions.upload(this.props.payload, file) + upload(blob) { + this.props.actions.upload(this.props.payload, blob) } render() { @@ -50,22 +35,15 @@ class FaceSearchQuery extends Component { return (
- {result.loading ? -
- -
- :
+
{image ? null : } - - +
- } + {result.loading && ( +
+ +
+ )}

Search by Image

diff --git a/client/faceSearch/upload.js b/client/faceSearch/upload.js deleted file mode 100644 index f18bdce6..00000000 --- a/client/faceSearch/upload.js +++ /dev/null @@ -1,154 +0,0 @@ -const MAX_SIDE = 300 - -function render(img){ - var resized = renderToCanvas(img, { correctOrientation: true }) - var canvas = document.createElement('canvas') // document.querySelector('#user_photo_canvas') - ctx = canvas.getContext('2d') - ctx.fillStyle = 'black' - ctx.fillRect(0, 0, MAX_SIDE, MAX_SIDE) - var x_offset = (MAX_SIDE - resized.width) / 2 - var y_offset = (MAX_SIDE - resized.height) / 2 - ctx.drawImage(resized, x_offset, y_offset) - return canvas -} -function renderToCanvas(img, options) { - if (!img) return - options = options || {} - - // Canvas max size for any side - var maxSize = MAX_SIDE - var canvas = document.createElement('canvas') - var ctx = canvas.getContext('2d') - var initialScale = options.scale || 1 - // Scale to needed to constrain canvas to max size - var scale = getScale(img.width * initialScale, img.height * initialScale, maxSize, maxSize, true) - // Still need to apply the user defined scale - scale *= initialScale - var width = canvas.width = Math.round(img.width * scale) - var height = canvas.height = Math.round(img.height * scale) - var correctOrientation = options.correctOrientation - var jpeg = !!img.src.match(/data:image\/jpeg|\.jpeg$|\.jpg$/i) - var 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 -} - -function getScale(width, height, viewportWidth, viewportHeight, fillViewport) { - fillViewport = !!fillViewport - var landscape = (width / height) > (viewportWidth / viewportHeight) - if (landscape) { - if (fillViewport) { - return fitVertical() - } else if (width > viewportWidth) { - return fitHorizontal() - } - } else { - if (fillViewport) { - return fitHorizontal() - } else if (height > viewportHeight) { - return fitVertical() - } - } - return 1 - - function fitHorizontal() { - return viewportWidth / width - } - - function fitVertical() { - return viewportHeight / height - } -} - -function applyOrientationCorrection(canvas, ctx, uri) { - var orientation = getOrientation(uri) - // Only apply transform if there is some non-normal orientation - if (orientation && orientation !== 1) { - var transform = orientationToTransform[orientation] - var rotation = transform.rotation - var mirror = transform.mirror - var 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 applyRotation(canvas, ctx, deg) { - var 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) -} - -function getOrientation (uri) { - var exif = new ExifReader - // Split off the base64 data - var base64String = uri.split(',')[1] - // Read off first 128KB, which is all we need to - // get the EXIF data - var arr = base64ToUint8Array(base64String, 0, Math.pow(2, 17)) - try { - exif.load(arr.buffer) - return exif.getTagValue('Orientation') - } catch (err) { - return 1 - } -} - -function base64ToUint8Array(string, start, finish) { - var start = start || 0 - var finish = finish || string.length - // atob that shit - var binary = atob(string) - var buffer = new Uint8Array(binary.length) - for (var i = start; i < finish; i++) { - buffer[i] = binary.charCodeAt(i) - } - return buffer -} - -/** - * 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/ - */ -var 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 } -} - diff --git a/client/store.js b/client/store.js index 13612f2d..e896bc58 100644 --- a/client/store.js +++ b/client/store.js @@ -1,10 +1,12 @@ import { applyMiddleware, compose, combineReducers, createStore } from 'redux' import thunk from 'redux-thunk' +import faceAnalysisReducer from './faceAnalysis/faceAnalysis.reducer' import faceSearchReducer from './faceSearch/faceSearch.reducer' import nameSearchReducer from './nameSearch/nameSearch.reducer' const rootReducer = combineReducers({ + faceAnalysis: faceAnalysisReducer, faceSearch: faceSearchReducer, nameSearch: nameSearchReducer, }) diff --git a/client/types.js b/client/types.js index fb1fbe30..2d35ec36 100644 --- a/client/types.js +++ b/client/types.js @@ -6,6 +6,10 @@ export const tagAsType = (type, names) => ( }, {}) ) +export const faceAnalysis = tagAsType('faceAnalysis', [ + 'loading', 'loaded', 'error', 'update_options', +]) + export const faceSearch = tagAsType('faceSearch', [ 'loading', 'loaded', 'error', 'update_options', ]) diff --git a/client/util.js b/client/util.js index f181ad0f..d0db0d98 100644 --- a/client/util.js +++ b/client/util.js @@ -82,6 +82,21 @@ export const preloadImage = opt => { /* AJAX */ +export const get = (uri, data) => { + let headers = { + Accept: 'application/json, application/xml, text/play, text/html, *.*', + } + let opt = { + method: 'GET', + body: data, + headers, + // credentials: 'include', + } + // console.log(headers) + // headers['X-CSRFToken'] = csrftoken + return fetch(uri, opt).then(res => res.json()) +} + export const post = (uri, data) => { let headers if (data instanceof FormData) { @@ -99,7 +114,7 @@ export const post = (uri, data) => { method: 'POST', body: data, headers, - credentials: 'include', + // credentials: 'include', } // console.log(headers) // headers['X-CSRFToken'] = csrftoken -- cgit v1.2.3-70-g09d2