[V0_FILE]plaintext:file=".gitignore" # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules # next.js /.next/ /out/ # production /build # debug npm-debug.log* yarn-debug.log* yarn-error.log* .pnpm-debug.log* # env files .env* # vercel .vercel # typescript *.tsbuildinfo next-env.d.ts [V0_FILE]markdown:file="README.md" # Smart Crop Disease Detection *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/hrujuls-projects-1e548706/v0-smart-crop-disease-detection) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/ruH3LBNB3JZ) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/hrujuls-projects-1e548706/v0-smart-crop-disease-detection](https://vercel.com/hrujuls-projects-1e548706/v0-smart-crop-disease-detection)** ## Build your app Continue building your app on: **[https://v0.app/chat/ruH3LBNB3JZ](https://v0.app/chat/ruH3LBNB3JZ)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]typescript:file="app/api/predict/route.ts" import { NextRequest, NextResponse } from 'next/server'; const API_URL = 'https://crop-disease-backend-fdyh.onrender.com/predict'; const TIMEOUT_MS = 120000; // 120 seconds for cold start export async function POST(request: NextRequest) { try { const formData = await request.formData(); const file = formData.get('file') || formData.get('image'); const crop = formData.get('crop'); if (!file || !(file instanceof File)) { return NextResponse.json( { error: 'No image file provided' }, { status: 400 } ); } if (!crop) { return NextResponse.json( { error: 'No crop type provided' }, { status: 400 } ); } // Create new FormData for the backend - use 'image' as field name const backendFormData = new FormData(); backendFormData.append('image', file); backendFormData.append('crop', crop.toString()); // Create abort controller for timeout const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS); try { const response = await fetch(API_URL, { method: 'POST', body: backendFormData, signal: controller.signal, }); clearTimeout(timeoutId); if (!response.ok) { const errorText = await response.text().catch(() => 'Unknown error'); console.error('[API] Backend error:', response.status, errorText); return NextResponse.json( { error: `Backend error: ${response.status}`, details: errorText }, { status: response.status } ); } const data = await response.json(); return NextResponse.json(data); } catch (fetchError) { clearTimeout(timeoutId); if (fetchError instanceof Error && fetchError.name === 'AbortError') { return NextResponse.json( { error: 'Request timed out. The server may be starting up.' }, { status: 504 } ); } throw fetchError; } } catch (error) { console.error('[API] Predict error:', error); return NextResponse.json( { error: error instanceof Error ? error.message : 'Internal server error' }, { status: 500 } ); } } [V0_FILE]typescript:file="app/api/weather/route.ts" import { NextResponse } from 'next/server'; export interface WeatherData { temperature: number; humidity: number; apparentTemperature: number; location: string; timestamp: string; } export async function GET(request: Request) { try { const { searchParams } = new URL(request.url); const lat = searchParams.get('lat') || '20.5937'; // Default: India (central) const lon = searchParams.get('lon') || '78.9629'; // Using Open-Meteo API (free, no API key required) const response = await fetch( `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lon}¤t=temperature_2m,relative_humidity_2m,apparent_temperature&timezone=auto`, { next: { revalidate: 300 } // Cache for 5 minutes } ); if (!response.ok) { throw new Error(`Weather API responded with status: ${response.status}`); } const data = await response.json(); const weatherData: WeatherData = { temperature: Math.round(data.current.temperature_2m * 10) / 10, humidity: Math.round(data.current.relative_humidity_2m), apparentTemperature: Math.round(data.current.apparent_temperature * 10) / 10, location: `${lat}, ${lon}`, timestamp: data.current.time, }; return NextResponse.json(weatherData); } catch (error) { console.error('Weather API error:', error); return NextResponse.json( { error: 'Failed to fetch weather data' }, { status: 500 } ); } } [V0_FILE]css:file="app/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.97 0.01 145); --foreground: oklch(0.2 0.02 145); --card: oklch(0.99 0.005 145 / 0.8); --card-foreground: oklch(0.2 0.02 145); --popover: oklch(0.99 0.005 145); --popover-foreground: oklch(0.2 0.02 145); --primary: oklch(0.55 0.18 145); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.92 0.03 145); --secondary-foreground: oklch(0.3 0.05 145); --muted: oklch(0.94 0.02 145); --muted-foreground: oklch(0.45 0.03 145); --accent: oklch(0.85 0.08 145); --accent-foreground: oklch(0.25 0.05 145); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.99 0 0); --success: oklch(0.6 0.2 145); --success-foreground: oklch(0.99 0 0); --warning: oklch(0.75 0.15 85); --warning-foreground: oklch(0.25 0.05 85); --border: oklch(0.88 0.03 145); --input: oklch(0.92 0.02 145); --ring: oklch(0.55 0.18 145); --chart-1: oklch(0.55 0.18 145); --chart-2: oklch(0.65 0.15 145); --chart-3: oklch(0.75 0.12 145); --chart-4: oklch(0.45 0.12 145); --chart-5: oklch(0.85 0.08 145); --radius: 1rem; --sidebar: oklch(0.98 0.01 145); --sidebar-foreground: oklch(0.2 0.02 145); --sidebar-primary: oklch(0.55 0.18 145); --sidebar-primary-foreground: oklch(0.99 0 0); --sidebar-accent: oklch(0.92 0.03 145); --sidebar-accent-foreground: oklch(0.3 0.05 145); --sidebar-border: oklch(0.88 0.03 145); --sidebar-ring: oklch(0.55 0.18 145); } @theme inline { --font-sans: 'Inter', 'Inter Fallback', system-ui, sans-serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-success: var(--success); --color-success-foreground: var(--success-foreground); --color-warning: var(--warning); --color-warning-foreground: var(--warning-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } .glass-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.3); } .gradient-bg { background: linear-gradient(135deg, oklch(0.92 0.05 145) 0%, oklch(0.97 0.02 145) 50%, oklch(0.95 0.03 100) 100%); } [V0_FILE]typescriptreact:file="app/layout.tsx" import React from "react" import type { Metadata, Viewport } from 'next' import { Inter } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const inter = Inter({ subsets: ["latin"], variable: '--font-inter' }); export const metadata: Metadata = { title: 'Smart Crop Disease Detection', description: 'AI-powered crop disease detection for modern farmers. Upload a leaf image and get instant diagnosis with treatment recommendations.', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export const viewport: Viewport = { width: 'device-width', initialScale: 1, maximumScale: 1, userScalable: false, themeColor: '#4ade80', } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" 'use client'; import { useState, useCallback } from 'react'; import { BottomNav, type TabType } from '@/components/bottom-nav'; import { HomeScreen } from '@/components/screens/home-screen'; import { ResultsScreen } from '@/components/screens/results-screen'; import { SensorsScreen } from '@/components/screens/sensors-screen'; import { HistoryScreen } from '@/components/screens/history-screen'; import { FullPageLoader } from '@/components/loader'; import { predictDisease } from '@/lib/api'; import { saveScanHistory } from '@/lib/history'; import type { CropType, PredictionResult } from '@/lib/types'; export default function HomePage() { const [activeTab, setActiveTab] = useState('home'); const [selectedCrop, setSelectedCrop] = useState('Tomato'); const [selectedImage, setSelectedImage] = useState(null); const [selectedFile, setSelectedFile] = useState(null); const [isAnalyzing, setIsAnalyzing] = useState(false); const [predictionResult, setPredictionResult] = useState(null); const [error, setError] = useState(null); const handleImageSelect = useCallback((file: File, preview: string) => { setSelectedFile(file); setSelectedImage(preview); setError(null); }, []); const handleClearImage = useCallback(() => { setSelectedFile(null); setSelectedImage(null); setError(null); }, []); const handleAnalyze = useCallback(async () => { if (!selectedFile) return; setIsAnalyzing(true); setError(null); try { const result = await predictDisease(selectedFile, selectedCrop); setPredictionResult(result); // Save to history in background (don't await to keep UI responsive) saveScanHistory(selectedCrop, result, selectedImage || undefined); setActiveTab('results'); } catch (err) { console.error('[v0] Prediction error:', err); setError(err instanceof Error ? err.message : 'Failed to analyze image. Please try again.'); } finally { setIsAnalyzing(false); } }, [selectedFile, selectedCrop]); const handleScanAgain = useCallback(() => { setPredictionResult(null); setSelectedFile(null); setSelectedImage(null); setActiveTab('home'); }, []); const handleTabChange = useCallback((tab: TabType) => { setActiveTab(tab); }, []); return (

