--- a +++ b/templates/p.html @@ -0,0 +1,139 @@ +<!-- p.html --> +<!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-bottom: 5px; + padding: 4px 4px; /* Smaller padding */ + font-size: 26px; /* Smaller font size */ + border-radius: 5px; + margin-top: 1px; + margin-bottom: -10px; + 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="/static/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 predicted_class == 0 %} + <div class="result-message">The predicted class is: <strong>dyed-lifted-polyps</strong></div> + {% elif predicted_class == 1 %} + <div class="result-message">The predicted class is: <strong>dyed-resection-margins</strong></div> + {% elif predicted_class == 2 %} + <div class="result-message">The predicted class is: <strong>esophagitis</strong></div> + {% elif predicted_class == 3 %} + <div class="result-message">The predicted class is: <strong>normal-cecum</strong></div> + {% elif predicted_class == 4 %} + <div class="result-message">The predicted class is: <strong>normal-pylorus</strong></div> + {% elif predicted_class == 5 %} + <div class="result-message">The predicted class is: <strong>normal-z-line</strong></div> + {% elif predicted_class == 6 %} + <div class="result-message">The predicted class is: <strong>polyps</strong></div> + {% elif predicted_class == 7 %} + <div class="result-message">The predicted class is: <strong>ulcerative-colitis</strong></div> + {% else %} + <div class="result-message">The predicted class is: <strong>normal-z-line</strong></div> + {% endif %} + <p class="additional-details"> + Predicted class ID: <strong>{{ predicted_class }}</strong><br> + Suggested action: Consult a gastroenterologist if required. + </p> + </div> + + <div> + <a href="{% url 'GI_diseases' %}" class="back-to-home-btn">Upload Another Image</a> + </div> +</body> + +</html>