[Frontend/UI] Display Fish Species Classification on ResultsPage & ScannerPage

[jpdevhub]

Problem

The /api/v1/scan endpoint will soon return a species object (name + confidence) but the frontend ResultsPage.tsx and ScannerPage.tsx have no UI to display this data.

Goal

Design and implement a polished Species Badge component that displays the AI-predicted fish species and its confidence score.

Acceptance Criteria

• New component src/components/SpeciesBadge.tsx created
  • Displays species name (e.g., Rohu Carp)
  • Displays confidence as a percentage badge (e.g., 94.5%)
  • Glows green if confidence > 85%, amber if 60–85%, red below 60%
  • Shows a compact top-3 expandable dropdown (click to expand)
• ResultsPage.tsx updated to render <SpeciesBadge /> when scan.species is present
• ScannerPage.tsx updated to show species in the result card
• Gracefully hides if species is null (no UI broken state)
• Translation keys added to en.json, hi.json, bn.json
  • species.detected, species.confidence, species.notDetected
• Works correctly in both dark and light mode (no hardcoded dark colors)

Design Reference

Use the existing design system tokens: text-neon, text-secondary, GlassCard, font-mono.
The badge should feel like a natural extension of the existing Grade/Score display.

Note

This issue depends on: [ML/Backend] Integrate MobileNetV3 Species Classifier into /api/v1/scan Endpoint

[arcgod-design]

Hi @jpdevhub! I'd love to work on this as part of SSoC 2026. I'm @arcgod-design.

My Approach:

• Create src/components/SpeciesBadge.tsx that accepts species: { name: string, confidence: number, top3: Array } props
• Display species name with a color-coded confidence badge (green >85%, amber 60-85%, red <60%)
• Include a compact top-3 expandable dropdown
• Conditionally render the badge in ResultsPage.tsx and ScannerPage.tsx only when species data is present in the scan response
• Ensure graceful handling when species is null/undefined (no backend species model yet)

Could you please assign this issue to me? Ready to start immediately!