File size: 5,055 Bytes
c9595c6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 |
<!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') }}">
</head>
<body>
<h1>Labélisation d'Images avec SAM</h1>
<div class="container">
<!-- Upload Section -->
<div class="upload-section">
<form method="post" enctype="multipart/form-data">
<label for="image">Télécharger une image :</label>
<input type="file" id="image" name="image" accept="image/*" required>
<button type="submit">Télécharger</button>
</form>
</div>
{% if uploaded_image %}
<!-- Display Uploaded Image -->
<canvas id="image-canvas"></canvas>
<!-- Class Management -->
<div class="class-management">
<h3>Ajouter une classe :</h3>
<input type="text" id="class-name" placeholder="Entrez une classe">
<button id="add-class">Ajouter</button>
<ul id="class-list"></ul>
</div>
<!-- Controls -->
<div class="controls">
<button id="segment-button" disabled>Lancer la Segmentation</button>
</div>
{% endif %}
</div>
<script>
let canvas = document.getElementById('image-canvas');
let ctx = canvas ? canvas.getContext('2d') : null;
let points = [];
let currentClass = null;
let img = null;
{% if uploaded_image %}
img = new Image();
img.src = "{{ url_for('static', filename='uploads/' + uploaded_image) }}";
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
};
// Activer ou désactiver le bouton de segmentation
function updateSegmentButtonState() {
const segmentButton = document.getElementById('segment-button');
if (points.length > 0) {
segmentButton.disabled = false; // Activer le bouton
} else {
segmentButton.disabled = true; // Désactiver le bouton
}
}
// Gestion des clics sur le canvas
canvas.addEventListener('click', event => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
if (!currentClass) {
alert('Veuillez sélectionner une classe avant d’ajouter des points.');
return;
}
// Ajouter le point
points.push({ x, y, class: currentClass });
// Dessiner le point sur le canvas
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fill();
// Mettre à jour l'état du bouton
updateSegmentButtonState();
});
// Ajouter une classe et la sélectionner
document.getElementById('add-class').addEventListener('click', () => {
const classNameInput = document.getElementById('class-name');
const className = classNameInput.value.trim();
if (!className) {
alert('Veuillez entrer une classe.');
return;
}
const classList = document.getElementById('class-list');
const li = document.createElement('li');
li.textContent = className;
li.classList.add('class-item');
li.addEventListener('click', () => {
document.querySelectorAll('.class-item').forEach(el => el.classList.remove('active'));
li.classList.add('active');
currentClass = className;
});
classList.appendChild(li);
classNameInput.value = '';
});
// Lancer la segmentation
document.getElementById('segment-button').addEventListener('click', () => {
const imageName = "{{ uploaded_image }}";
fetch('/segment', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
image_name: imageName,
points: points
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Segmentation réussie !');
} else {
alert('Erreur : ' + data.error);
}
})
.catch(error => {
console.error('Erreur lors de la segmentation :', error);
});
});
// Désactiver le bouton au chargement
updateSegmentButtonState();
{% endif %}
</script>
</body>
</html>
|