Skip to content

Add Grad-CAM visualization styles and flip functionality#4

Merged
alok-devforge merged 1 commit intogh-pagesfrom
gh-pages-tailwind
Apr 28, 2025
Merged

Add Grad-CAM visualization styles and flip functionality#4
alok-devforge merged 1 commit intogh-pagesfrom
gh-pages-tailwind

Conversation

@alok-devforge
Copy link
Owner

This pull request introduces enhancements to the Grad-CAM visualization feature in gradcam.html and updates the .vscode/settings.json file to configure the Live Server port. The changes focus on improving the 3D flip animation, ensuring smooth transitions, and addressing rendering issues for Grad-CAM images.

Grad-CAM Visualization Enhancements:

  • New CSS Classes for 3D Flip Animation: Added .visual-container, .visual-xray, and .visual-gradcam classes to support 3D flip animations with smooth transitions and proper backface visibility handling. (gradcam.html, gradcam.htmlR131-R179)
  • Improved Flip Logic: Refactored the flip button's event listener to toggle the flipped class on the container and ensure animations play correctly by forcing reflows. (gradcam.html, gradcam.htmlL401-R458)
  • Grad-CAM Image Rendering Fix: Added logic to repaint the Grad-CAM image by temporarily clearing and resetting its src attribute to address visibility issues during the flip. (gradcam.html, gradcam.htmlR469-L434)

Development Environment Configuration:

  • Live Server Port Configuration: Updated .vscode/settings.json to set the Live Server port to 5502 for consistent local development. (.vscode/settings.json, .vscode/settings.jsonR1-R3)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant