1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as actions from '../actions'
import UploadImage from './uploadImage.component'
class Query extends Component {
state = {
image: null,
blob: null,
url: "",
threshold: 20,
}
handleUpload(blob) {
const { image, threshold } = this.state
if (image) {
URL.revokeObjectURL(image)
}
const url = URL.createObjectURL(blob)
this.setState({ image: url, blob })
this.props.actions.upload(blob, threshold)
}
handleURL() {
const { url, threshold } = this.state
if (!url || url.indexOf('http') !== 0) return
this.setState({ image: url, blob: null })
this.props.actions.submit(url, threshold)
}
resubmit() {
const { image, blob } = this.state
if (blob) {
this.handleUpload(blob)
} else {
this.handleURL()
}
}
render() {
const { url, image, threshold } = this.state
const style = {}
if (image) {
style.maxWidth = 200
style.maxHeight = 200
style.backgroundImage = 'url(' + image + ')'
style.backgroundSize = 'cover'
style.opacity = 1
}
return (
<div className='query'>
<label>
<span>Query image</span>
<UploadImage onUpload={this.handleUpload.bind(this)} />
</label>
{/*
<label>
<span>Add a URL</span>
<input
type='text'
value={url}
onChange={e => this.setState({ url: e.target.value })}
onKeyDown={e => e.keyCode === 13 && this.handleURL()}
placeholder='https://'
/>
</label>
*/}
<label>
<span>Threshold</span>
<input
type='number'
value={threshold}
min={0}
max={64}
step={1}
onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
/>
<input
type='range'
value={threshold}
min={0}
max={64}
step={1}
onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
/>
<button onClick={this.resubmit}>Update</button>
</label>
{image && <div className='image' style={style} />}
</div>
)
}
}
const mapStateToProps = state => ({
...state.api,
})
const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({ ...actions }, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(Query)
|
