diff --git a/frontend/identities.html b/frontend/identities.html
index 27fd6f1..10d4609 100755
--- a/frontend/identities.html
+++ b/frontend/identities.html
@@ -86,10 +86,9 @@ function loadFace(id) {
editor.appendChild(row);
row = document.createElement("div");
row.classList.add("editor-row");
- let message = "Related faces: ",
- max = Math.min(face.relatedFaces.length, 9);
- if (max > 0) {
- message += face.relatedFaces.length + " related. Showing top " + max + ". (tap to deselect)";
+ let message = "Related faces: ";
+ if (face.relatedFaces.length > 0) {
+ message += face.relatedFaces.length + " related (tap to deselect)";
} else {
message += "No matches found.";
}
@@ -99,22 +98,41 @@ function loadFace(id) {
row = document.createElement("div");
row.classList.add("editor-row");
row.classList.add("related-faces");
- for (let i = 0; i < max; i++) {
- let relation = face.relatedFaces[i];
- const distance = document.createElement("div"),
- facePhoto = createFace(relation.faceId, relation.photoId, true);
- distance.classList.add("distance");
- distance.textContent = relation.distance.toFixed(2);
- facePhoto.appendChild(distance);
- row.appendChild(facePhoto);
- }
editor.appendChild(row);
+ let button = document.createElement("button");
+ button.textContent = "show more";
+ button.addEventListener("click", (event) => {
+ showMore(row, face.relatedFaces);
+ });
+
+ editor.appendChild(button);
+
+ showMore(row, face.relatedFaces);
+
faceEditorBlock.appendChild(editor);
});
}
+function showMore(row, faces) {
+ let index = row.querySelectorAll(".face").length,
+ max = Math.min(faces.length - index, 9);
+ let more = index + max < faces.length;
+ for (let i = index; i < index + max; i++) {
+ let relation = faces[i];
+ const distance = document.createElement("div"),
+ facePhoto = createFace(relation.faceId, relation.photoId, true);
+ distance.classList.add("distance");
+ distance.textContent = relation.distance.toFixed(2);
+ facePhoto.appendChild(distance);
+ row.appendChild(facePhoto);
+ }
+ if (!more) {
+ row.parentElement.querySelector("button").style.display = "none";
+ }
+}
+
function getIdentities(id) {
const identitiesBlock = document.getElementById("identities");
identitiesBlock.innerHTML = "";
@@ -190,7 +208,7 @@ function getIdentities(id) {
div.appendChild(facePhoto);
}
- if (minDistance.distance < 0.4) {
+ if (minDistance.distance < 0.45) {
const bestMatch = document.getElementById("best-match");
const distance = document.createElement("div"),
facePhoto = createFace(minDistance.faceId, minDistance.photoId);