Spaces:

ISMOAI
/

Embryo-one-Final-Java-Script

Running

App Files Files Community

Embryo-One commited on Oct 25

Commit

ed9f15f

verified ·

1 Parent(s): 26bf5eb

Upload 49 files

Browse files

Files changed (49) hide show

.gitattributes +35 -35
README.md +9 -10
assets/example_embryo.jpg +0 -0
assets/ismo.png +0 -0
assets/ismo7.png +0 -0
index.html +158 -19
login.html +414 -0
models/README.md +54 -0
models/classifier_model_compressed/config.json +46 -0
models/classifier_model_compressed/model.onnx +3 -0
models/classifier_model_compressed/preprocessor_config.json +24 -0
models/grader_model_compressed/config.json +90 -0
models/grader_model_compressed/model.onnx +3 -0
models/grader_model_compressed/preprocessor_config.json +24 -0
models/poor_good_compressed/config.json +46 -0
models/poor_good_compressed/model.onnx +3 -0
models/poor_good_compressed/preprocessor_config.json +24 -0
models/yolo-cropper/best.onnx +3 -0
package-lock.json +164 -0
package.json +39 -0
server.js +103 -0
src/README.md +208 -0
src/config.js +42 -0
src/main.js +130 -0
src/models/inference.js +74 -0
src/models/modelLoader.js +74 -0
src/models/yoloDetection.js +29 -0
src/processing/imagePreprocessing.js +60 -0
src/processing/postprocessing.js +41 -0
src/processing/yoloPostprocessing.js +113 -0
src/state.js +111 -0
src/ui/cropEditor.js +604 -0
src/ui/eventHandlers.js +78 -0
src/ui/imageDisplay.js +75 -0
src/ui/inlineDetection.js +766 -0
src/ui/loading.js +35 -0
src/ui/modal.js +148 -0
src/ui/quickEval.js +49 -0
src/ui/results.js +249 -0
src/ui/stepper.js +368 -0
src/ui/tabs.js +26 -0
src/ui/toast.js +18 -0
src/ui/workflow.js +642 -0
src/ui/zoom.js +54 -0
src/utils/firebaseService.js +182 -0
src/utils/imageUtils.js +53 -0
src/utils/mathUtils.js +27 -0
styles.css +1611 -0
test.html +58 -0

.gitattributes CHANGED Viewed

@@ -1,35 +1,35 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md CHANGED Viewed

@@ -1,10 +1,9 @@
----
-title: Embryo One Final Java Script
-emoji: 🐨
-colorFrom: indigo
-colorTo: yellow
-sdk: static
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+---
+title: Embryo One With Cropping JS final
+colorFrom: green
+colorTo: purple
+sdk: static
+pinned: false
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

assets/example_embryo.jpg ADDED Viewed

assets/ismo.png ADDED Viewed

assets/ismo7.png ADDED Viewed

index.html CHANGED Viewed

@@ -1,19 +1,158 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

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

	@@ -0,0 +1,414 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - Embryo Grading System</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">
+    <style>
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background: linear-gradient(135deg, #007B8F 0%, #004E64 100%);
+            margin: 0;
+            font-family: 'EB Garamond', serif;
+        }
+        .login-container {
+            background: white;
+            border-radius: 20px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            padding: 50px 40px;
+            width: 100%;
+            max-width: 400px;
+            animation: slideUp 0.5s ease-out;
+        }
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .login-header {
+            text-align: center;
+            margin-bottom: 0px;
+            padding-bottom: 0px;
+        }
+        .login-header img {
+            width: 200px;
+            height: 100px;
+            margin-bottom: 0px;
+            object-fit: contain;
+        }
+        .login-header p {
+            margin: 5px 0 0 0;
+            color: #666;
+            font-size: 18px;
+            font-weight: 400;
+            display: none;
+        }
+        .form-group {
+            margin-bottom: 25px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #2c3e50;
+            font-weight: 600;
+            font-size: 16px;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 14px 16px;
+            border: 2px solid #e0e0e0;
+            border-radius: 10px;
+            font-size: 15px;
+            font-family: 'EB Garamond', serif;
+            transition: all 0.3s ease;
+            box-sizing: border-box;
+        }
+        .form-group input:focus {
+            outline: none;
+            border-color: #007B8F;
+            box-shadow: 0 0 0 3px rgba(0, 123, 143, 0.2);
+        }
+        .login-btn {
+            width: 100%;
+            padding: 16px;
+            background: linear-gradient(135deg, #007B8F 0%, #004E64 100%);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 18px;
+            font-weight: 600;
+            font-family: 'EB Garamond', serif;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            margin-top: 10px;
+            box-shadow: 0 4px 15px rgba(0, 123, 143, 0.3);
+        }
+        .login-btn:hover {
+            background: linear-gradient(135deg, #004E64 0%, #003847 100%);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 123, 143, 0.4);
+        }
+        .login-btn:active {
+            transform: translateY(0);
+            box-shadow: 0 2px 10px rgba(0, 123, 143, 0.3);
+        }
+        .login-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .error-message {
+            background: #fee;
+            color: #c33;
+            padding: 12px 16px;
+            border-radius: 8px;
+            margin-bottom: 20px;
+            font-size: 14px;
+            display: none;
+            border-left: 4px solid #c33;
+        }
+        .error-message.show {
+            display: block;
+            animation: shake 0.4s ease-in-out;
+        }
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            25% { transform: translateX(-10px); }
+            75% { transform: translateX(10px); }
+        }
+        .spinner-container {
+            display: none;
+            justify-content: center;
+            align-items: center;
+            margin-top: 20px;
+        }
+        .spinner-container.show {
+            display: flex;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #5dade2;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .footer-text {
+            text-align: center;
+            margin-top: 30px;
+            color: #999;
+            font-size: 13px;
+        }
+        .divider {
+            display: flex;
+            align-items: center;
+            text-align: center;
+            margin: 25px 0;
+            color: #999;
+        }
+        .divider::before,
+        .divider::after {
+            content: '';
+            flex: 1;
+            border-bottom: 1px solid #e0e0e0;
+        }
+        .divider span {
+            padding: 0 15px;
+            font-size: 14px;
+        }
+        .google-btn {
+            width: 100%;
+            padding: 14px 16px;
+            background: white;
+            color: #333;
+            border: 2px solid #e0e0e0;
+            border-radius: 12px;
+            font-size: 16px;
+            font-weight: 600;
+            font-family: 'EB Garamond', serif;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            margin-bottom: 10px;
+        }
+        .google-btn:hover {
+            background: #f8f9fa;
+            border-color: #007B8F;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        .google-btn:active {
+            transform: translateY(0);
+        }
+        .google-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+            transform: none;
+        }
+        .google-icon {
+            width: 20px;
+            height: 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="login-container">
+        <div class="login-header">
+            <img src="assets/ismo7.png" alt="Embryo Grading System Logo">
+            <p>Sign in to continue</p>
+        </div>
+        <div id="errorMessage" class="error-message"></div>
+        <button type="button" class="google-btn" id="googleSignInBtn">
+            <svg class="google-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+            </svg>
+            Sign in with Google
+        </button>
+        <div class="divider">
+            <span>or</span>
+        </div>
+        <form id="loginForm">
+            <div class="form-group">
+                <label for="email">Email Address</label>
+                <input
+                    type="email"
+                    id="email"
+                    name="email"
+                    placeholder="Enter your email"
+                    required
+                    autocomplete="email"
+                >
+            </div>
+            <div class="form-group">
+                <label for="password">Password</label>
+                <input
+                    type="password"
+                    id="password"
+                    name="password"
+                    placeholder="Enter your password"
+                    required
+                    autocomplete="current-password"
+                >
+            </div>
+            <button type="submit" class="login-btn" id="loginBtn">
+                Sign In
+            </button>
+        </form>
+        <div class="spinner-container" id="loadingSpinner">
+            <div class="spinner"></div>
+        </div>
+        <div class="footer-text">
+            &copy; 2025 Embryo Grading System
+        </div>
+    </div>
+    <script type="module">
+        import { signIn, signInWithGoogle } from './src/utils/firebaseService.js';
+        const loginForm = document.getElementById('loginForm');
+        const errorMessage = document.getElementById('errorMessage');
+        const loginBtn = document.getElementById('loginBtn');
+        const googleSignInBtn = document.getElementById('googleSignInBtn');
+        const loadingSpinner = document.getElementById('loadingSpinner');
+        // Google Sign-In
+        googleSignInBtn.addEventListener('click', async () => {
+            errorMessage.classList.remove('show');
+            googleSignInBtn.disabled = true;
+            googleSignInBtn.textContent = 'Signing in with Google...';
+            loadingSpinner.classList.add('show');
+            try {
+                await signInWithGoogle();
+                window.location.href = 'index.html';
+            } catch (error) {
+                console.error('Google sign-in failed:', error);
+                let errorText = 'Failed to sign in with Google.';
+                if (error.code === 'auth/popup-closed-by-user') {
+                    errorText = 'Sign-in popup was closed. Please try again.';
+                } else if (error.code === 'auth/cancelled-popup-request') {
+                    errorText = 'Sign-in cancelled.';
+                } else if (error.code === 'auth/popup-blocked') {
+                    errorText = 'Popup blocked. Please enable popups for this site.';
+                } else if (error.code === 'auth/network-request-failed') {
+                    errorText = 'Network error. Please check your connection.';
+                }
+                errorMessage.textContent = errorText;
+                errorMessage.classList.add('show');
+                googleSignInBtn.disabled = false;
+                googleSignInBtn.innerHTML = `
+                    <svg class="google-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
+                        <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
+                        <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
+                        <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
+                    </svg>
+                    Sign in with Google
+                `;
+                loadingSpinner.classList.remove('show');
+            }
+        });
+        // Email/Password Sign-In
+        loginForm.addEventListener('submit', async (e) => {
+            e.preventDefault();
+            const email = document.getElementById('email').value.trim();
+            const password = document.getElementById('password').value;
+            // Clear previous error
+            errorMessage.classList.remove('show');
+            // Show loading state
+            loginBtn.disabled = true;
+            loginBtn.textContent = 'Signing in...';
+            loadingSpinner.classList.add('show');
+            try {
+                await signIn(email, password);
+                // Redirect to main app on successful login
+                window.location.href = 'index.html';
+            } catch (error) {
+                console.error('Login failed:', error);
+                // Show error message
+                let errorText = 'Failed to sign in. Please check your credentials.';
+                if (error.code === 'auth/invalid-email') {
+                    errorText = 'Invalid email address format.';
+                } else if (error.code === 'auth/user-not-found') {
+                    errorText = 'No account found with this email.';
+                } else if (error.code === 'auth/wrong-password') {
+                    errorText = 'Incorrect password.';
+                } else if (error.code === 'auth/too-many-requests') {
+                    errorText = 'Too many failed attempts. Please try again later.';
+                } else if (error.code === 'auth/network-request-failed') {
+                    errorText = 'Network error. Please check your connection.';
+                } else if (error.code === 'auth/invalid-credential') {
+                    errorText = 'Invalid credentials. Please check your email and password.';
+                }
+                errorMessage.textContent = errorText;
+                errorMessage.classList.add('show');
+                // Reset button state
+                loginBtn.disabled = false;
+                loginBtn.textContent = 'Sign In';
+                loadingSpinner.classList.remove('show');
+            }
+        });
+        // Check if user is already logged in
+        import { onAuthChange } from './src/utils/firebaseService.js';
+        onAuthChange((user) => {
+            if (user) {
+                // User is already logged in, redirect to main app
+                window.location.href = 'index.html';
+            }
+        });
+    </script>
+</body>
+</html>

models/README.md ADDED Viewed

	@@ -0,0 +1,54 @@

+# Models Directory
+This directory will contain the ONNX models after conversion.
+## Structure
+After running the conversion scripts, this directory will contain:
+```
+models/
+├── classifier_model_compressed/
+│   ├── model.onnx              # ONNX model for embryo detection
+│   ├── config.json              # Model configuration
+│   └── preprocessor_config.json # Image preprocessing config
+│
+├── poor_good_compressed/
+│   ├── model.onnx              # ONNX model for quality assessment
+│   ├── config.json              # Model configuration
+│   └── preprocessor_config.json # Image preprocessing config
+│
+├── grader_model_compressed/
+│   ├── model.onnx              # ONNX model for Gardner grading
+│   ├── config.json              # Model configuration
+│   └── preprocessor_config.json # Image preprocessing config
+│
+└── yolo-cropper/
+    └── best.onnx                # ONNX model for embryo detection
+```
+## How to Generate Models
+Run the conversion scripts from the parent directory:
+```bash
+# Convert SigLIP models
+python convert_to_onnx.py
+# Convert YOLO model
+python convert_yolo_to_onnx.py
+```
+## Model Sizes (Approximate)
+- Classifier: ~95 MB
+- Poor/Good: ~95 MB
+- Grader: ~95 MB
+- YOLO: ~6 MB
+Total: ~290 MB
+## Note
+These models are not included in the repository due to their size.
+You must convert them from the original PyTorch models.

models/classifier_model_compressed/config.json ADDED Viewed

	@@ -0,0 +1,46 @@

+{
+  "architectures": [
+    "SiglipForImageClassification"
+  ],
+  "dtype": "float16",
+  "id2label": {
+    "0": "no",
+    "1": "yes"
+  },
+  "initializer_factor": 1.0,
+  "label2id": {
+    "no": 0,
+    "yes": 1
+  },
+  "model_type": "siglip",
+  "problem_type": "single_label_classification",
+  "text_config": {
+    "attention_dropout": 0.0,
+    "dtype": "float16",
+    "hidden_act": "gelu_pytorch_tanh",
+    "hidden_size": 768,
+    "intermediate_size": 3072,
+    "layer_norm_eps": 1e-06,
+    "max_position_embeddings": 64,
+    "model_type": "siglip_text_model",
+    "num_attention_heads": 12,
+    "num_hidden_layers": 12,
+    "projection_size": 768,
+    "vocab_size": 256000
+  },
+  "transformers_version": "4.56.1",
+  "vision_config": {
+    "attention_dropout": 0.0,
+    "dtype": "float16",
+    "hidden_act": "gelu_pytorch_tanh",
+    "hidden_size": 768,
+    "image_size": 224,
+    "intermediate_size": 3072,
+    "layer_norm_eps": 1e-06,
+    "model_type": "siglip_vision_model",
+    "num_attention_heads": 12,
+    "num_channels": 3,
+    "num_hidden_layers": 12,
+    "patch_size": 16
+  }
+}

models/classifier_model_compressed/model.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:1e43d3c5a5b27ace84dc5ed27477f95ac51d33013e5a6bc1ad95598bf41e4e22
+size 86628965

models/classifier_model_compressed/preprocessor_config.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "do_convert_rgb": null,
+  "do_normalize": true,
+  "do_rescale": true,
+  "do_resize": true,
+  "image_mean": [
+    0.5,
+    0.5,
+    0.5
+  ],
+  "image_processor_type": "SiglipImageProcessor",
+  "image_std": [
+    0.5,
+    0.5,
+    0.5
+  ],
+  "processor_class": "SiglipProcessor",
+  "resample": 2,
+  "rescale_factor": 0.00392156862745098,
+  "size": {
+    "height": 224,
+    "width": 224
+  }
+}

models/grader_model_compressed/config.json ADDED Viewed

	@@ -0,0 +1,90 @@

+{
+  "architectures": [
+    "SiglipForImageClassification"
+  ],
+  "dtype": "float16",
+  "id2label": {
+    "0": "3AA",
+    "1": "3AB",
+    "2": "3AC",
+    "3": "3BA",
+    "4": "3BB",
+    "5": "3BC",
+    "6": "3CA",
+    "7": "3CB",
+    "8": "3CC",
+    "9": "4AA",
+    "10": "4AB",
+    "11": "4AC",
+    "12": "4BA",
+    "13": "4BB",
+    "14": "4BC",
+    "15": "4CA",
+    "16": "4CB",
+    "17": "4CC",
+    "18": "5AA",
+    "19": "5AB",
+    "20": "5AC",
+    "21": "5BA",
+    "22": "5BB",
+    "23": "5BC"
+  },
+  "initializer_factor": 1.0,
+  "label2id": {
+    "3AA": 0,
+    "3AB": 1,
+    "3AC": 2,
+    "3BA": 3,
+    "3BB": 4,
+    "3BC": 5,
+    "3CA": 6,
+    "3CB": 7,
+    "3CC": 8,
+    "4AA": 9,
+    "4AB": 10,
+    "4AC": 11,
+    "4BA": 12,
+    "4BB": 13,
+    "4BC": 14,
+    "4CA": 15,
+    "4CB": 16,
+    "4CC": 17,
+    "5AA": 18,
+    "5AB": 19,
+    "5AC": 20,
+    "5BA": 21,
+    "5BB": 22,
+    "5BC": 23
+  },
+  "model_type": "siglip",
+  "problem_type": "single_label_classification",
+  "text_config": {
+    "attention_dropout": 0.0,
+    "dtype": "float16",
+    "hidden_act": "gelu_pytorch_tanh",
+    "hidden_size": 768,
+    "intermediate_size": 3072,
+    "layer_norm_eps": 1e-06,
+    "max_position_embeddings": 64,
+    "model_type": "siglip_text_model",
+    "num_attention_heads": 12,
+    "num_hidden_layers": 12,
+    "projection_size": 768,
+    "vocab_size": 256000
+  },
+  "transformers_version": "4.56.1",
+  "vision_config": {
+    "attention_dropout": 0.0,
+    "dtype": "float16",
+    "hidden_act": "gelu_pytorch_tanh",
+    "hidden_size": 768,
+    "image_size": 224,
+    "intermediate_size": 3072,
+    "layer_norm_eps": 1e-06,
+    "model_type": "siglip_vision_model",
+    "num_attention_heads": 12,
+    "num_channels": 3,
+    "num_hidden_layers": 12,
+    "patch_size": 16
+  }
+}

models/grader_model_compressed/model.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:dd41fbf211119409410ec7cb29e051f9150f17aa4083da9766a6390cd74fc450
+size 86645953

models/grader_model_compressed/preprocessor_config.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "do_convert_rgb": null,
+  "do_normalize": true,
+  "do_rescale": true,
+  "do_resize": true,
+  "image_mean": [
+    0.5,
+    0.5,
+    0.5
+  ],
+  "image_processor_type": "SiglipImageProcessor",
+  "image_std": [
+    0.5,
+    0.5,
+    0.5
+  ],
+  "processor_class": "SiglipProcessor",
+  "resample": 2,
+  "rescale_factor": 0.00392156862745098,
+  "size": {
+    "height": 224,
+    "width": 224
+  }
+}

models/poor_good_compressed/config.json ADDED Viewed

	@@ -0,0 +1,46 @@

+{
+  "architectures": [
+    "SiglipForImageClassification"
+  ],
+  "dtype": "float16",
+  "id2label": {
+    "0": "good grade embryo",
+    "1": "poor grade embryo"
+  },
+  "initializer_factor": 1.0,
+  "label2id": {
+    "good grade embryo": 0,
+    "poor grade embryo": 1
+  },
+  "model_type": "siglip",
+  "problem_type": "single_label_classification",
+  "text_config": {
+    "attention_dropout": 0.0,
+    "dtype": "float16",
+    "hidden_act": "gelu_pytorch_tanh",
+    "hidden_size": 768,
+    "intermediate_size": 3072,
+    "layer_norm_eps": 1e-06,
+    "max_position_embeddings": 64,
+    "model_type": "siglip_text_model",
+    "num_attention_heads": 12,
+    "num_hidden_layers": 12,
+    "projection_size": 768,
+    "vocab_size": 256000
+  },
+  "transformers_version": "4.56.1",
+  "vision_config": {
+    "attention_dropout": 0.0,
+    "dtype": "float16",
+    "hidden_act": "gelu_pytorch_tanh",
+    "hidden_size": 768,
+    "image_size": 224,
+    "intermediate_size": 3072,
+    "layer_norm_eps": 1e-06,
+    "model_type": "siglip_vision_model",
+    "num_attention_heads": 12,
+    "num_channels": 3,
+    "num_hidden_layers": 12,
+    "patch_size": 16
+  }
+}

models/poor_good_compressed/model.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:9df2b1350507a76ee13715d879ee27539a65ca1acdee6b4d63ffca552ca84334
+size 86628968

models/poor_good_compressed/preprocessor_config.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "do_convert_rgb": null,
+  "do_normalize": true,
+  "do_rescale": true,
+  "do_resize": true,
+  "image_mean": [
+    0.5,
+    0.5,
+    0.5
+  ],
+  "image_processor_type": "SiglipImageProcessor",
+  "image_std": [
+    0.5,
+    0.5,
+    0.5
+  ],
+  "processor_class": "SiglipProcessor",
+  "resample": 2,
+  "rescale_factor": 0.00392156862745098,
+  "size": {
+    "height": 224,
+    "width": 224
+  }
+}

models/yolo-cropper/best.onnx ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:b49fd86d506a287711ac3771590ef60af0d0f1e75fafb5227aef4429ca5ed910
+size 3355906

package-lock.json ADDED Viewed

	@@ -0,0 +1,164 @@

