1 files changed, 102 insertions, 0 deletions
diff --git a/client/app.js b/client/app.js
new file mode 100644
index 0000000..96c426c
--- /dev/null
+++ b/client/app.js
@@ -0,0 +1,102 @@
+import React, { Component } from 'react'
+
+import UploadImage from './lib/uploadImage.component'
+import { post } from './util'
+
+const initialState = {
+  'image': null,
+  'res': null,
+  'loading': false,
+}
+
+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 })
+    })
+  }
+
+  render() {
+    return (
+      <div className='app'>
+        <h1>Perceptual Hash Demo</h1>
+        {this.renderQuery()}
+        {this.renderResults()}
+      </div>
+    )
+  }
+
+  renderQuery() {
+    const { image } = this.state
+    const style = {}
+    if (image) {
+      style.backgroundImage = 'url(' + image + ')'
+      style.backgroundSize = 'cover'
+      style.opacity = 1
+    }
+    return (
+      <div className='query'>
+        <UploadImage onUpload={this.upload.bind(this)} />
+        {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, closest_match } = res
+    if (!success) {
+      return (
+        <div className='results'>
+          <b>Error: {error}</b>
+        </div>
+      )
+    }
+
+    if (!match) {
+      return (
+        <div className='results'>
+          No match, image added to database
+        </div>
+      )
+    }
+    console.log(closest_match)
+    const { ext, phash, score, sha256 } = closest_match
+    return (
+      <div className='results'>
+        Closest match: {sha256}{'.'}{ext}<br />
+        Score: {score}<br />
+        Phash: {phash.toString(16)}
+      </div>
+    )
+  }
+}
+\ No newline at end of file