params

1 files changed, 14 insertions, 10 deletions

diff --git a/client/app.js b/client/app.js
index d18a5aa..b1c5eb4 100644
--- a/client/app.js
+++ b/client/app.js
@@ -54,7 +54,7 @@ export default class PhashApp extends Component {
   render() {
     return (
       <div className='app'>
-        <h1>Perceptual Hash Demo</h1>
+        <h1>Search by Image</h1>
         {this.renderQuery()}
         {this.renderResults()}
       </div>
@@ -72,11 +72,12 @@ export default class PhashApp extends Component {
     return (
       <div className='query'>
         <label>
-          <span>Upload image</span>
+          <span>Query image</span>
           <UploadImage onUpload={this.upload.bind(this)} />
         </label>
+        <br />
         <label>
-          <span>Enter URL</span>
+          <span>Add a URL</span>
           <input
             type='text'
             value={this.state.url}
@@ -105,11 +106,11 @@ export default class PhashApp extends Component {
       )
     }
 
-    const { success, error, match, closest_match } = res
+    const { success, error, match, matches } = res
     if (!success) {
       return (
         <div className='results'>
-          <b>Error: {error}</b>
+          <b>Error: {error.replace(/_/g, ' ')}</b>
         </div>
       )
     }
@@ -122,13 +123,16 @@ export default class PhashApp extends Component {
       )
     }
 
-    const { phash, score, sha256, url} = closest_match
     return (
       <div className='results'>
-        <img src={url} /><br />
-        Closest match: {sha256}<br />
-        Score: {score}<br />
-        Phash: {phash.toString(16)}
+        {matches.map(({ phash, score, sha256, url }) => (
+          <div className='result'>
+            <img src={url} /><br />
+            Match: {sha256}<br />
+            Score: {score}<br />
+            Phash: {phash.toString(16)}
+          </div>
+        ))}
       </div>
     )
   }