webapp/README.md

YOLOv5 Web Application - Installation et Lancement

🚀 Installation Rapide

1. Installer les dépendances Python pour le backend

cd webapp/backend
pip install -r requirements.txt

2. Lancer l'application

Option 1: Lancer avec le script PowerShell (Recommandé)

.\webapp\start.ps1

Option 2: Lancer manuellement

cd webapp/backend
python main.py

📱 Fonctionnalités

✅ Implémentées

• 🎥 Détection en temps réel depuis la webcam avec WebSocket
• 📤 Upload drag-and-drop d'images multiples
• 🎨 Visualisation interactive des bounding boxes
• 📊 Dashboard avec statistiques en temps réel
• 🎯 Suivi multi-objets avec confiance
• 💾 Historique des détections persistant
• 🌙 Mode sombre/clair avec sauvegarde de préférence
• 📱 Design responsive mobile-friendly avec Tailwind CSS

🎨 Interface

• Design moderne avec Tailwind CSS
• Animations fluides et transitions
• Charts interactifs avec Chart.js
• Icons avec Font Awesome

🌐 Accès

Une fois lancé, l'application est accessible sur :

• Frontend: http://localhost:8000
• API Docs: http://localhost:8000/docs
• WebSocket: ws://localhost:8000/ws

📋 API Endpoints

Détection

• POST /detect - Détecter objets dans une image
• POST /detect/batch - Détecter objets dans plusieurs images
• GET /statistics - Obtenir les statistiques
• GET /history - Obtenir l'historique
• DELETE /history - Effacer l'historique
• GET /models - Lister les modèles disponibles
• WS /ws - WebSocket pour détection temps réel

🛠️ Configuration

Modèles disponibles:

• yolov5n - Nano (le plus rapide)
• yolov5s - Small (équilibré)
• yolov5m - Medium
• yolov5l - Large
• yolov5x - Extra Large (le plus précis)

Paramètres ajustables:

• Seuil de confiance (0.1 - 0.9)
• Modèle YOLOv5
• Résolution vidéo webcam

🎯 Utilisation

Webcam en Direct

1. Cliquez sur l'onglet "Webcam en Direct"
2. Cliquez sur "Démarrer"
3. Autorisez l'accès à la webcam
4. Les détections apparaissent en temps réel !

Upload d'Images

1. Cliquez sur l'onglet "Upload Images"
2. Glissez-déposez des images ou cliquez pour sélectionner
3. Cliquez sur "Analyser les images"
4. Visualisez les résultats avec bounding boxes

Dashboard

• Consultez les statistiques globales
• Visualisez les graphiques de performance
• Analysez les objets les plus détectés

Historique

• Consultez toutes les détections précédentes
• Effacez l'historique si nécessaire

🔧 Troubleshooting

Erreur de connexion webcam

• Vérifiez les permissions du navigateur
• Assurez-vous qu'aucune autre application n'utilise la webcam

Erreur WebSocket

• Vérifiez que le backend est bien lancé
• Vérifiez le pare-feu (port 8000)

Performance lente

• Utilisez un modèle plus léger (yolov5n ou yolov5s)
• Réduisez le seuil de confiance
• Fermez les autres applications

📦 Structure

webapp/
├── backend/
│   ├── main.py           # Serveur FastAPI
│   └── requirements.txt  # Dépendances Python
├── static/
│   ├── index.html        # Interface utilisateur
│   └── app.js            # Logique JavaScript
└── start.ps1             # Script de lancement

🎨 Technologies Utilisées

Backend:

• FastAPI - Framework web moderne
• WebSocket - Communication temps réel
• PyTorch - Inférence YOLOv5
• OpenCV - Traitement d'images

Frontend:

• HTML5 + JavaScript ES6
• Tailwind CSS - Framework CSS
• Chart.js - Graphiques interactifs
• Font Awesome - Icons

📝 Notes

• Les détections sont sauvegardées en mémoire (redémarrage = perte)
• Maximum 100 entrées dans l'historique
• Format supporté: JPEG, PNG
• Résolution recommandée webcam: 1280x720

🌟 Améliorations Futures Possibles

• Enregistrement vidéo des détections
• Export des résultats en CSV/JSON
• Support des vidéos uploadées
• Mode multi-caméras
• Notifications en temps réel
• Base de données persistante
• Authentification utilisateur