Start supporting face clustering view

Signed-off-by: James Ketrenos <james_gitlab@ketrenos.com>

frontend/face-explorer.html

@@ -7,6 +7,22 @@ body {
   padding: 0;
 }
 
+#bar {
+  height: 200px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-x: scroll;
+  box-sizing: content-box;
+}
+
+.view {
+  display: inline-block;
+  width: 200px;
+  height: 200px;
+}
+
 .face {
   position: absolute;
   display: inline-block;
@@ -124,9 +140,32 @@ function makeFaceBoxes() {
     box.style.width = Math.floor((face.right - face.left) * width)  + "%";
     box.style.height = Math.floor((face.bottom - face.top) * height)  + "%";
     box.addEventListener("click", (event) => {
+      var bar = document.getElementById("bar");
+      if (!bar) {
+        bar = document.createElement("div");
+        bar.id = "bar";
+        document.body.appendChild(bar);
+      } else {
+        while (bar.firstChild) {
+          bar.removeChild(bar.firstChild);
+        }
+      }
+
+      if (face.relatedPhotos.length == 0) {
+        document.body.removeChild(bar);
+      }
+
       face.relatedPhotos.forEach((photo) => {
-        window.open(base + "face-explorer.html?" + photo.id, "ketr.photo-" + photo.id);
+        var view = document.createElement("div"),
+          id = photo.faceId,
+          url = base + "face-data/" + (id % 100) + "/" + id + "-original.png"
+        view.classList.add("view");
+        view.style.backgroundImage = "url(" + url + ")";
+        view.addEventListener("click", (event) => {
+          window.location.query = photo.id;
         });
+      });
+
       event.preventDefault = true;
       event.stopImmediatePropagation();
       event.stopPropagation();

server/face.js

@@ -47,8 +47,6 @@ require("./db/photos").then(function(db) {
   process.argv.shift(); /* script name */
 
   return Promise.resolve().then(() => {
-    console.log(process.argv.length);
-
     if (process.argv.length != 0) {
       return process.argv;
     }
@@ -64,6 +62,7 @@ require("./db/photos").then(function(db) {
 }).then((args) => {
   const faces = [];
 
+  console.log(`Scanning ${args.length} faces.`);
   return Promise.map(args, (arg) => {
     const file = arg,
       id = parseInt(arg);

server/routes/photos.js

@@ -855,7 +855,7 @@ router.get("/random/:id?", (req, res) => {
     raw: true
   }).then((results) => {
     if (!results.length) {
-      return res.status(404).send(id + " not found.");
+      return [];
     }
     if (id) {
       if (results[0].duplicate) {