Update index.html

index.html

@@ -690,8 +690,8 @@
         <div class="button-group-wrapper">
             <div id="processing-time-info">Estimated processing time: around 30 seconds.</div>
             <div class="button-group">
-                <button id="clear-btn">Clear Input</button> <!-- NO onclick attribute here, handled in JS -->
-                <button id="predict-btn">Submit</button>   <!-- NO onclick attribute here, handled in JS -->
+                <button id="clear-btn">Clear Input</button> <!-- NO onclick attribute here -->
+                <button id="predict-btn">Submit</button>   <!-- NO onclick attribute here -->
             </div>
         </div>
 
@@ -860,7 +860,7 @@
                 </li>
                 <li><strong>Solvent Accessibility (SolventAccessibilityD3001):</strong>
                     <ul>
-                        <li><strong>Description:</strong> Reflects how exposed the residues are to the solvent (water).</li>
+                        <li><strong>Description:</b> Reflects how exposed the residues are to the solvent (water).</li>
                         <li><strong>Interpretation:</b> Solvent-accessible residues positively contribute to AMP prediction. This might indicate that exposed residues facilitate interaction with bacterial membranes or the surrounding environment.</li>
                     </ul>
                 </li>
@@ -992,23 +992,21 @@
     </address>
 </footer>
 
-<!-- IMPORTANT: The script tag must be type="module" to use import statements. -->
 <script type="module">
     import { Client } from "https://esm.sh/@gradio/client";
 
     const GRADIO_HF_SPACE_RAW_URL = "https://huggingface.co/spaces/nonzeroexit/AMP-Classifier";
     const GRADIO_PREDICTION_TARGET_ID = "nonzeroexit/AMP-Classifier";
-    
-    // ACTION REQUIRED: ENSURE THIS SPACE IS PUBLIC ON HUGGING FACE.
-    // If it's private, you WILL get a 401 Unauthorized error.
-    const GRADIO_EMAIL_TARGET_ID = "nonzeroexit/amp-email-sender"; // Verify this Space ID is correct and PUBLIC!
+    // This Space ID is technically still used in initClient but won't be connected
+    // for email sending functionality due to being disabled.
+    const GRADIO_EMAIL_TARGET_ID = "nonzeroexit/amp-email-sender"; // Email backend reference (disabled)
 
     // --- DOM Elements ---
     const sequenceInput = document.getElementById('sequence');
     const charCount = document.getElementById('char-count');
     const errorDiv = document.getElementById('error');
     const predictBtn = document.getElementById('predict-btn');
-    const clearBtn = document.getElementById('clear-btn'); // Get clear button reference
+    const clearBtn = document.getElementById('clear-btn'); 
     const fileInput = document.getElementById('file-input');
     const downloadLink = document.getElementById('download-link');
     const ampClassificationOutput = document.getElementById('amp-classification-output');
@@ -1021,11 +1019,14 @@
     const emailErrorDiv = document.getElementById('email-error');
     const emailStatusDiv = document.getElementById('email-status');
 
-    let clientInstancePrediction; // Dedicated client for the prediction space
-    let clientInstanceEmail;    // Dedicated client for the email sending space
+    let clientInstancePrediction; // Only prediction client will be connected
+    let clientInstanceEmail = null;    // Email client will NOT be connected (explicitly null)
     let debounceTimer;
     let countUpIntervalId;
 
