summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/actions.js4
-rw-r--r--client/applet.js5
-rw-r--r--client/faceSearch/faceSearch.actions.js2
-rw-r--r--client/faceSearch/faceSearch.container.js2
-rw-r--r--client/faceSearch/faceSearch.result.js76
-rw-r--r--client/index.js1
-rw-r--r--client/map/index.js17
-rw-r--r--client/nameSearch/index.js5
-rw-r--r--client/nameSearch/nameSearch.actions.js52
-rw-r--r--client/nameSearch/nameSearch.container.js24
-rw-r--r--client/nameSearch/nameSearch.query.js48
-rw-r--r--client/nameSearch/nameSearch.reducer.js32
-rw-r--r--client/nameSearch/nameSearch.result.js88
-rw-r--r--client/store.js8
-rw-r--r--client/tables.js4
-rw-r--r--client/types.js3
16 files changed, 335 insertions, 36 deletions
diff --git a/client/actions.js b/client/actions.js
index bb011838..2be8229d 100644
--- a/client/actions.js
+++ b/client/actions.js
@@ -1,5 +1,7 @@
import * as faceSearch from './faceSearch/faceSearch.actions'
+import * as nameSearch from './nameSearch/nameSearch.actions'
export {
- faceSearch
+ faceSearch,
+ nameSearch,
}
diff --git a/client/applet.js b/client/applet.js
index 4d2a8e6c..80d40657 100644
--- a/client/applet.js
+++ b/client/applet.js
@@ -1,13 +1,16 @@
import React, { Component } from 'react'
import { Container as FaceSearchContainer } from './faceSearch'
+import { Container as NameSearchContainer } from './nameSearch'
export default class Applet extends Component {
render() {
- console.log(this.props)
+ // console.log(this.props)
switch (this.props.payload.cmd) {
case 'face_search':
return <FaceSearchContainer {...this.props} />
+ case 'name_search':
+ return <NameSearchContainer {...this.props} />
default:
return <pre style={{ color: '#0f0' }}>{'Megapixels'}</pre>
}
diff --git a/client/faceSearch/faceSearch.actions.js b/client/faceSearch/faceSearch.actions.js
index 224977b5..03e1a91d 100644
--- a/client/faceSearch/faceSearch.actions.js
+++ b/client/faceSearch/faceSearch.actions.js
@@ -8,7 +8,7 @@ import { post, preloadImage } from '../util'
// urls
const url = {
- upload: (dataset) => process.env.API_HOST + '/api/dataset/' + dataset + '/face/',
+ upload: (dataset) => process.env.API_HOST + '/api/dataset/' + dataset + '/face',
}
export const publicUrl = {
}
diff --git a/client/faceSearch/faceSearch.container.js b/client/faceSearch/faceSearch.container.js
index f96961db..94c6eb9f 100644
--- a/client/faceSearch/faceSearch.container.js
+++ b/client/faceSearch/faceSearch.container.js
@@ -10,7 +10,7 @@ import FaceSearchResult from './faceSearch.result'
class FaceSearchContainer extends Component {
render() {
const { payload } = this.props
- console.log(payload)
+ // console.log(payload)
return (
<div className='searchContainer'>
<FaceSearchQuery payload={payload} />
diff --git a/client/faceSearch/faceSearch.result.js b/client/faceSearch/faceSearch.result.js
index 1882def0..936bc8d2 100644
--- a/client/faceSearch/faceSearch.result.js
+++ b/client/faceSearch/faceSearch.result.js
@@ -4,51 +4,97 @@ import { connect } from 'react-redux'
import { courtesyS } from '../util'
import * as actions from './faceSearch.actions'
+import { Loader } from '../common'
const errors = {
- 'bbox': "Sorry, we couldn't find a face in that image. Please choose an image where the face is large and clear.",
- 'nomatch': "We didn't find a match.",
- 'default': "There was an error!",
+ bbox: (
+ <div>
+ <h2>No face found</h2>
+ {"Sorry, we didn't detect a face in that image. "}
+ {"Please choose an image where the face is large and clear."}
+ </div>
+ ),
+ nomatch: (
+ <div>
+ <h2>{"You're clear"}</h2>
+ {"No images in this dataset match your face. We show only matches above 70% probability."}
+ </div>
+ ),
+ error: (
+ <div>
+ <h2>{"No matches found"}</h2>
+ {"Sorry, an error occured."}
+ </div>
+ ),
}
class FaceSearchResult extends Component {
render() {
const { dataset } = this.props.payload
- const { distances, results, error } = this.props.result
+ const { query, distances, results, loading, error } = this.props.result
+ console.log(this.props.result)
+ if (loading) {
+ return (
+ <div className='result'>
+ <div>
+ <Loader /><br />
+ <h2>Searching...</h2>
+ </div>
+ </div>
+ )
+ }
if (error) {
- let errorMessage = errors[error.message] || errors.default
+ // console.log(error)
+ let errorMessage = errors[error] || errors.error
return (
<div className='result'>{errorMessage}</div>
)
}
if (!results) {
- return (
- <div className='result'></div>
- )
+ return <div className='result'></div>
}
- if (!this.props.result.results.length) {
+ if (!results.length) {
return (
- <div className='result'>No results</div>
+ <div className='result'>{errors.nomatch}</div>
)
}
const els = results.map((result, i) => {
const distance = distances[i]
const { uuid } = result.uuid
+ const { x, y, w, h } = result.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 (
- <div>
- <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
+ <div key={i}>
+ <div className='img'>
+ <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
+ <div className='bbox' style={bbox} />
+ </div>
{fullname} {'('}{gender}{')'}<br/>
{description}<br/>
- {courtesyS(images, 'image')}<br />
- {distance}
+ {courtesyS(images, 'image')}{' in dataset'}<br />
+ {Math.round((1 - distance) * 100)}{'% match'}
</div>
)
})
return (
<div className='result'>
- <div class='results'>
+ <div className="about">
+ <h2>Did we find you?</h2>
+ {'These faces matched images in the '}
+ <b><tt>{dataset}</tt></b>
+ {' dataset with over 70% probability.'}
+ <br />
+ <small>Query took {query.timing.toFixed(2)} seconds</small>
+ </div>
+ <div className='results'>
{els}
</div>
</div>
diff --git a/client/index.js b/client/index.js
index 2beb5526..93341a77 100644
--- a/client/index.js
+++ b/client/index.js
@@ -38,7 +38,6 @@ function appendApplets(applets) {
el.classList.add('loaded')
break
default:
- console.log('react', el, payload)
appendReactApplet(el, payload)
el.classList.add('loaded')
break
diff --git a/client/map/index.js b/client/map/index.js
index 788894f9..053cf13b 100644
--- a/client/map/index.js
+++ b/client/map/index.js
@@ -34,6 +34,7 @@ function addMarker(map, latlng, title, subtext) {
subtext,
].join(''))
}
+
function addArc(map, src, dest) {
L.bezier({
path: [
@@ -46,14 +47,15 @@ function addArc(map, src, dest) {
}
export default function append(el, payload) {
- const { cmd, data } = payload
+ const { data } = payload
+ let { paper, address } = data
+ let source = [0, 0]
const citations = getCitations(data)
- // console.log(el)
let map = L.map(el).setView([25, 0], 2)
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
- attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors,' +
- '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>,' +
+ attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
+ '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: 'mapbox.dark',
@@ -61,13 +63,8 @@ export default function append(el, payload) {
accessToken: 'pk.eyJ1IjoiZmFuc2FsY3kiLCJhIjoiY2pvN3I1czJwMHF5NDNrbWRoMWpteHlrdCJ9.kMpM5syQUhVjKkn1iVx9fg'
}).addTo(map)
- let { address } = data
- console.log(address)
- let source = [0, 0]
if (address) {
source = address.slice(3, 5).map(n => parseFloat(n))
- // console.log(map, address, source)
- console.log(source)
}
citations.forEach(point => {
@@ -77,5 +74,5 @@ export default function append(el, payload) {
addArc(map, source, latlng)
})
- addMarker(map, source, document.querySelector('h2').innerText, address[0])
+ addMarker(map, source, paper.title, paper.address)
}
diff --git a/client/nameSearch/index.js b/client/nameSearch/index.js
new file mode 100644
index 00000000..8c6475e4
--- /dev/null
+++ b/client/nameSearch/index.js
@@ -0,0 +1,5 @@
+import Container from './nameSearch.container'
+
+export {
+ Container,
+}
diff --git a/client/nameSearch/nameSearch.actions.js b/client/nameSearch/nameSearch.actions.js
new file mode 100644
index 00000000..290ee38d
--- /dev/null
+++ b/client/nameSearch/nameSearch.actions.js
@@ -0,0 +1,52 @@
+// import fetchJsonp from 'fetch-jsonp'
+import * as types from '../types'
+// import { hashPath } from '../util'
+import { post } from '../util'
+// import querystring from 'query-string'
+
+// urls
+
+const url = {
+ search: (dataset, q) => process.env.API_HOST + '/api/dataset/' + dataset + '/name?q=' + encodeURIComponent(q),
+}
+export const publicUrl = {
+}
+
+// standard loading events
+
+const loading = (tag, offset) => ({
+ type: types.nameSearch.loading,
+ tag,
+ offset
+})
+const loaded = (tag, data, offset = 0) => ({
+ type: types.nameSearch.loaded,
+ tag,
+ data,
+ offset
+})
+const error = (tag, err) => ({
+ type: types.nameSearch.error,
+ tag,
+ err
+})
+
+// search UI functions
+
+export const updateOptions = opt => dispatch => {
+ dispatch({ type: types.nameSearch.update_options, opt })
+}
+
+// API functions
+
+export const search = (payload, q) => dispatch => {
+ const tag = 'result'
+ const fd = new FormData()
+ fd.append('q', q)
+ dispatch(loading(tag))
+ post(url.search(payload.dataset, q), fd)
+ .then(data => {
+ dispatch(loaded(tag, data))
+ })
+ .catch(err => dispatch(error(tag, err)))
+}
diff --git a/client/nameSearch/nameSearch.container.js b/client/nameSearch/nameSearch.container.js
new file mode 100644
index 00000000..b0de0c3a
--- /dev/null
+++ b/client/nameSearch/nameSearch.container.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import * as actions from './nameSearch.actions'
+
+import NameSearchQuery from './nameSearch.query'
+import NameSearchResult from './nameSearch.result'
+
+class NameSearchContainer extends Component {
+ render() {
+ const { payload } = this.props
+ // console.log(payload)
+ return (
+ <div className='searchContainer'>
+ <NameSearchQuery payload={payload} />
+ <NameSearchResult payload={payload} />
+ </div>
+ )
+ }
+}
+
+
+export default NameSearchContainer
diff --git a/client/nameSearch/nameSearch.query.js b/client/nameSearch/nameSearch.query.js
new file mode 100644
index 00000000..b82e324b
--- /dev/null
+++ b/client/nameSearch/nameSearch.query.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import * as actions from './nameSearch.actions'
+
+class NameSearchQuery extends Component {
+ state = {
+ value: null
+ }
+
+ handleInput(value) {
+ this.setState({ q: value })
+ if (value.length > 2) {
+ this.props.actions.search(this.props.payload, value)
+ }
+ }
+
+ render() {
+ return (
+ <div className='query'>
+ <h2>Find Your Name</h2>
+ <h3>Searching {13456} identities</h3>
+ <p>
+ {'Enter your name to see if you were included in this dataset..'}
+ </p>
+ <input
+ type="text"
+ class="q"
+ placeholder="Enter your name"
+ value={this.state.q}
+ onInput={e => this.handleInput(e.target.value)}
+ />
+ </div>
+ )
+ }
+}
+
+const mapStateToProps = state => ({
+ result: state.nameSearch.result,
+ options: state.nameSearch.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+ actions: bindActionCreators({ ...actions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(NameSearchQuery)
diff --git a/client/nameSearch/nameSearch.reducer.js b/client/nameSearch/nameSearch.reducer.js
new file mode 100644
index 00000000..101c93ea
--- /dev/null
+++ b/client/nameSearch/nameSearch.reducer.js
@@ -0,0 +1,32 @@
+import * as types from '../types'
+
+const initialState = () => ({
+ query: {},
+ result: {},
+ loading: false,
+})
+
+export default function nameSearchReducer(state = initialState(), action) {
+ switch (action.type) {
+ case types.nameSearch.loading:
+ return {
+ ...state,
+ [action.tag]: { loading: true },
+ }
+
+ case types.nameSearch.loaded:
+ return {
+ ...state,
+ [action.tag]: action.data,
+ }
+
+ case types.nameSearch.error:
+ return {
+ ...state,
+ [action.tag]: { error: action.err },
+ }
+
+ default:
+ return state
+ }
+}
diff --git a/client/nameSearch/nameSearch.result.js b/client/nameSearch/nameSearch.result.js
new file mode 100644
index 00000000..9e20228c
--- /dev/null
+++ b/client/nameSearch/nameSearch.result.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { courtesyS } from '../util'
+
+import * as actions from './nameSearch.actions'
+import { Loader } from '../common'
+
+const errors = {
+ nomatch: (
+ <div>
+ <h3>Name not found</h3>
+ {"No names matched your query."}
+ </div>
+ ),
+ error: (
+ <div>
+ <h3>{"No matches found"}</h3>
+ </div>
+ ),
+}
+
+class NameSearchResult extends Component {
+ render() {
+ const { dataset } = this.props.payload
+ const { query, results, loading, error } = this.props.result
+ console.log(this.props.result)
+ if (loading) {
+ return (
+ <div className='result'>
+ <div>
+ <Loader />
+ </div>
+ </div>
+ )
+ }
+ if (error) {
+ console.log(error)
+ let errorMessage = errors[error] || errors.error
+ return (
+ <div className='result'>{errorMessage}</div>
+ )
+ }
+ if (!results) {
+ return <div className='result'></div>
+ }
+ if (!results.length) {
+ return (
+ <div className='result'>{errors.nomatch}</div>
+ )
+ }
+ const els = results.map((result, i) => {
+ const { uuid } = result.uuid
+ const { fullname, gender, description, images } = result.identity
+ return (
+ <div key={i}>
+ <img src={'https://megapixels.nyc3.digitaloceanspaces.com/v1/media/' + dataset + '/' + uuid + '.jpg'} />
+ {fullname} {'('}{gender}{')'}<br/>
+ {description}<br/>
+ {courtesyS(images, 'image')}{' in dataset'}<br />
+ </div>
+ )
+ })
+
+ return (
+ <div className='result'>
+ <div className="timing">
+ {'Search took '}{Math.round(query.timing * 1000) + ' ms'}
+ </div>
+ <div className='results'>
+ {els}
+ </div>
+ </div>
+ )
+ }
+}
+
+const mapStateToProps = state => ({
+ query: state.nameSearch.query,
+ result: state.nameSearch.result,
+ options: state.nameSearch.options,
+})
+
+const mapDispatchToProps = dispatch => ({
+ actions: bindActionCreators({ ...actions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(NameSearchResult)
diff --git a/client/store.js b/client/store.js
index 03f983a5..13612f2d 100644
--- a/client/store.js
+++ b/client/store.js
@@ -1,16 +1,12 @@
import { applyMiddleware, compose, combineReducers, createStore } from 'redux'
import thunk from 'redux-thunk'
-// import metadataReducer from './metadata/metadata.reducer'
import faceSearchReducer from './faceSearch/faceSearch.reducer'
-// import reviewReducer from './review/review.reducer'
+import nameSearchReducer from './nameSearch/nameSearch.reducer'
const rootReducer = combineReducers({
- auth: (state = {}) => state,
- // auth: (state = login()) => state,
- // metadata: metadataReducer,
faceSearch: faceSearchReducer,
- // review: reviewReducer,
+ nameSearch: nameSearchReducer,
})
function configureStore(initialState = {}) {
diff --git a/client/tables.js b/client/tables.js
index 2a2699f9..b4c13887 100644
--- a/client/tables.js
+++ b/client/tables.js
@@ -74,4 +74,8 @@ export default function append(el, payload) {
}
})
}
+
+ if (fields.length > 1 && fields[1].indexOf('filter')) {
+ const filter = fields[1].split(' ')
+ }
}
diff --git a/client/types.js b/client/types.js
index d295d0d1..fb1fbe30 100644
--- a/client/types.js
+++ b/client/types.js
@@ -10,5 +10,8 @@ export const faceSearch = tagAsType('faceSearch', [
'loading', 'loaded', 'error', 'update_options',
])
+export const nameSearch = tagAsType('nameSearch', [
+ 'loading', 'loaded', 'error', 'update_options',
+])
export const init = '@@INIT'
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-12 12:02:39 +0000