hbfshdb

label_viewer.py

@@ -12,8 +12,8 @@ app = Flask(__name__)
 
 # Cấu hình đường dẫn
 BASE_DIR = Path(__file__).parent.parent  # Lên một cấp từ danh_nhan về project_ss
-IMAGES_DIR = BASE_DIR / "data" / "images_crop" / "train"
-LABELS_DIR = BASE_DIR / "data" / "labels_crop" / "train"
+IMAGES_DIR = BASE_DIR / "data" / "images_crop" / "val"
+LABELS_DIR = BASE_DIR / "data" / "labels_crop" / "val"
 
 # Danh sách các class
 CLASSES = {

templates/index.html

@@ -78,15 +78,67 @@
             background: #f8f9fa;
             border-radius: 8px;
             position: relative;
-            overflow: hidden;
+            overflow: auto;
+            cursor: grab;
+        }
+        
+        .image-container:active {
+            cursor: grabbing;
         }
         
         .image-container img {
-            max-width: 100%;
-            max-height: 100%;
+            max-width: none;
+            max-height: none;
             object-fit: contain;
             border-radius: 8px;
             box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            transition: transform 0.1s ease;
+        }
+        
+        .zoom-controls {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            background: rgba(255, 255, 255, 0.9);
+            border-radius: 8px;
+            padding: 5px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        
+        .zoom-btn {
+            width: 35px;
+            height: 35px;
+            border: none;
+            border-radius: 6px;
+            background: #667eea;
+            color: white;
+            font-size: 16px;
+            font-weight: bold;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: all 0.2s;
+        }
+        
+        .zoom-btn:hover {
+            background: #5a6fd8;
+            transform: scale(1.1);
+        }
+        
+        .zoom-info {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background: rgba(0, 0, 0, 0.7);
+            color: white;
+            padding: 5px 10px;
+            border-radius: 6px;
+            font-size: 12px;
+            font-weight: 500;
         }
         
         .label-container {
@@ -336,9 +388,22 @@
                     <h2 class="panel-title">🖼️ Ảnh</h2>
                 </div>
                 <div class="image-name" id="imageName">Chưa chọn ảnh</div>
-                <div class="image-container">
+                <div class="image-container" id="imageContainer">
                     <img id="currentImage" src="" alt="Chọn ảnh để xem" style="display: none;">
                     <div id="imagePlaceholder" class="loading">Chọn ảnh từ danh sách bên trên</div>
+                    
+                    <!-- Zoom controls -->
+                    <div class="zoom-controls" id="zoomControls" style="display: none;">
+                        <button class="zoom-btn" onclick="zoomIn()" title="Phóng to">+</button>
+                        <button class="zoom-btn" onclick="zoomOut()" title="Thu nhỏ">−</button>
+                        <button class="zoom-btn" onclick="resetZoom()" title="Kích thước gốc">⌂</button>
+                        <button class="zoom-btn" onclick="fitToContainer()" title="Vừa khung">⊞</button>
+                    </div>
+                    
+                    <!-- Zoom info -->
+                    <div class="zoom-info" id="zoomInfo" style="display: none;">
+                        <span id="zoomLevel">100%</span>
+                    </div>
                 </div>
             </div>
 
@@ -390,6 +455,9 @@
         let imageFiles = {{ image_files | tojson }};
         let currentImageIndex = -1;
         let currentImageName = '';
+        let currentZoom = 1;
+        let isDragging = false;
+        let startX, startY, scrollLeft, scrollTop;
 
         // Khởi tạo
         document.addEventListener('DOMContentLoaded', function() {
@@ -399,8 +467,135 @@
                     loadImage(selectedImage);
                 }
             });
+            
+            // Thêm event listeners cho drag và zoom
+            setupImageInteraction();
         });
 
