Spaces:

SaidAmchghal
/

transport

Running

App Files Files Community

SaidAmchghal commited on May 28, 2025

Commit

cefaa66

verified ·

1 Parent(s): e941184

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +735 -19
prompts.txt +2 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Transport
-emoji: 📈
 colorFrom: pink
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: transport
+emoji: 🐳
 colorFrom: pink
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,735 @@
-<!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>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Optimisation de Trajet Transporteur</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .map-container {
+            height: 400px;
+            background-color: #e5e7eb;
+            position: relative;
+            overflow: hidden;
+        }
+        .city-node {
+            position: absolute;
+            width: 24px;
+            height: 24px;
+            background-color: #3b82f6;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-weight: bold;
+            cursor: pointer;
+            transform: translate(-50%, -50%);
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            transition: all 0.2s;
+            z-index: 2;
+        }
+        .city-node:hover {
+            transform: translate(-50%, -50%) scale(1.2);
+            background-color: #2563eb;
+        }
+        .route-line {
+            position: absolute;
+            background-color: #ef4444;
+            height: 3px;
+            transform-origin: left center;
+            z-index: 1;
+        }
+        .optimal-route {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.7; }
+            50% { opacity: 1; }
+            100% { opacity: 0.7; }
+        }
+        .distance-matrix td {
+            min-width: 60px;
+        }
+        .loading-spinner {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 3px solid rgba(255,255,255,.3);
+            border-radius: 50%;
+            border-top-color: #fff;
+            animation: spin 1s ease-in-out infinite;
+        }
+        @keyframes spin {
+            to { transform: rotate(360deg); }
+        }
+        .progress-bar {
+            height: 4px;
+            background-color: #e5e7eb;
+            border-radius: 2px;
+            overflow: hidden;
+            margin-top: 8px;
+        }
+        .progress-bar-fill {
+            height: 100%;
+            background-color: #3b82f6;
+            transition: width 0.3s ease;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <header class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-blue-600 mb-2">Optimisation de Trajet Transporteur</h1>
+            <p class="text-gray-600">Calcul du trajet le plus court pour visiter toutes les villes et retourner au point de départ</p>
+        </header>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+            <!-- Formulaire de saisie -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Configuration du trajet</h2>
+                <div class="mb-6">
+                    <label class="block text-gray-700 mb-2">Villes à visiter</label>
+                    <div class="flex mb-2">
+                        <input type="text" id="cityName" placeholder="Nom de la ville" class="flex-1 px-3 py-2 border rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <button id="addCityBtn" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r">
+                            <i class="fas fa-plus mr-1"></i> Ajouter
+                        </button>
+                    </div>
+                    <ul id="citiesList" class="border rounded divide-y max-h-40 overflow-y-auto">
+                        <!-- Villes ajoutées apparaîtront ici -->
+                    </ul>
+                </div>
+                <div class="mb-6">
+                    <label class="block text-gray-700 mb-2">Matrice des distances (km)</label>
+                    <div class="overflow-x-auto">
+                        <table id="distanceMatrix" class="w-full border-collapse distance-matrix">
+                            <thead>
+                                <tr class="bg-gray-100">
+                                    <th class="border p-2">Ville</th>
+                                    <!-- Colonnes seront ajoutées dynamiquement -->
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <!-- Lignes seront ajoutées dynamiquement -->
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+                <div class="flex justify-end space-x-3">
+                    <button id="resetBtn" class="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-100">
+                        <i class="fas fa-redo mr-1"></i> Réinitialiser
+                    </button>
+                    <button id="calculateBtn" class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded flex items-center">
+                        <i class="fas fa-calculator mr-1"></i> Calculer le trajet optimal
+                    </button>
+                </div>
+            </div>
+            <!-- Résultats et visualisation -->
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Résultats</h2>
+                <div id="resultsContainer" class="hidden">
+                    <div class="mb-4 p-4 bg-blue-50 rounded border border-blue-200">
+                        <h3 class="font-medium text-blue-800 mb-2">Trajet optimal</h3>
+                        <div id="optimalRoute" class="text-lg font-semibold text-blue-600"></div>
+                        <div id="totalDistance" class="mt-2 text-gray-700"></div>
+                        <div class="progress-bar hidden" id="progressBarContainer">
+                            <div class="progress-bar-fill" id="progressBar"></div>
+                        </div>
+                    </div>
+                    <div class="map-container mb-4 rounded border border-gray-200 relative">
+                        <div id="map"></div>
+                    </div>
+                    <div class="bg-gray-50 p-4 rounded border border-gray-200">
+                        <h3 class="font-medium text-gray-800 mb-2">Détails de l'algorithme</h3>
+                        <div id="algorithmDetails" class="text-sm text-gray-600">
+                            <!-- Détails du calcul apparaîtront ici -->
+                        </div>
+                    </div>
+                </div>
+                <div id="emptyState" class="text-center py-12 text-gray-500">
+                    <i class="fas fa-route text-4xl mb-4 text-gray-300"></i>
+                    <p>Ajoutez des villes et leurs distances, puis cliquez sur "Calculer" pour trouver le trajet optimal.</p>
+                </div>
+                <div id="loadingState" class="hidden text-center py-12">
+                    <div class="inline-block mb-4">
+                        <div class="loading-spinner"></div>
+                    </div>
+                    <p class="text-gray-600">Calcul du trajet optimal en cours...</p>
+                    <div class="progress-bar mt-4 w-1/2 mx-auto">
+                        <div class="progress-bar-fill" id="loadingProgressBar"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const cities = [];
+            const distanceMatrix = {};
+            let cityCounter = 0;
+            let isCalculating = false;
+            // Éléments DOM
+            const cityNameInput = document.getElementById('cityName');
+            const addCityBtn = document.getElementById('addCityBtn');
+            const citiesList = document.getElementById('citiesList');
+            const distanceMatrixTable = document.getElementById('distanceMatrix');
+            const calculateBtn = document.getElementById('calculateBtn');
+            const resetBtn = document.getElementById('resetBtn');
+            const resultsContainer = document.getElementById('resultsContainer');
+            const emptyState = document.getElementById('emptyState');
+            const loadingState = document.getElementById('loadingState');
+            const optimalRouteDisplay = document.getElementById('optimalRoute');
+            const totalDistanceDisplay = document.getElementById('totalDistance');
+            const algorithmDetails = document.getElementById('algorithmDetails');
+            const mapContainer = document.getElementById('map');
+            const progressBarContainer = document.getElementById('progressBarContainer');
+            const progressBar = document.getElementById('progressBar');
+            const loadingProgressBar = document.getElementById('loadingProgressBar');
+            // Ajouter une ville
+            addCityBtn.addEventListener('click', function() {
+                const cityName = cityNameInput.value.trim();
+                if (cityName && !cities.includes(cityName)) {
+                    cities.push(cityName);
+                    distanceMatrix[cityName] = {};
+                    // Initialiser les distances avec les villes existantes
+                    cities.forEach(city => {
+                        if (city !== cityName) {
+                            distanceMatrix[cityName][city] = undefined;
+                            distanceMatrix[city][cityName] = undefined;
+                        }
+                    });
+                    // Mettre à jour la liste des villes
+                    updateCitiesList();
+                    // Mettre à jour la matrice des distances
+                    updateDistanceMatrix();
+                    // Effacer le champ de saisie
+                    cityNameInput.value = '';
+                    // Masquer l'état vide si nécessaire
+                    if (cities.length >= 2) {
+                        emptyState.classList.add('hidden');
+                    }
+                }
+            });
+            // Ajouter une ville avec la touche Entrée
+            cityNameInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    addCityBtn.click();
+                }
+            });
+            // Mettre à jour la liste des villes
+            function updateCitiesList() {
+                citiesList.innerHTML = '';
+                cities.forEach(city => {
+                    const li = document.createElement('li');
+                    li.className = 'px-3 py-2 flex justify-between items-center hover:bg-gray-50';
+                    li.innerHTML = `
+                        <span>${city}</span>
+                        <button class="text-red-500 hover:text-red-700 delete-city" data-city="${city}">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    `;
+                    citiesList.appendChild(li);
+                });
+                // Ajouter des écouteurs d'événements pour les boutons de suppression
+                document.querySelectorAll('.delete-city').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const cityToRemove = this.getAttribute('data-city');
+                        removeCity(cityToRemove);
+                    });
+                });
+            }
+            // Supprimer une ville
+            function removeCity(city) {
+                const index = cities.indexOf(city);
+                if (index !== -1) {
+                    cities.splice(index, 1);
+                    delete distanceMatrix[city];
+                    // Supprimer les distances associées dans la matrice
+                    for (const otherCity in distanceMatrix) {
+                        if (distanceMatrix[otherCity][city]) {
+                            delete distanceMatrix[otherCity][city];
+                        }
+                    }
+                    updateCitiesList();
+                    updateDistanceMatrix();
+                    // Afficher l'état vide si nécessaire
+                    if (cities.length < 2) {
+                        resultsContainer.classList.add('hidden');
+                        emptyState.classList.remove('hidden');
+                    }
+                }
+            }
+            // Mettre à jour la matrice des distances
+            function updateDistanceMatrix() {
+                // Vider le tableau
+                distanceMatrixTable.innerHTML = '';
+                if (cities.length === 0) {
+                    return;
+                }
+                // Créer l'en-tête
+                const thead = distanceMatrixTable.createTHead();
+                const headerRow = thead.insertRow();
+                headerRow.innerHTML = '<th class="border p-2">Ville</th>';
+                cities.forEach(city => {
+                    const th = document.createElement('th');
+                    th.className = 'border p-2';
+                    th.textContent = city;
+                    headerRow.appendChild(th);
+                });
+                // Créer le corps du tableau
+                const tbody = distanceMatrixTable.createTBody();
+                cities.forEach(city1 => {
+                    const row = tbody.insertRow();
+                    const cell = row.insertCell();
+                    cell.className = 'border p-2 bg-gray-100 font-medium';
+                    cell.textContent = city1;
+                    cities.forEach(city2 => {
+                        const cell = row.insertCell();
+                        cell.className = 'border p-2';
+                        if (city1 === city2) {
+                            cell.innerHTML = '<span class="text-gray-400">-</span>';
+                        } else {
+                            const input = document.createElement('input');
+                            input.type = 'number';
+                            input.min = '0';
+                            input.step = '0.1';
+                            input.className = 'w-full px-2 py-1 border rounded focus:outline-none focus:ring-1 focus:ring-blue-500';
+                            input.value = distanceMatrix[city1][city2] || '';
+                            input.placeholder = 'km';
+                            input.addEventListener('change', function() {
+                                const value = parseFloat(this.value);
+                                if (!isNaN(value) && value >= 0) {
+                                    distanceMatrix[city1][city2] = value;
+                                    distanceMatrix[city2][city1] = value; // Symétrique
+                                } else {
+                                    delete distanceMatrix[city1][city2];
+                                    delete distanceMatrix[city2][city1];
+                                    this.value = '';
+                                }
+                            });
+                            cell.appendChild(input);
+                        }
+                    });
+                });
+            }
+            // Réinitialiser l'application
+            resetBtn.addEventListener('click', function() {
+                if (isCalculating) return;
+                cities.length = 0;
+                for (const city in distanceMatrix) {
+                    delete distanceMatrix[city];
+                }
+                updateCitiesList();
+                updateDistanceMatrix();
+                resultsContainer.classList.add('hidden');
+                loadingState.classList.add('hidden');
+                emptyState.classList.remove('hidden');
+            });
+            // Calculer le trajet optimal
+            calculateBtn.addEventListener('click', async function() {
+                if (isCalculating) return;
+                if (cities.length < 2) {
+                    showAlert('Veuillez ajouter au moins 2 villes pour calculer un trajet.', 'error');
+                    return;
+                }
+                // Vérifier que toutes les distances sont renseignées
+                let allDistancesSet = true;
+                const missingDistances = [];
+                for (let i = 0; i < cities.length; i++) {
+                    for (let j = i + 1; j < cities.length; j++) {
+                        const city1 = cities[i];
+                        const city2 = cities[j];
+                        if (typeof distanceMatrix[city1][city2] === 'undefined' ||
+                            isNaN(distanceMatrix[city1][city2])) {
+                            allDistancesSet = false;
+                            missingDistances.push(`${city1} ↔ ${city2}`);
+                        }
+                    }
+                }
+                if (!allDistancesSet) {
+                    showAlert(`Veuillez renseigner toutes les distances entre les villes.<br>Distances manquantes: ${missingDistances.join(', ')}`, 'error');
+                    return;
+                }
+                // Démarrer le calcul
+                isCalculating = true;
+                resultsContainer.classList.add('hidden');
+                emptyState.classList.add('hidden');
+                loadingState.classList.remove('hidden');
+                try {
+                    // Simuler un temps de calcul (pour la démo)
+                    await simulateCalculationProgress();
+                    // Calculer le trajet optimal
+                    const { route, distance } = await solveTSP();
+                    // Afficher les résultats
+                    optimalRouteDisplay.textContent = route.join(' → ');
+                    totalDistanceDisplay.textContent = `Distance totale: ${distance.toFixed(2)} km`;
+                    // Détails de l'algorithme
+                    algorithmDetails.innerHTML = `
+                        <p class="mb-2"><strong>Méthode utilisée:</strong> Algorithme du plus proche voisin avec optimisation 2-opt</p>
+                        <p class="mb-2"><strong>Nombre de villes:</strong> ${cities.length}</p>
+                        <p class="mb-2"><strong>Complexité:</strong> O(n²) - Solution approchée pour le problème NP-difficile du voyageur de commerce</p>
+                        <p><strong>Note:</strong> Cette solution n'est pas garantie d'être optimale mais fournit une bonne approximation en temps raisonnable.</p>
+                    `;
+                    // Afficher la visualisation
+                    visualizeRoute(route);
+                    // Afficher le conteneur de résultats
+                    resultsContainer.classList.remove('hidden');
+                } catch (error) {
+                    console.error('Erreur lors du calcul:', error);
+                    showAlert('Une erreur est survenue lors du calcul du trajet optimal.', 'error');
+                } finally {
+                    loadingState.classList.add('hidden');
+                    isCalculating = false;
+                }
+            });
+            // Simuler une barre de progression pendant le calcul
+            async function simulateCalculationProgress() {
+                return new Promise(resolve => {
+                    let progress = 0;
+                    const interval = setInterval(() => {
+                        progress += Math.random() * 10;
+                        if (progress > 95) {
+                            progress = 95; // Ne pas aller à 100% avant la fin réelle
+                        }
+                        loadingProgressBar.style.width = `${progress}%`;
+                    }, 200);
+                    // Simuler un temps de calcul variable selon le nombre de villes
+                    const delay = Math.min(2000, cities.length * 200);
+                    setTimeout(() => {
+                        clearInterval(interval);
+                        loadingProgressBar.style.width = '100%';
+                        setTimeout(resolve, 300);
+                    }, delay);
+                });
+            }
+            // Afficher une alerte
+            function showAlert(message, type = 'info') {
+                const alertDiv = document.createElement('div');
+                const bgColor = type === 'error' ? 'bg-red-50 border-red-200 text-red-800' : 'bg-blue-50 border-blue-200 text-blue-800';
+                alertDiv.className = `fixed top-4 right-4 p-4 rounded border ${bgColor} shadow-lg max-w-md z-50`;
+                alertDiv.innerHTML = `
+                    <div class="flex items-start">
+                        <i class="fas ${type === 'error' ? 'fa-exclamation-triangle' : 'fa-info-circle'} mr-2 mt-1"></i>
+                        <div>${message}</div>
+                        <button class="ml-4 text-gray-500 hover:text-gray-700" onclick="this.parentElement.parentElement.remove()">
+                            <i class="fas fa-times"></i>
+                        </button>
+                    </div>
+                `;
+                document.body.appendChild(alertDiv);
+                // Supprimer automatiquement après 5 secondes
+                setTimeout(() => {
+                    alertDiv.remove();
+                }, 5000);
+            }
+            // Algorithme pour résoudre le TSP (approche par plus proche voisin avec optimisation 2-opt)
+            async function solveTSP() {
+                // Si peu de villes, utiliser la force brute pour une solution exacte
+                if (cities.length <= 8) {
+                    return bruteForceTSP();
+                }
+                // Sinon, utiliser l'heuristique du plus proche voisin avec optimisation 2-opt
+                return nearestNeighborWith2Opt();
+            }
+            // Force brute pour un nombre restreint de villes
+            function bruteForceTSP() {
+                // Générer toutes les permutations possibles (sans le point de départ fixe)
+                const permutations = generatePermutations(cities.slice(1));
+                let minDistance = Infinity;
+                let bestRoute = [];
+                let evaluated = 0;
+                const total = permutations.length;
+                // Pour chaque permutation, calculer la distance totale
+                permutations.forEach(perm => {
+                    // Ajouter la ville de départ au début et à la fin
+                    const currentRoute = [cities[0], ...perm, cities[0]];
+                    let currentDistance = 0;
+                    // Calculer la distance totale pour cette route
+                    for (let i = 0; i < currentRoute.length - 1; i++) {
+                        const from = currentRoute[i];
+                        const to = currentRoute[i + 1];
+                        currentDistance += distanceMatrix[from][to];
+                    }
+                    // Mettre à jour la meilleure route si nécessaire
+                    if (currentDistance < minDistance) {
+                        minDistance = currentDistance;
+                        bestRoute = currentRoute;
+                    }
+                    // Mettre à jour la barre de progression
+                    evaluated++;
+                    const progress = (evaluated / total) * 100;
+                    progressBar.style.width = `${progress}%`;
+                });
+                return {
+                    route: bestRoute,
+                    distance: minDistance
+                };
+            }
+            // Heuristique du plus proche voisin avec optimisation 2-opt
+            function nearestNeighborWith2Opt() {
+                // Étape 1: Construction initiale avec l'algorithme du plus proche voisin
+                let route = nearestNeighbor();
+                let improved = true;
+                // Afficher la progression initiale
+                progressBarContainer.classList.remove('hidden');
+                progressBar.style.width = '50%';
+                // Étape 2: Optimisation avec 2-opt
+                while (improved) {
+                    improved = false;
+                    const oldDistance = calculateRouteDistance(route);
+                    for (let i = 1; i < route.length - 2; i++) {
+                        for (let j = i + 1; j < route.length - 1; j++) {
+                            // Essayer d'inverser la sous-route entre i et j
+                            const newRoute = twoOptSwap(route, i, j);
+                            const newDistance = calculateRouteDistance(newRoute);
+                            if (newDistance < oldDistance) {
+                                route = newRoute;
+                                improved = true;
+                                break;
+                            }
+                        }
+                        if (improved) break;
+                    }
+                    // Mettre à jour la barre de progression
+                    progressBar.style.width = `${50 + Math.random() * 40}%`;
+                }
+                progressBar.style.width = '100%';
+                return {
+                    route: route,
+                    distance: calculateRouteDistance(route)
+                };
+            }
+            // Algorithme du plus proche voisin
+            function nearestNeighbor() {
+                const startCity = cities[0];
+                const unvisited = new Set(cities.slice(1));
+                const route = [startCity];
+                let currentCity = startCity;
+                while (unvisited.size > 0) {
+                    let nearestCity = null;
+                    let minDist = Infinity;
+                    // Trouver la ville non visitée la plus proche
+                    unvisited.forEach(city => {
+                        const dist = distanceMatrix[currentCity][city];
+                        if (dist < minDist) {
+                            minDist = dist;
+                            nearestCity = city;
+                        }
+                    });
+                    // Ajouter à la route et passer à cette ville
+                    route.push(nearestCity);
+                    unvisited.delete(nearestCity);
+                    currentCity = nearestCity;
+                }
+                // Retourner à la ville de départ
+                route.push(startCity);
+                return route;
+            }
+            // Échange 2-opt
+            function twoOptSwap(route, i, j) {
+                const newRoute = route.slice(0, i);
+                newRoute.push(...route.slice(i, j + 1).reverse());
+                newRoute.push(...route.slice(j + 1));
+                return newRoute;
+            }
+            // Calculer la distance totale d'une route
+            function calculateRouteDistance(route) {
+                let distance = 0;
+                for (let i = 0; i < route.length - 1; i++) {
+                    distance += distanceMatrix[route[i]][route[i + 1]];
+                }
+                return distance;
+            }
+            // Générer toutes les permutations d'un tableau
+            function generatePermutations(arr) {
+                if (arr.length <= 1) return [arr];
+                const result = [];
+                for (let i = 0; i < arr.length; i++) {
+                    const current = arr[i];
+                    const remaining = [...arr.slice(0, i), ...arr.slice(i + 1)];
+                    const remainingPerms = generatePermutations(remaining);
+                    for (const perm of remainingPerms) {
+                        result.push([current, ...perm]);
+                    }
+                }
+                return result;
+            }
+            // Visualiser la route sur la carte
+            function visualizeRoute(route) {
+                // Effacer la carte précédente
+                mapContainer.innerHTML = '';
+                // Positionner aléatoirement les villes sur la carte
+                const cityPositions = {};
+                const mapWidth = mapContainer.clientWidth;
+                const mapHeight = mapContainer.clientHeight;
+                const margin = 60;
+                // Positionner les villes en cercle pour une meilleure visualisation
+                const centerX = mapWidth / 2;
+                const centerY = mapHeight / 2;
+                const radius = Math.min(mapWidth, mapHeight) / 2 - margin;
+                cities.forEach((city, index) => {
+                    const angle = (index / cities.length) * 2 * Math.PI;
+                    const x = centerX + radius * Math.cos(angle);
+                    const y = centerY + radius * Math.sin(angle);
+                    cityPositions[city] = { x, y };
+                    // Créer un point pour la ville
+                    const cityNode = document.createElement('div');
+                    cityNode.className = 'city-node';
+                    cityNode.style.left = `${x}px`;
+                    cityNode.style.top = `${y}px`;
+                    cityNode.textContent = index + 1;
+                    cityNode.title = city;
+                    mapContainer.appendChild(cityNode);
+                    // Ajouter le nom de la ville
+                    const cityLabel = document.createElement('div');
+                    cityLabel.className = 'absolute text-xs font-medium text-gray-800';
+                    cityLabel.style.left = `${x + 15}px`;
+                    cityLabel.style.top = `${y - 10}px`;
+                    cityLabel.textContent = city;
+                    mapContainer.appendChild(cityLabel);
+                });
+                // Dessiner les lignes de la route optimale
+                for (let i = 0; i < route.length - 1; i++) {
+                    const fromCity = route[i];
+                    const toCity = route[i + 1];
+                    const fromPos = cityPositions[fromCity];
+                    const toPos = cityPositions[toCity];
+                    // Calculer la distance entre les points
+                    const dx = toPos.x - fromPos.x;
+                    const dy = toPos.y - fromPos.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    // Calculer l'angle
+                    const angle = Math.atan2(dy, dx) * 180 / Math.PI;
+                    // Créer la ligne
+                    const line = document.createElement('div');
+                    line.className = 'route-line optimal-route';
+                    line.style.left = `${fromPos.x}px`;
+                    line.style.top = `${fromPos.y}px`;
+                    line.style.width = `${distance}px`;
+                    line.style.transform = `rotate(${angle}deg)`;
+                    // Ajouter une flèche à la fin (sauf pour le dernier segment)
+                    if (i < route.length - 2) {
+                        line.style.background = 'linear-gradient(90deg, rgba(239,68,68,0.7) 90%, transparent)';
+                    }
+                    mapContainer.appendChild(line);
+                }
+                // Ajouter une légende
+                const legend = document.createElement('div');
+                legend.className = 'absolute bottom-2 left-2 bg-white bg-opacity-80 p-2 rounded text-sm shadow';
+                legend.innerHTML = `
+                    <div class="flex items-center mb-1">
+                        <span class="inline-block w-3 h-3 bg-blue-500 rounded-full mr-2"></span>
+                        <span>Ville</span>
+                    </div>
+                    <div class="flex items-center">
+                        <span class="inline-block w-4 h-1 bg-red-500 mr-2"></span>
+                        <span>Trajet optimal</span>
+                    </div>
+                `;
+                mapContainer.appendChild(legend);
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=SaidAmchghal/transport" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ Une application qui calcul le trajet le plus court à empreinter par un transporteur pour visiter un nombre donné de ville et clôturer sa visite par le retour à la ville de départ en utilisant l'algorithme du simplexe.
2	+ Complétez l'application pour que toutes les fonctionnalités fonctionnent correctement