| <!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"> |
| |
| <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 %} |
| |
| <canvas id="image-canvas"></canvas> |
|
|
| |
| <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> |
|
|
| |
| <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); |
| }; |
| |
| |
| function updateSegmentButtonState() { |
| const segmentButton = document.getElementById('segment-button'); |
| if (points.length > 0) { |
| segmentButton.disabled = false; |
| } else { |
| segmentButton.disabled = true; |
| } |
| } |
| |
| |
| 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; |
| } |
| |
| |
| points.push({ x, y, class: currentClass }); |
| |
| |
| ctx.fillStyle = 'red'; |
| ctx.beginPath(); |
| ctx.arc(x, y, 5, 0, 2 * Math.PI); |
| ctx.fill(); |
| |
| |
| updateSegmentButtonState(); |
| }); |
| |
| |
| 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 = ''; |
| }); |
| |
| |
| 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); |
| }); |
| }); |
| |
| |
| updateSegmentButtonState(); |
| {% endif %} |
| </script> |
| |
| </body> |
| </html> |
|
|
