add progress bar

index.html

@@ -308,6 +308,33 @@
       color: #1976d2;
     }
 
+    /* Progress bar styling */
+    .progress-container {
+      width: 100%;
+      background: var(--grey-100);
+      border-radius: 4px;
+      height: 12px;
+      margin: calc(var(--spacing-unit) * 2) 0;
+      overflow: hidden;
+      border: 1px solid var(--grey-200);
+    }
+
+    .progress-bar {
+      height: 100%;
+      background: var(--black);
+      border-radius: 3px;
+      transition: width 0.3s ease;
+      width: 0%;
+    }
+
+    .processing-note {
+      font-size: 0.9rem;
+      color: var(--black);
+      opacity: 0.7;
+      line-height: 1.4;
+      margin-bottom: calc(var(--spacing-unit) * 2);
+    }
+
     /* Responsive adjustments */
     @media (max-width: 968px) {
       .hero {
@@ -403,10 +430,16 @@
       <section class="card" aria-labelledby="step3">
         <h2 id="step3">3. Send to server</h2>
         <div class="card-content">
+          <div class="processing-note" id="processingNote" hidden>
+            <strong>Estimated processing time:</strong> <span id="estimatedTime">0</span> seconds
+          </div>
           <div>
             <p id="srvStatus" class="status" aria-live="polite">Waiting for encrypted data… (server processing can take several minutes)</p>
             <p id="srvComputing" class="status" aria-live="polite" hidden>Server computing…</p>
           </div>
+          <div class="progress-container" id="progressContainer" hidden>
+            <div class="progress-bar" id="progressBar"></div>
+          </div>
           <div class="controls" style="margin-top: auto;">
             <button id="btnSend" class="btn" disabled>📡 Send</button>
             <span id="spin" class="loader" hidden aria-label="Working"></span>

wasm-demo.js

@@ -11,6 +11,8 @@ let keygenWorker;
 let encryptWorker;
 let sessionUid;
 let taskId;
+let currentTokenCount = 0;
+let progressTimer;
 
 // Memory-efficient base64 encoding for large Uint8Array
 function uint8ToBase64(uint8) {
@@ -188,8 +190,16 @@ $('tokenInput').addEventListener('input', () => {
         try {
             const tokenIds = llama3Tokenizer.encode(text);
             const tokenCount = tokenIds.length;
+            currentTokenCount = tokenCount;
             const TOKEN_LIMIT = 16;
             
+            // Update estimated processing time
+            const estimatedSeconds = tokenCount * 30;
+            const minutes = Math.floor(estimatedSeconds / 60);
+            const seconds = estimatedSeconds % 60;
+            const timeText = minutes > 0 ? `${minutes}m ${seconds}s` : `${seconds}s`;
+            $('estimatedTime').textContent = timeText;
+            
             if (tokenCount > TOKEN_LIMIT) {
                 $('encStatus').textContent = `⚠️ ${tokenCount}/${TOKEN_LIMIT} tokens - text too long`;
                 $('encStatus').style.color = '#d32f2f';
@@ -203,10 +213,12 @@ $('tokenInput').addEventListener('input', () => {
         } catch (e) {
             // Tokenizer might not be ready yet
             $('encStatus').textContent = '';
+            currentTokenCount = 0;
         }
     } else {
         $('encStatus').textContent = '';
         $('encStatus').style.color = '';
+        currentTokenCount = 0;
     }
 });
 
@@ -273,8 +285,19 @@ async function pollTaskStatus(currentTaskId, currentUid) {
             showComputing = true;
         } else if (statusData.status === 'success' || statusData.status === 'completed') {
             userMessage = 'Processing complete!';
+            // Set progress to 100% and clear timer
+            $('progressBar').style.width = '100%';
+            if (progressTimer) {
+                clearInterval(progressTimer);
+                progressTimer = null;
+            }
         } else if (['failure', 'revoked', 'unknown', 'error'].includes(statusData.status.toLowerCase())) {
             userMessage = 'Task failed. Please try again.';
+            // Clear timer on failure
+            if (progressTimer) {
+                clearInterval(progressTimer);
+                progressTimer = null;
+            }
         } else {
             // Fallback for any other status
             userMessage = `Status: ${statusData.status}`;
@@ -288,6 +311,11 @@ async function pollTaskStatus(currentTaskId, currentUid) {
         } else if (['failure', 'revoked', 'unknown', 'error'].includes(statusData.status.toLowerCase())) {
             console.error('[Poll] Task failed or unrecoverable:', statusData);
             show('spin', false);
+            show('progressContainer', false);
+            if (progressTimer) {
+                clearInterval(progressTimer);
+                progressTimer = null;
+            }
             return null;
         } else {
             setTimeout(() => pollTaskStatus(currentTaskId, currentUid).then(finalStatus => {
@@ -301,10 +329,24 @@ async function pollTaskStatus(currentTaskId, currentUid) {
         console.error('[Poll] Polling exception:', e);
         $('srvStatus').textContent = 'Connection error. Please check your network.';
         show('spin', false);
+        show('progressContainer', false);
+        if (progressTimer) {
+            clearInterval(progressTimer);
+            progressTimer = null;
+        }
         return null;
     }
 }
 
+function updateProgressBar() {
+    if (!window.taskStartTime || !window.expectedDuration) return;
+    
+    const elapsed = performance.now() - window.taskStartTime;
+    const progress = Math.min((elapsed / window.expectedDuration) * 100, 95); // Cap at 95% until completion
+    $('progressBar').style.width = `${progress}%`;
+    console.log(`[Progress] ${progress.toFixed(1)}% (${(elapsed/1000).toFixed(1)}s / ${(window.expectedDuration/1000).toFixed(1)}s)`);
+}
+
 async function getTaskResult(currentTaskId, currentUid, taskName) {
     $('srvStatus').textContent = 'Retrieving results...';
     try {
@@ -329,7 +371,12 @@ async function getTaskResult(currentTaskId, currentUid, taskName) {
         $('srvStatus').textContent = 'Failed to retrieve results. Please try again.';
     } finally {
         show('spin', false);
+        show('progressContainer', false);
         $('srvComputing').hidden = true;
+        if (progressTimer) {
+            clearInterval(progressTimer);
+            progressTimer = null;
+        }
     }
 }
 
@@ -345,9 +392,19 @@ $('btnSend').onclick = async () => {
 
     show('encIcon', false);
     show('spin', true);
+    show('processingNote', true);
+    show('progressContainer', true); // Show progress container immediately
+    $('progressBar').style.width = '0%'; // Reset progress bar
     $('srvStatus').textContent = 'Sending encrypted data...';
     $('srvComputing').hidden = true;  // Ensure it's hidden initially
     window.taskStartTime = performance.now();
+    window.expectedDuration = currentTokenCount * 30 * 1000; // Convert to milliseconds
+    
+    // Clear any existing progress timer
+    if (progressTimer) {
+        clearInterval(progressTimer);
+        progressTimer = null;
+    }
 
     try {
         const formData = new FormData();
@@ -372,6 +429,11 @@ $('btnSend').onclick = async () => {
         taskId = newTaskId;
         console.log('[Main] Task submitted to server. Task ID:', taskId);
         $('srvStatus').textContent = 'Request submitted. Checking status...';
+        
+        // Start progress bar updates
+        if (!progressTimer) {
+            progressTimer = setInterval(updateProgressBar, 1000);
+        }
 
         pollTaskStatus(taskId, sessionUid).then(finalStatus => {
             if (finalStatus && (finalStatus.status === 'success' || finalStatus.status === 'completed')) {
@@ -384,7 +446,12 @@ $('btnSend').onclick = async () => {
         console.error(`[Main] Task submission failed after ${duration}s:`, e);
         $('srvStatus').textContent = 'Failed to submit request. Please try again.';
         show('spin', false);
+        show('progressContainer', false);
         $('srvComputing').hidden = true;
+        if (progressTimer) {
+            clearInterval(progressTimer);
+            progressTimer = null;
+        }
     }
 };