{isAnalyzing && }

{activeTab === 'home' && ( )} {activeTab === 'results' && predictionResult && selectedImage && ( )} {activeTab === 'sensors' && } {activeTab === 'history' && } {/* Error Display */} {error && (

{error}

)}

); } [V0_FILE]json:file="components.json" { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": true, "tsx": true, "tailwind": { "config": "", "css": "app/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } [V0_FILE]typescriptreact:file="components/bottom-nav.tsx" 'use client'; import { cn } from '@/lib/utils'; import { Home, Leaf, Activity, Clock } from 'lucide-react'; export type TabType = 'home' | 'results' | 'sensors' | 'history'; interface BottomNavProps { activeTab: TabType; onTabChange: (tab: TabType) => void; hasResults?: boolean; } const tabs = [ { id: 'home' as const, label: 'Home', icon: Home }, { id: 'results' as const, label: 'Results', icon: Leaf }, { id: 'sensors' as const, label: 'Sensors', icon: Activity }, { id: 'history' as const, label: 'History', icon: Clock }, ]; export function BottomNav({ activeTab, onTabChange, hasResults }: BottomNavProps) { return (

{tabs.map((tab) => { const Icon = tab.icon; const isActive = activeTab === tab.id; const isDisabled = tab.id === 'results' && !hasResults; return ( ); })}

); } [V0_FILE]typescriptreact:file="components/crop-selector.tsx" 'use client'; import { cn } from '@/lib/utils'; import type { CropType } from '@/lib/types'; interface CropSelectorProps { selectedCrop: CropType; onCropChange: (crop: CropType) => void; } const crops: { id: CropType; label: string; emoji: string; color: string }[] = [ { id: 'Tomato', label: 'Tomato', emoji: '🍅', color: 'from-red-400 to-red-500' }, { id: 'Mango', label: 'Mango', emoji: '🥭', color: 'from-amber-400 to-orange-500' }, ]; export function CropSelector({ selectedCrop, onCropChange }: CropSelectorProps) { return (

Select Your Crop

{crops.map((crop) => ( ))}

); } [V0_FILE]typescriptreact:file="components/history-card.tsx" 'use client'; import { cn } from '@/lib/utils'; import type { ScanHistory, ScanHistoryItem } from '@/lib/types'; import { CheckCircle2, AlertTriangle, ChevronRight } from 'lucide-react'; interface HistoryCardProps { item: ScanHistory; onClick?: () => void; } export function HistoryCard({ item, onClick }: HistoryCardProps) { const formattedDate = item.date.toLocaleDateString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', }); return ( ); } // Mock history data for the history screen export const mockHistoryData: ScanHistoryItem[] = [ { id: '1', crop: 'Tomato', disease: 'Late Blight', confidence: 0.94, isHealthy: false, imageUrl: 'https://images.unsplash.com/photo-1592841200221-a6898f307baa?w=200&h=200&fit=crop', timestamp: new Date(Date.now() - 1000 * 60 * 30), // 30 mins ago }, { id: '2', crop: 'Mango', disease: 'Healthy', confidence: 0.98, isHealthy: true, imageUrl: 'https://images.unsplash.com/photo-1553279768-865429fa0078?w=200&h=200&fit=crop', timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago }, { id: '3', crop: 'Tomato', disease: 'Powdery Mildew', confidence: 0.87, isHealthy: false, imageUrl: 'https://images.unsplash.com/photo-1582284540020-8acbe03f4924?w=200&h=200&fit=crop', timestamp: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 day ago }, { id: '4', crop: 'Mango', disease: 'Anthracnose', confidence: 0.91, isHealthy: false, imageUrl: 'https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?w=200&h=200&fit=crop', timestamp: new Date(Date.now() - 1000 * 60 * 60 * 48), // 2 days ago }, ]; [V0_FILE]typescriptreact:file="components/loader.tsx" 'use client'; import { cn } from '@/lib/utils'; interface LoaderProps { size?: 'sm' | 'md' | 'lg'; className?: string; text?: string; } export function Loader({ size = 'md', className, text }: LoaderProps) { const sizeClasses = { sm: 'h-5 w-5', md: 'h-8 w-8', lg: 'h-12 w-12', }; return (

{text && (

{text}

)}

); } export function FullPageLoader({ text = 'Analyzing your leaf...' }: { text?: string }) { return (

{text}

Our AI is examining the leaf patterns and comparing against known diseases.

This may take a moment on first load

); } [V0_FILE]typescriptreact:file="components/result-card.tsx" 'use client'; import { cn } from '@/lib/utils'; import type { PredictionResult, CropType } from '@/lib/types'; import { getTreatment } from '@/lib/types'; import { CheckCircle2, AlertTriangle, Percent, Pill, RefreshCw, Clock, Share2 } from 'lucide-react'; import { Button } from '@/components/ui/button'; interface ResultCardProps { result: PredictionResult; crop: CropType; imageUrl: string; onScanAgain: () => void; } export function ResultCard({ result, crop, imageUrl, onScanAgain }: ResultCardProps) { const treatment = getTreatment(result.disease); const confidencePercent = Math.round(result.confidence * 100); const timestamp = new Date().toLocaleString(); const handleShare = async () => { const shareData = { title: 'Crop Disease Detection Result', text: `${crop} Analysis: ${result.disease} (${confidencePercent}% confidence)\n\nTreatment: ${treatment}`, }; if (navigator.share) { try { await navigator.share(shareData); } catch (err) { console.log('[v0] Share cancelled or failed:', err); } } }; return (

{/* Header with Image */}

{crop === 'Tomato' ? '🍅' : '🥭'} {crop} Analysis

Just now

{/* Status Badge */}

{result.isHealthy ? ( ) : ( )}

{result.isHealthy ? 'Healthy Plant' : 'Disease Detected'}

{result.disease}

{/* Confidence */}

Confidence Level

AI prediction accuracy

= 80 ? 'text-success' : confidencePercent >= 50 ? 'text-warning' : 'text-destructive' )}> {confidencePercent}%

