// HTS Investigation Suite - Frontend React Production

// HIGH TECH SECURITY - Interface client fonctionnelle

import React, { useState, useEffect, useCallback } from 'react';
import axios from 'axios';
import {
Shield, Brain, AlertTriangle, Upload, Download, Play, Pause,
TrendingUp, Users, Database, Globe, Lock, Settings, FileText,
Network, Target, Zap, Clock, CheckCircle, XCircle, Eye, Search
} from 'lucide-react';

// Configuration API
const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:8000';
const api = axios.create({
baseURL: API_BASE_URL,
timeout: 30000,
headers: {
'Content-Type': 'application/json',
}
});

// Service API complet
class HTSApiService {
// Health check
static async healthCheck() {
const response = await api.get('/health');
return response.data;
}

// Créer investigation
static async createInvestigation(data) {
const response = await api.post('/api/investigations', data);
return response.data;
}

// Analyse DarkBERT
static async analyzeWithDarkBERT(investigationId, documents, modelName = 'bert') {
const response = await api.post('/api/analysis/darkbert', {
investigation_id: investigationId,
documents: documents,
model_name: modelName
});
return response.data;
}

// Récupérer alertes
static async getAlerts(investigationId) {
const response = await api.get(`/api/investigations/${investigationId}/alerts`);
return response.data;
}

// Stats globales
static async getGlobalStats() {
const response = await api.get('/api/stats/global');
return response.data;
}

// Info système
static async getSystemInfo() {
const response = await api.get('/');
return response.data;
}
}

// Hook personnalisé pour WebSocket temps réel
const useRealTimeUpdates = () => {
const [updates, setUpdates] = useState([]);
const [isConnected, setIsConnected] = useState(false);

useEffect(() => {
// Simulation WebSocket (à remplacer par vraie connexion)
const interval = setInterval(() => {
const mockUpdate = {
id: Date.now(),
type: ['analysis_completed', 'threat_detected', 'system_alert'][Math.floor(Math.random() * 3)],
message: `Mise à jour système ${new Date().toLocaleTimeString()}`,
timestamp: new Date()
};
setUpdates(prev => [mockUpdate, ...prev.slice(0, 9)]);
}, 5000);

setIsConnected(true);
return () => {
clearInterval(interval);
setIsConnected(false);
};
}, []);

return { updates, isConnected };
};

