|
<!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> |
|
|
|
|
|
<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> |
|
|
|
|
|
<h2>Prévisualisation :</h2> |
|
<img id="preview" src="#" alt="Prévisualisation de l'image" style="max-width: 100%; display: none; border: 1px solid #ddd;"> |
|
|
|
|
|
<script> |
|
|
|
const imageInput = document.getElementById('image'); |
|
const preview = document.getElementById('preview'); |
|
|
|
|
|
imageInput.addEventListener('change', function(event) { |
|
const file = event.target.files[0]; |
|
if (file) { |
|
const reader = new FileReader(); |
|
reader.onload = function(e) { |
|
preview.src = e.target.result; |
|
preview.style.display = 'block'; |
|
}; |
|
reader.readAsDataURL(file); |
|
} else { |
|
preview.src = '#'; |
|
preview.style.display = 'none'; |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
|
|