diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..f673a71 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5502 +} \ No newline at end of file diff --git a/gradcam.html b/gradcam.html index 1f10b27..a958e4c 100644 --- a/gradcam.html +++ b/gradcam.html @@ -128,8 +128,55 @@ /* Add proper 3D transform classes */ .preserve-3d { transform-style: preserve-3d; } .perspective-1000 { perspective: 1000px; } + .backface-hidden { backface-visibility: hidden; } .rotate-y-180 { transform: rotateY(180deg); } - .translate-z-negative { transform: translateZ(-20px); } + + /* Visual flip container styling */ + .visual-container { + position: relative; + width: 100%; + height: 100%; + transform-style: preserve-3d; + transition: transform 0.8s; + } + + .visual-xray, + .visual-gradcam { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; + transition: all 0.6s ease; + border-radius: 0.5rem; + overflow: hidden; + -webkit-backface-visibility: hidden; /* Fix for Safari */ + } + + .visual-xray { + z-index: 2; + transform: rotateY(0deg); + } + + .visual-gradcam { + transform: rotateY(180deg); + z-index: 1; + } + + .flipped .visual-xray { + z-index: 1; + } + + .flipped .visual-gradcam { + z-index: 2; + } + + /* Ensure images properly fit within containers */ + .visual-xray img, + .visual-gradcam img { + width: 100%; + height: 100%; + object-fit: cover; + } @@ -162,13 +209,13 @@

-
+
Wrist X-ray
-
+
Wrist X-ray with Grad-CAM visualization
@@ -398,40 +445,55 @@

- - - Viewing Heatmap - - - `; + setTimeout(() => { + flipButton.classList.remove('from-blue-500', 'to-blue-700'); + flipButton.classList.add('from-red-400', 'to-red-500'); + flipButton.innerHTML = ` + + + + Viewing Heatmap + + + `; + + // Force a repaint of the GradCAM image to ensure it's visible + const gradcamImg = visualGradcam.querySelector('img'); + if (gradcamImg) { + const currentSrc = gradcamImg.src; + gradcamImg.src = ''; + setTimeout(() => { + gradcamImg.src = currentSrc; + }, 10); + } + }, 300); } else { // Show original (flip back to X-ray view) - visualXray.classList.remove('transform', 'rotate-y-180', 'z-10'); - visualXray.classList.add('z-20'); + visualContainer.style.transform = 'rotateY(0deg)'; + visualContainer.classList.remove('flipped'); - visualGradcam.classList.remove('z-20'); - visualGradcam.classList.add('transform', 'rotate-y-180', 'z-10'); + // Force reflow to ensure animation plays properly + void visualContainer.offsetWidth; - flipButton.classList.remove('from-red-400', 'to-red-500'); - flipButton.classList.add('from-blue-500', 'to-blue-700'); - flipButton.innerHTML = ` - Toggle Heatmap View - - `; + setTimeout(() => { + flipButton.classList.remove('from-red-400', 'to-red-500'); + flipButton.classList.add('from-blue-500', 'to-blue-700'); + flipButton.innerHTML = ` + Toggle Heatmap View + + `; + }, 300); } - isFlipped = !isFlipped; }); }