Mobile: - Replace LibraryScreen with MyPlantsScreen (date-grouped scan list, swipe actions, search, pull-to-refresh) - Add ScanDetailScreen (immersive hero, confidence bar, cepage card, share/delete) - Add DiseaseDetailScreen + GuideDetailScreen (hero pattern, animated entry) - Add useScanDetail, useHistory (useCallback fix), dateGrouping utility - Connect diseases/guides to admin API with cache + offline fallback - Add NetworkContext, ToastContext, Skeleton loading components - Extend ScanRecord type (isFavorite, location) - Full i18n FR/EN for all new screens Admin (vineye-admin): - Enrich Disease/Guide Prisma schema (timeline, conditions, actions, sections) - Enriched disease-form (7 sections) + guide-form (structured sections editor) - Add mobile public API endpoints (diseases, guides by slug) - Add Prisma migration + enriched seed data - UI polish: sidebar, login, layout updates Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
14 KiB
VinEye - Project Summary
Plateforme de detection de maladies de la vigne par IA Derniere mise a jour : 2026-04-09
Vue d'ensemble
VinEye est une plateforme complete de detection de maladies de la vigne composee de :
- Application mobile (VinEye) : React Native / Expo, scan camera avec inference IA embarquee
- Dashboard admin (vineye-admin) : Next.js, gestion du contenu et suivi des utilisateurs
- Pipeline ML : CNN TensorFlow entraine sur 9 027 images de feuilles de vigne
Public cible : amateurs de vin, viticulteurs, jardiniers.
Stack technique
| Couche | Mobile (VinEye) | Admin (vineye-admin) | ML |
|---|---|---|---|
| Framework | React Native 0.81 + Expo SDK 54 | Next.js 16.2 | TensorFlow / Keras |
| Langage | TypeScript strict | TypeScript strict | Python 3 |
| Styling | NativeWind (Tailwind 3.4) + StyleSheet | Tailwind 4 + shadcn/ui | — |
| Navigation | React Navigation v7 | App Router | — |
| Images | expo-image | next/image | — |
| Gradients | expo-linear-gradient | — | — |
| Animations | react-native-reanimated 4.1 | — | — |
| Gestures | react-native-gesture-handler 2.28 | — | — |
| Edge-to-edge | expo-navigation-bar + expo-status-bar | — | — |
| Icones | lucide-react-native | lucide-react | — |
| Cache | AsyncStorage + cacheManager (TTL) | — | — |
| Reseau | expo-network (connectivite) | — | — |
| Toast | sonner-native | Sonner | — |
| Base de donnees | AsyncStorage (local) | PostgreSQL via Prisma 7.6 | — |
| Auth | — (local only) | Better Auth (JWT + sessions) | — |
| Forms | — | Zod validation | — |
| IA | TFLite (mock actuel) | — | CNN 4 blocs conv, 3.8M params |
Avancement global
Application mobile — 95% complete
| Feature | Status | Detail |
|---|---|---|
| Navigation (14 ecrans) | Done | Bottom tabs + FAB scanner + stack screens + 4 ecrans detail |
| HomeScreen | Done | Header, search, CTA, carousel maladies, alertes, guides |
| Scanner (camera) | Done | Capture photo, overlay detection, confidence meter |
| Resultats scan | Done | Affichage cepage, confiance, tags, grille infos |
| MyPlants (ex-Library) | Done | Liste scans groupes par date (today/yesterday/week/month/older), swipe-to-action (favori+suppr), recherche, pull-to-refresh, empty state CTA |
| ScanDetailScreen | Done | Hero immersif 380px, carte resultat + barre confiance animee, carte cepage conditionnelle, meta card (date+XP), location card (stub), share/delete actions |
| Profil utilisateur | Done | Avatar, stats Bento 2x2, XP, niveau |
| Parametres | Done | Theme, langue, notifications, referral |
| Guides maladies | Done | Connecte a l'API backend, SmallDiseaseCard en grille sur l'ecran Guides, icones Lucide par maladie, dot severite, degrade bordure |
| Guides pratiques | Done | 3 guides avec contenu structure, GuideListItem iOS-style avec icones par categorie, stagger animations |
| Pages de detail | Done | DiseaseDetailScreen, GuideDetailScreen — hero immersif, edge-to-edge, animation d'entree |
| Edge-to-edge | Done | Contenu defile derriere status bar, navigation bar transparente (Android), useSafeAreaInsets |
| Transitions navigation | Done | Fade 250ms par defaut, slide_from_bottom pour modal Result, gesture back active |
| API mobile | Done | Service API centralise (apiGet), cache AsyncStorage avec TTL, detection IP automatique Expo |
| Connectivite reseau | Done | Hook useNetworkStatus (expo-network), NetworkContext, detection online/offline temps reel |
| Toast | Done | sonner-native, toasts auto offline/online, variantes success/error/warning/info |
| Sync maladies | Done | useDiseases/useDiseaseDetail : API → cache → fallback local, pull-to-refresh |
| Sync guides | Done | useGuides/useGuideDetail : meme strategie 3 niveaux |
| Cards maladies | Done | SmallDiseaseCard reutilisable, icones Lucide (Droplets, Snowflake, Skull...), dot severite anime, degrade bordure |
| List items guides | Done | GuideListItem iOS-style, icones par categorie (Leaf, Calendar, Grape), stagger animations |
| Skeleton loading | Done | Composants shimmer pour cards maladies, list items guides, carousel |
| Gamification | Done | 7 niveaux, 7 badges, XP, streaks, decouvertes |
| i18n (FR + EN) | Done | Toutes les cles traduites (maladies enrichies + guides sections + tips) |
| Notifications | Partiel | UI uniquement, pas de push notifs |
| Carte/Map | Partiel | Placeholder, geoloc non implementee |
| Inference IA reelle | A faire | Mock actuellement (weighted random) |
Dashboard admin — 95% complete
| Feature | Status | Detail |
|---|---|---|
| Authentification | Done | Login email/password, sessions 7j, middleware |
| Dashboard stats | Done | Compteurs, scans recents, top maladies (Recharts) |
| CRUD Maladies enrichi | Done | Formulaire 7 sections : infos, symptomes, timeline visuelle, details techniques (accordeon), images par URL, apparence, publication |
| CRUD Guides enrichi | Done | Formulaire 5 sections : infos, contenu ancien (deprecie), editeur sections structurees (reorder, delete, tip, image), apparence, publication |
| Gestion alertes | Done | Alertes saisonnieres, region, dates, toggle actif |
| Gestion utilisateurs | Done | Liste paginee, stats, ban/unban, roles |
| API REST admin | Done | Endpoints complets pour diseases, guides, alerts, scans, users |
| API mobile publique | Done | 4 endpoints GET sans auth (/api/mobile/diseases, guides + detail par slug), CORS, pagination, cache headers |
| Schema DB enrichi | Done | Disease : +timeline, +conditions[], +actions[], +impactedParts[], +DiseaseImage[]. Guide : +readTime, +coverImage, +GuideSection[] |
Pipeline ML — 60% complete
| Feature | Status | Detail |
|---|---|---|
| Architecture CNN | Done | 4 blocs conv + classification, 3.8M params |
| Dataset | Done | 9 027 images, 4 classes (Black Rot, ESCA, Healthy, Leaf Blight) |
| Entrainement | Done | 100 epochs, Adam lr=0.001, augmentation |
| Precision modele | A ameliorer | ~30% (surapprentissage probable vers ESCA) |
| Export TFLite | A faire | Conversion pour inference mobile |
| Integration mobile | A faire | Remplacer le mock dans services/tflite/model.ts |
Points critiques
1. Inference IA — BLOQUANT
Le coeur du projet (la detection de maladie) est actuellement mocke. Le fichier VinEye/src/services/tflite/model.ts retourne des resultats aleatoires ponderes (70% vigne, 20% incertain, 10% non-vigne).
Actions requises :
- Ameliorer la precision du modele (actuellement ~30%)
- Exporter le modele en TFLite
- Integrer les poids reels dans l'app mobile
- Tester la performance sur device (latence, memoire)
- Eventuellement : quantization / pruning pour optimiser
2. Stockage images — PARTIELLEMENT RESOLU
Les DiseaseImage et GuideSection.image existent en DB avec des URLs. Il manque un systeme d'upload reel (S3/Cloudinary). Les images sont ajoutees par URL manuelle dans les formulaires admin.
3. Synchronisation mobile <-> serveur — PARTIELLEMENT RESOLU
Les maladies et guides se synchronisent via l'API mobile publique avec cache local et fallback offline. Il reste a implementer : auth mobile, sync des scans, sync des alertes.
4. Precision du modele ML
~30% de precision est insuffisant pour un usage reel. Le modele semble surfit vers la classe ESCA.
Pistes :
- Augmenter et equilibrer le dataset
- Experimenter d'autres architectures (ResNet, EfficientNet transfer learning)
- Cross-validation + early stopping
- Analyser la matrice de confusion par classe
5. Absence de tests
Aucun test unitaire ou d'integration dans aucune partie du projet (mobile, admin, ML).
6. Images placeholder
Les images des maladies et cepages utilisent des URLs Unsplash generiques (vignobles, raisins, feuilles). A remplacer par de vraies photos agronomiques specifiques a chaque maladie (stockage local ou distant).
7. Formulaires admin enrichis — DONE
Les formulaires CRUD pour maladies et guides reflètent tous les champs du schema enrichi (timeline, conditions, actions, sections structurees, images). Validation Zod côte serveur.
Features detaillees
Gamification (mobile)
| Element | Detail |
|---|---|
| Niveaux | 7 : Bourgeon → Vendangeur → Amateur → Sommelier → Expert → Maitre → Maitre de Chai |
| XP | +10 scan, +25 nouveau cepage, +5 streak, +5 confiance >90% |
| Badges | 7 : Premier Scan, Connaisseur, En Feu, Oeil Affute, Explorateur, Perfectionniste, Maitre |
| Streaks | Scans quotidiens consecutifs |
Base de maladies (7)
| Maladie | Type | Severite |
|---|---|---|
| Mildiou | Fongique | Haute |
| Oidium | Fongique | Haute |
| Black Rot | Fongique | Haute |
| ESCA | Fongique | Moyenne |
| Botrytis | Fongique | Moyenne |
| Flavescence Doree | Bacterien | Haute |
| Chlorose | Abiotique | Basse |
Base de cepages (~15)
Varietes francaises avec : nom FR/EN, couleur, regions, caracteristiques. Utilises pour l'affichage post-scan (mock actuel attribue un cepage aleatoire quand result=vine).
Schema base de donnees (admin)
User (better-auth + role, xp, level, banned)
├── Session
├── Account
└── Scan* ──→ Disease?
Disease (slug, name FR/EN, type, severity, symptoms, treatment, published)
Guide (slug, title FR/EN, content, category, order, published)
SeasonAlert (title FR/EN, type, region, active, dateRange)
API REST (admin)
| Methode | Endpoint | Description |
|---|---|---|
| GET/POST | /api/diseases |
Liste / creation |
| GET/PUT/DELETE | /api/diseases/[id] |
Detail / edition / suppression |
| GET/POST | /api/guides |
Liste / creation |
| GET/PUT/DELETE | /api/guides/[id] |
Detail / edition / suppression |
| GET/POST | /api/alerts |
Liste / creation |
| GET/PUT/DELETE | /api/alerts/[id] |
Detail / edition / suppression |
| GET/POST | /api/scans |
Liste / creation |
| GET/PUT/DELETE | /api/scans/[id] |
Detail / edition / suppression |
| GET | /api/users |
Liste utilisateurs |
| GET | /api/users/[id] |
Detail utilisateur |
Design System (mobile)
| Token | Valeur |
|---|---|
| Fond app | #F8F9FB |
| Cards | #FFFFFF, radius 24-32, border #F0F0F0 |
| Primary (vert vigne) | #2D6A4F (800), #1B4332 (900) |
| Accent (violet raisin) | #8E24AA (700), #6A0572 (800) |
| Texte principal | #1A1A1A |
| Texte secondaire | #8E8E93 |
| Style | Bento Box minimaliste, espaces genereux |
Arborescence du projet
Grapevine_Disease_Detection/
├── VinEye/ # App mobile React Native + Expo
│ ├── App.tsx # Point d'entree
│ ├── src/
│ │ ├── screens/ # 14 ecrans (+ DiseaseDetail, GuideDetail, ScanDetail, MyPlants)
│ │ ├── components/ # UI (ui/, home/, scanner/, gamification/, history/, guides/, my-plants/, disease/)
│ │ ├── config/ # api.ts (base URL dynamique Expo)
│ │ ├── contexts/ # NetworkContext, ToastContext
│ │ ├── services/ # tflite, storage, haptics
│ │ ├── services/api/ # client.ts, diseases.ts, guides.ts, mappers.ts
│ │ ├── services/cache/ # cacheManager.ts (AsyncStorage TTL)
│ │ ├── hooks/ # useDetection, useGameProgress, useHistory, useScanDetail, useDiseases, useGuides, useNetworkStatus
│ │ ├── navigation/ # RootNavigator, BottomTabNavigator
│ │ ├── i18n/ # fr.json, en.json
│ │ ├── theme/ # colors, typography, spacing
│ │ ├── data/ # diseases.ts, guides.ts
│ │ ├── types/ # detection, gamification, navigation
│ │ └── utils/ # cepages, achievements, dateGrouping, diseaseIcons, guideIcons
│ ├── app.json # Config Expo
│ └── package.json
│
├── vineye-admin/ # Dashboard admin Next.js
│ ├── app/
│ │ ├── (admin)/ # Routes protegees (dashboard, diseases, guides, alerts, users)
│ │ ├── (auth)/login/ # Page de connexion
│ │ └── api/ # Routes API REST
│ ├── components/ # UI admin (shadcn/ui)
│ ├── components/admin/ # disease-form.tsx, guide-form.tsx (formulaires enrichis)
│ ├── app/api/mobile/ # Endpoints publics pour l'app mobile
│ │ ├── diseases/ # route.ts, [slug]/route.ts
│ │ └── guides/ # route.ts, [slug]/route.ts
│ ├── lib/ # auth.ts, prisma.ts, utils.ts, validations.ts
│ ├── prisma/schema.prisma # Schema DB enrichi (Disease, Guide, DiseaseImage, GuideSection)
│ └── package.json
│
├── docs/images/ # Documentation dataset
├── venv/ # Environnement Python (training ML)
└── PROJECT_SUMMARY.md # Ce fichier
Prochaines etapes prioritaires
- Ameliorer le modele ML — Passer de ~30% a >80% de precision (transfer learning, dataset equilibre)
- Integrer TFLite dans l'app — Remplacer le mock par le vrai modele
- Stockage images — S3 ou Cloudinary pour les photos (remplacer les URLs manuelles)
- Auth mobile + sync scans — Connecter les scans a l'API (auth mobile, queue offline)
- Sync alertes — Connecter les alertes saisonnieres au backend
- Push notifications — Firebase Cloud Messaging
- Tests — Ajouter des tests unitaires et d'integration
- Carte des maladies — Implementer la feature Map avec donnees geoloc reelles