Datasets
Models
Downloads: 2
Diff of
/templates/GI_diseases.html
[000000]
..
[b018ba]
Switch to unified view
| a | b/templates/GI_diseases.html | ||
|---|---|---|---|
| 1 | <!DOCTYPE html> |
||
| 2 | <html lang="en"> |
||
| 3 | |||
| 4 | <head> |
||
| 5 | <meta charset="UTF-8"> |
||
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||
| 7 | <title>Gastrointestinal Disease Predictor</title> |
||
| 8 | <!-- Bootstrap CSS link --> |
||
| 9 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" |
||
| 10 | integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" |
||
| 11 | crossorigin="anonymous"> |
||
| 12 | <!-- Custom CSS --> |
||
| 13 | <style> |
||
| 14 | body { |
||
| 15 | font-family: Cambria; |
||
| 16 | background-image: linear-gradient(#b4b9e9, #e1926ab3); |
||
| 17 | height: 100%; |
||
| 18 | margin: 0; |
||
| 19 | } |
||
| 20 | |||
| 21 | .container { |
||
| 22 | max-width: 600px; |
||
| 23 | margin: 0 auto; |
||
| 24 | padding-top: 50px; |
||
| 25 | } |
||
| 26 | |||
| 27 | .input-box { |
||
| 28 | margin-bottom: 25px; |
||
| 29 | border: 2px solid #000000; |
||
| 30 | background-color: #b2c5e7; |
||
| 31 | width: 100%; |
||
| 32 | padding: 10px; |
||
| 33 | font-size: 18px; |
||
| 34 | border-radius: 5px; |
||
| 35 | } |
||
| 36 | |||
| 37 | .logo { |
||
| 38 | display: block; |
||
| 39 | margin: 0 auto; |
||
| 40 | width: 200px; |
||
| 41 | height: auto; |
||
| 42 | margin-bottom: 50px; |
||
| 43 | } |
||
| 44 | |||
| 45 | .btn-predict { |
||
| 46 | background-color: #b2c5e7; |
||
| 47 | color: #000000; |
||
| 48 | margin-top: 20px; |
||
| 49 | padding: 15px 30px; |
||
| 50 | font-size: 20px; |
||
| 51 | border-radius: 5px; |
||
| 52 | width: 100%; |
||
| 53 | border: 2px solid #000000; |
||
| 54 | } |
||
| 55 | |||
| 56 | .btn-predict:hover { |
||
| 57 | background-color: #0056b3; |
||
| 58 | color: white; |
||
| 59 | } |
||
| 60 | |||
| 61 | .form-group { |
||
| 62 | text-align: center; |
||
| 63 | } |
||
| 64 | |||
| 65 | .file-upload { |
||
| 66 | font-size: 18px; |
||
| 67 | } |
||
| 68 | |||
| 69 | .image-preview { |
||
| 70 | max-width: 100%; |
||
| 71 | margin-top: 20px; |
||
| 72 | display: none; |
||
| 73 | border: 2px dashed #ccc; |
||
| 74 | padding: 10px; |
||
| 75 | border-radius: 10px; |
||
| 76 | } |
||
| 77 | |||
| 78 | .btn-delete { |
||
| 79 | background-color: red; |
||
| 80 | color: white; |
||
| 81 | margin-top: 10px; |
||
| 82 | padding: 10px 20px; |
||
| 83 | font-size: 16px; |
||
| 84 | border-radius: 5px; |
||
| 85 | border: none; |
||
| 86 | } |
||
| 87 | |||
| 88 | .btn-delete:hover { |
||
| 89 | background-color: rgb(214, 225, 96); |
||
| 90 | } |
||
| 91 | .btn-home { |
||
| 92 | background-color: #000000; /* Black color */ |
||
| 93 | color: white; |
||
| 94 | height: 50px; |
||
| 95 | width: 100px; |
||
| 96 | padding: 4px 4px; /* Smaller padding */ |
||
| 97 | font-size: 26px; /* Smaller font size */ |
||
| 98 | border-radius: 5px; |
||
| 99 | margin-top: -12px; |
||
| 100 | margin-bottom: -32px; |
||
| 101 | display: block; |
||
| 102 | margin-left: auto; |
||
| 103 | margin-right: auto; |
||
| 104 | text-decoration: none; /* Remove underline */ |
||
| 105 | text-align: center; |
||
| 106 | } |
||
| 107 | |||
| 108 | .btn-home:hover { |
||
| 109 | background-color: #333333; /* Darker shade of black on hover */ |
||
| 110 | color: white; /* Keep text white on hover */ |
||
| 111 | text-decoration: none; /* Remove underline on hover */ |
||
| 112 | } |
||
| 113 | </style> |
||
| 114 | </head> |
||
| 115 | |||
| 116 | <body> |
||
| 117 | <!-- Header --> |
||
| 118 | <header> |
||
| 119 | <img src="/static/NEWLOGO.png" alt="Logo" class="logo"> |
||
| 120 | </header> |
||
| 121 | <div> |
||
| 122 | <a href="/" class="btn-home">Home</a> <!-- Link to the home page --> |
||
| 123 | </div> |
||
| 124 | |||
| 125 | <!-- Main Content --> |
||
| 126 | <center> |
||
| 127 | <div class="container"> |
||
| 128 | <h1 class="text-nowrap">Gastrointestinal Disease Predictor</h1> |
||
| 129 | <br> |
||
| 130 | |||
| 131 | <div class="card mb-4"> |
||
| 132 | <div class="card-body"> |
||
| 133 | <!-- Updated Form --> |
||
| 134 | <form action="{% url 'predictg' %}" method="POST" enctype="multipart/form-data"> |
||
| 135 | {% csrf_token %} <!-- CSRF Protection --> |
||
| 136 | |||
| 137 | <div class="form-group"> |
||
| 138 | <label for="imageUpload" class="file-upload"> |
||
| 139 | Upload an Image (Endoscopy or Scan) |
||
| 140 | </label> |
||
| 141 | <input type="file" class="form-control input-box" id="imageUpload" name="uploadedImage" accept="image/*" required> |
||
| 142 | </div> |
||
| 143 | |||
| 144 | <!-- Image Preview --> |
||
| 145 | <img id="previewImage" class="image-preview" alt="Uploaded Image Preview"> |
||
| 146 | |||
| 147 | <!-- Delete Button --> |
||
| 148 | <button type="button" class="btn btn-delete" id="deleteImage">Delete Image</button> |
||
| 149 | |||
| 150 | <!-- Predict Button --> |
||
| 151 | <button type="submit" class="btn btn-primary btn-predict">Predict</button> |
||
| 152 | </form> |
||
| 153 | </div> |
||
| 154 | </div> |
||
| 155 | </div> |
||
| 156 | </center> |
||
| 157 | |||
| 158 | <!-- JavaScript for Image Preview and Deletion --> |
||
| 159 | <script> |
||
| 160 | const imageUpload = document.getElementById('imageUpload'); |
||
| 161 | const previewImage = document.getElementById('previewImage'); |
||
| 162 | const deleteImage = document.getElementById('deleteImage'); |
||
| 163 | |||
| 164 | // Show image preview when a file is selected |
||
| 165 | imageUpload.addEventListener('change', function () { |
||
| 166 | const file = imageUpload.files[0]; |
||
| 167 | if (file) { |
||
| 168 | const reader = new FileReader(); |
||
| 169 | reader.onload = function (e) { |
||
| 170 | previewImage.src = e.target.result; |
||
| 171 | previewImage.style.display = 'block'; |
||
| 172 | deleteImage.style.display = 'inline-block'; |
||
| 173 | } |
||
| 174 | reader.readAsDataURL(file); |
||
| 175 | } |
||
| 176 | }); |
||
| 177 | |||
| 178 | // Delete the uploaded image |
||
| 179 | deleteImage.addEventListener('click', function () { |
||
| 180 | imageUpload.value = ''; |
||
| 181 | previewImage.src = ''; |
||
| 182 | previewImage.style.display = 'none'; |
||
| 183 | deleteImage.style.display = 'none'; |
||
| 184 | }); |
||
| 185 | </script> |
||
| 186 | </body> |
||
| 187 | |||
| 188 | </html> |