+    // Flag to control email functionality globally
+    const IS_EMAIL_SENDING_ENABLED = false; // <<< SET TO false TO DISABLE EMAIL SENDING
+
     // --- Utility Functions for Error Display (Defined at top of module scope) ---
     function showError(message) {
         if(errorDiv) {
@@ -1058,26 +1059,27 @@
             clientInstancePrediction = await Client.connect(GRADIO_PREDICTION_TARGET_ID);
             console.log("Gradio client for prediction initialized successfully directly to space ID:", GRADIO_PREDICTION_TARGET_ID);
 
-            // Attempt to connect to the email sending space
-            // This is the point where the 401 Unauthorized error will occur if the space is private.
-            clientInstanceEmail = await Client.connect(GRADIO_EMAIL_TARGET_ID);
-            console.log("Gradio client for email sender initialized successfully directly to space ID:", GRADIO_EMAIL_TARGET_ID);
-
-            // Initial check for button state after clients are ready
+            // ONLY CONNECT EMAIL CLIENT IF FEATURE IS ENABLED
+            if (IS_EMAIL_SENDING_ENABLED) {
+                clientInstanceEmail = await Client.connect(GRADIO_EMAIL_TARGET_ID);
+                console.log("Gradio client for email sender initialized successfully directly to space ID:", GRADIO_EMAIL_TARGET_ID);
+            } else {
+                console.log("Email sending functionality is disabled, skipping email client connection.");
+            }
+            
             updatePredictButtonState();
 
         } catch (error) {
-            console.error("Failed to initialize Gradio client for prediction or email:", error);
-            // Use the locally available showError function
+            console.error("Failed to initialize Gradio client for prediction (or email if enabled):", error);
             showError(`Failed to connect to a Hugging Face Space. This might be due to incorrect Space IDs, private spaces, or network issues. Error details: ${error.message}`);
-            // If either client fails to initialize, disable the predict button.
+            // If prediction client fails, or if email is enabled and its client fails, disable the button.
             if (predictBtn) predictBtn.disabled = true; 
         }
     }
 
     // --- Initial Setup on Window Load ---
     window.onload = function() {
-        initClient(); // Call initClient when window loads
+        initClient();
 
         if (document.getElementById('info-icon')) {
              document.getElementById('info-icon').addEventListener('mouseenter', showTooltip);
@@ -1085,23 +1087,22 @@
         }
         if (fileInput) fileInput.addEventListener('change', handleFileSelect);
 
-        // Add event listeners for input fields to update button state
         if (sequenceInput) {
             sequenceInput.addEventListener('input', updateAllInputsAndButtonState);
             sequenceInput.addEventListener('paste', handleSequencePaste);
             sequenceInput.addEventListener('keypress', handleSequenceKeyPress);
         }
+        // Email input listeners still active for user input and local visual validation
         if (userEmailInput) {
             userEmailInput.addEventListener('input', updateAllInputsAndButtonState);
         }
 
-        // --- ATTACH EVENT LISTENERS TO BUTTONS ---
-        // This is the fix for the ReferenceError when using type="module".
+        // Attach event listeners to buttons
         if (clearBtn) clearBtn.addEventListener('click', clearInput);
         if (predictBtn) predictBtn.addEventListener('click', classifySequenceDebounced);
 
 
-        clearInput(); // Clear everything and set initial disabled state
+        clearInput(); 
     };
 
     // --- Tooltip Functions ---
@@ -1120,14 +1121,19 @@
         if(sequenceInput) sequenceInput.value = '';
         if(fileInput) fileInput.value = '';
         if(charCount) charCount.textContent = '0';
-        clearGeneralError(); // Clears general sequence error
+        clearGeneralError(); 
 
         // Clear email specific fields
         if(userEmailInput) userEmailInput.value = '';
         if(emailErrorDiv) emailErrorDiv.style.display = 'none';
         if(emailStatusDiv) {
-            emailStatusDiv.textContent = '';
-            emailStatusDiv.style.color = 'var(--text-color)'; // Reset color
+            if (IS_EMAIL_SENDING_ENABLED) {
+                emailStatusDiv.textContent = '';
+                emailStatusDiv.style.color = 'var(--text-color)'; 
+            } else {
+                emailStatusDiv.textContent = 'Email sending is currently disabled by the tool.';
+                emailStatusDiv.style.color = 'var(--info-color)'; // Neutral info color
+            }
         }
 
         if(downloadLink) {
@@ -1155,7 +1161,7 @@
             countUpIntervalId = null;
         }
 
-        updatePredictButtonState(); // Ensure button is disabled after clearing
+        updatePredictButtonState(); 
         if(predictBtn) predictBtn.textContent = 'Submit';
     }
 
@@ -1182,7 +1188,9 @@
         }
 
         clearGeneralError();
