Proof of concept: Suggest similar person to rename them

appinfo/info.xml

@@ -16,7 +16,7 @@
 - **🚀 Build your own thing:** FaceRecognition app is just a basic building block. Through FaceRecognition API, you can build your advanced scenarios - automatically add tags to images, connect contacts and persons, share images from specific person… We want to hear your ideas!
 ]]>
 	</description>
-	<version>0.5.15</version>
+	<version>0.5.16</version>
 	<licence>agpl</licence>
 	<author>Matias De lellis</author>
 	<author>Branko Kokanovic</author>

appinfo/routes.php

@@ -37,6 +37,18 @@
 		'url'  => '/file',
 		'verb' => 'GET'
 	],
+	// Get proposed relations on an person.
+	[
+		'name' => 'relation#findByPerson',
+		'url'  => '/relation/{personId}',
+		'verb' => 'GET'
+	],
+	// Change an relation of an person.
+	[
+		'name' => 'relation#updateByPersons',
+		'url'  => '/relation/{personId}',
+		'verb' => 'PUT'
+	],
 	// Get folder preferences
 	[
 		'name' => 'file#getFolderOptions',

css/facerecognition.css

@@ -39,18 +39,24 @@
  * 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;
 }
 
+
+.oc-dialog-buttonrow, .threebuttons {
+    justify-content: space-between;
+}
+
 /*
  * Admin page
  */

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,73 @@ 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', 'No'),
+				click: function () {
+					if (callback !== undefined) {
+						$(dialogId).ocdialog('close');
+					}
+					callback(true, Relation.REJECTED);
+				},
+			}, {
+				text: t('facerecognition', 'I am not sure'),
+				click: function () {
+					if (callback !== undefined) {
+						$(dialogId).ocdialog('close');
+					}
+					callback(true, Relation.PROPOSED);
+				}
+			}, {
+				text: t('facerecognition', 'Yes'),
+				click: function () {
+					if (callback !== undefined) {
+						$(dialogId).ocdialog('close');
+					}
+					callback(true, Relation.ACCEPTED);
+				},
+				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, Relation.PROPOSED);
+					}
+				}
+			});
+		});
+	},
 	_getMessageTemplate: function () {
 		var defer = $.Deferred();
 		if (!this.$messageTemplate) {

js/personal.js

@@ -99,7 +99,7 @@ Persons.prototype = {
     getAll: function () {
         return this._clusters;
     },
-    renameCluster: function (clusterId, personName) {
+    updateCluster: function (clusterId, personName) {
         var self = this;
         var deferred = $.Deferred();
         var opt = { name: personName };
@@ -108,24 +108,28 @@ Persons.prototype = {
                 contentType: 'application/json',
                 data: JSON.stringify(opt)
         }).done(function (data) {
-            self._clusters.forEach(function (cluster) {
-                if (cluster.id === clusterId) {
-                    cluster.name = personName;
-                }
-            });
+            self.renameCluster(clusterId, personName);
             deferred.resolve();
         }).fail(function () {
             deferred.reject();
         });
         return deferred.promise();
+    },
+    renameCluster: function (clusterId, personName) {
+        this._clusters.forEach(function (cluster) {
+            if (cluster.id === clusterId) {
+                cluster.name = personName;
+            }
+        });
     }
 };
 
 /*
  * View.
  */
-var View = function (persons) {
+var View = function (persons, similar) {
     this._persons = persons;
+    this._similar = similar;
 };
 
 View.prototype = {
@@ -156,6 +160,71 @@ View.prototype = {
             }
         });
     },
+    renamePerson: function (personId, personName, faceUrl) {
+        var self = this;
+        FrDialogs.rename(
+            personName,
+            faceUrl,
+            function(result, name) {
+                if (result === true && name) {
+                    self._persons.updateCluster(personId, name).done(function() {
+                        self._persons.unsetActive();
+                        self.renderContent();
+                        self._similar.findProposal(personId, name).done(function() {
+                            if (self._similar.isEnabled()) {
+                                if (self._similar.hasProposal()) {
+                                    self.suggestPerson(self._similar.getProposal(), 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 (proposal, personName) {
+        var self = this;
+        FrDialogs.suggestPersonName(
+            personName,
+            this._persons.getById(proposal.id).faces,
+            function(valid, state) {
+                if (valid === true) {
+                    // It is valid must be update the proposals.
+                    self._similar.updateProposal(proposal, state).done(function() {
+                        if (state === Relation.ACCEPTED) {
+                            // Update view with new name.
+                            self._persons.renameCluster(proposal.id, personName);
+                            self._persons.unsetActive();
+                            self.renderContent();
+                            // Look for new suggestions based on accepted proposal
+                            self._similar.findProposal(proposal.id, personName).done(function() {
+                                if (self._similar.hasProposal()) {
+                                    self.suggestPerson(self._similar.getProposal(), personName);
+                                } else {
+                                    OC.Notification.showTemporary(t('facerecognition', 'There are no more suggestions from similar persons'));
+                                }
+                            });
+                        } else {
+                            // Suggest cached proposals
+                            if (self._similar.hasProposal()) {
+                                self.suggestPerson(self._similar.getProposal(), personName);
+                            } else {
+                                OC.Notification.showTemporary(t('facerecognition', 'There are no more suggestions from similar persons'));
+                            }
+                        }
+                    }).fail(function () {
+                        if (state === Relation.ACCEPTED) {
+                            OC.Notification.showTemporary(t('facerecognition', 'There was an error renaming this person'));
+                        }
+                    });
+                }
+            }
+        );
+    },
     renderContent: function () {
         this._persons.sortBySize();
         var context = {
@@ -224,20 +293,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 +316,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();