Proof of concept: Suggest similar person to rename them

appinfo/routes.php

@@ -7,6 +7,12 @@
 		'url'  => '/clusters',
 		'verb' => 'GET'
 	],
+	// Get a similar clusters by Id.
+	[
+		'name' => 'person#findSimilar',
+		'url'  => '/clusters/similar/{id}',
+		'verb' => 'GET'
+	],
 	// Get all clusters filtered by Name.
 	[
 		'name' => 'person#findByName',

css/facerecognition.css

@@ -39,14 +39,15 @@
  * Rename dialog
  */
 
-#fr-dialog-content-input {
+#fr-rename-dialog-content-input {
     width: 80%;
     margin: 6px;
 }
 
 .face-preview-dialog {
     background-color: rgba(210, 210, 210, .75);
     border-radius: 25px;
+    margin: 2px;
     height: 50px;
     width: 50px;
 }

css/files-tabview.css

@@ -29,7 +29,7 @@
 /*
  * Rename dialog
  */
-#fr-dialog-content-input {
+#fr-rename-dialog-content-input {
     width: 80%;
     margin: 6px;
 }

js/admin.js

@@ -106,7 +106,6 @@ $(document).ready(function() {
         });
     });
 
-
     /*
      * Sensitivity
      */
@@ -161,6 +160,60 @@ $(document).ready(function() {
         });
     });
 
+    /*
+     * Deviation
+     */
+    function getDeviation() {
+        $.ajax({
+            type: 'GET',
+            url: OC.generateUrl('apps/facerecognition/getappvalue'),
+            data: {
+                'type': 'deviation',
+            },
+            success: function (data) {
+                if (data.status === state.OK) {
+                    var deviation = parseFloat(data.value);
+                    $('#deviation-range').val(deviation);
+                    $('#deviation-value').html(deviation);
+                }
+            }
+        });
+    }
+
+    $('#deviation-range').on('input', function() {
+        $('#deviation-value').html(this.value);
+        $('#restore-deviation').show();
+        $('#save-deviation').show();
+    });
+
+    $('#restore-deviation').on('click', function(event) {
+        event.preventDefault();
+        getDeviation();
+
+        $('#restore-deviation').hide();
+        $('#save-deviation').hide();
+    });
+
+    $('#save-deviation').on('click', function(event) {
+        event.preventDefault();
+        var deviation = $('#deviation-range').val().toString();
+        $.ajax({
+            type: 'POST',
+            url: OC.generateUrl('apps/facerecognition/setappvalue'),
+            data: {
+                'type': 'deviation',
+                'value': deviation
+            },
+            success: function (data) {
+                if (data.status === state.SUCCESS) {
+                    OC.Notification.showTemporary(t('facerecognition', 'The changes were saved.'));
+                    $('#restore-deviation').hide();
+                    $('#save-deviation').hide();
+                }
+            }
+        });
+    });
+
     /*
      * Confidence
      */
