|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Générateur de Données Synthétiques</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
animation: { |
|
|
'shimmer': 'shimmer 2s infinite', |
|
|
'bounce-in': 'bounceIn 0.5s ease-out', |
|
|
'slide-in': 'slideIn 0.3s ease-out' |
|
|
}, |
|
|
keyframes: { |
|
|
shimmer: { |
|
|
'0%': { transform: 'translateX(-100%)' }, |
|
|
'100%': { transform: 'translateX(100%)' } |
|
|
}, |
|
|
bounceIn: { |
|
|
'0%': { transform: 'scale(0.3)', opacity: '0' }, |
|
|
'50%': { transform: 'scale(1.05)' }, |
|
|
'100%': { transform: 'scale(1)', opacity: '1' } |
|
|
}, |
|
|
slideIn: { |
|
|
'0%': { transform: 'translateX(100%)', opacity: '0' }, |
|
|
'100%': { transform: 'translateX(0)', opacity: '1' } |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 flex items-center justify-center p-5"> |
|
|
<div class="bg-white rounded-3xl shadow-2xl p-8 max-w-4xl w-full backdrop-blur-sm"> |
|
|
|
|
|
<div class="text-center mb-10"> |
|
|
<h1 class="text-4xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent mb-3"> |
|
|
🤖 Générateur de Données Synthétiques |
|
|
</h1> |
|
|
<p class="text-gray-600 text-lg">Uploadez votre fichier pour générer 470 jeux de données synthétiques</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="uploadSection" class="border-3 border-dashed border-gray-300 rounded-2xl p-10 text-center mb-8 transition-all duration-300 hover:border-indigo-500 hover:bg-indigo-50/30"> |
|
|
<div class="space-y-4"> |
|
|
<h3 class="text-xl font-semibold text-gray-700">📁 Sélectionnez votre fichier</h3> |
|
|
<p class="text-gray-500">Glissez-déposez votre fichier ici ou cliquez pour sélectionner</p> |
|
|
<input type="file" id="fileInput" accept=".txt" class="hidden"> |
|
|
<div class="space-x-4"> |
|
|
<button onclick="document.getElementById('fileInput').click()" |
|
|
class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg"> |
|
|
Choisir le fichier |
|
|
</button> |
|
|
<button id="startBtn" onclick="startGeneration()" |
|
|
class="hidden bg-gradient-to-r from-green-500 to-emerald-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg"> |
|
|
🚀 Démarrer la génération |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="progressSection" class="hidden space-y-6"> |
|
|
<div class="text-center"> |
|
|
<h3 class="text-2xl font-bold text-gray-800 mb-4">⏳ Génération en cours...</h3> |
|
|
<div class="w-full bg-gray-200 rounded-full h-6 overflow-hidden"> |
|
|
<div id="progressFill" class="h-full bg-gradient-to-r from-indigo-500 to-purple-600 transition-all duration-500 relative"> |
|
|
<div class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
|
|
<div class="bg-gradient-to-br from-blue-50 to-indigo-100 p-6 rounded-xl border-l-4 border-indigo-500"> |
|
|
<h4 class="font-semibold text-gray-700 mb-2">Progrès</h4> |
|
|
<p id="progressText" class="text-2xl font-bold text-indigo-600">0 / 470</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-green-50 to-emerald-100 p-6 rounded-xl border-l-4 border-emerald-500"> |
|
|
<h4 class="font-semibold text-gray-700 mb-2">Pourcentage</h4> |
|
|
<p id="percentageText" class="text-2xl font-bold text-emerald-600">0%</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-purple-50 to-violet-100 p-6 rounded-xl border-l-4 border-violet-500"> |
|
|
<h4 class="font-semibold text-gray-700 mb-2">Statut</h4> |
|
|
<p id="statusText" class="text-lg font-bold text-violet-600">En attente</p> |
|
|
</div> |
|
|
<div class="bg-gradient-to-br from-orange-50 to-amber-100 p-6 rounded-xl border-l-4 border-amber-500"> |
|
|
<h4 class="font-semibold text-gray-700 mb-2">Heure de début</h4> |
|
|
<p id="startTimeText" class="text-lg font-bold text-amber-600">-</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center"> |
|
|
<button id="downloadBtn" onclick="downloadResults()" |
|
|
class="hidden bg-gradient-to-r from-green-500 to-emerald-600 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg"> |
|
|
📥 Télécharger les résultats |
|
|
</button> |
|
|
|
|
|
<button id="downloadProgressBtn" onclick="downloadCurrentResults()" |
|
|
class="hidden bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:shadow-lg"> |
|
|
📥 Télécharger les données actuelles |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-10 pt-8 border-t-2 border-gray-200"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-6">📋 Tâches précédentes</h3> |
|
|
<div id="tasksList" class="space-y-4"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="notification" class="fixed top-5 right-5 px-6 py-4 rounded-xl text-white font-semibold transform translate-x-full transition-transform duration-300 z-50"></div> |
|
|
|
|
|
<script> |
|
|
let currentTaskId = null; |
|
|
let statusInterval = null; |
|
|
|
|
|
|
|
|
const uploadSection = document.getElementById('uploadSection'); |
|
|
const fileInput = document.getElementById('fileInput'); |
|
|
|
|
|
uploadSection.addEventListener('dragover', (e) => { |
|
|
e.preventDefault(); |
|
|
uploadSection.classList.add('border-indigo-500', 'bg-indigo-50/50'); |
|
|
}); |
|
|
|
|
|
uploadSection.addEventListener('dragleave', () => { |
|
|
uploadSection.classList.remove('border-indigo-500', 'bg-indigo-50/50'); |
|
|
}); |
|
|
|
|
|
uploadSection.addEventListener('drop', (e) => { |
|
|
e.preventDefault(); |
|
|
uploadSection.classList.remove('border-indigo-500', 'bg-indigo-50/50'); |
|
|
|
|
|
const files = e.dataTransfer.files; |
|
|
if (files.length > 0) { |
|
|
fileInput.files = files; |
|
|
handleFileSelect(); |
|
|
} |
|
|
}); |
|
|
|
|
|
fileInput.addEventListener('change', handleFileSelect); |
|
|
|
|
|
function handleFileSelect() { |
|
|
const file = fileInput.files[0]; |
|
|
if (file) { |
|
|
document.getElementById('startBtn').classList.remove('hidden'); |
|
|
document.getElementById('startBtn').classList.add('animate-bounce-in'); |
|
|
showNotification(`Fichier sélectionné: ${file.name}`, 'success'); |
|
|
} |
|
|
} |
|
|
|
|
|
function startGeneration() { |
|
|
const file = fileInput.files[0]; |
|
|
if (!file) { |
|
|
showNotification('Veuillez sélectionner un fichier', 'error'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('file', file); |
|
|
|
|
|
fetch('/upload', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
if (data.error) { |
|
|
showNotification(data.error, 'error'); |
|
|
} else { |
|
|
currentTaskId = data.task_id; |
|
|
document.getElementById('progressSection').classList.remove('hidden'); |
|
|
document.getElementById('downloadProgressBtn').classList.remove('hidden'); |
|
|
startStatusPolling(); |
|
|
showNotification('Génération démarrée!', 'success'); |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
showNotification('Erreur lors du démarrage', 'error'); |
|
|
console.error('Error:', error); |
|
|
}); |
|
|
} |
|
|
|
|
|
function startStatusPolling() { |
|
|
if (statusInterval) clearInterval(statusInterval); |
|
|
|
|
|
statusInterval = setInterval(() => { |
|
|
if (currentTaskId) { |
|
|
fetch(`/status/${currentTaskId}`) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
updateProgress(data); |
|
|
if (data.status === 'completed') { |
|
|
clearInterval(statusInterval); |
|
|
document.getElementById('downloadBtn').classList.remove('hidden'); |
|
|
document.getElementById('downloadProgressBtn').classList.add('hidden'); |
|
|
showNotification('Génération terminée!', 'success'); |
|
|
} |
|
|
}) |
|
|
.catch(console.error); |
|
|
} |
|
|
}, 2000); |
|
|
} |
|
|
|
|
|
function updateProgress(data) { |
|
|
const progressFill = document.getElementById('progressFill'); |
|
|
const progressText = document.getElementById('progressText'); |
|
|
const percentageText = document.getElementById('percentageText'); |
|
|
const statusText = document.getElementById('statusText'); |
|
|
const startTimeText = document.getElementById('startTimeText'); |
|
|
|
|
|
progressFill.style.width = `${data.percentage}%`; |
|
|
progressText.textContent = `${data.progress} / ${data.total}`; |
|
|
percentageText.textContent = `${data.percentage}%`; |
|
|
statusText.textContent = data.status === 'running' ? 'En cours' : |
|
|
data.status === 'completed' ? 'Terminé' : data.status; |
|
|
startTimeText.textContent = data.start_time; |
|
|
} |
|
|
|
|
|
function downloadResults() { |
|
|
if (currentTaskId) { |
|
|
window.location.href = `/download/${currentTaskId}`; |
|
|
} |
|
|
} |
|
|
|
|
|
function downloadCurrentResults() { |
|
|
if (currentTaskId) { |
|
|
window.location.href = `/download/${currentTaskId}?partial=true`; |
|
|
showNotification('Téléchargement des données actuelles...', 'success'); |
|
|
} |
|
|
} |
|
|
|
|
|
function showNotification(message, type) { |
|
|
const notification = document.getElementById('notification'); |
|
|
notification.textContent = message; |
|
|
|
|
|
|
|
|
notification.className = 'fixed top-5 right-5 px-6 py-4 rounded-xl text-white font-semibold transform translate-x-full transition-transform duration-300 z-50'; |
|
|
|
|
|
|
|
|
if (type === 'success') { |
|
|
notification.classList.add('bg-gradient-to-r', 'from-green-500', 'to-emerald-600'); |
|
|
} else if (type === 'error') { |
|
|
notification.classList.add('bg-gradient-to-r', 'from-red-500', 'to-rose-600'); |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.remove('translate-x-full'); |
|
|
notification.classList.add('animate-slide-in'); |
|
|
}, 100); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
notification.classList.add('translate-x-full'); |
|
|
}, 3000); |
|
|
} |
|
|
|
|
|
function loadTasks() { |
|
|
fetch('/tasks') |
|
|
.then(response => response.json()) |
|
|
.then(tasks => { |
|
|
const tasksList = document.getElementById('tasksList'); |
|
|
tasksList.innerHTML = ''; |
|
|
|
|
|
tasks.forEach(task => { |
|
|
const taskItem = document.createElement('div'); |
|
|
taskItem.className = `bg-gradient-to-r from-gray-50 to-gray-100 p-6 rounded-xl border-l-4 ${ |
|
|
task.status === 'completed' ? 'border-green-500' : |
|
|
task.status === 'running' ? 'border-blue-500' : 'border-gray-400' |
|
|
} transition-all duration-300 hover:shadow-md`; |
|
|
|
|
|
taskItem.innerHTML = ` |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<span class="font-bold text-gray-800">Tâche ${task.id.substring(0, 8)}...</span> |
|
|
<span class="px-3 py-1 rounded-full text-sm font-medium ${ |
|
|
task.status === 'completed' ? 'bg-green-100 text-green-800' : |
|
|
task.status === 'running' ? 'bg-blue-100 text-blue-800' : 'bg-gray-100 text-gray-800' |
|
|
}"> |
|
|
${task.status === 'completed' ? 'Terminé' : |
|
|
task.status === 'running' ? 'En cours' : task.status} |
|
|
</span> |
|
|
</div> |
|
|
<div class="text-sm text-gray-600"> |
|
|
<span>Démarré: ${task.start_time}</span> | |
|
|
<span>Progrès: ${task.progress}/${task.total} (${task.percentage}%)</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="space-x-2"> |
|
|
${task.status === 'completed' ? |
|
|
`<button onclick="window.location.href='/download/${task.id}'" |
|
|
class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:scale-105"> |
|
|
Télécharger |
|
|
</button>` : |
|
|
task.status === 'running' ? |
|
|
`<button onclick="window.location.href='/download/${task.id}?partial=true'" |
|
|
class="bg-gradient-to-r from-yellow-500 to-orange-500 text-white px-4 py-2 rounded-lg font-medium transition-all duration-300 hover:scale-105"> |
|
|
Télécharger actuel |
|
|
</button>` : |
|
|
`<span class="text-gray-500 font-medium">${task.status}</span>` |
|
|
} |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
tasksList.appendChild(taskItem); |
|
|
}); |
|
|
}) |
|
|
.catch(console.error); |
|
|
} |
|
|
|
|
|
|
|
|
loadTasks(); |
|
|
|
|
|
|
|
|
setInterval(loadTasks, 30000); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
