Add user feedback mechanism for similar image search results

isic/core/admin.py

@@ -4,7 +4,15 @@
 from django.utils.html import format_html
 from resonant_utils.admin import ReadonlyTabularInline
 
-from isic.core.models import Collection, Doi, GirderDataset, GirderImage, Image, ImageAlias
+from isic.core.models import (
+    Collection,
+    Doi,
+    GirderDataset,
+    GirderImage,
+    Image,
+    ImageAlias,
+    SimilarImageFeedback,
+)
 from isic.core.models.doi import DoiRelatedIdentifier, DraftDoi, DraftDoiRelatedIdentifier
 from isic.core.models.segmentation import Segmentation, SegmentationReview
 from isic.core.models.supplemental_file import DraftSupplementalFile, SupplementalFile
@@ -261,3 +269,30 @@ class DraftDoiAdmin(BaseDoiAdmin):
         "is_publishing",
     ]
     readonly_fields = ["is_publishing"]
+
+
+@admin.register(SimilarImageFeedback)
+class SimilarImageFeedbackAdmin(StaffReadonlyAdmin):
+    list_display = ["id", "created", "user", "image_link", "similar_image_link", "feedback"]
+    list_filter = ["feedback", "created"]
+    search_fields = ["user__username", "image__isic_id", "similar_image__isic_id"]
+    date_hierarchy = "created"
+    ordering = ["-created"]
+
+    def image_link(self, obj):
+        return format_html(
+            '<a href="/images/{}">{}</a>',
+            obj.image.isic_id,
+            obj.image.isic_id,
+        )
+
+    image_link.short_description = "Source Image"
+
+    def similar_image_link(self, obj):
+        return format_html(
+            '<a href="/images/{}">{}</a>',
+            obj.similar_image.isic_id,
+            obj.similar_image.isic_id,
+        )
+
+    similar_image_link.short_description = "Similar Image"

isic/core/api/image.py

@@ -11,7 +11,7 @@
 from pyparsing.exceptions import ParseException
 from sentry_sdk import set_tag
 
-from isic.core.models import Image
+from isic.core.models import Image, SimilarImageFeedback
 from isic.core.pagination import CursorPagination, qs_with_hardcoded_count
 from isic.core.permissions import get_visible_objects
 from isic.core.search import facets, get_elasticsearch_client
@@ -189,3 +189,44 @@ def get_facets(request: HttpRequest, search: SearchQueryIn = Query(...)):
 def retrieve_image(request: HttpRequest, isic_id: str):
     qs = get_visible_objects(request.user, "core.view_image", default_qs)
     return get_object_or_404(qs, isic_id=isic_id)
+
+
+class SimilarImageFeedbackIn(Schema):
+    similar_image_id: str
+    feedback: str
+
+
+@router.post(
+    "/{isic_id}/similar-feedback/",
+    response={200: dict, 400: dict, 401: dict},
+    summary="Submit feedback for a similar image recommendation.",
+    include_in_schema=True,
+)
+def submit_similar_image_feedback(request: HttpRequest, isic_id: str, data: SimilarImageFeedbackIn):
+    if not request.user.is_authenticated:
+        return 401, {"message": "Authentication required"}
+
+    # Validate feedback value
+    if data.feedback not in [SimilarImageFeedback.THUMBS_UP, SimilarImageFeedback.THUMBS_DOWN]:
+        return 400, {"message": "Invalid feedback value"}
+
+    # Get the source image
+    qs = get_visible_objects(request.user, "core.view_image", default_qs)
+    source_image = get_object_or_404(qs, isic_id=isic_id)
+
+    # Get the similar image
+    similar_image = get_object_or_404(qs, isic_id=data.similar_image_id)
+
+    # Create or update feedback
+    feedback, created = SimilarImageFeedback.objects.update_or_create(
+        image=source_image,
+        similar_image=similar_image,
+        user=request.user,
+        defaults={"feedback": data.feedback},
+    )
+
+    return 200, {
+        "message": "Feedback submitted successfully",
+        "created": created,
+        "feedback": feedback.feedback,
+    }

isic/core/migrations/0036_similarimagefeedback.py