// Composant principal
const HTSInvestigationApp = () => {
const [systemHealth, setSystemHealth] = useState(null);
const [globalStats, setGlobalStats] = useState(null);
const [activeModule, setActiveModule] = useState('dashboard');
const [loading, setLoading] = useState(false);
const [investigations, setInvestigations] = useState([]);
const [currentAnalysis, setCurrentAnalysis] = useState(null);
const { updates, isConnected } = useRealTimeUpdates();

// Chargement initial
useEffect(() => {
loadSystemData();
const interval = setInterval(loadSystemData, 30000); // Refresh toutes les 30s
return () => clearInterval(interval);
}, []);

const loadSystemData = async () => {
try {
const [health, stats] = await Promise.all([
HTSApiService.healthCheck(),
HTSApiService.getGlobalStats()
]);
setSystemHealth(health);
setGlobalStats(stats);
} catch (error) {
console.error('Erreur chargement données:', error);
}
};

// Création d'investigation
const createNewInvestigation = async (clientType, title, description) => {
setLoading(true);
try {
const investigation = await HTSApiService.createInvestigation({
client_type: clientType,
title: title,
description: description,
created_by: 'admin_user'
});

setInvestigations(prev => [investigation, ...prev]);
return investigation;
} catch (error) {
console.error('Erreur création investigation:', error);
throw error;
} finally {
setLoading(false);
}
};

// Analyse DarkBERT
const runDarkBERTAnalysis = async (investigationId, documents, modelName = 'bert') => {
setLoading(true);
try {
const result = await HTSApiService.analyzeWithDarkBERT(investigationId, documents, modelName);
setCurrentAnalysis(result);
return result;
} catch (error) {
console.error('Erreur analyse DarkBERT:', error);
throw error;
} finally {
setLoading(false);
}
};

// Composant Dashboard
const Dashboard = () => (
<div className="space-y-6">
{/* Status système */}
<div className="bg-white rounded-xl p-6 shadow-lg">
<div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-bold text-gray-900">HIGH TECH SECURITY - Status Système</h2>
<div className="flex items-center gap-2">
<div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`}></div>
<span className="text-sm text-gray-600">
{isConnected ? 'Temps réel actif' : 'Déconnecté'}
</span>
</div>
</div>

{systemHealth && (
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
<div className="bg-green-50 p-4 rounded-lg">
<div className="flex items-center gap-2 mb-2">
<Database className="w-5 h-5 text-green-600" />
<span className="font-medium text-green-900">Base de données</span>
</div>
<span className="text-green-700 text-sm">{systemHealth.database}</span>
</div>

<div className="bg-blue-50 p-4 rounded-lg">
<div className="flex items-center gap-2 mb-2">
<Zap className="w-5 h-5 text-blue-600" />
<span className="font-medium text-blue-900">Redis Cache</span>
</div>
<span className="text-blue-700 text-sm">{systemHealth.redis}</span>
</div>

<div className="bg-purple-50 p-4 rounded-lg">
<div className="flex items-center gap-2 mb-2">
<Brain className="w-5 h-5 text-purple-600" />
<span className="font-medium text-purple-900">Modèles IA</span>
</div>
<span className="text-purple-700 text-sm">{systemHealth.models_loaded} chargés</span>
</div>

<div className="bg-orange-50 p-4 rounded-lg">
<div className="flex items-center gap-2 mb-2">
<Shield className="w-5 h-5 text-orange-600" />
<span className="font-medium text-orange-900">Sécurité</span>
</div>
<span className="text-orange-700 text-sm">Maximale</span>
</div>
</div>
)}
</div>

{/* Statistiques globales */}
{globalStats && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<StatCard
icon={FileText}
title="Investigations"
value={globalStats.total_investigations}
subtitle={`${globalStats.active_investigations} actives`}
color="blue"
/>
<StatCard
icon={Brain}
title="Analyses IA"
value={globalStats.total_analyses}
subtitle="DarkBERT Engine"
color="purple"
/>
<StatCard
icon={AlertTriangle}
title="Alertes"
value={globalStats.total_alerts}
subtitle="Système sécurisé"
color="red"
/>
<StatCard
icon={TrendingUp}
title="Performance"
value="99.7%"
subtitle="Uptime système"
color="green"
/>
</div>
)}

{/* Mises à jour temps réel */}
<div className="bg-white rounded-xl p-6 shadow-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Activité Temps Réel</h3>
<div className="space-y-2 max-h-64 overflow-y-auto">
{updates.map(update => (
<div key={update.id} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
<div className={`w-2 h-2 rounded-full ${
update.type === 'threat_detected' ? 'bg-red-500' :
update.type === 'analysis_completed' ? 'bg-green-500' : 'bg-blue-500'
}`}></div>
<span className="text-sm text-gray-700">{update.message}</span>
<span className="text-xs text-gray-500 ml-auto">
{update.timestamp.toLocaleTimeString()}
</span>
</div>
))}
</div>
</div>
</div>
);

// Composant Analyse DarkBERT
const DarkBERTAnalysis = () => {
const [documents, setDocuments] = useState('');
const [selectedModel, setSelectedModel] = useState('bert');
const [investigationTitle, setInvestigationTitle] = useState('');
const [clientType, setClientType] = useState('police');
const [analysisResult, setAnalysisResult] = useState(null);

const handleAnalysis = async () => {
if (!documents.trim() || !investigationTitle.trim()) {
alert('Veuillez remplir tous les champs');
return;
}

try {
// Créer investigation
const investigation = await createNewInvestigation(
clientType,
investigationTitle,
'Analyse DarkBERT automatique'
);

// Lancer analyse
const docList = documents.split('\n').filter(doc => doc.trim().length > 10);
const result = await runDarkBERTAnalysis(investigation.id, docList, selectedModel);
setAnalysisResult(result);

} catch (error) {
alert('Erreur lors de l\'analyse: ' + error.message);
}
};

return (
<div className="space-y-6">
<div className="bg-white rounded-xl p-6 shadow-lg">
<h2 className="text-2xl font-bold text-gray-900 mb-6">Analyse D

README.md

@@ -1,10 +1,13 @@
 ---
-title: Cybersleuth Prodigy
-emoji: 🐨
-colorFrom: pink
-colorTo: gray
+title: CyberSleuth Prodigy 🔍
+colorFrom: green
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html

@@ -1,19 +1,290 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CyberSleuth Prodigy | Security Dashboard</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Rubik:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Rubik', sans-serif;
+        }
+        .code-font {
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .vanta-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+            opacity: 0.15;
+        }
+        .glass-card {
+            backdrop-filter: blur(16px) saturate(180%);
+            -webkit-backdrop-filter: blur(16px) saturate(180%);
+            background-color: rgba(255, 255, 255, 0.85);
+        }
+        .threat-critical {
+            background: linear-gradient(90deg, rgba(239,68,68,0.1) 0%, rgba(239,68,68,0.3) 100%);
+        }
+        .threat-high {
+            background: linear-gradient(90deg, rgba(249,115,22,0.1) 0%, rgba(249,115,22,0.3) 100%);
+        }
+        .threat-medium {
+            background: linear-gradient(90deg, rgba(234,179,8,0.1) 0%, rgba(234,179,8,0.3) 100%);
+        }
+        .animate-pulse-slow {
+            animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+        }
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <div id="vanta-bg" class="vanta-canvas"></div>
+    
+    <!-- Header -->
+    <header class="relative z-10 bg-white shadow-lg border-b border-gray-200">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+            <div class="flex items-center justify-between">
+                <div class="flex items-center space-x-4">
+                    <div class="bg-blue-600 p-2 rounded-lg">
+                        <i data-feather="shield" class="text-white w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h1 class="text-2xl font-bold text-gray-900">CyberSleuth Prodigy</h1>
+                        <p class="text-sm text-gray-600">HTS Investigation Suite v2.1</p>
+                    </div>
+                </div>
+                
+                <div class="hidden md:flex items-center space-x-6">
+                    <div class="text-right">
+                        <div class="text-sm text-gray-600">203-205 The Vale, London W3 7QS</div>
+                        <div class="text-xs text-gray-500">UK: +44 7591 665201 | Company: 7849187</div>
+                    </div>
+                    <div class="flex items-center space-x-2 bg-green-50 px-3 py-2 rounded-lg">
+                        <i data-feather="lock" class="w-4 h-4 text-green-600"></i>
+                        <span class="text-sm font-medium text-green-700">Secured Connection</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </header>
+
+    <!-- Navigation -->
+    <nav class="relative z-10 bg-gray-800 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex space-x-1 overflow-x-auto py-2 hide-scrollbar">
+                <a href="#" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-blue-400 text-blue-400 transition-colors">
+                    <i data-feather="activity" class="w-4 h-4"></i>
+                    <span>Dashboard</span>
+                </a>
+                <a href="#" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors">
+                    <i data-feather="cpu" class="w-4 h-4"></i>
+                    <span>DarkBERT AI</span>
+                </a>
+                <a href="#" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors">
+                    <i data-feather="search" class="w-4 h-4"></i>
+                    <span>Investigations</span>
+                </a>
+                <a href="#" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors">
+                    <i data-feather="eye" class="w-4 h-4"></i>
+                    <span>Monitoring</span>
+                </a>
+                <a href="#" class="flex items-center space-x-2 px-4 py-3 border-b-2 border-transparent hover:border-gray-600 transition-colors">
+                    <i data-feather="settings" class="w-4 h-4"></i>
+                    <span>Configuration</span>
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        <!-- System Status -->
+        <div class="glass-card rounded-xl shadow-lg p-6 mb-8">
+            <div class="flex items-center justify-between mb-6">
+                <h2 class="text-2xl font-bold text-gray-900">System Status</h2>
+                <div class="flex items-center space-x-2">
+                    <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse-slow"></div>
+                    <span class="text-sm text-gray-600">Real-time active</span>
+                </div>
+            </div>
+
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <!-- Database Status -->
+                <div class="bg-blue-50 p-4 rounded-lg border border-blue-200">
+                    <div class="flex items-center space-x-2 mb-2">
+                        <i data-feather="database" class="w-5 h-5 text-blue-600"></i>
+                        <span class="font-medium text-blue-900">Database</span>
+                    </div>
+                    <span class="text-blue-700 text-sm">Operational</span>
+                </div>
+                
+                <!-- AI Models -->
+                <div class="bg-purple-50 p-4 rounded-lg border border-purple-200">
+                    <div class="flex items-center space-x-2 mb-2">
+                        <i data-feather="cpu" class="w-5 h-5 text-purple-600"></i>
+                        <span class="font-medium text-purple-900">AI Models</span>
+                    </div>
+                    <span class="text-purple-700 text-sm">3 loaded</span>
+                </div>
+                
+                <!-- Security -->
+                <div class="bg-green-50 p-4 rounded-lg border border-green-200">
+                    <div class="flex items-center space-x-2 mb-2">
+                        <i data-feather="shield" class="w-5 h-5 text-green-600"></i>
+                        <span class="font-medium text-green-900">Security</span>
+                    </div>
+                    <span class="text-green-700 text-sm">Maximum</span>
+                </div>
+                
+                <!-- Cache -->
+                <div class="bg-orange-50 p-4 rounded-lg border border-orange-200">
+                    <div class="flex items-center space-x-2 mb-2">
+                        <i data-feather="zap" class="w-5 h-5 text-orange-600"></i>
+                        <span class="font-medium text-orange-900">Redis Cache</span>
+                    </div>
+                    <span class="text-orange-700 text-sm">Operational</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Global Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+            <!-- Investigations Card -->
+            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+                <div class="flex items-center justify-between mb-4">
+                    <i data-feather="file-text" class="w-8 h-8 text-blue-600"></i>
+                    <span class="text-2xl font-bold text-blue-600">42</span>
+                </div>
+                <h3 class="font-semibold text-gray-900">Investigations</h3>
+                <p class="text-sm text-gray-600">8 active</p>
+            </div>
+            
+            <!-- AI Analysis Card -->
+            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+                <div class="flex items-center justify-between mb-4">
+                    <i data-feather="cpu" class="w-8 h-8 text-purple-600"></i>
+                    <span class="text-2xl font-bold text-purple-600">128</span>
+                </div>
+                <h3 class="font-semibold text-gray-900">AI Analyses</h3>
+                <p class="text-sm text-gray-600">DarkBERT Engine</p>
+            </div>
+            
+            <!-- Alerts Card -->
+            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+                <div class="flex items-center justify-between mb-4">
+                    <i data-feather="alert-triangle" class="w-8 h-8 text-red-600"></i>
+                    <span class="text-2xl font-bold text-red-600">19</span>
+                </div>
+                <h3 class="font-semibold text-gray-900">Alerts</h3>
+                <p class="text-sm text-gray-600">System secured</p>
+            </div>
+            
+            <!-- Performance Card -->
+            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+                <div class="flex items-center justify-between mb-4">
+                    <i data-feather="trending-up" class="w-8 h-8 text-green-600"></i>
+                    <span class="text-2xl font-bold text-green-600">99.7%</span>
+                </div>
+                <h3 class="font-semibold text-gray-900">Performance</h3>
+                <p class="text-sm text-gray-600">Uptime</p>
+            </div>
+        </div>
+
+        <!-- Real-time Activity -->
+        <div class="glass-card rounded-xl shadow-lg p-6 mb-8">
+            <h3 class="text-lg font-semibold text-gray-900 mb-4">Real-time Activity</h3>
+            <div class="space-y-2 max-h-64 overflow-y-auto">
+                <!-- Sample Activity Items -->
+                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                    <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                    <span class="text-sm text-gray-700">Analysis #DN42 completed successfully</span>
+                    <span class="text-xs text-gray-500 ml-auto">10:42:35</span>
+                </div>
+                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                    <div class="w-2 h-2 rounded-full bg-red-500"></div>
+                    <span class="text-sm text-gray-700">Threat detected in cluster #12</span>
+                    <span class="text-xs text-gray-500 ml-auto">10:38:21</span>
+                </div>
+                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                    <div class="w-2 h-2 rounded-full bg-blue-500"></div>
+                    <span class="text-sm text-gray-700">New investigation created: Operation Midnight</span>
+                    <span class="text-xs text-gray-500 ml-auto">10:35:07</span>
+                </div>
+                <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                    <div class="w-2 h-2 rounded-full bg-green-500"></div>
+                    <span class="text-sm text-gray-700">System backup completed</span>
+                    <span class="text-xs text-gray-500 ml-auto">10:30:45</span>
+                </div>
+            </div>
+        </div>
+
+        <!-- Quick Actions -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">Start New Analysis</h3>
+                <p class="text-sm text-gray-600 mb-4">Initiate DarkBERT analysis with documents or text input</p>
+                <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg flex items-center justify-center space-x-2">
+                    <i data-feather="cpu" class="w-4 h-4"></i>
+                    <span>Launch DarkBERT</span>
+                </button>
+            </div>
+            
+            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Investigations</h3>
+                <div class="space-y-2">
+                    <a href="#" class="block p-2 hover:bg-gray-50 rounded-lg text-sm">Operation Midnight</a>
+                    <a href="#" class="block p-2 hover:bg-gray-50 rounded-lg text-sm">Sigma Protocol</a>
+                    <a href="#" class="block p-2 hover:bg-gray-50 rounded-lg text-sm">Phoenix Network</a>
+                </div>
+            </div>
+            
+            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+                <h3 class="text-lg font-semibold text-gray-900 mb-4">System Alerts</h3>
+                <div class="space-y-3">
+                    <div class="p-2 rounded-lg threat-critical">
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm font-medium">Critical threat detected</span>
+                            <span class="text-xs">10:38</span>
+                        </div>
+                    </div>
+                    <div class="p-2 rounded-lg threat-high">
+                        <div class="flex justify-between items-center">
+                            <span class="text-sm font-medium">3 new vulnerabilities</span>
+                            <span class="text-xs">09:22</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        feather.replace();
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x3b82f6,
+            backgroundColor: 0xf8fafc,
+            size: 0.8
+        });
+    </script>
+</body>
 </html>