|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Image Prediction</title> |
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
height: 100vh; |
|
|
overflow: hidden; |
|
|
background: linear-gradient(135deg, #3aafa9, #f0c27b); |
|
|
background-size: 200% 200%; |
|
|
animation: gradientAnimation 15s ease infinite; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
color: #ffffff; |
|
|
font-family: Arial, sans-serif; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.container { |
|
|
background-color: rgba(255, 255, 255, 0.8); |
|
|
border-radius: 10px; |
|
|
padding: 30px; |
|
|
box-shadow: 0px 0px 15px rgba(0,0,0,0.3); |
|
|
max-width: 500px; |
|
|
width: 100%; |
|
|
text-align: center; |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
h1,#response-message { |
|
|
color: #000000; |
|
|
} |
|
|
|
|
|
.btn-custom { |
|
|
background-color: #007bff; |
|
|
color: #ffffff; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
padding: 10px 20px; |
|
|
} |
|
|
|
|
|
.btn-custom:hover { |
|
|
background-color: #0056b3; |
|
|
} |
|
|
|
|
|
.form-control-file { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 100%; |
|
|
height: 50px; |
|
|
overflow: hidden; |
|
|
border-radius: 5px; |
|
|
background-color: #e0e0e0; |
|
|
border: 2px solid #007bff; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.form-control-file input[type="file"] { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
opacity: 0; |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.form-control-file::before { |
|
|
content: 'Choose File'; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
font-size: 16px; |
|
|
line-height: 50px; |
|
|
text-align: center; |
|
|
color: #007bff; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.alert-custom { |
|
|
background-color: #333333; |
|
|
color: #ffffff; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
padding: 10px; |
|
|
} |
|
|
|
|
|
.alert-custom.success { |
|
|
border-left: 5px solid #28a745; |
|
|
} |
|
|
|
|
|
.alert-custom.error { |
|
|
border-left: 5px solid #dc3545; |
|
|
} |
|
|
|
|
|
.alert-custom.warning { |
|
|
border-left: 5px solid #ffc107; |
|
|
} |
|
|
|
|
|
@keyframes gradientAnimation { |
|
|
0% { |
|
|
background-position: 0% 0%; |
|
|
} |
|
|
50% { |
|
|
background-position: 100% 100%; |
|
|
} |
|
|
100% { |
|
|
background-position: 0% 0%; |
|
|
} |
|
|
} |
|
|
|
|
|
.bg-pattern { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 30%, transparent 80%); |
|
|
pointer-events: none; |
|
|
z-index: 0; |
|
|
mix-blend-mode: multiply; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="bg-pattern"></div> |
|
|
|
|
|
<div class="container"> |
|
|
<h1 class="mb-4"> |
|
|
Glaucomatous eye Image |
|
|
|
|
|
</h1> |
|
|
<form id="predict-form"> |
|
|
<div class="form-group"> |
|
|
<label for="file" class="sr-only">Upload Image:</label> |
|
|
<div class="form-control-file"> |
|
|
<input type="file" id="file" name="file" accept="image/*" required> |
|
|
</div> |
|
|
</div> |
|
|
<button type="submit" class="btn btn-custom">Predict</button> |
|
|
</form> |
|
|
<div id="response-message"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.getElementById('predict-form').addEventListener('submit', function(event) { |
|
|
event.preventDefault(); |
|
|
|
|
|
const formData = new FormData(this); |
|
|
|
|
|
fetch('/predict/', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
const message = `Prediction: ${data.prediction}`; |
|
|
alert(message); |
|
|
document.getElementById('response-message').innerText = message; |
|
|
}) |
|
|
.catch(error => { |
|
|
console.error('Error:', error); |
|
|
alert('An error occurred. Please try again.'); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> |
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
