diff options
Diffstat (limited to 'client/app.js')
| -rw-r--r-- | client/app.js | 159 |
1 files changed, 10 insertions, 149 deletions
diff --git a/client/app.js b/client/app.js index 8a07f34..c9a479c 100644 --- a/client/app.js +++ b/client/app.js @@ -1,155 +1,16 @@ import React, { Component } from 'react' -import UploadImage from './lib/uploadImage.component' -import { post } from './util' +import { Query, Results, Timing } from './components' import './app.css' -const initialState = { - image: null, - url: "", - res: null, - loading: false, +export default function App () { + return ( + <div className='app'> + <h1>Search by Image</h1> + <Query /> + <Results /> + <Timing /> + </div> + ) } - -export default class PhashApp extends Component { - state = { ...initialState } - - upload(blob) { - if (this.state.image) { - URL.revokeObjectURL(this.state.image) - } - const url = URL.createObjectURL(blob) - this.setState({ image: url, loading: true }) - - const fd = new FormData() - fd.append('q', blob) - post('/api/v1/match', fd) - .then(res => { - console.log(res) - this.setState({ res, loading: false }) - }) - .catch(err => { - console.log(err) - this.setState({ loading: false }) - }) - } - - submit() { - const { url } = this.state - if (!url || url.indexOf('http') !== 0) return - this.setState({ image: url, loading: true }) - - const fd = new FormData() - fd.append('url', url) - post('/api/v1/match', fd) - .then(res => { - console.log(res) - this.setState({ res, loading: false }) - }) - .catch(err => { - console.log(err) - this.setState({ loading: false }) - }) - } - - render() { - const { res } = this.state - return ( - <div className='app'> - <h1>Search by Image</h1> - {this.renderQuery()} - {this.renderResults()} - {this.renderTiming()} - </div> - ) - } - - renderQuery() { - const { image } = this.state - const style = {} - if (image) { - style.backgroundImage = 'url(' + image + ')' - style.backgroundSize = 'cover' - style.opacity = 1 - } - return ( - <div className='query'> - <label> - <span>Query image</span> - <UploadImage onUpload={this.upload.bind(this)} /> - </label> - <br /> - <label> - <span>Add a URL</span> - <input - type='text' - value={this.state.url} - onChange={e => this.setState({ url: e.target.value })} - onKeyDown={e => e.keyCode === 13 && this.submit()} - placeholder='https://' - /> - </label> - {image && <div style={style} />} - </div> - ) - } - renderResults() { - const { loading, res } = this.state - if (!res) { - return ( - <div className='results'> - </div> - ) - } - if (loading) { - return ( - <div className='results'> - <i>Loading...</i> - </div> - ) - } - - const { success, error, match, results } = res - if (!success) { - return ( - <div className='results'> - <b>Error: {error.replace(/_/g, ' ')}</b> - </div> - ) - } - - if (!match) { - return ( - <div className='results'> - No match, image added to database - </div> - ) - } - - return ( - <div className='results'> - {results.map(({ phash, score, sha256, url }) => ( - <div className='result' key={sha256}> - <div className='img'><img src={url} /></div> - <br /> - {score == 0 - ? <span className='score'><b>Exact match</b></span> - : <span className='score'>Score: {score}</span> - }<br /> - <span className='sha256'>{sha256}</span> - Phash: {phash.toString(16)} - </div> - ))} - </div> - ) - } - - renderTiming() { - const { res } = this.state - if (res && res.timing) { - return <small>Query completed in {Math.round(res.timing * 1000)} ms</small> - } - return null - } -}
\ No newline at end of file |