diff options
| -rw-r--r-- | client/actions.js | 7 | ||||
| -rw-r--r-- | client/app.css | 3 | ||||
| -rw-r--r-- | client/components/query.component.js | 39 |
3 files changed, 44 insertions, 5 deletions
diff --git a/client/actions.js b/client/actions.js index dfcfa09..3fee515 100644 --- a/client/actions.js +++ b/client/actions.js @@ -25,3 +25,10 @@ export const submit = (url, threshold) => dispatch => { params.append('threshold', threshold) api(dispatch, post, 'similar', '/api/v1/similar', params) } + +export const submit = (url, threshold) => dispatch => { + const params = new FormData() + params.append('url', url) + params.append('threshold', threshold) + api(dispatch, post, 'similar', '/api/v1/match', params) +} diff --git a/client/app.css b/client/app.css index aa525da..042485d 100644 --- a/client/app.css +++ b/client/app.css @@ -45,6 +45,9 @@ label { margin-top: 10px; flex-direction: column; } +.query input[type=radio] { + cursor: pointer; +} /* results */ diff --git a/client/components/query.component.js b/client/components/query.component.js index 715ea92..d28d3a0 100644 --- a/client/components/query.component.js +++ b/client/components/query.component.js @@ -6,14 +6,18 @@ import * as actions from '../actions' import UploadImage from './uploadImage.component' +const MATCH_THRESHOLD = 6 +const SIMILAR_THRESHOLD = 20 + class Query extends Component { state = { image: null, blob: null, url: "", - threshold: 20, + threshold: SIMILAR_THRESHOLD, searchType: 'file', thresholdChanged: false, + saveIfNotFound: false, } handleUpload(blob) { @@ -22,15 +26,31 @@ class Query extends Component { URL.revokeObjectURL(image) } const url = URL.createObjectURL(blob) - this.setState({ image: url, blob, thresholdChanged: false }) + this.setState({ + image: url, + blob, + thresholdChanged: false, + }) this.props.actions.upload(blob, threshold) } handleURL() { - const { url, threshold } = this.state + const { url, threshold, saveIfNotFound } = this.state if (!url || url.indexOf('http') !== 0) return - this.setState({ image: url, blob: null, thresholdChanged: false }) - this.props.actions.submit(url, threshold) + let newThreshold = threshold + if (saveIfNotFound) { + newThreshold = SIMILAR_THRESHOLD + this.props.actions.match(url, threshold) + } else { + this.props.actions.submit(url, threshold) + } + this.setState({ + image: url, + blob: null, + thresholdChanged: false, + saveIfNotFound: false, + threshold: newThreshold, + }) } resubmit() { @@ -107,6 +127,15 @@ class Query extends Component { /> {thresholdChanged && <button onClick={this.resubmit.bind(this)}>Update</button>} </label> + {searchType === 'url' && + <label> + <span>Save if not found</span> + <input + type='checkbox' + checked={saveIfNotFound} + onChange={e => this.setState({ saveIfNotFound: e.target.checked, threshold: e.target.checked ? MATCH_THRESHOLD : SIMILAR_THRESHOLD })} + </label> + } {image && <div className='activeQuery'> <b>Query image</b> |