|
|
<!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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<div id="workflow" class="tab-content active">
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