+{
+  "name": "embryo-grading-system",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "embryo-grading-system",
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "onnxruntime-web": "^1.17.0"
+      },
+      "devDependencies": {}
+    },
+    "node_modules/@protobufjs/aspromise": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
+      "integrity": "sha512-j+gKExEuLmKwvz3OgROXtrJ2UG2x8Ch2YZUxahh+s1F2HZ+wAceUNLkvy6zKCPVRkU++ZWQrdxsUeQXmcg4uoQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/base64": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/base64/-/base64-1.1.2.tgz",
+      "integrity": "sha512-AZkcAA5vnN/v4PDqKyMR5lx7hZttPDgClv83E//FMNhR2TMcLUhfRUBHCmSl0oi9zMgDDqRUJkSxO3wm85+XLg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/codegen": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@protobufjs/codegen/-/codegen-2.0.4.tgz",
+      "integrity": "sha512-YyFaikqM5sH0ziFZCN3xDC7zeGaB/d0IUb9CATugHWbd1FRFwWwt4ld4OYMPWu5a3Xe01mGAULCdqhMlPl29Jg==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/eventemitter": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/eventemitter/-/eventemitter-1.1.0.tgz",
+      "integrity": "sha512-j9ednRT81vYJ9OfVuXG6ERSTdEL1xVsNgqpkxMsbIabzSo3goCjDIveeGv5d03om39ML71RdmrGNjG5SReBP/Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/fetch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/fetch/-/fetch-1.1.0.tgz",
+      "integrity": "sha512-lljVXpqXebpsijW71PZaCYeIcE5on1w5DlQy5WH6GLbFryLUrBD4932W/E2BSpfRJWseIL4v/KPgBFxDOIdKpQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.1",
+        "@protobufjs/inquire": "^1.1.0"
+      }
+    },
+    "node_modules/@protobufjs/float": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/float/-/float-1.0.2.tgz",
+      "integrity": "sha512-Ddb+kVXlXst9d+R9PfTIxh1EdNkgoRe5tOX6t01f1lYWOvJnSPDBlG241QLzcyPdoNTsblLUdujGSE4RzrTZGQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/inquire": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/inquire/-/inquire-1.1.0.tgz",
+      "integrity": "sha512-kdSefcPdruJiFMVSbn801t4vFK7KB/5gd2fYvrxhuJYg8ILrmn9SKSX2tZdV6V+ksulWqS7aXjBcRXl3wHoD9Q==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/path": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@protobufjs/path/-/path-1.1.2.tgz",
+      "integrity": "sha512-6JOcJ5Tm08dOHAbdR3GrvP+yUUfkjG5ePsHYczMFLq3ZmMkAD98cDgcT2iA1lJ9NVwFd4tH/iSSoe44YWkltEA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/pool": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/pool/-/pool-1.1.0.tgz",
+      "integrity": "sha512-0kELaGSIDBKvcgS4zkjz1PeddatrjYcmMWOlAuAPwAeccUrPHdUqo/J6LiymHHEiJT5NrF1UVwxY14f+fy4WQw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@protobufjs/utf8": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
+      "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@types/node": {
+      "version": "24.9.1",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.9.1.tgz",
+      "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/flatbuffers": {
+      "version": "25.9.23",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-25.9.23.tgz",
+      "integrity": "sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/guid-typescript": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/guid-typescript/-/guid-typescript-1.0.9.tgz",
+      "integrity": "sha512-Y8T4vYhEfwJOTbouREvG+3XDsjr8E3kIr7uf+JZ0BYloFsttiHU0WfvANVsR7TxNUJa/WpCnw/Ino/p+DeBhBQ==",
+      "license": "ISC"
+    },
+    "node_modules/long": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
+      "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/onnxruntime-common": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/onnxruntime-common/-/onnxruntime-common-1.23.0.tgz",
+      "integrity": "sha512-Auz8S9D7vpF8ok7fzTobvD1XdQDftRf/S7pHmjeCr3Xdymi4z1C7zx4vnT6nnUjbpelZdGwda0BmWHCCTMKUTg==",
+      "license": "MIT"
+    },
+    "node_modules/onnxruntime-web": {
+      "version": "1.23.0",
+      "resolved": "https://registry.npmjs.org/onnxruntime-web/-/onnxruntime-web-1.23.0.tgz",
+      "integrity": "sha512-w0bvC2RwDxphOUFF8jFGZ/dYw+duaX20jM6V4BIZJPCfK4QuCpB/pVREV+hjYbT3x4hyfa2ZbTaWx4e1Vot0fQ==",
+      "license": "MIT",
+      "dependencies": {
+        "flatbuffers": "^25.1.24",
+        "guid-typescript": "^1.0.9",
+        "long": "^5.2.3",
+        "onnxruntime-common": "1.23.0",
+        "platform": "^1.3.6",
+        "protobufjs": "^7.2.4"
+      }
+    },
+    "node_modules/platform": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/platform/-/platform-1.3.6.tgz",
+      "integrity": "sha512-fnWVljUchTro6RiCFvCXBbNhJc2NijN7oIQxbwsyL0buWJPG85v81ehlHI9fXrJsMNgTofEoWIQeClKpgxFLrg==",
+      "license": "MIT"
+    },
+    "node_modules/protobufjs": {
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
+      "integrity": "sha512-CvexbZtbov6jW2eXAvLukXjXUW1TzFaivC46BpWc/3BpcCysb5Vffu+B3XHMm8lVEuy2Mm4XGex8hBSg1yapPg==",
+      "hasInstallScript": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@protobufjs/aspromise": "^1.1.2",
+        "@protobufjs/base64": "^1.1.2",
+        "@protobufjs/codegen": "^2.0.4",
+        "@protobufjs/eventemitter": "^1.1.0",
+        "@protobufjs/fetch": "^1.1.0",
+        "@protobufjs/float": "^1.0.2",
+        "@protobufjs/inquire": "^1.1.0",
+        "@protobufjs/path": "^1.1.2",
+        "@protobufjs/pool": "^1.1.0",
+        "@protobufjs/utf8": "^1.1.0",
+        "@types/node": ">=13.7.0",
+        "long": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    }
+  }
+}

package.json ADDED Viewed

	@@ -0,0 +1,39 @@

+{
+  "name": "embryo-grading-system",
+  "version": "1.0.0",
+  "description": "Browser-based Embryo Grading System using ONNX and Transformers.js",
+  "main": "server.js",
+  "type": "module",
+  "scripts": {
+    "dev": "node server.js",
+    "start": "node server.js",
+    "convert": "python convert_to_onnx.py && python convert_yolo_to_onnx.py",
+    "convert-siglip": "python convert_to_onnx.py",
+    "convert-yolo": "python convert_yolo_to_onnx.py"
+  },
+  "keywords": [
+    "embryo",
+    "grading",
+    "AI",
+    "ONNX",
+    "transformers",
+    "computer-vision",
+    "medical",
+    "SigLIP",
+    "YOLO"
+  ],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "onnxruntime-web": "^1.17.0"
+  },
+  "devDependencies": {},
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "bugs": {
+    "url": ""
+  },
+  "homepage": ""
+}

server.js ADDED Viewed

	@@ -0,0 +1,103 @@

+/**
+ * Simple HTTP Server for Embryo Grading System
+ * Node.js server to serve the application
+ */
+import http from 'http';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const PORT = 8000;
+// MIME types for different file extensions
+const mimeTypes = {
+    '.html': 'text/html',
+    '.js': 'text/javascript',
+    '.css': 'text/css',
+    '.json': 'application/json',
+    '.png': 'image/png',
+    '.jpg': 'image/jpeg',
+    '.jpeg': 'image/jpeg',
+    '.gif': 'image/gif',
+    '.svg': 'image/svg+xml',
+    '.ico': 'image/x-icon',
+    '.wasm': 'application/wasm',
+    '.onnx': 'application/octet-stream',
+    '.pt': 'application/octet-stream',
+    '.safetensors': 'application/octet-stream'
+};
+const server = http.createServer((req, res) => {
+    console.log(`${new Date().toISOString()} - ${req.method} ${req.url}`);
+    // Parse URL and remove query string
+    let filePath = '.' + req.url.split('?')[0];
+    // Default to login.html instead of index.html
+    if (filePath === './') {
+        filePath = './login.html';
+    }
+    // Get file extension
+    const extname = String(path.extname(filePath)).toLowerCase();
+    const contentType = mimeTypes[extname] || 'application/octet-stream';
+    // Read and serve file
+    fs.readFile(filePath, (error, content) => {
+        if (error) {
+            if (error.code === 'ENOENT') {
+                // File not found
+                res.writeHead(404, { 'Content-Type': 'text/html' });
+                res.end('<h1>404 - File Not Found</h1>', 'utf-8');
+            } else {
+                // Server error
+                res.writeHead(500);
+                res.end(`Server Error: ${error.code}`, 'utf-8');
+            }
+        } else {
+            // Success
+            res.writeHead(200, {
+                'Content-Type': contentType,
+                'Access-Control-Allow-Origin': '*'
+            });
+            res.end(content, 'utf-8');
+        }
+    });
+});
+server.listen(PORT, () => {
+    console.log('╔════════════════════════════════════════════════════════╗');
+    console.log('║       Embryo Grading System - Server Running          ║');
+    console.log('╚════════════════════════════════════════════════════════╝');
+    console.log('');
+    console.log(`  🚀 Server running at: http://localhost:${PORT}`);
+    console.log(`  📁 Serving files from: ${__dirname}`);
+    console.log('');
+    console.log('  Press Ctrl+C to stop the server');
+    console.log('');
+    console.log('─────────────────────────────────────────────────────────');
+});
+// Handle server errors
+server.on('error', (err) => {
+    if (err.code === 'EADDRINUSE') {
+        console.error(`\n❌ Error: Port ${PORT} is already in use.`);
+        console.error('   Please stop the other server or use a different port.\n');
+    } else {
+        console.error('\n❌ Server error:', err);
+    }
+    process.exit(1);
+});
+// Graceful shutdown
+process.on('SIGINT', () => {
+    console.log('\n\n🛑 Shutting down server...');
+    server.close(() => {
+        console.log('✅ Server stopped successfully\n');
+        process.exit(0);
+    });
+});

src/README.md ADDED Viewed

	@@ -0,0 +1,208 @@

+# Source Code Structure
+The application has been refactored into a modular structure for better maintainability and debugging.
+## Directory Structure
+```
+src/
+├── config.js                    # Application configuration and constants
+├── state.js                     # Application state management
+├── main.js                      # Main entry point
+│
+├── models/                      # AI Model management
+│   ├── modelLoader.js          # Load and initialize ONNX models
+│   ├── inference.js            # Run model predictions
+│   └── yoloDetection.js        # YOLO-specific detection logic
+│
+├── processing/                  # Data processing
+│   ├── imagePreprocessing.js   # Image preprocessing for models
+│   ├── postprocessing.js       # Model output postprocessing
+│   └── yoloPostprocessing.js   # YOLO-specific postprocessing with NMS
+│
+├── ui/                          # UI components and handlers
+│   ├── eventHandlers.js        # Setup all event listeners
+│   ├── imageDisplay.js         # Image preview and display
+│   ├── loading.js              # Loading overlay controls
+│   ├── quickEval.js            # Quick evaluation handlers
+│   ├── results.js              # Results display and formatting
+│   ├── tabs.js                 # Tab switching logic
+│   ├── toast.js                # Toast notifications
+│   ├── workflow.js             # Main workflow logic
+│   └── zoom.js                 # Zoom controls
+│
+└── utils/                       # Utility functions
+    ├── imageUtils.js           # Image manipulation helpers
+    └── mathUtils.js            # Math operations (softmax, etc.)
+```
+## Module Responsibilities
+### Core Modules
+**config.js**
+- Model paths configuration
+- Detection thresholds and parameters
+- Label mappings
+- ONNX Runtime configuration
+- Zoom settings
+**state.js**
+- Centralized application state
+- State getters and setters
+- Current image, models, embryos tracking
+**main.js**
+- Application initialization
+- Orchestrates model loading
+- Sets up event listeners
+- Entry point for the app
+### Model Modules
+**models/modelLoader.js**
+- Initialize ONNX Runtime
+- Load label mappings from config files
+- Load all 4 ONNX models (classifier, quality, grader, YOLO)
+- Provide model status
+**models/inference.js**
+- Run classification (embryo yes/no)
+- Run quality check (poor/good)
+- Run grading (Gardner scale)
+- Orchestrate full embryo evaluation pipeline
+**models/yoloDetection.js**
+- Detect embryos using YOLO model
+- Check YOLO availability
+### Processing Modules
+**processing/imagePreprocessing.js**
+- Preprocess images for SigLIP models (224x224)
+- Preprocess images for YOLO (640x640)
+- Normalize with mean/std
+**processing/postprocessing.js**
+- Postprocess classification results
+- Postprocess grading results with all predictions
+- Apply softmax to logits
+**processing/yoloPostprocessing.js**
+- Parse YOLO output format [1, 5, 8400]
+- Apply confidence threshold
+- Non-Maximum Suppression (NMS)
+- Calculate IoU (Intersection over Union)
+- Crop detected embryo regions
+### UI Modules
+**ui/eventHandlers.js**
+- Central event listener setup
+- Handle image uploads
+- Wire up all UI interactions
+**ui/imageDisplay.js**
+- Display images in main/quick previews
+- Show cropped embryos
+- Manage image visibility
+**ui/loading.js**
+- Show/hide loading overlay
+- Update progress bar
+- Display loading messages
+**ui/quickEval.js**
+- Quick evaluation workflow
+- Clear quick evaluation results
+**ui/results.js**
+- Format and display results
+- Interpret Gardner grades
+- Show top-5 predictions
+- Display classification status
+- Generate image quality tips
+**ui/tabs.js**
+- Switch between main workflow and quick evaluation
+- Manage tab state
+**ui/toast.js**
+- Show success/error/info toast notifications
+- Auto-dismiss after 3 seconds
+**ui/workflow.js**
+- Main workflow orchestration
+- Classify uploaded images
+- Process single/multiple embryo modes
+- Navigate between detected embryos
+- Evaluate selected embryos
+**ui/zoom.js**
+- Adjust zoom level
+- Reset zoom
+- Apply zoom transform
+### Utility Modules
+**utils/imageUtils.js**
+- Load images from URLs/data URIs
+- Crop image regions with padding
+- Read files as data URLs
+**utils/mathUtils.js**
+- Softmax function
+- Mean calculation
+- Value clamping
+## Benefits of Modular Structure
+1. **Easier Debugging**: Each module has a specific responsibility, making it easier to locate and fix bugs
+2. **Better Testing**: Individual modules can be tested in isolation
+3. **Code Reusability**: Functions can be easily imported and reused across different parts of the app
+4. **Maintainability**: Changes to one module don't affect others if interfaces remain stable
+5. **Readability**: Smaller files are easier to understand and navigate
+6. **Collaboration**: Multiple developers can work on different modules simultaneously
+## How to Add New Features
+### Adding a New Model
+1. Add model path to `config.js`
+2. Load model in `models/modelLoader.js`
+3. Create inference function in `models/inference.js`
+4. Add preprocessing in `processing/imagePreprocessing.js` if needed
+5. Add postprocessing in `processing/postprocessing.js`
+### Adding a New UI Component
+1. Create new file in `ui/` directory
+2. Export relevant functions
+3. Import and wire up in `ui/eventHandlers.js`
+4. Update `main.js` if initialization is needed
+### Modifying Detection Parameters
+1. Update thresholds in `config.js`
+2. No code changes needed elsewhere
+## Import/Export Pattern
+All modules use ES6 modules:
+```javascript
+// Export
+export function myFunction() { ... }
+export const myConstant = 42;
+// Import
+import { myFunction, myConstant } from './module.js';
+```
+## Debugging Tips
+1. **Check browser console**: All errors are logged with descriptive messages
+2. **Check Network tab**: Verify models are loading correctly
+3. **Breakpoints**: Set breakpoints in specific modules to debug
+4. **State inspection**: Check `appState` in console to see current state
+5. **Module isolation**: Test individual functions by importing in console
+## Backup
+The original monolithic `app.js` has been backed up as `app.js.backup`.

src/config.js ADDED Viewed

	@@ -0,0 +1,42 @@

+/**
+ * Configuration - Application constants and model paths
+ */
+export const MODEL_PATHS = {
+    classifier: './models/classifier_model_compressed/model.onnx',
+    poorGood: './models/poor_good_compressed/model.onnx',
+    grader: './models/grader_model_compressed/model.onnx',
+    yolo: './models/yolo-cropper/best.onnx'
+};
+export const DETECTION_CONFIG = {
+    yolo: {
+        inputSize: 640,
+        confThreshold: 0.6,
+        iouThreshold: 0.45,
+        padding: 0.25
+    },
+    siglip: {
+        inputSize: 224,
+        mean: [0.5, 0.5, 0.5],
+        std: [0.5, 0.5, 0.5]
+    }
+};
+export const LABEL_MAPPINGS = {
+    classifier: { 0: 'no', 1: 'yes' },
+    poorGood: { 0: 'good', 1: 'poor' },
+    grader: {} // Will be loaded from config.json
+};
+export const ONNX_CONFIG = {
+    wasmPaths: 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.17.0/dist/',
+    numThreads: 4
+};
+export const ZOOM_CONFIG = {
+    min: 0.5,
+    max: 3,
+    step: 0.1,
+    default: 1
+};

src/main.js ADDED Viewed

	@@ -0,0 +1,130 @@

+/**
+ * Embryo Grading System - Main Application Entry Point
+ * Modular structure for better debugging and maintenance
+ */
+import { initONNXRuntime, loadLabelMappings, loadAllModels } from './models/modelLoader.js';
+import { setupEventListeners } from './ui/eventHandlers.js';
+import { updateLoadingStatus, hideLoading } from './ui/loading.js';
+import { showToast } from './ui/toast.js';
+import { initializeStepper } from './ui/stepper.js';
+import { initializeCropEditor } from './ui/cropEditor.js';
+import { onAuthChange, signOutUser, getCurrentUser } from './utils/firebaseService.js';
+/**
+ * Check authentication status
+ */
+function checkAuthentication() {
+    return new Promise((resolve) => {
+        onAuthChange((user) => {
+            if (user) {
+                // User is logged in
+                const userEmail = document.getElementById('userEmail');
+                const userMenu = document.getElementById('userMenu');
+                if (userEmail) {
+                    userEmail.textContent = user.email;
+                }
+                if (userMenu) {
+                    userMenu.style.display = 'flex';
+                }
+                resolve(true);
+            } else {
+                // User is not logged in, redirect to login
+                if (window.location.pathname !== '/login.html' && !window.location.pathname.endsWith('login.html')) {
+                    window.location.href = '/login.html';
+                }
+                resolve(false);
+            }
+        });
+    });
+}
+/**
+ * Setup logout functionality
+ */
+function setupLogout() {
+    const logoutBtn = document.getElementById('logoutBtn');
+    if (logoutBtn) {
+        logoutBtn.addEventListener('click', async () => {
+            try {
+                await signOutUser();
+                window.location.href = '/'; // Redirect to root which serves login.html
+            } catch (error) {
+                console.error('Logout error:', error);
+                showToast('Failed to logout', 'error');
+            }
+        });
+    }
+}
+/**
+ * Initialize the application
+ */
+async function init() {
+    try {
+        // Auto-logout on page refresh/reload
+        // Check if this is a page reload (not initial load from login)
+        const isPageReload = performance.navigation.type === 1 ||
+                            performance.getEntriesByType('navigation')[0]?.type === 'reload';
+        if (isPageReload) {
+            // Page was reloaded, logout and redirect to login
+            try {
+                await signOutUser();
+            } catch (error) {
+                console.error('Auto-logout error:', error);
+            }
+            window.location.href = '/';
+            return;
+        }
+        // Check authentication first
+        const isAuthenticated = await checkAuthentication();
+        if (!isAuthenticated) {
+            return; // Will redirect to login
+        }
+        // Setup logout
+        setupLogout();
+        updateLoadingStatus('Initializing ONNX Runtime...', 10);
+        // Configure ONNX Runtime
+        await initONNXRuntime();
+        // Load label mappings
+        await loadLabelMappings();
+        // Load models
+        await loadAllModels();
+        // Setup UI event listeners
+        setupEventListeners();
+        // Initialize stepper
+        initializeStepper();
+        // Initialize crop editor
+        initializeCropEditor();
+        // Hide loading overlay
+        hideLoading();
+        showToast('AI models loaded successfully!', 'success');
+    } catch (error) {
+        console.error('Initialization error:', error);
+        showToast(`Initialization failed: ${error.message}`, 'error');
+        updateLoadingStatus(`Error: ${error.message}`, 100);
+    }
+}
+// Initialize app when DOM is loaded
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+} else {
+    init();
+}
+export { init };

src/models/inference.js ADDED Viewed

	@@ -0,0 +1,74 @@

+/**
+ * Model Inference - Run predictions on models
+ */
+import { getModel } from '../state.js';
+import { LABEL_MAPPINGS } from '../config.js';
+import { preprocessImage } from '../processing/imagePreprocessing.js';
+import { postprocessClassification, postprocessGrading } from '../processing/postprocessing.js';
+/**
+ * Run classification model (embryo yes/no)
+ */
+export async function runClassification(imageData) {
+    const inputTensor = await preprocessImage(imageData, 224);
+    const feeds = { pixel_values: inputTensor };
+    const results = await getModel('classifier').run(feeds);
+    return postprocessClassification(results, LABEL_MAPPINGS.classifier);
+}
+/**
+ * Run quality check model (poor/good)
+ */
+export async function runQualityCheck(imageData) {
+    const inputTensor = await preprocessImage(imageData, 224);
+    const feeds = { pixel_values: inputTensor };
+    const results = await getModel('poorGood').run(feeds);
+    return postprocessClassification(results, LABEL_MAPPINGS.poorGood);
+}
+/**
+ * Run grading model (Gardner scale)
+ */
+export async function runGrading(imageData) {
+    const inputTensor = await preprocessImage(imageData, 224);
+    const feeds = { pixel_values: inputTensor };
+    const results = await getModel('grader').run(feeds);
+    return postprocessGrading(results);
+}
+/**
+ * Evaluate embryo quality and grade
+ */
+export async function evaluateEmbryo(imageData) {
+    try {
+        // Step 1: Check quality (poor/good)
+        const qualityResult = await runQualityCheck(imageData);
+        if (qualityResult.label === 'poor') {
+            return {
+                quality: 'poor',
+                poorGoodConfidence: qualityResult.confidence,
+                grade: null,
+                predictions: {}
+            };
+        }
+        // Step 2: Get grade
+        const gradeResult = await runGrading(imageData);
+        return {
+            quality: 'good',
+            poorGoodConfidence: qualityResult.confidence,
+            grade: gradeResult.label,
+            confidence: gradeResult.confidence,
+            predictions: gradeResult.allPredictions
+        };
+    } catch (error) {
+        console.error('Error evaluating embryo:', error);
+        throw new Error(`Failed to evaluate embryo: ${error.message}`);
+    }
+}

src/models/modelLoader.js ADDED Viewed

	@@ -0,0 +1,74 @@

+/**
+ * Model Loading - Load and initialize ONNX models
+ */
+import * as ort from 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.17.0/dist/esm/ort.min.js';
+import { MODEL_PATHS, ONNX_CONFIG, LABEL_MAPPINGS } from '../config.js';
+import { setModel, appState } from '../state.js';
+import { updateLoadingStatus } from '../ui/loading.js';
+/**
+ * Initialize ONNX Runtime
+ */
+export async function initONNXRuntime() {
+    ort.env.wasm.wasmPaths = ONNX_CONFIG.wasmPaths;
+    ort.env.wasm.numThreads = ONNX_CONFIG.numThreads;
+}
+/**
+ * Load label mappings from config files
+ */
+export async function loadLabelMappings() {
+    try {
+        const graderConfig = await fetch('./models/grader_model_compressed/config.json');
+        const graderData = await graderConfig.json();
+        LABEL_MAPPINGS.grader = graderData.id2label || {};
+        console.log('Label mappings loaded:', LABEL_MAPPINGS);
+    } catch (error) {
+        console.warn('Could not load label mappings, using defaults:', error);
+    }
+}
+/**
+ * Load all ONNX models
+ */
+export async function loadAllModels() {
+    try {
+        updateLoadingStatus('Loading Classifier Model...', 25);
+        const classifier = await ort.InferenceSession.create(MODEL_PATHS.classifier);
+        setModel('classifier', classifier);
+        updateLoadingStatus('Loading Quality Assessment Model...', 50);
+        const poorGood = await ort.InferenceSession.create(MODEL_PATHS.poorGood);
+        setModel('poorGood', poorGood);
+        updateLoadingStatus('Loading Grader Model...', 75);
+        const grader = await ort.InferenceSession.create(MODEL_PATHS.grader);
+        setModel('grader', grader);
+        updateLoadingStatus('Loading YOLO Detection Model...', 90);
+        try {
+            const yolo = await ort.InferenceSession.create(MODEL_PATHS.yolo);
+            setModel('yolo', yolo);
+        } catch (error) {
+            console.warn('YOLO model not available:', error);
+        }
+        updateLoadingStatus('Models loaded successfully!', 100);
+    } catch (error) {
+        throw new Error(`Model loading failed: ${error.message}`);
+    }
+}
+/**
+ * Get model status for UI display
+ */
+export function getModelStatus() {
+    return {
+        classifier: !!appState.models.classifier,
+        poorGood: !!appState.models.poorGood,
+        grader: !!appState.models.grader,
+        yolo: !!appState.models.yolo
+    };
+}

src/models/yoloDetection.js ADDED Viewed

	@@ -0,0 +1,29 @@

+/**
+ * YOLO Detection - Detect and crop embryos
+ */
+import { getModel } from '../state.js';
+import { DETECTION_CONFIG } from '../config.js';
+import { preprocessImageYOLO } from '../processing/imagePreprocessing.js';
+import { postprocessYOLO } from '../processing/yoloPostprocessing.js';
+import { loadImage } from '../utils/imageUtils.js';
+/**
+ * Detect embryos using YOLO
+ */
+export async function detectEmbryos(imageData) {
+    const img = await loadImage(imageData);
+    const inputTensor = await preprocessImageYOLO(img, DETECTION_CONFIG.yolo.inputSize);
+    const feeds = { images: inputTensor };
+    const results = await getModel('yolo').run(feeds);
+    return postprocessYOLO(results, img);
+}
+/**
+ * Check if YOLO model is available
+ */
+export function isYOLOAvailable() {
+    return !!getModel('yolo');
+}