= 80 ? 'bg-success' : confidencePercent >= 50 ? 'bg-warning' : 'bg-destructive' )} style={{ width: `${confidencePercent}%` }} />

Low Medium High

{/* Treatment */}

Treatment Recommendation

Expert guidance for your crop

{treatment}

{/* Scan Details */}

Scanned: {timestamp}

{/* Action Buttons */}

); } [V0_FILE]typescriptreact:file="components/screens/history-screen.tsx" 'use client'; import { useState, useEffect, useMemo } from 'react'; import { Clock, Search, Filter, RefreshCw, Loader2 } from 'lucide-react'; import { HistoryCard } from '@/components/history-card'; import { Button } from '@/components/ui/button'; import { getScanHistory } from '@/lib/history'; import type { ScanHistory } from '@/lib/types'; export function HistoryScreen() { const [history, setHistory] = useState([]); const [isLoading, setIsLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(''); const [filterHealthy, setFilterHealthy] = useState(null); const fetchHistory = async () => { setIsLoading(true); const data = await getScanHistory(); setHistory(data); setIsLoading(false); }; useEffect(() => { fetchHistory(); }, []); // Filter and search history const filteredHistory = useMemo(() => { return history.filter((item) => { const matchesSearch = searchQuery === '' || item.disease.toLowerCase().includes(searchQuery.toLowerCase()) || item.crop.toLowerCase().includes(searchQuery.toLowerCase()); const matchesFilter = filterHealthy === null || item.isHealthy === filterHealthy; return matchesSearch && matchesFilter; }); }, [history, searchQuery, filterHealthy]); // Calculate stats const stats = useMemo(() => { const total = history.length; const healthy = history.filter(item => item.isHealthy).length; const diseased = total - healthy; return { total, healthy, diseased }; }, [history]); const handleFilterToggle = () => { if (filterHealthy === null) { setFilterHealthy(true); // Show only healthy } else if (filterHealthy === true) { setFilterHealthy(false); // Show only diseased } else { setFilterHealthy(null); // Show all } }; return (

{/* Header */}

Scan History

Your past disease analyses

{/* Search and Filter */}

setSearchQuery(e.target.value)} className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground" />

{/* Filter indicator */} {filterHealthy !== null && (

Showing: {filterHealthy ? 'Healthy plants only' : 'Diseased plants only'}

)} {/* Stats */}

{stats.total}

Total Scans

{stats.healthy}

Healthy

{stats.diseased}

Diseased

{/* Loading State */} {isLoading && (

)} {/* History List */} {!isLoading && filteredHistory.length > 0 && (

Recent Scans {searchQuery && `(${filteredHistory.length} results)`}

{filteredHistory.map((item) => ( ))}

)} {/* Empty state */} {!isLoading && filteredHistory.length === 0 && (

{history.length === 0 ? 'No scans yet' : 'No matching scans'}

{history.length === 0 ? 'Your scan history will appear here after analyzing a leaf' : 'Try adjusting your search or filter'}

)}

); } [V0_FILE]typescriptreact:file="components/screens/home-screen.tsx" 'use client'; import { Leaf, Sparkles } from 'lucide-react'; import { UploadCard } from '@/components/upload-card'; import { CropSelector } from '@/components/crop-selector'; import { Button } from '@/components/ui/button'; import { Loader } from '@/components/loader'; import type { CropType } from '@/lib/types'; interface HomeScreenProps { selectedCrop: CropType; onCropChange: (crop: CropType) => void; selectedImage: string | null; selectedFile: File | null; onImageSelect: (file: File, preview: string) => void; onClearImage: () => void; onAnalyze: () => void; isAnalyzing: boolean; } export function HomeScreen({ selectedCrop, onCropChange, selectedImage, onImageSelect, onClearImage, onAnalyze, isAnalyzing, }: HomeScreenProps) { return (

{/* Header */}

Real-Time IOT Enabled Crop Disease Detection System

Real-time smart crop monitoring

{/* Crop Selector */} {/* Upload Card */} {/* Analyze Button */} {selectedImage && ( )} {/* Info Section */}

How it works

{item.step} {item.text}

); } [V0_FILE]typescriptreact:file="components/screens/results-screen.tsx" 'use client'; import { ResultCard } from '@/components/result-card'; import type { PredictionResult, CropType } from '@/lib/types'; interface ResultsScreenProps { result: PredictionResult; crop: CropType; imageUrl: string; onScanAgain: () => void; } export function ResultsScreen({ result, crop, imageUrl, onScanAgain }: ResultsScreenProps) { return (

Analysis Results

AI diagnosis complete

); } [V0_FILE]typescriptreact:file="components/screens/sensors-screen.tsx" 'use client'; import { useState, useEffect, useCallback } from 'react'; import { Activity, Wifi, WifiOff, RefreshCw, MapPin, AlertCircle } from 'lucide-react'; import { SensorCard, soilMoistureSensor } from '@/components/sensor-card'; import { useWeather } from '@/hooks/use-weather'; import { Button } from '@/components/ui/button'; export function SensorsScreen() { const [location, setLocation] = useState<{ lat: number; lon: number } | null>(null); const [locationError, setLocationError] = useState(null); const [lastUpdated, setLastUpdated] = useState(null); const { sensorData, isLoading, isError, error, refresh, weatherData } = useWeather( location?.lat, location?.lon ); // Get user's location on mount useEffect(() => { if ('geolocation' in navigator) { navigator.geolocation.getCurrentPosition( (position) => { setLocation({ lat: position.coords.latitude, lon: position.coords.longitude, }); setLocationError(null); }, () => { // Use default location (India) if geolocation fails setLocationError('Using default location. Enable location for local weather.'); }, { enableHighAccuracy: true, timeout: 10000 } ); } }, []); // Update last updated time when data changes useEffect(() => { if (weatherData && !isLoading) { setLastUpdated(new Date()); } }, [weatherData, isLoading]); const handleRefresh = useCallback(() => { refresh(); }, [refresh]); // Combine real weather data with mock soil moisture const allSensorData = [...sensorData, soilMoistureSensor]; const sensorCount = isError ? 1 : allSensorData.length; const isConnected = !isError && sensorData.length > 0; return (

{/* Header */}

IoT Sensors

Real-time farm monitoring

{/* Connection Status */}

{isConnected ? ( ) : ( )}

{isConnected ? 'Connected' : 'Reconnecting...'}

{sensorCount} sensor{sensorCount !== 1 ? 's' : ''} {isConnected ? 'online' : 'available'}

{lastUpdated && ( {lastUpdated.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} )}

{isLoading ? ( ) : ( )} {isLoading ? 'Updating' : 'Live'}

{/* Location Info */} {(location || locationError) && (

{location ? ( Weather data for {location.lat.toFixed(2)}°, {location.lon.toFixed(2)}° ) : ( {locationError} )}

)} {/* Error State */} {isError && (

Failed to load weather data

{error?.message || 'Please check your connection and try again.'}

)} {/* Sensor Grid */}

{isLoading && sensorData.length === 0 ? ( // Loading skeletons <> {[1, 2, 3, 4].map((i) => (

))} ) : ( allSensorData.map((sensor) => ( )) )}

