Spaces:

OnsAouedi
/

Maginet_inference

Sleeping

App Files Files Community

OnsAouedi commited on Jun 11

Commit

dbadf8f

verified ·

1 Parent(s): d62b7bc

Upload 3 files

Browse files

Files changed (3) hide show

Dockerfile +30 -0
requirements.txt +13 -0
templates/vessel_inference.html +681 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,30 @@

+FROM python:3.11-slim
+WORKDIR /app
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+# Copy requirements first for better caching
+COPY requirements.txt .
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+# Copy application files
+COPY . .
+# Create necessary directories
+RUN mkdir -p uploads results
+# Expose port
+EXPOSE 7860
+# Set environment variables
+ENV PYTHONPATH=/app
+ENV FLASK_APP=app.py
+# Run the application
+CMD ["python", "app.py"]

requirements.txt CHANGED Viewed

	@@ -0,0 +1,13 @@

+# Core ML and Data Processing
+torch>=1.9.0,<2.1.0
+pandas>=1.3.0,<2.1.0
+numpy>=1.21.0,<1.25.0
+tqdm>=4.62.0
+# Web Interface
+flask>=2.0.0,<3.0.0
+flask-socketio>=5.1.0,<6.0.0
+werkzeug>=2.0.0,<3.0.0
+# Additional utilities
+pathlib

templates/vessel_inference.html ADDED Viewed

	@@ -0,0 +1,681 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>🚢 Vessel Trajectory Inference</title>
