Update index.html

index.html

@@ -992,9 +992,13 @@
     </address>
 </footer>
 
-<script>
+<script type="module"> // Changed to type="module" for dynamic import of Gradio Client
+    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";
+    // *** IMPORTANT: Replace with YOUR actual Hugging Face Space ID for email sending ***
+    const GRADIO_EMAIL_TARGET_ID = "your-username/amp-email-sender"; 
 
     const sequenceInput = document.getElementById('sequence');
     const charCount = document.getElementById('char-count');
@@ -1013,7 +1017,8 @@
     const emailErrorDiv = document.getElementById('email-error');
     const emailStatusDiv = document.getElementById('email-status');
 
-    let clientInstance;
+    let clientInstancePrediction; // For the prediction space
+    let clientInstanceEmail;    // For the email sending space
     let debounceTimer;
     let countUpIntervalId; // For count-up timer
 
@@ -1029,32 +1034,23 @@
 
     // --- Gradio Client Initialization ---
     async function initClient() {
-        let gradioClientClass;
-        try {
-            const module = await import("https://esm.sh/@gradio/client");
-            gradioClientClass = module.Client || module.default;
-
-            if (!gradioClientClass || typeof gradioClientClass.connect !== 'function') {
-                console.error("Gradio module loaded but does not export a 'Client' class with a static 'connect' method or a usable default export for connection:", module);
-                throw new Error("Gradio client library export structure not recognizable. This may indicate an extremely new or old Gradio client version has a different API, or a bundling issue with esm.sh.");
-            }
-        } catch (importError) {
-            console.error("Failed to dynamically import Gradio client module from esm.sh:", importError);
-            showError("Could not load core prediction library. Please ensure a stable internet connection and try clearing your browser's cache (hard refresh). If the issue persists, the CDN (esm.sh) or Gradio client library itself might have changed or be experiencing issues.");
-            if (predictBtn) predictBtn.disabled = true;
-            return;
-        }
-
         try {
-            clientInstance = await gradioClientClass.connect(GRADIO_PREDICTION_TARGET_ID);
+            // Connect to your prediction space
+            clientInstancePrediction = await Client.connect(GRADIO_PREDICTION_TARGET_ID);
             console.log("Gradio client for prediction initialized successfully directly to space ID:", GRADIO_PREDICTION_TARGET_ID);
 
-            // Initial check for button state after client is ready
+            // Connect to your email sending space
+            // If the email sender is in the SAME space as the classifier, you might only need one client and call its function.
+            // For now, assume separate spaces for clarity.
+            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
             updatePredictButtonState();
 
         } catch (error) {
-            console.error("Failed to initialize Gradio client for prediction (direct attempt):", error);
-            showError(`Failed to connect to the classifier service. Please check if the Hugging Face Gradio Space (${GRADIO_HF_SPACE_RAW_URL}) is active and publicly accessible. Error details: ${error.message}`);
+            console.error("Failed to initialize Gradio client for prediction or email:", error);
+            showError(`Failed to connect to a service. Please check if Hugging Face Gradio Spaces (${GRADIO_PREDICTION_TARGET_ID}, ${GRADIO_EMAIL_TARGET_ID}) are active and publicly accessible. Error details: ${error.message}`);
             if (predictBtn) predictBtn.disabled = true;
         }
     }
@@ -1358,9 +1354,9 @@
     }
 
     async function classifySequence() {
-        if (!clientInstance) {
+        if (!clientInstancePrediction) { // Use clientInstancePrediction here
             showGeneralError("Classifier service is not ready. Please wait a moment and try again.");
-            console.error("Gradio client instance is not initialized when classifySequence called.");
+            console.error("Gradio client instance for prediction is not initialized when classifySequence called.");
             updatePredictButtonState();
             return;
         }
@@ -1424,7 +1420,7 @@
         let limeFeaturesForPdfFromPrediction = [];
 
         try {
-            const classificationResult = await clientInstance.predict("/predict", [currentSequence]);
+            const classificationResult = await clientInstancePrediction.predict("/predict", [currentSequence]); // Use clientInstancePrediction here
             console.log("Gradio Result (Prediction):", classificationResult);
 
             if (!classificationResult || !classificationResult.data || typeof classificationResult.data[0] !== 'string') {
@@ -1551,7 +1547,7 @@
         }
     }
 
-    // --- Send Email Function (Frontend to Backend) ---
+    // --- Send Email Function (Frontend to Gradio Backend) ---
     async function sendEmailWithReport(email, pdfBlob, fileName, sequence, prediction, confidence) {
         if (!emailStatusDiv) return;
 
@@ -1563,43 +1559,50 @@
 
         reader.onloadend = async function() {
             const base64data = reader.result;
-            const base64PdfContent = base64data.split(',')[1]; // Strip "data:application/pdf;base64," prefix
+            const base64PdfContent = base64data.split(',')[1]; // Strip "data:application/pdf;base64," prefix [13]
+
+            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.");
+                return;
+            }
 
             try {
-                // **IMPORTANT**: Replace with the actual URL of your backend email sending service.
-                // For local testing, it might be 'http://localhost:3000/api/send-report-email'
-                // For deployment, it will be your deployed backend's URL.
-                const backendEndpoint = 'http://localhost:3000/api/send-report-email'; 
-
-                const response = await fetch(backendEndpoint, {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        recipientEmail: email,
-                        pdfContent: base64PdfContent, // Base64 encoded PDF
-                        fileName: fileName,
-                        sequence: sequence, // Pass sequence for email body
-                        prediction: prediction, // Pass prediction for email body
-                        confidence: confidence // Pass confidence for email body
-                    }),
-                });
-
-                if (response.ok) {
-                    const result = await response.json();
-                    emailStatusDiv.textContent = result.message || 'Email sent successfully!';
-                    emailStatusDiv.style.color = 'var(--success-color)';
+                // Call the Gradio API endpoint for sending email
+                // The endpoint is typically "/run/your_function_name" for gr.Interface
+                const emailResult = await clientInstanceEmail.predict(
+                    "/send_email_report", // This must match the name of the Python function in app.py's gr.Interface
+                    [
+                        email,              // recipient_email: str
+                        base64PdfContent,   // pdf_content_base64: str
+                        fileName,           // file_name: str
+                        sequence,           // sequence: str
+                        prediction,         // prediction: str
+                        confidence          // confidence: float
+                    ]
+                );
+
+                console.log("Email sending Gradio result:", emailResult);
+
+                if (emailResult && emailResult.data && emailResult.data[0]) {
+                    const statusMessage = emailResult.data[0];
+                    if (statusMessage.includes("successfully")) {
+                        emailStatusDiv.textContent = statusMessage;
+                        emailStatusDiv.style.color = 'var(--success-color)';
+                    } else {
+                        emailStatusDiv.textContent = `Failed to send email: ${statusMessage}`;
+                        emailStatusDiv.style.color = 'var(--clear-button-bg)';
+                    }
                 } else {
-                    const errorData = await response.json();
-                    emailStatusDiv.textContent = `Failed to send email: ${errorData.message || response.statusText}`;
+                    emailStatusDiv.textContent = 'Failed to send email: Unexpected response from service.';
                     emailStatusDiv.style.color = 'var(--clear-button-bg)';
-                    console.error('Backend email error:', errorData);
                 }
+
             } catch (error) {
                 emailStatusDiv.textContent = `Error communicating with email service: ${error.message}`;
                 emailStatusDiv.style.color = 'var(--clear-button-bg)';
-                console.error('Frontend network error sending email:', error);
+                console.error('Frontend error calling Gradio email API:', error);
             }
         };