{/* Refresh Button */} {/* Info Card */}

Live Weather Data

Temperature and humidity are fetched in real-time from weather services. Data refreshes automatically every 60 seconds. Soil moisture requires physical IoT sensors.

); } [V0_FILE]typescriptreact:file="components/sensor-card.tsx" 'use client'; import { cn } from '@/lib/utils'; import type { SensorData } from '@/lib/types'; import { Thermometer, Droplets, Sprout } from 'lucide-react'; interface SensorCardProps { sensor: SensorData; isLoading?: boolean; } const iconMap = { temperature: Thermometer, humidity: Droplets, soil: Sprout, }; const colorMap = { normal: { bg: 'bg-success/10', icon: 'bg-success text-success-foreground', badge: 'bg-success/20 text-success', }, warning: { bg: 'bg-warning/10', icon: 'bg-warning text-warning-foreground', badge: 'bg-warning/20 text-warning', }, critical: { bg: 'bg-destructive/10', icon: 'bg-destructive text-destructive-foreground', badge: 'bg-destructive/20 text-destructive', }, }; export function SensorCard({ sensor, isLoading }: SensorCardProps) { const Icon = iconMap[sensor.icon]; const colors = colorMap[sensor.status]; return (

{sensor.status}

{sensor.name}

{isLoading ? (

) : (

{sensor.value} {sensor.unit}

)}

); } // Soil moisture remains mock data as it requires physical IoT sensors export const soilMoistureSensor: SensorData = { id: 'soil-1', name: 'Soil Moisture', value: 42, unit: '%', icon: 'soil', status: 'warning', }; [V0_FILE]typescriptreact:file="components/theme-provider.tsx" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const buttonVariants = cva( "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", { variants: { variant: { default: 'bg-primary text-primary-foreground hover:bg-primary/90', destructive: 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50', link: 'text-primary underline-offset-4 hover:underline', }, size: { default: 'h-9 px-4 py-2 has-[>svg]:px-3', sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', icon: 'size-9', 'icon-sm': 'size-8', 'icon-lg': 'size-10', }, }, defaultVariants: { variant: 'default', size: 'default', }, }, ) function Button({ className, variant, size, asChild = false, ...props }: React.ComponentProps<'button'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/upload-card.tsx" 'use client'; import React from "react" import { useRef, useState, useCallback } from 'react'; import { cn } from '@/lib/utils'; import { Upload, Camera, X, ImageIcon } from 'lucide-react'; import { Button } from '@/components/ui/button'; interface UploadCardProps { onImageSelect: (file: File, preview: string) => void; selectedImage: string | null; onClearImage: () => void; } export function UploadCard({ onImageSelect, selectedImage, onClearImage }: UploadCardProps) { const fileInputRef = useRef(null); const [isDragging, setIsDragging] = useState(false); const handleFileChange = useCallback( (file: File) => { if (file && file.type.startsWith('image/')) { const reader = new FileReader(); reader.onloadend = () => { onImageSelect(file, reader.result as string); }; reader.readAsDataURL(file); } }, [onImageSelect] ); const handleInputChange = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) handleFileChange(file); }; const handleDrop = useCallback( (e: React.DragEvent) => { e.preventDefault(); setIsDragging(false); const file = e.dataTransfer.files[0]; if (file) handleFileChange(file); }, [handleFileChange] ); const handleDragOver = (e: React.DragEvent) => { e.preventDefault(); setIsDragging(true); }; const handleDragLeave = () => { setIsDragging(false); }; if (selectedImage) { return (