@@ -0,0 +1,81 @@
+# Generated manually for similar image feedback feature
+
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import django_extensions.db.fields
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("core", "0035_image_image_embedding_ivfflat_idx"),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="SimilarImageFeedback",
+            fields=[
+                (
+                    "id",
+                    models.BigAutoField(
+                        auto_created=True, primary_key=True, serialize=False, verbose_name="ID"
+                    ),
+                ),
+                (
+                    "created",
+                    django_extensions.db.fields.CreationDateTimeField(
+                        auto_now_add=True, verbose_name="created"
+                    ),
+                ),
+                (
+                    "modified",
+                    django_extensions.db.fields.ModificationDateTimeField(
+                        auto_now=True, verbose_name="modified"
+                    ),
+                ),
+                (
+                    "feedback",
+                    models.CharField(
+                        choices=[("up", "Thumbs Up"), ("down", "Thumbs Down")], max_length=10
+                    ),
+                ),
+                (
+                    "image",
+                    models.ForeignKey(
+                        help_text="The source image being viewed",
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="similarity_feedback_source",
+                        to="core.image",
+                    ),
+                ),
+                (
+                    "similar_image",
+                    models.ForeignKey(
+                        help_text="The similar image being rated",
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="similarity_feedback_target",
+                        to="core.image",
+                    ),
+                ),
+                (
+                    "user",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL
+                    ),
+                ),
+            ],
+            options={
+                "verbose_name": "Similar Image Feedback",
+                "verbose_name_plural": "Similar Image Feedback",
+                "get_latest_by": "modified",
+                "abstract": False,
+            },
+        ),
+        migrations.AddConstraint(
+            model_name="similarimagefeedback",
+            constraint=models.UniqueConstraint(
+                fields=("image", "similar_image", "user"), name="similar_image_feedback_unique"
+            ),
+        ),
+    ]

isic/core/models/__init__.py

@@ -7,7 +7,7 @@
 from .collection_count import CollectionCount
 from .doi import Doi
 from .girder_image import GirderDataset, GirderImage
-from .image import Image
+from .image import Image, SimilarImageFeedback
 from .image_alias import ImageAlias
 from .isic_id import IsicId
 from .segmentation import Segmentation, SegmentationReview
@@ -27,6 +27,7 @@
     "IsicOAuthApplication",
     "Segmentation",
     "SegmentationReview",
+    "SimilarImageFeedback",
     "SupplementalFile",
 ]
 

isic/core/models/image.py

@@ -260,6 +260,53 @@ class Meta(TimeStampedModel.Meta):
     grantee = models.ForeignKey(User, on_delete=models.CASCADE)
 
 
+class SimilarImageFeedback(TimeStampedModel):
+    """
+    Feedback for similar image search results.
+
+    Allows authenticated users to provide thumbs up/down feedback on similar image
+    recommendations for auditing purposes.
+    """
+
+    class Meta(TimeStampedModel.Meta):
+        constraints = [
+            models.UniqueConstraint(
+                name="similar_image_feedback_unique",
+                fields=["image", "similar_image", "user"],
+            ),
+        ]
+        verbose_name = "Similar Image Feedback"
+        verbose_name_plural = "Similar Image Feedback"
+
+    THUMBS_UP = "up"
+    THUMBS_DOWN = "down"
+    FEEDBACK_CHOICES = [
+        (THUMBS_UP, "Thumbs Up"),
+        (THUMBS_DOWN, "Thumbs Down"),
+    ]
+
+    image = models.ForeignKey(
+        Image,
+        on_delete=models.CASCADE,
+        related_name="similarity_feedback_source",
+        help_text="The source image being viewed",
+    )
+    similar_image = models.ForeignKey(
+        Image,
+        on_delete=models.CASCADE,
+        related_name="similarity_feedback_target",
+        help_text="The similar image being rated",
+    )
+    user = models.ForeignKey(User, on_delete=models.CASCADE)
+    feedback = models.CharField(max_length=10, choices=FEEDBACK_CHOICES)
+
+    def __str__(self):
+        return (
+            f"{self.user.username}: {self.image.isic_id} -> "
+            f"{self.similar_image.isic_id} ({self.feedback})"
+        )
+
+
 class ImagePermissions:
     model = Image
     perms = ["view_image", "view_full_metadata"]

