Etape 1 :
1) Installation Des Librairies Requises :
pip install flask ultralytics opencv-python
Etape 2 :
2. Organisation Des Dossiers :
C:\Users\Lenovo\Desktop\PFE_Fatma\WebAppYolo
templates : [Link] : [Link]
static : alertes : images
model : [Link]
uploads
[Link]
psw:1234
admin :admin
Etape 3 :
1) Écrire du code dans [Link]
2) Créer une page [Link] et [Link] dans les modèles :
Etape 4 :
1) Environnement ouvert (env) :
pip install flask
python -m venv yolov8_env
yolov8_env\Scripts\activate
2) Lancez l'application Flask :
cd C:\Users\Lenovo\Desktop\PFE_Fatma\WebAppYolo
pip install ultralytics opencv-python
python [Link]
Si le code est correct, il apparaîtra dans le terminal :
3) Ouvrez l'application :
au navigateur et entrez :
[Link]
Etape 5 :
1) Téléchargez l'image, exécutez YOLO et alertez :
Mettre à jour le fichier [Link] :
4) Mettez à jour le fichier [Link] et ajoutez un nouvel itinéraire de
téléchargement et Ouvrez l'application :
au navigateur et entrez :
[Link]
Développement de l’application web avec Flask :
1) Utilisation du framework Flask pour créer une interface web
2) Création de la structure du projet
3) Mise en place du système de connexion :
Ajout d’une page de connexion sécurisée ([Link]) avec
un nom d’utilisateur et un mot de passe :
Protection de l’accès aux autres pages (accueil et analyse) en cas
d’échec d’authentification :
4) Page d’accueil (index) :
Création d’une page [Link] avec une interface
visuellement agréable (image de fond, boutons, messages
de bienvenue).
Bouton redirigeant vers la page d’analyse
5) Page d’analyse avec détection automatique :
Création de la page [Link] qui permet d’uploader une
image .
Dès l’envoi de l’image, le modèle YOLO analyse les objets
présents.
Si le modèle détecte l’absence de casque ou gilet, un message
d’alerte s’affiche + sauvegarde de l’image analysée.
Si tout est correct, un message vert de validation s’affiche.
connecter Flask à MySQL (une base de données
réelle)
1) Installer la bibliothèque de liaison MySQL :
pip install flask-mysqldb
2) réer une base de données dans MySQL sur XAMPP : pfe_securite
3) Créer la table Analysis_logs :
4) Connectez Flask à MySQL dans [Link] :
5) Créez une page « Logs » (blog d'analyse) qui affiche toutes les
opérations qui ont eu lieu auparavant, en utilisant Flask et
MySQL :
Préparation de la base de données (presque
terminée) :
La table analyze_logs contient les colonnes suivantes :
id (clé initiale, auto-incrémentation)
image_name (nom de l'image)
casque (1 ou 0)
gilet (1 ou 0)
date_test (date/heure)
Créez une page [Link]
Ajouter un itinéraire dans [Link].
Ajouter un bouton dans [Link].
Ensuite, accédez à /logs ou cliquez sur le bouton.
Affichez les résultats, triés par temps et par score.
6) Ajouter une analyse vidéo dans l'application :
Ainsi, l'utilisateur peut télécharger une vidéo (mp4) et le système effectuera
une détection et enregistrera le résultat + le stockera dans la base de données.
Nouvelle page [Link] dans les modèles
Fichier video_upload.html
Le fichier video_result.html affiche la vidéo après analyse.
Objectif de l'application
L’objectif est de développer une application web avec Flask permettant :
L’analyse d’images pour détecter les EPI (Casque, Gilet) avec YOLOv8.
L’analyse automatique de vidéos pour afficher une version annotée.
La visualisation du résultat dans une page web claire et responsive.
La gestion des utilisateurs + logs des analyses via MySQL.
Ce qui fonctionne actuellement
1. Connexion utilisateur via une base de données MySQL.
2. Page d’accueil fonctionnelle.
3. Analyse d’images :
o L’image est uploadée.
o Elle est traitée avec le modèle YOLOv8.
o Le résultat est annoté et affiché correctement.
o Les données (casque/gilet) sont enregistrées dans la base de logs.
4. Analyse de vidéos :
o La vidéo uploadée est traitée image par image.
o Un seul fichier annoté est généré.
o Les vidéos originales sont supprimées après traitement (bonne gestion
d’espace).
Problème rencontré
Le problème principal est le suivant :
Après l’analyse d’une vidéo, la version annotée (annotated.mp4) est bien générée
dans le dossier static/videos/, mais :
o Elle n’apparaît pas automatiquement dans la page video_result.html.
o Il semble y avoir un souci entre le nom de la vidéo générée et le lien affiché.
o Le navigateur essaie d’accéder au fichier mais ne l’affiche pas dans l’élément
<video> (probablement à cause d’un problème de lien ou de timing du render).
Étape suivante : Élaboration de l’architecture du système IoT
Objectif : Concevoir une solution matérielle complète en intégrant les capteurs nécessaires
pour améliorer la sécurité du personnel sur le chantier.
Composants de l’architecture :
1) Application Flask (backend)
Reçoit les vidéos/images.
Traite les vidéos avec YOLOv8 pour détecter les EPI (Casque, Gilet).
Génère une vidéo annotée en sortie.
Interface utilisateur simple (upload, affichage résultat, logs).
2) Caméra (Webcam ou IP)
Envoie des flux vidéo à l’application Flask.
Peut être montée dans une zone sensible du chantier.
3) Capteurs IoT (connectés via Wi-Fi ou MQTT)
Capteur de présence ou mouvement : détecte la présence d’un
travailleur.
Capteur de température ou gaz : sécurité environnementale.
Envoient les données vers une passerelle (ex. : ESP32, Raspberry Pi).
4) Module passerelle IoT
Regroupe les données des capteurs.
Transmet vers Firebase ou base de données.
Base de données (Firebase ou MySQL)
Stocke les logs de détection (présence ou absence d’EPI).
Données envoyées depuis Flask et les capteurs.
