Make facedetection more noticeable #3427 (#3798)

* added face detection alerts to photos

Added alert banners to the photos page with a link to face detection page when applicable

* Add your photos to user dropdown

* Change photo page icons

changed the search button to an icon instead of text and changed the face detection icon from user to smiley :)

* Drop fullres text

---------

Co-authored-by: Dirk Doesburg <[email protected]>

website/facedetection/apps.py

@@ -1,4 +1,5 @@
 from django.apps import AppConfig
+from django.urls import reverse
 from django.utils.translation import gettext_lazy as _
 
 
@@ -7,6 +8,18 @@ class FaceDetectionConfig(AppConfig):
     name = "facedetection"
     verbose_name = _("Face detection")
 
+    def user_menu_items(self):
+        return {
+            "items": [
+                {
+                    "section": "profile",
+                    "title": "Your photos",
+                    "url": reverse("facedetection:your-photos"),
+                    "key": 2,
+                },
+            ],
+        }
+
     def ready(self):
         """Register signals when the app is ready."""
         from . import signals  # noqa: F401

website/facedetection/templates/photos/index.html

@@ -2,7 +2,7 @@
 
 {% block search_form %}
     {{ block.super }}
-    <a href="{% url 'facedetection:your-photos' %}" class="btn btn-lg btn-primary col-6 mt-2 mt-md-0 col-md-1 ms-0 ms-md-2 d-flex align-items-center justify-content-center">
-        <i class="fas fa-user me-2 me-md-0"></i><span class="d-md-none">Photos you're on</span>
+    <a href="{% url 'facedetection:your-photos' %}" class="btn btn-lg btn-primary d-flex align-items-center justify-content-center">
+        <i class="fas fa-smile me-2"></i>Face detection
     </a>
 {% endblock search_form %}

website/photos/templates/photos/index.html

@@ -12,22 +12,45 @@
 {% block content %}
     {% with keys=keywords|join:" " %}
         <div class="row mb-4">
-            <div class="col-12 col-lg-6">
-                {% trans 'Interested in a full resolution version of a photo? Send your request to <a href="mailto:[email protected]">[email protected]</a>.' %}
+            <div>
+                {% if not has_reference_faces %}
+                    <div class="col-md-12">
+                        <div class="alert alert-info">
+                            You need to upload at least one reference face in order for <a style="text-decoration: underline; color:white" href="{% url 'facedetection:reference-faces' %}">face recognition</a> to work.
+                        </div>
+                    </div>
+                {% endif %}
+                {% if has_rejected_reference_faces %}
+                    <div class="col-md-12">
+                        <div class="alert alert-info">
+                            Some of your reference faces have been rejected. <a style="text-decoration: underline; color:white" href="{% url 'facedetection:reference-faces' %}">Please delete them and upload new ones.</a>
+                        </div>
+                    </div>
+                {% elif has_processing_reference_faces %}
+                    <div class="col-md-12">
+                        {% alert "info" "Some of your reference faces have not been processed yet. Come back later." dismissible=False %}
+                    </div>
+                {% elif has_reference_faces and not has_processing_reference_faces and not photos %}
+                    <div class="col-md-12">
+                        {% alert "info" "You haven't been recognized on any photos (yet)." dismissible=False %}
+                    </div>
+                {% else %}
+                {% endif %}
             </div>
-            <div class="d-flex flex-wrap col-12 col-lg-6 mt-3 mt-lg-0 search-form form-inline d-flex align-items-center justify-content-space-between">
+            <div class="d-flex flex-wrap col-12 search-form form-inline d-flex align-items-center justify-content-space-between gap-3">
             {% block search_form %}
-                <form class="col-12 col-md-9 d-flex align-items-center justify-content-center flex-grow-1" method="get"
+                <form class="d-flex align-items-center justify-content-center flex-grow-1" method="get"
                   action="{% url 'photos:index' %}#photos-albums">
                     <div class="input-group">
-                        <input class="form-control col-12 col-md-9 flex-grow-1" style="width: available" name="keywords" type="search" value="{{ keys|default_if_none:'' }}"
+                        <input class="form-control flex-grow-1" style="width: available" name="keywords" type="search" value="{{ keys|default_if_none:'' }}"
                             placeholder="{% trans "What are you looking for?" %}" aria-label="{% trans "Search the Thalia's photo albums" %}" aria-describedby="photoalbums-search-button">
-                        <input id="photoalbums-search-button" class="btn btn-lg btn-primary col-12 mt-2 mt-md-0 col-md-3 ms-0" type="submit"
-                            value="{% trans "Search" %}"/>
+                        <button id="photoalbums-search-button" class="btn btn-lg btn-primary ms-0" type="submit">
+                            <i class="fas fa-search"></i>
+                        </button>
                     </div>
                 </form>
-                <a href="{% url 'photos:liked-photos' %}" class="btn btn-lg btn-primary col-6 mt-2 mt-md-0 col-md-1 ms-0 ms-md-2 d-flex align-items-center justify-content-center">
-                    <i class="fas fa-heart me-2 me-md-0"></i><span class="d-md-none">Liked photos</span>
+                <a href="{% url 'photos:liked-photos' %}" class="btn btn-lg btn-primary d-flex align-items-center justify-content-center">
+                    <i class="fas fa-heart me-2"></i>Liked photos
                 </a>
             {% endblock search_form %}
             </div>

website/photos/views.py

@@ -3,9 +3,11 @@
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.http import Http404
+from django.http.request import HttpRequest as HttpRequest
 from django.shortcuts import get_object_or_404, redirect
 from django.views.generic import TemplateView
 
+from facedetection.models import ReferenceFace
 from photos.models import Album, Photo
 from photos.services import (
     check_shared_album_token,
@@ -45,6 +47,24 @@ def get_context_data(self, **kwargs):
         context["keywords"] = self.keywords
         fetch_thumbnails([x.cover.file for x in context["object_list"] if x.cover])
 
+        context[
+            "has_processing_reference_faces"
+        ] = self.request.member.reference_faces.filter(
+            status=ReferenceFace.Status.PROCESSING,
+            marked_for_deletion_at__isnull=True,
+        ).exists()
+
+        context[
+            "has_rejected_reference_faces"
+        ] = self.request.member.reference_faces.filter(
+            status=ReferenceFace.Status.REJECTED,
+            marked_for_deletion_at__isnull=True,
+        ).exists()
+
+        context["has_reference_faces"] = self.request.member.reference_faces.filter(
+            marked_for_deletion_at__isnull=True
+        ).exists()
+
         return context