-        if(emailErrorDiv) emailErrorDiv.style.display = 'none'; // Clear email validation error
+        // Clear email validation error, though it won't block submission
+        if(emailErrorDiv) emailErrorDiv.style.display = 'none'; 
+
         const reader = new FileReader();
         reader.onload = function(e) {
             try {
@@ -1193,7 +1201,7 @@
                         sequenceInput.dataset.source = 'file';
                     }
                     updateCharacterCount();
-                    updateAllInputsAndButtonState(); // Re-evaluate all states
+                    updateAllInputsAndButtonState();
                 } else {
                     showError("No valid sequence found in FASTA file.");
                     if(fileInput) fileInput.value = '';
@@ -1262,12 +1270,13 @@
     }
 
     function validateEmail(email) {
+        // Email validation is now only for local display, not blocking submission
         if (!email) {
-            return { isValid: false, message: "Email address is required to send the report." };
+            return { isValid: false, message: "Email address is empty." };
         }
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         if (!emailRegex.test(email)) {
-            return { isValid: false, message: "Please enter a valid email address." };
+            return { isValid: false, message: "Please enter a valid email format." };
         }
         return { isValid: true, message: "" };
     }
@@ -1287,11 +1296,12 @@
         const emailValidation = validateEmail(userEmailInput ? userEmailInput.value : '');
 
         if (!sequenceValidation.isValid) {
-            showError(sequenceValidation.message); // Use showError here
+            showError(sequenceValidation.message);
         } else {
             clearGeneralError();
         }
 
+        // Display email format errors locally, but don't clear prediction error message
         if (!emailValidation.isValid && userEmailInput && userEmailInput.value.length > 0) {
             if (emailErrorDiv) {
                 emailErrorDiv.textContent = emailValidation.message;
@@ -1300,29 +1310,33 @@
         } else {
             if (emailErrorDiv) emailErrorDiv.style.display = 'none';
         }
+        // If email sending is disabled, provide a default status message.
+        if (emailStatusDiv) {
+            if (!IS_EMAIL_SENDING_ENABLED) {
+                emailStatusDiv.textContent = 'Email sending is currently disabled by the tool.';
+                emailStatusDiv.style.color = 'var(--info-color)'; 
+            } else if (userEmailInput && userEmailInput.value.trim() === '') {
+                 // Clear previous status if user input cleared.
+                emailStatusDiv.textContent = '';
+                emailStatusDiv.style.color = 'var(--text-color)'; 
+            }
+        }
 
         if(micCheckboxes) micCheckboxes.forEach(checkbox => {
             checkbox.disabled = !sequenceValidation.isValid;
             if (!sequenceValidation.isValid) checkbox.checked = false;
         });
 
-        updatePredictButtonState(sequenceValidation.isValid, emailValidation.isValid);
+        updatePredictButtonState(sequenceValidation.isValid); // Pass only sequence validity
     }
 