src/processing/imagePreprocessing.js ADDED Viewed

	@@ -0,0 +1,60 @@

+/**
+ * Image Preprocessing - Prepare images for model inference
+ */
+import * as ort from 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.17.0/dist/esm/ort.min.js';
+import { DETECTION_CONFIG } from '../config.js';
+import { loadImage } from '../utils/imageUtils.js';
+/**
+ * Preprocess image for SigLIP models
+ */
+export async function preprocessImage(imageData, size) {
+    const img = await loadImage(imageData);
+    // Create canvas and resize
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0, size, size);
+    // Get image data
+    const imageDataObj = ctx.getImageData(0, 0, size, size);
+    const data = imageDataObj.data;
+    // Convert to float32 tensor [1, 3, size, size] and normalize
+    const float32Data = new Float32Array(3 * size * size);
+    const { mean, std } = DETECTION_CONFIG.siglip;
+    for (let i = 0; i < size * size; i++) {
+        float32Data[i] = ((data[i * 4] / 255.0) - mean[0]) / std[0]; // R
+        float32Data[size * size + i] = ((data[i * 4 + 1] / 255.0) - mean[1]) / std[1]; // G
+        float32Data[2 * size * size + i] = ((data[i * 4 + 2] / 255.0) - mean[2]) / std[2]; // B
+    }
+    return new ort.Tensor('float32', float32Data, [1, 3, size, size]);
+}
+/**
+ * Preprocess image for YOLO
+ */
+export async function preprocessImageYOLO(img, size) {
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, 0, 0, size, size);
+    const imageData = ctx.getImageData(0, 0, size, size);
+    const data = imageData.data;
+    const float32Data = new Float32Array(3 * size * size);
+    for (let i = 0; i < size * size; i++) {
+        float32Data[i] = data[i * 4] / 255.0;
+        float32Data[size * size + i] = data[i * 4 + 1] / 255.0;
+        float32Data[2 * size * size + i] = data[i * 4 + 2] / 255.0;
+    }
+    return new ort.Tensor('float32', float32Data, [1, 3, size, size]);
+}

src/processing/postprocessing.js ADDED Viewed

	@@ -0,0 +1,41 @@

+/**
+ * Postprocessing - Process model outputs
+ */
+import { LABEL_MAPPINGS } from '../config.js';
+import { softmax } from '../utils/mathUtils.js';
+/**
+ * Postprocess classification results
+ */
+export function postprocessClassification(results, mapping = LABEL_MAPPINGS.classifier) {
+    const logits = results.logits.data;
+    const probabilities = softmax(Array.from(logits));
+    const maxIndex = probabilities.indexOf(Math.max(...probabilities));
+    return {
+        label: mapping[maxIndex] || maxIndex.toString(),
+        confidence: probabilities[maxIndex]
+    };
+}
+/**
+ * Postprocess grading results
+ */
+export function postprocessGrading(results) {
+    const logits = results.logits.data;
+    const probabilities = softmax(Array.from(logits));
+    const maxIndex = probabilities.indexOf(Math.max(...probabilities));
+    const allPredictions = {};
+    probabilities.forEach((prob, idx) => {
+        const label = LABEL_MAPPINGS.grader[idx] || idx.toString();
+        allPredictions[label] = prob;
+    });
+    return {
+        label: LABEL_MAPPINGS.grader[maxIndex] || maxIndex.toString(),
+        confidence: probabilities[maxIndex],
+        allPredictions: allPredictions
+    };
+}

src/processing/yoloPostprocessing.js ADDED Viewed

	@@ -0,0 +1,113 @@

+/**
+ * YOLO Postprocessing - Process YOLO detection outputs
+ */
+import { DETECTION_CONFIG } from '../config.js';
+import { cropImage } from '../utils/imageUtils.js';
+/**
+ * Postprocess YOLO detections
+ */
+export async function postprocessYOLO(results, originalImage) {
+    const output = results.output0 || results[Object.keys(results)[0]];
+    const data = output.data;
+    const dims = output.dims; // [1, 5, 8400]
+    const detections = [];
+    const { confThreshold, iouThreshold } = DETECTION_CONFIG.yolo;
+    // YOLOv8 output format: [batch, [x, y, w, h, conf], num_anchors]
+    // dims = [1, 5, 8400]
+    const numAnchors = dims[2]; // 8400
+    // Extract boxes with confidence above threshold
+    const boxes = [];
+    for (let i = 0; i < numAnchors; i++) {
+        // Data is organized as: [x_center, y_center, width, height, confidence] for each anchor
+        const x_center = data[i];
+        const y_center = data[numAnchors + i];
+        const width = data[2 * numAnchors + i];
+        const height = data[3 * numAnchors + i];
+        const confidence = data[4 * numAnchors + i];
+        if (confidence > confThreshold) {
+            // Convert from center format to corner format
+            const x1 = (x_center - width / 2) / 640 * originalImage.width;
+            const y1 = (y_center - height / 2) / 640 * originalImage.height;
+            const x2 = (x_center + width / 2) / 640 * originalImage.width;
+            const y2 = (y_center + height / 2) / 640 * originalImage.height;
+            boxes.push({
+                x1: Math.max(0, x1),
+                y1: Math.max(0, y1),
+                x2: Math.min(originalImage.width, x2),
+                y2: Math.min(originalImage.height, y2),
+                confidence: confidence
+            });
+        }
+    }
+    // Apply Non-Maximum Suppression
+    const selectedBoxes = nonMaximumSuppression(boxes, iouThreshold);
+    // Crop each detected embryo
+    for (const box of selectedBoxes) {
+        const croppedData = await cropImage(originalImage, box.x1, box.y1, box.x2, box.y2);
+        detections.push({
+            box: box,
+            confidence: box.confidence,
+            imageData: croppedData
+        });
+    }
+    return detections;
+}
+/**
+ * Non-Maximum Suppression to remove overlapping boxes
+ */
+function nonMaximumSuppression(boxes, iouThreshold) {
+    // Sort boxes by confidence (descending)
+    boxes.sort((a, b) => b.confidence - a.confidence);
+    const selected = [];
+    const suppressed = new Set();
+    for (let i = 0; i < boxes.length; i++) {
+        if (suppressed.has(i)) continue;
+        selected.push(boxes[i]);
+        // Suppress overlapping boxes
+        for (let j = i + 1; j < boxes.length; j++) {
+            if (suppressed.has(j)) continue;
+            const iou = calculateIoU(boxes[i], boxes[j]);
+            if (iou > iouThreshold) {
+                suppressed.add(j);
+            }
+        }
+    }
+    return selected;
+}
+/**
+ * Calculate Intersection over Union (IoU) between two boxes
+ */
+function calculateIoU(box1, box2) {
+    const x1 = Math.max(box1.x1, box2.x1);
+    const y1 = Math.max(box1.y1, box2.y1);
+    const x2 = Math.min(box1.x2, box2.x2);
+    const y2 = Math.min(box1.y2, box2.y2);
+    const intersectionArea = Math.max(0, x2 - x1) * Math.max(0, y2 - y1);
+    const box1Area = (box1.x2 - box1.x1) * (box1.y2 - box1.y1);
+    const box2Area = (box2.x2 - box2.x1) * (box2.y2 - box2.y1);
+    const unionArea = box1Area + box2Area - intersectionArea;
+    return intersectionArea / unionArea;
+}

src/state.js ADDED Viewed

	@@ -0,0 +1,111 @@

+/**
+ * Application State Management
+ */
+export const appState = {
+    models: {
+        classifier: null,
+        poorGood: null,
+        grader: null,
+        yolo: null
+    },
+    croppedEmbryos: [],
+    embryoResults: [],
+    embryoRemarks: {}, // Store remarks for each embryo by index
+    currentEmbryoIndex: 0,
+    currentImage: null,
+    zoomLevel: 1,
+    finalResult: null
+};
+/**
+ * Update model state
+ */
+export function setModel(modelName, model) {
+    appState.models[modelName] = model;
+}
+/**
+ * Get model by name
+ */
+export function getModel(modelName) {
+    return appState.models[modelName];
+}
+/**
+ * Set cropped embryos
+ */
+export function setCroppedEmbryos(embryos) {
+    appState.croppedEmbryos = embryos;
+    appState.currentEmbryoIndex = 0;
+}
+/**
+ * Get current embryo
+ */
+export function getCurrentEmbryo() {
+    return appState.croppedEmbryos[appState.currentEmbryoIndex];
+}
+/**
+ * Set current image
+ */
+export function setCurrentImage(imageData) {
+    appState.currentImage = imageData;
+}
+/**
+ * Update zoom level
+ */
+export function setZoomLevel(level) {
+    appState.zoomLevel = level;
+}
+/**
+ * Get zoom level
+ */
+export function getZoomLevel() {
+    return appState.zoomLevel;
+}
+/**
+ * Set current embryo index
+ */
+export function setCurrentEmbryoIndex(index) {
+    appState.currentEmbryoIndex = index;
+}
+/**
+ * Get embryo count
+ */
+export function getEmbryoCount() {
+    return appState.croppedEmbryos.length;
+}
+/**
+ * Set remark for an embryo
+ */
+export function setEmbryoRemark(index, remark) {
+    appState.embryoRemarks[index] = remark;
+}
+/**
+ * Get remark for an embryo
+ */
+export function getEmbryoRemark(index) {
+    return appState.embryoRemarks[index] || '';
+}
+/**
+ * Get all remarks
+ */
+export function getAllRemarks() {
+    return appState.embryoRemarks;
+}
+/**
+ * Clear all remarks
+ */
+export function clearAllRemarks() {
+    appState.embryoRemarks = {};
+}

src/ui/cropEditor.js ADDED Viewed

	@@ -0,0 +1,604 @@

+import { appState } from '../state.js';
+import { DETECTION_CONFIG } from '../config.js';
+import { loadImage } from '../utils/imageUtils.js';
+let cropState = {
+    originalBox: null,
+    currentBox: null,
+    isDragging: false,
+    isResizing: false,
+    resizeHandle: null,
+    dragStartX: 0,
+    dragStartY: 0,
+    imageWidth: 0,
+    imageHeight: 0,
+    loadedImage: null,
+    canvas: null,
+    scale: 1
+};
+export function initializeCropEditor() {
+    const editCropBtn = document.getElementById('editCropBtn');
+    const applyCropBtn = document.getElementById('applyCropBtn');
+    const resetCropBtn = document.getElementById('resetCropBtn');
+    const cropControls = document.getElementById('cropControls');
+    if (editCropBtn) {
+        editCropBtn.addEventListener('click', () => {
+            showManualCropEditor();
+        });
+    }
+    if (resetCropBtn) {
+        resetCropBtn.addEventListener('click', () => {
+            resetCropBox();
+        });
+    }
+    if (applyCropBtn) {
+        applyCropBtn.addEventListener('click', () => {
+            applyCropSettings();
+            hideManualCropEditor();
+        });
+    }
+}
+export function showCropEditor(embryoIndex) {
+    const editCropBtn = document.getElementById('editCropBtn');
+    const cropControls = document.getElementById('cropControls');
+    const embryo = appState.croppedEmbryos[embryoIndex];
+    if (!embryo || !embryo.box) {
+        editCropBtn.style.display = 'none';
+        if (cropControls) cropControls.style.display = 'none';
+        return;
+    }
+    // Store original box coordinates
+    cropState.originalBox = { ...embryo.box };
+    cropState.currentBox = { ...embryo.box };
+    editCropBtn.style.display = 'block';
+    // Always hide crop controls when switching embryos
+    if (cropControls) cropControls.style.display = 'none';
+    // Reset the display to show the image, not the canvas
+    const croppedImage = document.getElementById('croppedImage');
+    if (croppedImage) croppedImage.style.display = 'block';
+    // Hide crop canvas if exists
+    const cropCanvas = document.getElementById('manualCropCanvas');
+    if (cropCanvas) cropCanvas.style.display = 'none';
+}
+export function hideCropEditor() {
+    const editCropBtn = document.getElementById('editCropBtn');
+    const cropControls = document.getElementById('cropControls');
+    editCropBtn.style.display = 'none';
+    cropControls.style.display = 'none';
+    hideManualCropEditor();
+}
+function showManualCropEditor() {
+    const cropControls = document.getElementById('cropControls');
+    const editCropBtn = document.getElementById('editCropBtn');
+    cropControls.style.display = 'block';
+    editCropBtn.style.display = 'none';
+    // Show touch hint on touch devices
+    const touchHint = document.querySelector('.touch-hint');
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    if (touchHint && isTouchDevice) {
+        touchHint.style.display = 'block';
+    }
+    // Initialize the interactive crop canvas
+    initializeInteractiveCrop();
+}
+function hideManualCropEditor() {
+    const cropControls = document.getElementById('cropControls');
+    const editCropBtn = document.getElementById('editCropBtn');
+    const cropCanvas = document.getElementById('manualCropCanvas');
+    const croppedImage = document.getElementById('croppedImage');
+    cropControls.style.display = 'none';
+    editCropBtn.style.display = 'block';
+    if (cropCanvas) cropCanvas.style.display = 'none';
+    if (croppedImage) croppedImage.style.display = 'block';
+}
+async function initializeInteractiveCrop() {
+    if (!appState.currentImage || !cropState.originalBox) {
+        console.error('Missing image or box data');
+        return;
+    }
+    const container = document.getElementById('croppedImagePreview');
+    const croppedImage = document.getElementById('croppedImage');
+    if (!container) {
+        console.error('Container not found');
+        return;
+    }
+    // Hide the static image
+    if (croppedImage) croppedImage.style.display = 'none';
+    // Create or get canvas
+    let canvas = document.getElementById('manualCropCanvas');
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+        canvas.id = 'manualCropCanvas';
+        canvas.className = 'manual-crop-canvas';
+        container.appendChild(canvas);
+    }
+    canvas.style.display = 'block';
+    try {
+        // Load the original full image
+        const img = await loadImage(appState.currentImage);
+        // Store the image in cropState for redraws
+        cropState.loadedImage = img;
+        // Set canvas size to fit container while maintaining aspect ratio
+        const containerWidth = Math.max(container.clientWidth - 40, 300);
+        const containerHeight = 400;
+        const scale = Math.min(containerWidth / img.width, containerHeight / img.height, 1);
+        canvas.width = Math.floor(img.width * scale);
+        canvas.height = Math.floor(img.height * scale);
+        cropState.imageWidth = canvas.width;
+        cropState.imageHeight = canvas.height;
+        cropState.scale = scale;
+        console.log('Crop editor initialized:', {
+            imageSize: `${img.width}x${img.height}`,
+            canvasSize: `${canvas.width}x${canvas.height}`,
+            scale: scale,
+            originalBox: cropState.originalBox
+        });
+        // Scale the crop box coordinates
+        cropState.currentBox = {
+            x1: Math.floor(cropState.originalBox.x1 * scale),
+            y1: Math.floor(cropState.originalBox.y1 * scale),
+            x2: Math.floor(cropState.originalBox.x2 * scale),
+            y2: Math.floor(cropState.originalBox.y2 * scale)
+        };
+        console.log('Scaled crop box:', cropState.currentBox);
+        // Draw initial state
+        drawCropInterface(canvas);
+        // Add event listeners
+        setupCanvasEventListeners(canvas);
+    } catch (error) {
+        console.error('Error initializing crop editor:', error);
+    }
+}
+function drawCropInterface(canvas) {
+    if (!canvas || !cropState.loadedImage || !cropState.currentBox) {
+        console.error('Canvas, image, or crop box not available', {
+            canvas: !!canvas,
+            image: !!cropState.loadedImage,
+            box: !!cropState.currentBox
+        });
+        return;
+    }
+    const ctx = canvas.getContext('2d');
+    const img = cropState.loadedImage;
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // Draw the full image
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+    // Ensure crop box is within bounds
+    const box = cropState.currentBox;
+    const x1 = Math.max(0, Math.min(box.x1, canvas.width));
+    const y1 = Math.max(0, Math.min(box.y1, canvas.height));
+    const x2 = Math.max(0, Math.min(box.x2, canvas.width));
+    const y2 = Math.max(0, Math.min(box.y2, canvas.height));
+    // Draw dark overlay outside crop box
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    // Top
+    ctx.fillRect(0, 0, canvas.width, y1);
+    // Bottom
+    ctx.fillRect(0, y2, canvas.width, canvas.height - y2);
+    // Left
+    ctx.fillRect(0, y1, x1, y2 - y1);
+    // Right
+    ctx.fillRect(x2, y1, canvas.width - x2, y2 - y1);
+    // Draw crop box border
+    ctx.strokeStyle = '#00B8D4';
+    ctx.lineWidth = 3;
+    ctx.strokeRect(
+        x1,
+        y1,
+        x2 - x1,
+        y2 - y1
+    );
+    // Determine if touch device (larger handles for touch)
+    const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+    const handleSize = isTouchDevice ? 20 : 12;
+    // Draw resize handles with white border for better visibility
+    ctx.fillStyle = '#00B8D4';
+    ctx.strokeStyle = 'white';
+    ctx.lineWidth = 2;
+    // Corner handles
+    const corners = [
+        { x: x1, y: y1 },
+        { x: x2, y: y1 },
+        { x: x1, y: y2 },
+        { x: x2, y: y2 }
+    ];
+    corners.forEach(corner => {
+        ctx.fillRect(corner.x - handleSize / 2, corner.y - handleSize / 2, handleSize, handleSize);
+        ctx.strokeRect(corner.x - handleSize / 2, corner.y - handleSize / 2, handleSize, handleSize);
+    });
+    // Edge handles
+    const edges = [
+        { x: (x1 + x2) / 2, y: y1 },
+        { x: (x1 + x2) / 2, y: y2 },
+        { x: x1, y: (y1 + y2) / 2 },
+        { x: x2, y: (y1 + y2) / 2 }
+    ];
+    edges.forEach(edge => {
+        ctx.fillRect(edge.x - handleSize / 2, edge.y - handleSize / 2, handleSize, handleSize);
+        ctx.strokeRect(edge.x - handleSize / 2, edge.y - handleSize / 2, handleSize, handleSize);
+    });
+    // Draw center move icon (larger for touch)
+    const centerX = (x1 + x2) / 2;
+    const centerY = (y1 + y2) / 2;
+    const centerRadius = isTouchDevice ? 20 : 15;
+    ctx.fillStyle = 'rgba(0, 184, 212, 0.3)';
+    ctx.beginPath();
+    ctx.arc(centerX, centerY, centerRadius, 0, Math.PI * 2);
+    ctx.fill();
+    // Draw crosshair in center
+    ctx.strokeStyle = 'white';
+    ctx.lineWidth = 2;
+    const crosshairSize = isTouchDevice ? 10 : 8;
+    ctx.beginPath();
+    ctx.moveTo(centerX - crosshairSize, centerY);
+    ctx.lineTo(centerX + crosshairSize, centerY);
+    ctx.moveTo(centerX, centerY - crosshairSize);
+    ctx.lineTo(centerX, centerY + crosshairSize);
+    ctx.stroke();
+}
+function setupCanvasEventListeners(canvas) {
+    // Store canvas reference
+    cropState.canvas = canvas;
+    // Mouse events
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('mouseleave', handleMouseUp);
+    // Touch events for mobile/tablet support
+    canvas.addEventListener('touchstart', handleTouchStart, { passive: false });
+    canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
+    canvas.addEventListener('touchend', handleTouchEnd, { passive: false });
+    canvas.addEventListener('touchcancel', handleTouchEnd, { passive: false });
+}
+function handleMouseDown(e) {
+    const canvas = e.target;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    // Check if clicking on a resize handle
+    const handle = getResizeHandle(x, y);
+    if (handle) {
+        cropState.isResizing = true;
+        cropState.resizeHandle = handle;
+        cropState.dragStartX = x;
+        cropState.dragStartY = y;
+        e.preventDefault();
+        return;
+    }
+    // Check if clicking inside crop box for dragging
+    if (isInsideCropBox(x, y)) {
+        cropState.isDragging = true;
+        cropState.dragStartX = x;
+        cropState.dragStartY = y;
+        e.preventDefault();
+    }
+}
+function handleMouseMove(e) {
+    const canvas = e.target;
+    const rect = canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    // Update cursor
+    if (!cropState.isDragging && !cropState.isResizing) {
+        const handle = getResizeHandle(x, y);
+        if (handle) {
+            canvas.style.cursor = getCursorStyle(handle);
+        } else if (isInsideCropBox(x, y)) {
+            canvas.style.cursor = 'move';
+        } else {
+            canvas.style.cursor = 'default';
+        }
+    }
+    if (cropState.isResizing) {
+        handleResize(x, y);
+        drawCropInterface(canvas);
+        e.preventDefault();
+    } else if (cropState.isDragging) {
+        handleDrag(x, y);
+        drawCropInterface(canvas);
+        e.preventDefault();
+    }
+}
+function handleMouseUp(e) {
+    cropState.isDragging = false;
+    cropState.isResizing = false;
+    cropState.resizeHandle = null;
+}
+// Touch event handlers
+function handleTouchStart(e) {
+    // Only handle single touch
+    if (e.touches.length !== 1) return;
+    e.preventDefault(); // Prevent scrolling
+    const canvas = e.target;
+    const rect = canvas.getBoundingClientRect();
+    const touch = e.touches[0];
+    const x = touch.clientX - rect.left;
+    const y = touch.clientY - rect.top;
+    // Check if touching a resize handle (increased threshold for touch)
+    const handle = getResizeHandle(x, y, true);
+    if (handle) {
+        cropState.isResizing = true;
+        cropState.resizeHandle = handle;
+        cropState.dragStartX = x;
+        cropState.dragStartY = y;
+        return;
+    }
+    // Check if touching inside crop box for dragging
+    if (isInsideCropBox(x, y)) {
+        cropState.isDragging = true;
+        cropState.dragStartX = x;
+        cropState.dragStartY = y;
+    }
+}
+function handleTouchMove(e) {
+    // Only handle single touch
+    if (e.touches.length !== 1) return;
+    // Prevent scrolling while manipulating crop box
+    if (cropState.isDragging || cropState.isResizing) {
+        e.preventDefault();
+    }
+    const canvas = e.target;
+    const rect = canvas.getBoundingClientRect();
+    const touch = e.touches[0];
+    const x = touch.clientX - rect.left;
+    const y = touch.clientY - rect.top;
+    if (cropState.isResizing) {
+        handleResize(x, y);
+        drawCropInterface(canvas);
+    } else if (cropState.isDragging) {
+        handleDrag(x, y);
+        drawCropInterface(canvas);
+    }
+}
+function handleTouchEnd(e) {
+    e.preventDefault();
+    cropState.isDragging = false;
+    cropState.isResizing = false;
+    cropState.resizeHandle = null;
+}
+function getResizeHandle(x, y, isTouch = false) {
+    // Larger threshold for touch screens
+    const threshold = isTouch ? 25 : 15;
+    // Corner handles
+    if (Math.abs(x - cropState.currentBox.x1) < threshold && Math.abs(y - cropState.currentBox.y1) < threshold) return 'nw';
+    if (Math.abs(x - cropState.currentBox.x2) < threshold && Math.abs(y - cropState.currentBox.y1) < threshold) return 'ne';
+    if (Math.abs(x - cropState.currentBox.x1) < threshold && Math.abs(y - cropState.currentBox.y2) < threshold) return 'sw';
+    if (Math.abs(x - cropState.currentBox.x2) < threshold && Math.abs(y - cropState.currentBox.y2) < threshold) return 'se';
+    // Edge handles
+    const centerX = (cropState.currentBox.x1 + cropState.currentBox.x2) / 2;
+    const centerY = (cropState.currentBox.y1 + cropState.currentBox.y2) / 2;
+    if (Math.abs(x - centerX) < threshold && Math.abs(y - cropState.currentBox.y1) < threshold) return 'n';
+    if (Math.abs(x - centerX) < threshold && Math.abs(y - cropState.currentBox.y2) < threshold) return 's';
+    if (Math.abs(x - cropState.currentBox.x1) < threshold && Math.abs(y - centerY) < threshold) return 'w';
+    if (Math.abs(x - cropState.currentBox.x2) < threshold && Math.abs(y - centerY) < threshold) return 'e';
+    return null;
+}
+function getCursorStyle(handle) {
+    const cursors = {
+        'nw': 'nw-resize',
+        'ne': 'ne-resize',
+        'sw': 'sw-resize',
+        'se': 'se-resize',
+        'n': 'n-resize',
+        's': 's-resize',
+        'w': 'w-resize',
+        'e': 'e-resize'
+    };
+    return cursors[handle] || 'default';
+}
+function isInsideCropBox(x, y) {
+    return x >= cropState.currentBox.x1 && x <= cropState.currentBox.x2 &&
+           y >= cropState.currentBox.y1 && y <= cropState.currentBox.y2;
+}
+function handleResize(x, y) {
+    const minSize = 50;
+    switch (cropState.resizeHandle) {
+        case 'nw':
+            cropState.currentBox.x1 = Math.max(0, Math.min(x, cropState.currentBox.x2 - minSize));
+            cropState.currentBox.y1 = Math.max(0, Math.min(y, cropState.currentBox.y2 - minSize));
+            break;
+        case 'ne':
+            cropState.currentBox.x2 = Math.min(cropState.imageWidth, Math.max(x, cropState.currentBox.x1 + minSize));
+            cropState.currentBox.y1 = Math.max(0, Math.min(y, cropState.currentBox.y2 - minSize));
+            break;
+        case 'sw':
+            cropState.currentBox.x1 = Math.max(0, Math.min(x, cropState.currentBox.x2 - minSize));
+            cropState.currentBox.y2 = Math.min(cropState.imageHeight, Math.max(y, cropState.currentBox.y1 + minSize));
+            break;
+        case 'se':
+            cropState.currentBox.x2 = Math.min(cropState.imageWidth, Math.max(x, cropState.currentBox.x1 + minSize));
+            cropState.currentBox.y2 = Math.min(cropState.imageHeight, Math.max(y, cropState.currentBox.y1 + minSize));
+            break;
+        case 'n':
+            cropState.currentBox.y1 = Math.max(0, Math.min(y, cropState.currentBox.y2 - minSize));
+            break;
+        case 's':
+            cropState.currentBox.y2 = Math.min(cropState.imageHeight, Math.max(y, cropState.currentBox.y1 + minSize));
+            break;
+        case 'w':
+            cropState.currentBox.x1 = Math.max(0, Math.min(x, cropState.currentBox.x2 - minSize));
+            break;
+        case 'e':
+            cropState.currentBox.x2 = Math.min(cropState.imageWidth, Math.max(x, cropState.currentBox.x1 + minSize));
+            break;
+    }
+}
+function handleDrag(x, y) {
+    const dx = x - cropState.dragStartX;
+    const dy = y - cropState.dragStartY;
+    const boxWidth = cropState.currentBox.x2 - cropState.currentBox.x1;
+    const boxHeight = cropState.currentBox.y2 - cropState.currentBox.y1;
+    let newX1 = cropState.currentBox.x1 + dx;
+    let newY1 = cropState.currentBox.y1 + dy;
+    // Clamp to image bounds
+    if (newX1 < 0) newX1 = 0;
+    if (newY1 < 0) newY1 = 0;
+    if (newX1 + boxWidth > cropState.imageWidth) newX1 = cropState.imageWidth - boxWidth;
+    if (newY1 + boxHeight > cropState.imageHeight) newY1 = cropState.imageHeight - boxHeight;
+    cropState.currentBox.x1 = newX1;
+    cropState.currentBox.y1 = newY1;
+    cropState.currentBox.x2 = newX1 + boxWidth;
+    cropState.currentBox.y2 = newY1 + boxHeight;
+    cropState.dragStartX = x;
+    cropState.dragStartY = y;
+}
+function resetCropBox() {
+    if (!cropState.originalBox || !cropState.scale) return;
+    const canvas = document.getElementById('manualCropCanvas');
+    if (!canvas) return;
+    // Reset to original box with current scale
+    cropState.currentBox = {
+        x1: cropState.originalBox.x1 * cropState.scale,
+        y1: cropState.originalBox.y1 * cropState.scale,
+        x2: cropState.originalBox.x2 * cropState.scale,
+        y2: cropState.originalBox.y2 * cropState.scale
+    };
+    drawCropInterface(canvas);
+}
+async function applyCropSettings() {
+    if (appState.currentEmbryoIndex === undefined || !cropState.currentBox) return;
+    const embryo = appState.croppedEmbryos[appState.currentEmbryoIndex];
+    if (!embryo) return;
+    // Load original image
+    const img = await loadImage(appState.currentImage);
+    // Convert canvas coordinates back to image coordinates
+    const scaleX = img.width / cropState.imageWidth;
+    const scaleY = img.height / cropState.imageHeight;
+    const x1 = cropState.currentBox.x1 * scaleX;
+    const y1 = cropState.currentBox.y1 * scaleY;
+    const x2 = cropState.currentBox.x2 * scaleX;
+    const y2 = cropState.currentBox.y2 * scaleY;
+    // Crop the image
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    canvas.width = x2 - x1;
+    canvas.height = y2 - y1;
+    ctx.drawImage(img, x1, y1, x2 - x1, y2 - y1, 0, 0, canvas.width, canvas.height);
+    const croppedImageData = canvas.toDataURL();
+    // Update the embryo's cropped image
+    embryo.imageData = croppedImageData;
+    // Update the box coordinates
+    embryo.box = {
+        x1: x1,
+        y1: y1,
+        x2: x2,
+        y2: y2
+    };
+    // Update display
+    const croppedImage = document.getElementById('croppedImage');
+    if (croppedImage) {
+        croppedImage.src = croppedImageData;
+        croppedImage.style.display = 'block';
+    }
+    // Update thumbnail
+    updateThumbnail(appState.currentEmbryoIndex, croppedImageData);
+}
+function updateThumbnail(index, imageData) {
+    const thumbnail = document.querySelector(`[data-embryo-index="${index}"] img`);
+    if (thumbnail) {
+        thumbnail.src = imageData;
+    }
+}

