|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Labélisation d'Images avec SAM</title> |
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> |
|
<style> |
|
|
|
body { |
|
font-family: Arial, sans-serif; |
|
margin: 0; |
|
padding: 0; |
|
background-color: #f4f4f4; |
|
} |
|
|
|
header { |
|
background-color: #4CAF50; |
|
padding: 15px 0; |
|
text-align: center; |
|
color: white; |
|
font-size: 24px; |
|
font-weight: bold; |
|
} |
|
|
|
section { |
|
margin: 20px auto; |
|
max-width: 1200px; |
|
padding: 20px; |
|
background: white; |
|
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); |
|
border-radius: 8px; |
|
} |
|
|
|
.upload-section { |
|
text-align: center; |
|
} |
|
|
|
.upload-section input[type="file"] { |
|
margin: 10px 0; |
|
} |
|
|
|
.image-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 20px; |
|
justify-content: center; |
|
} |
|
|
|
.image-item { |
|
width: 150px; |
|
height: 150px; |
|
overflow: hidden; |
|
border: 2px solid #ddd; |
|
border-radius: 8px; |
|
cursor: pointer; |
|
transition: transform 0.3s ease, border-color 0.3s ease; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background-color: #fff; |
|
} |
|
|
|
.image-item:hover { |
|
border-color: #4CAF50; |
|
transform: scale(1.05); |
|
} |
|
|
|
.image-item img { |
|
max-width: 100%; |
|
max-height: 100%; |
|
object-fit: cover; |
|
} |
|
|
|
canvas { |
|
border: 2px solid #ddd; |
|
border-radius: 8px; |
|
margin: 20px auto; |
|
display: block; |
|
} |
|
|
|
.class-management { |
|
text-align: center; |
|
margin-bottom: 20px; |
|
} |
|
|
|
.class-management input[type="text"] { |
|
padding: 8px; |
|
font-size: 16px; |
|
width: 300px; |
|
margin-right: 10px; |
|
} |
|
|
|
.class-list { |
|
display: flex; |
|
justify-content: center; |
|
flex-wrap: wrap; |
|
gap: 10px; |
|
list-style: none; |
|
padding: 0; |
|
} |
|
|
|
.class-item { |
|
padding: 5px 15px; |
|
border-radius: 20px; |
|
background-color: #f4f4f4; |
|
border: 1px solid #ccc; |
|
cursor: pointer; |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.class-item:hover { |
|
background-color: #ddd; |
|
} |
|
|
|
.class-item.active { |
|
background-color: #4CAF50; |
|
color: white; |
|
border-color: #45a049; |
|
} |
|
|
|
.controls { |
|
text-align: center; |
|
margin-top: 20px; |
|
} |
|
|
|
button { |
|
background-color: #4CAF50; |
|
color: white; |
|
border: none; |
|
padding: 10px 20px; |
|
font-size: 16px; |
|
cursor: pointer; |
|
border-radius: 5px; |
|
transition: background-color 0.3s ease; |
|
margin: 0 10px; |
|
} |
|
|
|
button:hover { |
|
background-color: #45a049; |
|
} |
|
|
|
button:disabled { |
|
background-color: #ccc; |
|
cursor: not-allowed; |
|
} |
|
|
|
.result-section img { |
|
max-width: 100%; |
|
margin: 20px auto; |
|
display: block; |
|
border: 2px solid #4CAF50; |
|
border-radius: 8px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<header>Labélisation d'Images avec SAM</header> |
|
|
|
|
|
<section class="upload-section"> |
|
<h2>Télécharger vos images</h2> |
|
<form method="post" enctype="multipart/form-data"> |
|
<input type="file" id="image" name="images" accept="image/*" multiple required> |
|
<br> |
|
<button type="submit">Télécharger</button> |
|
</form> |
|
</section> |
|
|
|
{% if uploaded_images %} |
|
|
|
<section> |
|
<h2>Images téléchargées</h2> |
|
<div class="image-container"> |
|
{% for image in uploaded_images %} |
|
<div class="image-item" onclick="loadImage('{{ image }}')"> |
|
<img src="{{ url_for('static', filename='uploads/' + image) }}" alt="{{ image }}"> |
|
</div> |
|
{% endfor %} |
|
</div> |
|
</section> |
|
|
|
|
|
<section> |
|
<canvas id="image-canvas"></canvas> |
|
</section> |
|
|
|
|
|
<section class="class-management"> |
|
<h3>Ajouter une classe</h3> |
|
<input type="text" id="class-name" placeholder="Nom de la classe"> |
|
<button id="add-class">Ajouter</button> |
|
<ul id="class-list" class="class-list"></ul> |
|
</section> |
|
|
|
|
|
<section class="controls"> |
|
<button id="finish-button" disabled>Terminer l'annotation</button> |
|
<button id="segment-button" disabled>Lancer la segmentation</button> |
|
</section> |
|
{% endif %} |
|
|
|
<script> |
|
let selectedImage = null; |
|
let annotations = {}; |
|
let currentClass = null; |
|
const finishButton = document.getElementById('finish-button'); |
|
const segmentButton = document.getElementById('segment-button'); |
|
|
|
function loadImage(imageName) { |
|
if (!imageName) { |
|
alert("Veuillez sélectionner une image !"); |
|
return; |
|
} |
|
|
|
selectedImage = imageName; |
|
console.log("Image sélectionnée :", selectedImage); |
|
|
|
|
|
if (!annotations[selectedImage]) { |
|
annotations[selectedImage] = []; |
|
} |
|
|
|
const img = new Image(); |
|
img.src = `/static/uploads/${imageName}`; |
|
img.onload = () => { |
|
const canvas = document.getElementById('image-canvas'); |
|
const ctx = canvas.getContext('2d'); |
|
canvas.width = img.width; |
|
canvas.height = img.height; |
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
|
ctx.drawImage(img, 0, 0); |
|
|
|
|
|
annotations[selectedImage].forEach(point => { |
|
drawPoint(ctx, point.x, point.y, point.class); |
|
}); |
|
}; |
|
|
|
finishButton.disabled = false; |
|
} |
|
|
|
function drawPoint(ctx, x, y, pointClass) { |
|
ctx.fillStyle = pointClass === 'arbre' ? 'green' : 'red'; |
|
ctx.beginPath(); |
|
ctx.arc(x, y, 5, 0, 2 * Math.PI); |
|
ctx.fill(); |
|
} |
|
|
|
document.getElementById('add-class').addEventListener('click', () => { |
|
const className = document.getElementById('class-name').value.trim(); |
|
if (!className) { |
|
alert("Veuillez entrer un nom de classe !"); |
|
return; |
|
} |
|
const li = document.createElement('li'); |
|
li.textContent = className; |
|
li.classList.add('class-item'); |
|
li.onclick = () => { |
|
document.querySelectorAll('.class-item').forEach(item => item.classList.remove('active')); |
|
li.classList.add('active'); |
|
currentClass = className; |
|
console.log("Classe sélectionnée :", currentClass); |
|
}; |
|
document.getElementById('class-list').appendChild(li); |
|
document.getElementById('class-name').value = ''; |
|
}); |
|
|
|
const canvas = document.getElementById('image-canvas'); |
|
const ctx = canvas.getContext('2d'); |
|
|
|
canvas.addEventListener('click', (event) => { |
|
if (!currentClass) { |
|
alert("Veuillez sélectionner une classe avant d'ajouter des points !"); |
|
return; |
|
} |
|
|
|
if (!selectedImage) { |
|
alert("Veuillez sélectionner une image avant d'ajouter des points !"); |
|
return; |
|
} |
|
|
|
const rect = canvas.getBoundingClientRect(); |
|
const x = event.clientX - rect.left; |
|
const y = event.clientY - rect.top; |
|
|
|
const newPoint = { x, y, class: currentClass }; |
|
annotations[selectedImage].push(newPoint); |
|
console.log(`Point ajouté pour ${selectedImage}:`, newPoint); |
|
|
|
drawPoint(ctx, x, y, currentClass); |
|
}); |
|
|
|
finishButton.addEventListener('click', () => { |
|
if (!selectedImage) { |
|
alert("Veuillez sélectionner une image !"); |
|
return; |
|
} |
|
|
|
console.log(`Annotation terminée pour ${selectedImage}.`); |
|
alert(`Annotation pour ${selectedImage} terminée !`); |
|
|
|
finishButton.disabled = true; |
|
|
|
|
|
if (Object.keys(annotations).length > 0) { |
|
segmentButton.disabled = false; |
|
} |
|
}); |
|
|
|
segmentButton.addEventListener('click', () => { |
|
const dataToSend = Object.keys(annotations).map(imageName => ({ |
|
image_name: imageName, |
|
points: annotations[imageName] |
|
})); |
|
|
|
console.log("Données envoyées :", dataToSend); |
|
|
|
fetch('/segment', { |
|
method: 'POST', |
|
headers: { 'Content-Type': 'application/json' }, |
|
body: JSON.stringify(dataToSend) |
|
}) |
|
.then(response => response.json()) |
|
.then(data => { |
|
console.log("Réponse du backend :", data); |
|
if (data.success) { |
|
alert("Segmentation réussie !"); |
|
} else { |
|
alert("Erreur : " + data.error); |
|
} |
|
}) |
|
.catch(err => console.error('Erreur lors de la segmentation :', err)); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|