-    function updatePredictButtonState(sequenceIsValid = false, emailIsValid = false) {
+    function updatePredictButtonState(sequenceIsValid = false) {
         if (predictBtn) {
-            const currentSequenceValue = sequenceInput ? sequenceInput.value.trim() : '';
-            const currentEmailValue = userEmailInput ? userEmailInput.value.trim() : '';
-
-            const seqState = validateSequence(currentSequenceValue).isValid;
-            const emailState = validateEmail(currentEmailValue).isValid;
-            
-            // Button is disabled if either seq or email is invalid, OR if Gradio clients aren't ready
-            predictBtn.disabled = !(seqState && emailState) || !clientInstancePrediction || !clientInstanceEmail;
+            // Button enabled solely on valid sequence input AND successful prediction client connection
+            predictBtn.disabled = !sequenceIsValid || !clientInstancePrediction; 
         }
     }
 
-
     // --- Sequence Input Event Handlers ---
     function handleSequencePaste(e) {
         e.preventDefault();
@@ -1362,25 +1376,18 @@
     }
 
     async function classifySequence() {
-        // IMPORTANT: Ensure BOTH prediction and email clients are ready before proceeding
         if (!clientInstancePrediction) { 
             showError("Classifier service is not ready. Please wait a moment and try again.");
             console.error("Gradio client instance for prediction is not initialized when classifySequence called.");
-            updatePredictButtonState(); // Re-check button state if an issue is found
-            return;
-        }
-        if (!clientInstanceEmail) {
-            showError("Email service is not ready. Please wait a moment and try again.");
-            console.error("Gradio client instance for email is not initialized when classifySequence called.");
-            updatePredictButtonState(); // Re-check button state if an issue is found
+            updatePredictButtonState(); 
             return;
         }
 
         const currentSequence = sequenceInput ? sequenceInput.value.trim().toUpperCase() : "";
-        const userEmail = userEmailInput ? userEmailInput.value.trim() : "";
+        const userEmail = userEmailInput ? userEmailInput.value.trim() : ""; // Still get email, but won't be used for sending
 
         const sequenceValidation = validateSequence(currentSequence);
-        const emailValidation = validateEmail(userEmail);
+        // const emailValidation = validateEmail(userEmail); // Email validation is now only for local display/info
 
         if (!sequenceValidation.isValid) {
             showError(sequenceValidation.message);
@@ -1389,21 +1396,28 @@
         } else {
             clearGeneralError();
         }
+        
+        // Remove email validation check that blocked submission
+        // if (!emailValidation.isValid && IS_EMAIL_SENDING_ENABLED) { 
+        //     if (emailErrorDiv) {
+        //         emailErrorDiv.textContent = emailValidation.message;
+        //         emailErrorDiv.style.display = 'block';
+        //     }
+        //     updatePredictButtonState();
+        //     return;
+        // } else {
+        //     if (emailErrorDiv) emailErrorDiv.style.display = 'none';
+        // }
 
-        if (!emailValidation.isValid) {
-            if (emailErrorDiv) {
-                emailErrorDiv.textContent = emailValidation.message;
-                emailErrorDiv.style.display = 'block';
-            }
-            updatePredictButtonState();
-            return;
-        } else {
-            if (emailErrorDiv) emailErrorDiv.style.display = 'none';
-        }
 
         if(emailStatusDiv) {
-            emailStatusDiv.textContent = '';
-            emailStatusDiv.style.color = 'var(--text-color)';
+            if (IS_EMAIL_SENDING_ENABLED) {
+                emailStatusDiv.textContent = '';
+                emailStatusDiv.style.color = 'var(--text-color)';
+            } else {
+                emailStatusDiv.textContent = 'Email sending is currently disabled by the tool.';
+                emailStatusDiv.style.color = 'var(--info-color)'; 
+            }
         }
 
         if (predictBtn) predictBtn.disabled = true;
@@ -1497,7 +1511,7 @@
             } catch (pdfGenerationError) {
                 console.error("Error during PDF report content generation:", pdfGenerationError);
                 showError(`PDF report generation failed: ${pdfGenerationError.message}`);
-                emailStatusDiv.textContent = 'PDF generation failed, cannot send email.';
+                emailStatusDiv.textContent = 'PDF generation failed, email not sent (functionality disabled).';
                 emailStatusDiv.style.color = 'var(--clear-button-bg)';
                 pdfDoc = null; // Ensure pdfDoc is null on error
             }
@@ -1520,9 +1534,16 @@
                         additionalDetailsOutput.appendChild(downloadLink);
                     }
 
-                    // --- Call Hugging Face Gradio backend to send email ---
-                    // This relies on clientInstanceEmail being successfully initialized
-                    await sendEmailWithReport(userEmail, pdfBlob, pdfFileName, currentSequence, ampLabelFromPrediction, ampConfidenceFromPrediction);
+                    // --- Email logic based on IS_EMAIL_SENDING_ENABLED flag ---
+                    if (IS_EMAIL_SENDING_ENABLED) {
+                        await sendEmailWithReport(userEmail, pdfBlob, pdfFileName, currentSequence, ampLabelFromPrediction, ampConfidenceFromPrediction);
+                    } else {
+                        console.log("Email sending is disabled. Not attempting to send.");
+                        if(emailStatusDiv) {
+                            emailStatusDiv.textContent = 'Email report generation and sending are currently disabled by the tool.';
+                            emailStatusDiv.style.color = 'var(--info-color)'; 
+                        }
+                    }
 
                 } else {
                     additionalDetailsOutput.innerHTML = '<p class="info-message" style="color: var(--warning-color);">Could not generate PDF report for download.</p>';
@@ -1541,7 +1562,7 @@
             }
 
         } catch (error) {
-            console.error("Error during prediction or processing (direct attempt):", error);
+            console.error("Error during prediction or processing:", error);
             showError(`Prediction failed: ${error.message || "Unknown error."} Please check the Hugging Face Gradio Space for any issues or temporary downtime.`);
             if(ampClassificationOutput) ampClassificationOutput.innerHTML = '<p style="text-align: center; color: var(--clear-button-bg);">Error in Prediction</p>';
             if(additionalDetailsOutput) {
@@ -1551,19 +1572,31 @@
                      downloadLink.style.display = 'none';
                  }
             }