+    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
+    <!-- Chart.js for error distribution plot -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
+    <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;
+            padding: 20px;
+        }
+        .container {
+            max-width: 900px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 15px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            overflow: hidden;
+        }
+        .header {
+            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+            color: white;
+            padding: 30px;
+            text-align: center;
+        }
+        .header h1 {
+            font-size: 2.5rem;
+            margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+        }
+        .header p {
+            font-size: 1.1rem;
+            opacity: 0.9;
+            margin-bottom: 5px;
+        }
+        .subtitle {
+            font-size: 0.95rem !important;
+            font-style: italic;
+            opacity: 0.8 !important;
+        }
+        .content {
+            padding: 40px;
+        }
+        .data-format-info {
+            background: #e8f4fd;
+            border: 2px solid #3498db;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 30px;
+        }
+        .data-format-info h3 {
+            color: #2c3e50;
+            margin-bottom: 15px;
+            font-size: 1.3rem;
+        }
+        .required-columns {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 10px;
+            margin-top: 15px;
+        }
+        .column-item {
+            background: white;
+            padding: 10px;
+            border-radius: 5px;
+            border-left: 4px solid #3498db;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9rem;
+        }
+        .upload-section {
+            margin-bottom: 30px;
+        }
+        .upload-section h3 {
+            color: #2c3e50;
+            margin-bottom: 15px;
+            font-size: 1.3rem;
+        }
+        .file-upload {
+            border: 2px dashed #3498db;
+            border-radius: 10px;
+            padding: 30px;
+            text-align: center;
+            background: #f8f9fa;
+            margin-bottom: 20px;
+            transition: all 0.3s ease;
+        }
+        .file-upload:hover {
+            border-color: #2980b9;
+            background: #e8f4fd;
+        }
+        .file-upload input[type="file"] {
+            display: none;
+        }
+        .file-upload label {
+            display: block;
+            cursor: pointer;
+            font-size: 1.1rem;
+            color: #2c3e50;
+        }
+        .file-upload .upload-icon {
+            font-size: 3rem;
+            margin-bottom: 10px;
+            color: #3498db;
+        }
+        .file-info {
+            margin-top: 10px;
+            padding: 10px;
+            background: #d4edda;
+            border-radius: 5px;
+            border: 1px solid #c3e6cb;
+            display: none;
+        }
+        .optional-uploads {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-top: 20px;
+        }
+        .optional-upload {
+            border: 1px solid #dee2e6;
+            border-radius: 8px;
+            padding: 20px;
+            background: #f8f9fa;
+        }
+        .optional-upload h4 {
+            color: #495057;
+            margin-bottom: 10px;
+            font-size: 1rem;
+        }
+        .optional-upload input[type="file"] {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ced4da;
+            border-radius: 4px;
+            font-size: 0.9rem;
+        }
+        .btn {
+            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            font-size: 1.1rem;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            width: 100%;
+            margin-top: 20px;
+        }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
+        }
+        .btn:disabled {
+            background: #95a5a6;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+        .progress-container {
+            display: none;
+            margin-top: 30px;
+            padding: 20px;
+            background: #f8f9fa;
+            border-radius: 10px;
+            border: 1px solid #dee2e6;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 25px;
+            background: #e9ecef;
+            border-radius: 15px;
+            overflow: hidden;
+            margin-bottom: 15px;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #3498db, #2ecc71);
+            width: 0%;
+            transition: width 0.3s ease;
+            border-radius: 15px;
+        }
+        .progress-text {
+            text-align: center;
+            font-weight: bold;
+            color: #2c3e50;
+            margin-bottom: 10px;
+        }
+        .progress-details {
+            text-align: center;
+            color: #7f8c8d;
+            font-size: 0.9rem;
+        }
+        .results-container {
+            display: none;
+            margin-top: 30px;
+            padding: 20px;
+            background: #d4edda;
+            border-radius: 10px;
+            border: 1px solid #c3e6cb;
+        }
+        .results-stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .stat-item {
+            background: white;
+            padding: 15px;
+            border-radius: 8px;
+            text-align: center;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .stat-value {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #2c3e50;
+        }
+        .stat-label {
+            font-size: 0.9rem;
+            color: #7f8c8d;
+            margin-top: 5px;
+        }
+        .download-btn {
+            background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
+            margin-top: 0;
+        }
+        .download-btn:hover {
+            box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4);
+        }
+        .error-container {
+            display: none;
+            margin-top: 20px;
+            padding: 20px;
+            background: #f8d7da;
+            border-radius: 10px;
+            border: 1px solid #f5c6cb;
+            color: #721c24;
+        }
+        .model-info {
+            background: #fff3cd;
+            border: 1px solid #ffeaa7;
+            border-radius: 8px;
+            padding: 15px;
+            margin-bottom: 20px;
+        }
+        .model-info h4 {
+            color: #856404;
+            margin-bottom: 10px;
+        }
+        .model-info ul {
+            margin-left: 20px;
+            color: #856404;
+        }
+        @media (max-width: 768px) {
+            .container {
+                margin: 10px;
+                border-radius: 10px;
+            }
+            .header {
+                padding: 20px;
+            }
+            .header h1 {
+                font-size: 2rem;
+            }
+            .content {
+                padding: 20px;
+            }
+            .optional-uploads {
+                grid-template-columns: 1fr;
+            }
+            .results-stats {
+                grid-template-columns: 1fr;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>🚢 Vessel Trajectory Inference</h1>
+            <p>Vessel trajectory prediction using our model logic</p>
+            <p class="subtitle">Upload your preprocessed dataset with segments and velocity features</p>
+        </div>
+        <div class="content">
+            <!-- Data Format Information -->
+            <div class="data-format-info">
+                <h3>📋 Required Data Format</h3>
+                <p>Your CSV file should contain the following columns (automatically detects ';' or ',' separator):</p>
+                <div class="required-columns">
+                    <div class="column-item">segment</div>
+                    <div class="column-item">latitude_velocity_km</div>
+                    <div class="column-item">longitude_velocity_km</div>
+                    <div class="column-item">latitude_degrees</div>
+                    <div class="column-item">longitude_degrees</div>
+                    <div class="column-item">time_difference_hours</div>
+                    <div class="column-item">time_scalar (or datetime)</div>
+                </div>
+                <p style="margin-top: 15px; font-style: italic; color: #495057;">
+                    ✅ Your data format is supported! The app will automatically create time_scalar from datetime/time_decimal if needed.
+                </p>
+            </div>
+            <!-- Model Information -->
+            <div class="model-info">
+                <h4>🤖 Default Model Configuration</h4>
+                <ul>
+                    <li><strong>Model:</strong> LSTMWithAttentionWithResid (7 layers, 250 hidden units)</li>
+                    <li><strong>Training:</strong> Atlantic Ocean vessel trajectories</li>
+                    <li><strong>Normalization:</strong> Atlantic dataset parameters</li>
+                    <li><strong>Sequence Length:</strong> 12 time steps</li>
+                    <li><strong>Forecast Horizon:</strong> 1 time step</li>
+                </ul>
+            </div>
+            <!-- File Upload Section -->
+            <div class="upload-section">
+                <h3>📁 Upload Files</h3>
+                <!-- Main CSV Upload -->
+                <div class="file-upload" onclick="document.getElementById('csv_file').click()">
+                    <div class="upload-icon">📊</div>
+                    <label for="csv_file">
+                        <strong>Select Your Inference Dataset (CSV)</strong><br>
+                        Click here or drag and drop your CSV file
+                    </label>
+                    <input type="file" id="csv_file" accept=".csv" onchange="handleFileSelect(this, 'csv')">
+                    <div id="csv_file_info" class="file-info"></div>
+                </div>
+                <!-- Optional Uploads -->
+                <div class="optional-uploads">
+                    <div class="optional-upload">
+                        <h4>🧠 Custom Model (Optional)</h4>
+                        <input type="file" id="model_file" accept=".pth,.pt" onchange="handleFileSelect(this, 'model')">
+                        <small>Default: best_model.pth</small>
+                    </div>
+                    <div class="optional-upload">
+                        <h4>⚙️ Custom Normalization (Optional)</h4>
+                        <input type="file" id="normalization_file" accept=".json" onchange="handleFileSelect(this, 'norm')">
+                        <small>Default: Atlantic dataset parameters</small>
+                    </div>
+                </div>
+            </div>
+            <!-- Submit Button -->
+            <button class="btn" id="submit_btn" onclick="startInference()" disabled>
+                🚀 Start Inference
+            </button>
+            <!-- Progress Container -->
+            <div class="progress-container" id="progress_container">
+                <div class="progress-text" id="progress_text">Initializing...</div>
+                <div class="progress-bar">
+                    <div class="progress-fill" id="progress_fill"></div>
+                </div>
+                <div class="progress-details" id="progress_details">Please wait...</div>
+            </div>
+            <!-- Results Container -->
+            <div class="results-container" id="results_container">
+                <h3>📈 Inference Results</h3>
+                <div class="results-stats" id="results_stats">
+                    <!-- Stats will be populated dynamically -->
+                </div>
+                <button class="btn download-btn" onclick="downloadResults()">
+                    💾 Download Results CSV
+                </button>
+                <!-- Error Distribution Chart -->
+                <div style="margin-top:30px;">
+                    <canvas id="errorChart" height="220"></canvas>
+                </div>
+            </div>
+            <!-- Error Container -->
+            <div class="error-container" id="error_container">
+                <h3>❌ Error</h3>
+                <p id="error_message"></p>
+            </div>
+        </div>
+    </div>
+    <script>
+        const socket = io();
+        let inferenceInProgress = false;
+        // File selection handlers
+        function handleFileSelect(input, type) {
+            const file = input.files[0];
+            if (file) {
+                const infoDiv = document.getElementById(input.id + '_info');
+                if (infoDiv) {
+                    infoDiv.style.display = 'block';
+                    infoDiv.innerHTML = `📁 Selected: ${file.name} (${(file.size / 1024 / 1024).toFixed(2)} MB)`;
+                }
+                // Enable submit button if CSV is selected
+                if (type === 'csv') {
+                    document.getElementById('submit_btn').disabled = false;
+                }
+            }
+        }
+        // Start inference
+        function startInference() {
+            if (inferenceInProgress) return;
+            const csvFile = document.getElementById('csv_file').files[0];
+            if (!csvFile) {
+                alert('Please select a CSV file first!');
+                return;
+            }
+            inferenceInProgress = true;
+            document.getElementById('submit_btn').disabled = true;
+            document.getElementById('progress_container').style.display = 'block';
+            document.getElementById('results_container').style.display = 'none';
+            document.getElementById('error_container').style.display = 'none';
+            // Prepare form data
+            const formData = new FormData();
+            formData.append('csv_file', csvFile);
+            const modelFile = document.getElementById('model_file').files[0];
+            if (modelFile) {
+                formData.append('model_file', modelFile);
+            }
+            const normFile = document.getElementById('normalization_file').files[0];
+            if (normFile) {
+                formData.append('normalization_file', normFile);
+            }
+            // Upload files and start inference
+            fetch('/upload', {
+                method: 'POST',
+                body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (!data.success) {
+                    showError(data.error);
+                    resetUI();
+                }
+            })
+            .catch(error => {
+                showError('Upload failed: ' + error.message);
+                resetUI();
+            });
+        }
+        // Download results
+        function downloadResults() {
+            window.location.href = '/download_results';
+        }
+        // Show error
+        function showError(message) {
+            document.getElementById('error_container').style.display = 'block';
+            document.getElementById('error_message').textContent = message;
+            document.getElementById('progress_container').style.display = 'none';
+        }
+        // Reset UI
+        function resetUI() {
+            inferenceInProgress = false;
+            document.getElementById('submit_btn').disabled = !document.getElementById('csv_file').files[0];
+            document.getElementById('progress_container').style.display = 'none';
+        }
+        // Show results
+        function showResults(stats, histogram) {
+            const resultsStats = document.getElementById('results_stats');
+            resultsStats.innerHTML = `
+                <div class="stat-item">
+                    <div class="stat-value">${stats.mean_error_km.toFixed(2)} km</div>
+                    <div class="stat-label">Mean Error</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">${stats.median_error_km.toFixed(2)} km</div>
+                    <div class="stat-label">Median Error</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">${stats.total_predictions.toLocaleString()}</div>
+                    <div class="stat-label">Total Predictions</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">${stats.total_segments}</div>
+                    <div class="stat-label">Segments Processed</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">${stats.min_error_km.toFixed(2)} km</div>
+                    <div class="stat-label">Min Error</div>
+                </div>
+                <div class="stat-item">
+                    <div class="stat-value">${stats.max_error_km.toFixed(2)} km</div>
+                    <div class="stat-label">Max Error</div>
+                </div>
+            `;
+            // Render error distribution histogram if data provided
+            if (histogram && histogram.bins && histogram.counts) {
+                renderErrorChart(histogram);
+            }
+            document.getElementById('results_container').style.display = 'block';
+            document.getElementById('progress_container').style.display = 'none';
+            resetUI();
+        }
+        // Chart.js rendering function
+        let errorChartInstance = null;
+        function renderErrorChart(histogram) {
+            const ctx = document.getElementById('errorChart').getContext('2d');
+            // Prepare labels as mid-points of bins
+            const labels = [];
+            for (let i = 0; i < histogram.bins.length - 1; i++) {
+                const mid = (histogram.bins[i] + histogram.bins[i + 1]) / 2;
+                labels.push(mid.toFixed(1));
+            }
+            // Destroy previous chart if it exists (for multiple runs)
+            if (errorChartInstance) {
+                errorChartInstance.destroy();
+            }
+            errorChartInstance = new Chart(ctx, {
+                type: 'bar',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Error (km) distribution',
+                        data: histogram.counts,
+                        backgroundColor: 'rgba(52, 152, 219, 0.5)',
+                        borderColor: 'rgba(41, 128, 185, 1)',
+                        borderWidth: 1
+                    }]
+                },
+                options: {
+                    scales: {
+                        x: {
+                            title: {
+                                display: true,
+                                text: 'Error (km)'
+                            }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            title: {
+                                display: true,
+                                text: 'Count'
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        // Socket event handlers
+        socket.on('progress_update', function(data) {
+            document.getElementById('progress_text').textContent = data.step;
+            document.getElementById('progress_fill').style.width = data.progress + '%';
+            document.getElementById('progress_details').textContent = data.details;
+            if (data.step === 'Complete') {
+                // Results will be shown via the inference_complete event
+            } else if (data.step === 'Error') {
+                showError(data.details);
+                resetUI();
+            }
+        });
+        socket.on('inference_complete', function(data) {
+            if (data.success) {
+                showResults(data.stats, data.histogram);
+            } else {
+                showError(data.error);
+                resetUI();
+            }
+        });
+        // Drag and drop functionality
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            document.addEventListener(eventName, preventDefaults, false);
+        });
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        ['dragenter', 'dragover'].forEach(eventName => {
+            document.querySelector('.file-upload').addEventListener(eventName, highlight, false);
+        });
+        ['dragleave', 'drop'].forEach(eventName => {
+            document.querySelector('.file-upload').addEventListener(eventName, unhighlight, false);
+        });
+        function highlight(e) {
+            e.currentTarget.style.borderColor = '#2980b9';
+            e.currentTarget.style.background = '#e8f4fd';
+        }
+        function unhighlight(e) {
+            e.currentTarget.style.borderColor = '#3498db';
+            e.currentTarget.style.background = '#f8f9fa';
+        }
+        document.querySelector('.file-upload').addEventListener('drop', handleDrop, false);
+        function handleDrop(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            if (files.length > 0) {
+                document.getElementById('csv_file').files = files;
+                handleFileSelect(document.getElementById('csv_file'), 'csv');
+            }
+        }
+    </script>
+</body>
+</html>