Update app.py

app.py

@@ -289,15 +289,14 @@ class DatasetCollectionApp:
         )
     
     def create_validation_interface(self):
-        """Create validation interface with selection controls"""
+        """Create validation interface with inline onclick handlers"""
         
         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 - 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>"
+        html += "<p style='text-align:center; color:#666;'>Uncheck images to exclude from saving</p>"
         
         for temp_id in sorted(self.temp_session.keys()):
             dog_data = self.temp_session[temp_id]
@@ -310,23 +309,23 @@ class DatasetCollectionApp:
                             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;"
+                        <button type='button'
+                            onclick="var cbs=document.querySelectorAll('input[data-dog=dog{temp_id}]'); for(var i=0;i<cbs.length;i++){{cbs[i].checked=true;}}"
                             style='padding: 8px 12px; background: #228be6; color: white; 
-                                   border: none; border-radius: 5px; cursor: pointer; font-size: 13px;'>
-                            ✓ Select All
+                                   border: none; border-radius: 5px; cursor: pointer;'>
+                            Select All
                         </button>
-                        <button 
-                            onclick="document.querySelectorAll('[data-dog=\\'dog{temp_id}\\']').forEach(cb => cb.checked = false); return false;"
+                        <button type='button'
+                            onclick="var cbs=document.querySelectorAll('input[data-dog=dog{temp_id}]'); for(var i=0;i<cbs.length;i++){{cbs[i].checked=false;}}"
                             style='padding: 8px 12px; background: #868e96; color: white; 
-                                   border: none; border-radius: 5px; cursor: pointer; font-size: 13px;'>
-                            ✗ Deselect All
+                                   border: none; border-radius: 5px; cursor: pointer;'>
+                            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;"
+                        <button type='button'
+                            onclick="if(confirm('Delete all images for Dog #{temp_id}?')){{var cbs=document.querySelectorAll('input[data-dog=dog{temp_id}]'); for(var i=0;i<cbs.length;i++){{cbs[i].checked=false;}}}}"
                             style='padding: 8px 12px; background: #fa5252; color: white; 
-                                   border: none; border-radius: 5px; cursor: pointer; font-size: 13px;'>
-                            🗑 Delete Dog
+                                   border: none; border-radius: 5px; cursor: pointer;'>
+                            Delete This Dog
                         </button>
                     </div>
                 </div>
@@ -340,18 +339,16 @@ class DatasetCollectionApp:
                 html += f"""
                 <div style='position: relative;'>
                     <input type='checkbox' 
-                           id='dog{temp_id}_img{idx}' 
                            data-dog='dog{temp_id}'
-                           checked 
+                           id='dog{temp_id}_img{idx}'
+                           name='dog{temp_id}_img{idx}'
+                           checked='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>
+                                  width: 20px; height: 20px; z-index: 10; 
+                                  cursor: pointer;'>
+                    <img src='data:image/jpeg;base64,{img_base64}'
+                         style='width: 100%; aspect-ratio: 1; object-fit: cover; 
+                                border-radius: 5px; border: 2px solid #dee2e6;'>
                     <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;'>
@@ -365,10 +362,6 @@ class DatasetCollectionApp:
             </div>
             """
         
-        html += "<p style='text-align:center; color:#868e96; margin-top: 30px;'>"
-        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