+        function setupImageInteraction() {
+            const imageContainer = document.getElementById('imageContainer');
+            const image = document.getElementById('currentImage');
+            
+            // Mouse wheel zoom
+            imageContainer.addEventListener('wheel', function(e) {
+                e.preventDefault();
+                const delta = e.deltaY > 0 ? -0.1 : 0.1;
+                const newZoom = Math.max(0.1, Math.min(5, currentZoom + delta));
+                setZoom(newZoom);
+            });
+            
+            // Drag functionality
+            imageContainer.addEventListener('mousedown', function(e) {
+                if (e.target === image) {
+                    isDragging = true;
+                    startX = e.pageX - imageContainer.offsetLeft;
+                    startY = e.pageY - imageContainer.offsetTop;
+                    scrollLeft = imageContainer.scrollLeft;
+                    scrollTop = imageContainer.scrollTop;
+                    imageContainer.style.cursor = 'grabbing';
+                }
+            });
+            
+            document.addEventListener('mousemove', function(e) {
+                if (!isDragging) return;
+                e.preventDefault();
+                const x = e.pageX - imageContainer.offsetLeft;
+                const y = e.pageY - imageContainer.offsetTop;
+                const walkX = (x - startX) * 2;
+                const walkY = (y - startY) * 2;
+                imageContainer.scrollLeft = scrollLeft - walkX;
+                imageContainer.scrollTop = scrollTop - walkY;
+            });
+            
+            document.addEventListener('mouseup', function() {
+                isDragging = false;
+                imageContainer.style.cursor = 'grab';
+            });
+            
+            // Touch events for mobile
+            let lastTouchDistance = 0;
+            
+            imageContainer.addEventListener('touchstart', function(e) {
+                if (e.touches.length === 2) {
+                    lastTouchDistance = getTouchDistance(e.touches);
+                }
+            });
+            
+            imageContainer.addEventListener('touchmove', function(e) {
+                e.preventDefault();
+                if (e.touches.length === 2) {
+                    const currentDistance = getTouchDistance(e.touches);
+                    const delta = currentDistance - lastTouchDistance;
+                    const zoomDelta = delta * 0.001;
+                    const newZoom = Math.max(0.1, Math.min(5, currentZoom + zoomDelta));
+                    setZoom(newZoom);
+                    lastTouchDistance = currentDistance;
+                }
+            });
+        }
+        
+        function getTouchDistance(touches) {
+            const dx = touches[0].clientX - touches[1].clientX;
+            const dy = touches[0].clientY - touches[1].clientY;
+            return Math.sqrt(dx * dx + dy * dy);
+        }
+        
+        function setZoom(zoom) {
+            currentZoom = zoom;
+            const image = document.getElementById('currentImage');
+            image.style.transform = `scale(${zoom})`;
+            
+            // Update zoom info
+            document.getElementById('zoomLevel').textContent = Math.round(zoom * 100) + '%';
+        }
+        
+        function zoomIn() {
+            const newZoom = Math.min(5, currentZoom * 1.2);
+            setZoom(newZoom);
+        }
+        
+        function zoomOut() {
+            const newZoom = Math.max(0.1, currentZoom / 1.2);
+            setZoom(newZoom);
+        }
+        
+        function resetZoom() {
+            setZoom(1);
+            centerImage();
+        }
+        
+        function fitToContainer() {
+            const image = document.getElementById('currentImage');
+            const container = document.getElementById('imageContainer');
+            
+            if (image.naturalWidth && image.naturalHeight) {
+                const containerRatio = container.clientWidth / container.clientHeight;
+                const imageRatio = image.naturalWidth / image.naturalHeight;
+                
+                let zoom;
+                if (imageRatio > containerRatio) {
+                    zoom = (container.clientWidth - 40) / image.naturalWidth;
+                } else {
+                    zoom = (container.clientHeight - 40) / image.naturalHeight;
+                }
+                
+                setZoom(zoom);
+                centerImage();
+            }
+        }
+        
+        function centerImage() {
+            const container = document.getElementById('imageContainer');
+            const image = document.getElementById('currentImage');
+            
+            setTimeout(() => {
+                const scrollX = (image.offsetWidth * currentZoom - container.clientWidth) / 2;
+                const scrollY = (image.offsetHeight * currentZoom - container.clientHeight) / 2;
+                container.scrollLeft = Math.max(0, scrollX);
+                container.scrollTop = Math.max(0, scrollY);
+            }, 50);
+        }
+
         function loadImage(imageName) {
             currentImageName = imageName;
             currentImageIndex = imageFiles.indexOf(imageName);
@@ -413,6 +608,18 @@
             // Hiển thị ảnh
             const img = document.getElementById('currentImage');
             const placeholder = document.getElementById('imagePlaceholder');
+            const zoomControls = document.getElementById('zoomControls');
+            const zoomInfo = document.getElementById('zoomInfo');
+            
+            img.onload = function() {
+                // Reset zoom khi load ảnh mới
+                setZoom(1);
+                centerImage();
+                
+                // Show zoom controls
+                zoomControls.style.display = 'flex';
+                zoomInfo.style.display = 'block';
+            };
             
             img.src = `/images/${imageName}`;
             img.style.display = 'block';
@@ -600,6 +807,18 @@
             } else if (e.key === 'Enter' && e.target.id === 'labelEditor') {
                 e.preventDefault();
                 saveAndNext();
+            } else if (e.key === '=' || e.key === '+') {
+                // Zoom in với phím +
+                zoomIn();
+            } else if (e.key === '-' || e.key === '_') {
+                // Zoom out với phím -
+                zoomOut();
+            } else if (e.key === '0' && !e.ctrlKey) {
+                // Reset zoom với phím 0
+                resetZoom();
+            } else if (e.key === '9') {
+                // Fit to container với phím 9
+                fitToContainer();
             }
         });
     </script>