working interface

.gitignore

@@ -2,8 +2,8 @@
 
 .vscode/
 *.swp
-uploads/*
+static/*
-!uploads/.gitkeep
+!static/.gitkeep
 
 # Byte-compiled / optimized / DLL files
 __pycache__/

Makefile

@@ -0,0 +1,12 @@
+SHELL = /bin/bash
+.DEFAULT_GOAL := serve
+
+serve:
+	gunicorn flask_frontend:app
+
+dev:
+	gunicorn flask_frontend:app --reload
+
+clean:
+	rm -rf static/*
+	touch static/.gitkeep

examples/base64_test.py

@@ -0,0 +1,8 @@
+import base64
+import cv2 as cv
+
+img = cv.imread('01-0001-cropped.png')
+
+print(img[0:100])
+
+# print(base64.b64encode(img).decode()[0:5_000])

flask_frontend.py

@@ -1,9 +1,19 @@
 from flask import Flask, render_template, request
+from werkzeug.utils import secure_filename
 import numpy as np
 from ratio_pyrometry import ratio_pyrometry_pipeline
 import base64
+import random
+import cv2 as cv
 
-app = Flask(__name__)
+app = Flask(
+    __name__, 
+    static_folder='./static',
+    static_url_path='/s/'
+)
+
+app.config['STATIC_FOLDER'] = './static'
+app.config['STATIC_URL_PATH'] = '/s'
 
 @app.route('/', methods=['GET'])
 def index():
@@ -12,6 +22,8 @@ def index():
 @app.route('/ratio_pyro', methods=['POST'])
 def ratio_pyro():
     f = request.files['file']
+    f_name = f.filename.split('.')[0]
+    f_ext = f.filename.split('.')[1]
     f_bytes = np.fromstring(f.read(), np.uint8)
     img_orig, img_res, key = ratio_pyrometry_pipeline(
         f_bytes,
@@ -23,12 +35,23 @@ def ratio_pyro():
         MIN_TEMP=float(request.form['min_temp'])
     )
 
-    img_orig_bytes = base64.urlsafe_b64encode(img_orig)
+    # img_orig_b64 = base64.b64encode(img_orig).decode()
-    img_res_bytes = base64.urlsafe_b64encode(img_res)
+    # img_res_b64 = base64.b64encode(img_res).decode()
+
+    img_orig_fname = secure_filename(f'{f_name}.{f_ext}')
+    img_res_fname = secure_filename(f'{f_name}-{hex(int(random.random() * 10000000000000000000))}.{f_ext}')
+
+    cv.imwrite(f'{app.config["STATIC_FOLDER"]}/{img_orig_fname}', img_orig)
+    cv.imwrite(f'{app.config["STATIC_FOLDER"]}/{img_res_fname}', img_res)
+
+    img_orig_path = f'{app.config["STATIC_URL_PATH"]}/{img_orig_fname}'
+    img_res_path = f'{app.config["STATIC_URL_PATH"]}/{img_res_fname}'
 
     return render_template(
         'results.jinja2',
-        img_orig_bytes=img_orig_bytes,
+        img_orig_path=img_orig_path,
-        img_res_bytes=img_res_bytes,
+        img_res_path=img_res_path,
+        # img_orig_b64=img_orig_b64,
+        # img_res_b64=img_res_b64,
         legend=key
     )

ratio_pyrometry.py

@@ -32,7 +32,7 @@ def rg_ratio_normalize(
     tmin = MAX_TEMP
     tmax = 0
 
-    imgnew = imgarr
+    imgnew = imgarr.copy()
     for i in range(len(imgarr)):
         for j in range(len(imgarr[i])):
             px = imgarr[i][j]
@@ -122,7 +122,7 @@ def ratio_pyrometry_pipeline(
     for i in range(key_entries):
         res_temp = tmin + (i * step)
         res_color = (tmax - (i * step)) / MAX_TEMP * 255
-        temps.append(res_temp)
+        temps.append(math.floor(res_temp))
         key_img_arr[0].append([res_color, res_color, res_color])
 
     key_img = np.array(key_img_arr).astype(np.uint8)

templates/results.jinja2

@@ -8,22 +8,21 @@
     </tr>
     <tr>
         {# Original image #}
-        <td>
+        <td class="img-table-cell" id="orig-cell">
-        <img data="{{ img_orig_bytes }}" alt="original image">
+            {# <img src="data:image/png;base64,{{ img_orig_b64 }}" alt="original image"> #}
+            <img class="img-out" src="{{ img_orig_path }}" alt="original image">
         </td>
-
         {# Result image #}
-        <td>
+        <td class="img-table-cell" id="res-cell">
-        <img data="{{ img_res_bytes }}" alt="result image">
+            {# <img src="data:image/png;base64,{{ img_res_b64 }}" alt="result image"> #}
+            <img class="img-out" src="{{ img_res_path }}" alt="resulting heatmap">
         </td>
     </tr>
-</table>
+    {# Legend #}
-
+    <tr>
-<h1>{{ img_orig_bytes }}</h1>
+        <td class="img-table-cell"></td>
-
+        <td class="img-table-cell">
-<br><br><br>
+            <table class="legend" id="legend">
-
-<table class="legend">
                 <tr>
                     <th>Color</th>
                     <th>Temperature</th>
@@ -36,21 +35,26 @@
                 {% endfor %}
             </table>
 
-<style>
+        </td>
-    .img-table {
+    </tr>
-        width: 80%;
+</table>
-    }
 
+<style>
     .img-table-heading {
         padding: 4px 10px;
     }
 
     .img-table-cell {
-        padding: 20px 10px;
+        padding: 10px 20px;
+    }
+
+    .img-out {
+        width: 32rem;
+        height: 32rem;
     }
 
     .legend-cell {
-        padding: 4px 14px;
+        padding: 4px 30px;
     }
 </style>