File size: 8,055 Bytes
ed9f15f |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Embryo Grading System - AI-Powered Analysis</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<img src="assets/ismo7.png" alt="Logo" class="logo">
<div class="user-menu" id="userMenu" style="display: none;">
<span class="user-email" id="userEmail"></span>
<button class="btn btn-secondary" id="logoutBtn" style="margin-left: 15px;">Logout</button>
</div>
</header>
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-content">
<div class="spinner"></div>
<p id="loadingText">Initializing AI models...</p>
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
</div>
</div>
<!-- Stepper Navigation -->
<div class="stepper-container">
<div class="stepper">
<div class="step" data-step="1">
<div class="step-circle">1</div>
<div class="step-label">Upload & Classify</div>
</div>
<div class="step-line"></div>
<div class="step" data-step="2">
<div class="step-circle">2</div>
<div class="step-label">Detect & Select</div>
</div>
<div class="step-line"></div>
<div class="step" data-step="3">
<div class="step-circle">3</div>
<div class="step-label">Results</div>
</div>
</div>
</div>
<!-- Main Workflow -->
<div id="workflow" class="tab-content active">
<!-- Step 1: Upload & Classify -->
<div class="card step-content active" id="step1" data-step="1">
<h2 class="section-title">Step 1: Upload & Classify Image</h2>
<div class="upload-section">
<div class="image-preview-container">
<h3>Image Preview</h3>
<div class="image-preview" id="mainImagePreview">
<div class="placeholder">
<svg width="100" height="100" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
<p>No image uploaded</p>
</div>
<img id="mainImage" alt="Uploaded embryo" style="display:none;">
<canvas id="annotatedCanvas" style="display:none;"></canvas>
<div class="zoom-controls">
<button class="icon-button" id="zoomIn" disabled>
<span>Zoom In</span>
</button>
<button class="icon-button" id="zoomOut" disabled>
<span>Zoom Out</span>
</button>
<button class="icon-button" id="zoomReset" disabled>
<span>Reset</span>
</button>
<span class="zoom-level" id="zoomLevel">Zoom: 100%</span>
</div>
</div>
<input type="file" id="imageInput" accept="image/*" style="display: none;">
<button class="btn btn-secondary" onclick="document.getElementById('imageInput').click()">
Choose Image
</button>
</div>
<div class="status-container">
<h3>Classification Status</h3>
<div id="classificationStatus" class="status-box">
<p>Upload an image to check if it contains an embryo.</p>
<p>The system will automatically classify the image upon upload.</p>
</div>
</div>
</div>
<div class="step-navigation">
<button class="btn btn-secondary" id="startOverBtn">Start Over</button>
<button class="btn btn-primary" id="nextStep1" disabled>Next: Detect Embryos</button>
</div>
</div>
<!-- Step 2: Detect & Select -->
<div class="card step-content" id="step2" data-step="2">
<h2 class="section-title">Step 2: Detect & Select Embryos</h2>
<div class="detection-layout">
<div class="detection-preview-container">
<h3>Detected Embryos on Image</h3>
<p style="font-size: 0.9em; color: var(--text-secondary); margin-bottom: 15px;">
All detected embryos are shown with bounding boxes. Click on any box to select/edit that embryo.
</p>
<div class="image-preview-with-boxes" id="detectionImageContainer">
<canvas id="detectionCanvas"></canvas>
</div>
<div class="detection-info" id="detectionInfo">
<p>Click on an embryo to adjust its crop area</p>
<button class="btn btn-secondary" id="addManualEmbryoBtn" style="margin-top: 10px;">
+ Add Embryo Manually
</button>
</div>
</div>
<div class="embryo-list-container">
<h3>Detected Embryos List</h3>
<div id="embryoList" class="embryo-list">
<!-- Embryo cards will be populated here -->
</div>
</div>
</div>
<div class="step-navigation">
<button class="btn btn-secondary" id="prevStep2">Previous</button>
<button class="btn btn-primary" id="nextStep2" disabled>Analyze All Embryos</button>
</div>
</div>
<!-- Step 3: Results -->
<div class="card step-content" id="step3" data-step="3">
<h2 class="section-title">Step 3: Analysis Results</h2>
<div class="results-container">
<div id="finalResults" class="results-box">
<p>Processing all embryos...</p>
</div>
</div>
<div class="step-navigation">
<button class="btn btn-secondary" id="prevStep3">Back to Selection</button>
<button class="btn btn-primary" id="analyzeAnother">Analyze Another Image</button>
</div>
</div>
</div>
</div>
<div id="toast" class="toast"></div>
<script type="module" src="src/main.js"></script>
</body>
</html>
|