Add application file

.dockerignore

@@ -0,0 +1,29 @@
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+.Python
+env
+venv
+.venv
+pip-log.txt
+pip-delete-this-directory.txt
+.tox
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.log
+.git
+.gitignore
+.idea
+.vscode
+.DS_Store
+*.sqlite3
+!db.sqlite3
+media/uploads/*
+media/results/*
+!media/.gitkeep
+staticfiles

.gitignore

@@ -166,7 +166,7 @@ temp/
 *.backup
 
 # Docker
-.dockerignore
+
 
 # Certificats SSL
 ssl/

Dockerfile

@@ -1,17 +1,18 @@
-# Dockerfile pour FireWatch AI
-# Créé par Marino ATOHOUN
+# Dockerfile pour FireWatch AI sur Hugging Face Spaces
+# Modifié par BlackBenAI Team
 
 FROM python:3.11-slim
 
 # Métadonnées
-LABEL maintainer="Marino ATOHOUN"
+LABEL maintainer="BlackBenAI Team"
 LABEL description="FireWatch AI - Système de détection d'incendie et d'intrusion"
-LABEL version="1.0"
+LABEL version="1.1"
 
 # Variables d'environnement
 ENV PYTHONDONTWRITEBYTECODE=1
 ENV PYTHONUNBUFFERED=1
 ENV DEBIAN_FRONTEND=noninteractive
+ENV PORT=7860
 
 # Répertoire de travail
 WORKDIR /app
@@ -20,7 +21,7 @@ WORKDIR /app
 RUN apt-get update && apt-get install -y \
     build-essential \
     libpq-dev \
-    libgl1-mesa-glx \
+    libgl1 \
     libglib2.0-0 \
     libsm6 \
     libxext6 \
@@ -39,32 +40,32 @@ COPY requirements.txt .
 RUN pip install --no-cache-dir --upgrade pip
 RUN pip install --no-cache-dir -r requirements.txt
 
-# Copier le code de l'application
-COPY . .
+# Créer un utilisateur non-root (user 1000 pour HF Spaces)
+RUN useradd -m -u 1000 appuser
 
-# Créer les répertoires nécessaires
+# Créer les répertoires nécessaires et donner les permissions
 RUN mkdir -p media/uploads/images media/uploads/videos media/results models logs staticfiles
-
-# Collecter les fichiers statiques
-RUN python manage.py collectstatic --noinput
-
-# Créer un utilisateur non-root pour la sécurité
-RUN adduser --disabled-password --gecos '' appuser
 RUN chown -R appuser:appuser /app
+
+# Passer à l'utilisateur non-root
 USER appuser
 
-# Exposer le port
-EXPOSE 8000
+# Copier le code de l'application avec les bonnes permissions
+COPY --chown=appuser:appuser . .
+
+# Collecter les fichiers statiques (en tant qu'utilisateur appuser)
+RUN python manage.py collectstatic --noinput
+
+# Exposer le port 7860 (Hugging Face Spaces)
+EXPOSE 7860
 
 # Commande de santé
 HEALTHCHECK --interval=30s --timeout=30s --start-period=5s --retries=3 \
-    CMD curl -f http://localhost:8000/ || exit 1
+    CMD curl -f http://localhost:7860/ || exit 1
 
 # Script de démarrage
-COPY docker-entrypoint.sh /app/
 RUN chmod +x /app/docker-entrypoint.sh
 
 # Commande par défaut
 ENTRYPOINT ["/app/docker-entrypoint.sh"]
-CMD ["gunicorn", "--bind", "0.0.0.0:8000", "--workers", "4", "--timeout", "120", "firewatch_project.wsgi:application"]
-
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "2", "--timeout", "120", "firewatch_project.wsgi:application"]

detection/admin.py

@@ -1,21 +1,35 @@
 """
 Configuration de l'interface d'administration Django
 Créé par Marino ATOHOUN - FireWatch AI Project
+Amélioré par BlackBenAI Team pour un contrôle avancé
 """
 from django.contrib import admin
 from django.utils.html import format_html
+from django.urls import reverse
+from django.utils.safestring import mark_safe
 from .models import Contact, DetectionSession, Detection, AIModelStatus
 
+# Actions personnalisées
+@admin.action(description='Marquer comme lu')
+def make_read(modeladmin, request, queryset):
+    queryset.update(is_read=True)
+
+@admin.action(description='Marquer comme non lu')
+def make_unread(modeladmin, request, queryset):
+    queryset.update(is_read=False)
+
 
 @admin.register(Contact)
 class ContactAdmin(admin.ModelAdmin):
-    """Administration des contacts - Par Marino ATOHOUN"""
+    """Administration des contacts - Par Marino ATOHOUN & BlackBenAI"""
     list_display = ('name', 'email', 'created_at', 'is_read', 'message_preview')
     list_filter = ('is_read', 'created_at')
     search_fields = ('name', 'email', 'message')
     readonly_fields = ('created_at',)
     list_editable = ('is_read',)
     ordering = ('-created_at',)
+    actions = [make_read, make_unread]
+    list_per_page = 20
 
     def message_preview(self, obj):
         """Aperçu du message"""
@@ -39,32 +53,76 @@ class DetectionInline(admin.TabularInline):
     """Inline pour afficher les détections dans une session"""
     model = Detection
     extra = 0
-    readonly_fields = ('class_name', 'confidence', 'bbox_x', 'bbox_y', 'bbox_width', 'bbox_height')
+    readonly_fields = ('class_name', 'confidence', 'bbox_x', 'bbox_y', 'bbox_width', 'bbox_height', 'frame_number', 'timestamp')
+    can_delete = False
+    show_change_link = True
 
 
 @admin.register(DetectionSession)
 class DetectionSessionAdmin(admin.ModelAdmin):
-    """Administration des sessions de détection - Par Marino ATOHOUN"""
-    list_display = ('session_id', 'detection_type', 'created_at', 'is_processed', 'processing_time', 'detections_count')
+    """Administration des sessions de détection - Par Marino ATOHOUN & BlackBenAI"""
+    list_display = ('session_id_short', 'detection_type', 'created_at', 'is_processed', 'processing_time_display', 'detections_count', 'preview_image')
     list_filter = ('detection_type', 'is_processed', 'created_at')
     search_fields = ('session_id',)
-    readonly_fields = ('session_id', 'created_at', 'processing_time')
+    readonly_fields = ('session_id', 'created_at', 'processing_time', 'preview_original', 'preview_result')
     inlines = [DetectionInline]
     ordering = ('-created_at',)
+    list_per_page = 20
+    date_hierarchy = 'created_at'
+
+    def session_id_short(self, obj):
+        return str(obj.session_id)[:8] + "..."
+    session_id_short.short_description = "ID Session"
+
+    def processing_time_display(self, obj):
+        if obj.processing_time:
+            return f"{obj.processing_time:.2f}s"
+        return "-"
+    processing_time_display.short_description = "Temps"
 
     def detections_count(self, obj):
         """Nombre de détections dans la session"""
-        return obj.detections.count()
-    detections_count.short_description = "Nombre de détections"
+        count = obj.detections.count()
+        color = "green" if count > 0 else "gray"
+        return format_html('<span style="color: {}; font-weight: bold;">{}</span>', color, count)
+    detections_count.short_description = "Détections"
+
+    def preview_image(self, obj):
+        if obj.result_file:
+            return format_html('<img src="{}" style="height: 50px; border-radius: 4px;" />', obj.result_file.url)
+        elif obj.original_file and obj.detection_type == 'image':
+            return format_html('<img src="{}" style="height: 50px; border-radius: 4px; opacity: 0.5;" />', obj.original_file.url)
+        return "-"
+    preview_image.short_description = "Aperçu"
+
+    def preview_original(self, obj):
+        if obj.original_file:
+            if obj.detection_type == 'image':
+                return format_html('<a href="{}" target="_blank"><img src="{}" style="max-height: 300px; max-width: 100%; border-radius: 8px;" /></a>', obj.original_file.url, obj.original_file.url)
+            elif obj.detection_type == 'video':
+                return format_html('<video src="{}" controls style="max-height: 300px; max-width: 100%; border-radius: 8px;"></video>', obj.original_file.url)
+        return "Aucun fichier"
+    preview_original.short_description = "Fichier original"
+
+    def preview_result(self, obj):
+        if obj.result_file:
+            return format_html('<a href="{}" target="_blank"><img src="{}" style="max-height: 300px; max-width: 100%; border-radius: 8px;" /></a>', obj.result_file.url, obj.result_file.url)
+        return "Aucun résultat"
+    preview_result.short_description = "Résultat de détection"
 
     fieldsets = (
         ('Informations de session', {
             'fields': ('session_id', 'detection_type', 'created_at')
         }),
-        ('Fichiers', {
-            'fields': ('original_file', 'result_file')
+        ('Aperçu des fichiers', {
+            'fields': ('preview_original', 'preview_result'),
+            'description': 'Aperçu visuel des fichiers traités'
+        }),
+        ('Fichiers bruts', {
+            'fields': ('original_file', 'result_file'),
+            'classes': ('collapse',)
         }),
-        ('Traitement', {
+        ('Métriques de traitement', {
             'fields': ('is_processed', 'processing_time')
         }),
     )
@@ -72,61 +130,110 @@ class DetectionSessionAdmin(admin.ModelAdmin):
 
 @admin.register(Detection)
 class DetectionAdmin(admin.ModelAdmin):
-    """Administration des détections - Par Marino ATOHOUN"""
-    list_display = ('session', 'class_name', 'confidence_percent', 'frame_number', 'bbox_preview')
+    """Administration des détections - Par Marino ATOHOUN & BlackBenAI"""
+    list_display = ('id', 'session_link', 'class_name_colored', 'confidence_bar', 'frame_number', 'bbox_preview')
     list_filter = ('class_name', 'session__detection_type', 'session__created_at')
     search_fields = ('session__session_id', 'class_name')
-    readonly_fields = ('session', 'class_name', 'confidence', 'bbox_x', 'bbox_y', 'bbox_width', 'bbox_height')
+    readonly_fields = ('session', 'class_name', 'confidence', 'bbox_x', 'bbox_y', 'bbox_width', 'bbox_height', 'bbox_visual')
     ordering = ('-session__created_at', 'frame_number')
-
-    def confidence_percent(self, obj):
-        """Affichage de la confiance en pourcentage"""
-        return f"{obj.confidence:.1%}"
-    confidence_percent.short_description = "Confiance"
+    list_per_page = 50
+
+    def session_link(self, obj):
+        url = reverse("admin:detection_detectionsession_change", args=[obj.session.id])
+        return format_html('<a href="{}">Session {}</a>', url, str(obj.session.session_id)[:8])
+    session_link.short_description = "Session"
+
+    def class_name_colored(self, obj):
+        colors = {
+            'fire': 'red',
+            'smoke': 'gray',
+            'person': 'orange',
+            'intrusion': 'orange',
+            'vehicle': 'blue'
+        }
+        color = colors.get(obj.class_name, 'black')
+        return format_html('<span style="color: {}; font-weight: bold;">{}</span>', color, obj.get_class_name_display())
+    class_name_colored.short_description = "Classe"
+
+    def confidence_bar(self, obj):
+        """Barre de progression visuelle pour la confiance"""
+        percent = obj.confidence * 100
+        color = "green" if percent > 80 else "orange" if percent > 50 else "red"
+        return format_html(
+            '<div style="width: 100px; background-color: #ddd; border-radius: 4px;">'
+            '<div style="width: {}%; background-color: {}; height: 10px; border-radius: 4px;"></div>'
+            '</div><span style="font-size: 0.8em;">{}%</span>',
+            f"{percent:.1f}", color, f"{percent:.1f}"
+        )
+    confidence_bar.short_description = "Confiance"
 
     def bbox_preview(self, obj):
-        """Aperçu de la bounding box"""
-        return f"({obj.bbox_x:.0f}, {obj.bbox_y:.0f}) {obj.bbox_width:.0f}x{obj.bbox_height:.0f}"
-    bbox_preview.short_description = "Boîte englobante"
+        """Aperçu textuel de la bounding box"""
+        return f"x:{obj.bbox_x:.0f}, y:{obj.bbox_y:.0f} ({obj.bbox_width:.0f}x{obj.bbox_height:.0f})"
+    bbox_preview.short_description = "Position"
+
+    def bbox_visual(self, obj):
+        """Représentation visuelle de la bbox (conceptuel)"""
+        return format_html(
+            '<div style="position: relative; width: 200px; height: 150px; background: #f0f0f0; border: 1px solid #ccc;">'
+            '<div style="position: absolute; left: {}%; top: {}%; width: {}%; height: {}%; border: 2px solid red; background: rgba(255,0,0,0.2);"></div>'
+            '</div>',
+            f"{(obj.bbox_x / 640) * 100:.1f}", f"{(obj.bbox_y / 480) * 100:.1f}",
+            f"{(obj.bbox_width / 640) * 100:.1f}", f"{(obj.bbox_height / 480) * 100:.1f}"
+        )
+    bbox_visual.short_description = "Visualisation BBox (Approx)"
 
 
 @admin.register(AIModelStatus)
 class AIModelStatusAdmin(admin.ModelAdmin):
-    """Administration du statut des modèles IA - Par Marino ATOHOUN"""
-    list_display = ('model_type', 'is_loaded_display', 'model_version', 'accuracy_percent', 'last_loaded')
+    """Administration du statut des modèles IA - Par Marino ATOHOUN & BlackBenAI"""
+    list_display = ('model_type', 'is_loaded_display', 'model_version', 'accuracy_percent', 'last_loaded', 'updated_at')
     list_filter = ('model_type', 'is_loaded')
     readonly_fields = ('created_at', 'updated_at', 'last_loaded')
     ordering = ('model_type',)
+    actions = ['reload_models']
+
+    @admin.action(description='Recharger les modèles (Simulation)')
+    def reload_models(self, request, queryset):
+        # Ici on pourrait appeler une tâche Celery ou une fonction pour recharger le modèle
+        rows_updated = queryset.update(is_loaded=False) # Simuler un déchargement pour forcer le rechargement
+        self.message_user(request, f"{rows_updated} modèles marqués pour rechargement.")
 
     def is_loaded_display(self, obj):
         """Affichage coloré du statut de chargement"""
         if obj.is_loaded:
-            return format_html('<span style="color: green;">✓ Chargé</span>')
+            return format_html('<span style="color: green; font-weight: bold;">✓ Chargé</span>')
         else:
-            return format_html('<span style="color: red;">✗ Non chargé</span>')
+            return format_html('<span style="color: red; font-weight: bold;">✗ Non chargé</span>')
     is_loaded_display.short_description = "Statut"
 
     def accuracy_percent(self, obj):
         """Affichage de la précision en pourcentage"""
-        return f"{obj.accuracy:.1%}" if obj.accuracy else "N/A"
+        if obj.accuracy:
+            return format_html(
+                '<div style="width: 100px; background-color: #ddd; border-radius: 4px;">'
+                '<div style="width: {}%; background-color: blue; height: 10px; border-radius: 4px;"></div>'
+                '</div><span style="font-size: 0.8em;">{}%</span>',
+                f"{obj.accuracy * 100:.1f}", f"{obj.accuracy * 100:.1f}"
+            )
+        return "N/A"
     accuracy_percent.short_description = "Précision"
 
     fieldsets = (
         ('Configuration du modèle', {
             'fields': ('model_type', 'model_path', 'model_version')
         }),
-        ('Statut', {
+        ('Statut opérationnel', {
             'fields': ('is_loaded', 'last_loaded', 'accuracy')
         }),
-        ('Dates', {
+        ('Métadonnées', {
             'fields': ('created_at', 'updated_at'),
             'classes': ('collapse',)
         }),
     )
 
 
-# Par Marino ATOHOUN: Personnalisation de l'interface d'administration
+# Par Marino ATOHOUN & BlackBenAI: Personnalisation de l'interface d'administration
 admin.site.site_header = "FireWatch AI - Administration"
 admin.site.site_title = "FireWatch AI Admin"
-admin.site.index_title = "Panneau d'administration - Créé par Marino ATOHOUN"
-
+admin.site.index_title = "Gestion BlackBenAI"

detection/templates/detection/index.html

@@ -1,337 +1,485 @@
 {% load static %}
 <!DOCTYPE html>
-<!-- Fichier adapté pour Django par Marino ATOHOUN - FireWatch AI Project -->
 <html lang="fr">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FireWatch AI - Détection d'incendie et d'intrusion</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <title>FireWatch AI - Détection Intelligente</title>
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    
+    <!-- Icons -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <style>
-        :root {
-            --primary-dark: #0f172a;
-            --primary-blue: #1e40af;
-            --accent-violet: #7c3aed;
-            --accent-pink: #ec4899;
-            --light-gray: #f1f5f9;
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    
+    <!-- Custom Config -->
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['"Plus Jakarta Sans"', 'sans-serif'],
+                        display: ['"Outfit"', 'sans-serif'],
+                    },
+                    colors: {
+                        brand: {
+                            dark: '#0B0F19',
+                            primary: '#3B82F6',
+                            accent: '#8B5CF6',
+                            glow: '#60A5FA',
+                            surface: '#111827',
+                            surfaceHighlight: '#1F2937'
+                        }
+                    },
+                    animation: {
+                        'blob': 'blob 7s infinite',
+                        'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                    },
+                    keyframes: {
+                        blob: {
+                            '0%': { transform: 'translate(0px, 0px) scale(1)' },
+                            '33%': { transform: 'translate(30px, -50px) scale(1.1)' },
+                            '66%': { transform: 'translate(-20px, 20px) scale(0.9)' },
+                            '100%': { transform: 'translate(0px, 0px) scale(1)' },
+                        },
+                        'pulse-glow': {
+                            '0%, 100%': { opacity: 1, boxShadow: '0 0 20px rgba(59, 130, 246, 0.5)' },
+                            '50%': { opacity: .5, boxShadow: '0 0 10px rgba(59, 130, 246, 0.2)' },
+                        }
+                    }
+                }
+            }
         }
-        
+    </script>
+
+    <style>
+        /* Custom Styles for Premium Feel */
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--light-gray);
+            background-color: #0B0F19;
+            color: #F3F4F6;
+            overflow-x: hidden;
         }