src/ui/eventHandlers.js ADDED Viewed

	@@ -0,0 +1,78 @@

+/**
+ * Event Handlers - Setup and manage UI event listeners
+ */
+import { displayMainImage } from './imageDisplay.js';
+import { classifyImage, navigateEmbryo } from './workflow.js';
+import { setupZoomListeners } from './zoom.js';
+import { readFileAsDataURL } from '../utils/imageUtils.js';
+import { appState } from '../state.js';
+/**
+ * Setup all UI event listeners
+ */
+export function setupEventListeners() {
+    setupZoomListeners();
+    setupImageUploadListeners();
+    setupWorkflowListeners();
+}
+/**
+ * Setup image upload listeners
+ */
+function setupImageUploadListeners() {
+    // Main workflow image upload
+    const imageInput = document.getElementById('imageInput');
+    if (imageInput) {
+        imageInput.addEventListener('change', (e) => handleImageUpload(e));
+    }
+}
+/**
+ * Setup workflow listeners
+ */
+function setupWorkflowListeners() {
+    // No longer needed - inline detection handles its own interactions
+}
+/**
+ * Handle image upload - auto-classify
+ */
+async function handleImageUpload(event) {
+    const file = event.target.files[0];
+    if (!file) return;
+    // Validate file type
+    const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/bmp'];
+    if (!validTypes.includes(file.type.toLowerCase())) {
+        import('./toast.js').then(module => {
+            module.showToast('Please upload a valid image file (JPEG, PNG, WebP, or BMP)', 'error');
+        });
+        event.target.value = '';
+        return;
+    }
+    // Validate file size (max 10MB)
+    const maxSize = 10 * 1024 * 1024; // 10MB in bytes
+    if (file.size > maxSize) {
+        import('./toast.js').then(module => {
+            module.showToast('Image file is too large. Please upload an image smaller than 10MB', 'error');
+        });
+        event.target.value = '';
+        return;
+    }
+    try {
+        const imageData = await readFileAsDataURL(file);
+        await displayMainImage(imageData);
+        // Auto-trigger classification
+        await classifyImage(imageData);
+    } catch (error) {
+        console.error('Image upload error:', error);
+        import('./toast.js').then(module => {
+            module.showToast(`Failed to load image: ${error.message}`, 'error');
+        });
+        event.target.value = '';
+    }
+}

src/ui/imageDisplay.js ADDED Viewed

	@@ -0,0 +1,75 @@

+/**
+ * Image Display - Handle image preview and display
+ */
+import { setCurrentImage } from '../state.js';
+/**
+ * Display image in main preview
+ */
+export async function displayMainImage(imageData) {
+    const preview = document.getElementById('mainImagePreview');
+    const img = document.getElementById('mainImage');
+    const placeholder = preview.querySelector('.placeholder');
+    if (!img || !placeholder) return;
+    img.src = imageData;
+    img.style.display = 'block';
+    placeholder.style.display = 'none';
+    setCurrentImage(imageData);
+    // Reset zoom level and transform
+    import('../state.js').then(module => {
+        module.setZoomLevel(1);
+    });
+    img.style.transform = 'scale(1)';
+    // Update zoom display
+    const zoomDisplay = document.getElementById('zoomLevel');
+    if (zoomDisplay) {
+        zoomDisplay.textContent = 'Zoom: 100%';
+    }
+    // Enable zoom controls
+    const zoomIn = document.getElementById('zoomIn');
+    const zoomOut = document.getElementById('zoomOut');
+    const zoomReset = document.getElementById('zoomReset');
+    if (zoomIn) zoomIn.disabled = false;
+    if (zoomOut) zoomOut.disabled = false;
+    if (zoomReset) zoomReset.disabled = false;
+}
+/**
+ * Display image in quick preview
+ */
+export function displayQuickImage(imageData) {
+    const preview = document.getElementById('quickImagePreview');
+    const img = document.getElementById('quickImage');
+    const placeholder = preview.querySelector('.placeholder');
+    if (!img || !placeholder) return;
+    img.src = imageData;
+    img.style.display = 'block';
+    placeholder.style.display = 'none';
+}
+/**
+ * Display cropped embryo
+ */
+export function displayCroppedEmbryo(index, detection, totalCount) {
+    const img = document.getElementById('croppedImage');
+    const counter = document.getElementById('embryoCounter');
+    if (img) {
+        img.src = detection.imageData;
+        img.style.display = 'block';
+    }
+    if (counter) {
+        counter.textContent = `Embryo ${index + 1} of ${totalCount}`;
+    }
+}

src/ui/inlineDetection.js ADDED Viewed

	@@ -0,0 +1,766 @@

+/**
+ * Inline Detection View - Show all detected embryos on the main image
+ */
+import { appState, setCurrentEmbryoIndex, getEmbryoRemark } from '../state.js';
+import { loadImage } from '../utils/imageUtils.js';
+import { showToast } from './toast.js';
+import { showConfirmModal } from './modal.js';
+let canvas, ctx;
+let selectedEmbryoIndex = null;
+let isDragging = false;
+let dragType = null; // 'move', 'nw', 'ne', 'sw', 'se', 'n', 's', 'e', 'w'
+let dragStart = { x: 0, y: 0 };
+let originalBox = null;
+let imageElement = null;
+let scaleFactor = 1;
+let offsetX = 0;
+let offsetY = 0;
+const HANDLE_SIZE = 10;
+const COLORS = [
+    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
+    '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B739', '#52B788'
+];
+/**
+ * Initialize the inline detection canvas
+ */
+export async function initializeInlineDetection(imageData, detections) {
+    canvas = document.getElementById('detectionCanvas');
+    if (!canvas) {
+        console.error('Detection canvas not found');
+        showToast('Failed to initialize detection view', 'error');
+        return;
+    }
+    ctx = canvas.getContext('2d');
+    if (!ctx) {
+        console.error('Failed to get canvas context');
+        showToast('Canvas not supported', 'error');
+        return;
+    }
+    // Load the original image
+    imageElement = await loadImage(imageData);
+    // Set canvas size to match image
+    canvas.width = imageElement.width;
+    canvas.height = imageElement.height;
+    // Calculate scale factor for display
+    const container = canvas.parentElement;
+    if (!container) {
+        console.error('Canvas container not found');
+        return;
+    }
+    const maxWidth = container.clientWidth - 40;
+    const maxHeight = 600;
+    scaleFactor = Math.min(
+        maxWidth / imageElement.width,
+        maxHeight / imageElement.height,
+        1
+    );
+    canvas.style.width = `${imageElement.width * scaleFactor}px`;
+    canvas.style.height = `${imageElement.height * scaleFactor}px`;
+    // Draw initial view
+    drawDetections();
+    // Add event listeners
+    canvas.addEventListener('mousedown', handleMouseDown);
+    canvas.addEventListener('mousemove', handleMouseMove);
+    canvas.addEventListener('mouseup', handleMouseUp);
+    canvas.addEventListener('mouseleave', handleMouseUp);
+    // Touch events for mobile
+    canvas.addEventListener('touchstart', handleTouchStart);
+    canvas.addEventListener('touchmove', handleTouchMove);
+    canvas.addEventListener('touchend', handleTouchEnd);
+    // Update embryo list
+    updateEmbryoList(detections);
+    // Setup detection info with manual add button
+    const info = document.getElementById('detectionInfo');
+    if (info) {
+        info.innerHTML = `
+            <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>
+        `;
+    }
+    // Setup manual add button
+    setupManualAddButton();
+}
+/**
+ * Draw all detections on the canvas
+ */
+function drawDetections() {
+    if (!imageElement || !ctx) return;
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    // Draw the original image
+    ctx.drawImage(imageElement, 0, 0, canvas.width, canvas.height);
+    // Draw all bounding boxes
+    appState.croppedEmbryos.forEach((detection, index) => {
+        const isSelected = index === selectedEmbryoIndex;
+        const color = COLORS[index % COLORS.length];
+        drawBoundingBox(detection.box, color, isSelected, index);
+    });
+}
+/**
+ * Draw a single bounding box
+ */
+function drawBoundingBox(box, color, isSelected, index) {
+    const lineWidth = isSelected ? 3 : 2;
+    const alpha = isSelected ? 1 : 0.7;
+    // Draw box
+    ctx.strokeStyle = color;
+    ctx.lineWidth = lineWidth;
+    ctx.globalAlpha = alpha;
+    ctx.strokeRect(box.x1, box.y1, box.x2 - box.x1, box.y2 - box.y1);
+    // Draw label background
+    const label = `Embryo ${index + 1}`;
+    ctx.font = '14px Arial';
+    const textWidth = ctx.measureText(label).width;
+    const labelHeight = 20;
+    ctx.fillStyle = color;
+    ctx.globalAlpha = 0.9;
+    ctx.fillRect(box.x1, box.y1 - labelHeight, textWidth + 10, labelHeight);
+    // Draw label text
+    ctx.fillStyle = 'white';
+    ctx.globalAlpha = 1;
+    ctx.fillText(label, box.x1 + 5, box.y1 - 5);
+    // Draw resize handles if selected
+    if (isSelected) {
+        drawResizeHandles(box, color);
+    }
+    ctx.globalAlpha = 1;
+}
+/**
+ * Draw resize handles on the selected box
+ */
+function drawResizeHandles(box, color) {
+    const handles = [
+        { x: box.x1, y: box.y1, type: 'nw' },
+        { x: box.x2, y: box.y1, type: 'ne' },
+        { x: box.x1, y: box.y2, type: 'sw' },
+        { x: box.x2, y: box.y2, type: 'se' },
+        { x: (box.x1 + box.x2) / 2, y: box.y1, type: 'n' },
+        { x: (box.x1 + box.x2) / 2, y: box.y2, type: 's' },
+        { x: box.x1, y: (box.y1 + box.y2) / 2, type: 'w' },
+        { x: box.x2, y: (box.y1 + box.y2) / 2, type: 'e' }
+    ];
+    ctx.fillStyle = color;
+    handles.forEach(handle => {
+        ctx.fillRect(
+            handle.x - HANDLE_SIZE / 2,
+            handle.y - HANDLE_SIZE / 2,
+            HANDLE_SIZE,
+            HANDLE_SIZE
+        );
+    });
+}
+/**
+ * Get mouse position relative to canvas
+ */
+function getMousePos(e) {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+        x: (e.clientX - rect.left) * scaleX,
+        y: (e.clientY - rect.top) * scaleY
+    };
+}
+/**
+ * Get handle at position
+ */
+function getHandleAtPosition(box, x, y) {
+    const handles = [
+        { x: box.x1, y: box.y1, type: 'nw' },
+        { x: box.x2, y: box.y1, type: 'ne' },
+        { x: box.x1, y: box.y2, type: 'sw' },
+        { x: box.x2, y: box.y2, type: 'se' },
+        { x: (box.x1 + box.x2) / 2, y: box.y1, type: 'n' },
+        { x: (box.x1 + box.x2) / 2, y: box.y2, type: 's' },
+        { x: box.x1, y: (box.y1 + box.y2) / 2, type: 'w' },
+        { x: box.x2, y: (box.y1 + box.y2) / 2, type: 'e' }
+    ];
+    for (const handle of handles) {
+        const dist = Math.sqrt(
+            Math.pow(x - handle.x, 2) + Math.pow(y - handle.y, 2)
+        );
+        if (dist < HANDLE_SIZE) {
+            return handle.type;
+        }
+    }
+    return null;
+}
+/**
+ * Check if point is inside a box
+ */
+function isPointInBox(box, x, y) {
+    return x >= box.x1 && x <= box.x2 && y >= box.y1 && y <= box.y2;
+}
+/**
+ * Handle mouse down
+ */
+function handleMouseDown(e) {
+    const pos = getMousePos(e);
+    // If in manual draw mode, start drawing new box
+    if (isDrawingNewBox) {
+        newBoxStart = pos;
+        return;
+    }
+    // Check if clicking on selected box handles first
+    if (selectedEmbryoIndex !== null) {
+        const box = appState.croppedEmbryos[selectedEmbryoIndex].box;
+        const handle = getHandleAtPosition(box, pos.x, pos.y);
+        if (handle) {
+            isDragging = true;
+            dragType = handle;
+            dragStart = pos;
+            originalBox = { ...box };
+            return;
+        }
+        // Check if clicking inside selected box to move it
+        if (isPointInBox(box, pos.x, pos.y)) {
+            isDragging = true;
+            dragType = 'move';
+            dragStart = pos;
+            originalBox = { ...box };
+            return;
+        }
+    }
+    // Check if clicking on any box to select it
+    for (let i = appState.croppedEmbryos.length - 1; i >= 0; i--) {
+        const box = appState.croppedEmbryos[i].box;
+        if (isPointInBox(box, pos.x, pos.y)) {
+            selectEmbryo(i);
+            return;
+        }
+    }
+    // Clicked outside all boxes - deselect
+    selectedEmbryoIndex = null;
+    drawDetections();
+    updateEmbryoList(appState.croppedEmbryos);
+    // Reset detection info with button
+    const info = document.getElementById('detectionInfo');
+    if (info) {
+        info.innerHTML = `
+            <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>
+        `;
+        setupManualAddButton();
+    }
+}
+/**
+ * Handle mouse move
+ */
+function handleMouseMove(e) {
+    const pos = getMousePos(e);
+    // If drawing new box, show preview
+    if (isDrawingNewBox && newBoxStart) {
+        drawDetections();
+        // Draw preview box
+        ctx.strokeStyle = '#00B8D4';
+        ctx.lineWidth = 3;
+        ctx.setLineDash([5, 5]);
+        ctx.strokeRect(
+            newBoxStart.x,
+            newBoxStart.y,
+            pos.x - newBoxStart.x,
+            pos.y - newBoxStart.y
+        );
+        ctx.setLineDash([]);
+        return;
+    }
+    if (!isDragging || selectedEmbryoIndex === null) {
+        // Update cursor based on hover
+        updateCursor(pos);
+        return;
+    }
+    const dx = pos.x - dragStart.x;
+    const dy = pos.y - dragStart.y;
+    const box = appState.croppedEmbryos[selectedEmbryoIndex].box;
+    if (dragType === 'move') {
+        // Move the entire box
+        box.x1 = Math.max(0, Math.min(originalBox.x1 + dx, canvas.width - (originalBox.x2 - originalBox.x1)));
+        box.y1 = Math.max(0, Math.min(originalBox.y1 + dy, canvas.height - (originalBox.y2 - originalBox.y1)));
+        box.x2 = box.x1 + (originalBox.x2 - originalBox.x1);
+        box.y2 = box.y1 + (originalBox.y2 - originalBox.y1);
+    } else {
+        // Resize the box based on handle
+        resizeBox(box, originalBox, dx, dy, dragType);
+    }
+    drawDetections();
+    updateEmbryoCrop(selectedEmbryoIndex);
+}
+/**
+ * Resize box based on drag type
+ */
+function resizeBox(box, original, dx, dy, type) {
+    const minSize = 30;
+    switch (type) {
+        case 'nw':
+            box.x1 = Math.max(0, Math.min(original.x1 + dx, original.x2 - minSize));
+            box.y1 = Math.max(0, Math.min(original.y1 + dy, original.y2 - minSize));
+            break;
+        case 'ne':
+            box.x2 = Math.min(canvas.width, Math.max(original.x2 + dx, original.x1 + minSize));
+            box.y1 = Math.max(0, Math.min(original.y1 + dy, original.y2 - minSize));
+            break;
+        case 'sw':
+            box.x1 = Math.max(0, Math.min(original.x1 + dx, original.x2 - minSize));
+            box.y2 = Math.min(canvas.height, Math.max(original.y2 + dy, original.y1 + minSize));
+            break;
+        case 'se':
+            box.x2 = Math.min(canvas.width, Math.max(original.x2 + dx, original.x1 + minSize));
+            box.y2 = Math.min(canvas.height, Math.max(original.y2 + dy, original.y1 + minSize));
+            break;
+        case 'n':
+            box.y1 = Math.max(0, Math.min(original.y1 + dy, original.y2 - minSize));
+            break;
+        case 's':
+            box.y2 = Math.min(canvas.height, Math.max(original.y2 + dy, original.y1 + minSize));
+            break;
+        case 'w':
+            box.x1 = Math.max(0, Math.min(original.x1 + dx, original.x2 - minSize));
+            break;
+        case 'e':
+            box.x2 = Math.min(canvas.width, Math.max(original.x2 + dx, original.x1 + minSize));
+            break;
+    }
+}
+/**
+ * Update cursor based on position
+ */
+function updateCursor(pos) {
+    // If in drawing mode, show crosshair cursor
+    if (isDrawingNewBox) {
+        canvas.style.cursor = 'crosshair';
+        return;
+    }
+    if (selectedEmbryoIndex !== null) {
+        const box = appState.croppedEmbryos[selectedEmbryoIndex].box;
+        const handle = getHandleAtPosition(box, pos.x, pos.y);
+        if (handle) {
+            const cursors = {
+                'nw': 'nw-resize', 'ne': 'ne-resize',
+                'sw': 'sw-resize', 'se': 'se-resize',
+                'n': 'n-resize', 's': 's-resize',
+                'w': 'w-resize', 'e': 'e-resize'
+            };
+            canvas.style.cursor = cursors[handle];
+            return;
+        }
+        if (isPointInBox(box, pos.x, pos.y)) {
+            canvas.style.cursor = 'move';
+            return;
+        }
+    }
+    // Check if over any box
+    for (const detection of appState.croppedEmbryos) {
+        if (isPointInBox(detection.box, pos.x, pos.y)) {
+            canvas.style.cursor = 'pointer';
+            return;
+        }
+    }
+    canvas.style.cursor = 'default';
+}
+/**
+ * Handle mouse up
+ */
+function handleMouseUp(e) {
+    // If finishing drawing new box
+    if (isDrawingNewBox && newBoxStart) {
+        const pos = getMousePos(e);
+        const newBox = {
+            x1: newBoxStart.x,
+            y1: newBoxStart.y,
+            x2: pos.x,
+            y2: pos.y
+        };
+        completeManualCrop(newBox);
+        return;
+    }
+    if (isDragging && selectedEmbryoIndex !== null) {
+        // Finalize the crop update
+        updateEmbryoCrop(selectedEmbryoIndex);
+        showToast('Crop area updated', 'success');
+    }
+    isDragging = false;
+    dragType = null;
+}
+/**
+ * Handle touch events
+ */
+function handleTouchStart(e) {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const mouseEvent = new MouseEvent('mousedown', {
+        clientX: touch.clientX,
+        clientY: touch.clientY
+    });
+    canvas.dispatchEvent(mouseEvent);
+}
+function handleTouchMove(e) {
+    e.preventDefault();
+    const touch = e.touches[0];
+    const mouseEvent = new MouseEvent('mousemove', {
+        clientX: touch.clientX,
+        clientY: touch.clientY
+    });
+    canvas.dispatchEvent(mouseEvent);
+}
+function handleTouchEnd(e) {
+    e.preventDefault();
+    // Get the last touch position or use changedTouches
+    const touch = e.changedTouches[0];
+    const mouseEvent = new MouseEvent('mouseup', {
+        clientX: touch.clientX,
+        clientY: touch.clientY
+    });
+    canvas.dispatchEvent(mouseEvent);
+}
+/**
+ * Select an embryo
+ */
+function selectEmbryo(index) {
+    selectedEmbryoIndex = index;
+    setCurrentEmbryoIndex(index);
+    drawDetections();
+    updateEmbryoList(appState.croppedEmbryos);
+    const info = document.getElementById('detectionInfo');
+    if (info) {
+        info.innerHTML = `
+            <p><strong>Embryo ${index + 1} selected</strong> - Drag to move, drag handles to resize</p>
+            <button class="btn btn-secondary" id="addManualEmbryoBtn" style="margin-top: 10px;">
+                + Add Embryo Manually
+            </button>
+        `;
+        setupManualAddButton();
+    }
+}
+/**
+ * Update embryo crop after modification
+ */
+async function updateEmbryoCrop(index) {
+    const detection = appState.croppedEmbryos[index];
+    const box = detection.box;
+    // Create a temporary canvas to crop the image
+    const tempCanvas = document.createElement('canvas');
+    const tempCtx = tempCanvas.getContext('2d');
+    const width = box.x2 - box.x1;
+    const height = box.y2 - box.y1;
+    tempCanvas.width = width;
+    tempCanvas.height = height;
+    // Draw the cropped portion
+    tempCtx.drawImage(
+        imageElement,
+        box.x1, box.y1, width, height,
+        0, 0, width, height
+    );
+    // Update the detection's imageData
+    detection.imageData = tempCanvas.toDataURL('image/png');
+    // Update the list
+    updateEmbryoList(appState.croppedEmbryos);
+}
+/**
+ * Update the embryo list in the sidebar
+ */
+function updateEmbryoList(detections) {
+    const listContainer = document.getElementById('embryoList');
+    if (!listContainer) return;
+    listContainer.innerHTML = '';
+    detections.forEach((detection, index) => {
+        const card = document.createElement('div');
+        card.className = 'embryo-card';
+        if (index === selectedEmbryoIndex) {
+            card.classList.add('selected');
+        }
+        const hasRemark = getEmbryoRemark(index).trim().length > 0;
+        card.innerHTML = `
+            <div class="embryo-card-thumbnail">
+                <img src="${detection.imageData}" alt="Embryo ${index + 1}">
+            </div>
+            <div class="embryo-card-info">
+                <div class="embryo-card-title">
+                    Embryo ${index + 1}
+                </div>
+                <div class="embryo-card-confidence">
+                    Confidence: ${(detection.confidence * 100).toFixed(1)}%
+                </div>
+            </div>
+            <div class="embryo-card-actions">
+                <button class="embryo-card-btn discard" data-index="${index}">
+                    Discard
+                </button>
+            </div>
+        `;
+        // Click to select
+        card.addEventListener('click', (e) => {
+            if (!e.target.classList.contains('embryo-card-btn')) {
+                selectEmbryo(index);
+            }
+        });
+        // Discard button
+        const discardBtn = card.querySelector('.discard');
+        discardBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            discardEmbryo(index);
+        });
+        listContainer.appendChild(card);
+    });
+}
+/**
+ * Discard an embryo
+ */
+async function discardEmbryo(index) {
+    if (appState.croppedEmbryos.length <= 1) {
+        showToast('Cannot discard the last embryo', 'warning');
+        return;
+    }
+    const confirmed = await showConfirmModal(
+        `Are you sure you want to discard Embryo ${index + 1}?`,
+        'Discard Embryo'
+    );
+    if (!confirmed) {
+        return;
+    }
+    // Remove embryo
+    appState.croppedEmbryos.splice(index, 1);
+    // Adjust selected index
+    if (selectedEmbryoIndex === index) {
+        selectedEmbryoIndex = Math.max(0, Math.min(selectedEmbryoIndex, appState.croppedEmbryos.length - 1));
+    } else if (selectedEmbryoIndex > index) {
+        selectedEmbryoIndex--;
+    }
+    // Redraw
+    drawDetections();
+    updateEmbryoList(appState.croppedEmbryos);
+    showToast('Embryo discarded', 'success');
+}
+/**
+ * Setup manual add embryo button
+ */
+function setupManualAddButton() {
+    const addBtn = document.getElementById('addManualEmbryoBtn');
+    if (!addBtn) return;
+    addBtn.addEventListener('click', startManualCrop);
+}
+let isDrawingNewBox = false;
+let newBoxStart = null;
+/**
+ * Start manual crop mode
+ */
+function startManualCrop() {
+    isDrawingNewBox = true;
+    selectedEmbryoIndex = null;
+    const detectionInfo = document.getElementById('detectionInfo');
+    if (detectionInfo) {
+        detectionInfo.innerHTML = `
+            <p style="color: var(--primary-color); font-weight: 600;">Draw a box around the embryo</p>
+            <p style="font-size: 0.9em;">Click and drag on the image to create a new bounding box</p>
+            <button class="btn btn-secondary" id="cancelManualAdd" style="margin-top: 10px;">Cancel</button>
+        `;
+        const cancelBtn = document.getElementById('cancelManualAdd');
+        if (cancelBtn) {
+            cancelBtn.addEventListener('click', cancelManualCrop);
+        }
+    }
+    drawDetections();
+    showToast('Draw a box around the embryo', 'info');
+}
+/**
+ * Cancel manual crop mode
+ */
+function cancelManualCrop() {
+    isDrawingNewBox = false;
+    newBoxStart = null;
+    const detectionInfo = document.getElementById('detectionInfo');
+    if (detectionInfo) {
+        detectionInfo.innerHTML = `
+            <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>
+        `;
+        setupManualAddButton();
+    }
+    drawDetections();
+}
+/**
+ * Complete manual crop and add embryo
+ */
+async function completeManualCrop(box) {
+    // Validate box size
+    const minSize = 50;
+    const boxWidth = Math.abs(box.x2 - box.x1);
+    const boxHeight = Math.abs(box.y2 - box.y1);
+    if (boxWidth < minSize || boxHeight < minSize) {
+        showToast('Box too small. Please draw a larger area.', 'warning');
+        return;
+    }
+    // Normalize box coordinates
+    const normalizedBox = {
+        x1: Math.min(box.x1, box.x2),
+        y1: Math.min(box.y1, box.y2),
+        x2: Math.max(box.x1, box.x2),
+        y2: Math.max(box.y1, box.y2)
+    };
+    // Crop the embryo from the original image
+    const croppedCanvas = document.createElement('canvas');
+    const croppedCtx = croppedCanvas.getContext('2d');
+    croppedCanvas.width = normalizedBox.x2 - normalizedBox.x1;
+    croppedCanvas.height = normalizedBox.y2 - normalizedBox.y1;
+    croppedCtx.drawImage(
+        imageElement,
+        normalizedBox.x1, normalizedBox.y1,
+        croppedCanvas.width, croppedCanvas.height,
+        0, 0,
+        croppedCanvas.width, croppedCanvas.height
+    );
+    const croppedImageData = croppedCanvas.toDataURL();
+    // Add to embryos array
+    const newEmbryo = {
+        imageData: croppedImageData,
+        box: normalizedBox,
+        confidence: 1.0, // Manual additions have 100% confidence
+        isManual: true
+    };
+    appState.croppedEmbryos.push(newEmbryo);
+    // Reset manual mode
+    isDrawingNewBox = false;
+    newBoxStart = null;
+    // Update UI
+    cancelManualCrop();
+    drawDetections();
+    updateEmbryoList(appState.croppedEmbryos);
+    // Enable next button if this is the first embryo
+    if (appState.croppedEmbryos.length > 0) {
+        import('./stepper.js').then(module => {
+            module.enableNextButton(2);
+        });
+    }
+    showToast('Embryo added successfully', 'success');
+}
+/**
+ * Export functions
+ */
+export function getSelectedEmbryoIndex() {
+    return selectedEmbryoIndex;
+}
+export function redrawDetections() {
+    drawDetections();
+}

