E-06: Scan Confidence Badge on Result Card

[jpdevhub]

The Idea

Our ML model returns a confidence_score and an uncertain_prediction_flag, but we aren't showing this to the user. We should display a small badge indicating whether the AI is highly confident or uncertain.

What needs to be done

• Update the ScanResultCard or AnalysisDashboard component.
• Display a small, clean badge (e.g., green for high confidence, yellow for uncertain) based on the existing API response data.

A quick and easy frontend task that makes the AI feel much more transparent.

[aditikhushi81-cpu]

Hi, I would like to work on this issue under SSoC 2026. Could you please assign it to me?

[jpdevhub]

Hi @aditikhushi81-cpu! I am assigning this issue to you. Since this is frontend task, here are some contraints and guide to follow:
The Types: Check src/lib/api.ts to see the ScanResult interface. Ensure that confidence_score (number) and uncertain_prediction_flag (boolean) are included in the type definitions so TypeScript doesn't yell at you!
The UI: Head over to the page where the scan results are displayed (likely src/pages/AnalysisDashboard.tsx or ResultsPage.tsx).
Create small clean badge UI next to the final grade or score.
Use Tailwind version v4 classes to style it.
Logic: If uncertain_prediction_flag is true (or confidence is below ~70%), show a yellow/orange badge saying "Low Confidence". Otherwise, show a green badge saying "High Confidence".
Let us know if you have any questions or get stuck. Looking forward to your pr!