-        
-        .gradient-bg {
-            background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-violet) 100%);
-        }
-        
-        .card-glass {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            -webkit-backdrop-filter: blur(10px);
-            border-radius: 1rem;
-            border: 1px solid rgba(255, 255, 255, 0.2);
+
+        .glass-panel {
+            background: rgba(17, 24, 39, 0.7);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
         }
-        
-        .pulse-animation {
-            animation: pulse 2s infinite;
+
+        .glass-card {
+            background: rgba(31, 41, 55, 0.6);
+            backdrop-filter: blur(8px);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            transition: all 0.3s ease;
         }
-        
-        @keyframes pulse {
-            0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); }
-            70% { box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); }
-            100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
+
+        .glass-card:hover {
+            transform: translateY(-5px);
+            border-color: rgba(59, 130, 246, 0.3);
+            box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.2);
         }
-        
-        .tab-active {
-            border-bottom: 3px solid var(--accent-pink);
-            color: var(--accent-pink);
+
+        .text-gradient {
+            background: linear-gradient(to right, #60A5FA, #A78BFA);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
-        .loading {
-            display: none;
+        .bg-gradient-brand {
+            background: linear-gradient(135deg, #1e40af 0%, #7c3aed 100%);
         }
 
-        .loading.show {
-            display: block;
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #0B0F19;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #374151;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #4B5563;
         }
 
-        .alert {
-            padding: 1rem;
-            margin: 1rem 0;
-            border-radius: 0.5rem;
-            display: none;
+        /* Upload Zone */
+        .upload-zone {
+            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%234B5563FF' stroke-width='2' stroke-dasharray='12%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+            transition: all 0.3s ease;
+        }
+        .upload-zone:hover, .upload-zone.dragover {
+            background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%2360A5FAFF' stroke-width='2' stroke-dasharray='12%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+            background-color: rgba(59, 130, 246, 0.05);
         }
 
-        .alert.show {
-            display: block;
+        /* Model Radio Button */
+        .model-radio:checked + div {
+            border-color: #3B82F6;
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        .model-radio:checked + div i {
+            transform: scale(1.1);
         }
 
-        .alert-success {
-            background-color: #d1fae5;
-            color: #065f46;
-            border: 1px solid #a7f3d0;
+        /* Loader */
+        .loader {
+            border-top-color: #3B82F6;
+            -webkit-animation: spinner 1.5s linear infinite;
+            animation: spinner 1.5s linear infinite;
+        }
+        @keyframes spinner {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
 
-        .alert-error {
-            background-color: #fee2e2;
-            color: #991b1b;
-            border: 1px solid #fca5a5;
+        /* Alert Animations */
+        .alert-enter {
+            animation: slideIn 0.5s ease-out forwards;
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(-20px); }
+            to { opacity: 1; transform: translateY(0); }
         }
     </style>
 </head>
-<body class="min-h-screen">
-    <!-- Header -->
-    <header class="gradient-bg text-white shadow-xl">
-        <div class="container mx-auto px-4 py-6">
-            <div class="flex justify-between items-center">
-                <div class="flex items-center space-x-2">
-                    <i class="fas fa-fire text-2xl text-pink-500"></i>
-                    <h1 class="text-2xl font-bold">FireWatch <span class="text-pink-400">AI</span></h1>
+<body class="antialiased selection:bg-blue-500 selection:text-white">
+
+    <!-- Background Effects -->
+    <div class="fixed inset-0 z-[-1] overflow-hidden pointer-events-none">
+        <div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-600 rounded-full mix-blend-multiply filter blur-[128px] opacity-20 animate-blob"></div>
+        <div class="absolute top-0 right-1/4 w-96 h-96 bg-purple-600 rounded-full mix-blend-multiply filter blur-[128px] opacity-20 animate-blob animation-delay-2000"></div>
+        <div class="absolute -bottom-32 left-1/3 w-96 h-96 bg-pink-600 rounded-full mix-blend-multiply filter blur-[128px] opacity-20 animate-blob animation-delay-4000"></div>
+    </div>
+
+    <!-- Navbar -->
+    <nav class="fixed w-full z-50 transition-all duration-300" id="navbar">
+        <div class="glass-panel mx-4 mt-4 rounded-2xl px-6 py-4 flex justify-between items-center max-w-7xl mx-auto">
+            <div class="flex items-center gap-3">
+                <div class="w-10 h-10 rounded-xl bg-gradient-brand flex items-center justify-center shadow-lg shadow-blue-500/30">
+                    <i class="fas fa-fire text-white text-lg"></i>
                 </div>
-                <nav class="hidden md:flex space-x-6">
-                    <a href="#about" class="hover:text-pink-300 transition">À propos</a>
-                    <a href="#demo" class="hover:text-pink-300 transition">Démonstration</a>
-                    <a href="#creator" class="hover:text-pink-300 transition">Créateur</a>
-                    <a href="#contact" class="hover:text-pink-300 transition">Contact</a>
-                </nav>
-                <button class="md:hidden text-xl">
-                    <i class="fas fa-bars"></i>
-                </button>
+                <span class="text-xl font-display font-bold tracking-tight">FireWatch <span class="text-blue-400">AI</span></span>
+            </div>
+            
+            <div class="hidden md:flex items-center gap-8 text-sm font-medium text-gray-300">
+                <a href="#features" class="hover:text-white transition-colors">Fonctionnalités</a>
+                <a href="#demo" class="hover:text-white transition-colors">Démonstration</a>
+                <a href="#about" class="hover:text-white transition-colors">À propos</a>
             </div>
+
+            <a href="#contact" class="hidden md:flex items-center gap-2 px-5 py-2.5 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 transition-all text-sm font-medium">
+                <span>Contact</span>
+                <i class="fas fa-arrow-right text-xs"></i>
+            </a>
         </div>
-    </header>
+    </nav>
 
     <!-- Hero Section -->
-    <section class="gradient-bg text-white py-20">
-        <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
-            <div class="md:w-1/2 mb-10 md:mb-0">
-                <h2 class="text-4xl md:text-5xl font-bold mb-6">Détection intelligente d'incendie et d'intrusion</h2>
-                <p class="text-xl mb-8 text-gray-200">Notre solution IA avancée utilise YOLOv8 pour identifier les risques en temps réel à partir d'images, de vidéos ou de flux caméra.</p>
-                <a href="#demo" class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-full transition duration-300 inline-flex items-center">
-                    Essayer maintenant <i class="fas fa-arrow-right ml-2"></i>
-                </a>
+    <section class="relative pt-40 pb-20 px-4">
+        <div class="max-w-7xl mx-auto text-center">
+            <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-sm font-medium mb-8 animate-fade-in-up">
+                <span class="relative flex h-2 w-2">
+                  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
+                  <span class="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>
+                </span>
+                Système de Détection YOLOv8 Actif
             </div>
-            <div class="md:w-1/2 flex justify-center">
-                <div class="card-glass p-6 w-full max-w-md">
-                    <div class="bg-black rounded-lg overflow-hidden aspect-video flex items-center justify-center">
-                        <i class="fas fa-play text-pink-500 text-4xl"></i>
-                    </div>
-                    <p class="text-center mt-4 text-gray-300">Démonstration en direct de la détection</p>
-                </div>
+            
+            <h1 class="text-5xl md:text-7xl font-display font-bold mb-6 leading-tight">
+                La Sécurité Intelligente <br>
+                <span class="text-gradient">Nouvelle Génération</span>
+            </h1>
+            
+            <p class="text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed">
+                Une solution de sécurité intelligente développée par <span class="text-white font-semibold">BlackBenAI</span>. Nous intégrons ces modèles de pointe dans vos infrastructures réelles (caméras, drones, serveurs) pour une protection sur mesure.
+            </p>
+            
+            <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
+                <a href="#demo" class="px-8 py-4 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-semibold shadow-lg shadow-blue-600/30 transition-all transform hover:scale-105 flex items-center gap-2">
+                    <i class="fas fa-play"></i> Essayer la Démo
+                </a>
+                <a href="#features" class="px-8 py-4 rounded-xl bg-white/5 hover:bg-white/10 border border-white/10 text-white font-semibold transition-all flex items-center gap-2">
+                    <i class="fas fa-info-circle"></i> En savoir plus
+                </a>
             </div>
         </div>
     </section>
 
-    <!-- About Section -->
-    <section id="about" class="py-16 bg-white">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">À propos du projet</h2>
-            <div class="grid md:grid-cols-3 gap-8">
-                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
-                    <div class="text-indigo-600 text-3xl mb-4">
-                        <i class="fas fa-fire-extinguisher"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Détection d'incendie</h3>
-                    <p class="text-gray-600">Notre modèle identifie avec précision les débuts d'incendie, même dans des conditions de faible visibilité.</p>
+    <!-- Stats/Features Grid -->
+    <section id="features" class="py-20 px-4">
+        <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
+            <!-- Card 1 -->
+            <div class="glass-card p-8 rounded-2xl relative overflow-hidden group">
+                <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+                    <i class="fas fa-fire text-8xl text-red-500"></i>
                 </div>
-                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
-                    <div class="text-violet-600 text-3xl mb-4">
-                        <i class="fas fa-user-secret"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Détection d'intrusion</h3>
-                    <p class="text-gray-600">Système de surveillance intelligent qui repère les intrusions et mouvements suspects en temps réel.</p>
+                <div class="w-12 h-12 rounded-lg bg-red-500/20 flex items-center justify-center mb-6 text-red-400">
+                    <i class="fas fa-fire-extinguisher text-xl"></i>
                 </div>
-                <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition">
-                    <div class="text-pink-600 text-3xl mb-4">
-                        <i class="fas fa-bolt"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-3 text-gray-800">Temps réel</h3>
-                    <p class="text-gray-600">Analyse instantanée des flux vidéo avec alertes en temps réel pour une intervention rapide.</p>
+                <h3 class="text-xl font-bold mb-3">Détection Incendie</h3>
+                <p class="text-gray-400 text-sm leading-relaxed">
+                    Identification ultra-rapide des départs de feu et de fumée pour une intervention précoce et vitale.
+                </p>
+            </div>
+
+            <!-- Card 2 -->
+            <div class="glass-card p-8 rounded-2xl relative overflow-hidden group">
+                <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+                    <i class="fas fa-user-shield text-8xl text-orange-500"></i>
+                </div>
+                <div class="w-12 h-12 rounded-lg bg-orange-500/20 flex items-center justify-center mb-6 text-orange-400">
+                    <i class="fas fa-user-lock text-xl"></i>
                 </div>
+                <h3 class="text-xl font-bold mb-3">Anti-Intrusion</h3>
+                <p class="text-gray-400 text-sm leading-relaxed">
+                    Surveillance périmétrique avec détection de personnes non autorisées en temps réel.
+                </p>
+            </div>
+
+            <!-- Card 3 -->
+            <div class="glass-card p-8 rounded-2xl relative overflow-hidden group">
+                <div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+                    <i class="fas fa-bolt text-8xl text-blue-500"></i>
+                </div>
+                <div class="w-12 h-12 rounded-lg bg-blue-500/20 flex items-center justify-center mb-6 text-blue-400">
+                    <i class="fas fa-microchip text-xl"></i>
+                </div>
+                <h3 class="text-xl font-bold mb-3">IA Temps Réel</h3>
+                <p class="text-gray-400 text-sm leading-relaxed">
+                    Propulsé par YOLOv8 pour une latence minimale et une précision maximale sur tout support.
+                </p>
             </div>
         </div>
     </section>
 
-    <!-- Demo Section -->
-    <section id="demo" class="py-16 bg-gray-50">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Essayer la démonstration</h2>
-            
-            <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-lg overflow-hidden">
-                <!-- Tabs -->
-                <div class="flex border-b">
-                    <button onclick="switchTab('image')" class="tab-button py-4 px-6 font-medium text-gray-500 hover:text-pink-500 transition tab-active" id="image-tab">
-                        <i class="fas fa-image mr-2"></i> Image
+    <!-- Demo Section (The Core) -->
+    <section id="demo" class="py-20 px-4 relative">
+        <div class="max-w-5xl mx-auto">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl md:text-4xl font-display font-bold mb-4">Démonstration Live</h2>
+                <p class="text-gray-400">Ceci est une démonstration technique. BlackBenAI peut déployer et adapter ces modèles pour vos cas d'usage spécifiques.</p>
+            </div>
+
+            <div class="glass-panel rounded-3xl overflow-hidden shadow-2xl border border-white/10">
+                <!-- Tabs Header -->
+                <div class="flex border-b border-white/10 bg-black/20">
+                    <button onclick="switchTab('image')" class="flex-1 py-4 text-sm font-medium text-gray-400 hover:text-white transition-colors relative group active-tab" id="tab-btn-image">
+                        <span class="flex items-center justify-center gap-2">
+                            <i class="fas fa-image"></i> Analyse Image
+                        </span>
+                        <div class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
                     </button>
-                    <button onclick="switchTab('video')" class="tab-button py-4 px-6 font-medium text-gray-500 hover:text-pink-500 transition" id="video-tab">
-                        <i class="fas fa-video mr-2"></i> Vidéo
+                    <button onclick="switchTab('video')" class="flex-1 py-4 text-sm font-medium text-gray-400 hover:text-white transition-colors relative group" id="tab-btn-video">
+                        <span class="flex items-center justify-center gap-2">
+                            <i class="fas fa-video"></i> Analyse Vidéo
+                        </span>
+                        <div class="absolute bottom-0 left-0 w-full h-0.5 bg-purple-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
                     </button>
-                    <button onclick="switchTab('camera')" class="tab-button py-4 px-6 font-medium text-gray-500 hover:text-pink-500 transition" id="camera-tab">
-                        <i class="fas fa-camera mr-2"></i> Caméra
+                    <button onclick="switchTab('camera')" class="flex-1 py-4 text-sm font-medium text-gray-400 hover:text-white transition-colors relative group" id="tab-btn-camera">
+                        <span class="flex items-center justify-center gap-2">
+                            <i class="fas fa-camera"></i> Live Caméra
+                        </span>
+                        <div class="absolute bottom-0 left-0 w-full h-0.5 bg-red-500 transform scale-x-0 group-hover:scale-x-100 transition-transform origin-left"></div>
                     </button>
                 </div>
-                
-                <!-- Tab Content -->
-                <div class="p-6">
-                    <!-- Image Tab Content -->
-                    <div id="image-content" class="tab-content">
-                        <form id="image-form" method="post" enctype="multipart/form-data">
+
+                <!-- Tab Contents -->
+                <div class="p-8">
+                    
+                    <!-- IMAGE TAB -->
+                    <div id="content-image" class="tab-content transition-opacity duration-300">
+                        <form id="image-form" class="space-y-6">
                             {% csrf_token %}
-                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-                                <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i>
-                                <h3 class="text-xl font-semibold mb-2">Uploader une image</h3>
-                                <p class="text-gray-500 mb-4">Glissez-déposez une image ou cliquez pour sélectionner</p>
-                                <input type="file" name="image" id="image-upload" accept="image/*" class="hidden" required>
-                                <label for="image-upload" class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded cursor-pointer transition">
-                                    Sélectionner une image
-                                </label>
-                                <div id="image-preview" class="mt-4 hidden">
-                                    <img id="preview-img" src="" alt="Aperçu" class="max-w-full h-48 mx-auto rounded">
+                            
+                            <!-- Model Selector -->
+                            <div class="bg-white/5 rounded-xl p-4 border border-white/10">
+                                <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3 block">Modèle de Détection</label>
+                                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                                    <label class="cursor-pointer relative">
+                                        <input type="radio" name="model_type" value="fire" class="model-radio sr-only">
+                                        <div class="p-3 rounded-lg border border-white/10 bg-black/20 hover:bg-white/5 transition-all flex items-center justify-center gap-2 text-sm font-medium text-gray-300">
+                                            <i class="fas fa-fire text-red-500 transition-transform"></i> Incendie
+                                        </div>
+                                    </label>
+                                    <label class="cursor-pointer relative">
+                                        <input type="radio" name="model_type" value="intrusion" class="model-radio sr-only">
+                                        <div class="p-3 rounded-lg border border-white/10 bg-black/20 hover:bg-white/5 transition-all flex items-center justify-center gap-2 text-sm font-medium text-gray-300">
+                                            <i class="fas fa-user-shield text-orange-500 transition-transform"></i> Intrusion
+                                        </div>
+                                    </label>
+                                    <label class="cursor-pointer relative">
+                                        <input type="radio" name="model_type" value="both" checked class="model-radio sr-only">
+                                        <div class="p-3 rounded-lg border border-white/10 bg-black/20 hover:bg-white/5 transition-all flex items-center justify-center gap-2 text-sm font-medium text-gray-300">
+                                            <i class="fas fa-layer-group text-blue-500 transition-transform"></i> Tout Détecter
+                                        </div>
+                                    </label>
                                 </div>
                             </div>
-                            <div class="mt-6 flex justify-between">
-                                <button type="button" onclick="resetImageForm()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition">
-                                    <i class="fas fa-redo mr-2"></i> Réinitialiser
-                                </button>
-                                <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-medium py-2 px-4 rounded transition">
-                                    <i class="fas fa-search mr-2"></i> Analyser
-                                </button>
-                            </div>
-                            <div class="loading mt-4 text-center">
-                                <i class="fas fa-spinner fa-spin text-2xl text-indigo-500"></i>
-                                <p class="mt-2 text-gray-600">Analyse en cours...</p>
+
+                            <!-- Upload Area -->
+                            <div class="upload-zone rounded-2xl p-10 text-center cursor-pointer relative group" id="image-dropzone">
+                                <input type="file" name="image" id="image-input" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
+                                <div class="transition-transform group-hover:scale-105 duration-300">
+                                    <div class="w-16 h-16 rounded-full bg-blue-500/10 flex items-center justify-center mx-auto mb-4 text-blue-400">
+                                        <i class="fas fa-cloud-upload-alt text-2xl"></i>
+                                    </div>
+                                    <h3 class="text-lg font-semibold text-white mb-2">Glissez votre image ici</h3>
+                                    <p class="text-sm text-gray-400">JPG, PNG supportés</p>
+                                </div>
+                                <!-- Preview -->
+                                <div id="image-preview-container" class="hidden mt-6 relative rounded-lg overflow-hidden border border-white/20 shadow-lg max-w-sm mx-auto">
+                                    <img id="image-preview" src="" class="w-full h-auto object-cover">
+                                    <button type="button" id="clear-image" class="absolute top-2 right-2 w-8 h-8 bg-black/50 hover:bg-red-500 rounded-full text-white flex items-center justify-center transition-colors z-20">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
                             </div>
+
+                            <button type="submit" class="w-full py-4 rounded-xl bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-500 hover:to-blue-400 text-white font-bold shadow-lg shadow-blue-900/20 transition-all transform hover:scale-[1.01] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
+                                <span class="btn-text">Lancer l'Analyse</span>
+                                <div class="loader w-5 h-5 border-2 border-white/30 rounded-full hidden"></div>
+                            </button>
                         </form>
                     </div>
-                    
-                    <!-- Video Tab Content -->
-                    <div id="video-content" class="tab-content hidden">
-                        <form id="video-form" method="post" enctype="multipart/form-data">
+
+                    <!-- VIDEO TAB -->
+                    <div id="content-video" class="tab-content hidden transition-opacity duration-300">
+                        <form id="video-form" class="space-y-6">
                             {% csrf_token %}
-                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-                                <i class="fas fa-film text-4xl text-violet-500 mb-4"></i>
-                                <h3 class="text-xl font-semibold mb-2">Uploader une vidéo</h3>
-                                <p class="text-gray-500 mb-4">Glissez-déposez une vidéo ou cliquez pour sélectionner</p>
-                                <input type="file" name="video" id="video-upload" accept="video/*" class="hidden" required>
-                                <label for="video-upload" class="bg-violet-500 hover:bg-violet-600 text-white font-medium py-2 px-4 rounded cursor-pointer transition">
-                                    Sélectionner une vidéo
-                                </label>
-                                <div id="video-preview" class="mt-4 hidden">
-                                    <video id="preview-video" controls class="max-w-full h-48 mx-auto rounded">
-                                        <source src="" type="video/mp4">
-                                        Votre navigateur ne supporte pas la lecture vidéo.
-                                    </video>
+                            
+                            <!-- Model Selector (Video) -->
+                            <div class="bg-white/5 rounded-xl p-4 border border-white/10">
+                                <label class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3 block">Modèle de Détection</label>
+                                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                                    <label class="cursor-pointer relative">
+                                        <input type="radio" name="model_type" value="fire" class="model-radio sr-only">
+                                        <div class="p-3 rounded-lg border border-white/10 bg-black/20 hover:bg-white/5 transition-all flex items-center justify-center gap-2 text-sm font-medium text-gray-300">
+                                            <i class="fas fa-fire text-red-500 transition-transform"></i> Incendie
+                                        </div>
+                                    </label>
+                                    <label class="cursor-pointer relative">
+                                        <input type="radio" name="model_type" value="intrusion" class="model-radio sr-only">
+                                        <div class="p-3 rounded-lg border border-white/10 bg-black/20 hover:bg-white/5 transition-all flex items-center justify-center gap-2 text-sm font-medium text-gray-300">
+                                            <i class="fas fa-user-shield text-orange-500 transition-transform"></i> Intrusion
+                                        </div>
+                                    </label>
+                                    <label class="cursor-pointer relative">
+                                        <input type="radio" name="model_type" value="both" checked class="model-radio sr-only">
+                                        <div class="p-3 rounded-lg border border-white/10 bg-black/20 hover:bg-white/5 transition-all flex items-center justify-center gap-2 text-sm font-medium text-gray-300">
+                                            <i class="fas fa-layer-group text-blue-500 transition-transform"></i> Tout Détecter
+                                        </div>
+                                    </label>
                                 </div>
                             </div>
-                            <div class="mt-6 flex justify-between">
-                                <button type="button" onclick="resetVideoForm()" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition">
-                                    <i class="fas fa-redo mr-2"></i> Réinitialiser
-                                </button>
-                                <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-medium py-2 px-4 rounded transition">
-                                    <i class="fas fa-play mr-2"></i> Démarrer l'analyse
-                                </button>
-                            </div>
-                            <div class="loading mt-4 text-center">
-                                <i class="fas fa-spinner fa-spin text-2xl text-violet-500"></i>
-                                <p class="mt-2 text-gray-600">Analyse vidéo en cours...</p>
+
+                            <div class="upload-zone rounded-2xl p-10 text-center cursor-pointer relative group" id="video-dropzone">
+                                <input type="file" name="video" id="video-input" accept="video/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10">
+                                <div class="transition-transform group-hover:scale-105 duration-300">
+                                    <div class="w-16 h-16 rounded-full bg-purple-500/10 flex items-center justify-center mx-auto mb-4 text-purple-400">
+                                        <i class="fas fa-film text-2xl"></i>
+                                    </div>
+                                    <h3 class="text-lg font-semibold text-white mb-2">Glissez votre vidéo ici</h3>
+                                    <p class="text-sm text-gray-400">MP4, AVI, MOV</p>
+                                </div>
+                                <div id="video-preview-container" class="hidden mt-6 relative rounded-lg overflow-hidden border border-white/20 shadow-lg max-w-sm mx-auto">
+                                    <video id="video-preview" controls class="w-full h-auto"></video>
+                                    <button type="button" id="clear-video" class="absolute top-2 right-2 w-8 h-8 bg-black/50 hover:bg-red-500 rounded-full text-white flex items-center justify-center transition-colors z-20">
+                                        <i class="fas fa-times"></i>
+                                    </button>
+                                </div>
                             </div>
+
+                            <button type="submit" class="w-full py-4 rounded-xl bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-500 hover:to-purple-400 text-white font-bold shadow-lg shadow-purple-900/20 transition-all transform hover:scale-[1.01] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed">
+                                <span class="btn-text">Analyser la Vidéo</span>
+                                <div class="loader w-5 h-5 border-2 border-white/30 rounded-full hidden"></div>
+                            </button>
                         </form>
                     </div>
-                    
-                    <!-- Camera Tab Content -->
-                    <div id="camera-content" class="tab-content hidden">
-                        <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-                            <i class="fas fa-camera text-4xl text-pink-500 mb-4"></i>
-                            <h3 class="text-xl font-semibold mb-2">Accéder à votre caméra</h3>
-                            <p class="text-gray-500 mb-4">Autorisez l'accès à votre caméra pour une analyse en temps réel</p>
-                            <button id="start-camera" class="bg-pink-500 hover:bg-pink-600 text-white font-medium py-2 px-4 rounded cursor-pointer transition pulse-animation">
-                                <i class="fas fa-video mr-2"></i> Activer la caméra
-                            </button>
-                            <div id="camera-stream" class="mt-4 hidden">
-                                <video id="camera-video" autoplay muted class="max-w-full h-64 mx-auto rounded bg-black"></video>
-                                <canvas id="camera-canvas" class="hidden"></canvas>
+
+                    <!-- CAMERA TAB -->
+                    <div id="content-camera" class="tab-content hidden transition-opacity duration-300 text-center">
+                        <div class="relative rounded-2xl overflow-hidden bg-black aspect-video mb-6 border border-white/10 shadow-2xl">
+                            <video id="camera-video" autoplay playsinline class="w-full h-full object-cover"></video>
+                            <canvas id="camera-canvas" class="hidden"></canvas>
+                            
+                            <div id="camera-overlay" class="absolute inset-0 flex items-center justify-center bg-black/50">
+                                <p class="text-gray-400"><i class="fas fa-camera-slash mr-2"></i> Caméra inactive</p>
                             </div>
                         </div>
-                        <div class="mt-6 flex justify-center">
-                            <button id="stop-camera" class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition hidden">
-                                <i class="fas fa-stop mr-2"></i> Arrêter
+
+                        <div class="flex justify-center gap-4">
+                            <button id="start-camera" class="px-6 py-3 rounded-xl bg-green-600 hover:bg-green-500 text-white font-semibold shadow-lg shadow-green-900/20 transition-all flex items-center gap-2">
+                                <i class="fas fa-power-off"></i> Activer
                             </button>
-                            <button id="capture-frame" class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded transition ml-4 hidden">
-                                <i class="fas fa-camera mr-2"></i> Capturer et analyser
+                            <button id="capture-frame" class="px-6 py-3 rounded-xl bg-blue-600 hover:bg-blue-500 text-white font-semibold shadow-lg shadow-blue-900/20 transition-all flex items-center gap-2 hidden">
+                                <i class="fas fa-camera"></i> Capturer & Analyser
+                            </button>
+                            <button id="stop-camera" class="px-6 py-3 rounded-xl bg-red-600 hover:bg-red-500 text-white font-semibold shadow-lg shadow-red-900/20 transition-all flex items-center gap-2 hidden">
+                                <i class="fas fa-stop"></i> Arrêter
                             </button>
                         </div>
                     </div>
+
                 </div>
             </div>
-            
+
             <!-- Results Section -->
-            <div id="results" class="max-w-4xl mx-auto mt-12 bg-white rounded-xl shadow-lg overflow-hidden hidden">
-                <div class="p-6">
-                    <h3 class="text-xl font-semibold mb-4 text-gray-800">Résultats de l'analyse</h3>
-                    <div class="flex flex-col md:flex-row gap-6">
-                        <div class="md:w-1/2">
-                            <div id="result-image-container" class="bg-black rounded-lg overflow-hidden aspect-video flex items-center justify-center">
-                                <img id="result-image" src="" alt="Résultat de l'analyse" class="w-full h-full object-contain">
-                            </div>
+            <div id="results-section" class="mt-12 hidden animate-fade-in-up">
+                <div class="glass-panel p-8 rounded-3xl border border-green-500/30 shadow-[0_0_50px_-12px_rgba(16,185,129,0.2)]">
+                    <h3 class="text-2xl font-bold mb-6 flex items-center gap-3">
+                        <i class="fas fa-check-circle text-green-500"></i> Résultat de l'analyse
+                    </h3>
+                    
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+                        <div class="rounded-xl overflow-hidden border border-white/10 shadow-lg bg-black/40">
+                            <img id="result-image" src="" class="w-full h-auto object-contain" alt="Résultat">
                         </div>
-                        <div class="md:w-1/2">
-                            <div class="bg-gray-50 p-4 rounded-lg">
-                                <h4 class="font-medium text-gray-800 mb-3">Détections:</h4>
-                                <ul id="detection-list" class="space-y-2">
-                                    <!-- Les détections seront insérées ici par JavaScript -->
-                                </ul>
+                        
+                        <div>
+                            <h4 class="text-lg font-semibold mb-4 text-gray-300">Détails des détections</h4>
+                            <div id="detection-list" class="space-y-3">
+                                <!-- Detections injected here -->
                             </div>
-                            <div class="mt-4">
-                                <button id="download-results" class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-4 rounded transition">
-                                    <i class="fas fa-download mr-2"></i> Télécharger les résultats
-                                </button>
+                            
+                            <div class="mt-8 p-4 rounded-xl bg-blue-500/10 border border-blue-500/20">
+                                <p class="text-sm text-blue-300">
+                                    <i class="fas fa-info-circle mr-2"></i>
+                                    L'analyse a été effectuée avec succès par nos modèles YOLOv8.
+                                </p>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-
-            <!-- Alert Messages -->
-            <div id="alert-container" class="max-w-4xl mx-auto mt-4">
-                <div id="success-alert" class="alert alert-success">
-                    <i class="fas fa-check-circle mr-2"></i>
-                    <span id="success-message"></span>
-                </div>
-                <div id="error-alert" class="alert alert-error">
-                    <i class="fas fa-exclamation-circle mr-2"></i>
-                    <span id="error-message"></span>
-                </div>
-            </div>
         </div>
     </section>
 
     <!-- Creator Section -->
-    <section id="creator" class="py-16 bg-gradient-to-r from-indigo-900 to-violet-900 text-white">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12">À propos du créateur</h2>
-            <div class="max-w-4xl mx-auto flex flex-col md:flex-row items-center gap-8">
-                <div class="md:w-1/3 flex justify-center">
-                    <div class="w-48 h-48 rounded-full bg-gray-300 overflow-hidden border-4 border-pink-400 shadow-lg">
-                        <img src="https://via.placeholder.com/200" alt="Marino ATOHOUN" class="w-full h-full object-cover">
-                    </div>
+    <section id="about" class="py-20 px-4 bg-black/20">
+        <div class="max-w-4xl mx-auto">
+            <div class="glass-card p-8 md:p-12 rounded-3xl flex flex-col md:flex-row items-center gap-10">
+                <div class="w-40 h-40 rounded-full p-1 bg-gradient-brand shadow-xl flex-shrink-0 flex items-center justify-center bg-black">
+                    <span class="text-4xl font-bold text-white">BB</span>
                 </div>
-                <div class="md:w-2/3">
-                    <h3 class="text-2xl font-bold mb-2">Marino ATOHOUN</h3>
-                    <p class="text-pink-300 font-medium mb-4">Data Scientist & Développeur Backend</p>
-                    <p class="mb-4 text-gray-300">Expert en intelligence artificielle et développement logiciel, Marino ATOHOUN a conçu cette solution innovante pour répondre aux besoins croissants de sécurité et de prévention des risques.</p>
-                    <p class="mb-4 text-gray-300">Avec une solide expérience dans le traitement d'images et l'analyse de données, il a développé ce système de détection basé sur YOLOv8 pour offrir une solution performante et accessible.</p>
-                    <div class="flex space-x-4">
-                        <a href="#" class="text-gray-300 hover:text-pink-300 transition">
-                            <i class="fab fa-github text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-300 hover:text-pink-300 transition">
-                            <i class="fab fa-linkedin text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-300 hover:text-pink-300 transition">
-                            <i class="fas fa-envelope text-xl"></i>
-                        </a>
+                <div class="text-center md:text-left">
+                    <h2 class="text-3xl font-bold mb-2">L'Expertise BlackBenAI</h2>
+                    <p class="text-blue-400 font-medium mb-4">Solutions IA Sur Mesure pour Entreprises</p>
+                    <p class="text-gray-400 leading-relaxed mb-6">
+                        FireWatch AI est une vitrine technologique créée par l'équipe de <strong class="text-white">BlackBenAI</strong>. Nous sommes spécialisés dans l'intégration de systèmes de vision par ordinateur pour sécuriser vos infrastructures critiques. De la conception au déploiement sur site, nous adaptons nos modèles à vos besoins uniques.
+                    </p>
+                    <div class="flex justify-center md:justify-start gap-4">
+                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-gray-400 hover:text-white"><i class="fas fa-globe"></i></a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center transition-colors text-gray-400 hover:text-white"><i class="fas fa-envelope"></i></a>
                     </div>
                 </div>
             </div>
@@ -339,380 +487,334 @@
     </section>
 
     <!-- Contact Section -->
-    <section id="contact" class="py-16 bg-white">
-        <div class="container mx-auto px-4">
-            <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Contactez-nous</h2>
-            <div class="max-w-2xl mx-auto bg-gray-50 rounded-xl shadow-md p-8">
-                <form id="contact-form" method="post">
-                    {% csrf_token %}
-                    <div id="contact-alert" class="alert">
-                        <span id="contact-message"></span>
-                    </div>
-                    <div class="mb-6">
-                        <label for="name" class="block text-gray-700 font-medium mb-2">Nom</label>
-                        <input type="text" id="name" name="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
-                    </div>
-                    <div class="mb-6">
-                        <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
-                        <input type="email" id="email" name="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" required>
-                    </div>
-                    <div class="mb-6">
-                        <label for="message" class="block text-gray-700 font-medium mb-2">Message</label>
-                        <textarea id="message" name="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500" required></textarea>
-                    </div>
-                    <button type="submit" class="bg-indigo-500 hover:bg-indigo-600 text-white font-medium py-2 px-6 rounded-lg transition w-full">
-                        <i class="fas fa-paper-plane mr-2"></i> Envoyer le message
-                    </button>
-                </form>
+    <section id="contact" class="py-20 px-4">
+        <div class="max-w-xl mx-auto">
+            <div class="text-center mb-10">
+                <h2 class="text-3xl font-bold mb-2">Contactez-nous</h2>
+                <p class="text-gray-400">Vous souhaitez intégrer cette technologie ? Discutons de votre projet.</p>
             </div>
+            
+            <form id="contact-form" class="glass-panel p-8 rounded-3xl space-y-5">
+                {% csrf_token %}
+                
+                <!-- Alert Box -->
+                <div id="contact-alert" class="hidden p-4 rounded-xl text-sm font-medium transition-all duration-300">
+                    <i class="fas fa-info-circle mr-2"></i> <span id="contact-message"></span>
+                </div>
+
+                <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-2">Votre Nom</label>
+                    <input type="text" name="name" required class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all placeholder-gray-600" placeholder="John Doe">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-2">Email</label>
+                    <input type="email" name="email" required class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all placeholder-gray-600" placeholder="[email protected]">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-400 mb-2">Message</label>
+                    <textarea name="message" rows="4" required class="w-full bg-black/20 border border-white/10 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all placeholder-gray-600" placeholder="Votre message..."></textarea>
+                </div>
+                
+                <button type="submit" class="w-full py-3 rounded-xl bg-white text-black font-bold hover:bg-gray-200 transition-colors flex items-center justify-center gap-2">
+                    <span class="btn-text">Envoyer</span>
+                    <i class="fas fa-paper-plane text-sm"></i>
+                </button>
+            </form>
         </div>
     </section>
 
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-8">
-        <div class="container mx-auto px-4">
-            <div class="flex flex-col md:flex-row justify-between items-center">
-                <div class="mb-4 md:mb-0">
-                    <div class="flex items-center space-x-2">
-                        <i class="fas fa-fire text-xl text-pink-500"></i>
-                        <span class="text-xl font-bold">FireWatch <span class="text-pink-400">AI</span></span>
-                    </div>
-                    <p class="text-gray-400 mt-2">Solution intelligente de détection d'incendie et d'intrusion</p>
-                </div>
-                <div class="flex space-x-6">
-                    <a href="#" class="text-gray-400 hover:text-pink-400 transition">
-                        <i class="fab fa-facebook-f"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-pink-400 transition">
-                        <i class="fab fa-twitter"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-pink-400 transition">
-                        <i class="fab fa-instagram"></i>
-                    </a>
-                    <a href="#" class="text-gray-400 hover:text-pink-400 transition">
-                        <i class="fab fa-github"></i>
-                    </a>
-                </div>
-            </div>
-            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
-                <p>&copy; 2024 FireWatch AI. Tous droits réservés. Conçu avec passion par Marino ATOHOUN.</p>
+    <footer class="py-8 border-t border-white/5 bg-black/20">
+        <div class="max-w-7xl mx-auto px-4 flex flex-col md:flex-row justify-between items-center gap-4">
+            <p class="text-gray-500 text-sm">&copy; 2025 FireWatch AI. Une innovation signée BlackBenAI.</p>
+            <div class="flex gap-6 text-sm text-gray-500">
+                <a href="{% url 'detection:privacy' %}" class="hover:text-white transition-colors">Confidentialité</a>
+                <a href="{% url 'detection:terms' %}" class="hover:text-white transition-colors">Conditions</a>
             </div>
         </div>
     </footer>
 
+    <!-- JavaScript Logic -->
     <script>
-        // Par Marino ATOHOUN: JavaScript pour l'interaction avec le backend Django
-        
-        // Obtenir le token CSRF
+        // --- UTILS ---
         function getCSRFToken() {
             return document.querySelector('[name=csrfmiddlewaretoken]').value;
         }
 
-        // Fonctions utilitaires pour les alertes
         function showAlert(type, message) {
-            const alertContainer = document.getElementById('alert-container');
-            const alert = document.getElementById(type + '-alert');
-            const messageSpan = document.getElementById(type + '-message');
-            
-            messageSpan.textContent = message;
-            alert.classList.add('show');
-            
-            setTimeout(() => {
-                alert.classList.remove('show');
-            }, 5000);
-        }
-
-        function showContactAlert(type, message) {
-            const alert = document.getElementById('contact-alert');
-            const messageSpan = document.getElementById('contact-message');
-            
-            alert.className = 'alert show alert-' + type;
-            messageSpan.textContent = message;
-            
-            setTimeout(() => {
-                alert.classList.remove('show');
-            }, 5000);
+            // Generic alert handler (can be improved)
+            alert(message); // Fallback for now
         }
 
-        // Tab switching functionality
+        // --- TABS ---
         function switchTab(tabName) {
-            // Hide all tab contents
-            document.querySelectorAll('.tab-content').forEach(content => {
-                content.classList.add('hidden');
-            });
+            // Hide all contents
+            document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
+            // Show target
+            document.getElementById(`content-${tabName}`).classList.remove('hidden');
             
-            // Remove active class from all tabs
-            document.querySelectorAll('.tab-button').forEach(button => {
-                button.classList.remove('tab-active');
+            // Update buttons styling
+            document.querySelectorAll('[id^="tab-btn-"]').forEach(btn => {
+                const underline = btn.querySelector('div');
+                const icon = btn.querySelector('i');
+                
+                if(btn.id === `tab-btn-${tabName}`) {
+                    btn.classList.add('text-white');
+                    btn.classList.remove('text-gray-400');
+                    underline.classList.remove('scale-x-0');
+                    underline.classList.add('scale-x-100');
+                } else {
+                    btn.classList.remove('text-white');
+                    btn.classList.add('text-gray-400');
+                    underline.classList.add('scale-x-0');
+                    underline.classList.remove('scale-x-100');
+                }
             });
-            
-            // Show selected tab content
-            document.getElementById(tabName + '-content').classList.remove('hidden');
-            
-            // Add active class to selected tab
-            document.getElementById(tabName + '-tab').classList.add('tab-active');
-        }
-
-        // Fonctions de réinitialisation des formulaires
-        function resetImageForm() {
-            document.getElementById('image-form').reset();
-            document.getElementById('image-preview').classList.add('hidden');
-            document.getElementById('results').classList.add('hidden');
         }
 
-        function resetVideoForm() {
-            document.getElementById('video-form').reset();
-            document.getElementById('video-preview').classList.add('hidden');
-            document.getElementById('results').classList.add('hidden');
-        }
-
-        // Aperçu des fichiers
-        document.getElementById('image-upload').addEventListener('change', function(e) {
+        // --- PREVIEWS ---
+        // Image Preview
+        document.getElementById('image-input').addEventListener('change', function(e) {
             const file = e.target.files[0];
-            if (file) {
+            if(file) {
                 const reader = new FileReader();
                 reader.onload = function(e) {
-                    document.getElementById('preview-img').src = e.target.result;
-                    document.getElementById('image-preview').classList.remove('hidden');
-                };
+                    document.getElementById('image-preview').src = e.target.result;
+                    document.getElementById('image-preview-container').classList.remove('hidden');
+                }
                 reader.readAsDataURL(file);
             }
         });
+        document.getElementById('clear-image').addEventListener('click', function() {
+            document.getElementById('image-input').value = '';
+            document.getElementById('image-preview-container').classList.add('hidden');
+        });
 
-        document.getElementById('video-upload').addEventListener('change', function(e) {
+        // Video Preview
+        document.getElementById('video-input').addEventListener('change', function(e) {
             const file = e.target.files[0];
-            if (file) {
+            if(file) {
                 const url = URL.createObjectURL(file);
-                document.getElementById('preview-video').src = url;
-                document.getElementById('video-preview').classList.remove('hidden');
+                document.getElementById('video-preview').src = url;
+                document.getElementById('video-preview-container').classList.remove('hidden');
             }
         });
+        document.getElementById('clear-video').addEventListener('click', function() {
+            document.getElementById('video-input').value = '';
+            document.getElementById('video-preview-container').classList.add('hidden');
+        });
+
+        // --- RESULTS DISPLAY ---
+        function displayResults(data) {
+            const resultsSection = document.getElementById('results-section');
+            const resultImage = document.getElementById('result-image');
+            const list = document.getElementById('detection-list');
+            
+            // Show Image
+            if(data.result_image_url) {
+                resultImage.src = data.result_image_url;
+            }
+            
+            // List Detections
+            list.innerHTML = '';
+            if(data.detections && data.detections.length > 0) {
+                data.detections.forEach(det => {
+                    let colorClass = 'bg-gray-500';
+                    let icon = 'fa-question';
+                    
+                    if(det.class_name === 'fire') { colorClass = 'bg-red-500'; icon = 'fa-fire'; }
+                    else if(det.class_name === 'smoke') { colorClass = 'bg-gray-400'; icon = 'fa-smog'; }
+                    else if(det.class_name === 'person' || det.class_name === 'intrusion') { colorClass = 'bg-orange-500'; icon = 'fa-user'; }
+                    
+                    const item = document.createElement('div');
+                    item.className = 'flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5';
+                    item.innerHTML = `
+                        <div class="flex items-center gap-3">
+                            <div class="w-8 h-8 rounded-full ${colorClass}/20 flex items-center justify-center text-${colorClass.replace('bg-', '')}">
+                                <i class="fas ${icon}"></i>
+                            </div>
+                            <span class="font-medium text-gray-200 capitalize">${det.class_name}</span>
+                        </div>
+                        <span class="text-sm font-bold text-blue-400">${(det.confidence * 100).toFixed(0)}%</span>
+                    `;
+                    list.appendChild(item);
+                });
+            } else {
+                list.innerHTML = '<div class="text-center text-gray-500 py-4">Aucune détection trouvée</div>';
+            }
+            
+            resultsSection.classList.remove('hidden');
+            resultsSection.scrollIntoView({behavior: 'smooth'});
+        }
+
+        // --- FORM SUBMISSIONS ---
+        
+        // Helper for loading state
+        function setLoading(form, isLoading) {
+            const btn = form.querySelector('button[type="submit"]');
+            const text = btn.querySelector('.btn-text');
+            const loader = btn.querySelector('.loader');
+            
+            if(isLoading) {
+                btn.disabled = true;
+                text.classList.add('hidden');
+                loader.classList.remove('hidden');
+            } else {
+                btn.disabled = false;
+                text.classList.remove('hidden');
+                loader.classList.add('hidden');
+            }
+        }
 
-        // Gestion du formulaire d'image
+        // Image Form
         document.getElementById('image-form').addEventListener('submit', function(e) {
             e.preventDefault();
-            
             const formData = new FormData(this);
-            const loadingDiv = this.querySelector('.loading');
+            const modelType = this.querySelector('input[name="model_type"]:checked').value;
+            formData.set('model_type', modelType);
             
-            loadingDiv.classList.add('show');
+            setLoading(this, true);
             
             fetch("{% url 'detection:analyze_image' %}", {
                 method: 'POST',
                 body: formData,
-                headers: {
-                    'X-CSRFToken': getCSRFToken()
-                }
+                headers: {'X-CSRFToken': getCSRFToken()}
             })
-            .then(response => response.json())
+            .then(r => r.json())
             .then(data => {
-                loadingDiv.classList.remove('show');
-                
-                if (data.success) {
-                    displayResults(data);
-                    showAlert('success', 'Analyse terminée avec succès!');
-                } else {
-                    showAlert('error', data.error || 'Erreur lors de l\'analyse');
-                }
+                setLoading(this, false);
+                if(data.success) displayResults(data);
+                else alert('Erreur: ' + (data.error || 'Inconnue'));
             })
-            .catch(error => {
-                loadingDiv.classList.remove('show');
-                showAlert('error', 'Erreur de connexion au serveur');
-                console.error('Error:', error);
+            .catch(err => {
+                setLoading(this, false);
+                console.error(err);
+                alert('Erreur réseau');
             });
         });
 
-        // Gestion du formulaire de vidéo
+        // Video Form
         document.getElementById('video-form').addEventListener('submit', function(e) {
             e.preventDefault();
-            
             const formData = new FormData(this);
-            const loadingDiv = this.querySelector('.loading');
+            const modelType = this.querySelector('input[name="model_type"]:checked').value;
+            formData.set('model_type', modelType);
             
-            loadingDiv.classList.add('show');
+            setLoading(this, true);
             
             fetch("{% url 'detection:analyze_video' %}", {
                 method: 'POST',
                 body: formData,
-                headers: {
-                    'X-CSRFToken': getCSRFToken()
-                }
+                headers: {'X-CSRFToken': getCSRFToken()}
             })
-            .then(response => response.json())
+            .then(r => r.json())
             .then(data => {
-                loadingDiv.classList.remove('show');
-                
-                if (data.success) {
-                    displayResults(data);
-                    showAlert('success', 'Analyse vidéo terminée avec succès!');
-                } else {
-                    showAlert('error', data.error || 'Erreur lors de l\'analyse vidéo');
-                }
+                setLoading(this, false);
+                if(data.success) displayResults(data);
+                else alert('Erreur: ' + (data.error || 'Inconnue'));
             })
-            .catch(error => {
-                loadingDiv.classList.remove('show');
-                showAlert('error', 'Erreur de connexion au serveur');
-                console.error('Error:', error);
+            .catch(err => {
+                setLoading(this, false);
+                console.error(err);
+                alert('Erreur réseau');
             });
         });
 
-        // Gestion du formulaire de contact
+        // Contact Form (FIX CSRF)
         document.getElementById('contact-form').addEventListener('submit', function(e) {
             e.preventDefault();
-            
             const formData = new FormData(this);
+            const btn = this.querySelector('button[type="submit"]');
+            const originalText = btn.innerHTML;
+            const alertBox = document.getElementById('contact-alert');
+            const msgSpan = document.getElementById('contact-message');
+            
+            btn.disabled = true;
+            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
             
             fetch("{% url 'detection:contact' %}", {
                 method: 'POST',
                 body: formData,
-                headers: {
-                    'X-CSRFToken': getCSRFToken()
-                }
+                headers: {'X-CSRFToken': getCSRFToken()}
             })
-            .then(response => response.json())
+            .then(r => r.json())
             .then(data => {
-                if (data.success) {
-                    showContactAlert('success', data.message);
+                btn.disabled = false;
+                btn.innerHTML = originalText;
+                
+                alertBox.classList.remove('hidden', 'bg-green-500/20', 'text-green-400', 'bg-red-500/20', 'text-red-400');
+                
+                if(data.success) {
+                    alertBox.classList.add('bg-green-500/20', 'text-green-400', 'alert-enter');
+                    msgSpan.textContent = data.message;
                     this.reset();
                 } else {
-                    showContactAlert('error', data.error || 'Erreur lors de l\'envoi du message');
+                    alertBox.classList.add('bg-red-500/20', 'text-red-400', 'alert-enter');
+                    msgSpan.textContent = data.error || 'Erreur inconnue';
                 }
+                alertBox.classList.remove('hidden');
+                
+                setTimeout(() => alertBox.classList.add('hidden'), 5000);
             })
-            .catch(error => {
-                showContactAlert('error', 'Erreur de connexion au serveur');
-                console.error('Error:', error);
+            .catch(err => {
+                btn.disabled = false;
+                btn.innerHTML = originalText;
+                alert('Erreur réseau');
             });
         });
 
-        // Affichage des résultats
-        function displayResults(data) {
-            const resultsSection = document.getElementById('results');
-            const resultImage = document.getElementById('result-image');
-            const detectionList = document.getElementById('detection-list');
-            
-            // Afficher l'image de résultat
-            if (data.result_image_url) {
-                resultImage.src = data.result_image_url;
-            }
-            
-            // Afficher les détections
-            detectionList.innerHTML = '';
-            if (data.detections && data.detections.length > 0) {
-                data.detections.forEach(detection => {
-                    const li = document.createElement('li');
-                    li.className = 'flex items-center';
-                    
-                    // Couleur selon le type de détection
-                    let colorClass = 'bg-blue-500';
-                    if (detection.class_name === 'fire' || detection.class_name === 'smoke') {
-                        colorClass = 'bg-red-500';
-                    } else if (detection.class_name === 'person' || detection.class_name === 'intrusion') {
-                        colorClass = 'bg-orange-500';
-                    }
-                    
-                    li.innerHTML = `
-                        <span class="w-3 h-3 ${colorClass} rounded-full mr-2"></span>
-                        <span>${detection.label || detection.class_name}: 
-                        <span class="font-medium">${(detection.confidence * 100).toFixed(1)}% de confiance</span></span>
-                    `;
-                    detectionList.appendChild(li);
-                });
-            } else {
-                detectionList.innerHTML = '<li class="text-gray-500">Aucune détection trouvée</li>';
+        // Camera Logic
+        let stream = null;
+        const video = document.getElementById('camera-video');
+        const canvas = document.getElementById('camera-canvas');
+        
+        document.getElementById('start-camera').addEventListener('click', async () => {
+            try {
+                stream = await navigator.mediaDevices.getUserMedia({video: true});
+                video.srcObject = stream;
+                document.getElementById('camera-overlay').classList.add('hidden');
+                document.getElementById('start-camera').classList.add('hidden');
+                document.getElementById('capture-frame').classList.remove('hidden');
+                document.getElementById('stop-camera').classList.remove('hidden');
+            } catch(e) {
+                alert('Erreur caméra: ' + e.message);
             }
-            
-            // Afficher la section des résultats
-            resultsSection.classList.remove('hidden');
-            resultsSection.scrollIntoView({ behavior: 'smooth' });
-        }
-
-        // Gestion de la caméra
-        let cameraStream = null;
-        let cameraVideo = document.getElementById('camera-video');
-        let cameraCanvas = document.getElementById('camera-canvas');
-
-        document.getElementById('start-camera').addEventListener('click', function() {
-            navigator.mediaDevices.getUserMedia({ video: true })
-                .then(function(stream) {
-                    cameraStream = stream;
-                    cameraVideo.srcObject = stream;
-                    
-                    document.getElementById('camera-stream').classList.remove('hidden');
-                    document.getElementById('stop-camera').classList.remove('hidden');
-                    document.getElementById('capture-frame').classList.remove('hidden');
-                    this.classList.remove('pulse-animation');
-                })
-                .catch(function(error) {
-                    showAlert('error', 'Impossible d\'accéder à la caméra: ' + error.message);
-                });
         });
 
-        document.getElementById('stop-camera').addEventListener('click', function() {
-            if (cameraStream) {
-                cameraStream.getTracks().forEach(track => track.stop());
-                cameraStream = null;
-            }
-            
-            document.getElementById('camera-stream').classList.add('hidden');
-            document.getElementById('stop-camera').classList.add('hidden');
+        document.getElementById('stop-camera').addEventListener('click', () => {
+            if(stream) stream.getTracks().forEach(t => t.stop());
+            video.srcObject = null;
+            document.getElementById('camera-overlay').classList.remove('hidden');
+            document.getElementById('start-camera').classList.remove('hidden');
             document.getElementById('capture-frame').classList.add('hidden');
-            document.getElementById('start-camera').classList.add('pulse-animation');
+            document.getElementById('stop-camera').classList.add('hidden');
         });
 
-        document.getElementById('capture-frame').addEventListener('click', function() {
-            if (cameraVideo.videoWidth > 0) {
-                // Capturer une frame de la vidéo
-                cameraCanvas.width = cameraVideo.videoWidth;
-                cameraCanvas.height = cameraVideo.videoHeight;
-                
-                const ctx = cameraCanvas.getContext('2d');
-                ctx.drawImage(cameraVideo, 0, 0);
+        document.getElementById('capture-frame').addEventListener('click', () => {
+            if(video.videoWidth) {
+                canvas.width = video.videoWidth;
+                canvas.height = video.videoHeight;
+                canvas.getContext('2d').drawImage(video, 0, 0);
                 
-                // Convertir en blob et envoyer pour analyse
-                cameraCanvas.toBlob(function(blob) {
-                    const formData = new FormData();
-                    formData.append('image', blob, 'camera_capture.jpg');
+                canvas.toBlob(blob => {
+                    const fd = new FormData();
+                    fd.append('image', blob, 'capture.jpg');
+                    // Camera uses image endpoint, default model 'both'
+                    fd.append('model_type', 'both'); 
                     
                     fetch("{% url 'detection:analyze_image' %}", {
                         method: 'POST',
-                        body: formData,
-                        headers: {
-                            'X-CSRFToken': getCSRFToken()
-                        }
+                        body: fd,
+                        headers: {'X-CSRFToken': getCSRFToken()}
                     })
-                    .then(response => response.json())
+                    .then(r => r.json())
                     .then(data => {
-                        if (data.success) {
-                            displayResults(data);
-                            showAlert('success', 'Capture analysée avec succès!');
-                        } else {
-                            showAlert('error', data.error || 'Erreur lors de l\'analyse');
-                        }
-                    })
-                    .catch(error => {
-                        showAlert('error', 'Erreur de connexion au serveur');
-                        console.error('Error:', error);
+                        if(data.success) displayResults(data);
+                        else alert('Erreur: ' + data.error);
                     });
-                }, 'image/jpeg', 0.8);
+                }, 'image/jpeg');
             }
         });
-
-        // Smooth scrolling for navigation links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function(e) {
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    target.scrollIntoView({
-                        behavior: 'smooth'
-                    });
-                }
-            });
-        });
     </script>
-    
-    <!-- Signature Marino ATOHOUN -->
-    <div style="display: none;">Code signé par Marino ATOHOUN - FireWatch AI Project</div>
 </body>
 </html>
-

detection/templates/detection/privacy.html

@@ -0,0 +1,59 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Politique de Confidentialité - FireWatch AI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'], display: ['"Outfit"', 'sans-serif'] },
+                    colors: { brand: { dark: '#0B0F19' } }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { background-color: #0B0F19; color: #F3F4F6; }
+        .glass-panel { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }
+    </style>
+</head>
+<body class="antialiased p-6 md:p-12">
+    <div class="max-w-4xl mx-auto glass-panel rounded-3xl p-8 md:p-12 shadow-2xl">
+        <a href="{% url 'detection:index' %}" class="inline-flex items-center text-blue-400 hover:text-blue-300 mb-8 transition-colors">
+            &larr; Retour à l'accueil
+        </a>
+        
+        <h1 class="text-3xl md:text-4xl font-display font-bold mb-8">Politique de Confidentialité</h1>
+        
+        <div class="space-y-6 text-gray-300 leading-relaxed">
+            <p>Dernière mise à jour : 27 Décembre 2025</p>
+            
+            <h2 class="text-xl font-bold text-white mt-8">1. Collecte des Données</h2>
+            <p>FireWatch AI, développé par BlackBenAI, collecte uniquement les données nécessaires au fonctionnement de la démonstration : images et vidéos téléchargées pour analyse. Ces fichiers sont traités temporairement et ne sont pas conservés à long terme sans votre accord explicite dans le cadre d'un contrat commercial.</p>
+            
+            <h2 class="text-xl font-bold text-white mt-8">2. Utilisation des Données</h2>
+            <p>Les données soumises sont utilisées exclusivement pour :</p>
+            <ul class="list-disc pl-5 space-y-2">
+                <li>Effectuer les détections d'incendie et d'intrusion demandées.</li>
+                <li>Améliorer nos modèles de détection (uniquement si consenti).</li>
+                <li>Vous contacter si vous avez rempli le formulaire de contact.</li>
+            </ul>
+            
+            <h2 class="text-xl font-bold text-white mt-8">3. Sécurité</h2>
+            <p>Nous mettons en œuvre des mesures de sécurité avancées pour protéger vos données contre tout accès non autorisé. Nos serveurs sont sécurisés et l'accès est strictement limité à l'équipe technique de BlackBenAI.</p>
+            
+            <h2 class="text-xl font-bold text-white mt-8">4. Contact</h2>
+            <p>Pour toute question concernant vos données, contactez-nous via le formulaire de la page d'accueil ou à [email protected].</p>
+        </div>
+        
+        <div class="mt-12 pt-8 border-t border-white/10 text-center text-sm text-gray-500">
+            &copy; 2025 FireWatch AI - BlackBenAI. Tous droits réservés.
+        </div>
+    </div>
+</body>
+</html>

detection/templates/detection/terms.html

@@ -0,0 +1,57 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Conditions d'Utilisation - FireWatch AI</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    fontFamily: { sans: ['"Plus Jakarta Sans"', 'sans-serif'], display: ['"Outfit"', 'sans-serif'] },
+                    colors: { brand: { dark: '#0B0F19' } }
+                }
+            }
+        }
+    </script>
+    <style>
+        body { background-color: #0B0F19; color: #F3F4F6; }
+        .glass-panel { background: rgba(17, 24, 39, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }
+    </style>
+</head>
+<body class="antialiased p-6 md:p-12">
+    <div class="max-w-4xl mx-auto glass-panel rounded-3xl p-8 md:p-12 shadow-2xl">
+        <a href="{% url 'detection:index' %}" class="inline-flex items-center text-blue-400 hover:text-blue-300 mb-8 transition-colors">
+            &larr; Retour à l'accueil
+        </a>
+        
+        <h1 class="text-3xl md:text-4xl font-display font-bold mb-8">Conditions d'Utilisation</h1>
+        
+        <div class="space-y-6 text-gray-300 leading-relaxed">
+            <p>Dernière mise à jour : 27 Décembre 2025</p>
+            
+            <h2 class="text-xl font-bold text-white mt-8">1. Acceptation des Conditions</h2>
+            <p>En accédant à FireWatch AI, vous acceptez d'être lié par ces conditions d'utilisation. Si vous n'acceptez pas ces conditions, veuillez ne pas utiliser nos services.</p>
+            
+            <h2 class="text-xl font-bold text-white mt-8">2. Usage de la Démonstration</h2>
+            <p>Ce site est une démonstration technique fournie par BlackBenAI. Il ne doit pas être utilisé comme unique système de sécurité critique sans validation et contrat de service dédié. Les résultats de détection sont fournis à titre indicatif.</p>
+            
+            <h2 class="text-xl font-bold text-white mt-8">3. Propriété Intellectuelle</h2>
+            <p>Tous les contenus, modèles IA, codes sources et designs présents sur ce site sont la propriété exclusive de BlackBenAI, sauf indication contraire.</p>
+            
+            <h2 class="text-xl font-bold text-white mt-8">4. Limitation de Responsabilité</h2>
+            <p>BlackBenAI ne saurait être tenu responsable des dommages directs ou indirects résultant de l'utilisation de cette démonstration, y compris les erreurs de détection (faux positifs/négatifs).</p>
+            
+            <h2 class="text-xl font-bold text-white mt-8">5. Modifications</h2>
+            <p>Nous nous réservons le droit de modifier ces conditions à tout moment. Les modifications prennent effet dès leur publication sur cette page.</p>
+        </div>
+        
+        <div class="mt-12 pt-8 border-t border-white/10 text-center text-sm text-gray-500">
+            &copy; 2025 FireWatch AI - BlackBenAI. Tous droits réservés.
+        </div>
+    </div>
+</body>
+</html>

detection/urls.py

@@ -29,7 +29,12 @@ urlpatterns = [
     # Téléchargement des résultats
     path('download/results/<uuid:session_id>/', views.download_results, name='download_results'),
     
+    # Statut des modèles IA
     # Statut des modèles IA
     path('api/models/status/', views.models_status_api, name='models_status'),
+
+    # Pages légales
+    path('privacy/', views.privacy_view, name='privacy'),
+    path('terms/', views.terms_view, name='terms'),
 ]
 

detection/views.py

@@ -1,6 +1,7 @@
 """
 Vues pour l'application Detection
 Créé par Marino ATOHOUN - FireWatch AI Project
+Modifié par BlackBenAI Team - Intégration réelle des modèles YOLOv8
 """
 import os
 import json
@@ -23,209 +24,318 @@ import logging
 # Par Marino ATOHOUN: Configuration du logging
 logger = logging.getLogger(__name__)
 
-# Par Marino ATOHOUN: Variables globales pour les modèles YOLOv8
+# Par BlackBenAI: Variables globales pour les modèles YOLOv8
 # Ces variables seront initialisées au démarrage du serveur
 fire_model = None
 intrusion_model = None
+models_loaded = False
 
-# Par Marino ATOHOUN: Fonction pour charger les modèles YOLOv8
+
+# Par BlackBenAI: Fonction pour charger les modèles YOLOv8
 def load_yolo_models():
     """
     Charge les modèles YOLOv8 pour la détection d'incendie et d'intrusion
     À appeler au démarrage du serveur Django
     """
-    global fire_model, intrusion_model
+    global fire_model, intrusion_model, models_loaded
     
     try:
-        # Par Marino ATOHOUN: Importez YOLO ici quand vous avez ultralytics installé
-        # from ultralytics import YOLO
+        # Par BlackBenAI: Import de YOLO depuis ultralytics
+        from ultralytics import YOLO
         
         # Vérifier si les fichiers de modèles existent
         fire_model_path = settings.FIRE_MODEL_PATH
         intrusion_model_path = settings.INTRUSION_MODEL_PATH
         
-        # Par Marino ATOHOUN: Décommentez ces lignes quand vous avez vos modèles
-        # if os.path.exists(fire_model_path):
-        #     fire_model = YOLO(fire_model_path)
-        #     logger.info("Modèle d'incendie chargé avec succès")
-        #     
-        #     # Mettre à jour le statut dans la base de données
-        #     AIModelStatus.objects.update_or_create(
-        #         model_type='fire',
-        #         defaults={
-        #             'model_path': str(fire_model_path),
-        #             'is_loaded': True,
-        #             'last_loaded': timezone.now(),
-        #             'model_version': '1.0'
-        #         }
-        #     )
-        # else:
-        #     logger.warning(f"Modèle d'incendie non trouvé: {fire_model_path}")
-        
-        # if os.path.exists(intrusion_model_path):
-        #     intrusion_model = YOLO(intrusion_model_path)
-        #     logger.info("Modèle d'intrusion chargé avec succès")
-        #     
-        #     # Mettre à jour le statut dans la base de données
-        #     AIModelStatus.objects.update_or_create(
-        #         model_type='intrusion',
-        #         defaults={
-        #             'model_path': str(intrusion_model_path),
-        #             'is_loaded': True,
-        #             'last_loaded': timezone.now(),
-        #             'model_version': '1.0'
-        #         }
-        #     )
-        # else:
-        #     logger.warning(f"Modèle d'intrusion non trouvé: {intrusion_model_path}")
-        
-        # Par Marino ATOHOUN: Pour l'instant, on simule le chargement
-        logger.info("Simulation du chargement des modèles - Remplacez par le vrai code")
-        
-        # Créer les entrées de statut pour la simulation
-        AIModelStatus.objects.update_or_create(
-            model_type='fire',
-            defaults={
-                'model_path': str(fire_model_path),
-                'is_loaded': False,  # Sera True quand vous aurez les vrais modèles
-                'last_loaded': None,
-                'model_version': '1.0'
-            }
-        )
-        
-        AIModelStatus.objects.update_or_create(
-            model_type='intrusion',
-            defaults={
-                'model_path': str(intrusion_model_path),
-                'is_loaded': False,  # Sera True quand vous aurez les vrais modèles
-                'last_loaded': None,
-                'model_version': '1.0'
-            }
-        )
-        
+        # Charger le modèle d'incendie
+        if os.path.exists(fire_model_path):
+            fire_model = YOLO(str(fire_model_path))
+            
+            # PATCH BlackBenAI: Empêcher le fusing automatique qui cause l'erreur 'Conv' object has no attribute 'bn'
+            # Le modèle semble déjà fusionné ou incompatible avec cette version d'Ultralytics pour le fusing
+            try:
+                if hasattr(fire_model, 'model') and fire_model.model:
+                    fire_model.model.fuse = lambda *args, **kwargs: fire_model.model
+                    logger.info("🔧 Patch 'fuse' appliqué au modèle d'incendie")
+            except Exception as e:
+                logger.warning(f"⚠️ Impossible d'appliquer le patch 'fuse' au modèle d'incendie: {e}")
+
+            logger.info(f"✅ Modèle d'incendie chargé avec succès: {fire_model_path}")
+            
+            # Mettre à jour le statut dans la base de données
+            AIModelStatus.objects.update_or_create(
+                model_type='fire',
+                defaults={
+                    'model_path': str(fire_model_path),
+                    'is_loaded': True,
+                    'last_loaded': timezone.now(),
+                    'model_version': '1.0'
+                }
+            )
+        else:
+            logger.warning(f"⚠️ Modèle d'incendie non trouvé: {fire_model_path}")
+            AIModelStatus.objects.update_or_create(
+                model_type='fire',
+                defaults={
+                    'model_path': str(fire_model_path),
+                    'is_loaded': False,
+                    'last_loaded': None,
+                    'model_version': '1.0'
+                }
+            )
+        
+        # Charger le modèle d'intrusion
+        if os.path.exists(intrusion_model_path):
+            intrusion_model = YOLO(str(intrusion_model_path))
+            
+            # PATCH BlackBenAI: Empêcher le fusing automatique
+            try:
+                if hasattr(intrusion_model, 'model') and intrusion_model.model:
+                    intrusion_model.model.fuse = lambda *args, **kwargs: intrusion_model.model
+                    logger.info("🔧 Patch 'fuse' appliqué au modèle d'intrusion")
+            except Exception as e:
+                logger.warning(f"⚠️ Impossible d'appliquer le patch 'fuse' au modèle d'intrusion: {e}")
+
+            logger.info(f"✅ Modèle d'intrusion chargé avec succès: {intrusion_model_path}")
+            
+            # Mettre à jour le statut dans la base de données
+            AIModelStatus.objects.update_or_create(
+                model_type='intrusion',
+                defaults={
+                    'model_path': str(intrusion_model_path),
+                    'is_loaded': True,
+                    'last_loaded': timezone.now(),
+                    'model_version': '1.0'
+                }
+            )
+        else:
+            logger.warning(f"⚠️ Modèle d'intrusion non trouvé: {intrusion_model_path}")
+            AIModelStatus.objects.update_or_create(
+                model_type='intrusion',
+                defaults={
+                    'model_path': str(intrusion_model_path),
+                    'is_loaded': False,
+                    'last_loaded': None,
+                    'model_version': '1.0'
+                }
+            )
+        
+        models_loaded = (fire_model is not None) or (intrusion_model is not None)
+        
+        if models_loaded:
+            logger.info("🚀 Modèles YOLOv8 initialisés avec succès!")
+        else:
+            logger.warning("⚠️ Aucun modèle YOLOv8 n'a pu être chargé")
+        
+    except ImportError as e:
+        logger.error(f"❌ ultralytics n'est pas installé: {e}")
+        logger.info("💡 Installez avec: pip install ultralytics")
     except Exception as e:
-        logger.error(f"Erreur lors du chargement des modèles: {e}")
+        logger.error(f"❌ Erreur lors du chargement des modèles: {e}")
 
 
-# Par Marino ATOHOUN: Fonction pour effectuer la détection sur une image
-def detect_objects_in_image(image_path, session):
+# Par BlackBenAI: Mapping des classes pour les modèles
+# Ajustez ces mappings selon les classes de vos modèles
+FIRE_CLASS_NAMES = {
+    0: 'fire',
+    1: 'smoke',
+}
+
+INTRUSION_CLASS_NAMES = {
+    0: 'person',
+}
+
+
+# Par BlackBenAI: Fonction pour effectuer la détection sur une image
+def detect_objects_in_image(image_path, session, model_type='both'):
     """
-    Effectue la détection d'objets sur une image
+    Effectue la détection d'objets sur une image avec les modèles YOLOv8
+    model_type: 'fire', 'intrusion', ou 'both'
     Retourne une liste de détections
     """
     detections = []
     
     try:
-        # Par Marino ATOHOUN: Ici vous intégrerez votre code de détection YOLOv8
-        # Exemple de ce que vous devrez faire:
-        
-        # # Charger l'image
-        # image = cv2.imread(image_path)
-        # 
-        # # Détection avec le modèle d'incendie
-        # if fire_model:
-        #     fire_results = fire_model(image)
-        #     for result in fire_results:
-        #         boxes = result.boxes
-        #         if boxes is not None:
-        #             for box in boxes:
-        #                 x1, y1, x2, y2 = box.xyxy[0].cpu().numpy()
-        #                 confidence = box.conf[0].cpu().numpy()
-        #                 class_id = int(box.cls[0].cpu().numpy())
-        #                 
-        #                 # Mapper les classes selon votre modèle
-        #                 class_name = 'fire' if class_id == 0 else 'smoke'
-        #                 
-        #                 detection = Detection.objects.create(
-        #                     session=session,
-        #                     class_name=class_name,
-        #                     confidence=float(confidence),
-        #                     bbox_x=float(x1),
-        #                     bbox_y=float(y1),
-        #                     bbox_width=float(x2 - x1),
-        #                     bbox_height=float(y2 - y1)
-        #                 )
-        #                 detections.append(detection)
-        # 
-        # # Détection avec le modèle d'intrusion
-        # if intrusion_model:
-        #     intrusion_results = intrusion_model(image)
-        #     # Traitement similaire...
-        
-        # Par Marino ATOHOUN: Pour l'instant, on simule des détections
-        # Remplacez cette section par votre vraie logique de détection
-        
-        # Simulation de détections aléatoires pour la démonstration
-        import random
-        
-        simulation_detections = [
-            {'class_name': 'fire', 'confidence': 0.92, 'bbox': [100, 100, 150, 150]},
-            {'class_name': 'person', 'confidence': 0.87, 'bbox': [200, 150, 100, 200]},
-            {'class_name': 'smoke', 'confidence': 0.78, 'bbox': [50, 50, 80, 100]},
-        ]
-        
-        for sim_det in simulation_detections:
-            if random.random() > 0.3:  # 70% de chance d'apparaître
-                detection = Detection.objects.create(
-                    session=session,
-                    class_name=sim_det['class_name'],
-                    confidence=sim_det['confidence'],
-                    bbox_x=sim_det['bbox'][0],
-                    bbox_y=sim_det['bbox'][1],
-                    bbox_width=sim_det['bbox'][2],
-                    bbox_height=sim_det['bbox'][3]
-                )
-                detections.append(detection)
-        
-        logger.info(f"Détections simulées créées: {len(detections)}")
+        # Charger l'image avec OpenCV
+        image = cv2.imread(image_path)
+        
+        if image is None:
+            logger.error(f"❌ Impossible de charger l'image: {image_path}")
+            return detections
+        
+        # Détection avec le modèle d'incendie
+        if fire_model is not None and model_type in ['fire', 'both']:
+            logger.info("🔥 Exécution de la détection d'incendie...")
+            try:
+                fire_results = fire_model(image, verbose=False)
+                
+                for result in fire_results:
+                    boxes = result.boxes
+                    if boxes is not None and len(boxes) > 0:
+                        for box in boxes:
+                            # Extraire les coordonnées de la boîte
+                            x1, y1, x2, y2 = box.xyxy[0].cpu().numpy()
+                            confidence = float(box.conf[0].cpu().numpy())
+                            class_id = int(box.cls[0].cpu().numpy())
+                            
+                            # Obtenir le nom de la classe
+                            class_name = FIRE_CLASS_NAMES.get(class_id, 'fire')
+                            
+                            # Filtrer par confiance minimale
+                            if confidence >= 0.5:
+                                detection = Detection.objects.create(
+                                    session=session,
+                                    class_name=class_name,
+                                    confidence=confidence,
+                                    bbox_x=float(x1),
+                                    bbox_y=float(y1),
+                                    bbox_width=float(x2 - x1),
+                                    bbox_height=float(y2 - y1)
+                                )
+                                detections.append(detection)
+                                logger.info(f"  → Détecté: {class_name} ({confidence:.2%})")
+            except Exception as e:
+                logger.error(f"❌ Erreur lors de la détection incendie: {e}")
+                if "has no attribute 'bn'" in str(e):
+                    logger.error("⚠️ Problème de compatibilité 'fusing' détecté. Vérifiez la version d'Ultralytics.")
+        
+        # Détection avec le modèle d'intrusion
+        if intrusion_model is not None and model_type in ['intrusion', 'both']:
+            logger.info("👤 Exécution de la détection d'intrusion...")
+            try:
+                intrusion_results = intrusion_model(image, verbose=False)
+                
+                for result in intrusion_results:
+                    boxes = result.boxes
+                    if boxes is not None and len(boxes) > 0:
+                        for box in boxes:
+                            # Extraire les coordonnées de la boîte
+                            x1, y1, x2, y2 = box.xyxy[0].cpu().numpy()
+                            confidence = float(box.conf[0].cpu().numpy())
+                            class_id = int(box.cls[0].cpu().numpy())
+                            
+                            # Obtenir le nom de la classe
+                            class_name = INTRUSION_CLASS_NAMES.get(class_id, 'person')
+                            
+                            # Filtrer par confiance minimale
+                            if confidence >= 0.5:
+                                detection = Detection.objects.create(
+                                    session=session,
+                                    class_name=class_name,
+                                    confidence=confidence,
+                                    bbox_x=float(x1),
+                                    bbox_y=float(y1),
+                                    bbox_width=float(x2 - x1),
+                                    bbox_height=float(y2 - y1)
+                                )
+                                detections.append(detection)
+                                logger.info(f"  → Détecté: {class_name} ({confidence:.2%})")
+            except Exception as e:
+                logger.error(f"❌ Erreur lors de la détection intrusion: {e}")
+                if "has no attribute 'bn'" in str(e):
+                    logger.error("⚠️ Problème de compatibilité 'fusing' détecté. Vérifiez la version d'Ultralytics.")
+        
+        # Fallback si aucun modèle n'est chargé
+        if fire_model is None and intrusion_model is None:
+            logger.warning("⚠️ Aucun modèle chargé - Mode simulation activé")
+            # Mode simulation pour la démo
+            import random
+            simulation_detections = [
+                {'class_name': 'fire', 'confidence': 0.92, 'bbox': [100, 100, 150, 150]},
+                {'class_name': 'person', 'confidence': 0.87, 'bbox': [200, 150, 100, 200]},
+            ]
+            
+            for sim_det in simulation_detections:
+                if random.random() > 0.5:
+                    detection = Detection.objects.create(
+                        session=session,
+                        class_name=sim_det['class_name'],
+                        confidence=sim_det['confidence'],
+                        bbox_x=sim_det['bbox'][0],
+                        bbox_y=sim_det['bbox'][1],
+                        bbox_width=sim_det['bbox'][2],
+                        bbox_height=sim_det['bbox'][3]
+                    )
+                    detections.append(detection)
+        
+        logger.info(f"✅ Détections terminées: {len(detections)} objets trouvés")
         
     except Exception as e:
-        logger.error(f"Erreur lors de la détection: {e}")
+        logger.error(f"❌ Erreur lors de la détection: {e}")
+        import traceback
+        logger.error(traceback.format_exc())
     
     return detections
 
 
-# Par Marino ATOHOUN: Fonction pour dessiner les boîtes de détection
+# Par BlackBenAI: Fonction pour dessiner les boîtes de détection
 def draw_detections_on_image(image_path, detections, output_path):
     """
     Dessine les boîtes de détection sur l'image et sauvegarde le résultat
     """
     try:
-        # Par Marino ATOHOUN: Ici vous dessinerez les vraies boîtes de détection
-        # Exemple de ce que vous devrez faire:
-        
-        # image = cv2.imread(image_path)
-        # 
-        # for detection in detections:
-        #     x1 = int(detection.bbox_x)
-        #     y1 = int(detection.bbox_y)
-        #     x2 = int(detection.bbox_x + detection.bbox_width)
-        #     y2 = int(detection.bbox_y + detection.bbox_height)
-        #     
-        #     # Couleur selon le type de détection
-        #     if detection.class_name in ['fire', 'smoke']:
-        #         color = (0, 0, 255)  # Rouge
-        #     else:
-        #         color = (255, 0, 0)  # Bleu
-        #     
-        #     # Dessiner la boîte
-        #     cv2.rectangle(image, (x1, y1), (x2, y2), color, 2)
-        #     
-        #     # Ajouter le label
-        #     label = f"{detection.class_name}: {detection.confidence:.2f}"
-        #     cv2.putText(image, label, (x1, y1-10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)
-        # 
-        # # Sauvegarder l'image avec les détections
-        # cv2.imwrite(output_path, image)
-        
-        # Par Marino ATOHOUN: Pour l'instant, on copie juste l'image originale
-        # Remplacez par votre vraie logique de dessin
-        import shutil
-        shutil.copy2(image_path, output_path)
-        logger.info(f"Image de résultat créée (simulation): {output_path}")
+        # Charger l'image
+        image = cv2.imread(image_path)
+        
+        if image is None:
+            logger.error(f"❌ Impossible de charger l'image pour le dessin: {image_path}")
+            return
+        
+        for detection in detections:
+            x1 = int(detection.bbox_x)
+            y1 = int(detection.bbox_y)
+            x2 = int(detection.bbox_x + detection.bbox_width)
+            y2 = int(detection.bbox_y + detection.bbox_height)
+            
+            # Couleur selon le type de détection
+            if detection.class_name in ['fire']:
+                color = (0, 0, 255)  # Rouge pour le feu
+                label_bg = (0, 0, 180)
+            elif detection.class_name in ['smoke']:
+                color = (128, 128, 128)  # Gris pour la fumée
+                label_bg = (100, 100, 100)
+            else:
+                color = (255, 165, 0)  # Orange pour les personnes/intrusions
+                label_bg = (200, 130, 0)
+            
+            # Dessiner la boîte avec épaisseur
+            cv2.rectangle(image, (x1, y1), (x2, y2), color, 3)
+            
+            # Préparer le label
+            label = f"{detection.class_name.upper()}: {detection.confidence:.0%}"
+            font = cv2.FONT_HERSHEY_SIMPLEX
+            font_scale = 0.6
+            thickness = 2
+            
+            # Calculer la taille du texte
+            (text_width, text_height), baseline = cv2.getTextSize(label, font, font_scale, thickness)
+            
+            # Dessiner le fond du label
+            cv2.rectangle(image, 
+                         (x1, y1 - text_height - 10), 
+                         (x1 + text_width + 10, y1), 
+                         label_bg, -1)
+            
+            # Dessiner le texte
+            cv2.putText(image, label, (x1 + 5, y1 - 5), 
+                       font, font_scale, (255, 255, 255), thickness)
+        
+        # Ajouter un watermark BlackBenAI
+        h, w = image.shape[:2]
+        watermark = "FireWatch AI by BlackBenAI"
+        font = cv2.FONT_HERSHEY_SIMPLEX
+        cv2.putText(image, watermark, (10, h - 15), 
+                   font, 0.5, (255, 255, 255), 1, cv2.LINE_AA)
+        
+        # Sauvegarder l'image avec les détections
+        cv2.imwrite(output_path, image)
+        logger.info(f"✅ Image de résultat sauvegardée: {output_path}")
         
     except Exception as e:
-        logger.error(f"Erreur lors du dessin des détections: {e}")
+        logger.error(f"❌ Erreur lors du dessin des détections: {e}")
+        # En cas d'erreur, copier l'image originale
+        import shutil
+        shutil.copy2(image_path, output_path)
 
 
 def index_view(request):
@@ -264,7 +374,7 @@ def contact_view(request):
         
         return JsonResponse({
             'success': True,
-            'message': 'Votre message a été envoyé avec succès! Nous vous répondrons bientôt.'
+            'message': 'Votre message a été envoyé avec succès! L\'équipe BlackBenAI vous répondra bientôt.'
         })
         
     except Exception as e:
@@ -278,8 +388,8 @@ def contact_view(request):
 @require_POST
 def analyze_image_view(request):
     """
-    Gère l'upload et l'analyse d'une image
-    Par Marino ATOHOUN
+    Gère l'upload et l'analyse d'une image avec les modèles YOLOv8
+    Par Marino ATOHOUN & BlackBenAI Team
     """
     try:
         if 'image' not in request.FILES:
@@ -291,11 +401,11 @@ def analyze_image_view(request):
         image_file = request.FILES['image']
         
         # Vérifier le type de fichier
-        allowed_types = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp']
+        allowed_types = ['image/jpeg', 'image/jpg', 'image/png', 'image/bmp', 'image/webp']
         if image_file.content_type not in allowed_types:
             return JsonResponse({
                 'success': False,
-                'error': 'Type de fichier non supporté. Utilisez JPG, PNG ou BMP.'
+                'error': 'Type de fichier non supporté. Utilisez JPG, PNG, BMP ou WebP.'
             }, status=400)
         
         # Créer une session de détection
@@ -317,8 +427,12 @@ def analyze_image_view(request):
         # Mesurer le temps de traitement
         start_time = time.time()
         
-        # Par Marino ATOHOUN: Effectuer la détection
-        detections = detect_objects_in_image(full_image_path, session)
+        # Récupérer le type de modèle choisi (par défaut 'both')
+        model_type = request.POST.get('model_type', 'both')
+        logger.info(f"🔍 Analyse demandée avec modèle: {model_type}")
+        
+        # Par BlackBenAI: Effectuer la détection réelle avec YOLOv8
+        detections = detect_objects_in_image(full_image_path, session, model_type)
         
         # Créer l'image de résultat avec les détections
         result_filename = f'results/result_{session.session_id}.jpg'
@@ -345,18 +459,24 @@ def analyze_image_view(request):
         
         result_image_url = request.build_absolute_uri(settings.MEDIA_URL + result_filename)
         
-        logger.info(f"Analyse d'image terminée: Session {session.session_id}, {len(detections)} détections")
+        logger.info(f"✅ Analyse d'image terminée: Session {session.session_id}, {len(detections)} détections en {session.processing_time:.2f}s")
         
         return JsonResponse({
             'success': True,
             'session_id': str(session.session_id),
             'detections': detections_data,
             'result_image_url': result_image_url,
-            'processing_time': session.processing_time
+            'processing_time': session.processing_time,
+            'models_used': {
+                'fire': fire_model is not None,
+                'intrusion': intrusion_model is not None
+            }
         })
         
     except Exception as e:
-        logger.error(f"Erreur lors de l'analyse d'image: {e}")
+        logger.error(f"❌ Erreur lors de l'analyse d'image: {e}")
+        import traceback
+        logger.error(traceback.format_exc())
         return JsonResponse({
             'success': False,
             'error': 'Une erreur est survenue lors de l\'analyse de l\'image.'
@@ -366,8 +486,8 @@ def analyze_image_view(request):
 @require_POST
 def analyze_video_view(request):
     """
-    Gère l'upload et l'analyse d'une vidéo
-    Par Marino ATOHOUN
+    Gère l'upload et l'analyse d'une vidéo avec les modèles YOLOv8
+    Par Marino ATOHOUN & BlackBenAI Team
     """
     try:
         if 'video' not in request.FILES:
@@ -379,11 +499,11 @@ def analyze_video_view(request):
         video_file = request.FILES['video']
         
         # Vérifier le type de fichier
-        allowed_types = ['video/mp4', 'video/avi', 'video/mov', 'video/mkv']
+        allowed_types = ['video/mp4', 'video/avi', 'video/mov', 'video/mkv', 'video/webm']
         if video_file.content_type not in allowed_types:
             return JsonResponse({
                 'success': False,
-                'error': 'Type de fichier non supporté. Utilisez MP4, AVI, MOV ou MKV.'
+                'error': 'Type de fichier non supporté. Utilisez MP4, AVI, MOV, MKV ou WebM.'
             }, status=400)
         
         # Créer une session de détection
@@ -399,70 +519,109 @@ def analyze_video_view(request):
         session.original_file = video_path
         session.save()
         
-        # Par Marino ATOHOUN: Ici vous intégrerez votre logique d'analyse vidéo
-        # Exemple de ce que vous devrez faire:
-        
-        # full_video_path = os.path.join(settings.MEDIA_ROOT, video_path)
-        # cap = cv2.VideoCapture(full_video_path)
-        # 
-        # frame_count = 0
-        # detections = []
-        # 
-        # while True:
-        #     ret, frame = cap.read()
-        #     if not ret:
-        #         break
-        #     
-        #     # Analyser chaque frame (ou une frame sur N pour optimiser)
-        #     if frame_count % 30 == 0:  # Analyser une frame toutes les 30
-        #         # Sauvegarder temporairement la frame
-        #         temp_frame_path = f'/tmp/frame_{frame_count}.jpg'
-        #         cv2.imwrite(temp_frame_path, frame)
-        #         
-        #         # Analyser la frame
-        #         frame_detections = detect_objects_in_image(temp_frame_path, session)
-        #         
-        #         # Ajouter le numéro de frame et timestamp
-        #         for detection in frame_detections:
-        #             detection.frame_number = frame_count
-        #             detection.timestamp = frame_count / cap.get(cv2.CAP_PROP_FPS)
-        #             detection.save()
-        #         
-        #         detections.extend(frame_detections)
-        #     
-        #     frame_count += 1
-        # 
-        # cap.release()
-        
-        # Par Marino ATOHOUN: Pour l'instant, simulation de l'analyse vidéo
+        # Par BlackBenAI: Analyse réelle de la vidéo
+        full_video_path = os.path.join(settings.MEDIA_ROOT, video_path)
+        
+        # Récupérer le type de modèle choisi (par défaut 'both')
+        model_type = request.POST.get('model_type', 'both')
+        logger.info(f"🔍 Analyse vidéo demandée avec modèle: {model_type}")
+        
         start_time = time.time()
         
-        # Simuler quelques détections sur différentes frames
-        import random
-        simulation_detections = []
-        
-        for frame_num in [0, 30, 60, 90]:
-            if random.random() > 0.5:
-                detection = Detection.objects.create(
-                    session=session,
-                    class_name=random.choice(['fire', 'person', 'smoke']),
-                    confidence=random.uniform(0.7, 0.95),
-                    bbox_x=random.uniform(50, 200),
-                    bbox_y=random.uniform(50, 200),
-                    bbox_width=random.uniform(80, 150),
-                    bbox_height=random.uniform(80, 150),
-                    frame_number=frame_num,
-                    timestamp=frame_num / 30.0  # Supposer 30 FPS
-                )
-                simulation_detections.append(detection)
+        cap = cv2.VideoCapture(full_video_path)
+        
+        if not cap.isOpened():
+            return JsonResponse({
+                'success': False,
+                'error': 'Impossible d\'ouvrir la vidéo.'
+            }, status=400)
+        
+        fps = cap.get(cv2.CAP_PROP_FPS) or 30
+        total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+        
+        frame_count = 0
+        all_detections = []
+        frames_analyzed = 0
+        
+        # Analyser une frame toutes les N frames pour optimiser
+        analyze_every_n = max(1, int(fps))  # Analyser ~1 frame par seconde
+        
+        # Créer un dossier temporaire pour les frames
+        temp_dir = os.path.join(settings.MEDIA_ROOT, 'temp', str(session.session_id))
+        os.makedirs(temp_dir, exist_ok=True)
+        
+        best_frame = None
+        best_frame_detections = []
+        
+        logger.info(f"📹 Analyse vidéo: {total_frames} frames, {fps:.1f} FPS")
+        
+        while True:
+            ret, frame = cap.read()
+            if not ret:
+                break
+            
+            # Analyser une frame sur N
+            if frame_count % analyze_every_n == 0:
+                # Sauvegarder la frame temporairement
+                temp_frame_path = os.path.join(temp_dir, f'frame_{frame_count}.jpg')
+                cv2.imwrite(temp_frame_path, frame)
+                
+                # Créer une mini-session pour cette frame
+                frame_detections = detect_objects_in_image(temp_frame_path, session, model_type)
+                
+                # Ajouter le numéro de frame et timestamp
+                for detection in frame_detections:
+                    detection.frame_number = frame_count
+                    detection.timestamp = frame_count / fps
+                    detection.save()
+                
+                all_detections.extend(frame_detections)
+                frames_analyzed += 1
+                
+                # Garder la frame avec le plus de détections
+                if len(frame_detections) > len(best_frame_detections):
+                    best_frame = frame.copy()
+                    best_frame_detections = frame_detections
+                
+                # Supprimer la frame temporaire
+                os.remove(temp_frame_path)
+            
+            frame_count += 1
+        
+        cap.release()
+        
+        # Nettoyer le dossier temporaire
+        try:
+            os.rmdir(temp_dir)
+        except:
+            pass
         
+        # Créer une image de résultat avec la meilleure frame
+        result_filename = f'results/result_{session.session_id}.jpg'
+        result_path = os.path.join(settings.MEDIA_ROOT, result_filename)
+        os.makedirs(os.path.dirname(result_path), exist_ok=True)
+        
+        if best_frame is not None:
+            temp_best_path = os.path.join(settings.MEDIA_ROOT, 'temp', f'best_{session.session_id}.jpg')
+            os.makedirs(os.path.dirname(temp_best_path), exist_ok=True)
+            cv2.imwrite(temp_best_path, best_frame)
+            draw_detections_on_image(temp_best_path, best_frame_detections, result_path)
+            os.remove(temp_best_path)
+        else:
+            # Si pas de frame, créer une image placeholder
+            placeholder = np.zeros((480, 640, 3), dtype=np.uint8)
+            cv2.putText(placeholder, "Aucune detection", (50, 240), 
+                       cv2.FONT_HERSHEY_SIMPLEX, 1, (255, 255, 255), 2)
+            cv2.imwrite(result_path, placeholder)
+        
+        session.result_file = result_filename
         session.processing_time = time.time() - start_time
         session.is_processed = True
         session.save()
         
         # Préparer la réponse
         detections_data = []
-        for detection in simulation_detections:
+        for detection in all_detections:
             detections_data.append({
                 'class_name': detection.class_name,
                 'label': detection.get_class_name_display(),
@@ -472,18 +631,28 @@ def analyze_video_view(request):
                 'timestamp': detection.timestamp
             })
         
-        logger.info(f"Analyse vidéo terminée: Session {session.session_id}, {len(simulation_detections)} détections")
+        result_image_url = request.build_absolute_uri(settings.MEDIA_URL + result_filename)
+        
+        logger.info(f"✅ Analyse vidéo terminée: Session {session.session_id}, {len(all_detections)} détections sur {frames_analyzed} frames en {session.processing_time:.2f}s")
         
         return JsonResponse({
             'success': True,
             'session_id': str(session.session_id),
             'detections': detections_data,
+            'result_image_url': result_image_url,
             'processing_time': session.processing_time,
-            'message': 'Analyse vidéo terminée. Fonctionnalité complète disponible avec vos modèles YOLOv8.'
+            'frames_analyzed': frames_analyzed,
+            'total_frames': total_frames,
+            'models_used': {
+                'fire': fire_model is not None,
+                'intrusion': intrusion_model is not None
+            }
         })
         
     except Exception as e:
-        logger.error(f"Erreur lors de l'analyse vidéo: {e}")
+        logger.error(f"❌ Erreur lors de l'analyse vidéo: {e}")
+        import traceback
+        logger.error(traceback.format_exc())
         return JsonResponse({
             'success': False,
             'error': 'Une erreur est survenue lors de l\'analyse de la vidéo.'
@@ -583,7 +752,7 @@ def download_results(request, session_id):
 def models_status_api(request):
     """
     API pour obtenir le statut des modèles IA
-    Par Marino ATOHOUN
+    Par Marino ATOHOUN & BlackBenAI Team
     """
     try:
         models_status = AIModelStatus.objects.all()
@@ -601,7 +770,12 @@ def models_status_api(request):
         
         return JsonResponse({
             'success': True,
-            'models': status_data
+            'models': status_data,
+            'runtime_status': {
+                'fire_model_loaded': fire_model is not None,
+                'intrusion_model_loaded': intrusion_model is not None,
+                'models_loaded': models_loaded
+            }
         })
         
     except Exception as e:
@@ -612,7 +786,15 @@ def models_status_api(request):
         }, status=500)
 
 
-# Par Marino ATOHOUN: Initialiser les modèles au démarrage
+# Par BlackBenAI: Initialiser les modèles au démarrage
+def privacy_view(request):
+    """Vue pour la politique de confidentialité"""
+    return render(request, 'detection/privacy.html')
+
+def terms_view(request):
+    """Vue pour les conditions d'utilisation"""
+    return render(request, 'detection/terms.html')
+
 # Cette fonction sera appelée quand Django démarre
 def initialize_models():
     """
@@ -621,10 +803,9 @@ def initialize_models():
     try:
         load_yolo_models()
     except Exception as e:
-        logger.error(f"Erreur lors de l'initialisation des modèles: {e}")
+        logger.error(f"❌ Erreur lors de l'initialisation des modèles: {e}")
 
 
-# Par Marino ATOHOUN: Appeler l'initialisation
-# Décommentez cette ligne quand vous aurez vos modèles
+# Par BlackBenAI: Appeler l'initialisation au chargement du module
 initialize_models()