React frontend for a real-time plant disease classifier. Upload a leaf image and get instant predictions across 38 disease classes with per-class confidence scores, powered by a custom CNN trained on the PlantVillage dataset.

Live demo: app-dlite-net.vercel.app
Backend repo: cnn-backend

• Upload any apple leaf image (drag-and-drop or file picker)
• Sends the image to the Flask inference API
• Displays the top predicted disease class with confidence scores across all 38 classes
• Responsive layout — works on desktop and mobile

• React with TypeScript
• CSS (custom, no UI framework)
• Deployed on Vercel

Prerequisites: Node.js >= 14, npm or yarn

git clone https://github.com/Somansh1/cnn-frontend.git
cd cnn-frontend
npm install

Create a .env file in the root and point it at your backend:

REACT_APP_API_URL=http://localhost:5000

For the live demo, this is already set to the deployed backend on Render/Heroku.

npm start        # dev server at http://localhost:3000
npm run build    # production build

src/
  components/    # ImageUploader, PredictionCard, ConfidenceBar
  pages/         # Home
  styles/        # Global and component CSS
  App.tsx
public/

• Model: Custom CNN, 18 MB, 99.16% accuracy on PlantVillage test set
• Backend: Flask API serving a .h5 Keras model — see cnn-backend

MIT