src/ui/loading.js ADDED Viewed

	@@ -0,0 +1,35 @@

+/**
+ * Loading UI - Loading overlay and progress indicators
+ */
+/**
+ * Update loading status
+ */
+export function updateLoadingStatus(message, progress) {
+    const loadingText = document.getElementById('loadingText');
+    const progressBar = document.getElementById('progressBar');
+    if (loadingText) loadingText.textContent = message;
+    if (progressBar) progressBar.style.width = `${progress}%`;
+}
+/**
+ * Hide loading overlay
+ */
+export function hideLoading() {
+    const overlay = document.getElementById('loadingOverlay');
+    if (overlay) {
+        overlay.classList.add('hidden');
+    }
+}
+/**
+ * Show loading overlay
+ */
+export function showLoading(message = 'Loading...') {
+    const overlay = document.getElementById('loadingOverlay');
+    if (overlay) {
+        overlay.classList.remove('hidden');
+        updateLoadingStatus(message, 0);
+    }
+}

src/ui/modal.js ADDED Viewed

	@@ -0,0 +1,148 @@

+/**
+ * Modal Component - Custom confirmation and alert dialogs
+ */
+/**
+ * Show confirmation modal
+ * @param {string} message - The confirmation message
+ * @param {string} title - Optional title (defaults to "Confirm")
+ * @returns {Promise<boolean>} - Resolves to true if OK clicked, false if Cancel clicked
+ */
+export function showConfirmModal(message, title = 'Confirm') {
+    return new Promise((resolve) => {
+        // Create modal overlay
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        // Create modal container
+        const modal = document.createElement('div');
+        modal.className = 'modal-container';
+        // Create modal content
+        modal.innerHTML = `
+            <div class="modal-header">
+                <h3 class="modal-title">${title}</h3>
+            </div>
+            <div class="modal-body">
+                <p class="modal-message">${message}</p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-secondary modal-cancel-btn">Cancel</button>
+                <button class="btn btn-primary modal-ok-btn">OK</button>
+            </div>
+        `;
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+        // Add animation
+        setTimeout(() => {
+            overlay.classList.add('active');
+            modal.classList.add('active');
+        }, 10);
+        // Handle button clicks
+        const okBtn = modal.querySelector('.modal-ok-btn');
+        const cancelBtn = modal.querySelector('.modal-cancel-btn');
+        const closeModal = (result) => {
+            overlay.classList.remove('active');
+            modal.classList.remove('active');
+            setTimeout(() => {
+                document.body.removeChild(overlay);
+                resolve(result);
+            }, 300);
+        };
+        okBtn.addEventListener('click', () => closeModal(true));
+        cancelBtn.addEventListener('click', () => closeModal(false));
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                closeModal(false);
+            }
+        });
+        // Close on Escape key
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                closeModal(false);
+                document.removeEventListener('keydown', handleEscape);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+    });
+}
+/**
+ * Show alert modal
+ * @param {string} message - The alert message
+ * @param {string} title - Optional title (defaults to "Alert")
+ * @returns {Promise<void>}
+ */
+export function showAlertModal(message, title = 'Alert') {
+    return new Promise((resolve) => {
+        // Create modal overlay
+        const overlay = document.createElement('div');
+        overlay.className = 'modal-overlay';
+        // Create modal container
+        const modal = document.createElement('div');
+        modal.className = 'modal-container';
+        // Create modal content
+        modal.innerHTML = `
+            <div class="modal-header">
+                <h3 class="modal-title">${title}</h3>
+            </div>
+            <div class="modal-body">
+                <p class="modal-message">${message}</p>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary modal-ok-btn">OK</button>
+            </div>
+        `;
+        overlay.appendChild(modal);
+        document.body.appendChild(overlay);
+        // Add animation
+        setTimeout(() => {
+            overlay.classList.add('active');
+            modal.classList.add('active');
+        }, 10);
+        // Handle button click
+        const okBtn = modal.querySelector('.modal-ok-btn');
+        const closeModal = () => {
+            overlay.classList.remove('active');
+            modal.classList.remove('active');
+            setTimeout(() => {
+                document.body.removeChild(overlay);
+                resolve();
+            }, 300);
+        };
+        okBtn.addEventListener('click', closeModal);
+        // Close on overlay click
+        overlay.addEventListener('click', (e) => {
+            if (e.target === overlay) {
+                closeModal();
+            }
+        });
+        // Close on Escape key
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                closeModal();
+                document.removeEventListener('keydown', handleEscape);
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+    });
+}

src/ui/quickEval.js ADDED Viewed

	@@ -0,0 +1,49 @@

+/**
+ * Quick Evaluation Handler - Quick analysis workflow
+ */
+import { evaluateEmbryo } from '../models/inference.js';
+import { showToast } from '../ui/toast.js';
+import { displayQuickResults } from '../ui/results.js';
+/**
+ * Quick analyze button handler
+ */
+export async function quickAnalyze() {
+    const img = document.getElementById('quickImage');
+    if (!img || !img.src) return;
+    try {
+        showToast('Analyzing embryo...', 'info');
+        const result = await evaluateEmbryo(img.src);
+        displayQuickResults(result);
+        showToast('Analysis complete!', 'success');
+    } catch (error) {
+        console.error('Quick analysis error:', error);
+        showToast(`Analysis failed: ${error.message}`, 'error');
+    }
+}
+/**
+ * Clear quick evaluation
+ */
+export function clearQuickEvaluation() {
+    const img = document.getElementById('quickImage');
+    const preview = document.getElementById('quickImagePreview');
+    const resultsDiv = document.getElementById('quickResults');
+    const predictionsDiv = document.getElementById('quickPredictions');
+    const input = document.getElementById('quickImageInput');
+    const analyzeBtn = document.getElementById('quickAnalyzeBtn');
+    if (img) img.style.display = 'none';
+    if (preview) {
+        const placeholder = preview.querySelector('.placeholder');
+        if (placeholder) placeholder.style.display = 'flex';
+    }
+    if (resultsDiv) resultsDiv.innerHTML = '<p>Upload and analyze an embryo image to see detailed grading results.</p>';
+    if (predictionsDiv) predictionsDiv.innerHTML = '';
+    if (input) input.value = '';
+    if (analyzeBtn) analyzeBtn.disabled = true;
+}

src/ui/results.js ADDED Viewed

	@@ -0,0 +1,249 @@

+/**
+ * Results Display - Show evaluation results to user
+ */
+/**
+ * Interpret Gardner grade
+ */
+export function interpretGrade(grade) {
+    if (grade === 'poor grade embryo' || !grade || grade.length < 3) {
+        return '<p>This embryo has been classified as <strong>poor grade</strong>.</p>';
+    }
+    const stage = grade[0];
+    const icm = grade[1];
+    const te = grade[2];
+    const stageDesc = {
+        '3': 'Early Blastocyst (cavity < 50% of embryo)',
+        '4': 'Expanded Blastocyst (cavity >= 50% of embryo)',
+        '5': 'Hatching/Hatched Blastocyst'
+    };
+    const icmDesc = {
+        'A': 'Excellent - Tightly packed, many cells',
+        'B': 'Good - Loosely grouped, several cells',
+        'C': 'Fair - Very few cells'
+    };
+    const teDesc = {
+        'A': 'Excellent - Many cells, cohesive epithelium',
+        'B': 'Good - Few cells, loose epithelium',
+        'C': 'Fair - Very few large cells'
+    };
+    return `
+        <ul style="list-style: none; padding-left: 0; margin-top: 15px;">
+            <li style="margin: 10px 0;"><strong>Stage ${stage}:</strong> ${stageDesc[stage] || 'Unknown stage'}</li>
+            <li style="margin: 10px 0;"><strong>ICM Quality ${icm}:</strong> ${icmDesc[icm] || 'Unknown quality'}</li>
+            <li style="margin: 10px 0;"><strong>TE Quality ${te}:</strong> ${teDesc[te] || 'Unknown quality'}</li>
+        </ul>
+    `;
+}
+/**
+ * Display top predictions
+ */
+export function displayPredictions(predictions, container) {
+    if (!predictions || Object.keys(predictions).length === 0) {
+        container.innerHTML = '';
+        return;
+    }
+    const sortedPredictions = Object.entries(predictions)
+        .sort((a, b) => b[1] - a[1])
+        .slice(0, 5);
+    container.innerHTML = sortedPredictions.map(([label, confidence]) => `
+        <div class="prediction-item">
+            <span class="prediction-label">${label}</span>
+            <span class="prediction-confidence">${(confidence * 100).toFixed(1)}%</span>
+            <div class="prediction-bar">
+                <div class="prediction-bar-fill" style="width: ${confidence * 100}%"></div>
+            </div>
+        </div>
+    `).join('');
+}
+/**
+ * Get image quality tip HTML
+ */
+function getImageQualityTip() {
+    return `
+        <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 15px; border-radius: 4px; margin-top: 15px;">
+            <h4 style="margin: 0 0 10px 0; color: #856404;">Image Quality Tip</h4>
+            <p style="margin: 0; color: #856404;">If this result seems incorrect, please ensure:</p>
+            <ul style="margin: 10px 0 0 20px; color: #856404;">
+                <li>The image is clear and well-focused</li>
+            </ul>
+            <p style="margin: 10px 0 0 0; color: #856404;"><strong>Try uploading a clearer image for more accurate results.</strong></p>
+        </div>
+    `;
+}
+/**
+ * Display single embryo results
+ */
+export function displaySingleEmbryoResults(result) {
+    const resultsDiv = document.getElementById('singleResults');
+    const predictionsDiv = document.getElementById('singlePredictions');
+    if (!resultsDiv || !predictionsDiv) return;
+    if (result.quality === 'poor') {
+        resultsDiv.innerHTML = `
+            <div class="grade-result grade-poor">
+                <h2>Quality: Poor Grade Embryo</h2>
+            </div>
+            <hr style="margin: 20px 0;">
+            <h3>Assessment</h3>
+            <p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
+            <p><strong>Recommendation:</strong> This embryo does not meet the minimum quality standards for viable transfer.</p>
+            <hr style="margin: 20px 0;">
+            ${getImageQualityTip()}
+        `;
+        predictionsDiv.innerHTML = '';
+    } else {
+        resultsDiv.innerHTML = `
+            <div class="grade-result grade-good">
+                <h2>Predicted Grade: ${result.grade}</h2>
+            </div>
+            <hr style="margin: 20px 0;">
+            <h3>Grade Interpretation</h3>
+            ${interpretGrade(result.grade)}
+        `;
+        displayPredictions(result.predictions, predictionsDiv);
+    }
+}
+/**
+ * Display cropped embryo results
+ */
+export function displayCroppedEmbryoResults(result) {
+    const resultsDiv = document.getElementById('croppedResults');
+    const predictionsDiv = document.getElementById('croppedPredictions');
+    if (!resultsDiv || !predictionsDiv) return;
+    if (result.quality === 'poor') {
+        resultsDiv.innerHTML = `
+            <div class="grade-result grade-poor">
+                <h2>Quality: Poor Grade Embryo</h2>
+            </div>
+            <p style="margin-top: 15px;">This embryo is <strong>not suitable for transfer</strong>.</p>
+            <div style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; border-radius: 4px; margin-top: 15px;">
+                <p style="margin: 0; color: #856404; font-size: 0.95em;"><strong>Tip:</strong> If this seems incorrect, try uploading a clearer, well-focused image of the embryo for more accurate assessment.</p>
+            </div>
+        `;
+        predictionsDiv.innerHTML = '';
+    } else {
+        resultsDiv.innerHTML = `
+            <div class="grade-result grade-good">
+                <h2>Predicted Grade: ${result.grade}</h2>
+            </div>
+            ${interpretGrade(result.grade)}
+        `;
+        displayPredictions(result.predictions, predictionsDiv);
+    }
+}
+/**
+ * Display quick evaluation results
+ */
+export function displayQuickResults(result) {
+    const resultsDiv = document.getElementById('quickResults');
+    const predictionsDiv = document.getElementById('quickPredictions');
+    if (!resultsDiv || !predictionsDiv) return;
+    if (result.quality === 'poor') {
+        resultsDiv.innerHTML = `
+            <div class="grade-result grade-poor">
+                <h2>Quality: Poor Grade Embryo</h2>
+            </div>
+            <hr style="margin: 20px 0;">
+            <p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
+            ${getImageQualityTip()}
+        `;
+        predictionsDiv.innerHTML = '';
+    } else {
+        resultsDiv.innerHTML = `
+            <div class="grade-result grade-good">
+                <h2>Predicted Grade: ${result.grade}</h2>
+            </div>
+            <hr style="margin: 20px 0;">
+            ${interpretGrade(result.grade)}
+        `;
+        displayPredictions(result.predictions, predictionsDiv);
+    }
+}
+/**
+ * Display classification status
+ */
+export function displayClassificationStatus(result) {
+    const statusDiv = document.getElementById('classificationStatus');
+    if (!statusDiv) return;
+    const isEmbryo = result.label === 'yes';
+    if (isEmbryo) {
+        statusDiv.innerHTML = `
+            <div class="grade-result grade-good">
+                <h3>Embryo Detected</h3>
+            </div>
+            <hr style="margin: 15px 0;">
+            <p><strong>Image successfully classified as embryo.</strong></p>
+            <p>Confidence: ${(result.confidence * 100).toFixed(1)}%</p>
+            <p style="margin-top: 10px;">Click 'Next: Detect Embryos' to continue.</p>
+        `;
+    } else {
+        statusDiv.innerHTML = `
+            <div class="grade-result grade-poor">
+                <h3>Not an Embryo</h3>
+            </div>
+            <hr style="margin: 15px 0;">
+            <p><strong>The image does not appear to contain an embryo.</strong></p>
+            <p>Confidence: ${(result.confidence * 100).toFixed(1)}%</p>
+            <p style="margin-top: 10px;">Please upload a valid embryo image to proceed.</p>
+        `;
+    }
+}
+/**
+ * Display final results in Step 5
+ */
+export function displayFinalResults(result) {
+    const resultsDiv = document.getElementById('finalResults');
+    const predictionsDiv = document.getElementById('finalPredictions');
+    if (!resultsDiv || !predictionsDiv) return;
+    if (result.quality === 'poor') {
+        resultsDiv.innerHTML = `
+            <div class="grade-result grade-poor">
+                <h2>Quality: Poor Grade Embryo</h2>
+            </div>
+            <hr style="margin: 20px 0;">
+            <h3>Assessment</h3>
+            <p>This embryo has been classified as <strong>poor quality</strong> and is <strong>not suitable for transfer</strong>.</p>
+            <p><strong>Recommendation:</strong> This embryo does not meet the minimum quality standards for viable transfer.</p>
+            <hr style="margin: 20px 0;">
+            ${getImageQualityTip()}
+        `;
+        predictionsDiv.innerHTML = '';
+    } else {
+        resultsDiv.innerHTML = `
+            <div class="grade-result grade-good">
+                <h2>Predicted Grade: ${result.grade}</h2>
+            </div>
+            <hr style="margin: 20px 0;">
+            <h3>Grade Interpretation</h3>
+            ${interpretGrade(result.grade)}
+            <hr style="margin: 20px 0;">
+            <h3>Analysis Complete</h3>
+            <p>The embryo has been successfully evaluated using AI-powered analysis.</p>
+        `;
+        displayPredictions(result.predictions, predictionsDiv);
+    }
+}

