Feat: recognize face photo picker

src/components/ContactDetails/ContactDetailsAvatar.vue

@@ -30,6 +30,12 @@
 			:url="photoUrl"
 			class="contact-header-avatar__photo" />
 
+		<RecognizeFacePicker
+			v-if="showFacePicker"
+			:contact="contact"
+			@pick="onFacePicked"
+			@close="showFacePicker = false" />
+
 		<NcModal v-if="cropperSrc" size="small" @close="cancel">
 			<div class="avatar__container">
 				<h2>{{ t('contacts', 'Crop contact photo') }}</h2>
@@ -75,6 +81,25 @@
 				</template>
 				{{ t('contacts', 'Choose from Files') }}
 			</ActionButton>
+			<ActionButton
+				v-if="isRecognizeAvailable"
+				:close-after-click="true"
+				@click="openFacePicker">
+				<template #icon>
+					<IconFaceRecognition :size="20" />
+				</template>
+				{{ t('contacts', 'Choose from recognized faces') }}
+			</ActionButton>
+			<ActionButton
+				v-for="person in linkedPeople"
+				:key="person.id"
+				:close-after-click="true"
+				@click="unlinkPerson(person)">
+				<template #icon>
+					<IconLinkOff :size="20" />
+				</template>
+				{{ unlinkLabel(person) }}
+			</ActionButton>
 			<ActionButton
 				v-for="network in supportedSocial"
 				:key="network"
@@ -127,12 +152,16 @@ import {
 } from '@nextcloud/vue'
 import VueCropper from 'vue-cropperjs'
 import IconCloudDownload from 'vue-material-design-icons/CloudDownloadOutline.vue'
+import IconFaceRecognition from 'vue-material-design-icons/FaceRecognition.vue'
 import IconFolder from 'vue-material-design-icons/FolderOutline.vue'
 import IconImage from 'vue-material-design-icons/ImageOutline.vue'
+import IconLinkOff from 'vue-material-design-icons/LinkVariantOff.vue'
 import IconDelete from 'vue-material-design-icons/TrashCanOutline.vue'
 import IconDownload from 'vue-material-design-icons/TrayArrowDown.vue'
 import IconUpload from 'vue-material-design-icons/UploadOutline.vue'
+import RecognizeFacePicker from './RecognizeFacePicker.vue'
 import logger from '../../services/logger.js'
+import { fetchContactFaces, getFacePreviewUrl, isRecognizeFaceLinkingAvailable, unlinkFace } from '../../services/recognizeFaces.js'
 
 import 'cropperjs/dist/cropper.css'
 
@@ -150,11 +179,14 @@ export default {
 		IconDownload,
 		IconDelete,
 		IconUpload,
+		IconFaceRecognition,
 		IconFolder,
 		IconImage,
+		IconLinkOff,
 		NcButton,
 		VueCropper,
 		NcModal,
+		RecognizeFacePicker,
 	},
 
 	props: {
@@ -181,6 +213,9 @@ export default {
 			photoUrl: undefined,
 			root: generateRemoteUrl(`dav/files/${getCurrentUser().uid}`),
 			cropperSrc: undefined,
+			showFacePicker: false,
+			/** The recognized people linked to this contact, when Recognize is available */
+			linkedPeople: [],
 			cropperOptions: {
 				aspectRatio: 1 / 1,
 				viewMode: 3,
@@ -196,6 +231,15 @@ export default {
 	},
 
 	computed: {
+		/**
+		 * Recognized faces can only be looked up for contacts that exist on the server
+		 *
+		 * @return {boolean}
+		 */
+		isRecognizeAvailable() {
+			return isRecognizeFaceLinkingAvailable() && this.contact.dav !== undefined
+		},
+
 		supportedSocial() {
 			const emails = this.contact.vCard.getAllProperties('email')
 			// get social networks set for the current contact
@@ -218,11 +262,13 @@ export default {
 	watch: {
 		async contact() {
 			await this.loadPhotoUrl()
+			await this.loadLinkedPeople()
 		},
 	},
 
 	async mounted() {
 		await this.loadPhotoUrl()
+		await this.loadLinkedPeople()
 	},
 
 	methods: {
@@ -548,6 +594,86 @@ export default {
 			this.loading = false
 		},
 
+		/**
+		 * Look up which recognized people are linked to the contact
+		 */
+		async loadLinkedPeople() {
+			if (!this.isRecognizeAvailable) {
+				this.linkedPeople = []
+				return
+			}
+			try {
+				const { faces } = await fetchContactFaces(this.contact.addressbook.id, this.contact.uid)
+				this.linkedPeople = faces
+			} catch (error) {
+				// The menu simply offers no unlink entries when the lookup fails
+				logger.debug('Could not load the recognized people linked to the contact', { error })
+				this.linkedPeople = []
+			}
+		},
+
+		/**
+		 * Label of the menu entry that unlinks a person; the name only matters when several people are linked
+		 *
+		 * @param {{title: string}} person a linked person
+		 * @return {string}
+		 */
+		unlinkLabel(person) {
+			if (this.linkedPeople.length === 1) {
+				return t('contacts', 'Unlink from recognized faces')
+			}
+			return t('contacts', 'Unlink {person} from recognized faces', { person: person.title || t('contacts', 'Unnamed person') })
+		},
+
+		/**
+		 * Remove the link between the contact and a recognized person
+		 *
+		 * @param {{id: number, title: string}} person the person to unlink
+		 */
+		async unlinkPerson(person) {
+			try {
+				await unlinkFace(person.id)
+				this.linkedPeople = this.linkedPeople.filter((linked) => linked.id !== person.id)
+				showSuccess(t('contacts', '{person} is no longer linked to this contact', { person: person.title || t('contacts', 'Unnamed person') }))
+			} catch (error) {
+				showError(t('contacts', 'Could not unlink the person from the contact'))
+				logger.error('Could not unlink the person from the contact', { error })
+			}
+		},
+
+		/**
+		 * Picker handlers from recognized faces
+		 */
+		openFacePicker() {
+			if (!this.loading) {
+				this.closeMenu()
+				this.showFacePicker = true
+			}
+		},
+
+		/**
+		 * Load the picked face at full size and hand it to the cropper
+		 *
+		 * @param {{id: number}} detection the picked face
+		 */
+		async onFacePicked(detection) {
+			this.showFacePicker = false
+			this.loading = true
+			// Picking a face of an unlinked person has linked them
+			await this.loadLinkedPeople()
+			try {
+				const response = await axios.get(getFacePreviewUrl(detection.id, 512), {
+					responseType: 'arraybuffer',
+				})
+				await this.processPicture(Buffer.from(response.data, 'binary'))
+			} catch (error) {
+				showError(t('contacts', 'Error while processing the picture.'))
+				logger.error(error)
+			} finally {
+				this.loading = false
+			}
+		},
+
 		closeMenu() {
 			this.opened = false
 		},