Upload 6 files

app.py

@@ -821,30 +821,102 @@ def process_photos_quality_selection(job_id, upload_dir, quality_mode, similarit
 
         print(f"[Job {job_id}] Target per month: {target_per_month}")
 
-        # Step 1: Generate embeddings for confirmed photos
+        # Step 1: Generate embeddings for confirmed photos (with caching)
         processing_jobs[job_id]['progress'] = 10
-        processing_jobs[job_id]['message'] = f'Analyzing photos with {model_display_name}...'
+        processing_jobs[job_id]['message'] = f'Checking embedding cache...'
 
-        print(f"[Job {job_id}] Generating {model_display_name} embeddings for {len(confirmed_photos)} photos...")
+        print(f"[Job {job_id}] Processing {len(confirmed_photos)} photos for {model_display_name} embeddings...")
 
-        embedder = Embedder()
-        embeddings = {}
+        # Import cache functions
+        from supabase_storage import (
+            compute_file_hash,
+            get_cached_embeddings_batch,
+            save_embeddings_batch,
+            is_supabase_available
+        )
 
+        # Step 1a: Compute hashes for all files
+        file_hashes = {}  # filename -> hash
+        hash_to_filename = {}  # hash -> filename (for reverse lookup)
+
+        print(f"[Job {job_id}] Computing file hashes...")
         for i, filename in enumerate(confirmed_photos):
             filepath = os.path.join(upload_dir, filename)
             if os.path.exists(filepath):
-                img = embedder.load_image(filepath)
-                if img is not None:
-                    embedding = embedder.get_embedding(img)
-                    if embedding is not None:
-                        embeddings[filename] = embedding
-                    img.close()
+                file_hash = compute_file_hash(filepath)
+                if file_hash:
+                    file_hashes[filename] = file_hash
+                    hash_to_filename[file_hash] = filename
+
+            # Update progress (10-15%)
+            if i % 100 == 0:
+                progress = 10 + int((i / len(confirmed_photos)) * 5)
+                processing_jobs[job_id]['progress'] = progress
+
+        print(f"[Job {job_id}] Computed {len(file_hashes)} hashes")
+
+        # Step 1b: Check cache for existing embeddings
+        embeddings = {}
+        cached_count = 0
+        uncached_filenames = []
+
+        if is_supabase_available() and file_hashes:
+            processing_jobs[job_id]['message'] = f'Checking embedding cache...'
+            all_hashes = list(file_hashes.values())
+
+            # Query cache in batches (Supabase has query limits)
+            cached_embeddings = {}
+            batch_size = 500
+            for i in range(0, len(all_hashes), batch_size):
+                batch_hashes = all_hashes[i:i + batch_size]
+                batch_result = get_cached_embeddings_batch(batch_hashes, embedding_model)
+                cached_embeddings.update(batch_result)
+
+            # Map cached embeddings back to filenames
+            for filename, file_hash in file_hashes.items():
+                if file_hash in cached_embeddings:
+                    embeddings[filename] = cached_embeddings[file_hash]
+                    cached_count += 1
+                else:
+                    uncached_filenames.append(filename)
+
+            print(f"[Job {job_id}] Cache hit: {cached_count}/{len(file_hashes)} embeddings")
+        else:
+            uncached_filenames = list(file_hashes.keys())
+            print(f"[Job {job_id}] Cache not available, computing all embeddings")
+
+        # Step 1c: Compute embeddings for uncached files only
+        newly_computed = {}
+        if uncached_filenames:
+            processing_jobs[job_id]['message'] = f'Analyzing {len(uncached_filenames)} photos with {model_display_name}...'
+            print(f"[Job {job_id}] Computing {model_display_name} embeddings for {len(uncached_filenames)} uncached photos...")
+
+            embedder = Embedder()
+
+            for i, filename in enumerate(uncached_filenames):
+                filepath = os.path.join(upload_dir, filename)
+                if os.path.exists(filepath):
+                    img = embedder.load_image(filepath)
+                    if img is not None:
+                        embedding = embedder.get_embedding(img)
+                        if embedding is not None:
+                            embeddings[filename] = embedding
+                            newly_computed[filename] = embedding
+                        img.close()
+
+                # Update progress (15-30%)
+                progress = 15 + int((i / len(uncached_filenames)) * 15)
+                processing_jobs[job_id]['progress'] = progress
+
+            print(f"[Job {job_id}] Computed {len(newly_computed)} new embeddings")
 
-            # Update progress (10-30%)
-            progress = 10 + int((i / len(confirmed_photos)) * 20)
-            processing_jobs[job_id]['progress'] = progress
+            # Step 1d: Save newly computed embeddings to cache
+            if newly_computed and is_supabase_available():
+                processing_jobs[job_id]['message'] = 'Saving embeddings to cache...'
+                saved = save_embeddings_batch(newly_computed, file_hashes, embedding_model)
+                print(f"[Job {job_id}] Saved {saved} embeddings to cache")
 
-        print(f"[Job {job_id}] Embeddings generated: {len(embeddings)}")
+        print(f"[Job {job_id}] Total embeddings: {len(embeddings)} (cached: {cached_count}, computed: {len(newly_computed)})")
 
         # Step 2: Initialize monthly selector
         processing_jobs[job_id]['progress'] = 35
@@ -1056,6 +1128,7 @@ def process_photos_quality_selection(job_id, upload_dir, quality_mode, similarit
                 'category': photo.get('category', 'unknown'),
                 'num_faces': int(photo.get('num_faces', 0)),
                 'cluster_id': cid,
+                'original_cluster_id': photo.get('original_cluster_id', cid),
                 'cluster_total': cluster_total,
                 'cluster_selected': cluster_selected,
                 'event_id': photo.get('event_id', -1),
@@ -1114,6 +1187,7 @@ def process_photos_quality_selection(job_id, upload_dir, quality_mode, similarit
                 'month': month,
                 'category': photo.get('category', 'unknown'),
                 'cluster_id': cid,
+                'original_cluster_id': photo.get('original_cluster_id', cid),
                 'cluster_total': cluster_total,
                 'cluster_selected': cluster_selected,
                 'event_id': photo.get('event_id', -1),

photo_selector/monthly_selector.py

@@ -809,6 +809,79 @@ class MonthlyPhotoSelector:
 
         return merged
 
+    def merge_same_event_clusters(self, clusters: Dict[int, List[Dict]]) -> Dict[int, List[Dict]]:
+        """
+        Merge clusters that share the same event_id.
+
+        If any photo in Cluster A has the same event_id as any photo in Cluster B,
+        merge them into one cluster. This ensures photos from the same event
+        appear together in the cluster view.
+
+        Note: original_cluster_id should already be saved before this function is called.
+
+        Args:
+            clusters: Dict mapping cluster_id to list of photos
+
+        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
+
+        # Build event_id -> cluster_ids mapping
+        event_to_clusters = {}
+        for cid, photos in clusters.items():
+            for photo in photos:
+                event_id = photo.get('event_id', -1)
+                if event_id != -1:
+                    if event_id not in event_to_clusters:
+                        event_to_clusters[event_id] = set()
+                    event_to_clusters[event_id].add(cid)
+
+        # Merge clusters that share the same event_id
+        merge_count = 0
+        for event_id, cluster_set in event_to_clusters.items():
+            cluster_list = list(cluster_set)
+            if len(cluster_list) > 1:
+                # Merge all clusters in this event
+                first_cid = cluster_list[0]
+                for other_cid in cluster_list[1:]:
+                    if find(first_cid) != find(other_cid):
+                        union(first_cid, other_cid)
+                        merge_count += 1
+
+        if merge_count == 0:
+            print(f"  No clusters needed event-based merging")
+            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"  Event-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,
@@ -849,11 +922,21 @@ class MonthlyPhotoSelector:
         # Step 1: Cluster photos with HDBSCAN (for cluster_id info in results)
         clusters = self.cluster_photos_hdbscan(photos, embeddings)
 
+        # Step 1.1: Save original_cluster_id BEFORE any merging
+        # This preserves the true HDBSCAN cluster assignment for display
+        for cid, cluster_photos in clusters.items():
+            for photo in cluster_photos:
+                photo['original_cluster_id'] = int(cid)
+
         # 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 1.6: Merge clusters that share the same event_id
+        # This ensures photos from the same event appear together in cluster view
+        clusters = self.merge_same_event_clusters(clusters)
+        print(f"  Final cluster count after event merge: {len(clusters)}")
 
         # Step 2: Flatten all photos with cluster_id and sort by score
         all_photos = []

supabase_storage.py

@@ -1,10 +1,14 @@
 """
 Supabase Storage Integration for Photo Selection App
 Handles persistent storage of dataset metadata (not photos) in Supabase.
+Also provides global embedding cache for CLIP/SigLIP embeddings.
 """
 
 import os
 import json
+import base64
+import hashlib
+import numpy as np
 from typing import Optional, List, Dict, Any
 
 # Supabase credentials
@@ -343,3 +347,187 @@ def check_dataset_exists_in_supabase(dataset_name: str) -> bool:
         return len(files) > 0
     except:
         return False
+
+
+# =============================================================================
+# GLOBAL EMBEDDING CACHE
+# =============================================================================
+# Stores CLIP/SigLIP embeddings in Supabase database table for reuse.
+# Table schema (create in Supabase Dashboard):
+#
+# CREATE TABLE image_embeddings (
+#     id BIGSERIAL PRIMARY KEY,
+#     image_hash TEXT NOT NULL,
+#     embedding_model TEXT NOT NULL,
+#     embedding TEXT NOT NULL,
+#     embedding_dim INTEGER NOT NULL,
+#     created_at TIMESTAMPTZ DEFAULT NOW(),
+#     UNIQUE(image_hash, embedding_model)
+# );
+# CREATE INDEX idx_image_embeddings_hash_model ON image_embeddings(image_hash, embedding_model);
+# =============================================================================
+
+EMBEDDING_TABLE = 'image_embeddings'
+
+
+def compute_file_hash(filepath: str) -> Optional[str]:
+    """
+    Compute MD5 hash of a file.
+
+    Args:
+        filepath: Path to the image file
+
+    Returns:
+        MD5 hash string or None if error
+    """
+    try:
+        md5 = hashlib.md5()
+        with open(filepath, 'rb') as f:
+            # Read in chunks for memory efficiency
+            for chunk in iter(lambda: f.read(8192), b''):
+                md5.update(chunk)
+        return md5.hexdigest()
+    except Exception as e:
+        print(f"[EmbeddingCache] Error hashing {filepath}: {e}")
+        return None
+
+
+def _embedding_to_base64(embedding: np.ndarray) -> str:
+    """Convert numpy embedding to base64 string for storage."""
+    return base64.b64encode(embedding.astype(np.float32).tobytes()).decode('utf-8')
+
+
+def _base64_to_embedding(b64_str: str, dim: int) -> np.ndarray:
+    """Convert base64 string back to numpy embedding."""
+    bytes_data = base64.b64decode(b64_str)
+    return np.frombuffer(bytes_data, dtype=np.float32).reshape(dim)
+
+
+def get_cached_embeddings_batch(
+    image_hashes: List[str],
+    embedding_model: str
+) -> Dict[str, np.ndarray]:
+    """
+    Get cached embeddings for multiple images in one query.
+
+    Args:
+        image_hashes: List of MD5 hashes to look up
+        embedding_model: Model name ('siglip' or 'clip')
+
+    Returns:
+        Dict mapping hash -> embedding for found entries
+    """
+    client = get_supabase_client()
+    if not client or not image_hashes:
+        return {}
+
+    try:
+        # Query all hashes at once
+        response = client.table(EMBEDDING_TABLE).select(
+            'image_hash, embedding, embedding_dim'
+        ).in_('image_hash', image_hashes).eq('embedding_model', embedding_model).execute()
+
+        result = {}
+        for row in response.data:
+            embedding = _base64_to_embedding(row['embedding'], row['embedding_dim'])
+            result[row['image_hash']] = embedding
+
+        print(f"[EmbeddingCache] Found {len(result)}/{len(image_hashes)} cached embeddings for {embedding_model}")
+        return result
+
+    except Exception as e:
+        print(f"[EmbeddingCache] Error fetching batch: {e}")
+        return {}
+
+
+def save_embeddings_batch(
+    embeddings: Dict[str, np.ndarray],
+    image_hashes: Dict[str, str],
+    embedding_model: str
+) -> int:
+    """
+    Save multiple embeddings to cache.
+
+    Args:
+        embeddings: Dict mapping filename -> embedding
+        image_hashes: Dict mapping filename -> hash
+        embedding_model: Model name ('siglip' or 'clip')
+
+    Returns:
+        Number of embeddings saved
+    """
+    client = get_supabase_client()
+    if not client or not embeddings:
+        return 0
+
+    try:
+        # Prepare batch insert data
+        rows = []
+        for filename, embedding in embeddings.items():
+            img_hash = image_hashes.get(filename)
+            if img_hash and embedding is not None:
+                rows.append({
+                    'image_hash': img_hash,
+                    'embedding_model': embedding_model,
+                    'embedding': _embedding_to_base64(embedding),
+                    'embedding_dim': len(embedding)
+                })
+
+        if not rows:
+            return 0
+
+        # Insert with upsert (ignore conflicts)
+        # Batch in chunks of 100 to avoid request size limits
+        saved = 0
+        chunk_size = 100
+        for i in range(0, len(rows), chunk_size):
+            chunk = rows[i:i + chunk_size]
+            try:
+                client.table(EMBEDDING_TABLE).upsert(
+                    chunk,
+                    on_conflict='image_hash,embedding_model'
+                ).execute()
+                saved += len(chunk)
+            except Exception as e:
+                print(f"[EmbeddingCache] Error saving chunk {i//chunk_size}: {e}")
+
+        print(f"[EmbeddingCache] Saved {saved} new embeddings for {embedding_model}")
+        return saved
+
+    except Exception as e:
+        print(f"[EmbeddingCache] Error saving batch: {e}")
+        return 0
+
+
+def get_embedding_cache_stats() -> Dict[str, Any]:
+    """Get statistics about the embedding cache."""
+    client = get_supabase_client()
+    if not client:
+        return {'available': False}
+
+    try:
+        # Count by model
+        response = client.table(EMBEDDING_TABLE).select(
+            'embedding_model',
+            count='exact'
+        ).execute()
+
+        # Get counts per model
+        siglip_count = client.table(EMBEDDING_TABLE).select(
+            'id', count='exact'
+        ).eq('embedding_model', 'siglip').execute()
+
+        clip_count = client.table(EMBEDDING_TABLE).select(
+            'id', count='exact'
+        ).eq('embedding_model', 'clip').execute()
+
+        return {
+            'available': True,
+            'siglip_count': siglip_count.count or 0,
+            'clip_count': clip_count.count or 0,
+            'total': (siglip_count.count or 0) + (clip_count.count or 0)
+        }
+
+    except Exception as e:
+        print(f"[EmbeddingCache] Error getting stats: {e}")
+        return {'available': False, 'error': str(e)}

templates/reupload_photos.html

@@ -453,26 +453,8 @@
 
         <!-- Upload Area -->
         <div class="upload-card">
-            <!-- Upload Method Tabs -->
-            <div class="upload-tabs">
-                <button class="upload-tab active" onclick="switchUploadMethod('browser')">Browser Upload</button>
-                <button class="upload-tab" id="drive-tab" onclick="switchUploadMethod('drive')" style="display: none;">Google Drive</button>
-            </div>
-
-            <!-- Browser Upload Area -->
-            <div class="upload-area" id="upload-area" onclick="document.getElementById('file-input').click()">
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
-                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
-                    <polyline points="17 8 12 3 7 8"/>
-                    <line x1="12" y1="3" x2="12" y2="15"/>
-                </svg>
-                <h3>Upload Your Photos</h3>
-                <p>Drag and drop photos or a .zip file here, or click to browse</p>
-                <span class="btn">Select Photos or Zip</span>
-            </div>
-
             <!-- Google Drive Input Area -->
-            <div class="drive-input-area" id="drive-input-area">
+            <div class="drive-input-area active" id="drive-input-area">
                 <svg viewBox="0 0 24 24" width="50" height="50" fill="none" stroke="#667eea" stroke-width="1.5" style="margin-bottom: 15px;">
                     <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
                 </svg>
@@ -491,11 +473,6 @@
                 </button>
             </div>
 
-            <input type="file" id="file-input" multiple accept="image/*,.heic,.heif,.zip">
-
-            <!-- File List Preview -->
-            <div class="file-list" id="file-list" style="display: none;"></div>
-
             <!-- Progress Section -->
             <div class="progress-section" id="progress-section">
                 <div class="progress-header">
@@ -526,50 +503,8 @@
 
     <script>
         const datasetName = "{{ dataset_name }}";
-        let selectedFiles = [];
-        let uploadMethod = 'browser';  // 'browser' or 'drive'
-        let driveAvailable = false;
         let driveFolderVerified = false;
 
-        // Check if Google Drive is available on page load
-        async function checkDriveAvailability() {
-            try {
-                const response = await fetch('/check_drive_status');
-                const data = await response.json();
-                driveAvailable = data.available;
-                if (driveAvailable) {
-                    document.getElementById('drive-tab').style.display = '';
-                }
-            } catch (e) {
-                console.log('Drive check failed:', e);
-            }
-        }
-        checkDriveAvailability();
-
-        // Upload method switcher
-        function switchUploadMethod(method) {
-            uploadMethod = method;
-            document.querySelectorAll('.upload-tab').forEach(tab => {
-                const tabText = tab.textContent.toLowerCase();
-                const isActive = (method === 'browser' && tabText.includes('browser')) ||
-                                 (method === 'drive' && tabText.includes('drive'));
-                tab.classList.toggle('active', isActive);
-            });
-
-            // Show/hide upload areas
-            document.getElementById('upload-area').style.display = method === 'browser' ? 'block' : 'none';
-            document.getElementById('drive-input-area').classList.toggle('active', method === 'drive');
-
-            // Reset file list when switching
-            if (method === 'drive') {
-                document.getElementById('file-list').style.display = 'none';
-                selectedFiles = [];
-                document.getElementById('btn-process').disabled = !driveFolderVerified;
-            } else {
-                document.getElementById('btn-process').disabled = selectedFiles.length === 0;
-            }
-        }
-
         // Preview Google Drive folder
         async function previewDriveFolder() {
             const driveUrl = document.getElementById('drive-folder-url').value.trim();
@@ -616,91 +551,9 @@
         document.getElementById('drive-folder-url').addEventListener('input', function() {
             driveFolderVerified = false;
             document.getElementById('drive-preview').classList.remove('show');
-            if (uploadMethod === 'drive') {
-                document.getElementById('btn-process').disabled = true;
-            }
+            document.getElementById('btn-process').disabled = true;
         });
 
-        // File input change
-        document.getElementById('file-input').addEventListener('change', function(e) {
-            handleFiles(e.target.files);
-        });
-
-        // Drag and drop
-        const uploadArea = document.getElementById('upload-area');
-
-        uploadArea.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            uploadArea.classList.add('dragover');
-        });
-
-        uploadArea.addEventListener('dragleave', () => {
-            uploadArea.classList.remove('dragover');
-        });
-
-        uploadArea.addEventListener('drop', (e) => {
-            e.preventDefault();
-            uploadArea.classList.remove('dragover');
-            handleFiles(e.dataTransfer.files);
-        });
-
-        let isZipUpload = false;
-
-        function handleFiles(files) {
-            const allFiles = Array.from(files);
-
-            // Check if a zip file was selected
-            const zipFile = allFiles.find(f => f.name.toLowerCase().endsWith('.zip'));
-
-            if (zipFile) {
-                // Zip file upload mode
-                isZipUpload = true;
-                selectedFiles = [zipFile];
-
-                const fileList = document.getElementById('file-list');
-                fileList.style.display = 'block';
-                fileList.innerHTML = `
-                    <div class="file-item">
-                        <span class="file-name">${zipFile.name}</span>
-                        <span class="file-size">${(zipFile.size / 1024 / 1024).toFixed(1)} MB (zip)</span>
-                    </div>
-                    <div class="file-item" style="color: #28a745;">
-                        <span class="file-name">✓ Zip upload is faster and more reliable</span>
-                    </div>
-                `;
-                document.getElementById('btn-process').disabled = false;
-            } else {
-                // Individual photos mode
-                isZipUpload = false;
-                selectedFiles = allFiles.filter(f =>
-                    f.type.startsWith('image/') ||
-                    f.name.toLowerCase().endsWith('.heic') ||
-                    f.name.toLowerCase().endsWith('.heif')
-                );
-
-                // Update file list
-                const fileList = document.getElementById('file-list');
-                if (selectedFiles.length > 0) {
-                    fileList.style.display = 'block';
-                    fileList.innerHTML = selectedFiles.slice(0, 10).map(f => `
-                        <div class="file-item">
-                            <span class="file-name">${f.name}</span>
-                            <span class="file-size">${(f.size / 1024 / 1024).toFixed(1)} MB</span>
-                        </div>
-                    `).join('') + (selectedFiles.length > 10 ? `
-                        <div class="file-item">
-                            <span class="file-name">... and ${selectedFiles.length - 10} more files</span>
-                        </div>
-                    ` : '');
-
-                    document.getElementById('btn-process').disabled = false;
-                } else {
-                    fileList.style.display = 'none';
-                    document.getElementById('btn-process').disabled = true;
-                }
-            }
-        }
-
         let processingInterval = null;
         const processingSteps = [
             'Loading dataset from Supabase...',
@@ -719,8 +572,6 @@
             }
         }
 
-        const CHUNK_SIZE = 20; // Upload 20 photos per batch (smaller = more reliable on HuggingFace)
-
         async function processPhotos() {
             const btn = document.getElementById('btn-process');
             btn.disabled = true;
@@ -729,28 +580,7 @@
             const progressSection = document.getElementById('progress-section');
             progressSection.classList.add('active');
 
-            // Google Drive import mode
-            if (uploadMethod === 'drive') {
-                await importFromDrive();
-                return;
-            }
-
-            // Browser upload modes
-            if (selectedFiles.length === 0) return;
-
-            // If zip upload, use single request (zip is already one file)
-            if (isZipUpload) {
-                await uploadZipFile();
-                return;
-            }
-
-            // For individual photos, use chunked upload
-            await uploadInChunks();
-        }
-
-        // Google Drive import function
-        async function importFromDrive() {
-            const btn = document.getElementById('btn-process');
+            // Google Drive import
             const driveUrl = document.getElementById('drive-folder-url').value.trim();
 
             if (!driveUrl || !driveFolderVerified) {
@@ -819,286 +649,6 @@
             }
         }
 
-        async function uploadZipFile() {
-            const btn = document.getElementById('btn-process');
-            const formData = new FormData();
-            formData.append('zipfile', selectedFiles[0]);
-
-            try {
-                const xhr = new XMLHttpRequest();
-
-                xhr.upload.addEventListener('progress', (e) => {
-                    if (e.lengthComputable) {
-                        const percent = Math.round((e.loaded / e.total) * 100);
-                        document.getElementById('progress-fill').style.width = percent + '%';
-                        document.getElementById('progress-percent').textContent = percent + '%';
-
-                        if (percent < 100) {
-                            const mbUploaded = (e.loaded / 1024 / 1024).toFixed(1);
-                            const mbTotal = (e.total / 1024 / 1024).toFixed(1);
-                            document.getElementById('progress-status').textContent =
-                                `Uploading zip file... (${mbUploaded} MB / ${mbTotal} MB)`;
-                        } else {
-                            document.getElementById('progress-text').textContent = 'Processing...';
-                            document.getElementById('progress-status').innerHTML =
-                                '<strong>Extracting zip file...</strong><br>' +
-                                '<span style="color: #888; font-size: 12px;">This may take a moment for large files</span>';
-                            currentStep = 0;
-                            updateProcessingStatus();
-                            processingInterval = setInterval(updateProcessingStatus, 1500);
-                        }
-                    }
-                });
-
-                xhr.addEventListener('load', () => handleUploadComplete(xhr, btn));
-                xhr.addEventListener('error', () => handleUploadError(btn));
-
-                xhr.open('POST', `/process_reupload/${datasetName}`);
-                xhr.send(formData);
-            } catch (err) {
-                handleUploadError(btn, err.message);
-            }
-        }
-
-        const PARALLEL_UPLOADS = 4; // Upload 4 chunks simultaneously
-
-        async function uploadInChunks() {
-            const btn = document.getElementById('btn-process');
-            const totalFiles = selectedFiles.length;
-            const totalChunks = Math.ceil(totalFiles / CHUNK_SIZE);
-
-            // First, start an upload session
-            let sessionResponse;
-            try {
-                document.getElementById('progress-status').textContent = 'Starting upload session...';
-                const startRes = await fetch(`/start_chunked_upload/${datasetName}`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ total_files: totalFiles, total_chunks: totalChunks })
-                });
-                sessionResponse = await startRes.json();
-                if (!sessionResponse.upload_id) {
-                    throw new Error(sessionResponse.error || 'Failed to start upload session');
-                }
-            } catch (err) {
-                showResult(false, 'Failed to start upload: ' + err.message);
-                btn.disabled = false;
-                btn.innerHTML = 'Continue Processing';
-                return;
-            }
-
-            const uploadId = sessionResponse.upload_id;
-            let uploadedCount = 0;
-            let failedChunks = [];
-
-            // Prepare all chunk data
-            const chunks = [];
-            for (let i = 0; i < totalChunks; i++) {
-                const start = i * CHUNK_SIZE;
-                const end = Math.min(start + CHUNK_SIZE, totalFiles);
-                chunks.push({
-                    index: i,
-                    files: selectedFiles.slice(start, end),
-                    start: start,
-                    end: end
-                });
-            }
-
-            // Upload chunks in parallel batches
-            for (let batchStart = 0; batchStart < totalChunks; batchStart += PARALLEL_UPLOADS) {
-                const batchEnd = Math.min(batchStart + PARALLEL_UPLOADS, totalChunks);
-                const batchChunks = chunks.slice(batchStart, batchEnd);
-
-                document.getElementById('progress-text').textContent =
-                    `Uploading batches ${batchStart + 1}-${batchEnd} of ${totalChunks}`;
-                document.getElementById('progress-status').textContent =
-                    `Parallel upload: ${PARALLEL_UPLOADS} batches at once for faster upload`;
-
-                // Upload batch in parallel
-                const uploadPromises = batchChunks.map(chunk =>
-                    uploadChunkWithRetry(uploadId, chunk, totalChunks)
-                );
-
-                const results = await Promise.allSettled(uploadPromises);
-
-                // Process results
-                for (let i = 0; i < results.length; i++) {
-                    if (results[i].status === 'fulfilled' && results[i].value.success) {
-                        uploadedCount += batchChunks[i].files.length;
-                    } else {
-                        failedChunks.push(batchChunks[i].index);
-                    }
-                }
-
-                // Update progress
-                const percent = Math.round((uploadedCount / totalFiles) * 100);
-                document.getElementById('progress-fill').style.width = percent + '%';
-                document.getElementById('progress-percent').textContent = percent + '%';
-            }
-
-            // Retry failed chunks one more time (sequentially for reliability)
-            if (failedChunks.length > 0) {
-                document.getElementById('progress-status').textContent =
-                    `Retrying ${failedChunks.length} failed batches...`;
-
-                for (const chunkIndex of failedChunks) {
-                    const chunk = chunks[chunkIndex];
-                    const result = await uploadChunkWithRetry(uploadId, chunk, totalChunks, 2);
-                    if (result.success) {
-                        uploadedCount += chunk.files.length;
-                        const percent = Math.round((uploadedCount / totalFiles) * 100);
-                        document.getElementById('progress-fill').style.width = percent + '%';
-                        document.getElementById('progress-percent').textContent = percent + '%';
-                    } else {
-                        showResult(false, `Upload failed at batch ${chunkIndex + 1}. Please try again.`);
-                        btn.disabled = false;
-                        btn.innerHTML = 'Continue Processing';
-                        return;
-                    }
-                }
-            }
-
-            // All chunks uploaded, finalize
-            document.getElementById('progress-text').textContent = 'Processing...';
-            document.getElementById('progress-status').textContent = 'Finalizing upload...';
-            currentStep = 0;
-            updateProcessingStatus();
-            processingInterval = setInterval(updateProcessingStatus, 1500);
-
-            try {
-                const finalRes = await fetch(`/finish_chunked_upload/${datasetName}`, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ upload_id: uploadId })
-                });
-                const result = await finalRes.json();
-
-                if (processingInterval) {
-                    clearInterval(processingInterval);
-                    processingInterval = null;
-                }
-
-                if (result.success) {
-                    document.getElementById('progress-status').innerHTML =
-                        `<strong>Success!</strong> Matched ${result.matched_photos} of ${result.total_uploaded} photos.`;
-                    showResult(true,
-                        `Matched ${result.matched_photos} photos from ${result.total_uploaded} uploaded. Redirecting...`
-                    );
-                    setTimeout(() => {
-                        window.location.href = result.redirect_url;
-                    }, 1500);
-                } else {
-                    showResult(false, result.error || 'Failed to process upload');
-                    btn.disabled = false;
-                    btn.innerHTML = 'Continue Processing';
-                }
-            } catch (err) {
-                if (processingInterval) {
-                    clearInterval(processingInterval);
-                    processingInterval = null;
-                }
-                showResult(false, 'Failed to finalize upload: ' + err.message);
-                btn.disabled = false;
-                btn.innerHTML = 'Continue Processing';
-            }
-        }
-
-        async function uploadChunkWithRetry(uploadId, chunk, totalChunks, maxRetries = 5) {
-            let retries = maxRetries;
-            let delay = 2000; // Start with 2 second delay
-            while (retries > 0) {
-                try {
-                    const success = await uploadChunk(uploadId, chunk.index, chunk.files, totalChunks);
-                    if (success) {
-                        return { success: true };
-                    }
-                } catch (err) {
-                    retries--;
-                    console.log(`Chunk ${chunk.index} failed: ${err.message}. Retries left: ${retries}`);
-                    if (retries > 0) {
-                        document.getElementById('progress-status').textContent =
-                            `Batch ${chunk.index + 1} failed, retrying in ${delay/1000}s... (${retries} attempts left)`;
-                        await new Promise(r => setTimeout(r, delay));
-                        delay = Math.min(delay * 1.5, 10000); // Increase delay up to 10s max
-                    }
-                }
-            }
-            return { success: false };
-        }
-
-        async function uploadChunk(uploadId, chunkIndex, files, totalChunks) {
-            return new Promise((resolve, reject) => {
-                const formData = new FormData();
-                formData.append('upload_id', uploadId);
-                formData.append('chunk_index', chunkIndex);
-                formData.append('total_chunks', totalChunks);
-                files.forEach(file => {
-                    formData.append('photos', file);
-                });
-
-                const xhr = new XMLHttpRequest();
-                xhr.timeout = 120000; // 2 minute timeout per chunk
-
-                xhr.addEventListener('load', () => {
-                    if (xhr.status === 200) {
-                        const response = JSON.parse(xhr.responseText);
-                        if (response.success) {
-                            resolve(true);
-                        } else {
-                            reject(new Error(response.error || 'Chunk upload failed'));
-                        }
-                    } else {
-                        reject(new Error('Server error: ' + xhr.status));
-                    }
-                });
-
-                xhr.addEventListener('error', () => reject(new Error('Network error')));
-                xhr.addEventListener('timeout', () => reject(new Error('Upload timeout')));
-
-                xhr.open('POST', `/upload_reupload_chunk/${datasetName}`);
-                xhr.send(formData);
-            });
-        }
-
-        function handleUploadComplete(xhr, btn) {
-            if (processingInterval) {
-                clearInterval(processingInterval);
-                processingInterval = null;
-            }
-
-            if (xhr.status === 200) {
-                const response = JSON.parse(xhr.responseText);
-                if (response.success) {
-                    document.getElementById('progress-status').innerHTML =
-                        `<strong>Success!</strong> Matched ${response.matched_photos} of ${response.total_uploaded} photos.`;
-                    showResult(true,
-                        `Matched ${response.matched_photos} photos from ${response.total_uploaded} uploaded. Redirecting...`
-                    );
-                    setTimeout(() => {
-                        window.location.href = response.redirect_url;
-                    }, 1500);
-                } else {
-                    showResult(false, response.error || 'Unknown error');
-                    btn.disabled = false;
-                    btn.innerHTML = 'Continue Processing';
-                }
-            } else {
-                showResult(false, 'Upload failed. Please try again.');
-                btn.disabled = false;
-                btn.innerHTML = 'Continue Processing';
-            }
-        }
-
-        function handleUploadError(btn, message = 'Network error. Please try again.') {
-            if (processingInterval) {
-                clearInterval(processingInterval);
-                processingInterval = null;
-            }
-            showResult(false, message);
-            btn.disabled = false;
-            btn.innerHTML = 'Continue Processing';
-        }
-
         function showResult(success, message) {
             const resultSection = document.getElementById('result-section');
             const resultTitle = document.getElementById('result-title');

templates/step2_upload.html

@@ -739,25 +739,8 @@
             <h2>Upload Your Event Photos</h2>
             <p>Upload all photos from the event - we'll find the best ones of your child</p>
 
-            <!-- Upload Method Tabs -->
-            <div class="upload-tabs">
-                <button class="upload-tab active" onclick="switchUploadMethod('browser')">Browser Upload</button>
-                <button class="upload-tab" id="drive-tab" onclick="switchUploadMethod('drive')" style="display: none;">Google Drive</button>
-            </div>
-
-            <!-- Browser Upload Area -->
-            <div class="upload-area" id="drop-zone">
-                <div class="upload-icon">&#128194;</div>
-                <h3>Drag & Drop Photos Here</h3>
-                <p>Supports JPG, PNG, HEIC, WebP (recommended for &lt;500 photos)</p>
-                <input type="file" id="file-input" multiple accept=".jpg,.jpeg,.png,.heic,.heif,.webp" hidden>
-                <button class="btn btn-primary" onclick="document.getElementById('file-input').click()">
-                    Select Files
-                </button>
-            </div>
-
             <!-- Google Drive Input -->
-            <div class="folder-input-area hidden" id="drive-input-area">
+            <div class="folder-input-area" id="drive-input-area">
                 <div class="upload-icon" style="font-size: 48px;">&#9729;</div>
                 <h3>Import from Google Drive</h3>
                 <p>Paste a Google Drive folder URL (folder must be shared with the service account)</p>
@@ -854,52 +837,10 @@
 
     <script>
         const hasReferences = {{ reference_count }} > 0;
-        let selectedFiles = [];
         let qualityMode = 'balanced';
         let jobId = null;
-        let uploadMethod = 'browser';  // 'browser', 'folder', or 'drive'
-        let driveAvailable = false;
         let driveFolderVerified = false;
 
-        // Check if Google Drive is available on page load
-        async function checkDriveAvailability() {
-            try {
-                const response = await fetch('/check_drive_status');
-                const data = await response.json();
-                driveAvailable = data.available;
-                if (driveAvailable) {
-                    document.getElementById('drive-tab').style.display = '';
-                }
-            } catch (e) {
-                console.log('Drive check failed:', e);
-            }
-        }
-        checkDriveAvailability();
-
-        // Upload method switcher
-        function switchUploadMethod(method) {
-            uploadMethod = method;
-            document.querySelectorAll('.upload-tab').forEach(tab => {
-                const tabText = tab.textContent.toLowerCase();
-                const isActive = (method === 'browser' && tabText.includes('browser')) ||
-                                 (method === 'drive' && tabText.includes('drive'));
-                tab.classList.toggle('active', isActive);
-            });
-            document.getElementById('drop-zone').classList.toggle('hidden', method !== 'browser');
-            document.getElementById('drive-input-area').classList.toggle('hidden', method !== 'drive');
-
-            // Update file preview visibility based on method
-            if (method === 'drive') {
-                document.getElementById('file-preview').classList.add('hidden');
-                updateDrivePreview();
-            } else {
-                // Browser mode - show preview if files selected
-                if (selectedFiles.length > 0) {
-                    document.getElementById('file-preview').classList.remove('hidden');
-                }
-            }
-        }
-
         function updateDrivePreview() {
             const driveUrl = document.getElementById('drive-folder-url').value.trim();
             const preview = document.getElementById('file-preview');
@@ -957,9 +898,6 @@
             }
         }
 
-        // Folder path input handler
-        document.getElementById('folder-path').addEventListener('input', updateFolderPreview);
-
         // Drive URL input handler - reset verification on change
         document.getElementById('drive-folder-url').addEventListener('input', function() {
             driveFolderVerified = false;
@@ -967,69 +905,6 @@
             document.getElementById('file-preview').classList.add('hidden');
         });
 
-        // File input handler
-        document.getElementById('file-input').addEventListener('change', function(e) {
-            handleFiles(e.target.files);
-        });
-
-        // Drag and drop
-        const dropZone = document.getElementById('drop-zone');
-
-        dropZone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            dropZone.classList.add('drag-over');
-        });
-
-        dropZone.addEventListener('dragleave', () => {
-            dropZone.classList.remove('drag-over');
-        });
-
-        dropZone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            dropZone.classList.remove('drag-over');
-            handleFiles(e.dataTransfer.files);
-        });
-
-        function handleFiles(files) {
-            selectedFiles = Array.from(files);
-            updatePreview();
-        }
-
-        function updatePreview() {
-            const preview = document.getElementById('file-preview');
-            const grid = document.getElementById('preview-grid');
-            const countEl = document.getElementById('file-count');
-
-            if (selectedFiles.length === 0) {
-                preview.classList.add('hidden');
-                return;
-            }
-
-            preview.classList.remove('hidden');
-            countEl.textContent = `${selectedFiles.length} photos`;
-            grid.innerHTML = '';
-
-            const maxPreview = 11;
-            const filesToShow = selectedFiles.slice(0, maxPreview);
-
-            filesToShow.forEach(file => {
-                const div = document.createElement('div');
-                div.className = 'preview-item';
-
-                const img = document.createElement('img');
-                img.src = URL.createObjectURL(file);
-                div.appendChild(img);
-                grid.appendChild(div);
-            });
-
-            if (selectedFiles.length > maxPreview) {
-                const more = document.createElement('div');
-                more.className = 'preview-item more-indicator';
-                more.textContent = `+${selectedFiles.length - maxPreview}`;
-                grid.appendChild(more);
-            }
-        }
-
         function setQualityMode(mode) {
             qualityMode = mode;
             document.querySelectorAll('.quality-btn').forEach(btn => {
@@ -1046,140 +921,48 @@
             // Show processing overlay
             document.getElementById('processing-overlay').classList.remove('hidden');
 
-            if (uploadMethod === 'drive') {
-                // Google Drive import mode
-                const driveUrl = document.getElementById('drive-folder-url').value.trim();
-                if (!driveUrl) {
-                    alert('Please enter a Google Drive folder URL');
-                    document.getElementById('processing-overlay').classList.add('hidden');
-                    return;
-                }
+            // Google Drive import mode
+            const driveUrl = document.getElementById('drive-folder-url').value.trim();
+            if (!driveUrl) {
+                alert('Please enter a Google Drive folder URL');
+                document.getElementById('processing-overlay').classList.add('hidden');
+                return;
+            }
 
-                if (!driveFolderVerified) {
-                    alert('Please click "Preview Folder" first to verify access');
-                    document.getElementById('processing-overlay').classList.add('hidden');
-                    return;
-                }
+            if (!driveFolderVerified) {
+                alert('Please click "Preview Folder" first to verify access');
+                document.getElementById('processing-overlay').classList.add('hidden');
+                return;
+            }
 
-                document.getElementById('processing-message').textContent = 'Connecting to Google Drive...';
-
-                try {
-                    const response = await fetch('/import_from_drive', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            folder_url: driveUrl,
-                            quality_mode: qualityMode,
-                            similarity_threshold: parseFloat(document.getElementById('similarity').value)
-                        })
-                    });
-
-                    const data = await response.json();
-
-                    if (data.error) {
-                        alert('Error: ' + data.error);
-                        document.getElementById('processing-overlay').classList.add('hidden');
-                        return;
-                    }
-
-                    jobId = data.job_id;
-                    pollStatus();
-
-                } catch (error) {
-                    console.error('Error:', error);
-                    alert('Failed to import from Google Drive. Please try again.');
-                    document.getElementById('processing-overlay').classList.add('hidden');
-                }
+            document.getElementById('processing-message').textContent = 'Connecting to Google Drive...';
 
-            } else {
-                // Browser upload mode
-                if (selectedFiles.length === 0) {
-                    alert('Please select photos first');
+            try {
+                const response = await fetch('/import_from_drive', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        folder_url: driveUrl,
+                        quality_mode: qualityMode,
+                        similarity_threshold: parseFloat(document.getElementById('similarity').value)
+                    })
+                });
+
+                const data = await response.json();
+
+                if (data.error) {
+                    alert('Error: ' + data.error);
                     document.getElementById('processing-overlay').classList.add('hidden');
                     return;
                 }
 
-                // Upload files in chunks to avoid 413 errors
-                const CHUNK_SIZE = 50; // Upload 50 files at a time
-                const totalFiles = selectedFiles.length;
-                let uploadedCount = 0;
-
-                document.getElementById('processing-message').textContent = `Uploading photos (0/${totalFiles})...`;
-
-                try {
-                    // First, start a new upload session
-                    const initResponse = await fetch('/upload_init', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({
-                            total_files: totalFiles,
-                            quality_mode: qualityMode,
-                            similarity_threshold: parseFloat(document.getElementById('similarity').value)
-                        })
-                    });
-
-                    const initData = await initResponse.json();
-                    if (initData.error) {
-                        alert('Error: ' + initData.error);
-                        document.getElementById('processing-overlay').classList.add('hidden');
-                        return;
-                    }
-
-                    const sessionId = initData.session_id;
-
-                    // Upload files in chunks
-                    for (let i = 0; i < totalFiles; i += CHUNK_SIZE) {
-                        const chunk = selectedFiles.slice(i, i + CHUNK_SIZE);
-                        const formData = new FormData();
-
-                        chunk.forEach(file => formData.append('files', file));
-                        formData.append('session_id', sessionId);
-                        formData.append('chunk_index', Math.floor(i / CHUNK_SIZE));
-
-                        const chunkResponse = await fetch('/upload_chunk', {
-                            method: 'POST',
-                            body: formData
-                        });
-
-                        const chunkData = await chunkResponse.json();
-                        if (chunkData.error) {
-                            alert('Error uploading chunk: ' + chunkData.error);
-                            document.getElementById('processing-overlay').classList.add('hidden');
-                            return;
-                        }
-
-                        uploadedCount += chunk.length;
-                        const percent = Math.round((uploadedCount / totalFiles) * 30); // Upload is 30% of progress
-                        document.getElementById('processing-message').textContent = `Uploading photos (${uploadedCount}/${totalFiles})...`;
-                        document.getElementById('progress-fill').style.width = `${percent}%`;
-                        document.getElementById('progress-percent').textContent = percent;
-                    }
-
-                    // All chunks uploaded, start processing
-                    document.getElementById('processing-message').textContent = 'Starting AI processing...';
-
-                    const processResponse = await fetch('/upload_complete', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ session_id: sessionId })
-                    });
-
-                    const processData = await processResponse.json();
-
-                    if (processData.error) {
-                        alert('Error: ' + processData.error);
-                        document.getElementById('processing-overlay').classList.add('hidden');
-                        return;
-                    }
-
-                    jobId = processData.job_id;
-                    pollStatus();
-
-                } catch (error) {
-                    console.error('Upload error:', error);
-                    alert('Upload failed. Please try again.');
-                    document.getElementById('processing-overlay').classList.add('hidden');
-                }
+                jobId = data.job_id;
+                pollStatus();
+
+            } catch (error) {
+                console.error('Error:', error);
+                alert('Failed to import from Google Drive. Please try again.');
+                document.getElementById('processing-overlay').classList.add('hidden');
             }
         }
 

templates/step4_results.html

@@ -1295,6 +1295,188 @@
             filter: grayscale(30%);
         }
 
+        /* Cluster Details Table */
+        .cluster-details-table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            font-size: 13px;
+            border: 1px solid #e2e8f0;
+            border-radius: 10px;
+            overflow: hidden;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
+        }
+
+        .cluster-details-table th {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 14px 12px;
+            text-align: center;
+            font-weight: 600;
+            color: white;
+            border-right: 1px solid rgba(255,255,255,0.15);
+            white-space: nowrap;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 0.8px;
+        }
+
+        .cluster-details-table th:first-child {
+            text-align: left;
+            padding-left: 16px;
+        }
+
+        .cluster-details-table th:last-child {
+            border-right: none;
+        }
+
+        .cluster-details-table td {
+            padding: 14px 10px;
+            border-bottom: 1px solid #f1f5f9;
+            border-right: 1px solid #f8fafc;
+            vertical-align: middle;
+            text-align: center;
+        }
+
+        .cluster-details-table td:first-child {
+            text-align: left;
+            padding-left: 12px;
+        }
+
+        .cluster-details-table td:last-child {
+            border-right: none;
+        }
+
+        .cluster-details-table tbody tr {
+            cursor: pointer;
+            transition: all 0.15s ease;
+        }
+
+        .cluster-details-table tbody tr:hover {
+            background: #f8fafc;
+        }
+
+        .cluster-details-table tbody tr:last-child td {
+            border-bottom: none;
+        }
+
+        .cluster-details-table tr.selected-row {
+            background: linear-gradient(90deg, #f0fdf4 0%, #ffffff 100%);
+        }
+
+        .cluster-details-table tr.selected-row:hover {
+            background: linear-gradient(90deg, #dcfce7 0%, #f0fdf4 100%);
+        }
+
+        .cluster-details-table tr.rejected-row {
+            background: #ffffff;
+        }
+
+        .cluster-details-table tr.rejected-row:hover {
+            background: linear-gradient(90deg, #fef2f2 0%, #ffffff 100%);
+        }
+
+        .cluster-table-photo {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 6px;
+        }
+
+        .cluster-table-photo img {
+            width: 120px;
+            height: 120px;
+            object-fit: cover;
+            border-radius: 8px;
+            border: 3px solid transparent;
+        }
+
+        .cluster-table-photo.selected img {
+            border-color: #10b981;
+        }
+
+        .cluster-table-photo.rejected img {
+            border-color: #ef4444;
+            opacity: 0.85;
+        }
+
+        .cluster-table-photo .photo-filename {
+            font-size: 11px;
+            color: #64748b;
+            max-width: 120px;
+            word-break: break-all;
+            text-align: center;
+        }
+
+        .cluster-table-photo .photo-score {
+            font-size: 14px;
+            font-weight: 700;
+        }
+
+        .cluster-table-photo.selected .photo-score {
+            color: #10b981;
+        }
+
+        .cluster-table-photo.rejected .photo-score {
+            color: #ef4444;
+        }
+
+        .cluster-table-photo .photo-badge {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
+            color: white;
+        }
+
+        .cluster-table-photo.selected .photo-badge {
+            background: #10b981;
+        }
+
+        .cluster-table-photo.rejected .photo-badge {
+            background: #ef4444;
+        }
+
+        .cluster-table-reason {
+            max-width: 200px;
+            font-size: 12px;
+            color: #475569;
+        }
+
+        .cluster-table-meta {
+            font-size: 12px;
+            color: #64748b;
+            white-space: nowrap;
+        }
+
+        .cluster-table-meta .original {
+            color: #94a3b8;
+            font-size: 11px;
+        }
+
+        .score-cell {
+            text-align: center;
+            font-weight: 500;
+        }
+
+        .score-cell.good {
+            color: #10b981;
+        }
+
+        .score-cell.medium {
+            color: #f59e0b;
+        }
+
+        .score-cell.low {
+            color: #ef4444;
+        }
+
         .cluster-photo-badge {
             position: absolute;
             top: 6px;
@@ -1470,9 +1652,11 @@
             <!-- Cluster View Container -->
             <div class="cluster-view-container">
                 <div class="cluster-view-header">
-                    <h3>Photo Clusters</h3>
+                    <h3 id="cluster-view-title">Photo Clusters</h3>
                     <p class="cluster-view-subtitle">Photos grouped by visual similarity. Click to expand and see all photos in each cluster.</p>
                 </div>
+
+                <!-- Clusters grid -->
                 <div id="cluster-grid" class="cluster-grid"></div>
             </div>
         </div>
@@ -1992,9 +2176,26 @@
                 </div>
             `;
 
-            // Click to expand/collapse
+            // Click to expand/collapse (only on header, not on table)
             card.onclick = (e) => {
-                // Don't toggle if clicking on a photo
+                // Don't toggle if clicking on the photo table or its contents
+                if (e.target.closest('.cluster-details-table')) {
+                    // Handle table row click to open modal
+                    const row = e.target.closest('tr[data-filename]');
+                    if (row) {
+                        const filename = row.dataset.filename;
+                        const isSelected = row.dataset.selected === 'true';
+
+                        // Find the photo in cluster data
+                        const allPhotos = [...(cluster.selected || []), ...(cluster.rejected || [])];
+                        const photo = allPhotos.find(p => p.filename === filename);
+                        if (photo) {
+                            openModal(photo, isSelected);
+                        }
+                    }
+                    return;
+                }
+                // Don't toggle if clicking on old photo items (fallback)
                 if (e.target.closest('.cluster-photo-item')) return;
                 toggleClusterCard(card, cluster.id);
             };
@@ -2003,8 +2204,6 @@
         }
 
         function renderClusterCardPhotos(cluster) {
-            let html = '';
-
             // Ensure arrays exist
             const selectedPhotos = cluster.selected || [];
             const rejectedPhotos = cluster.rejected || [];
@@ -2020,12 +2219,88 @@
                 return '<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">';
+            // Render table with all photo details
+            let html = `
+                <table class="cluster-details-table">
+                    <thead>
+                        <tr>
+                            <th>Photo</th>
+                            <th>Score</th>
+                            <th>Face Quality</th>
+                            <th>Aesthetic</th>
+                            <th>Emotional</th>
+                            <th>Uniqueness</th>
+                            <th>Reason</th>
+                            <th>Cluster / Event</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+            `;
+
             for (const photo of allPhotos) {
-                html += createClusterPhotoItem(photo, photo._isSelected);
+                const isSelected = photo._isSelected;
+                const filename = photo.filename || 'unknown';
+                const thumbnail = getPhotoThumbnail(photo);
+                const score = photo.score ? (photo.score * 100).toFixed(0) : '0';
+                const faceQuality = photo.face_quality ? (photo.face_quality * 100).toFixed(0) : 'N/A';
+                const aesthetic = photo.aesthetic_quality ? (photo.aesthetic_quality * 100).toFixed(0) : 'N/A';
+                const emotional = photo.emotional_signal ? (photo.emotional_signal * 100).toFixed(0) : 'N/A';
+                const uniqueness = photo.uniqueness ? (photo.uniqueness * 100).toFixed(0) : 'N/A';
+                const reason = isSelected
+                    ? (photo.selection_reason || 'Selected')
+                    : (photo.rejection_reason || photo.reason || 'Not selected');
+
+                const clusterId = photo.cluster_id !== undefined ? photo.cluster_id : -1;
+                const originalClusterId = photo.original_cluster_id !== undefined ? photo.original_cluster_id : clusterId;
+                const eventId = photo.event_id !== undefined ? photo.event_id : -1;
+
+                // Show original cluster if different
+                let clusterDisplay = clusterId >= 0 ? `C:${clusterId}` : 'None';
+                if (originalClusterId !== clusterId && originalClusterId >= 0) {
+                    clusterDisplay += ` <span class="original">(orig:${originalClusterId})</span>`;
+                }
+                const eventDisplay = eventId >= 0 ? `E:${eventId}` : '';
+
+                // Score color classes
+                const getScoreClass = (val) => {
+                    if (val === 'N/A') return '';
+                    const num = parseInt(val);
+                    if (num >= 70) return 'good';
+                    if (num >= 50) return 'medium';
+                    return 'low';
+                };
+
+                const rowClass = isSelected ? 'selected-row' : 'rejected-row';
+                const photoClass = isSelected ? 'selected' : 'rejected';
+                const badge = isSelected ? '✓' : '✗';
+
+                html += `
+                    <tr class="${rowClass}" data-filename="${filename}" data-selected="${isSelected}">
+                        <td>
+                            <div class="cluster-table-photo ${photoClass}">
+                                <div style="position: relative;">
+                                    <img src="/thumbnail/${jobId}/${thumbnail}" alt="${filename}" loading="lazy">
+                                    <span class="photo-badge">${badge}</span>
+                                </div>
+                                <span class="photo-score">${score}%</span>
+                                <span class="photo-filename">${filename}</span>
+                            </div>
+                        </td>
+                        <td class="score-cell ${getScoreClass(score)}">${score}%</td>
+                        <td class="score-cell ${getScoreClass(faceQuality)}">${faceQuality}%</td>
+                        <td class="score-cell ${getScoreClass(aesthetic)}">${aesthetic}%</td>
+                        <td class="score-cell ${getScoreClass(emotional)}">${emotional}%</td>
+                        <td class="score-cell ${getScoreClass(uniqueness)}">${uniqueness}%</td>
+                        <td class="cluster-table-reason">${reason}</td>
+                        <td class="cluster-table-meta">${clusterDisplay}<br>${eventDisplay}</td>
+                    </tr>
+                `;
             }
-            html += '</div>';
+
+            html += `
+                    </tbody>
+                </table>
+            `;
 
             return html;
         }
@@ -2272,7 +2547,20 @@
             const uniqueness = photo.uniqueness ? (photo.uniqueness * 100).toFixed(0) : 'N/A';
             const eventId = photo.event_id !== undefined ? photo.event_id : -1;
             const clusterId = photo.cluster_id !== undefined ? photo.cluster_id : -1;
-            const clusterLabel = clusterId >= 0 ? `Cluster ${clusterId}` : 'None';
+            const originalClusterId = photo.original_cluster_id !== undefined ? photo.original_cluster_id : clusterId;
+
+            // Show original cluster if different from current (merged) cluster
+            let clusterLabel;
+            if (clusterId >= 0) {
+                if (originalClusterId !== clusterId && originalClusterId >= 0) {
+                    clusterLabel = `${clusterId} (orig: ${originalClusterId})`;
+                } else {
+                    clusterLabel = `Cluster ${clusterId}`;
+                }
+            } else {
+                clusterLabel = 'None';
+            }
+
             const similarity = photo.max_similarity !== undefined ? (photo.max_similarity * 100).toFixed(1) : '0.0';
             const category = photo.category || 'Unknown';
             const datetime = photo.date || 'N/A';