Leaf image ready for analysis

); } return (

Upload Leaf Image

Take a photo or select from gallery

Supports JPG, PNG, HEIC formats

); } [V0_FILE]typescript:file="hooks/use-weather.ts" 'use client'; import useSWR from 'swr'; import type { SensorData } from '@/lib/types'; interface WeatherData { temperature: number; humidity: number; apparentTemperature: number; location: string; timestamp: string; } interface WeatherError { error: string; } const fetcher = async (url: string): Promise => { const res = await fetch(url); if (!res.ok) { const error = await res.json(); throw new Error(error.error || 'Failed to fetch weather data'); } return res.json(); }; function getTemperatureStatus(temp: number): 'normal' | 'warning' | 'critical' { if (temp < 10 || temp > 40) return 'critical'; if (temp < 15 || temp > 35) return 'warning'; return 'normal'; } function getHumidityStatus(humidity: number): 'normal' | 'warning' | 'critical' { if (humidity < 20 || humidity > 90) return 'critical'; if (humidity < 30 || humidity > 80) return 'warning'; return 'normal'; } export function useWeather(lat?: number, lon?: number) { const params = new URLSearchParams(); if (lat !== undefined) params.set('lat', lat.toString()); if (lon !== undefined) params.set('lon', lon.toString()); const queryString = params.toString(); const url = `/api/weather${queryString ? `?${queryString}` : ''}`; const { data, error, isLoading, mutate } = useSWR( url, fetcher, { refreshInterval: 60000, // Refresh every 60 seconds revalidateOnFocus: true, dedupingInterval: 30000, // Dedupe requests within 30 seconds errorRetryCount: 3, errorRetryInterval: 5000, } ); // Transform weather data to sensor format const sensorData: SensorData[] = data ? [ { id: 'temp-1', name: 'Temperature', value: data.temperature, unit: '°C', icon: 'temperature', status: getTemperatureStatus(data.temperature), }, { id: 'humidity-1', name: 'Humidity', value: data.humidity, unit: '%', icon: 'humidity', status: getHumidityStatus(data.humidity), }, { id: 'temp-2', name: 'Feels Like', value: data.apparentTemperature, unit: '°C', icon: 'temperature', status: getTemperatureStatus(data.apparentTemperature), }, ] : []; return { weatherData: data, sensorData, isLoading, isError: !!error, error, refresh: mutate, }; } [V0_FILE]typescript:file="lib/api.ts" import type { CropType, PredictionResult } from './types'; // Use our own API route as a proxy to avoid CORS issues const API_URL = '/api/predict'; export async function predictDisease( image: File, crop: CropType ): Promise { const formData = new FormData(); formData.append('file', image); formData.append('crop', crop.toLowerCase()); console.log('[v0] Sending prediction request via proxy'); console.log('[v0] File name:', image.name, 'Size:', image.size, 'Type:', image.type); console.log('[v0] Crop type:', crop); const response = await fetch(API_URL, { method: 'POST', body: formData, }); console.log('[v0] Response status:', response.status); if (!response.ok) { const errorData = await response.json().catch(() => ({ error: 'Unknown error' })); console.error('[v0] API Error:', errorData); throw new Error(errorData.error || `Prediction failed: ${response.status}`); } const data = await response.json(); console.log('[v0] API Response:', JSON.stringify(data, null, 2)); // Check if there's an error in the response if (data.error) { throw new Error(data.error); } // Parse the API response - handle multiple possible response formats const disease = data.disease || data.prediction || data.class || data.label || data.result || 'Unknown'; // Handle confidence - could be 0-1 or 0-100 let confidence = data.confidence || data.probability || data.score || 0; if (confidence > 1) { confidence = confidence / 100; // Convert percentage to decimal } // Determine if healthy - check various possible field names and values const diseaseLower = disease.toLowerCase(); const healthyFromName = diseaseLower.includes('healthy') || diseaseLower === 'healthy' || diseaseLower.includes('no disease') || diseaseLower.includes('normal'); const isHealthy = data.isHealthy ?? data.is_healthy ?? data.healthy ?? healthyFromName; const result: PredictionResult = { disease: formatDiseaseName(disease), confidence, isHealthy, }; console.log('[v0] Parsed result:', result); return result; } // Format disease name for better readability function formatDiseaseName(disease: string): string { // Remove underscores and format return disease .replace(/_/g, ' ') .replace(/\b\w/g, (char) => char.toUpperCase()) .trim(); } [V0_FILE]typescript:file="lib/history.ts" import { createClient } from '@/lib/supabase/client'; import type { ScanHistory, CropType, PredictionResult } from './types'; export async function saveScanHistory( crop: CropType, result: PredictionResult, imageUrl?: string ): Promise { const supabase = createClient(); const { data, error } = await supabase .from('scan_history') .insert({ crop: crop.toLowerCase(), disease: result.disease, confidence: result.confidence, is_healthy: result.isHealthy, image_url: imageUrl || null, }) .select() .single(); if (error) { console.error('[v0] Error saving scan history:', error); return null; } return { id: data.id, crop: data.crop as CropType, disease: data.disease, confidence: data.confidence, isHealthy: data.is_healthy, imageUrl: data.image_url, date: new Date(data.created_at), }; } export async function getScanHistory(limit = 50): Promise { const supabase = createClient(); const { data, error } = await supabase .from('scan_history') .select('*') .order('created_at', { ascending: false }) .limit(limit); if (error) { console.error('[v0] Error fetching scan history:', error); return []; } return data.map((item) => ({ id: item.id, crop: (item.crop.charAt(0).toUpperCase() + item.crop.slice(1)) as CropType, disease: item.disease, confidence: Number(item.confidence), isHealthy: item.is_healthy, imageUrl: item.image_url, date: new Date(item.created_at), })); } export async function deleteScanHistory(id: string): Promise { const supabase = createClient(); const { error } = await supabase .from('scan_history') .delete() .eq('id', id); if (error) { console.error('[v0] Error deleting scan history:', error); return false; } return true; } [V0_FILE]typescript:file="lib/supabase/client.ts" import { createBrowserClient } from '@supabase/ssr' export function createClient() { return createBrowserClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, ) } [V0_FILE]typescript:file="lib/supabase/server.ts" import { createServerClient } from '@supabase/ssr' import { cookies } from 'next/headers' /** * Especially important if using Fluid compute: Don't put this client in a * global variable. Always create a new client within each function when using * it. */ export async function createClient() { const cookieStore = await cookies() return createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options), ) } catch { // The "setAll" method was called from a Server Component. // This can be ignored if you have proxy refreshing // user sessions. } }, }, }, ) } [V0_FILE]typescript:file="lib/types.ts" export type CropType = 'Tomato' | 'Mango'; export interface PredictionResult { disease: string; confidence: number; isHealthy: boolean; } export interface ScanHistoryItem { id: string; crop: CropType; disease: string; confidence: number; isHealthy: boolean; imageUrl: string; timestamp: Date; } export interface SensorData { id: string; name: string; value: number; unit: string; icon: 'temperature' | 'humidity' | 'soil'; status: 'normal' | 'warning' | 'critical'; } export const TREATMENT_MAP: Record = { // Tomato diseases 'Late Blight': 'Apply copper-based fungicide immediately. Remove affected leaves and ensure proper air circulation. Avoid overhead watering.', 'Early Blight': 'Use chlorothalonil or copper fungicide. Remove lower affected leaves and mulch around plants to prevent soil splash.', 'Septoria Leaf Spot': 'Apply fungicide containing chlorothalonil. Remove infected leaves and avoid working with wet plants.', 'Bacterial Spot': 'Apply copper-based bactericide. Remove infected plant parts and practice crop rotation.', 'Target Spot': 'Use fungicides containing azoxystrobin or chlorothalonil. Improve air circulation and avoid overhead irrigation.', 'Tomato Yellow Leaf Curl Virus': 'Remove infected plants immediately. Control whitefly population with insecticides or yellow sticky traps.', 'Tomato Mosaic Virus': 'Remove and destroy infected plants. Disinfect tools and wash hands before handling healthy plants.', 'Spider Mites': 'Apply miticides or neem oil spray. Increase humidity and use predatory mites for biological control.', 'Leaf Mold': 'Improve ventilation and reduce humidity. Apply fungicides containing chlorothalonil or copper.', // Mango diseases 'Powdery Mildew': 'Apply sulfur-based fungicide or potassium bicarbonate spray. Ensure good air circulation around trees.', 'Anthracnose': 'Use copper fungicide before and after flowering. Prune affected branches and remove fallen debris.', 'Bacterial Canker': 'Apply copper bactericide. Prune infected branches at least 6 inches below visible symptoms.', 'Sooty Mold': 'Control insect pests (aphids, mealybugs) that produce honeydew. Wash leaves with soapy water.', 'Mango Malformation': 'Prune and destroy affected panicles. Apply fungicides during flowering season.', 'Die Back': 'Prune affected branches and apply copper-based fungicide. Ensure proper nutrition and water management.', 'Red Rust': 'Apply copper oxychloride spray. Remove severely affected leaves and improve tree nutrition.', // Healthy 'Healthy': 'Your plant is healthy! Continue with regular care: proper watering, adequate sunlight, and balanced fertilization.', 'healthy': 'Your plant is healthy! Continue with regular care: proper watering, adequate sunlight, and balanced fertilization.', }; export function getTreatment(disease: string): string { // Check for exact match first if (TREATMENT_MAP[disease]) { return TREATMENT_MAP[disease]; } // Check for partial match (case-insensitive) const lowerDisease = disease.toLowerCase(); for (const [key, value] of Object.entries(TREATMENT_MAP)) { if (lowerDisease.includes(key.toLowerCase()) || key.toLowerCase().includes(lowerDisease)) { return value; } } // Default treatment return 'Consult with a local agricultural expert for specific treatment recommendations. Consider taking the plant sample to your nearest agricultural extension office.'; } [V0_FILE]typescript:file="lib/utils.ts" import { clsx, type ClassValue } from 'clsx' import { twMerge } from 'tailwind-merge' export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]javascript:file="next.config.mjs" /** @type {import('next').NextConfig} */ const nextConfig = { typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "build": "next build", "dev": "next dev", "lint": "eslint .", "start": "next start" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@supabase/ssr": "0.8.0", "@supabase/supabase-js": "latest", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "swr": "2.4.0", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]javascript:file="postcss.config.mjs" /** @type {import('postcss-load-config').Config} */ const config = { plugins: { '@tailwindcss/postcss': {}, }, } export default config [V0_FILE]sql:file="scripts/001_create_scan_history.sql" -- Create scan_history table for storing crop disease analysis results CREATE TABLE IF NOT EXISTS public.scan_history ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), crop TEXT NOT NULL, disease TEXT NOT NULL, confidence DECIMAL(5, 4) NOT NULL, is_healthy BOOLEAN NOT NULL DEFAULT false, image_url TEXT, created_at TIMESTAMPTZ DEFAULT NOW() ); -- Enable Row Level Security ALTER TABLE public.scan_history ENABLE ROW LEVEL SECURITY; -- Allow public read access (no auth required for this demo app) CREATE POLICY "Allow public read access" ON public.scan_history FOR SELECT USING (true); -- Allow public insert access (no auth required for this demo app) CREATE POLICY "Allow public insert access" ON public.scan_history FOR INSERT WITH CHECK (true); -- Create index for faster queries CREATE INDEX IF NOT EXISTS idx_scan_history_created_at ON public.scan_history(created_at DESC); [V0_FILE]css:file="styles/globals.css" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="tsconfig.json" { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "target": "ES6", "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } [V0_FILE]png:file="public/apple-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/IbCKqe8aOyKCr3C9s15usz/public/apple-icon.png" [V0_FILE]png:file="public/icon-dark-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/_NLAIkeVwoL6vEzK2uSXmZ/public/icon-dark-32x32.png" [V0_FILE]png:file="public/icon-light-32x32.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/DVnRdScnZe8NA9byc6_b4H/public/icon-light-32x32.png" [V0_FILE]xml:file="public/icon.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/l2-w3jDSPuRqpmK6lDq3GH/public/icon.svg" [V0_FILE]png:file="public/placeholder-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/1uv3SMJqY6_jxcFCTgTEak/public/placeholder-logo.png" [V0_FILE]xml:file="public/placeholder-logo.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/XB_XF8ESrwbAjotfOd5Wmb/public/placeholder-logo.svg" [V0_FILE]jpg:file="public/placeholder-user.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/ONejAluG3EJATcwwA61bXn/public/placeholder-user.jpg" [V0_FILE]jpg:file="public/placeholder.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/BlrBc_c6JuPtjsBHFMcNJn/public/placeholder.jpg" [V0_FILE]xml:file="public/placeholder.svg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/git-blob/prj_dONF98fsMZQYJ2sOlccatzjkXZuc/J0QvC3Vjlpi92ZtRdLC4Mx/public/placeholder.svg"

{item.disease}

{result.disease}

Confidence Level

Treatment Recommendation

Scan History

Recent Scans {searchQuery && `(${filteredHistory.length} results)`}

{history.length === 0 ? 'No scans yet' : 'No matching scans'}

Real-Time IOT Enabled Crop Disease Detection System

How it works

Analysis Results

IoT Sensors

Live Weather Data

Upload Leaf Image