File size: 12,542 Bytes
ec07bf8 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OCT Image Classifier</title>
<style>
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
margin: 0;
padding: 0;
background-color: #f2f2f2;
color: #333;
display: flex;
flex-direction: column;
min-height: 100vh;
align-items: center;
}
header {
text-align: center;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
.HEADER-image {
width: 100px; /* Adjust width as needed */
height: auto; /* Maintain aspect ratio */
margin-right: 15px;
cursor: pointer;
}
h1 {
font-weight: bold;
font-size: 24px;
margin-top: 0;
margin-bottom: 20px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
box-sizing: border-box;
max-width: 600px;
width: 100%;
margin: auto;
}
#octSelection {
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 20px;
width: 100%;
box-sizing: border-box;
}
#iframeContainer {
display: flex;
justify-content: center;
width: 100%;
overflow: hidden;
}
#octFrame {
width: 100%;
height: 750px;
border: none;
}
footer {
text-align: center;
background-color: #fff;
padding: 20px;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
width: 100%;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
padding-top: 60px;
}
.modal-content {
background-color: #fefefe;
margin: 5% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
border-radius: 10px;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.instruction-image {
width: 85%; /* Adjust width as needed */
height:30%; /* Maintain aspect ratio */
margin-top: 10px;
}
/* Media queries for responsive design */
@media only screen and (min-width: 600px) {
body {
font-size: 18px;
}
h1 {
font-size: 28px;
}
}
@media only screen and (min-width: 768px) {
.container {
max-width: 800px;
}
#octFrame {
height: 600px;
}
}
</style>
</head>
<body>
<header>
<a href="https://ameenmarashi-mretinaai.static.hf.space">
<img src="MretinaAILogo.png" alt="Grayscale Example" class="HEADER-image">
</a>
<h1>OCT Image Classifier</h1>
</header>
<div class="container">
<label for="octSelection">
Before using the OCT image classifier, you acknowledge that it is essential to seek professional opinions as the OCT image classifier can make mistakes.
To learn more, please read the <a href="#" onclick="openInstructions()">instructions</a>.
<br><br>Select Clinical Entity
</label>
<select id="octSelection" onchange="updateIframe()">
<option value="https://ameenmarashi-diabeticoct.static.hf.space">Diabetic Retinopathy and Diabetic Macular Edema</option>
<option value="https://ameenmarashi-RetinalVascularOcclusion.static.hf.space">Retinal Vascular Occlusion</option>
<option value="https://ameenmarashi-amdoct1.static.hf.space">Age-related Macular Degeneration</option>
<option value="https://ameenmarashi-pachychoroid.static.hf.space">Pachychoroid (CSCR & PCV)</option>
<option value="https://ameenmarashi-vitreomacularinterfaceabnormalities.static.hf.space">Vitreomacular Interface Diseases</option>
<option value="https://ameenmarashi-hereditaryretinaldiseases.static.hf.space">Hereditary Retinal Diseases</option>
</select>
<div id="iframeContainer">
<iframe id="octFrame" src="https://ameenmarashi-diabeticoct.static.hf.space" frameborder="0"></iframe>
</div>
</div>
<footer>
<p>© 2024 mRetina AI. All rights reserved. Created and designed by Ameen Marashi, M.D.</p>
</footer>
<!-- Modal for instructions -->
<div id="instructionsModal" class="modal">
<div class="modal-content">
<span class="close" onclick="closeInstructions()">×</span>
<h2>Instructions</h2>
<p>
<b>System Requirements:<b><br>
- Stable & Fast internet connection<br>
- An OCT image file in a supported format (e.g., JPEG, PNG, GIF, BMP)<br>
- PDF, DOCx and other document file types are not supported <br>
<b>Preparing Your OCT Image:<b><br>
- Ensure the OCT image is clear and well-centered.<br>
- Avoid images with excessive noise or artifacts.<br>
- The image should be a grayscale ONLY like the example below.<br>
<img src="N ok.jpg" alt="Grayscale Example" class="instruction-image"><br>
- Avoid these types of images (shown below): Macular Map, Pseudo-color, Inverted grayscale, and captured from computer screen<br><br>
<img src="Map 1.jpg" alt="Grayscale Example" class="instruction-image"><br>
<img src="Map.jpg" alt="Grayscale Example" class="instruction-image"><br>
<img src="N-negative.jpg" alt="Grayscale Example" class="instruction-image"><br>
<img src="N-pseudocolor.jpg" alt="Grayscale Example" class="instruction-image"><br>
<img src="map tele.jpg" alt="Grayscale Example" class="instruction-image"><br>
<img src="report tele.jpg" alt="Grayscale Example" class="instruction-image"><br>
<img src="tele reppor.jpg" alt="Grayscale Example" class="instruction-image"><br>
<b>Using the Classifier:<b><br>
- Select the correct clinical entity.<br><br>
<b>Uploading an Image:<b><br>
- Click on the designated area labeled "Drag and drop an OCT image file here, or click to select file."<br>
- Either drag your OCT image file into the area or click to open a file selector and choose the image from your device.<br>
- Once uploaded, the image will be displayed on the screen.<br><br>
<b>Predicting the Condition:<b><br>
- Click the "Predict" button located below the displayed image; sometimes you need to re-upload the image if it doesn't appear.<br>
- A loading overlay with a spinner will appear, indicating that the model is processing the image.<br>
- Once the prediction is complete, the overlay will disappear, and the predicted condition will be displayed.<br><br>
<b>The image classifier is capable of predicting only specific pathologies based on the OCT images uploaded:<b><br>
- The image classifier will not extract features from OCT images such as subretinal or intraretinal fluids.
- When diabetic retinopathy and macular edema are selected, the OCT image classifier can predict whether the uploaded image is Central DME, Non-central CSME, DME with Vitreomacular abnormalities, or Tractional Retinal Detachment.<br>
- If Retinal Vascular Occlusive diseases are selected, the OCT image classifier can predict whether the uploaded image is a Long-Standing Retinal Vascular Occlusion, Macular Edema Related to Retinal Vein Occlusion, or Retinal Artery Occlusion.<br>
- When AMD is selected for the OCT image classifier, it can predict whether the uploaded image is Non-neovascular AMD, Non-neovascular AMD with Geographic atrophy, or Active Neovascular AMD.<br>
- If Pachychoroid is selected, the OCT image classifier can predict whether the uploaded image is CSCR, CSCR complicated with MNV, or Polypoidal Choroidal Vasculopathy.<br>
- If Vitreo Macular Interface Abnormalities are selected, the OCT image classifier can predict whether the uploaded image is Lamellar Macular Hole, Vitreomacular traction, Full-thickness Macular Hole, or Epiretinal Membrane.<br>
- When Hereditary Retinal Diseases are selected, the OCT image classifier can predict whether the uploaded image is Retinitis Pigmentosa, Retinitis Pigmentosa with Macular Edema, X-linked Juvenile Retinoschisis, or Vitelliform Lesion.<br><br>
<b>Viewing Recommendations:<b><br>
- If the predicted condition is not "Normal" a "Suggest Recommendations" button will appear.<br>
- Click the "Suggest Recommendations" button to view treatment recommendations related to the predicted condition.<br>
- Read the displayed recommendations carefully, but be aware that incorrect predictions will result in wrong recommendations.<br>
- If desired, click the "Build your case with AI" button to use an AI case generator tool for further analysis.<br><br>
<b>Troubleshooting and Tips:<b><br>
- No Prediction or Error: Ensure the image file is in a supported format, typed, and properly uploaded. Check your internet connection and try again.<br>
- Inaccurate Prediction: The classifier has a 70% accuracy rate with correct images. For example, if the patient presented with cystic lesions and no increased macular thickness, then AI may falsely produce a false prediction. Ensure the image quality is optimal. Consider consulting a specialist for a professional diagnosis and recommendations." Ensure the image quality is optimal. Consider consulting a specialist for a professional diagnosis and recommendations.<br>
- Button Not Appearing: If the "Suggest Recommendations" button does not appear, the condition might be predicted as "Normal," or there might be an issue with the prediction process. Try re-uploading the image or refreshing the page.<br><br>
<b> Disclaimer:<b><br>
- This tool is intended for preliminary screening and educational purposes only.<br>
- It should not be used as a substitute for professional medical diagnosis or treatment.<br>
- Always consult with a qualified healthcare provider for any medical concerns or conditions.
</p>
</div>
</div>
<script>
function updateIframe() {
var selectElement = document.getElementById("octSelection");
var selectedValue = selectElement.value;
var iframe = document.getElementById("octFrame");
iframe.src = selectedValue;
}
function openInstructions() {
document.getElementById('instructionsModal').style.display = 'block';
}
function closeInstructions() {
document.getElementById('instructionsModal').style.display = 'none';
}
// Close the modal when clicking outside of it
window.onclick = function(event) {
var modal = document.getElementById('instructionsModal');
if (event.target == modal) {
modal.style.display = 'none';
}
}
</script> |