size projections in web interface

Co-authored-by: Alex <AlexanderMcDowell@users.noreply.github.com>

templates/base.html

@@ -14,4 +14,5 @@
     <br>
     {% block content required %}
     {% endblock %}
+    <br><br><br>
 </body>

templates/index.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 {% block content %} 
 <form action="/ratio_pyro" method="POST" enctype="multipart/form-data">
-    <h2>Simple Ratio Pyrometry Interface</h2>
+    <h2>Ratio Pyrometry Interface</h2>
 
     <img src="#" id="img-preview" type="file"/>
     <br>

templates/projected-area-results.html

@@ -1,6 +1,30 @@
 {% extends "base.html" %}
 {% block content %} 
 
+<h2>Results</h2>
+<a href="/projected_area">Process another image</a>
 
+<div style="display: flex; align-items: start;">
+    <img class="image-out-pa" src="data:image/png;base64,{{ img_b64 }}" alt="original image">
+
+    <div style="overflow-y: scroll;">
+    <table style="background: #f1f1f1">
+        <tr>
+            <th class="legend-heading">Index</th>
+            <th class="legend-heading">Area</th>
+            <th class="legend-heading">Copy</th>
+        </tr>
+        {% for item in dtable %}
+        <tr>
+            <td class="legend-cell">{{ item.0 }}</td>
+            <td class="legend-cell">{{ item.1 }} mm²</td>
+            <td>
+                <button onclick="() => navigator.clipboard.writeText('{{ item.1 }}')">Copy</button>
+            </td>
+        </tr>
+        {% endfor %}
+    </table>
+    </div>
+</div>
 
 {% endblock %}

templates/projected-area.html

@@ -1,6 +1,23 @@
 {% extends "base.html" %}
 {% block content %} 
 
+<form action="/projected_area_results" method="POST" enctype="multipart/form-data">
+    <h2>Projected Area Interface</h2>
 
+    <input id="img-upload" type="file" name="file" accept=".png,.jpg,.jpeg,.tiff" value="Choose Image"/>
+
+    <h4>Settings</h4>
+
+    <label for="area_threshold">Area threshold (to remove dust particles) in px</label>
+    <input type="number" name="area_threshold" value="250"/>
+    <br>
+
+    <label for="min_display_threshold">Minimum display threshold (in px)</label>
+    <input type="number" name="min_display_threshold" value="300"/>
+    <br>
+
+    <br>
+    <input type="submit" value="Generate Projected Sizes"/>
+</form>
 
 {% endblock %}

templates/pyrometry-results.html

@@ -37,6 +37,6 @@
 </table>
 {# Temperature Frequency Plot #}
 <strong>Temperature Distribution</strong>
-{{freq_plot}}
+{{ freq_plot | safe }}
 
 {% endblock %}