<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prediction Result</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-image: linear-gradient(to right, #8e2de2, #4a00e0);
color: #fff;
}
.result-box {
background-color: rgba(200, 240, 196, 0.85);
color: #040404;
padding: 20px 50px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
text-align: center;
max-width: 600px;
margin: 40px;
}
.result-box h2 {
margin-bottom: 15px;
font-size: 2rem;
color: #333;
}
.result-message {
font-size: 20px;
font-weight: bold;
margin-bottom: 20px;
color: #444;
}
.additional-details {
font-size: 18px;
color: #555;
margin-top: 10px;
}
.logo {
width: 150px;
height: auto;
margin-bottom: 20px;
}
.back-to-home-btn {
background-color: hsl(286, 64%, 80%);
color: #000000;
font-size: 18px;
font-weight: bold;
padding: 12px 25px;
border-radius: 8px;
text-decoration: none;
transition: background-color 0.3s ease;
margin-top: 20px;
}
.back-to-home-btn:hover {
background-color: #f0f0f0;
color: #333;
}
.btn-home {
background-color: #000000; /* Black color */
color: white;
height: 50px;
width: 100px;
padding: 4px 4px; /* Smaller padding */
font-size: 26px; /* Smaller font size */
border-radius: 5px;
margin-top: 1px;
margin-bottom: -32px;
display: block;
margin-left: auto;
margin-right: auto;
text-decoration: none; /* Remove underline */
text-align: center;
}
.btn-home:hover {
background-color: #333333; /* Darker shade of black on hover */
color: white; /* Keep text white on hover */
text-decoration: none; /* Remove underline on hover */
}
</style>
</head>
<body>
<header>
<img src="../images/NEWLOGO.png" alt="Logo" class="logo">
</header>
<div>
<a href="/" class="btn-home">Home</a> <!-- Link to the home page -->
</div>
<div class="result-box">
<h2>Prediction Result</h2>
{% if prediction_result == 0 %}
<div class="result-message">The predicted class is: <strong>dyed-lifted-polyps</strong></div>
{% elif prediction_result == 1 %}
<div class="result-message">The predicted class is: <strong>dyed-resection-margins</strong></div>
{% elif prediction_result == 2 %}
<div class="result-message">The predicted class is: <strong>esophagitis</strong></div>
{% elif prediction_result == 3 %}
<div class="result-message">The predicted class is: <strong>normal-cecum</strong></div>
{% elif prediction_result == 4 %}
<div class="result-message">The predicted class is: <strong>normal-pylorus</strong></div>
{% elif prediction_result == 5 %}
<div class="result-message">The predicted class is: <strong>normal-z-line</strong></div>
{% elif prediction_result == 6 %}
<div class="result-message">The predicted class is: <strong>polyps</strong></div>
{% elif prediction_result == 7 %}
<div class="result-message">The predicted class is: <strong>ulcerative-colitis</strong></div>
{% else %}
<div class="result-message">Invalid result. Please try again.</div>
{% endif %}
<p class="additional-details">
Predicted class ID: <strong>{{ prediction_result }}</strong><br>
Suggested action: Consult a gastroenterologist if required.
</p>
</div>
<div>
<a href="GI diseases.html" class="back-to-home-btn">Upload Another Image</a>
</div>
</body>
</html>
Datasets
Models