isic/core/templates/core/image_detail/base.html

@@ -75,7 +75,7 @@
           {% include 'core/image_detail/studies_tab.html' %}
 
           {% if 'similar_images' in sections %}
-            {% include 'core/image_detail/images_tab.html' with images=similar_images section_name='similar_images' lazy=1 %}
+            {% include 'core/image_detail/similar_images_tab.html' with source_image=image similar_images_count=similar_images.count %}
           {% endif %}
 
           {% if 'patient_images' in sections %}

isic/core/templates/core/image_detail/similar_images_tab.html

@@ -0,0 +1,55 @@
+<div x-show="selectedTab == 'similar_images'">
+  <div class="bg-white shadow overflow-hidden sm:rounded-md">
+    <div class="mb-4" x-data="thumbnailGrid();">
+      <div class="hidden pb-3 sm:flex sm:flex-row sm:justify-end">
+        <a class="px-1" href="#" @click="decrease();">fewer columns</a> |
+        <a class="px-1" href="#" @click="increase();">more columns</a>
+      </div>
+      <div class="grid gap-4 grid-cols-2" :class="gridClassNames[numCols]">
+        {% for image in similar_images|slice:MAX_RELATED_SHOW_FIRST_N %}
+          {% include 'core/partials/similar_image_with_feedback.html' with source_image_id=source_image.isic_id %}
+        {% endfor %}
+      </div>
+
+      {% if similar_images_count and similar_images_count > MAX_RELATED_SHOW_FIRST_N %}
+        <div>Showing first {{ MAX_RELATED_SHOW_FIRST_N }} images.</div>
+      {% endif %}
+    </div>
+
+    {% include 'ingest/partials/thumbnail_grid_js.html' %}
+  </div>
+</div>
+
+<script>
+  function similarImageFeedback(sourceImageId, similarImageId) {
+    return {
+      feedback: null,
+      async submitFeedback(feedbackType) {
+        const previousFeedback = this.feedback;
+        this.feedback = feedbackType;
+
+        try {
+          const response = await fetch(`/api/v2/images/${sourceImageId}/similar-feedback/`, {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+              'X-CSRFToken': '{{ csrf_token }}'
+            },
+            body: JSON.stringify({
+              similar_image_id: similarImageId,
+              feedback: feedbackType
+            })
+          });
+
+          if (!response.ok) {
+            throw new Error('Failed to submit feedback');
+          }
+        } catch (error) {
+          console.error('Error submitting feedback:', error);
+          this.feedback = previousFeedback;
+          alert('Failed to submit feedback. Please try again.');
+        }
+      }
+    };
+  }
+</script>

isic/core/templates/core/partials/similar_image_with_feedback.html

@@ -0,0 +1,38 @@
+{% load accession %}
+
+<div>
+  <div x-data="{ open: false, hovered: false }" class="pb-4">
+    {% block thumb %}
+      {% include 'core/partials/image_thumb.html' %}
+    {% endblock %}
+  </div>
+
+  {% block below_thumb %}
+    <div class="flex justify-between items-center">
+      <div class="flex">
+        <a href="{{image.get_absolute_url}}">{{image.isic_id}}</a>
+
+        <a href="{{ image.blob.url }}">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+          </svg>
+        </a>
+      </div>
+
+      {% if user.is_authenticated %}
+        <div class="flex gap-2" x-data="similarImageFeedback('{{ source_image_id }}', '{{ image.isic_id }}')">
+          <button @click="submitFeedback('up')" :class="{'text-green-600': feedback === 'up', 'text-gray-400 hover:text-green-600': feedback !== 'up'}" class="transition-colors" title="Thumbs up">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z" />
+            </svg>
+          </button>
+          <button @click="submitFeedback('down')" :class="{'text-red-600': feedback === 'down', 'text-gray-400 hover:text-red-600': feedback !== 'down'}" class="transition-colors" title="Thumbs down">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z" />
+            </svg>
+          </button>
+        </div>
+      {% endif %}
+    </div>
+  {% endblock %}
+</div>