-            emailStatusDiv.textContent = `Email not sent due to prediction error: ${error.message}`;
+            if (IS_EMAIL_SENDING_ENABLED) {
+                emailStatusDiv.textContent = `Email not sent due to prediction error: ${error.message}`;
+            } else {
+                emailStatusDiv.textContent = `Email sending is disabled. Prediction failed: ${error.message}`;
+            }
             emailStatusDiv.style.color = 'var(--clear-button-bg)';
         } finally {
             if (countUpIntervalId) { clearInterval(countUpIntervalId); countUpIntervalId = null; }
             if (predictBtn) { predictBtn.textContent = 'Submit';}
-            updatePredictButtonState();
+            updatePredictButtonState(); // Ensure button is re-enabled/disabled based on final prediction input state
         }
     }
 
-    // --- Send Email Function (Frontend to Gradio Backend) ---
+    // --- Dummy Send Email Function (when disabled) / Original logic (when enabled) ---
     async function sendEmailWithReport(email, pdfBlob, fileName, sequence, prediction, confidence) {
         if (!emailStatusDiv) return;
 
+        if (!IS_EMAIL_SENDING_ENABLED) {
+            console.log("Email sending is currently disabled. Not proceeding with backend call.");
+            emailStatusDiv.textContent = 'Email report was NOT sent: Functionality is disabled.';
+            emailStatusDiv.style.color = 'var(--info-color)'; 
+            return;
+        }
+
+        // --- Original email sending logic (ONLY runs if IS_EMAIL_SENDING_ENABLED is true) ---
         emailStatusDiv.textContent = 'Sending email...';
         emailStatusDiv.style.color = 'var(--info-color)'; // Blue for processing
 
@@ -1577,14 +1610,11 @@
             if (!clientInstanceEmail) {
                 emailStatusDiv.textContent = 'Email service is not ready. Please try again.';
                 emailStatusDiv.style.color = 'var(--clear-button-bg)';
-                console.error("Gradio email client instance is not initialized.");
+                console.error("Gradio email client instance is not initialized, even though IS_EMAIL_SENDING_ENABLED is true. Check initClient for errors.");
                 return;
             }
 
             try {
-                // IMPORTANT: "/send_email_report" must match the name of the Python function
-                // in your Gradio `app.py` that you wrapped with `gr.Interface`.
-                // e.g., gr.Interface(fn=send_email_report, ...) -> "/send_email_report"
                 const emailResult = await clientInstanceEmail.predict(
                     "/send_email_report", 
                     [
@@ -1661,7 +1691,7 @@
     async function generatePDFReportContent(sequenceForPdf, predictionForPdf, confidenceForPdf, micResultsForPdf, limeFeaturesForPdf) {
         if (typeof window.jspdf === 'undefined' || typeof window.jspdf.jsPDF === 'undefined' || typeof window.jspdf.jsPDF !== 'function') {
             console.error("jsPDF library (window.jspdf.jsPDF) is not loaded or not correctly exposed as a function.");
-            showError("PDF generation library not loaded. Cannot create report."); // Using showError
+            showError("PDF generation library not loaded. Cannot create report.");
             return null;
         }
         const jsPDF = window.jspdf.jsPDF;
@@ -1671,12 +1701,12 @@
             pdf = new jsPDF();
             if (!pdf || !pdf.internal || !pdf.internal.pageSize || pdf.internal.pageSize.width === undefined || pdf.internal.pageSize.width === null) {
                 console.error("Critical error: jsPDF instance or its internal properties are invalid.");
-                showError("PDF generation failed: Invalid PDF object."); // Using showError
+                showError("PDF generation failed: Invalid PDF object.");
                 return null;
             }
         } catch (e) {
             console.error("Failed to instantiate jsPDF object:", e);
-            showError(`PDF generation failed: Could not initialize PDF library. Error: ${e.message}`); // Using showError
+            showError(`PDF generation failed: Could not initialize PDF library. Error: ${e.message}`);
             return null;
         }