2 files changed, 51 insertions, 6 deletions

diff --git a/client/app.css b/client/app.css
new file mode 100644
index 0000000..a437c90
--- /dev/null
+++ b/client/app.css
@@ -0,0 +1,39 @@
+.query {
+  margin: 10px 0;
+}
+.query label {
+  display: flex;
+  flex-direction: row;
+}
+.query label span {
+  display: inline-block;
+  width: 100px;
+}
+
+.results {
+  margin: 10px 0;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+.results .result {
+  width: 250px;
+  color: #333;
+}
+.results .result .img {
+  text-align: center;
+  height: 300px;
+}
+.results .result img {
+  max-width: 100%;
+  max-height: 300px;
+}
+.sha256 {
+  display: inline-block;
+  overflow: hidden;
+  white-space: pre;
+  max-width: 100%;
+}
+.results .result {
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/client/app.js b/client/app.js
index b1c5eb4..7635162 100644
--- a/client/app.js
+++ b/client/app.js
@@ -3,6 +3,8 @@ import React, { Component } from 'react'
 import UploadImage from './lib/uploadImage.component'
 import { post } from './util'
 
+import './app.css'
+
 const initialState = {
   image: null,
   url: "",
@@ -106,7 +108,7 @@ export default class PhashApp extends Component {
       )
     }
 
-    const { success, error, match, matches } = res
+    const { success, error, match, results } = res
     if (!success) {
       return (
         <div className='results'>
@@ -125,11 +127,15 @@ export default class PhashApp extends Component {
 
     return (
       <div className='results'>
-        {matches.map(({ phash, score, sha256, url }) => (
-          <div className='result'>
-            <img src={url} /><br />
-            Match: {sha256}<br />
-            Score: {score}<br />
+        {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>
         ))}