Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Image Classifier</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| font-size: 20px; | |
| line-height: 1.6; | |
| text-align: center; | |
| } | |
| /* Styling for loading overlay */ | |
| .overlay { | |
| position: fixed; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| background-color: rgba(0, 0, 0, 0.5); /* semi-transparent black */ | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 999; /* ensure it's above other content */ | |
| } | |
| .spinner { | |
| border: 8px solid rgba(255, 255, 255, 0.3); /* light border */ | |
| border-top: 8px solid #ffffff; /* white border on top */ | |
| border-radius: 50%; | |
| width: 50px; | |
| height: 50px; | |
| animation: spin 1s linear infinite; /* spinning animation */ | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Styling for specific elements */ | |
| #dropArea { | |
| border: 2px dashed #007bff; /* Blue dashed border */ | |
| border-radius: 8px; | |
| padding: 20px; | |
| margin: 20px auto; | |
| width: 80%; | |
| max-width: 400px; | |
| cursor: pointer; | |
| } | |
| #dropArea:hover { | |
| background-color: #f0faff; /* Light blue background on hover */ | |
| } | |
| img { | |
| width: 300px; | |
| display: block; | |
| margin: 0 auto; /* Center image horizontally */ | |
| } | |
| button.predict-btn { | |
| display: inline-block; | |
| padding: 12px 24px; | |
| font-weight: bold; | |
| font-size: 18px; | |
| color: white; | |
| background-color: #007bff; /* Blue background */ | |
| border-radius: 8px; | |
| cursor: pointer; | |
| margin-top: 20px; | |
| } | |
| p#result { | |
| margin-top: 20px; | |
| font-weight: bold; | |
| font-size: 24px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="overlay" id="loadingOverlay"> | |
| <div class="spinner"></div> | |
| </div> | |
| <div id="dropArea"> | |
| <p>Drag and drop an OCT image file here, or click to select file</p> | |
| </div> | |
| <img id="img1" src="./image.jpg" style="display: none;" /> | |
| <button class="predict-btn" onclick="predict()">Predict</button> | |
| <p id="result"></p> | |
| <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> | |
| <script> | |
| async function handleDrop(event) { | |
| event.preventDefault(); | |
| const file = event.dataTransfer.files[0]; | |
| if (file) { | |
| await showImage(file); | |
| } | |
| } | |
| function uploadImage(event) { | |
| const input = document.createElement('input'); | |
| input.type = 'file'; | |
| input.accept = 'image/*'; | |
| input.style.display = 'none'; | |
| input.onchange = async function(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| await showImage(file); | |
| } | |
| }; | |
| document.body.appendChild(input); // Append input to the document | |
| input.click(); // Trigger the file input dialog | |
| document.body.removeChild(input); // Clean up the input element | |
| } | |
| async function showImage(file) { | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| const image = document.getElementById('img1'); | |
| image.src = event.target.result; | |
| image.style.display = 'block'; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| async function predict() { | |
| document.getElementById('loadingOverlay').style.display = 'flex'; // Show loading overlay | |
| const model = await tf.loadGraphModel('./model.json'); | |
| const example = tf.browser.fromPixels(document.getElementById("img1"), 3).cast('float32'); | |
| const reshapedExample = example.reshape([1, example.shape[0], example.shape[1], example.shape[2]]); | |
| const prediction = await model.predict(reshapedExample); | |
| const class_scores = await prediction.data(); | |
| const max_score_id = class_scores.indexOf(Math.max(...class_scores)); | |
| const classes = ["Central Serous Chorioretinopathy (CSCR)", "CSCR complicated with MNV", "Polypoidal Choroidal Vasculopathy", "Normal"]; | |
| document.getElementById('result').innerHTML = classes[max_score_id].toString(); | |
| document.getElementById('loadingOverlay').style.display = 'none'; // Hide loading overlay | |
| } | |
| // Add event listeners for drag and drop | |
| const dropArea = document.getElementById('dropArea'); | |
| dropArea.addEventListener('dragover', (event) => { | |
| event.preventDefault(); | |
| dropArea.classList.add('dragover'); | |
| }); | |
| dropArea.addEventListener('dragleave', () => { | |
| dropArea.classList.remove('dragover'); | |
| }); | |
| dropArea.addEventListener('drop', handleDrop); | |
| </script> | |
| </body> | |
| </html> | |