| <!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> |
