first pass of allowing to scan for all files in import and storage paths <- works, and showing all unknown faces to handle them somehow - very rudimentary

templates/faces.html

@@ -0,0 +1,50 @@
+{% extends "base.html" %}
+
+{% block main_content %}
+<script src="{{ url_for( 'internal', filename='js/face.js')}}"></script>
+    <div class="container-fluid">
+        <h3>Unmatched Faces</h3>
+        <div class="row mt-3">
+        {% for f in faces %}
+            <div id="F{{f.id}}" class="col-2 px-0">
+                <form id="_fm" method="POST" action="/view/{{f.file_eid}}">
+ <input type="hidden" name="eids" value="{{f.file_eid}},">
+ <input type="hidden" name="noo" value="newest">
+ <input type="hidden" name="cwd" value="/">
+ <input type="hidden" name="root" value="/">
+ <input type="hidden" name="size" value="128">
+ <input type="hidden" name="grouping" value="1">
+ <input type="hidden" name="offset" value="0">
+ <input type="hidden" name="folders" value="false">
+ <input type="hidden" name="how_many" value="1">
+ <input type="hidden" name="orig_url" value="{{request.path}}">'
+
+                <figure id="fig_{{f.id}}">
+                    <div style="position:relative">
+                        <canvas id="c_{{f.id}}" height="128"></canvas>
+                        <script>
+                            var im_{{f.id}}=new Image();
+                            im_{{f.id}}.src="data:image/jpeg;base64,{{f.img}}";
+                            fig_{{f.id}}=$('#fig_{{f.id}}')
+                            // store this stuff in an javascript Object to use when document is ready event is triggered
+                            var orig_face_{{f.id}}=new Object;
+                            orig_face_{{f.id}}.x = {{f.locn[0][3]}}
+                            orig_face_{{f.id}}.y = {{f.locn[0][0]}}
+                            orig_face_{{f.id}}.w = {{f.locn[0][1]}}-{{f.locn[0][3]}}
+                            orig_face_{{f.id}}.h = {{f.locn[0][2]}}-{{f.locn[0][0]}}
+                            orig_face_{{f.id}}.orig_w = orig_face_{{f.id}}.w
+                            orig_face_{{f.id}}.orig_h = orig_face_{{f.id}}.h
+
+                            // when the document is ready, then DrawRefimg
+                            $(function() { DrawRefimg( fig_{{f.id}}, im_{{f.id}}, c_{{f.id}}, orig_face_{{f.id}} ) });
+                        </script>
+                        <figcaption>{{f.id}}</figcation>
+                    </div>
+                </figure>
+                <button>Go</button>
+                </form>
+            </div id="/F*">
+        {% endfor %}
+        </div class="row">
+    </div class="container-fluid">
+{% endblock main_content %}