Skip to content

feat(dashboard): add Grad-CAM heatmap overlay visualizer#106

Open
Deepak06-v wants to merge 1 commit into
jpdevhub:mainfrom
Deepak06-v:feat/gradcam-overlay
Open

feat(dashboard): add Grad-CAM heatmap overlay visualizer#106
Deepak06-v wants to merge 1 commit into
jpdevhub:mainfrom
Deepak06-v:feat/gradcam-overlay

Conversation

@Deepak06-v

Copy link
Copy Markdown

Description

This PR resolves the issue by integrating the Grad-CAM activation map overlay visualization on the scan analysis page (AnalysisDashboard.tsx).

Key changes:

  • Retrieves photo_url from the scan result and fetches the image in the frontend, sending it to the backend /api/v1/gradcam endpoint to generate the Grad-CAM base64 JPEG heatmap.
  • Dynamically splits the desktop layout when a photo is available to display a Scan Visualization card on the left and the Score Card / Species Panel stacked on the right. If no photo is available, falls back to the original side-by-side layout.
  • Renders the scanned fish with viewfinder corners and stacks the Grad-CAM heatmap overlay on top of it.
  • Added interactive controls to the visualization card:
    • Toggles: Quick-buttons to switch between ORIGINAL (0% opacity), BLENDED (50% opacity), and HEATMAP (100% opacity).
    • Blend Slider: A range slider to adjust opacity smoothly from 0% to 100%.
    • Color Legend: Shows a LOW → HIGH color gradient bar when the heatmap is visible.
    • State Overlays: Styled overlays for loading (spinner) and error (retry button) states.

Checklist

  • npm run lint passes with no errors
  • npm run build compiles without TypeScript errors
  • python -m pytest passes (including new tests I added)
  • No .env files, API keys, secrets, model weights, or __pycache__ in this diff
  • Branch is rebased on main, not merged

@vercel

vercel Bot commented Jun 14, 2026

Copy link
Copy Markdown

@Deepak06-v is attempting to deploy a commit to the karan3431's projects Team on Vercel.

A member of the Team first needs to authorize it.

@coderabbitai

coderabbitai Bot commented Jun 14, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@Deepak06-v, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 21 minutes and 39 seconds. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: a3d3c32a-8ab9-4f2c-8259-5757ad341a25

📥 Commits

Reviewing files that changed from the base of the PR and between b748bcf and 3f577b3.

📒 Files selected for processing (1)
  • src/pages/AnalysisDashboard.tsx

Warning

.coderabbit.yaml has a parsing error

The CodeRabbit configuration file in this repository has a parsing error and default settings were used instead. Please fix the error(s) in the configuration file. You can initialize chat with CodeRabbit to get help with the configuration file.

💥 Parsing errors (1)
Validation error: Invalid input: expected object, received boolean at "reviews.auto_review"
⚙️ Configuration instructions
  • Please see the configuration documentation for more information.
  • You can also validate your configuration using the online YAML validator.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant