Update index.html

index.html

@@ -1392,21 +1392,21 @@ kbd {
                         <i class="fas fa-flask"></i> Try Example
                     </button>
                     <div class="example-dropdown" id="example-dropdown">
-                        <div class="example-item" data-seq="MEKAALIFIGLLLFSTCTQILAQSCNNDSDCTNLKCATKNIKCEQNKCQCLDERYIRAISLNTRSPRCNVQSCIDHCKAIGEVIYVCFTYHCYCRKPPM" data-label="AMP · Long (99 aa)" data-type="amp">
-                            <div class="example-item-title"><span class="example-badge badge-amp">AMP</span> Long peptide — 99 aa</div>
-                            <div class="example-item-seq">MEKAALIFIGLLLFSTCTQILAQSCNNDSDCTNLKCATK…</div>
+                        <div class="example-item" data-seq="GIGKFLHSAKKFGKAFVGEIMNS" data-label="AMP · Magainin-2 (23 aa)" data-type="amp">
+                            <div class="example-item-title"><span class="example-badge badge-amp">AMP</span> Magainin-2 — 23 aa</div>
+                            <div class="example-item-seq">GIGKFLHSAKKFGKAFVGEIMNS</div>
                         </div>
-                        <div class="example-item" data-seq="SLQGGAPNFPQPSQQNGGWQVSPDLGRDDKGNTRGQIEIQ" data-label="AMP · Short (41 aa)" data-type="amp">
-                            <div class="example-item-title"><span class="example-badge badge-amp">AMP</span> Short peptide — 41 aa</div>
-                            <div class="example-item-seq">SLQGGAPNFPQPSQQNGGWQVSPDLGRDDKGNTRGQIEIQ</div>
+                        <div class="example-item" data-seq="KWKLFKKIEKVGQNIRDGIIKAGPAVAVVGQATQIAK" data-label="AMP · Cecropin-Melittin CA(1-7)M(2-9) (37 aa)" data-type="amp">
+                            <div class="example-item-title"><span class="example-badge badge-amp">AMP</span> Cecropin A — 37 aa</div>
+                            <div class="example-item-seq">KWKLFKKIEKVGQNIRDGIIKAGPAVAVVGQATQIAK</div>
                         </div>
-                        <div class="example-item" data-seq="MKSLLPLAILAALAVAALCYESHESMESYEVSPFTTRRNANTFISPQQRWHAKAQERVRELN" data-label="Non-AMP · Long (61 aa)" data-type="nonamp">
-                            <div class="example-item-title"><span class="example-badge badge-nonamp">Non-AMP</span> Long peptide — 61 aa</div>
-                            <div class="example-item-seq">MKSLLPLAILAALAVAALCYESHESMESYEVSPFTTRR…</div>
+                        <div class="example-item" data-seq="MKWVTFISLLFLFSSAYSRGVFRRDAHKSEVAHRFKDLGEENFKALVLIAFAQYLQQCPF" data-label="Non-AMP · Serum albumin fragment (59 aa)" data-type="nonamp">
+                            <div class="example-item-title"><span class="example-badge badge-nonamp">Non-AMP</span> Albumin fragment — 59 aa</div>
+                            <div class="example-item-seq">MKWVTFISLLFLFSSAYSRGVFRRDAHKSEVAHRFKDL…</div>
                         </div>
-                        <div class="example-item" data-seq="MKPLKQKVSITLDEDVIKNLKTLAEECDRSLSQYINLILK" data-label="Non-AMP · Short (41 aa)" data-type="nonamp">
-                            <div class="example-item-title"><span class="example-badge badge-nonamp">Non-AMP</span> Short peptide — 41 aa</div>
-                            <div class="example-item-seq">MKPLKQKVSITLDEDVIKNLKTLAEECDRSLSQYINLILK</div>
+                        <div class="example-item" data-seq="MGSSHHHHHHSSGLVPRGSHMASMTGGQQMGRGSEFELRRQACGRSTKDL" data-label="Non-AMP · His-tag fusion construct (50 aa)" data-type="nonamp">
+                            <div class="example-item-title"><span class="example-badge badge-nonamp">Non-AMP</span> His-tag construct — 50 aa</div>
+                            <div class="example-item-seq">MGSSHHHHHHSSGLVPRGSHMASMTGGQQMGRGSEFEL…</div>
                         </div>
                     </div>
                 </div>
@@ -1567,10 +1567,6 @@ kbd {
 </div>
 <div class="tab-panel" id="panel-model">
     <div class="card">
-        <div class="card-header">
-            <div class="card-header-icon"><i class="fas fa-check-circle"></i></div>
-            <div class="card-header-title">Classifier Performance Metrics</div>
-        <<div class="card">
         <div class="card-header">
             <div class="card-header-icon"><i class="fas fa-check-circle"></i></div>
             <div class="card-header-title">MLP Classifier Performance Metrics</div>
@@ -1594,6 +1590,12 @@ kbd {
             </p>
         </div>
     </div>
+    <div class="card">
+        <div class="card-header">
+            <div class="card-header-icon"><i class="fas fa-chart-line"></i></div>
+            <div class="card-header-title">Regression Performance Metrics (MIC)</div>
+            <div class="card-header-sub">Per-organism MIC regression</div>
+        </div>
         <div class="card-body">
             <p class="prose">Separate regression models predict MIC for each organism. Performance evaluated via MSE (log-scale), R², Pearson correlation, and Kendall's tau.</p>
             <table class="metrics-table">
@@ -1648,10 +1650,10 @@ kbd {
             <table class="metrics-table" style="margin-top:8px;">
                 <thead><tr><th>#</th><th>Description</th><th>Expected</th><th>Sequence (truncated)</th></tr></thead>
                 <tbody>
-                    <tr><td>1</td><td>Long (99 aa)</td><td><span class="status-badge green">P-AMP</span></td><td style="font-family:var(--font-mono);font-size:11px;">MEKAALIFIGLLLFSTCTQIL…</td></tr>
-                    <tr><td>2</td><td>Long (99 aa)</td><td><span class="status-badge red">Non-AMP</span></td><td style="font-family:var(--font-mono);font-size:11px;">MKSLLPLAILAALAVAALCYE…</td></tr>
-                    <tr><td>3</td><td>Short (51 aa)</td><td><span class="status-badge green">P-AMP</span></td><td style="font-family:var(--font-mono);font-size:11px;">SLQGGAPNFPQPSQQNGGRWQ…</td></tr>
-                    <tr><td>4</td><td>Short (50 aa)</td><td><span class="status-badge red">Non-AMP</span></td><td style="font-family:var(--font-mono);font-size:11px;">MKPLKQKVSITLDEDVIKNL…</td></tr>
+                    <tr><td>1</td><td>Magainin-2 (23 aa)</td><td><span class="status-badge green">P-AMP</span></td><td style="font-family:var(--font-mono);font-size:11px;">GIGKFLHSAKKFGKAFVGEIM…</td></tr>
+                    <tr><td>2</td><td>Cecropin A (37 aa)</td><td><span class="status-badge green">P-AMP</span></td><td style="font-family:var(--font-mono);font-size:11px;">KWKLFKKIEKVGQNIRDGII…</td></tr>
+                    <tr><td>3</td><td>Albumin fragment (59 aa)</td><td><span class="status-badge red">Non-AMP</span></td><td style="font-family:var(--font-mono);font-size:11px;">MKWVTFISLLFLFSSAYSRG…</td></tr>
+                    <tr><td>4</td><td>His-tag construct (50 aa)</td><td><span class="status-badge red">Non-AMP</span></td><td style="font-family:var(--font-mono);font-size:11px;">MGSSHHHHHHSSGLVPRGSH…</td></tr>
                     <tr><td>5</td><td>Invalid chars</td><td><span class="status-badge gray">Rejected</span></td><td style="font-family:var(--font-mono);font-size:11px;">MEKAALIFIG(XX)…</td></tr>
                 </tbody>
             </table>
@@ -1698,7 +1700,6 @@ kbd {
             </ul>
             <div class="section-h3">Contact</div>
             <p class="prose">For questions, collaboration inquiries, or feedback: <a href="mailto:epicamp.sup@gmail.com" style="color:var(--ncbi-blue);">epicamp.sup@gmail.com</a></p>
-
         </div>
     </div>
 </div>
@@ -1768,6 +1769,7 @@ kbd {
 </div>
 </main>
 <div class="aa-tooltip-box" id="aa-tooltip"></div>
+<div class="toast-wrap" id="toast-wrap"></div>
 <div id="demo-modal" class="modal-overlay">
     <div class="modal-box">
         <button class="modal-close" id="modal-close-btn">&times;</button>
@@ -1781,9 +1783,9 @@ kbd {
 <footer>
     <p style="margin-bottom:4px;">© 2025 Bioinformatics and Computational Biology Unit (BCBU) — Zewail City</p>
     <address style="font-style:normal;color:rgba(255,255,255,0.55);font-size:11px;">Ahmed Zewail Street, October Gardens, Giza, Egypt</address>
-    <p style="margin-top:6px;font-size:11px;"><a href="/cdn-cgi/l/email-protection#1d786d747e7c706d336e686d5d7a707c7471337e7270" style="color:rgba(160,200,255,0.85);text-decoration:none;"><span class="__cf_email__" data-cfemail="badfcad3d9dbd7ca94c9cfcafaddd7dbd3d694d9d5d7">[email&#160;protected]</span></a></p>
+    <p style="margin-top:6px;font-size:11px;"><a href="mailto:epicamp.sup@gmail.com" style="color:rgba(160,200,255,0.85);text-decoration:none;">epicamp.sup@gmail.com</a></p>
 </footer>
-<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="module">
+<script type="module">
     import { Client } from "https://esm.sh/@gradio/client";
     /* ── CONFIG ─────────────────────────────────────────────── */
     const GRADIO_PREDICTION_TARGET_ID = "nonzeroexit/AMP-Classifier";
@@ -1791,7 +1793,7 @@ kbd {
     const MAILER_SPACE_ID             = "nonzeroexit/AMP-Mailer";
     const HF_TOKEN                    = null;  // ← if Space is Private: paste your HF read token "hf_xxxx"
                                                // ← if Space is Public:  leave as null
-    const SHEET_WEBHOOK_URL           = 'https://script.google.com/macros/s/AKfycbzF8_W8uwshY2THg7atOc9TmRqerLKAJyZbs9_-hP5kj99LMYTqn2e4Ki8SwNzZo8Oc/exec';    // ← if Space is Public:  leave as null
+    const SHEET_WEBHOOK_URL           = 'https://script.google.com/macros/s/AKfycbzF8_W8uwshY2THg7atOc9TmRqerLKAJyZbs9_-hP5kj99LMYTqn2e4Ki8SwNzZo8Oc/exec';
     /* ── AA PROPERTY MAP ─────────────────────────────────────── */
     const AA_PROPS = {
         A:'hydrophobic', V:'hydrophobic', I:'hydrophobic', L:'hydrophobic',
@@ -1871,17 +1873,8 @@ kbd {
     const step1Sub = document.getElementById('step-1-sub');
     const step2Sub = document.getElementById('step-2-sub');
     const step3Sub = document.getElementById('step-3-sub');
-    // lineWidths: percent of the connector bar filled at each logical state
-    // 0 = nothing, 50 = between step1 and step2 done, 100 = all done
     const LINE_WIDTHS = { 1: '0%', 2: '50%', 3: '100%' };
-    /**
-     * setStep(n, state, statusMsg)
-     *   n         : which step is NOW the focal point (1, 2, or 3)
-     *   state     : 'active' | 'processing' | 'done' | 'error'
-     *   statusMsg : text shown in the stepper status bar
-     */
     function setStep(n, state, statusMsg) {
-        // Mark steps before n as done, step n as state, steps after n as idle
         for (let i = 1; i <= 3; i++) {
             const el = stepEls[i];
             if (!el) continue;
@@ -1891,9 +1884,7 @@ kbd {
             } else if (i === n) {
                 el.classList.add(state);
             }
-            // steps after n get no class = default idle look
         }
-        // Connector line
         if (stepperLine) {
             if (n === 1) stepperLine.style.width = '0%';
             else if (n === 2 && state === 'done') stepperLine.style.width = '50%';
@@ -1922,7 +1913,6 @@ kbd {
         }, duration);
     }
     /* ── SEQUENCE STATS ──────────────────────────────────────── */
-    // Approximate monoisotopic residue weights (Da)
     const MW_TABLE = {A:89,R:174,N:132,D:133,C:121,Q:146,E:147,G:75,H:155,I:131,
                       L:131,K:146,M:149,F:165,P:115,S:105,T:119,W:204,Y:181,V:117};
     const HYDRO_SET  = new Set(['A','V','I','L','M','F','W','P']);
@@ -1931,17 +1921,16 @@ kbd {
         if (!seq || seq.length < 3) { if (seqStatsRow) seqStatsRow.style.display = 'none'; return; }
         if (seqStatsRow) seqStatsRow.style.display = 'flex';
         const n = seq.length;
-        let hydro = 0, cation = 0, mw = 18; // 18 = water
+        let hydro = 0, cation = 0, mw = 18;
         for (const ch of seq) {
             if (HYDRO_SET.has(ch))  hydro++;
             if (CATION_SET.has(ch)) cation++;
-            mw += (MW_TABLE[ch] || 110) - 18; // subtract water for each peptide bond
+            mw += (MW_TABLE[ch] || 110) - 18;
         }
         if (statLength) statLength.textContent = n;
         if (statHydro)  statHydro.textContent  = Math.round(hydro / n * 100) + '%';
         if (statCation) statCation.textContent  = Math.round(cation / n * 100) + '%';
         if (statMw)     statMw.textContent      = mw.toLocaleString();
-        // Char badge colour class
         if (charBadgeWrap) {
             charBadgeWrap.classList.remove('valid','warning','invalid');
             if (n >= 10 && n <= 100 && !/[^ACDEFGHIKLMNPQRSTVWY]/i.test(seq)) {
@@ -1960,24 +1949,20 @@ kbd {
             e.stopPropagation();
             exampleDropdown.classList.toggle('open');
         });
-        // Close on outside click
         document.addEventListener('click', (e) => {
             if (examplePicker && !examplePicker.contains(e.target)) {
                 exampleDropdown.classList.remove('open');
             }
         });
-        // Item click
         exampleDropdown.querySelectorAll('.example-item').forEach(item => {
             item.addEventListener('click', () => {
                 const seq   = item.dataset.seq;
                 const label = item.dataset.label;
                 const type  = item.dataset.type;
                 if (!seq) return;
-                // Fill sequence
                 sequenceInput.value = seq.toUpperCase();
                 exampleDropdown.classList.remove('open');
                 onSeqInput();
-                // Pre-select all bacteria for AMP examples
                 if (type === 'amp') {
                     micCheckboxes.forEach(cb => { cb.disabled = false; cb.checked = true; });
                 }
@@ -2026,13 +2011,10 @@ kbd {
         modalCloseBtn?.addEventListener('click', closeModal);
         demoModal?.addEventListener('click', e => { if (e.target === demoModal) closeModal(); });
         clearAll();
-        // Global AA tooltip hide on move away
         document.addEventListener('mousemove', e => {
             if (!e.target.classList.contains('aa-char')) aaTooltip.style.display = 'none';
         });
-        // Example picker
         setupExamplePicker();
-        // Ctrl+Enter shortcut to submit
         document.addEventListener('keydown', e => {
             if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
                 e.preventDefault();
@@ -2042,7 +2024,6 @@ kbd {
                     showToast('Submitting via Ctrl+Enter…', 'info', 1800);
                 }
             }
-            // Escape closes example dropdown
             if (e.key === 'Escape' && exampleDropdown) {
                 exampleDropdown.classList.remove('open');
             }
@@ -2062,7 +2043,6 @@ kbd {
         updateMicCheckboxes();
         updateBtnState();
         updateSeqStats(sequenceInput.value.toUpperCase());
-        // Auto-clear results dashboard whenever the sequence is changed
         resetDashboard();
         setStep(1, 'active', 'Enter a valid sequence to begin.');
     }
@@ -2107,7 +2087,6 @@ kbd {
     function updateBtnState() {
         const v = validateSequence(sequenceInput.value);
         if (predictBtn) predictBtn.disabled = !v.isValid || !clientInstance;
-        // Update step 1 appearance based on validity
         const seq = sequenceInput ? sequenceInput.value : '';
         if (!seq) {
             setStep(1, 'active', 'Enter a valid sequence to begin.');
@@ -2130,7 +2109,6 @@ kbd {
         }
         if (alignViewer) alignViewer.style.display = 'block';
         if (aaCompBarWrap) aaCompBarWrap.style.display = 'block';
-        // Ruler
         aaRuler.innerHTML = '';
         for (let i = 0; i < seq.length; i++) {
             const tick = document.createElement('div');
@@ -2138,7 +2116,6 @@ kbd {
             tick.textContent = (i + 1) % 5 === 0 ? (i + 1) : (i === 0 ? '1' : '');
             aaRuler.appendChild(tick);
         }
-        // Residues
         aaSeqDisplay.innerHTML = '';
         for (let i = 0; i < seq.length; i++) {
             const ch = seq[i];
@@ -2220,7 +2197,6 @@ kbd {
     }
     function resetDashboard() {
         ampClassOutput.innerHTML = '<div class="class-result-display"><div class="class-label pending">Awaiting input…</div></div>';
-        // Reset confidence panel to placeholder (no gauge-fill in initial state)
         confidenceOutput.innerHTML =
             '<div class="gauge-wrap">' +
               '<svg class="gauge-arc-svg" viewBox="0 0 150 80">' +
@@ -2232,9 +2208,6 @@ kbd {
               '<div class="gauge-sub">Model confidence</div>' +
             '</div>';
         micChartOutput.innerHTML = '<div class="mic-empty">MIC results will appear here after analysis. Select bacteria above before submitting.</div>';
-        // Reset the report panel WITHOUT destroying #download-link or #email-status-result
-        const reportPlaceholder = additionalOutput.querySelector('.report-placeholder');
-        // Remove any old placeholder text nodes / divs, but keep the persistent elements
         Array.from(additionalOutput.childNodes).forEach(node => {
             if (node !== downloadLink && node !== emailStatusResult) node.remove();
         });
@@ -2254,7 +2227,7 @@ kbd {
     function setGauge(fraction, color) {
         const arc = 188.5;
         const fill = document.getElementById('gauge-fill');
-        if (!fill) return;  // gauge SVG may not be in DOM yet
+        if (!fill) return;
         fill.style.strokeDashoffset = (arc - fraction * arc).toString();
         fill.style.stroke = color;
     }
@@ -2310,17 +2283,14 @@ kbd {
         const v = validateSequence(seq);
         if (!v.isValid) { showError(v.message); return; }
         clearError();
-        // UI: loading state
         predictBtn.disabled = true;
         predictBtn.innerHTML = '<i class="fas fa-circle-notch spin"></i> Processing…';
         setStep(2, 'processing', 'Model is analysing your sequence…');
         if (step2Sub) step2Sub.textContent = 'Running…';
-        // Show loading in all panels -- preserve persistent elements in additionalOutput
         const loadingHTML = '<div class="loading-pulse"><div class="pulse-dots"><div class="pulse-dot"></div><div class="pulse-dot"></div><div class="pulse-dot"></div></div><span>Analysing...</span></div>';
         ampClassOutput.innerHTML = loadingHTML;
         confidenceOutput.innerHTML = loadingHTML;
         micChartOutput.innerHTML = loadingHTML;
-        // Safe reset: remove all children except the persistent link and status divs
         Array.from(additionalOutput.childNodes).forEach(function(node) {
             if (node !== downloadLink && node !== emailStatusResult) node.remove();
         });
@@ -2336,7 +2306,6 @@ kbd {
             elapsed++;
             if (processingInfo) processingInfo.textContent = 'Processing — ' + elapsed + 's elapsed…';
         }, 1000);
-        /* ── parse helpers ── */
         let ampLabel = 'Unknown', ampConf = 0;
         let micData = {}, limeFeatures = [];
         try {
@@ -2361,7 +2330,6 @@ kbd {
                     if (m) limeFeatures.push({ feature: m[1].trim(), value: parseFloat(m[2]) });
                 }
             }
-            /* ── Update Classification ── */
             const isAMP = ampLabel.toLowerCase().includes('amp') && !ampLabel.toLowerCase().includes('non-amp');
             ampClassOutput.innerHTML = `
                 <div class="class-result-display">
@@ -2372,10 +2340,7 @@ kbd {
                         </span>
                     </div>
                 </div>`;
-            /* ── Update Gauge ── */
             const gColor = isAMP ? '#2e7d32' : '#c62828';
-            const gOffset = (188.5 - ampConf * 188.5).toFixed(1);
-            // Write the SVG first, THEN call setGauge (so gauge-fill exists in DOM)
             confidenceOutput.innerHTML =
                 '<div class="gauge-wrap">' +
                   '<svg class="gauge-arc-svg" viewBox="0 0 150 80">' +
@@ -2383,14 +2348,12 @@ kbd {
                     '<path id="gauge-fill" class="gauge-fill" d="M15,75 A60,60 0 0,1 135,75"' +
                     '  stroke="' + gColor + '"' +
                     '  stroke-dasharray="188.5"' +
-                    '  stroke-dashoffset="188.5"/>' +   // start at 0, then animate
+                    '  stroke-dashoffset="188.5"/>' +
                   '</svg>' +
                   '<div class="gauge-value-label" style="color:' + gColor + '">' + (ampConf * 100).toFixed(1) + '%</div>' +
                   '<div class="gauge-sub">Model confidence</div>' +
                 '</div>';
-            // Now gauge-fill is in the DOM — animate it
             requestAnimationFrame(() => setGauge(ampConf, gColor));
-            /* ── Update MIC Chart ── */
             const checkedBacteria = [...micCheckboxes].filter(cb => cb.checked).map(cb => {
                 return cb.parentElement.querySelector('label em')?.textContent?.trim() || cb.value;
             });
@@ -2411,20 +2374,15 @@ kbd {
             } else {
                 micChartOutput.innerHTML = `<div class="mic-empty">${!isAMP ? 'Sequence classified as Non-AMP — MIC prediction not applicable.' : 'No bacteria selected or no MIC predictions returned.'}</div>`;
             }
-            /* ── Advance stepper to step 3 ── */
             setStep(3, 'active', 'Analysis complete — results below.');
             if (step3Sub) step3Sub.textContent = ampLabel;
-            // Scroll results area into view smoothly
             const ra = document.getElementById('results-area');
             if (ra) ra.scrollIntoView({ behavior: 'smooth', block: 'start' });
             showToast('Classification: ' + ampLabel + ' (' + (ampConf*100).toFixed(1) + '% confidence)', isAMP ? 'success' : 'info', 4000);
-            /* ── Enable bacteria checkboxes if AMP ── */
             if (isAMP) micCheckboxes.forEach(cb => cb.disabled = false);
-            /* ── Generate PDF ── */
             let pdfDoc = null;
             try { pdfDoc = await buildPDF(seq, ampLabel, ampConf, micData, limeFeatures); }
             catch (pdfErr) { console.error("PDF gen error:", pdfErr); }
-            // Helper: safely clear additionalOutput without removing persistent elements
             function clearAdditionalOutput() {
                 Array.from(additionalOutput.childNodes).forEach(function(node) {
                     if (node !== downloadLink && node !== emailStatusResult) node.remove();
@@ -2446,7 +2404,6 @@ kbd {
                 setStep(3, 'done', 'Report ready — download below.');
                 if (step3Sub) step3Sub.textContent = 'PDF ready';
                 showToast('PDF report ready to download', 'success', 3000);
-                // ── Log user to Google Sheet ──────────────────
                 if (SHEET_WEBHOOK_URL && userEmailInput?.value?.trim()) {
                     fetch(SHEET_WEBHOOK_URL, {
                         method: 'POST',
@@ -2458,22 +2415,19 @@ kbd {
                             confidence: (ampConf * 100).toFixed(1) + '%',
                             sequence:   seq.slice(0, 50) + (seq.length > 50 ? '…' : '')
                         })
-                    }).catch(() => {}); // silent — never blocks the user
+                    }).catch(() => {});
                 }
                 if (emailStatusResult) {
                     additionalOutput.appendChild(emailStatusResult);
                     emailStatusResult.style.display = 'flex';
-
                     if (IS_EMAIL_SENDING_ENABLED && userEmailInput?.value?.trim()) {
                         const toEmail = userEmailInput.value.trim();
                         const pdfB64  = pdfDoc.output('datauristring').split(',')[1];
                         const seqPrev = seq.slice(0, 50) + (seq.length > 50 ? '…' : '');
-
                         emailStatusResult.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending report to ' + toEmail + '…';
-
                         try {
                             const mailer = await Client.connect(MAILER_SPACE_ID, {
-                                hf_token: HF_TOKEN   // set to null if Space is public
+                                hf_token: HF_TOKEN
                             });
                             const result = await mailer.predict("/send", [
                                 toEmail, pdfB64, ampLabel,
@@ -2510,7 +2464,6 @@ kbd {
             ampClassOutput.innerHTML = '<div class="class-result-display"><div class="class-label pending" style="color:var(--accent-red)">Error</div></div>';
             confidenceOutput.innerHTML = '<div class="mic-empty">—</div>';
             micChartOutput.innerHTML = '<div class="mic-empty">Unavailable due to prediction error.</div>';
-            // Safe clear additionalOutput
             Array.from(additionalOutput.childNodes).forEach(function(node) {
                 if (node !== downloadLink && node !== emailStatusResult) node.remove();
             });
@@ -2554,14 +2507,14 @@ kbd {
         const LGRAY= [210, 218, 232];
         const isAMP = label.toLowerCase().includes('amp') && !label.toLowerCase().includes('non-amp');
         const dateStr = new Date().toLocaleDateString('en-GB', { day:'numeric', month:'long', year:'numeric' });
-
-        // helper: repeating page header
+        const logoB64   = await getBase64(document.querySelector('.header-logo img')?.src || '');
+        const banner64  = await getBase64('image2.png');
+        const shapB64   = await getBase64('shap.png');
         function pageHeader(sectionTitle) {
             pdf.setFillColor(0, 40, 90);
             pdf.rect(0, 0, W, 18, 'F');
             pdf.setFillColor(26, 111, 196);
             pdf.rect(0, 15, W, 3, 'F');
-            // Logo on left if available
             if (logoB64) {
                 try { pdf.addImage(logoB64, 'PNG', 8, 2, 13, 13); } catch(e) {}
             }
@@ -2572,8 +2525,6 @@ kbd {
             pdf.setFont('helvetica','normal'); pdf.setFontSize(7.5); pdf.setTextColor(200, 220, 255);
             pdf.text(sectionTitle, W - 10, 11, { align:'right' });
         }
-
-        // helper: page footer
         function pageFooter(pageNum, total) {
             pdf.setFillColor(245, 247, 252);
             pdf.rect(0, H - 14, W, 14, 'F');
@@ -2586,8 +2537,6 @@ kbd {
             pdf.setTextColor(160, 168, 185);
             pdf.text('Page ' + pageNum + ' of ' + total, W - 10, H - 5.5, { align:'right' });
         }
-
-        // helper: section title with underline
         function sectionTitle(text, yPos) {
             pdf.setFont('helvetica','bold'); pdf.setFontSize(14); pdf.setTextColor(0, 63, 125);
             pdf.text(text, 15, yPos);
@@ -2595,30 +2544,17 @@ kbd {
             pdf.line(15, yPos + 2.5, W - 15, yPos + 2.5);
             return yPos + 12;
         }
-
-        // preload assets
-        const logoB64   = await getBase64(document.querySelector('.header-logo img')?.src || '');
-        const banner64  = await getBase64('image2.png');
-        const shapB64   = await getBase64('shap.png');
-
-        // ══════════════════════════════════════════════════
-        // PAGE 1 — COVER  (image2.png header + summary + TOC)
-        // ══════════════════════════════════════════════════
-
-        // ── Header banner (image2.png) ──────────────────
-        var bannerH = 52;   // height reserved for the header image
+        var bannerH = 52;
         if (banner64) {
             const bi = new Image(); bi.src = banner64;
             await new Promise(r => { bi.onload = r; bi.onerror = r; });
             if (bi.naturalWidth) {
-                // scale to full page width, preserve aspect
                 var bw = W, bh = bw * (bi.naturalHeight / bi.naturalWidth);
-                if (bh > 70) bh = 70;   // cap at 70 mm
+                if (bh > 70) bh = 70;
                 bannerH = bh;
                 pdf.addImage(banner64, 'PNG', 0, 0, bw, bh);
             }
         } else {
-            // Fallback: branded gradient bar if image missing
             pdf.setFillColor(0, 40, 90);
             pdf.rect(0, 0, W, bannerH, 'F');
             pdf.setFillColor(26, 111, 196);
@@ -2628,12 +2564,8 @@ kbd {
             pdf.setFont('helvetica','normal'); pdf.setFontSize(10); pdf.setTextColor(160,200,255);
             pdf.text('Explainable Antimicrobial Peptide Platform', W / 2, bannerH / 2 + 7, { align:'center' });
         }
-
-        // Thin accent line below banner
         pdf.setFillColor(26, 111, 196);
         pdf.rect(0, bannerH, W, 1.5, 'F');
-
-        // ── Report title strip ──────────────────────────
         var by = bannerH + 1.5;
         pdf.setFillColor(247, 249, 253);
         pdf.rect(0, by, W, 20, 'F');
@@ -2642,20 +2574,14 @@ kbd {
         pdf.setFont('helvetica','normal'); pdf.setFontSize(8.5); pdf.setTextColor(100, 115, 145);
         pdf.text('Generated on ' + dateStr + '   |   Zewail City of Science and Technology  \u00B7  BCBU', W / 2, by + 17, { align:'center' });
         by += 22;
-
-        // Divider
         pdf.setDrawColor(210, 218, 232); pdf.setLineWidth(0.4);
         pdf.line(15, by, W - 15, by);
         by += 7;
-
-        // ── Quick Summary label ─────────────────────────
         pdf.setFont('helvetica','bold'); pdf.setFontSize(9); pdf.setTextColor(26, 111, 196);
         pdf.text('QUICK SUMMARY', 15, by);
         pdf.setDrawColor(26, 111, 196); pdf.setLineWidth(0.4);
         pdf.line(15, by + 1.5, W - 15, by + 1.5);
         by += 7;
-
-        // ── Input Sequence box ──────────────────────────
         pdf.setFillColor(248, 250, 255);
         pdf.roundedRect(15, by, W - 30, 22, 2, 2, 'F');
         pdf.setDrawColor(210, 218, 232); pdf.setLineWidth(0.3);
@@ -2668,8 +2594,6 @@ kbd {
         pdf.setFont('helvetica','normal'); pdf.setFontSize(6.5); pdf.setTextColor(150, 158, 175);
         pdf.text(seq.length + ' amino acids', W - 20, by + 19, { align:'right' });
         by += 26;
-
-        // ── Four stat cards row ─────────────────────────
         var hasMIC  = Object.keys(micResults).length > 0;
         var hasLIME = limeFeats.length > 0;
         var hasShap = !!shapB64;
@@ -2699,29 +2623,23 @@ kbd {
             var cx = 15 + i * (cw4 + cardGap);
             pdf.setFillColor(c.fill[0], c.fill[1], c.fill[2]);
             pdf.roundedRect(cx, by, cw4, cardH, 2, 2, 'F');
-            // left accent bar
             pdf.setFillColor(c.border[0], c.border[1], c.border[2]);
             pdf.rect(cx, by, 2.5, cardH, 'F');
             pdf.setDrawColor(c.border[0], c.border[1], c.border[2]); pdf.setLineWidth(0.4);
             pdf.roundedRect(cx, by, cw4, cardH, 2, 2, 'S');
-            // label
             pdf.setFont('helvetica','bold'); pdf.setFontSize(5.5); pdf.setTextColor(150,158,175);
             pdf.text(c.label, cx + 6, by + 7);
-            // value — split to fit within card width
             pdf.setFont('helvetica','bold'); pdf.setFontSize(9);
             pdf.setTextColor(c.valColor[0], c.valColor[1], c.valColor[2]);
             var maxTxtW = cw4 - 10;
             var valLines = pdf.splitTextToSize(c.value, maxTxtW);
             pdf.text(valLines, cx + 6, by + 15);
-            // sub — always fits, tiny font
             var subY = by + 15 + valLines.length * 5;
             pdf.setFont('helvetica','normal'); pdf.setFontSize(6); pdf.setTextColor(120,128,145);
             var subLines = pdf.splitTextToSize(c.sub, maxTxtW);
             pdf.text(subLines, cx + 6, subY);
         });
         by += cardH + 4;
-
-        // ── MIC mini-table (if available) ───────────────
         if (hasMIC) {
             pdf.setFont('helvetica','bold'); pdf.setFontSize(6.5); pdf.setTextColor(26,111,196);
             pdf.text('PREDICTED MIC VALUES (\u00B5M)', 15, by + 5);
@@ -2733,7 +2651,6 @@ kbd {
             micEntries.forEach(function(kv, i) {
                 var mx = 15 + i * colW;
                 var micVal = typeof kv[1] === 'number' ? kv[1].toFixed(3) : String(kv[1]);
-                // card bg
                 pdf.setFillColor(244, 247, 253);
                 pdf.roundedRect(mx + 1, by, colW - 2, 22, 2, 2, 'F');
                 pdf.setDrawColor(210,218,232); pdf.setLineWidth(0.25);
@@ -2747,10 +2664,7 @@ kbd {
         } else {
             by += 4;
         }
-
-        // ── Table of Contents ───────────────────────────
         by += 3;
-        // TOC header bar
         pdf.setFillColor(0, 40, 90);
         pdf.roundedRect(15, by, W - 30, 10, 2, 2, 'F');
         pdf.setFont('helvetica','bold'); pdf.setFontSize(8); pdf.setTextColor(255,255,255);
@@ -2759,10 +2673,7 @@ kbd {
         pdf.text('Section', W - 45, by + 7);
         pdf.text('Page', W - 21, by + 7, { align:'right' });
         by += 12;
-
         var pg = 2;
-        // 4 canonical sections — LIME and SHAP share one "Features" section page
-        var featPage = (hasLIME || hasShap) ? pg + (hasMIC ? 1 : 0) + 1 : null;
         var tocData = [
             { num:'1', icon:'SEQ', title:'Input Sequence',
               desc:'Full amino acid sequence with length and composition',
@@ -2777,48 +2688,33 @@ kbd {
               desc:'Local LIME attributions and global SHAP feature importance',
               page: (hasLIME || hasShap) ? pg++ : null }
         ];
-
         var tocRowH = 13;
         tocData.forEach(function(row, idx) {
             var avail = row.page !== null;
             var rowBg = avail ? (idx % 2 === 0 ? [247,249,254] : [255,255,255]) : [250,250,252];
             pdf.setFillColor(rowBg[0], rowBg[1], rowBg[2]);
             pdf.rect(15, by, W - 30, tocRowH, 'F');
-
-            // left colour tag
             var tagColor = avail ? (idx===0?[26,111,196]:idx===1?[39,174,96]:idx===2?[230,81,0]:[126,87,194]) : [190,195,205];
             pdf.setFillColor(tagColor[0], tagColor[1], tagColor[2]);
             pdf.rect(15, by, 3, tocRowH, 'F');
-
-            // number badge
             pdf.setFillColor(tagColor[0], tagColor[1], tagColor[2]);
             pdf.roundedRect(21, by + 2, 8, 8, 1, 1, 'F');
             pdf.setFont('helvetica','bold'); pdf.setFontSize(6.5); pdf.setTextColor(255,255,255);
             pdf.text(row.num, 25, by + 7.5, { align:'center' });
-
-            // icon badge
             pdf.setFillColor(avail ? 235 : 242, avail ? 240 : 243, avail ? 252 : 248);
             pdf.roundedRect(32, by + 2.5, 10, 7, 1, 1, 'F');
             pdf.setFont('helvetica','bold'); pdf.setFontSize(5); pdf.setTextColor(tagColor[0], tagColor[1], tagColor[2]);
             pdf.text(row.icon, 37, by + 7.5, { align:'center' });
-
-            // title
             pdf.setFont('helvetica','bold'); pdf.setFontSize(8);
             pdf.setTextColor(avail ? 20 : 160, avail ? 35 : 165, avail ? 80 : 180);
             pdf.text(row.title, 45, by + 6.5);
-
-            // description
             pdf.setFont('helvetica','normal'); pdf.setFontSize(6);
             pdf.setTextColor(avail ? 110 : 175, avail ? 118 : 180, avail ? 140 : 195);
             pdf.text(row.desc, 45, by + 11);
-
-            // page number
             var pageLabel = avail ? 'pg. ' + row.page : 'N/A';
             pdf.setFont('helvetica', avail ? 'bold' : 'normal'); pdf.setFontSize(8);
             pdf.setTextColor(avail ? tagColor[0] : 180, avail ? tagColor[1] : 185, avail ? tagColor[2] : 195);
             pdf.text(pageLabel, W - 18, by + 7.5, { align:'right' });
-
-            // dotted leader
             pdf.setFillColor(210, 218, 232);
             var titleW2 = pdf.getTextWidth(row.title);
             var pgW2    = pdf.getTextWidth(pageLabel);
@@ -2826,19 +2722,13 @@ kbd {
             for (var dx = lx1; dx < lx2 - 1; dx += 2.2) {
                 pdf.circle(dx, by + 7, 0.3, 'F');
             }
-
-            // row separator
             pdf.setDrawColor(225, 230, 242); pdf.setLineWidth(0.15);
             pdf.line(15, by + tocRowH, W - 15, by + tocRowH);
             by += tocRowH;
         });
-
-        // TOC bottom rule
         pdf.setFillColor(26, 111, 196);
         pdf.rect(15, by, W - 30, 1, 'F');
         by += 5;
-
-        // Cover page footer strip
         pdf.setFillColor(245, 247, 252);
         pdf.rect(0, H - 14, W, 14, 'F');
         pdf.setDrawColor(210, 218, 232); pdf.setLineWidth(0.3);
@@ -2849,19 +2739,13 @@ kbd {
         pdf.text('epicamp.sup@gmail.com', 10, H - 3);
         pdf.setTextColor(160, 168, 185);
         pdf.text('Page 1', W - 10, H - 5.5, { align:'right' });
-
-        // ══════════════════════════════════════════════════
-        // PAGE 2 — INPUT SEQUENCE
-        // ══════════════════════════════════════════════════
         pdf.addPage();
         pageHeader('Section 1 — Input Sequence');
         var y = 26;
-
         y = sectionTitle('1.  Input Sequence', y);
         pdf.setFont('helvetica','normal'); pdf.setFontSize(8.5); pdf.setTextColor(130,138,155);
         pdf.text('Full amino acid sequence submitted for analysis (' + seq.length + ' residues).', 15, y, { maxWidth: W - 30 });
         y += 10;
-        // Sequence box
         var seqLines = pdf.splitTextToSize(seq, W - 44);
         var seqBoxH = 10 + seqLines.length * 5.5 + 4;
         pdf.setFillColor(248, 250, 255);
@@ -2877,8 +2761,6 @@ kbd {
         pdf.setFont('helvetica','normal'); pdf.setFontSize(7); pdf.setTextColor(150,158,175);
         pdf.text(seq.length + ' amino acids', W - 20, y + seqBoxH - 3, { align:'right' });
         y += seqBoxH + 10;
-
-        // Sequence stats mini-row
         var statsData = [
             { k:'Length', v: seq.length + ' aa' },
             { k:'Hydrophobic', v: (function(){ var h=0; for(var i=0;i<seq.length;i++) if('AVILMFWP'.includes(seq[i]))h++; return Math.round(h/seq.length*100)+'%'; })() },
@@ -2898,14 +2780,9 @@ kbd {
             pdf.text(s.v, sx + sw/2, y + 14, { align:'center' });
         });
         y += 25;
-
-        // ══════════════════════════════════════════════════
-        // PAGE 3 — CLASSIFICATION & CONFIDENCE
-        // ══════════════════════════════════════════════════
         pdf.addPage();
         pageHeader('Section 2 — Classification & Confidence');
         y = 26;
-
         y = sectionTitle('2.  Classification & Confidence', y);
         pdf.autoTable({
             startY: y,
@@ -2938,33 +2815,23 @@ kbd {
             margin: { left: 15, right: 15 }
         });
         y = pdf.lastAutoTable.finalY + 10;
-
-        // Visual confidence bar
         pdf.setFont('helvetica','bold'); pdf.setFontSize(8); pdf.setTextColor(0,40,90);
         pdf.text('Confidence Indicator', 15, y + 5);
         y += 9;
         var barW = W - 30, barH2 = 7;
-        // track
         pdf.setFillColor(220, 226, 240);
         pdf.roundedRect(15, y, barW, barH2, 2, 2, 'F');
-        // fill
         var fillC = conf >= 0.7 ? GRN : conf >= 0.5 ? [230,81,0] : RED;
         pdf.setFillColor(fillC[0], fillC[1], fillC[2]);
         pdf.roundedRect(15, y, Math.max(barW * conf, 3), barH2, 2, 2, 'F');
-        // label
         pdf.setFont('helvetica','bold'); pdf.setFontSize(7); pdf.setTextColor(fillC[0], fillC[1], fillC[2]);
         pdf.text((conf*100).toFixed(1) + '%', 15 + barW * conf + 2, y + 5.5);
         y += barH2 + 5;
-        // scale labels
         pdf.setFont('helvetica','normal'); pdf.setFontSize(6.5); pdf.setTextColor(160,168,185);
         pdf.text('0%', 15, y + 3);
         pdf.text('50%', 15 + barW/2, y + 3, { align:'center' });
         pdf.text('100%', 15 + barW, y + 3, { align:'right' });
         y += 12;
-
-        // ══════════════════��═══════════════════════════════
-        // PAGE 4 — MIC VALUES  (only if available)
-        // ══════════════════════════════════════════════════
         var micRows = Object.entries(micResults).map(function(kv) {
             return [kv[0], typeof kv[1] === 'number' ? kv[1].toFixed(3) + ' \u00B5M' : String(kv[1])];
         });
@@ -3011,8 +2878,6 @@ kbd {
                 margin: { left: 15, right: 15 }
             });
             y = pdf.lastAutoTable.finalY + 14;
-
-            // MIC visual bar chart
             pdf.setFont('helvetica','bold'); pdf.setFontSize(8); pdf.setTextColor(0,40,90);
             pdf.text('MIC Comparison Chart', 15, y + 5);
             y += 11;
@@ -3025,27 +2890,19 @@ kbd {
                 var bx = 15 + i * barSlotW + barSlotW * 0.15;
                 var bw2 = barSlotW * 0.7;
                 var barColor = val < 4 ? GRN : val < 16 ? [230,81,0] : RED;
-                // bar
                 pdf.setFillColor(barColor[0], barColor[1], barColor[2]);
                 pdf.roundedRect(bx, y + maxBarH - bh, bw2, bh, 1, 1, 'F');
-                // value label above
                 pdf.setFont('helvetica','bold'); pdf.setFontSize(6.5); pdf.setTextColor(barColor[0], barColor[1], barColor[2]);
                 pdf.text(val.toFixed(2), bx + bw2 / 2, y + maxBarH - bh - 2, { align:'center' });
-                // organism label below
                 pdf.setFont('helvetica','italic'); pdf.setFontSize(6); pdf.setTextColor(80,90,110);
                 pdf.text(r[0], bx + bw2 / 2, y + maxBarH + 5, { align:'center' });
             });
             y += maxBarH + 12;
         }
-
-        // ══════════════════════════════════════════════════
-        // PAGE 5 — FEATURES: LIME + SHAP
-        // ══════════════════════════════════════════════════
         if (limeFeats.length > 0 || shapB64) {
             pdf.addPage();
             pageHeader('Section 4 — Feature Explanation (LIME & SHAP)');
             y = 26;
-
             if (limeFeats.length > 0) {
                 y = sectionTitle('4a.  LIME — Local Feature Attribution', y);
                 pdf.setFont('helvetica','normal'); pdf.setFontSize(8); pdf.setTextColor(130,138,155);
@@ -3082,7 +2939,6 @@ kbd {
                 });
                 y = pdf.lastAutoTable.finalY + 12;
             }
-
             if (shapB64) {
                 if (y + 50 > H - 20) { pdf.addPage(); pageHeader('Section 4 — Feature Explanation (LIME & SHAP)'); y = 26; }
                 y = sectionTitle('4b.  SHAP — Global Feature Importance', y);
@@ -3099,43 +2955,13 @@ kbd {
                 }
             }
         }
-
-        // ══════════════════════════════════════════════════
-        // FOOTERS on all pages
-        // ══════════════════════════════════════════════════
         var total = pdf.internal.getNumberOfPages();
         for (var p = 1; p <= total; p++) {
             pdf.setPage(p);
             pageFooter(p, total);
         }
         return pdf;
-
-        // legacy shap block (unreachable — kept for reference)
-        if (shapB64) {
-            var img2 = new Image(); img2.src = shapB64;
-            await new Promise(r => img2.onload = r);
-            if (img2.naturalWidth) {
-                var maxW2 = W - 30, maxH2 = 90;
-                var iw2 = img2.naturalWidth, ih2 = img2.naturalHeight;
-                if (iw2 > maxW2) { ih2 = ih2 * maxW2 / iw2; iw2 = maxW2; }
-                if (ih2 > maxH2) { iw2 = iw2 * maxH2 / ih2; ih2 = maxH2; }
-                if (y + ih2 + 20 > pdf.internal.pageSize.height - 20) { pdf.addPage(); y = 15; }
-                pdf.setFont('helvetica','bold'); pdf.setFontSize(13); pdf.setTextColor(...PRI);
-                pdf.text('Global SHAP Feature Importance', 15, y); y += 6;
-                pdf.addImage(shapB64, 'PNG', (W - iw) / 2, y, iw, ih); y += ih + 10;
-            }
-        }
-        // Footer on each page
-        const n = pdf.internal.getNumberOfPages();
-        for (var p = 1; p <= n; p++) {
-            pdf.setPage(p);
-            pdf.setFontSize(8); pdf.setTextColor(150,150,150);
-            pdf.text('Page ' + p + ' of ' + n, W - 15, pdf.internal.pageSize.height - 8, { align:'right' });
-            pdf.text('EPIC-AMP - Zewail City - BCBU', 15, pdf.internal.pageSize.height - 8);
-        }
-        return pdf;
     }
-
     </script>
 </body>
 </html>