src/ui/stepper.js ADDED Viewed

	@@ -0,0 +1,368 @@

+/**
+ * Stepper Navigation - Handles multi-step workflow
+ */
+import { showConfirmModal } from './modal.js';
+import { saveGradingResults, prepareEmbryoData, isFirebaseReady } from '../utils/firebaseService.js';
+import { appState } from '../state.js';
+import { showToast } from './toast.js';
+let currentStep = 1;
+const totalSteps = 3;
+/**
+ * Initialize stepper navigation
+ */
+export function initializeStepper() {
+    updateStepperUI();
+    attachStepperEventListeners();
+}
+/**
+ * Navigate to a specific step
+ */
+export function goToStep(stepNumber) {
+    if (stepNumber < 1 || stepNumber > totalSteps) return;
+    currentStep = stepNumber;
+    updateStepperUI();
+    scrollToTop();
+}
+/**
+ * Go to next step
+ */
+export function nextStep() {
+    if (currentStep < totalSteps) {
+        currentStep++;
+        updateStepperUI();
+        scrollToTop();
+    }
+}
+/**
+ * Go to previous step
+ */
+export function prevStep() {
+    if (currentStep > 1) {
+        currentStep--;
+        updateStepperUI();
+        scrollToTop();
+    }
+}
+/**
+ * Mark a step as completed
+ */
+export function markStepCompleted(stepNumber) {
+    const step = document.querySelector(`.step[data-step="${stepNumber}"]`);
+    if (step) {
+        step.classList.add('completed');
+    }
+    // Update step line
+    const stepLines = document.querySelectorAll('.step-line');
+    if (stepLines[stepNumber - 1]) {
+        stepLines[stepNumber - 1].classList.add('completed');
+    }
+}
+/**
+ * Update stepper UI
+ */
+function updateStepperUI() {
+    // Update step indicators
+    document.querySelectorAll('.step').forEach((step, index) => {
+        const stepNum = index + 1;
+        step.classList.remove('active');
+        if (stepNum === currentStep) {
+            step.classList.add('active');
+        }
+    });
+    // Update step content visibility
+    document.querySelectorAll('.step-content').forEach((content, index) => {
+        const stepNum = index + 1;
+        content.classList.remove('active');
+        if (stepNum === currentStep) {
+            content.classList.add('active');
+        }
+    });
+}
+/**
+ * Reset stepper to first step
+ */
+export function resetStepper() {
+    currentStep = 1;
+    // Remove completed status from all steps
+    document.querySelectorAll('.step').forEach(step => {
+        step.classList.remove('completed', 'active');
+    });
+    document.querySelectorAll('.step-line').forEach(line => {
+        line.classList.remove('completed');
+    });
+    updateStepperUI();
+}
+/**
+ * Get current step number
+ */
+export function getCurrentStep() {
+    return currentStep;
+}
+/**
+ * Scroll to top of page
+ */
+function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+/**
+ * Attach event listeners for step navigation
+ */
+function attachStepperEventListeners() {
+    // Step 1 navigation
+    const nextStep1 = document.getElementById('nextStep1');
+    if (nextStep1) {
+        nextStep1.addEventListener('click', () => {
+            markStepCompleted(1);
+            goToStep(2);
+            initializeStep2();
+        });
+    }
+    const startOverBtn = document.getElementById('startOverBtn');
+    if (startOverBtn) {
+        startOverBtn.addEventListener('click', async () => {
+            const confirmed = await showConfirmModal(
+                'Are you sure you want to start over? All progress will be lost.',
+                'Start Over'
+            );
+            if (confirmed) {
+                resetStepper();
+                resetWorkflow();
+            }
+        });
+    }
+    // Step 2 navigation
+    const prevStep2 = document.getElementById('prevStep2');
+    if (prevStep2) {
+        prevStep2.addEventListener('click', () => goToStep(1));
+    }
+    const nextStep2 = document.getElementById('nextStep2');
+    if (nextStep2) {
+        nextStep2.addEventListener('click', () => {
+            markStepCompleted(2);
+            goToStep(3);
+            initializeStep3();
+        });
+    }
+    // Step 3 navigation
+    const prevStep3 = document.getElementById('prevStep3');
+    if (prevStep3) {
+        prevStep3.addEventListener('click', () => goToStep(2));
+    }
+    const analyzeAnother = document.getElementById('analyzeAnother');
+    if (analyzeAnother) {
+        analyzeAnother.addEventListener('click', async () => {
+            // Save results first, then reset
+            await handleSaveAndReset();
+        });
+    }
+}
+/**
+ * Initialize Step 2 - Show embryo image and prepare for detection
+ */
+function initializeStep2() {
+    // Show the embryo image first, then trigger detection after UI is ready
+    setTimeout(() => {
+        import('./workflow.js').then(module => {
+            module.showEmbryoImageAndDetect();
+        });
+    }, 150);
+}
+/**
+ * Initialize Step 3 - Evaluate all embryos in background
+ */
+function initializeStep3() {
+    // Trigger evaluation of all embryos in background
+    import('./workflow.js').then(module => {
+        module.evaluateAllEmbryos();
+    });
+}
+/**
+ * Reset workflow (to be called from workflow.js)
+ */
+export function resetWorkflow() {
+    // Reset file input to allow re-uploading the same file
+    const imageInput = document.getElementById('imageInput');
+    if (imageInput) {
+        imageInput.value = '';
+    }
+    // Clear images
+    const mainImage = document.getElementById('mainImage');
+    const mainImagePreview = document.getElementById('mainImagePreview');
+    const croppedImage = document.getElementById('croppedImage');
+    const cropCanvas = document.getElementById('cropCanvas');
+    if (mainImage) {
+        mainImage.style.display = 'none';
+        mainImage.src = '';
+    }
+    if (croppedImage) {
+        croppedImage.style.display = 'none';
+        croppedImage.src = '';
+    }
+    if (cropCanvas) {
+        cropCanvas.style.display = 'none';
+    }
+    if (mainImagePreview) {
+        const placeholder = mainImagePreview.querySelector('.placeholder');
+        if (placeholder) placeholder.style.display = 'flex';
+    }
+    // Reset buttons
+    const nextStep1 = document.getElementById('nextStep1');
+    if (nextStep1) nextStep1.disabled = true;
+    const nextStep2 = document.getElementById('nextStep2');
+    if (nextStep2) nextStep2.disabled = true;
+    // Clear classification status
+    const classificationStatus = document.getElementById('classificationStatus');
+    if (classificationStatus) {
+        classificationStatus.innerHTML = `
+            <p>Upload an image to check if it contains an embryo.</p>
+            <p>The system will automatically classify the image upon upload.</p>
+        `;
+    }
+    // Clear results
+    const finalResults = document.getElementById('finalResults');
+    if (finalResults) finalResults.innerHTML = '<p>Processing all embryos...</p>';
+    const finalPredictions = document.getElementById('finalPredictions');
+    if (finalPredictions) finalPredictions.innerHTML = '';
+    const selectionInfo = document.getElementById('selectionInfo');
+    if (selectionInfo) {
+        selectionInfo.innerHTML = '<p>Select an embryo to continue.</p>';
+    }
+    // Clear embryo thumbnails
+    const embryoThumbnails = document.getElementById('embryoThumbnails');
+    if (embryoThumbnails) {
+        embryoThumbnails.innerHTML = '';
+    }
+    // Disable zoom controls
+    const zoomIn = document.getElementById('zoomIn');
+    const zoomOut = document.getElementById('zoomOut');
+    const zoomReset = document.getElementById('zoomReset');
+    if (zoomIn) zoomIn.disabled = true;
+    if (zoomOut) zoomOut.disabled = true;
+    if (zoomReset) zoomReset.disabled = true;
+    // Hide crop editor
+    const cropControls = document.getElementById('cropControls');
+    const editCropBtn = document.getElementById('editCropBtn');
+    if (cropControls) cropControls.style.display = 'none';
+    if (editCropBtn) editCropBtn.style.display = 'none';
+    // Reset appState
+    import('../state.js').then(module => {
+        module.appState.croppedEmbryos = [];
+        module.appState.embryoResults = [];
+        module.appState.embryoRemarks = {};  // Clear all remarks
+        module.appState.currentEmbryoIndex = 0;
+        module.appState.currentImage = null;
+        module.appState.zoomLevel = 1;
+        module.appState.finalResult = null;
+    });
+}
+/**
+ * Enable next button for a step
+ */
+export function enableNextButton(stepNumber) {
+    const button = document.getElementById(`nextStep${stepNumber}`);
+    if (button) {
+        button.disabled = false;
+    }
+}
+/**
+ * Disable next button for a step
+ */
+export function disableNextButton(stepNumber) {
+    const button = document.getElementById(`nextStep${stepNumber}`);
+    if (button) {
+        button.disabled = true;
+    }
+}
+/**
+ * Handle saving results to Firebase
+ */
+async function handleSaveResults() {
+    if (!isFirebaseReady()) {
+        console.warn('Firebase is not configured.');
+        return false;
+    }
+    if (!appState.croppedEmbryos || appState.croppedEmbryos.length === 0) {
+        console.warn('No embryos to save');
+        return false;
+    }
+    try {
+        // Prepare the data with results and remarks
+        const embryoData = prepareEmbryoData(
+            appState.croppedEmbryos,
+            appState.currentImage,
+            appState.embryoResults,
+            appState.embryoRemarks
+        );
+        // Save to Firebase silently
+        const docId = await saveGradingResults(embryoData);
+        // Log to console for debugging
+        console.log('Results saved successfully! Document ID:', docId);
+        return true;
+    } catch (error) {
+        console.error('Error saving results:', error);
+        return false;
+    }
+}
+/**
+ * Handle saving results and then resetting for a new analysis
+ */
+async function handleSaveAndReset() {
+    // Save silently in background
+    await handleSaveResults();
+    // Reset immediately
+    resetStepper();
+    resetWorkflow();
+}

src/ui/tabs.js ADDED Viewed

	@@ -0,0 +1,26 @@

+/**
+ * Tab Management - Switch between different views
+ */
+/**
+ * Switch between tabs
+ */
+export function switchTab(tabName) {
+    document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
+    document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+    const tabButton = document.querySelector(`[data-tab="${tabName}"]`);
+    const tabContent = document.getElementById(tabName);
+    if (tabButton) tabButton.classList.add('active');
+    if (tabContent) tabContent.classList.add('active');
+}
+/**
+ * Setup tab event listeners
+ */
+export function setupTabListeners() {
+    document.querySelectorAll('.tab-button').forEach(button => {
+        button.addEventListener('click', () => switchTab(button.dataset.tab));
+    });
+}

src/ui/toast.js ADDED Viewed

	@@ -0,0 +1,18 @@

+/**
+ * Toast Notifications - User feedback messages
+ */
+/**
+ * Show toast notification
+ */
+export function showToast(message, type = 'info') {
+    const toast = document.getElementById('toast');
+    if (!toast) return;
+    toast.textContent = message;
+    toast.className = `toast ${type} show`;
+    setTimeout(() => {
+        toast.classList.remove('show');
+    }, 3000);
+}

src/ui/workflow.js ADDED Viewed

	@@ -0,0 +1,642 @@

