multiple search results loading

4 files changed, 83 insertions, 46 deletions

diff --git a/check/app/server/api.py b/check/app/server/api.py
index 66a0dd1..1a935cc 100644
--- a/check/app/server/api.py
+++ b/check/app/server/api.py
@@ -35,49 +35,41 @@ def get_params(default_threshold=MATCH_THRESHOLD, default_limit=MATCH_LIMIT):
     threshold = int(request.form.get('threshold') or default_threshold)
     limit = int(request.form.get('limit') or default_limit)
   except:
-    return jsonify({
-      'success': False,
-      'match': False,
-      'error': 'param_error'
-    })
-
+    return None, 'param_error'
+  
+  # Process uploaded file
   if 'q' in request.files:
     file = request.files['q']
     fn = file.filename
-    if fn.endswith('blob'): # FIX PNG IMAGES?
+    # demo client currently uploads a jpeg called 'blob'
+    if fn.endswith('blob'):
       logging.debug('received a blob, assuming JPEG')
       fn = 'filename.jpg'
 
     basename, ext = os.path.splitext(fn)
     if ext.lower() not in valid_exts:
-      return jsonify({
-        'success': False,
-        'match': False,
-        'error': 'not_an_image'
-      })
+      return None, 'not_an_image' 
+    ext = ext[1:].lower()
 
     raw = None
     im = Image.open(file.stream).convert('RGB')
+    url = None
+
+  # Fetch remote URL
   else:
     url = request.form.get('url')
     if not url:
-      return jsonify({
-        'success': False,
-        'match': False,
-        'error': 'no_image'
-      })
+      return None, 'no_image'
     basename, ext = os.path.splitext(url)
     if ext.lower() not in valid_exts:
-      return jsonify({
-        'success': False,
-        'match': False,
-        'error': 'not_an_image'
-      })
+      return None, 'not_an_image'
+    ext = ext[1:].lower()
 
     remote_request = urllib.request.Request(url)
     remote_response = urllib.request.urlopen(remote_request)
     raw = remote_response.read()
     im = Image.open(io.BytesIO(raw)).convert('RGB')
+  return (threshold, limit, url, ext, raw, im,), None
 
 @api.route('/v1/match', methods=['POST'])
 def match():
@@ -86,10 +78,17 @@ def match():
   """
   start = time.time()
 
-  threshold, limit, raw, im = get_params()
+  params, error = get_params()
+  if error:
+    return jsonify({
+      'success': False,
+      'match': False,
+      'error': error,
+    })
+
+  threshold, limit, url, ext, raw, im = params
 
   phash = compute_phash_int(im)
-  ext = ext[1:].lower()
 
   results = search_by_phash(phash=phash, threshold=threshold, limit=limit)
 
@@ -118,7 +117,15 @@ def similar():
   """
   start = time.time()
 
-  threshold, limit, raw, im = get_params(default_threshold=SIMILARITY_THRESHOLD, default_limit=SIMILARITY_LIMIT)
+  params, error = get_params(default_threshold=SIMILARITY_THRESHOLD, default_limit=SIMILARITY_LIMIT)
+  if error:
+    return jsonify({
+      'success': False,
+      'match': False,
+      'error': error,
+    })
+
+  threshold, limit, url, ext, raw, im = params
 
   phash = compute_phash_int(im)
   ext = ext[1:].lower()
diff --git a/check/static/assets/css.css b/check/static/assets/css.css
index d2ef116..79144ad 100755
--- a/check/static/assets/css.css
+++ b/check/static/assets/css.css
@@ -342,18 +342,3 @@ td.result_txt ul li{
   padding-bottom: 5px;
   list-style: none;
 }
-
-.query {
-  margin: 10px 0;
-}
-.results {
-  margin: 10px 0;
-}
-.query label {
-  display: flex;
-  flex-direction: row;
-}
-.query label span {
-  display: inline-block;
-  width: 100px;
-}
\ No newline at end of file
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>
         ))}