| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>🧪 Test YOLOv5 - Détection Simple</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> |
| </head> |
| <body class="bg-gray-100 p-8"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="bg-white rounded-lg shadow-lg p-6"> |
| <h1 class="text-3xl font-bold mb-4 text-center text-blue-600"> |
| <i class="fas fa-vial mr-2"></i> Test YOLOv5 - Détection Simple |
| </h1> |
| |
| <div class="mb-6 p-4 bg-yellow-50 border border-yellow-200 rounded-lg"> |
| <p class="text-sm font-medium text-yellow-800"> |
| <i class="fas fa-info-circle mr-2"></i> |
| <strong>Important :</strong> YOLOv5 détecte uniquement des objets physiques (personnes, voitures, animaux, objets du quotidien). |
| </p> |
| <p class="text-xs text-yellow-700 mt-2"> |
| ❌ Ne fonctionne PAS avec : documents, texte, visages spécifiques<br> |
| ✅ Fonctionne avec : personnes, véhicules, animaux, téléphones, ordinateurs, etc. |
| </p> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-gray-700 font-medium mb-2"> |
| <i class="fas fa-upload mr-2"></i> Sélectionnez une image : |
| </label> |
| <input type="file" id="imageInput" accept="image/*" |
| class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100"> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 gap-4 mb-6"> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Modèle :</label> |
| <select id="modelSelect" class="w-full px-3 py-2 border border-gray-300 rounded-lg"> |
| <option value="yolov5n">YOLOv5n (très rapide)</option> |
| <option value="yolov5s" selected>YOLOv5s (rapide)</option> |
| <option value="yolov5m">YOLOv5m (moyen)</option> |
| <option value="yolov5l">YOLOv5l (précis)</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2"> |
| Confiance : <span id="confidenceValue">0.25</span> |
| </label> |
| <input type="range" id="confidenceSlider" min="0.1" max="0.9" step="0.05" value="0.25" |
| class="w-full"> |
| </div> |
| </div> |
|
|
| |
| <button id="detectBtn" |
| class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-colors disabled:bg-gray-400 disabled:cursor-not-allowed"> |
| <i class="fas fa-search mr-2"></i> Détecter les objets |
| </button> |
|
|
| |
| <div id="results" class="mt-6 hidden"> |
| <h2 class="text-xl font-bold mb-4 text-gray-800"> |
| <i class="fas fa-chart-bar mr-2"></i> Résultats : |
| </h2> |
| <div id="resultContent"></div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-6 bg-blue-50 border border-blue-200 rounded-lg p-4"> |
| <h3 class="font-bold text-blue-800 mb-2"> |
| <i class="fas fa-lightbulb mr-2"></i> Testez avec ces objets : |
| </h3> |
| <div class="grid grid-cols-2 gap-2 text-sm text-blue-700"> |
| <div>✅ Photo de vous-même</div> |
| <div>✅ Photo de voiture</div> |
| <div>✅ Votre téléphone</div> |
| <div>✅ Une bouteille/tasse</div> |
| <div>✅ Un animal (chat/chien)</div> |
| <div>✅ Un ordinateur portable</div> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| const imageInput = document.getElementById('imageInput'); |
| const detectBtn = document.getElementById('detectBtn'); |
| const modelSelect = document.getElementById('modelSelect'); |
| const confidenceSlider = document.getElementById('confidenceSlider'); |
| const confidenceValue = document.getElementById('confidenceValue'); |
| const results = document.getElementById('results'); |
| const resultContent = document.getElementById('resultContent'); |
| |
| let selectedFile = null; |
| |
| // Mise à jour de l'affichage de la confiance |
| confidenceSlider.addEventListener('input', (e) => { |
| confidenceValue.textContent = e.target.value; |
| }); |
| |
| // Sélection de fichier |
| imageInput.addEventListener('change', (e) => { |
| selectedFile = e.target.files[0]; |
| detectBtn.disabled = !selectedFile; |
| }); |
| |
| // Détection |
| detectBtn.addEventListener('click', async () => { |
| if (!selectedFile) return; |
| |
| detectBtn.disabled = true; |
| detectBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyse en cours...'; |
| |
| const formData = new FormData(); |
| formData.append('files', selectedFile); |
| |
| const model = modelSelect.value; |
| const confidence = confidenceSlider.value; |
| |
| try { |
| const response = await fetch(`http://localhost:8001/detect/batch?model=${model}&confidence=${confidence}`, { |
| method: 'POST', |
| body: formData |
| }); |
| |
| if (!response.ok) { |
| throw new Error(`Erreur HTTP: ${response.status}`); |
| } |
| |
| const data = await response.json(); |
| displayResults(data); |
| |
| } catch (error) { |
| console.error('Erreur:', error); |
| resultContent.innerHTML = ` |
| <div class="bg-red-50 border border-red-200 rounded-lg p-4"> |
| <p class="text-red-800 font-medium"> |
| <i class="fas fa-exclamation-circle mr-2"></i> Erreur de connexion |
| </p> |
| <p class="text-sm text-red-600 mt-2"> |
| ${error.message}<br> |
| Vérifiez que le serveur est bien lancé sur http://localhost:8001 |
| </p> |
| </div> |
| `; |
| results.classList.remove('hidden'); |
| } finally { |
| detectBtn.disabled = false; |
| detectBtn.innerHTML = '<i class="fas fa-search mr-2"></i> Détecter les objets'; |
| } |
| }); |
| |
| function displayResults(data) { |
| if (!data.results || data.results.length === 0) { |
| resultContent.innerHTML = ` |
| <div class="bg-gray-50 border border-gray-200 rounded-lg p-4"> |
| <p class="text-gray-800">Aucun résultat reçu</p> |
| </div> |
| `; |
| results.classList.remove('hidden'); |
| return; |
| } |
| |
| const result = data.results[0]; |
| const hasDetections = result.detections && result.detections.length > 0; |
| |
| let html = ''; |
| |
| // Affichage de l'image |
| html += ` |
| <div class="mb-4"> |
| <img src="data:image/jpeg;base64,${result.image_base64}" |
| class="w-full rounded-lg shadow-md" |
| alt="Image analysée"> |
| </div> |
| `; |
| |
| if (hasDetections) { |
| // Objets détectés |
| html += ` |
| <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4"> |
| <p class="text-green-800 font-bold text-lg mb-2"> |
| <i class="fas fa-check-circle mr-2"></i> |
| ${result.detections.length} objet(s) détecté(s) ! |
| </p> |
| </div> |
| <div class="space-y-2"> |
| `; |
| |
| result.detections.forEach((det, idx) => { |
| html += ` |
| <div class="flex items-center justify-between p-3 bg-white border border-gray-200 rounded-lg hover:shadow-md transition-shadow"> |
| <div class="flex items-center space-x-3"> |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 font-bold"> |
| ${idx + 1} |
| </div> |
| <div> |
| <p class="font-bold text-gray-800">${det.class}</p> |
| <p class="text-xs text-gray-500">Position: (${det.bbox.join(', ')})</p> |
| </div> |
| </div> |
| <div class="text-right"> |
| <div class="text-2xl font-bold text-blue-600">${(det.confidence * 100).toFixed(1)}%</div> |
| <div class="text-xs text-gray-500">confiance</div> |
| </div> |
| </div> |
| `; |
| }); |
| |
| html += `</div>`; |
| |
| } else { |
| // Aucun objet détecté |
| html += ` |
| <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6 text-center"> |
| <i class="fas fa-exclamation-triangle text-5xl text-yellow-500 mb-3"></i> |
| <p class="text-yellow-800 font-bold text-lg mb-2">Aucun objet détecté</p> |
| <p class="text-sm text-yellow-700 mb-3"> |
| YOLOv5 ne détecte que 80 types d'objets physiques spécifiques |
| </p> |
| |
| <div class="bg-white rounded-lg p-4 text-left"> |
| <p class="font-semibold text-gray-800 mb-2"> |
| <i class="fas fa-question-circle mr-2"></i> Pourquoi aucune détection ? |
| </p> |
| <ul class="text-sm text-gray-700 space-y-1 ml-5"> |
| <li>❌ Image de document ou texte</li> |
| <li>❌ Objets trop petits ou flous</li> |
| <li>❌ Mauvais éclairage</li> |
| <li>❌ Objets non inclus dans les 80 classes COCO</li> |
| </ul> |
| |
| <div class="mt-3 pt-3 border-t border-gray-200"> |
| <p class="font-semibold text-gray-800 mb-1"> |
| <i class="fas fa-lightbulb mr-2"></i> Essayez avec : |
| </p> |
| <p class="text-sm text-gray-600"> |
| Une photo de <strong>personne, voiture, téléphone, ordinateur, bouteille, animal</strong> |
| </p> |
| </div> |
| </div> |
| |
| <div class="mt-4"> |
| <p class="text-xs text-yellow-600"> |
| 💡 Conseil : Baissez le seuil de confiance à 0.15 pour détecter plus d'objets |
| </p> |
| </div> |
| </div> |
| `; |
| } |
| |
| // Statistiques |
| html += ` |
| <div class="mt-4 grid grid-cols-3 gap-2 text-center"> |
| <div class="bg-gray-50 rounded-lg p-2"> |
| <p class="text-xs text-gray-600">Modèle</p> |
| <p class="text-sm font-bold text-gray-800">${modelSelect.value}</p> |
| </div> |
| <div class="bg-gray-50 rounded-lg p-2"> |
| <p class="text-xs text-gray-600">Confiance min.</p> |
| <p class="text-sm font-bold text-gray-800">${(confidence * 100).toFixed(0)}%</p> |
| </div> |
| <div class="bg-gray-50 rounded-lg p-2"> |
| <p class="text-xs text-gray-600">Temps</p> |
| <p class="text-sm font-bold text-gray-800">${result.processing_time.toFixed(2)}s</p> |
| </div> |
| </div> |
| `; |
| |
| resultContent.innerHTML = html; |
| results.classList.remove('hidden'); |
| } |
| </script> |
| </body> |
| </html> |
|
|