+/**
+ * Workflow Handlers - Simplified 3-Step Workflow
+ */
+import { appState, setCroppedEmbryos, setCurrentEmbryoIndex, getEmbryoRemark, setEmbryoRemark } from '../state.js';
+import { runClassification, evaluateEmbryo } from '../models/inference.js';
+import { detectEmbryos, isYOLOAvailable } from '../models/yoloDetection.js';
+import { showToast } from '../ui/toast.js';
+import { displayClassificationStatus, displayFinalResults } from '../ui/results.js';
+import { displayCroppedEmbryo } from '../ui/imageDisplay.js';
+import { enableNextButton, disableNextButton, markStepCompleted } from '../ui/stepper.js';
+import { showCropEditor, hideCropEditor } from '../ui/cropEditor.js';
+import { showConfirmModal } from '../ui/modal.js';
+import { initializeInlineDetection } from '../ui/inlineDetection.js';
+/**
+ * Classify if image contains embryo (auto-triggered on upload)
+ */
+export async function classifyImage(imageData) {
+    const statusDiv = document.getElementById('classificationStatus');
+    try {
+        if (statusDiv) {
+            statusDiv.innerHTML = `
+                <div style="text-align: center;">
+                    <div class="spinner" style="width: 30px; height: 30px; margin: 10px auto;"></div>
+                    <p>Analyzing image...</p>
+                </div>
+            `;
+        }
+        showToast('Classifying image...', 'info');
+        const result = await runClassification(imageData);
+        displayClassificationStatus(result);
+        // Enable next button if classification successful and it's an embryo
+        if (result && result.label === 'yes') {
+            enableNextButton(1);
+            showToast('Image classified successfully - Embryo detected!', 'success');
+        } else if (result && result.label === 'no') {
+            disableNextButton(1); // Ensure button is disabled for non-embryo images
+            showToast('No embryo detected in the image', 'warning');
+            if (statusDiv) {
+                statusDiv.innerHTML = `
+                    <p style="color: var(--warning-color);"><strong>No embryo detected</strong></p>
+                    <p>Please upload an image containing an embryo to continue.</p>
+                `;
+            }
+        }
+    } catch (error) {
+        console.error('Classification error:', error);
+        showToast(`Classification failed: ${error.message}`, 'error');
+        if (statusDiv) {
+            statusDiv.innerHTML = `
+                <p style="color: var(--error-color);"><strong>Classification failed</strong></p>
+                <p>${error.message}</p>
+            `;
+        }
+    }
+}
+/**
+ * Show embryo image in Step 2 and then trigger detection
+ */
+export async function showEmbryoImageAndDetect() {
+    // First, display the original embryo image
+    const step2Content = document.getElementById('step2');
+    if (!step2Content || !step2Content.classList.contains('active')) {
+        console.error('Step 2 not active yet, waiting...');
+        await new Promise(resolve => setTimeout(resolve, 200));
+    }
+    const canvas = document.getElementById('detectionCanvas');
+    // Show the original embryo image on the canvas first
+    if (canvas && appState.currentImage) {
+        try {
+            const ctx = canvas.getContext('2d');
+            const { loadImage } = await import('../utils/imageUtils.js');
+            const imageElement = await loadImage(appState.currentImage);
+            // Set canvas size to match image
+            canvas.width = imageElement.width;
+            canvas.height = imageElement.height;
+            // Calculate scale factor for display
+            const container = canvas.parentElement;
+            if (container) {
+                const maxWidth = container.clientWidth - 40;
+                const maxHeight = 600;
+                const scaleFactor = Math.min(
+                    maxWidth / imageElement.width,
+                    maxHeight / imageElement.height,
+                    1
+                );
+                canvas.style.width = `${imageElement.width * scaleFactor}px`;
+                canvas.style.height = `${imageElement.height * scaleFactor}px`;
+            }
+            // Draw the original image
+            ctx.drawImage(imageElement, 0, 0);
+        } catch (error) {
+            console.error('Error displaying embryo image:', error);
+        }
+    }
+    // Wait a moment to let the UI update and show the image
+    await new Promise(resolve => setTimeout(resolve, 500));
+    // Now trigger detection
+    await detectAndDisplayEmbryos();
+}
+/**
+ * Detect and display embryos (triggered on Step 2)
+ */
+export async function detectAndDisplayEmbryos() {
+    if (!isYOLOAvailable()) {
+        showToast('Detection model not available', 'error');
+        return;
+    }
+    // Verify Step 2 is visible
+    const step2Content = document.getElementById('step2');
+    if (!step2Content || !step2Content.classList.contains('active')) {
+        console.error('Step 2 not active yet, waiting...');
+        // Wait and retry
+        await new Promise(resolve => setTimeout(resolve, 200));
+    }
+    try {
+        showToast('Detecting embryos...', 'info');
+        const detections = await detectEmbryos(appState.currentImage);
+        if (detections.length === 0) {
+            showToast('No embryos detected - You can add manually', 'info');
+            // Initialize with empty array to allow manual addition
+            setCroppedEmbryos([]);
+            await displayDetectedEmbryosForSelection([]);
+            return;
+        }
+        setCroppedEmbryos(detections);
+        await displayDetectedEmbryosForSelection(detections);
+        showToast(`Detected ${detections.length} embryo(s) - Click to select`, 'success');
+    } catch (error) {
+        console.error('Detection error:', error);
+        showToast(`Detection failed: ${error.message}`, 'error');
+    }
+}
+/**
+ * Display detected embryos for selection (Step 2) - Using inline detection view
+ */
+async function displayDetectedEmbryosForSelection(detections) {
+    // Wait a bit for DOM to be ready (Step 2 to be visible)
+    await new Promise(resolve => setTimeout(resolve, 100));
+    // Initialize the inline detection canvas with all embryos (or empty array)
+    await initializeInlineDetection(appState.currentImage, detections);
+    // Enable next button only if there are embryos (either detected or manually added)
+    if (detections.length > 0) {
+        enableNextButton(2);
+    }
+}
+/**
+ * Select embryo for analysis (updates selection in Step 2)
+ */
+function selectEmbryoForAnalysis(index) {
+    setCurrentEmbryoIndex(index);
+    displayCroppedEmbryo(index, appState.croppedEmbryos[index], appState.croppedEmbryos.length);
+    // Update active thumbnail
+    document.querySelectorAll('.embryo-thumbnail-wrapper').forEach((wrapper, i) => {
+        const thumbnail = wrapper.querySelector('.embryo-thumbnail');
+        if (thumbnail) {
+            thumbnail.classList.toggle('active', i === index);
+        }
+    });
+    const selectionInfo = document.getElementById('selectionInfo');
+    if (selectionInfo) {
+        selectionInfo.innerHTML = `
+            <p><strong>Embryo ${index + 1} of ${appState.croppedEmbryos.length} selected</strong></p>
+            <p>Click 'Analyze Selected Embryo' to continue</p>
+        `;
+    }
+    // Show crop editor for selected embryo
+    showCropEditor(index);
+    // Update navigation buttons
+    updateNavigationButtons();
+}
+/**
+ * Navigate between embryos in Step 2
+ */
+export function navigateEmbryo(direction) {
+    const newIndex = appState.currentEmbryoIndex + direction;
+    if (newIndex >= 0 && newIndex < appState.croppedEmbryos.length) {
+        selectEmbryoForAnalysis(newIndex);
+    }
+    // Update navigation button states
+    updateNavigationButtons();
+}
+/**
+ * Update navigation button states
+ */
+function updateNavigationButtons() {
+    const prevBtn = document.getElementById('prevEmbryoBtn');
+    const nextBtn = document.getElementById('nextEmbryoBtn');
+    if (prevBtn) {
+        prevBtn.disabled = appState.currentEmbryoIndex === 0;
+    }
+    if (nextBtn) {
+        nextBtn.disabled = appState.currentEmbryoIndex >= appState.croppedEmbryos.length - 1;
+    }
+}
+/**
+ * Discard an embryo from the analysis
+ */
+async function discardEmbryo(index) {
+    if (appState.croppedEmbryos.length <= 1) {
+        showToast('Cannot discard the last embryo', 'warning');
+        return;
+    }
+    const confirmed = await showConfirmModal(
+        `Are you sure you want to discard Embryo ${index + 1}?`,
+        'Discard Embryo'
+    );
+    if (!confirmed) {
+        return;
+    }
+    // Remove embryo from array
+    appState.croppedEmbryos.splice(index, 1);
+    // Adjust current index if necessary
+    if (appState.currentEmbryoIndex >= appState.croppedEmbryos.length) {
+        appState.currentEmbryoIndex = Math.max(0, appState.croppedEmbryos.length - 1);
+    }
+    // Update the display
+    redisplayEmbryos();
+    showToast('Embryo discarded', 'success');
+}
+/**
+ * Redisplay all embryos after changes (e.g., discard)
+ */
+function redisplayEmbryos() {
+    const thumbnailContainer = document.getElementById('embryoThumbnails');
+    if (!thumbnailContainer) return;
+    thumbnailContainer.innerHTML = '';
+    appState.croppedEmbryos.forEach((detection, index) => {
+        const thumbnailWrapper = document.createElement('div');
+        thumbnailWrapper.className = 'embryo-thumbnail-wrapper';
+        thumbnailWrapper.setAttribute('data-embryo-index', index);
+        const thumbnail = document.createElement('div');
+        thumbnail.className = 'embryo-thumbnail';
+        if (index === appState.currentEmbryoIndex) thumbnail.classList.add('active');
+        const img = document.createElement('img');
+        img.src = detection.imageData;
+        img.alt = `Embryo ${index + 1}`;
+        // Add discard button with closure to capture current index
+        const discardBtn = document.createElement('button');
+        discardBtn.className = 'discard-embryo-btn';
+        discardBtn.innerHTML = '×';
+        discardBtn.title = 'Discard this embryo';
+        discardBtn.addEventListener('click', ((currentIndex) => {
+            return (e) => {
+                e.stopPropagation();
+                discardEmbryo(currentIndex);
+            };
+        })(index));
+        thumbnail.appendChild(img);
+        thumbnail.appendChild(discardBtn);
+        // Add click handler with closure to capture current index
+        thumbnail.addEventListener('click', ((currentIndex) => {
+            return () => selectEmbryoForAnalysis(currentIndex);
+        })(index));
+        thumbnailWrapper.appendChild(thumbnail);
+        thumbnailContainer.appendChild(thumbnailWrapper);
+    });
+    // Select current embryo (index has been adjusted in discardEmbryo)
+    if (appState.croppedEmbryos.length > 0) {
+        selectEmbryoForAnalysis(appState.currentEmbryoIndex);
+    }
+}
+/**
+ * Evaluate all embryos in background (triggered when entering Step 3)
+ */
+export async function evaluateAllEmbryos() {
+    const resultsDiv = document.getElementById('finalResults');
+    try {
+        showToast('Processing all embryos...', 'info');
+        if (resultsDiv) {
+            resultsDiv.innerHTML = `
+                <div style="text-align: center;">
+                    <div class="spinner" style="width: 40px; height: 40px; margin: 20px auto;"></div>
+                    <p>Analyzing ${appState.croppedEmbryos.length} embryo(s)...</p>
+                    <p style="font-size: 0.9em; color: var(--text-secondary);">This may take a few moments</p>
+                </div>
+            `;
+        }
+        // Process all embryos in parallel
+        const evaluationPromises = appState.croppedEmbryos.map(async (embryo, index) => {
+            try {
+                const result = await evaluateEmbryo(embryo.imageData);
+                return {
+                    index,
+                    embryo,
+                    result,
+                    success: true
+                };
+            } catch (error) {
+                console.error(`Error evaluating embryo ${index + 1}:`, error);
+                return {
+                    index,
+                    embryo,
+                    result: null,
+                    success: false,
+                    error: error.message
+                };
+            }
+        });
+        const results = await Promise.all(evaluationPromises);
+        // Store results in appState
+        appState.embryoResults = results;
+        // Display all embryos with their results
+        displayAllEmbryosWithResults(results);
+        // Mark step as completed
+        markStepCompleted(3);
+        const successCount = results.filter(r => r.success).length;
+        if (successCount === results.length) {
+            showToast(`Successfully processed all ${results.length} embryos`, 'success');
+        } else {
+            showToast(`Processed ${successCount} of ${results.length} embryos (${results.length - successCount} failed)`, 'warning');
+        }
+    } catch (error) {
+        console.error('Evaluation error:', error);
+        showToast(`Evaluation failed: ${error.message}`, 'error');
+        if (resultsDiv) {
+            resultsDiv.innerHTML = `
+                <p style="color: var(--error-color);"><strong>Evaluation failed</strong></p>
+                <p>${error.message}</p>
+            `;
+        }
+    }
+}
+/**
+ * Display all embryos with clickable thumbnails in Step 3
+ */
+function displayAllEmbryosWithResults(results) {
+    const resultsDiv = document.getElementById('finalResults');
+    if (!resultsDiv) return;
+    resultsDiv.innerHTML = `
+        <div class="all-embryos-results">
+            <h3>All Embryos Results</h3>
+            <p style="margin-bottom: 20px; color: var(--text-secondary);">
+                Click on any embryo to view its detailed results
+            </p>
+            <div class="embryo-results-grid" id="embryoResultsGrid"></div>
+            <div class="selected-embryo-details" id="selectedEmbryoDetails" style="margin-top: 30px;"></div>
+        </div>
+    `;
+    const grid = document.getElementById('embryoResultsGrid');
+    results.forEach((resultData, index) => {
+        const card = document.createElement('div');
+        card.className = 'embryo-result-card';
+        card.setAttribute('data-embryo-index', index);
+        const hasRemark = getEmbryoRemark(index).trim().length > 0;
+        if (resultData.success) {
+            const grade = resultData.result.grade || 'Unknown';
+            const quality = resultData.result.quality || 'Unknown';
+            card.innerHTML = `
+                <div class="embryo-result-thumbnail">
+                    <img src="${resultData.embryo.imageData}" alt="Embryo ${index + 1}">
+                    <div class="embryo-result-badge">${grade}</div>
+                </div>
+                <div class="embryo-result-info">
+                    <strong>Embryo ${index + 1}</strong>
+                    <span class="quality-indicator quality-${quality.toLowerCase()}">${quality}</span>
+                </div>
+            `;
+        } else {
+            card.innerHTML = `
+                <div class="embryo-result-thumbnail">
+                    <img src="${resultData.embryo.imageData}" alt="Embryo ${index + 1}">
+                    <div class="embryo-result-badge error">Error</div>
+                </div>
+                <div class="embryo-result-info">
+                    <strong>Embryo ${index + 1}</strong>
+                    <span class="quality-indicator quality-error">Failed</span>
+                </div>
+            `;
+        }
+        card.addEventListener('click', () => showEmbryoDetailedResult(index, resultData));
+        grid.appendChild(card);
+    });
+    // Auto-select first embryo
+    if (results.length > 0) {
+        showEmbryoDetailedResult(0, results[0]);
+    }
+}
+/**
+ * Show detailed result for a specific embryo
+ */
+function showEmbryoDetailedResult(index, resultData) {
+    const detailsDiv = document.getElementById('selectedEmbryoDetails');
+    if (!detailsDiv) return;
+    // Update active card
+    document.querySelectorAll('.embryo-result-card').forEach((card, i) => {
+        card.classList.toggle('active', i === index);
+    });
+    const currentRemark = getEmbryoRemark(index);
+    if (!resultData.success) {
+        detailsDiv.innerHTML = `
+            <div class="detailed-result-container">
+                <h3>Embryo ${index + 1} - Processing Failed</h3>
+                <div class="error-message">
+                    <p>${resultData.error || 'Unknown error occurred'}</p>
+                </div>
+                <div class="remarks-section">
+                    <label for="embryoRemark${index}">Remarks:</label>
+                    <textarea
+                        id="embryoRemark${index}"
+                        class="remarks-textarea"
+                        placeholder="Add your observations, notes, or comments about this embryo..."
+                        data-embryo-index="${index}"
+                    >${currentRemark}</textarea>
+                </div>
+            </div>
+        `;
+        // Add event listener to save remarks when changed
+        const remarkTextarea = document.getElementById(`embryoRemark${index}`);
+        if (remarkTextarea) {
+            remarkTextarea.addEventListener('input', (e) => {
+                setEmbryoRemark(index, e.target.value);
+            });
+        }
+        return;
+    }
+    const result = resultData.result;
+    detailsDiv.innerHTML = `
+        <div class="detailed-result-container">
+            <div class="result-header">
+                <h3>Embryo ${index + 1} - Detailed Results</h3>
+            </div>
+            <div class="result-content">
+                <div class="result-image-section">
+                    <img src="${resultData.embryo.imageData}" alt="Embryo ${index + 1}" class="result-embryo-image">
+                </div>
+                <div class="result-details-section">
+                    <div class="result-row">
+                        <span class="result-label">Quality Assessment:</span>
+                        <span class="result-value quality-${result.quality?.toLowerCase() || 'unknown'}">${result.quality || 'Unknown'}</span>
+                    </div>
+                    <div class="result-row">
+                        <span class="result-label">Predicted Grade:</span>
+                        <span class="result-value grade-value">${result.grade || 'Unknown'}</span>
+                    </div>
+                    <div class="result-row">
+                        <span class="result-label">Actual Grade:</span>
+                        <div class="actual-grade-selectors">
+                            <select id="actualGradeNum${index}" class="grade-select" data-embryo-index="${index}">
+                                <option value="">-</option>
+                                <option value="1">1</option>
+                                <option value="2">2</option>
+                                <option value="3">3</option>
+                                <option value="4">4</option>
+                                <option value="5">5</option>
+                                <option value="6">6</option>
+                            </select>
+                            <select id="actualGradeLetter1${index}" class="grade-select" data-embryo-index="${index}">
+                                <option value="">-</option>
+                                <option value="A">A</option>
+                                <option value="B">B</option>
+                                <option value="C">C</option>
+                            </select>
+                            <select id="actualGradeLetter2${index}" class="grade-select" data-embryo-index="${index}">
+                                <option value="">-</option>
+                                <option value="A">A</option>
+                                <option value="B">B</option>
+                                <option value="C">C</option>
+                            </select>
+                            <span class="grade-preview" id="gradePreview${index}"></span>
+                        </div>
+                    </div>
+                    ${result.confidence ? `
+                    <div class="result-row">
+                        <span class="result-label">Confidence:</span>
+                        <span class="result-value">${(result.confidence * 100).toFixed(1)}%</span>
+                    </div>
+                    ` : ''}
+                    ${result.poorGoodConfidence ? `
+                    <div class="result-row">
+                        <span class="result-label">Quality Confidence:</span>
+                        <span class="result-value">${(result.poorGoodConfidence * 100).toFixed(1)}%</span>
+                    </div>
+                    ` : ''}
+                    <div class="remarks-section">
+                        <label for="embryoRemark${index}">Remarks:</label>
+                        <textarea
+                            id="embryoRemark${index}"
+                            class="remarks-textarea"
+                            placeholder="Add your observations, notes, or comments about this embryo..."
+                            data-embryo-index="${index}"
+                        >${currentRemark}</textarea>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+    // Add event listener to save remarks when changed
+    const remarkTextarea = document.getElementById(`embryoRemark${index}`);
+    if (remarkTextarea) {
+        remarkTextarea.addEventListener('input', (e) => {
+            setEmbryoRemark(index, e.target.value);
+        });
+    }
+    // Parse existing actualGrade if available
+    const existingGrade = resultData.embryo.actualGrade || '';
+    if (existingGrade) {
+        // Parse grade like "3AA" into number and letters
+        const match = existingGrade.match(/^(\d)([A-C])([A-C])$/);
+        if (match) {
+            const numSelect = document.getElementById(`actualGradeNum${index}`);
+            const letter1Select = document.getElementById(`actualGradeLetter1${index}`);
+            const letter2Select = document.getElementById(`actualGradeLetter2${index}`);
+            if (numSelect) numSelect.value = match[1];
+            if (letter1Select) letter1Select.value = match[2];
+            if (letter2Select) letter2Select.value = match[3];
+        }
+    }
+    // Function to update the combined grade
+    const updateActualGrade = () => {
+        const numSelect = document.getElementById(`actualGradeNum${index}`);
+        const letter1Select = document.getElementById(`actualGradeLetter1${index}`);
+        const letter2Select = document.getElementById(`actualGradeLetter2${index}`);
+        const gradePreview = document.getElementById(`gradePreview${index}`);
+        const num = numSelect?.value || '';
+        const letter1 = letter1Select?.value || '';
+        const letter2 = letter2Select?.value || '';
+        const combinedGrade = num + letter1 + letter2;
+        // Update preview
+        if (gradePreview) {
+            gradePreview.textContent = combinedGrade || '-';
+        }
+        // Save to embryo object
+        const embryo = appState.croppedEmbryos[index];
+        if (embryo) {
+            embryo.actualGrade = combinedGrade;
+        }
+    };
+    // Add event listeners to all three selects
+    const numSelect = document.getElementById(`actualGradeNum${index}`);
+    const letter1Select = document.getElementById(`actualGradeLetter1${index}`);
+    const letter2Select = document.getElementById(`actualGradeLetter2${index}`);
+    if (numSelect) {
+        numSelect.addEventListener('change', updateActualGrade);
+    }
+    if (letter1Select) {
+        letter1Select.addEventListener('change', updateActualGrade);
+    }
+    if (letter2Select) {
+        letter2Select.addEventListener('change', updateActualGrade);
+    }
+    // Initial update
+    updateActualGrade();
+}
+/**
+ * Legacy function - kept for compatibility but redirects to new function
+ */
+export async function evaluateSelectedEmbryo() {
+    return evaluateAllEmbryos();
+}

src/ui/zoom.js ADDED Viewed

	@@ -0,0 +1,54 @@

+/**
+ * Zoom Controls - Image zoom functionality
+ */
+import { getZoomLevel, setZoomLevel } from '../state.js';
+import { ZOOM_CONFIG } from '../config.js';
+/**
+ * Adjust zoom level
+ */
+export function adjustZoom(delta) {
+    const currentZoom = getZoomLevel();
+    const newZoom = Math.max(ZOOM_CONFIG.min, Math.min(ZOOM_CONFIG.max, currentZoom + delta));
+    setZoomLevel(newZoom);
+    applyZoom();
+}
+/**
+ * Reset zoom to default
+ */
+export function resetZoom() {
+    setZoomLevel(ZOOM_CONFIG.default);
+    applyZoom();
+}
+/**
+ * Apply current zoom level to image
+ */
+function applyZoom() {
+    const img = document.getElementById('mainImage');
+    const zoomLevel = getZoomLevel();
+    if (img) {
+        img.style.transform = `scale(${zoomLevel})`;
+    }
+    const zoomDisplay = document.getElementById('zoomLevel');
+    if (zoomDisplay) {
+        zoomDisplay.textContent = `Zoom: ${Math.round(zoomLevel * 100)}%`;
+    }
+}
+/**
+ * Setup zoom event listeners
+ */
+export function setupZoomListeners() {
+    const zoomIn = document.getElementById('zoomIn');
+    const zoomOut = document.getElementById('zoomOut');
+    const zoomReset = document.getElementById('zoomReset');
+    if (zoomIn) zoomIn.addEventListener('click', () => adjustZoom(ZOOM_CONFIG.step));
+    if (zoomOut) zoomOut.addEventListener('click', () => adjustZoom(-ZOOM_CONFIG.step));
+    if (zoomReset) zoomReset.addEventListener('click', resetZoom);
+}

src/utils/firebaseService.js ADDED Viewed

	@@ -0,0 +1,182 @@

+/**
+ * Firebase Service - Handle data persistence and authentication
+ */
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-app.js';
+import { getFirestore, collection, addDoc, serverTimestamp } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-firestore.js';
+import { getAuth, signInWithEmailAndPassword, signInWithPopup, GoogleAuthProvider, signOut, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/10.7.1/firebase-auth.js';
+// Firebase configuration
+const firebaseConfig = {
+    apiKey: "AIzaSyAYbKEaWT99sDO7bUC76LcXKDRK3BBMZ00",
+    authDomain: "embryo-one.firebaseapp.com",
+    projectId: "embryo-one",
+    storageBucket: "embryo-one.firebasestorage.app",
+    messagingSenderId: "23510355257",
+    appId: "1:23510355257:web:0ae7edce822704820f6ce8",
+    measurementId: "G-140V7Z1GRK"
+};
+// Initialize Firebase
+let app;
+let db;
+let auth;
+try {
+    app = initializeApp(firebaseConfig);
+    db = getFirestore(app);
+    auth = getAuth(app);
+    console.log('Firebase initialized successfully');
+} catch (error) {
+    console.error('Firebase initialization error:', error);
+}
+/**
+ * Save embryo grading results to Firebase
+ * @param {Object} resultData - The grading result data
+ * @returns {Promise<string>} - Document ID
+ */
+export async function saveGradingResults(resultData) {
+    try {
+        const docRef = await addDoc(collection(db, 'embryo_gradings'), {
+            ...resultData,
+            createdAt: serverTimestamp()
+        });
+        console.log('Results saved with ID:', docRef.id);
+        return docRef.id;
+    } catch (error) {
+        console.error('Error saving results:', error);
+        throw error;
+    }
+}
+/**
+ * Prepare embryo data for saving
+ * @param {Array} embryos - Array of embryo objects
+ * @param {string} mainImageUrl - URL of the main uploaded image
+ * @param {Array} results - Array of evaluation results
+ * @param {Object} remarks - Object mapping index to remarks
+ * @returns {Object} - Formatted data for Firebase
+ */
+export function prepareEmbryoData(embryos, mainImageUrl, results = [], remarks = {}) {
+    console.log('Preparing embryo data for Firebase:');
+    console.log('- Embryos count:', embryos.length);
+    console.log('- Results count:', results.length);
+    console.log('- Remarks:', remarks);
+    return {
+        mainImage: mainImageUrl,
+        embryos: embryos.map((embryo, index) => {
+            // Get result for this embryo
+            const resultData = results[index];
+            const result = resultData?.result;
+            const embryoData = {
+                embryoNumber: index + 1,
+                croppedImage: embryo.imageData,
+                predictedGrade: result?.grade || embryo.grade || 'Unknown',
+                actualGrade: embryo.actualGrade || '',
+                quality: result?.quality || embryo.quality || 'Unknown',
+                confidence: result?.confidence || embryo.confidence || 0,
+                poorGoodConfidence: result?.poorGoodConfidence || 0,
+                remarks: remarks[index] || embryo.remarks || '',
+                isManual: embryo.isManual || false,
+                detectionConfidence: embryo.confidence || 0
+            };
+            console.log(`Embryo ${index + 1} data:`, {
+                grade: embryoData.predictedGrade,
+                quality: embryoData.quality,
+                remarks: embryoData.remarks
+            });
+            return embryoData;
+        }),
+        totalEmbryos: embryos.length,
+        timestamp: new Date().toISOString()
+    };
+}
+/**
+ * Check if Firebase is initialized
+ * @returns {boolean}
+ */
+export function isFirebaseReady() {
+    return db !== null && db !== undefined && auth !== null && auth !== undefined;
+}
+/**
+ * Authentication Functions
+ */
+/**
+ * Sign in with email and password
+ * @param {string} email - User email
+ * @param {string} password - User password
+ * @returns {Promise<Object>} - User credential
+ */
+export async function signIn(email, password) {
+    try {
+        const userCredential = await signInWithEmailAndPassword(auth, email, password);
+        console.log('User signed in:', userCredential.user.email);
+        return userCredential;
+    } catch (error) {
+        console.error('Sign in error:', error);
+        throw error;
+    }
+}
+/**
+ * Sign in with Google
+ * @returns {Promise<Object>} - User credential
+ */
+export async function signInWithGoogle() {
+    try {
+        const provider = new GoogleAuthProvider();
+        provider.setCustomParameters({
+            prompt: 'select_account'
+        });
+        const userCredential = await signInWithPopup(auth, provider);
+        console.log('User signed in with Google:', userCredential.user.email);
+        return userCredential;
+    } catch (error) {
+        console.error('Google sign in error:', error);
+        throw error;
+    }
+}
+/**
+ * Sign out current user
+ * @returns {Promise<void>}
+ */
+export async function signOutUser() {
+    try {
+        await signOut(auth);
+        console.log('User signed out');
+    } catch (error) {
+        console.error('Sign out error:', error);
+        throw error;
+    }
+}
+/**
+ * Get current user
+ * @returns {Object|null} - Current user or null
+ */
+export function getCurrentUser() {
+    return auth?.currentUser || null;
+}
+/**
+ * Listen to authentication state changes
+ * @param {Function} callback - Callback function to execute on auth state change
+ * @returns {Function} - Unsubscribe function
+ */
+export function onAuthChange(callback) {
+    if (!auth) {
+        console.error('Auth not initialized');
+        return () => {};
+    }
+    return onAuthStateChanged(auth, callback);
+}

src/utils/imageUtils.js ADDED Viewed

	@@ -0,0 +1,53 @@

+/**
+ * Image Utilities - Helper functions for image manipulation
+ */
+import { DETECTION_CONFIG } from '../config.js';
+/**
+ * Load image from data URL or path
+ */
+export function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = src;
+    });
+}
+/**
+ * Crop image region with optional padding
+ */
+export async function cropImage(img, x1, y1, x2, y2, padding = DETECTION_CONFIG.yolo.padding) {
+    const width = x2 - x1;
+    const height = y2 - y1;
+    const padX = width * padding;
+    const padY = height * padding;
+    x1 = Math.max(0, x1 - padX);
+    y1 = Math.max(0, y1 - padY);
+    x2 = Math.min(img.width, x2 + padX);
+    y2 = Math.min(img.height, y2 + padY);
+    const canvas = document.createElement('canvas');
+    canvas.width = x2 - x1;
+    canvas.height = y2 - y1;
+    const ctx = canvas.getContext('2d');
+    ctx.drawImage(img, x1, y1, x2 - x1, y2 - y1, 0, 0, x2 - x1, y2 - y1);
+    return canvas.toDataURL();
+}
+/**
+ * Read file as data URL
+ */
+export function readFileAsDataURL(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = (e) => resolve(e.target.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(file);
+    });
+}

src/utils/mathUtils.js ADDED Viewed

	@@ -0,0 +1,27 @@

+/**
+ * Math Utilities - Mathematical helper functions
+ */
+/**
+ * Softmax function for converting logits to probabilities
+ */
+export function softmax(logits) {
+    const maxLogit = Math.max(...logits);
+    const scores = logits.map(l => Math.exp(l - maxLogit));
+    const sum = scores.reduce((a, b) => a + b);
+    return scores.map(s => s / sum);
+}
+/**
+ * Calculate mean of array
+ */
+export function mean(array) {
+    return array.reduce((a, b) => a + b, 0) / array.length;
+}
+/**
+ * Clamp value between min and max
+ */
+export function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}

styles.css ADDED Viewed

	@@ -0,0 +1,1611 @@

+/* Embryo Grading System - Styles */
+:root {
+    --primary-color: #007B8F;
+    --primary-dark: #004E64;
+    --primary-light: #009FB8;
+    --secondary-color: #006F8E;
+    --secondary-light: #0089A6;
+    --success-color: #66bb6a;
+    --success-light: #81c784;
+    --warning-color: #ffa726;
+    --warning-light: #ffb74d;
+    --error-color: #ef5350;
+    --error-light: #e57373;
+    --background: #F8F9FA;
+    --background-secondary: #f0f2f5;
+    --card-background: #ffffff;
+    --card-background-hover: #f8f9fa;
+    --text-primary: #333333;
+    --text-secondary: #666666;
+    --text-muted: #999999;
+    --border-color: #E0E0E0;
+    --border-color-light: #f0f0f0;
+    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
+    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
+    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
+}
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body {
+    font-family: 'EB Garamond', serif;
+    background: var(--background);
+    color: var(--text-primary);
+    line-height: 1.6;
+    font-size: 16px;
+}
+h1, h2, h3, h4, h5, h6 {
+    font-family: 'EB Garamond', serif;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+h1 { font-size: 2.5em; }
+h2 { font-size: 2em; }
+h3 { font-size: 1.5em; }
+h4 { font-size: 1.25em; }
+.container {
+    max-width: 1400px;
+    margin: 0 auto;
+    padding: 20px;
+}
+header {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 20px;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+header .logo {
+    max-height: 140px;
+    height: auto;
+    width: auto;
+    max-width: 280px;
+    object-fit: contain;
+}
+.user-menu {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+.user-email {
+    color: var(--text-primary);
+    font-size: 14px;
+    font-weight: 500;
+}
+.subtitle {
+    font-family: 'EB Garamond', serif;
+    font-size: 2em;
+    font-weight: 700;
+    opacity: 1;
+    margin: 0;
+    color: white;
+    letter-spacing: -0.5px;
+    line-height: 1.2;
+}
+/* Stepper Styles */
+.stepper-container {
+    margin-bottom: 40px;
+    background: var(--card-background);
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+}
+.stepper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+.step {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+}
+.step-circle {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background: var(--border-color);
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 1.2em;
+    transition: all 0.3s ease;
+    border: 3px solid var(--border-color);
+}
+.step-label {
+    margin-top: 10px;
+    font-size: 0.9em;
+    font-weight: 600;
+    color: var(--text-secondary);
+    text-align: center;
+    max-width: 100px;
+    transition: all 0.3s ease;
+}
+.step.active .step-circle {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 4px rgba(0, 123, 143, 0.15);
+}
+.step.active .step-label {
+    color: var(--primary-color);
+    font-weight: 700;
+}
+.step.completed .step-circle {
+    background: var(--success-color);
+    border-color: var(--success-color);
+    color: white;
+}
+.step.completed .step-label {
+    color: var(--success-color);
+}
+.step-line {
+    flex: 1;
+    height: 3px;
+    background: var(--border-color);
+    margin: 0 10px;
+    position: relative;
+    top: -20px;
+    transition: all 0.3s ease;
+}
+.step-line.completed {
+    background: var(--success-color);
+}
+/* Step Content */
+.step-content {
+    display: none;
+}
+.step-content.active {
+    display: block;
+    animation: fadeIn 0.3s ease;
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.step-navigation {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 15px;
+    margin-top: 30px;
+    padding-top: 20px;
+    border-top: 2px solid var(--border-color);
+}
+.step-navigation .btn {
+    min-width: 150px;
+}
+.step-navigation .btn:first-child {
+    margin-right: auto;
+}
+.step-navigation .btn:last-child {
+    margin-left: auto;
+}
+/* Loading Overlay */
+.loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.8);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+}
+.loading-overlay.hidden {
+    display: none;
+}
+.loading-content {
+    text-align: center;
+    color: white;
+}
+.spinner {
+    border: 4px solid rgba(255, 255, 255, 0.3);
+    border-top: 4px solid white;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    animation: spin 1s linear infinite;
+    margin: 0 auto 20px;
+}
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+#loadingText {
+    font-size: 1.2em;
+    margin-bottom: 20px;
+}
+.progress-container {
+    width: 300px;
+    height: 6px;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 3px;
+    overflow: hidden;
+    margin: 0 auto;
+}
+.progress-bar {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+    width: 0%;
+    transition: width 0.3s ease;
+}
+/* Cards */
+.card {
+    background: var(--card-background);
+    border-radius: 12px;
+    padding: 30px;
+    margin-bottom: 20px;
+    box-shadow: var(--shadow);
+    border: 1px solid var(--border-color);
+    transition: all 0.3s ease;
+}
+.card:hover {
+    box-shadow: var(--shadow-hover);
+    border-color: var(--border-color-light);
+}
+.section-title {
+    font-size: 1.5em;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 20px;
+    padding-bottom: 15px;
+    border-bottom: 2px solid var(--border-color);
+    font-family: 'EB Garamond', serif;
+    letter-spacing: -0.5px;
+}
+/* Upload Section */
+.upload-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+.image-preview-container h3,
+.status-container h3,
+.upload-container h3,
+.results-container h3,
+.embryo-preview-container h3 {
+    font-size: 1.2em;
+    font-weight: 600;
+    margin-bottom: 15px;
+    color: var(--text-primary);
+}
+.image-preview {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    border: 2px dashed var(--border-color);
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--background-secondary);
+    overflow: hidden;
+    margin-bottom: 15px;
+}
+.image-preview img,
+.image-preview canvas {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+}
+.placeholder {
+    text-align: center;
+    color: var(--text-secondary);
+}
+.placeholder svg {
+    margin-bottom: 10px;
+    opacity: 0.5;
+}
+.zoom-controls {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    display: flex;
+    gap: 5px;
+    background: rgba(255, 255, 255, 0.95);
+    padding: 8px;
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+.icon-button {
+    background: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 6px 12px;
+    cursor: pointer;
+    font-size: 0.85em;
+    transition: all 0.2s ease;
+    font-weight: 500;
+}
+.icon-button span {
+    display: inline-block;
+}
+.icon-button:hover:not(:disabled) {
+    background: var(--primary-color);
+    color: white;
+    border-color: var(--primary-color);
+    transform: scale(1.05);
+}
+.icon-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.zoom-level {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    font-size: 0.9em;
+    font-weight: 500;
+}
+/* Status Box */
+.status-box,
+.results-box,
+.info-box {
+    background: var(--background-secondary);
+    border-left: 4px solid var(--primary-color);
+    padding: 20px;
+    border-radius: 8px;
+    min-height: 100px;
+    border: 1px solid var(--border-color);
+    border-left: 4px solid var(--primary-color);
+}
+.info-box {
+    border-left-color: var(--secondary-color);
+    margin-bottom: 20px;
+    background: #e6f7f9;
+}
+/* Buttons */
+.btn {
+    padding: 12px 24px;
+    font-size: 1em;
+    font-weight: 600;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-family: 'EB Garamond', serif;
+    letter-spacing: 0.5px;
+}
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+    color: white;
+    box-shadow: 0 4px 6px rgba(0, 123, 143, 0.25);
+}
+.btn-primary:hover:not(:disabled) {
+    background: linear-gradient(135deg, var(--primary-dark) 0%, #003847 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 123, 143, 0.35);
+}
+.btn-primary:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 123, 143, 0.2);
+}
+.btn-secondary {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
+    color: white;
+    box-shadow: 0 4px 6px rgba(0, 123, 143, 0.25);
+}
+.btn-secondary:hover:not(:disabled) {
+    background: linear-gradient(135deg, var(--primary-dark) 0%, #003847 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(0, 123, 143, 0.35);
+}
+.btn-secondary:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 2px 4px rgba(0, 123, 143, 0.2);
+}
+.btn-large {
+    padding: 16px 32px;
+    font-size: 1.1em;
+    width: 100%;
+    margin-top: 15px;
+}
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.button-group {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+}
+/* Detection Mode */
+.detection-mode {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+.mode-option {
+    display: flex;
+    align-items: flex-start;
+    padding: 20px;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+.mode-option:hover {
+    border-color: var(--primary-color);
+    background: var(--background-secondary);
+    box-shadow: var(--shadow);
+}
+.mode-option input[type="radio"] {
+    margin-right: 15px;
+    margin-top: 5px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+}
+.mode-option label {
+    flex: 1;
+    cursor: pointer;
+}
+.mode-option label strong {
+    display: block;
+    font-size: 1.1em;
+    margin-bottom: 5px;
+    color: var(--text-primary);
+}
+.mode-option label p {
+    color: var(--text-secondary);
+    font-size: 0.9em;
+}
+/* Embryo Evaluation Section */
+.embryo-evaluation-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+/* Detection Layout - New inline detection view */
+.detection-layout {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 30px;
+}
+.detection-preview-container {
+    display: flex;
+    flex-direction: column;
+}
+.image-preview-with-boxes {
+    position: relative;
+    background: var(--background-secondary);
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    overflow: hidden;
+    min-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#detectionCanvas {
+    max-width: 100%;
+    max-height: 600px;
+    cursor: pointer;
+    display: block;
+}
+.detection-info {
+    margin-top: 15px;
+    padding: 12px;
+    background: #e6f7f9;
+    border-left: 4px solid var(--primary-color);
+    border-radius: 4px;
+}
+.detection-info p {
+    margin: 0;
+    color: var(--text-primary);
+    font-size: 0.95em;
+}
+.embryo-list-container {
+    display: flex;
+    flex-direction: column;
+}
+.embryo-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-height: 600px;
+    overflow-y: auto;
+    padding: 5px;
+}
+.embryo-card {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: white;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+}
+.embryo-card:hover {
+    border-color: var(--primary-color);
+    box-shadow: var(--shadow-md);
+    transform: translateY(-1px);
+}
+.embryo-card.selected {
+    border-color: var(--primary-color);
+    background: rgba(0, 123, 143, 0.05);
+    box-shadow: var(--shadow);
+}
+.embryo-card-thumbnail {
+    width: 60px;
+    height: 60px;
+    border-radius: 6px;
+    overflow: hidden;
+    flex-shrink: 0;
+}
+.embryo-card-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.embryo-card-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.embryo-card-title {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 0.95em;
+}
+.embryo-card-confidence {
+    font-size: 0.85em;
+    color: var(--text-secondary);
+}
+.embryo-card-actions {
+    display: flex;
+    gap: 8px;
+}
+.embryo-card-btn {
+    padding: 6px 12px;
+    font-size: 0.85em;
+    border: 1px solid var(--border-color);
+    background: white;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+.embryo-card-btn:hover {
+    background: var(--background-secondary);
+    border-color: var(--text-secondary);
+}
+.embryo-card-btn.discard {
+    color: var(--error-color);
+    border-color: var(--error-color);
+}
+.embryo-card-btn.discard:hover {
+    background: var(--error-color);
+    color: white;
+}
+.embryo-thumbnail-slider {
+    display: flex;
+    gap: 10px;
+    overflow-x: auto;
+    padding: 10px 0;
+    margin-bottom: 15px;
+}
+.embryo-thumbnail-wrapper {
+    position: relative;
+    flex-shrink: 0;
+}
+.embryo-thumbnail {
+    position: relative;
+    min-width: 80px;
+    height: 80px;
+    border: 3px solid var(--border-color);
+    border-radius: 8px;
+    cursor: pointer;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+.embryo-thumbnail:hover {
+    border-color: var(--primary-color);
+}
+.embryo-thumbnail.active {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 2px rgba(0, 123, 143, 0.2);
+}
+.embryo-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.discard-embryo-btn {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 22px;
+    height: 22px;
+    border-radius: 4px;
+    background: rgba(239, 83, 80, 0.9);
+    color: white;
+    border: none;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    z-index: 10;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+    opacity: 1;
+}
+.embryo-thumbnail-wrapper:hover .discard-embryo-btn {
+    display: flex;
+    opacity: 1;
+}
+.discard-embryo-btn:hover {
+    background: rgba(211, 47, 47, 1);
+    transform: scale(1.05);
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
+}
+.discard-embryo-btn:active {
+    transform: scale(0.95);
+}
+.embryo-preview {
+    height: 350px;
+}
+.navigation-controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+.embryo-counter {
+    flex: 1;
+    text-align: center;
+    font-weight: 600;
+    font-size: 1.1em;
+    padding: 10px;
+    background: var(--background-secondary);
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+}
+/* Crop Controls */
+.crop-controls {
+    background: var(--background-secondary);
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 15px;
+    border: 1px solid var(--border-color);
+}
+.crop-controls h4 {
+    color: var(--text-primary);
+    margin-bottom: 10px;
+}
+.crop-controls label {
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+.crop-controls input[type="range"] {
+    width: 100%;
+    margin: 5px 0;
+    accent-color: var(--primary-color);
+}
+.crop-controls input[type="range"]::-webkit-slider-thumb {
+    cursor: pointer;
+}
+.crop-controls input[type="range"]::-moz-range-thumb {
+    cursor: pointer;
+}
+#cropCanvas {
+    border-radius: 8px;
+    box-shadow: var(--shadow);
+}
+/* Quick Evaluation */
+.quick-evaluation-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+/* Predictions Box */
+.predictions-box {
+    background: var(--card-background);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    padding: 15px;
+    margin-top: 15px;
+}
+.prediction-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px;
+    margin-bottom: 10px;
+    background: var(--background-secondary);
+    border-radius: 6px;
+    border-left: 4px solid var(--primary-color);
+}
+.prediction-label {
+    font-weight: 600;
+    color: var(--text-primary);
+}
+.prediction-confidence {
+    font-weight: 500;
+    color: var(--primary-color);
+}
+.prediction-bar {
+    height: 8px;
+    background: var(--border-color);
+    border-radius: 4px;
+    overflow: hidden;
+    margin-top: 8px;
+}
+.prediction-bar-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
+    transition: width 0.5s ease;
+}
+/* Result Styling */
+.grade-result {
+    padding: 20px;
+    border-radius: 10px;
+    margin: 15px 0;
+    box-shadow: var(--shadow-md);
+}
+.grade-good {
+    background: linear-gradient(135deg, var(--success-color) 0%, var(--success-light) 100%);
+    color: white;
+}
+.grade-poor {
+    background: linear-gradient(135deg, var(--error-color) 0%, var(--error-light) 100%);
+    color: white;
+}
+.grade-result h2 {
+    margin: 0 0 10px 0;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+}
+.grade-result p {
+    margin: 5px 0;
+    font-size: 1.1em;
+    font-weight: 600;
+}
+/* Toast Notifications */
+.toast {
+    position: fixed;
+    bottom: 30px;
+    right: 30px;
+    background: var(--text-primary);
+    color: white;
+    padding: 16px 24px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.3s ease;
+    z-index: 10000;
+    max-width: 400px;
+}
+.toast.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+.toast.success {
+    background: var(--success-color);
+}
+.toast.error {
+    background: var(--error-color);
+}
+.toast.warning {
+    background: var(--warning-color);
+}
+/* Footer */
+footer {
+    text-align: center;
+    padding: 30px 20px;
+    margin-top: 40px;
+    border-top: 2px solid var(--border-color);
+    color: var(--text-secondary);
+}
+footer p {
+    margin: 10px 0;
+}
+.model-info {
+    font-size: 0.9em;
+    font-family: 'Courier New', monospace;
+}
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .upload-section,
+    .embryo-evaluation-section,
+    .quick-evaluation-section,
+    .detection-layout {
+        grid-template-columns: 1fr;
+    }
+    .embryo-list {
+        max-height: 300px;
+    }
+    header h1 {
+        font-size: 2em;
+    }
+    .stepper {
+        overflow-x: auto;
+        padding-bottom: 10px;
+    }
+    .step-label {
+        font-size: 0.8em;
+        max-width: 80px;
+    }
+    .step-circle {
+        width: 40px;
+        height: 40px;
+        font-size: 1em;
+    }
+}
+@media (max-width: 768px) {
+    .container {
+        padding: 10px;
+    }
+    header {
+        padding: 20px 15px;
+    }
+    header h1 {
+        font-size: 1.5em;
+    }
+    .subtitle {
+        font-size: 0.9em;
+    }
+    .card {
+        padding: 20px;
+    }
+    .stepper-container {
+        padding: 20px 10px;
+    }
+    .stepper {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+    }
+    .step {
+        min-width: 70px;
+    }
+    .step-circle {
+        width: 35px;
+        height: 35px;
+        font-size: 0.9em;
+    }
+    .step-label {
+        font-size: 0.7em;
+        max-width: 70px;
+    }
+    .step-line {
+        min-width: 20px;
+    }
+    .tabs {
+        overflow-x: auto;
+    }
+    .tab-button {
+        padding: 12px 20px;
+        font-size: 0.9em;
+    }
+    .image-preview {
+        height: 300px;
+    }
+    .navigation-controls {
+        flex-direction: column;
+    }
+    .step-navigation {
+        flex-direction: column;
+        gap: 10px;
+    }
+    .step-navigation .btn {
+        width: 100%;
+        min-width: auto;
+    }
+    .step-navigation .btn:first-child,
+    .step-navigation .btn:last-child {
+        margin: 0;
+    }
+    .button-group {
+        flex-direction: column;
+    }
+    .btn-large {
+        font-size: 1em;
+    }
+}
+/* All Embryos Results Grid */
+.all-embryos-results h3 {
+    color: var(--text-primary);
+    margin-bottom: 10px;
+}
+.embryo-results-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: 20px;
+    margin-bottom: 30px;
+}
+.embryo-result-card {
+    background: var(--card-background);
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    padding: 15px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+.embryo-result-card:hover {
+    border-color: var(--primary-color);
+    box-shadow: var(--shadow-hover);
+    transform: translateY(-2px);
+}
+.embryo-result-card.active {
+    border-color: var(--primary-color);
+    background: rgba(0, 123, 143, 0.05);
+    box-shadow: var(--shadow);
+}
+.embryo-result-thumbnail {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+.embryo-result-thumbnail img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.embryo-result-badge {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    background: var(--primary-color);
+    color: white;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 0.85em;
+    font-weight: 600;
+}
+.embryo-result-badge.error {
+    background: var(--error-color);
+}
+.remark-indicator {
+    position: absolute;
+    bottom: 8px;
+    right: 8px;
+    background: rgba(255, 193, 7, 0.95);
+    color: white;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+}
+.embryo-result-info {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+.embryo-result-info strong {
+    color: var(--text-primary);
+    font-size: 0.95em;
+}
+.quality-indicator {
+    display: inline-block;
+    padding: 3px 10px;
+    border-radius: 12px;
+    font-size: 0.85em;
+    font-weight: 500;
+}
+.quality-good {
+    background: rgba(102, 187, 106, 0.2);
+    color: var(--success-color);
+}
+.quality-poor {
+    background: rgba(239, 83, 80, 0.2);
+    color: var(--error-color);
+}
+.quality-unknown, .quality-error {
+    background: rgba(158, 158, 158, 0.2);
+    color: var(--text-secondary);
+}
+/* Detailed Result Container */
+.detailed-result-container {
+    background: var(--card-background);
+    border: 2px solid var(--border-color);
+    border-radius: 12px;
+    padding: 25px;
+}
+.result-header h3 {
+    color: var(--text-primary);
+    margin-bottom: 20px;
+}
+.result-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+}
+.result-image-section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.result-embryo-image {
+    max-width: 100%;
+    max-height: 400px;
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+}
+.result-details-section {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+.result-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px;
+    background: #f8f9fa;
+    border-radius: 8px;
+}
+.result-label {
+    font-weight: 600;
+    color: var(--text-primary);
+    font-size: 1.05em;
+}
+.result-value {
+    font-weight: 500;
+    font-size: 1.1em;
+    color: var(--text-secondary);
+}
+.result-value.grade-value {
+    color: var(--primary-color);
+    font-weight: 700;
+    font-size: 1.3em;
+}
+/* Remarks section */
+.remarks-section {
+    margin-top: 20px;
+    padding: 15px;
+    background: var(--background-secondary);
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+}
+.remarks-section label {
+    display: block;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 8px;
+    font-size: 1.05em;
+}
+.remarks-textarea {
+    width: 100%;
+    min-height: 100px;
+    padding: 12px;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 0.95em;
+    resize: vertical;
+    transition: border-color 0.3s ease;
+}
+.remarks-textarea:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(0, 123, 143, 0.1);
+}
+.remarks-textarea::placeholder {
+    color: var(--text-muted);
+}
+.actual-grade-input {
+    width: 100%;
+    padding: 10px 12px;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 0.95em;
+    transition: border-color 0.3s ease;
+}
+.actual-grade-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(0, 123, 143, 0.1);
+}
+.actual-grade-input::placeholder {
+    color: var(--text-muted);
+}
+/* Actual Grade Selectors */
+.actual-grade-selectors {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.grade-select {
+    padding: 8px 12px;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    font-family: inherit;
+    font-size: 0.95em;
+    font-weight: 600;
+    background: white;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    min-width: 60px;
+}
+.grade-select:hover {
+    border-color: var(--primary-color);
+}
+.grade-select:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(0, 123, 143, 0.1);
+}
+.grade-preview {
+    font-weight: 700;
+    font-size: 1.1em;
+    color: var(--primary-color);
+    min-width: 60px;
+    padding: 8px 12px;
+    background: rgba(0, 123, 143, 0.1);
+    border-radius: 8px;
+    text-align: center;
+}
+.error-message {
+    background: rgba(239, 83, 80, 0.1);
+    border: 1px solid var(--error-color);
+    border-radius: 8px;
+    padding: 15px;
+    color: var(--error-color);
+}
+@media (max-width: 768px) {
+    .embryo-results-grid {
+        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+        gap: 15px;
+    }
+    .result-content {
+        grid-template-columns: 1fr;
+    }
+}
+/* Utility Classes */
+.hidden {
+    display: none !important;
+}
+.text-center {
+    text-align: center;
+}
+.mt-20 {
+    margin-top: 20px;
+}
+.mb-20 {
+    margin-bottom: 20px;
+}
+/* Modal Styles */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10000;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+.modal-overlay.active {
+    opacity: 1;
+}
+.modal-container {
+    background: var(--card-background);
+    border-radius: 12px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    min-width: 400px;
+    max-width: 500px;
+    max-height: 90vh;
+    overflow: hidden;
+    transform: scale(0.9) translateY(-20px);
+    opacity: 0;
+    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.modal-container.active {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+}
+.modal-header {
+    padding: 20px 24px;
+    border-bottom: 1px solid var(--border-color);
+    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+}
+.modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: white;
+    margin: 0;
+}
+.modal-body {
+    padding: 24px;
+    max-height: 60vh;
+    overflow-y: auto;
+}
+.modal-message {
+    font-size: 15px;
+    line-height: 1.6;
+    color: var(--text-primary);
+    margin: 0;
+}
+.modal-footer {
+    padding: 16px 24px;
+    border-top: 1px solid var(--border-color);
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+    background: var(--background-secondary);
+}
+.modal-footer .btn {
+    min-width: 80px;
+    padding: 10px 20px;
+    font-size: 14px;
+    font-weight: 500;
+    border-radius: 6px;
+    transition: all 0.2s ease;
+}
+.modal-ok-btn {
+    background: var(--primary-color);
+    color: white;
+    border: none;
+}
+.modal-ok-btn:hover {
+    background: var(--primary-dark);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 123, 143, 0.3);
+}
+.modal-cancel-btn {
+    background: #e0e0e0;
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+}
+.modal-cancel-btn:hover {
+    background: #d0d0d0;
+    transform: translateY(-1px);
+}
+@media (max-width: 768px) {
+    .modal-container {
+        min-width: 90%;
+        max-width: 90%;
+        margin: 0 20px;
+    }
+    .modal-footer {
+        flex-direction: column-reverse;
+    }
+    .modal-footer .btn {
+        width: 100%;
+    }
+}
+/* Manual Crop Canvas */
+.manual-crop-canvas {
+    max-width: 100%;
+    max-height: 500px;
+    border: 2px solid var(--border-color);
+    border-radius: 8px;
+    cursor: default;
+    display: block;
+    margin: 0 auto;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    /* Touch-friendly settings */
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
+.crop-controls {
+    background: #f8f9fa;
+    padding: 20px;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
+    margin-top: 15px;
+}
+.crop-controls h4 {
+    color: var(--primary-color);
+    margin-bottom: 10px;
+    font-size: 16px;
+}
+.crop-controls p {
+    line-height: 1.6;
+    margin-bottom: 15px;
+}
+.touch-hint {
+    color: var(--primary-color) !important;
+    font-style: italic;
+}
+/* Touch-friendly button sizing for mobile */
+@media (max-width: 768px) {
+    .manual-crop-canvas {
+        max-height: 400px;
+    }
+    .crop-controls {
+        padding: 15px;
+    }
+    .crop-controls .btn-group .btn {
+        padding: 12px 20px;
+        font-size: 14px;
+        min-height: 44px; /* iOS recommended minimum touch target */
+    }
+    #croppedImagePreview {
+        min-height: 300px;
+    }
+}
+@media (max-width: 480px) {
+    .manual-crop-canvas {
+        max-height: 300px;
+    }
+    .crop-controls .btn-group {
+        flex-direction: column;
+        gap: 10px;
+    }
+    .crop-controls .btn-group .btn {
+        width: 100%;
+    }
+}

test.html ADDED Viewed

	@@ -0,0 +1,58 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Model Test</title>
+</head>
+<body>
+    <h1>Testing Model Loading...</h1>
+    <div id="status">Initializing...</div>
+    <div id="results"></div>
+    <script type="module">
+        import * as ort from 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.17.0/dist/esm/ort.min.js';
+        const statusDiv = document.getElementById('status');
+        const resultsDiv = document.getElementById('results');
+        async function testModels() {
+            try {
+                statusDiv.textContent = 'Configuring ONNX Runtime...';
+                ort.env.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/onnxruntime-web@1.17.0/dist/';
+                ort.env.wasm.numThreads = 4;
+                // Test Classifier
+                statusDiv.textContent = 'Loading Classifier...';
+                const classifier = await ort.InferenceSession.create('./models/classifier_model_compressed/model.onnx');
+                resultsDiv.innerHTML += '<p>✅ Classifier loaded successfully!</p>';
+                // Test Quality
+                statusDiv.textContent = 'Loading Quality Model...';
+                const quality = await ort.InferenceSession.create('./models/poor_good_compressed/model.onnx');
+                resultsDiv.innerHTML += '<p>✅ Quality model loaded successfully!</p>';
+                // Test Grader
+                statusDiv.textContent = 'Loading Grader...';
+                const grader = await ort.InferenceSession.create('./models/grader_model_compressed/model.onnx');
+                resultsDiv.innerHTML += '<p>✅ Grader model loaded successfully!</p>';
+                // Test YOLO
+                statusDiv.textContent = 'Loading YOLO...';
+                const yolo = await ort.InferenceSession.create('./models/yolo-cropper/best.onnx');
+                resultsDiv.innerHTML += '<p>✅ YOLO model loaded successfully!</p>';
+                statusDiv.textContent = '✅ All models loaded successfully!';
+                resultsDiv.innerHTML += '<h2>🎉 Ready to use!</h2>';
+            } catch (error) {
+                statusDiv.textContent = '❌ Error: ' + error.message;
+                resultsDiv.innerHTML += '<p style="color:red;">Error: ' + error.stack + '</p>';
+            }
+        }
+        testModels();
+    </script>
+</body>
+</html>