@@ -263,6 +316,7 @@ $(document).ready(function() {
      */
     getImageArea();
     getSensitivity();
+    getDeviation();
     getMinConfidence();
     getNotGrouped();
 

js/fr-dialogs.js

@@ -26,7 +26,7 @@ const FrDialogs = {
 
 	rename: function (name, thumbUrl, callback) {
 		return $.when(this._getMessageTemplate()).then(function ($tmpl) {
-			var dialogName = 'fr-dialog-content';
+			var dialogName = 'fr-rename-dialog-content';
 			var dialogId = '#' + dialogName;
 			var $dlg = $tmpl.octemplate({
 				dialog_name: dialogName,
@@ -87,6 +87,66 @@ const FrDialogs = {
 			input.select();
 		});
 	},
+	suggestPersonName: function (name, faces, callback) {
+		return $.when(this._getMessageTemplate()).then(function ($tmpl) {
+			var dialogName = 'fr-suggest-dialog-content';
+			var dialogId = '#' + dialogName;
+			var $dlg = $tmpl.octemplate({
+				dialog_name: dialogName,
+				title: t('facerecognition', 'Suggestions'),
+				message: t('facerecognition', 'Is it {personName}? Or a different person?', {personName: name}),
+				type: 'none'
+			});
+
+			var div = $('<div/>').attr('style', 'display:flex; align-items: center');
+			for (var face of faces) {
+				var thumb = $('<img class="face-preview-dialog" src="' + face['thumb-url'] + '" width="50" height="50"/>');
+				div.append(thumb);
+			}
+			$dlg.append(div);
+
+			$('body').append($dlg);
+
+			// wrap callback in _.once():
+			// only call callback once and not twice (button handler and close
+			// event) but call it for the close event, if ESC or the x is hit
+			if (callback !== undefined) {
+				callback = _.once(callback);
+			}
+
+			var buttonlist = [{
+				text: t('facerecognition', 'I don\'t know'),
+				click: function () {
+					if (callback !== undefined) {
+						$(dialogId).ocdialog('close');
+					}
+					callback(false, false);
+				},
+				defaultButton: false
+			},{
+				text: t('facerecognition', 'Yes'),
+				click: function () {
+					if (callback !== undefined) {
+						$(dialogId).ocdialog('close');
+					}
+					callback(true, false);
+				},
+				defaultButton: true
+			}];
+
+			$(dialogId).ocdialog({
+				closeOnEscape: true,
+				modal: true,
+				buttons: buttonlist,
+				close: function () {
+					// callback is already fired if Yes/No is clicked directly
+					if (callback !== undefined) {
+						callback(false, true);
+					}
+				}
+			});
+		});
+	},
 	_getMessageTemplate: function () {
 		var defer = $.Deferred();
 		if (!this.$messageTemplate) {

js/personal.js

@@ -124,8 +124,9 @@ Persons.prototype = {
 /*
  * View.
  */
-var View = function (persons) {
+var View = function (persons, similar) {
     this._persons = persons;
+    this._similar = similar;
 };
 
 View.prototype = {
@@ -156,6 +157,63 @@ View.prototype = {
             }
         });
     },
+    renamePerson: function (personId, personName, faceUrl) {
+        var self = this;
+        FrDialogs.rename(
+            personName,
+            faceUrl,
+            function(result, name) {
+                if (result === true && name) {
+                    self._persons.renameCluster (personId, name).done(function() {
+                        self._persons.unsetActive();
+                        self.renderContent();
+                        self._similar.loadSimilar(personId, name).done(function() {
+                            if (self._similar.isEnabled()) {
+                                if (self._similar.hasSuggestion()) {
+                                    self.suggestPerson(self._similar.getSuggestion(), name);
+                                } else {
+                                    OC.Notification.showTemporary(t('facerecognition', 'There are no more suggestions from similar persons'));
+                                }
+                            }
+                        });
+                    }).fail(function () {
+                        OC.Notification.showTemporary(t('facerecognition', 'There was an error renaming this person'));
+                    });
+                }
+            }
+        );
+    },
+    suggestPerson: function (suggestion, personName) {
+        var self = this;
+        FrDialogs.suggestPersonName(
+            personName,
+            this._persons.getById(suggestion.id).faces,
+            function(accepted, close) {
+                if (accepted === true) {
+                    self._persons.renameCluster (suggestion.id, personName).done(function() {
+                        self._persons.unsetActive();
+                        self.renderContent();
+                        self._similar.loadSimilar(suggestion.id, personName).done(function() {
+                            if (self._similar.hasSuggestion()) {
+                                self.suggestPerson(self._similar.getSuggestion(), personName);
+                            } else {
+                                OC.Notification.showTemporary(t('facerecognition', 'There are no more suggestions from similar persons'));
+                            }
+                        });
+                    }).fail(function () {
+                        OC.Notification.showTemporary(t('facerecognition', 'There was an error renaming this person'));
+                    });
+                } else if (close === false) {
+                    self._similar.rejectSuggestion(suggestion);
+                    if (self._similar.hasSuggestion()) {
+                        self.suggestPerson(self._similar.getSuggestion(), personName);
+                    } else {
+                        OC.Notification.showTemporary(t('facerecognition', 'There are no more suggestions from similar persons'));
+                    }
+                }
+            }
+        );
+    },
     renderContent: function () {
         this._persons.sortBySize();
         var context = {
@@ -224,20 +282,7 @@ View.prototype = {
         $('#facerecognition .icon-rename').click(function () {
             var id = $(this).parent().data('id');
             var person = self._persons.getById(id);
-            FrDialogs.rename(
-                person.name,
-                person.faces[0]['thumb-url'],
-                function(result, value) {
-                    if (result === true && value) {
-                        self._persons.renameCluster (id, value).done(function () {
-                            self._persons.unsetActive();
-                            self.renderContent();
-                        }).fail(function () {
-                            OC.Notification.showTemporary(t('facerecognition', 'There was an error renaming this person'));
-                        });
-                    }
-                }
-            );
+            self.renamePerson(id, person.name, person.faces[0]['thumb-url']);
         });
 
         $('#facerecognition #show-more-clusters').click(function () {
@@ -260,8 +305,9 @@ View.prototype = {
  * Main app.
  */
 var persons = new Persons(OC.generateUrl('/apps/facerecognition'));
+var similar = new Similar(OC.generateUrl('/apps/facerecognition'));
 
-var view = new View(persons);
+var view = new View(persons, similar);
 
 view.renderContent();
 

js/similar.js

@@ -0,0 +1,56 @@
+var Similar = function (baseUrl) {
+	this._baseUrl = baseUrl;
+	this._enabled = false;
+	this._similarClusters = [];
+	this._similarRejected = [];
+	this._similarName = undefined;
+};
+
+Similar.prototype = {
+	isEnabled: function () {
+		return this._enabled;
+	},
+	loadSimilar: function (clusterId, clusterName) {
+		if (this._similarName != clusterName) {
+			this.resetSuggestions();
+		}
+		var self = this;
+		var deferred = $.Deferred();
+		$.get(this._baseUrl+'/clusters/similar/'+clusterId).done(function (response) {
+			self._enabled = response.enabled;
+			if (!self._enabled) {
+				self.resetSuggestions();
+			} else {
+				self.concatNewClusters(response.suggestions);
+				self._similarName = clusterName;
+			}
+			deferred.resolve();
+		}).fail(function () {
+			deferred.reject();
+		});
+		return deferred.promise();
+	},
+	hasSuggestion: function () {
+		return (this._similarClusters.length > 0);
+	},
+	getSuggestion: function () {
+		return this._similarClusters.shift();
+	},
+	rejectSuggestion: function (suggestion) {
+		return this._similarRejected.push(suggestion);
+	},
+	concatNewClusters: function (newClusters) {
+		var self = this;
+		newClusters.forEach(function (newCluster) {
+			if ((self._similarClusters.find(function (oldCluster) { return newCluster.id === oldCluster.id;}) === undefined) &&
+			    (self._similarRejected.find(function (rejCluster) { return newCluster.id === rejCluster.id;}) === undefined)) {
+				self._similarClusters.push(newCluster);
+			}
+		});
+	},
+	resetSuggestions: function () {
+		this._similarClusters = [];
+		this._similarRejected = [];
+		this._similarName = undefined;
+	},
+};