Update app.py

app.py

@@ -289,14 +289,15 @@ class DatasetCollectionApp:
         )
     
     def create_validation_interface(self):
-        """Create simplified validation interface for visual review"""
+        """Create validation interface with selection controls"""
         
         if not self.temp_session:
             return "<p>No temporary session to validate</p>"
         
         html = "<div style='padding: 20px;'>"
-        html += "<h2 style='text-align:center;'>Validation - Visual Review</h2>"
-        html += "<p style='text-align:center; color:#666;'>Review images before saving. All images will be saved when you click 'Save to Database'</p>"
+        html += "<h2 style='text-align:center;'>Validation - Select Images to Keep</h2>"
+        html += "<p style='text-align:center; color:#666;'>Uncheck images to exclude them from saving</p>"
+        html += "<p style='text-align:center; color:#e03131; font-size: 12px;'>⚠️ Note: Buttons may not work in all environments. If not working, just review visually and save all.</p>"
         
         for temp_id in sorted(self.temp_session.keys()):
             dog_data = self.temp_session[temp_id]
@@ -305,7 +306,30 @@ class DatasetCollectionApp:
             html += f"""
             <div style='border: 2px solid #495057; border-radius: 10px; 
                         padding: 15px; margin: 20px 0; background: #f8f9fa;'>
-                <h3 style='margin: 0 0 15px 0;'>Temp Dog #{temp_id} - {len(images)} images</h3>
+                <div style='display: flex; justify-content: space-between; 
+                            align-items: center; margin-bottom: 15px;'>
+                    <h3 style='margin: 0;'>Temp Dog #{temp_id} - {len(images)} images</h3>
+                    <div style='display: flex; gap: 10px;'>
+                        <button 
+                            onclick="document.querySelectorAll('[data-dog=\\'dog{temp_id}\\']').forEach(cb => cb.checked = true); return false;"
+                            style='padding: 8px 12px; background: #228be6; color: white; 
+                                   border: none; border-radius: 5px; cursor: pointer; font-size: 13px;'>
+                            ✓ Select All
+                        </button>
+                        <button 
+                            onclick="document.querySelectorAll('[data-dog=\\'dog{temp_id}\\']').forEach(cb => cb.checked = false); return false;"
+                            style='padding: 8px 12px; background: #868e96; color: white; 
+                                   border: none; border-radius: 5px; cursor: pointer; font-size: 13px;'>
+                            ✗ Deselect All
+                        </button>
+                        <button 
+                            onclick="if(confirm('Delete all images for Dog #{temp_id}?')) {{ document.querySelectorAll('[data-dog=\\'dog{temp_id}\\']').forEach(cb => cb.checked = false); }} return false;"
+                            style='padding: 8px 12px; background: #fa5252; color: white; 
+                                   border: none; border-radius: 5px; cursor: pointer; font-size: 13px;'>
+                            🗑 Delete Dog
+                        </button>
+                    </div>
+                </div>
                 <div style='display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;'>
             """
             
@@ -315,9 +339,19 @@ class DatasetCollectionApp:
                 
                 html += f"""
                 <div style='position: relative;'>
-                    <img src='data:image/jpeg;base64,{img_base64}'
-                         style='width: 100%; aspect-ratio: 1; object-fit: cover; 
-                                border-radius: 5px; border: 2px solid #dee2e6;'>
+                    <input type='checkbox' 
+                           id='dog{temp_id}_img{idx}' 
+                           data-dog='dog{temp_id}'
+                           checked 
+                           style='position: absolute; top: 8px; left: 8px; 
+                                  width: 24px; height: 24px; z-index: 10; 
+                                  cursor: pointer; accent-color: #228be6;'
+                           onclick='event.stopPropagation();'>
+                    <label for='dog{temp_id}_img{idx}' style='cursor: pointer; display: block;'>
+                        <img src='data:image/jpeg;base64,{img_base64}'
+                             style='width: 100%; aspect-ratio: 1; object-fit: cover; 
+                                    border-radius: 5px; border: 2px solid #dee2e6;'>
+                    </label>
                     <div style='position: absolute; bottom: 5px; right: 5px; 
                                 background: rgba(0,0,0,0.7); color: white; 
                                 padding: 2px 6px; border-radius: 3px; font-size: 10px;'>
@@ -332,8 +366,8 @@ class DatasetCollectionApp:
             """
         
         html += "<p style='text-align:center; color:#868e96; margin-top: 30px;'>"
-        html += "If results look good, click 'Save to Database' below.<br>"
-        html += "If not satisfied, go back to Tab 1 and click 'Discard & Retry' with different threshold."
+        html += "Review images and uncheck any you want to exclude.<br>"
+        html += "Click 'Save to Database' to save checked images."
         html += "</p>"
         html += "</div>"
         return html