Michael Freno
820a872f07
- Next.js 16 App Router project with Tailwind CSS - Plant disease knowledge base (93 diseases, 25 plants) - Image upload with client+server preprocessing - ML inference pipeline with mock/demo fallback - Responsive results page with disease cards and treatment - Full test suite (285 passing tests)
91 lines
5.3 KiB
Markdown
91 lines
5.3 KiB
Markdown
# 05. Results Page with Disease Cards, Symptom Comparison, and Treatment Steps
|
|
|
|
meta:
|
|
id: hyper-specific-plant-disease-id-05
|
|
feature: hyper-specific-plant-disease-id
|
|
priority: P1
|
|
depends_on: [hyper-specific-plant-disease-id-04]
|
|
tags: [frontend, results-page, ui]
|
|
|
|
objective:
|
|
- Build the main identification results page that displays ranked disease predictions as rich, actionable cards — each showing confidence, symptoms, cause, treatment steps, and lookalike comparisons.
|
|
|
|
deliverables:
|
|
- `app/results/[imageId]/page.tsx` — results page route (takes imageId from URL param)
|
|
- `components/ResultsDashboard.tsx` — top-level results layout: uploaded image preview + ranked prediction cards
|
|
- `components/DiseaseCard.tsx` — individual disease result card with expandable sections
|
|
- `components/ConfidenceBadge.tsx` — color-coded confidence indicator (green=high, amber=medium, red=low)
|
|
- `components/SymptomChecker.tsx` — visual symptom checklist with severity indicators
|
|
- `components/TreatmentTimeline.tsx` — ordered treatment steps with urgency tags
|
|
- `components/LookalikeWarning.tsx` — warning banner when lookalike diseases exist, with side-by-side comparison toggle
|
|
- `lib/api/identify.ts` — (already created in task 04, extend if needed)
|
|
|
|
steps:
|
|
1. Create `app/results/[imageId]/page.tsx`:
|
|
- Server Component that fetches identification results via API (or accepts them as passed data from the upload flow).
|
|
- Layout: side-by-side on desktop (image left, results right), stacked on mobile.
|
|
- Loading skeleton state while results are computed.
|
|
- Error state if identification fails.
|
|
- Empty/unexpected state.
|
|
2. Build `components/ResultsDashboard.tsx`:
|
|
- Top section: uploaded image thumbnail with metadata (imageId, upload time).
|
|
- Sortable/dismissible list of `DiseaseCard` components.
|
|
- Primary diagnosis highlighted with a prominent blue/green border.
|
|
- Secondary alternatives shown with equal weight below.
|
|
3. Build `components/DiseaseCard.tsx`:
|
|
- Collapsed state: disease name, confidence badge, causal agent type icon, one-sentence summary.
|
|
- Expanded state: full description, symptom list (from `SymptomChecker`), cause list, treatment timeline, prevention tips.
|
|
- Smooth expand/collapse animation.
|
|
- "Was this helpful?" feedback buttons at the bottom (UI only, no backend).
|
|
4. Build `components/ConfidenceBadge.tsx`:
|
|
- Pill-shaped badge: green background + checkmark for ≥0.8, amber + warning for ≥0.5, red + exclamation for <0.5.
|
|
- Shows percentage (e.g., "87% confidence").
|
|
- Hover tooltip explains confidence interpretation.
|
|
5. Build `components/SymptomChecker.tsx`:
|
|
- For the predicted disease, show a list of common symptoms with checkboxes.
|
|
- User can check which symptoms they observe on their plant.
|
|
- A match counter shows "3 of 5 symptoms match".
|
|
- Helps user confirm/reject the diagnosis.
|
|
6. Build `components/TreatmentTimeline.tsx`:
|
|
- Ordered card showing immediate, short-term, and long-term treatment steps.
|
|
- Each step has: action text, urgency badge (immediate/within week/ongoing), optional photo reference link.
|
|
- "Treatments may vary" disclaimer at bottom.
|
|
7. Build `components/LookalikeWarning.tsx`:
|
|
- Yellow banner: "This disease is easily confused with [lookalike name]."
|
|
- Click to expand side-by-side symptom comparison table.
|
|
- Comparison table columns: symptom, this disease, lookalike disease.
|
|
- Links to lookalike disease detail.
|
|
8. Add `app/results/page.tsx` redirect — if someone navigates directly without an imageId, redirect to homepage.
|
|
|
|
tests:
|
|
- **Unit:** `ConfidenceBadge` renders correct color for high/medium/low thresholds.
|
|
- **Unit:** `DiseaseCard` expands and collapses on click.
|
|
- **Unit:** `SymptomChecker` counter updates when toggling checkboxes.
|
|
- **Integration:** Navigate to `/results/{valid-imageId}` → page renders with ≥1 disease card.
|
|
- **Integration:** Navigate to `/results/invalid-id` → shows error state.
|
|
- **Integration:** `LookalikeWarning` appears when prediction includes lookalike field.
|
|
- **Visual:** All components render correctly at 375px, 768px, and 1280px widths.
|
|
|
|
acceptance_criteria:
|
|
- Results page renders within 1 second after identification API responds.
|
|
- Primary diagnosis is visually distinguished from alternatives.
|
|
- Each disease card expands to show full symptoms, causes, and treatment.
|
|
- Symptom checker lets user confirm/reject diagnosis interactively.
|
|
- Lookalike warnings appear when applicable with side-by-side comparison.
|
|
- Confidence badges use correct colors and labels.
|
|
- Page works on mobile (stacked layout) and desktop (side-by-side).
|
|
- Loading skeleton and error states are handled.
|
|
|
|
validation:
|
|
- Upload a plant photo → results page loads with disease cards.
|
|
- Click "expand" on a disease card → symptoms, causes, treatment sections appear.
|
|
- Toggle symptom checkboxes → match counter updates.
|
|
- Lookalike warning shows for easily confused diseases.
|
|
- Resize browser to mobile width → layout stacks vertically.
|
|
- Navigate to `/results/unknown` → error message with "Try again" button.
|
|
|
|
notes:
|
|
- The results page receives the identification payload either via router params (server-rendered) or client-side fetch after upload.
|
|
- For Vercel deployment, prefer client-side fetch to avoid serverless function timeouts on long inference.
|
|
- All text content is server-rendered where possible for SEO on disease information pages.
|