Ohpdf

Sleeping

App Files Files Community

Docfile commited on May 26

Commit

f9aefa0

verified ·

1 Parent(s): f9a4061

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +435 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,435 @@

+<!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>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        .container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            padding: 40px;
+            max-width: 800px;
+            width: 100%;
+        }
+        .header {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        .header h1 {
+            color: #333;
+            font-size: 2.5em;
+            margin-bottom: 10px;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        .header p {
+            color: #666;
+            font-size: 1.1em;
+        }
+        .upload-section {
+            border: 3px dashed #ddd;
+            border-radius: 15px;
+            padding: 40px;
+            text-align: center;
+            margin-bottom: 30px;
+            transition: all 0.3s ease;
+        }
+        .upload-section:hover {
+            border-color: #667eea;
+            background: #f8f9ff;
+        }
+        .upload-section.dragover {
+            border-color: #667eea;
+            background: #f0f4ff;
+        }
+        input[type="file"] {
+            display: none;
+        }
+        .upload-btn {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            padding: 15px 30px;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            font-size: 1.1em;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            margin: 10px;
+        }
+        .upload-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        .progress-section {
+            display: none;
+            margin-top: 30px;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 20px;
+            background: #f0f0f0;
+            border-radius: 10px;
+            overflow: hidden;
+            margin: 20px 0;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            width: 0%;
+            transition: width 0.3s ease;
+            position: relative;
+        }
+        .progress-fill::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
+            animation: shimmer 2s infinite;
+        }
+        @keyframes shimmer {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        .status-info {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 20px;
+            margin: 20px 0;
+        }
+        .status-card {
+            background: #f8f9ff;
+            padding: 20px;
+            border-radius: 10px;
+            text-align: center;
+            border-left: 4px solid #667eea;
+        }
+        .status-card h3 {
+            color: #333;
+            margin-bottom: 10px;
+        }
+        .status-card p {
+            color: #666;
+            font-size: 1.2em;
+            font-weight: bold;
+        }
+        .download-btn {
+            background: linear-gradient(135deg, #28a745, #20c997);
+            color: white;
+            padding: 15px 30px;
+            border: none;
+            border-radius: 50px;
+            cursor: pointer;
+            font-size: 1.1em;
+            font-weight: 600;
+            transition: all 0.3s ease;
+            margin: 20px 10px;
+            display: none;
+        }
+        .download-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+        .tasks-section {
+            margin-top: 30px;
+            padding-top: 30px;
+            border-top: 2px solid #eee;
+        }
+        .task-item {
+            background: #f8f9ff;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 10px 0;
+            border-left: 4px solid #667eea;
+        }
+        .task-item.completed {
+            border-left-color: #28a745;
+        }
+        .notification {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            padding: 15px 25px;
+            border-radius: 10px;
+            color: white;
+            font-weight: 600;
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
+            z-index: 1000;
+        }
+        .notification.success {
+            background: linear-gradient(135deg, #28a745, #20c997);
+        }
+        .notification.error {
+            background: linear-gradient(135deg, #dc3545, #c82333);
+        }
+        .notification.show {
+            transform: translateX(0);
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🤖 Générateur de Données Synthétiques</h1>
+            <p>Uploadez votre fichier pour générer 470 jeux de données synthétiques</p>
+        </div>
+        <div class="upload-section" id="uploadSection">
+            <h3>📁 Sélectionnez votre fichier</h3>
+            <p>Glissez-déposez votre fichier ici ou cliquez pour sélectionner</p>
+            <input type="file" id="fileInput" accept=".txt">
+            <button class="upload-btn" onclick="document.getElementById('fileInput').click()">
+                Choisir le fichier
+            </button>
+            <button class="upload-btn" id="startBtn" onclick="startGeneration()" style="display: none;">
+                🚀 Démarrer la génération
+            </button>
+        </div>
+        <div class="progress-section" id="progressSection">
+            <h3>⏳ Génération en cours...</h3>
+            <div class="progress-bar">
+                <div class="progress-fill" id="progressFill"></div>
+            </div>
+            <div class="status-info">
+                <div class="status-card">
+                    <h3>Progrès</h3>
+                    <p id="progressText">0 / 470</p>
+                </div>
+                <div class="status-card">
+                    <h3>Pourcentage</h3>
+                    <p id="percentageText">0%</p>
+                </div>
+                <div class="status-card">
+                    <h3>Statut</h3>
+                    <p id="statusText">En attente</p>
+                </div>
+                <div class="status-card">
+                    <h3>Heure de début</h3>
+                    <p id="startTimeText">-</p>
+                </div>
+            </div>
+            <button class="download-btn" id="downloadBtn" onclick="downloadResults()">
+                📥 Télécharger les résultats
+            </button>
+        </div>
+        <div class="tasks-section">
+            <h3>📋 Tâches précédentes</h3>
+            <div id="tasksList"></div>
+        </div>
+    </div>
+    <div class="notification" id="notification"></div>
+    <script>
+        let currentTaskId = null;
+        let statusInterval = null;
+        // Gestion du drag & drop
+        const uploadSection = document.getElementById('uploadSection');
+        const fileInput = document.getElementById('fileInput');
+        uploadSection.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadSection.classList.add('dragover');
+        });
+        uploadSection.addEventListener('dragleave', () => {
+            uploadSection.classList.remove('dragover');
+        });
+        uploadSection.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadSection.classList.remove('dragover');
+            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').style.display = 'inline-block';
+                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').style.display = 'block';
+                    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').style.display = 'inline-block';
+                            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 showNotification(message, type) {
+            const notification = document.getElementById('notification');
+            notification.textContent = message;
+            notification.className = `notification ${type}`;
+            notification.classList.add('show');
+            setTimeout(() => {
+                notification.classList.remove('show');
+            }, 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 = `task-item ${task.status}`;
+                    taskItem.innerHTML = `
+                        <div style="display: flex; justify-content: space-between; align-items: center;">
+                            <div>
+                                <strong>Tâche ${task.id.substring(0, 8)}...</strong><br>
+                                <small>Démarré: ${task.start_time} | Progrès: ${task.progress}/${task.total} (${task.percentage}%)</small>
+                            </div>
+                            <div>
+                                ${task.status === 'completed' ?
+                                    `<button class="download-btn" style="display: inline-block; margin: 0;" onclick="window.location.href='/download/${task.id}'">Télécharger</button>` :
+                                    `<span style="color: #667eea; font-weight: bold;">${task.status}</span>`
+                                }
+                            </div>
+                        </div>
+                    `;
+                    tasksList.appendChild(taskItem);
+                });
+            })
+            .catch(console.error);
+        }
+        // Charger les tâches au démarrage
+        loadTasks();
+        // Recharger les tâches toutes les 30 secondes
+        setInterval(loadTasks, 30000);
+    </script>
+</body>
+</html>