Upload 3 files

app.py

@@ -1126,6 +1126,14 @@ def process_photos_quality_selection(job_id, upload_dir, quality_mode, similarit
 
         results['rejection_breakdown'] = dict(rejection_counts)
 
+        # Add face filtering count to breakdown (photos where target face was not detected)
+        face_filter_data = results['summary'].get('face_filtering', {})
+        total_uploaded = face_filter_data.get('total_photos', 0)
+        after_face_filter = face_filter_data.get('after_face_filter', 0)
+        face_filtered_out = total_uploaded - after_face_filter
+        if face_filtered_out > 0:
+            results['rejection_breakdown']['Face not detected'] = face_filtered_out
+
         # Sort by score
         results['selected'].sort(key=lambda x: x['score'], reverse=True)
         results['rejected'].sort(key=lambda x: x['score'], reverse=True)

photo_selector/monthly_selector.py

@@ -725,6 +725,90 @@ class MonthlyPhotoSelector:
 
         return clusters
 
+    def merge_similar_clusters(self, clusters: Dict[int, List[Dict]],
+                                embeddings: Dict[str, np.ndarray],
+                                similarity_threshold: float = 0.80) -> Dict[int, List[Dict]]:
+        """
+        Merge clusters that have photos too similar to each other.
+
+        If any photo in Cluster A is >similarity_threshold similar to any photo
+        in Cluster B, merge them into one cluster.
+
+        Args:
+            clusters: Dict mapping cluster_id to list of photos
+            embeddings: Dict mapping filename to embedding
+            similarity_threshold: Merge if similarity > this (default 0.80)
+
+        Returns:
+            Merged clusters dict
+        """
+        if len(clusters) <= 1:
+            return clusters
+
+        cluster_ids = list(clusters.keys())
+        n_clusters = len(cluster_ids)
+
+        # Build a union-find structure for merging
+        parent = {cid: cid for cid in cluster_ids}
+
+        def find(x):
+            if parent[x] != x:
+                parent[x] = find(parent[x])
+            return parent[x]
+
+        def union(x, y):
+            px, py = find(x), find(y)
+            if px != py:
+                parent[px] = py
+
+        # Check all pairs of clusters for similarity
+        merge_count = 0
+        for i in range(n_clusters):
+            for j in range(i + 1, n_clusters):
+                cid_a = cluster_ids[i]
+                cid_b = cluster_ids[j]
+
+                # Skip if already in same merged group
+                if find(cid_a) == find(cid_b):
+                    continue
+
+                # Check if any photo in cluster A is too similar to any in cluster B
+                should_merge = False
+                for photo_a in clusters[cid_a]:
+                    emb_a = embeddings.get(photo_a['filename'])
+                    if emb_a is None:
+                        continue
+                    for photo_b in clusters[cid_b]:
+                        emb_b = embeddings.get(photo_b['filename'])
+                        if emb_b is None:
+                            continue
+                        sim = self.compute_similarity(emb_a, emb_b)
+                        if sim > similarity_threshold:
+                            should_merge = True
+                            break
+                    if should_merge:
+                        break
+
+                if should_merge:
+                    union(cid_a, cid_b)
+                    merge_count += 1
+
+        if merge_count == 0:
+            print(f"  No clusters needed merging (threshold: {similarity_threshold:.0%})")
+            return clusters
+
+        # Build merged clusters
+        merged = {}
+        for cid in cluster_ids:
+            root = find(cid)
+            if root not in merged:
+                merged[root] = []
+            merged[root].extend(clusters[cid])
+
+        print(f"  Merged {merge_count} cluster pairs: {n_clusters} -> {len(merged)} clusters")
+
+        return merged
+
     def select_hybrid_hdbscan(self, photos: List[Dict],
                               embeddings: Dict[str, np.ndarray],
                               target: int,
@@ -764,7 +848,12 @@ class MonthlyPhotoSelector:
 
         # Step 1: Cluster photos with HDBSCAN (for cluster_id info in results)
         clusters = self.cluster_photos_hdbscan(photos, embeddings)
-        print(f"  Found {len(clusters)} clusters")
+
+        # Step 1.5: Merge clusters that have photos too similar to each other
+        # This prevents "too similar" rejections during selection by ensuring
+        # similar photos are in the same cluster from the start
+        clusters = self.merge_similar_clusters(clusters, embeddings, similarity_threshold=0.80)
+        print(f"  Final cluster count: {len(clusters)}")
 
         # Step 2: Flatten all photos with cluster_id and sort by score
         all_photos = []

templates/step4_results.html

@@ -442,6 +442,13 @@
         .month-table tfoot tr {
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;
+            cursor: pointer;
+            transition: opacity 0.2s, transform 0.2s;
+        }
+
+        .month-table tfoot tr:hover {
+            opacity: 0.9;
+            transform: scale(1.01);
         }
 
         .month-table tfoot td {
@@ -775,6 +782,38 @@
             color: #991b1b;
         }
 
+        .current-photo-preview {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: #f8fafc;
+            border-radius: 12px;
+            border: 2px solid #e2e8f0;
+        }
+
+        .current-photo-preview img {
+            width: 120px;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 10px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .current-photo-preview .photo-label {
+            font-size: 13px;
+            color: #64748b;
+            margin-bottom: 4px;
+        }
+
+        .current-photo-preview .photo-name {
+            font-size: 16px;
+            font-weight: 600;
+            color: #1e293b;
+            word-break: break-all;
+        }
+
         .score-breakdown {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
@@ -844,7 +883,7 @@
 
         .cluster-photo {
             position: relative;
-            width: 160px;
+            width: 200px;
             border-radius: 12px;
             overflow: hidden;
             cursor: pointer;
@@ -856,20 +895,19 @@
 
         .cluster-photo-img {
             width: 100%;
-            height: 160px;
+            height: 200px;
             position: relative;
             overflow: hidden;
         }
 
         .cluster-photo-filename {
-            padding: 6px 8px;
-            font-size: 11px;
-            color: #555;
+            padding: 8px 10px;
+            font-size: 12px;
+            color: #333;
             text-align: center;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
+            word-break: break-all;
             background: #f8f8f8;
+            font-weight: 500;
         }
 
         .cluster-photo:hover {
@@ -1475,6 +1513,15 @@
                     <div class="modal-reason" id="modal-reason"></div>
                 </div>
 
+                <!-- Current photo preview -->
+                <div class="current-photo-preview" id="current-photo-preview">
+                    <img id="current-photo-img" src="" alt="Current photo">
+                    <div>
+                        <div class="photo-label">Photo Selected</div>
+                        <div class="photo-name" id="current-photo-name"></div>
+                    </div>
+                </div>
+
                 <div class="score-breakdown" id="modal-scores"></div>
                 <div class="embedding-preview" id="modal-embedding"></div>
             </div>
@@ -1618,9 +1665,22 @@
                 <td></td>
                 <td class="selected-count">${totalSelected}</td>
             `;
+            footRow.style.cursor = 'pointer';
+            footRow.onclick = () => selectTotalRow();
             tfoot.appendChild(footRow);
         }
 
+        function selectTotalRow() {
+            const tbody = document.getElementById('month-table-body');
+
+            // Remove active class from all month rows
+            tbody.querySelectorAll('tr').forEach(row => row.classList.remove('active'));
+
+            // Reset to show all clusters
+            activeMonth = null;
+            filterClustersByMonth(null);
+        }
+
         function toggleMonthAccordion(month) {
             const tbody = document.getElementById('month-table-body');
 
@@ -1754,19 +1814,32 @@
             container.innerHTML = '';
 
             const breakdown = results.rejection_breakdown || {};
-            const total = results.rejected?.length || 1;
 
-            // Sort by count
+            // Calculate total from all breakdown counts (includes face filtering)
+            const total = Object.values(breakdown).reduce((sum, count) => sum + count, 0) || 1;
+
+            // Sort by count (highest first)
             const sorted = Object.entries(breakdown).sort((a, b) => b[1] - a[1]);
 
+            // Color mapping for different rejection reasons
+            const colorMap = {
+                'Face not detected': '#f97316',  // Orange - face filtering
+                'Same event': '#667eea',         // Purple - same as theme
+                'Same cluster': '#8b5cf6',       // Violet
+                'Too similar': '#6366f1',        // Indigo
+                'Target reached': '#a855f7',     // Purple
+                'Other': '#94a3b8'               // Gray
+            };
+
             for (const [reason, count] of sorted) {
                 const percentage = Math.round((count / total) * 100);
+                const barColor = colorMap[reason] || '#667eea';
                 const bar = document.createElement('div');
                 bar.className = 'rejection-bar';
                 bar.innerHTML = `
                     <div class="label">${reason}</div>
                     <div class="bar">
-                        <div class="fill" style="width: ${percentage}%"></div>
+                        <div class="fill" style="width: ${percentage}%; background: ${barColor};"></div>
                     </div>
                     <div class="count">${count}</div>
                 `;
@@ -1936,33 +2009,23 @@
             const selectedPhotos = cluster.selected || [];
             const rejectedPhotos = cluster.rejected || [];
 
-            // Selected photos section
-            if (selectedPhotos.length > 0) {
-                html += `<div class="cluster-section-label selected-label">✓ Selected (${selectedPhotos.length})</div>`;
-                html += '<div class="cluster-photos-grid">';
-                const sortedSelected = [...selectedPhotos].sort((a, b) => (b.score || 0) - (a.score || 0));
-                for (const photo of sortedSelected) {
-                    html += createClusterPhotoItem(photo, true);
-                }
-                html += '</div>';
-            }
+            // Combine all photos: selected first, then rejected
+            const allPhotos = [
+                ...selectedPhotos.map(p => ({ ...p, _isSelected: true })),
+                ...rejectedPhotos.map(p => ({ ...p, _isSelected: false }))
+            ];
 
-            // Rejected photos section
-            if (rejectedPhotos.length > 0) {
-                html += `<div class="cluster-rejected-section">`;
-                html += `<div class="cluster-section-label rejected-label">✗ Not Selected (${rejectedPhotos.length})</div>`;
-                html += '<div class="cluster-photos-grid">';
-                const sortedRejected = [...rejectedPhotos].sort((a, b) => (b.score || 0) - (a.score || 0));
-                for (const photo of sortedRejected) {
-                    html += createClusterPhotoItem(photo, false);
-                }
-                html += '</div></div>';
+            // If no photos at all
+            if (allPhotos.length === 0) {
+                return '<div style="padding: 20px; color: #888; text-align: center;">No photos in this cluster</div>';
             }
 
-            // If no photos at all
-            if (selectedPhotos.length === 0 && rejectedPhotos.length === 0) {
-                html = '<div style="padding: 20px; color: #888; text-align: center;">No photos in this cluster</div>';
+            // Render all photos in one grid (selected first, then rejected)
+            html += '<div class="cluster-photos-grid">';
+            for (const photo of allPhotos) {
+                html += createClusterPhotoItem(photo, photo._isSelected);
             }
+            html += '</div>';
 
             return html;
         }
@@ -2187,6 +2250,11 @@
         function openModal(photo, isSelected) {
             document.getElementById('modal-filename').textContent = photo.filename;
 
+            // Set current photo preview
+            const photoThumb = getPhotoThumbnail(photo);
+            document.getElementById('current-photo-img').src = `/thumbnail/${jobId}/${photoThumb}`;
+            document.getElementById('current-photo-name').textContent = photo.filename;
+
             const reasonDiv = document.getElementById('modal-reason');
             if (isSelected) {
                 reasonDiv.className = 'modal-reason selected';
@@ -2326,7 +2394,6 @@
             for (const p of clusterPhotos) {
                 const scorePercent = p.score ? (p.score * 100).toFixed(0) : '0';
                 const pThumb = getPhotoThumbnail(p);
-                const displayName = p.filename.length > 18 ? p.filename.substring(0, 15) + '...' : p.filename;
 
                 const div = document.createElement('div');
                 div.className = `cluster-photo ${p.isSelected ? 'selected' : 'rejected'}`;
@@ -2338,7 +2405,7 @@
                         <div class="cluster-photo-score">${scorePercent}%</div>
                         <div class="cluster-photo-badge">${p.isSelected ? '✓' : '✗'}</div>
                     </div>
-                    <div class="cluster-photo-filename" title="${p.filename}">${displayName}</div>
+                    <div class="cluster-photo-filename">${p.filename}</div>
                 `;
 
                 clusterPhotosDiv.appendChild(div);