|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>[DEMO] ML API</title> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<style> |
|
|
body { |
|
|
background: #23272f; |
|
|
color: #eee; |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 2em; |
|
|
} |
|
|
form { |
|
|
margin-bottom: 1em; |
|
|
} |
|
|
#result { |
|
|
white-space: pre-wrap; |
|
|
word-break: break-all; |
|
|
background: #2c2f36; |
|
|
color: #eee; |
|
|
padding: 1em; |
|
|
border-radius: 5px; |
|
|
border: 1px solid #353945; |
|
|
} |
|
|
h1, h2, h3 { |
|
|
color: #aad2ff; |
|
|
} |
|
|
@media (max-width: 600px) { |
|
|
body { margin: 0.5em; } |
|
|
img { max-width: 95vw !important; height: auto; } |
|
|
#result { font-size: 0.93em; padding: 0.5em; } |
|
|
h1 { font-size: 1.15em; } |
|
|
h2, h3 { font-size: 1em; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<h1>[DEMO] Defect Classification & Localization on MVTec AD Capsule Dataset</h1> |
|
|
|
|
|
|
|
|
<form action="/upload/" method="post" enctype="multipart/form-data"> |
|
|
<label for="file">Upload PNG image:</label> |
|
|
<input type="file" id="file" name="file" accept="image/png" required> |
|
|
<button type="submit">Predict</button> |
|
|
</form> |
|
|
|
|
|
|
|
|
<button id="randomBtn">Try a random sample image</button> |
|
|
<script> |
|
|
document.getElementById("randomBtn").onclick = function() { |
|
|
|
|
|
fetch("/random-sample/", {method: "POST"}) |
|
|
.then(response => response.text()) |
|
|
.then(html => { |
|
|
document.open(); |
|
|
document.write(html); |
|
|
document.close(); |
|
|
}); |
|
|
return false; |
|
|
}; |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% if preproc_img_url and pred_img_url %} |
|
|
<h3>Preprocessed image (as seen by the model):</h3> |
|
|
<img src="{{ preproc_img_url }}" alt="preprocessed" style="max-width: 400px; border:1px solid #ccc;"> |
|
|
<h3>Prediction image:</h3> |
|
|
<img src="{{ pred_img_url }}" alt="prediction" style="max-width: 400px; border:1px solid #ccc;"> |
|
|
{% endif %} |
|
|
{% if result %} |
|
|
<h2>Result</h2> |
|
|
<div id="result">{{ result | tojson(indent=2) }}</div> |
|
|
{% endif %} |
|
|
</body> |
|
|
</html> |
|
|
|
