|
|
<!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; |
|
|
height: auto; |
|
|
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%; |
|
|
height:30%; |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
@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> |
|
|
|
|
|
|
|
|
<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'; |
|
|
} |
|
|
|
|
|
|
|
|
window.onclick = function(event) { |
|
|
var modal = document.getElementById('instructionsModal'); |
|
|
if (event.target == modal) { |
|
|
modal.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
</script> |
