add estimation of completion time

index.html

@@ -431,6 +431,7 @@ sequenceDiagram
           <div>
             <p id="srvStatus" class="status" aria-live="polite">Waiting for encrypted data...</p>
             <p id="srvComputing" class="status" aria-live="polite" hidden>Server computing...</p>
+            <p id="srvProgress" class="status" aria-live="polite" hidden></p>
           </div>
           <div class="controls" style="margin-top: auto;">
             <button id="btnSend" class="btn" disabled>📡 Send</button>

wasm-demo.js

@@ -173,6 +173,7 @@ $('btnSend').onclick = async () => {
     show('spin', true);
     $('srvStatus').textContent = 'Preparing request…';
     $('srvComputing').hidden = true;
+    $('srvProgress').hidden = true;
     const startTime = performance.now();
     try {
         const ciphertext_b64 = await uint8ToBase64(encTokens);
@@ -198,16 +199,34 @@ $('btnSend').onclick = async () => {
 
         $('srvStatus').textContent = '✓ sent';
         $('srvComputing').hidden = false;
+        $('srvProgress').hidden = false;
+        
+        const tokenCount = llama3Tokenizer.encode($('tokenInput').value.trim()).length;
+        const estimatedTime = tokenCount * 15;
+        const endTime = startTime + (estimatedTime * 1000);
+        
+        const progressInterval = setInterval(() => {
+            const now = performance.now();
+            const elapsed = (now - startTime) / 1000;
+            const remaining = Math.max(0, estimatedTime - elapsed);
+            $('srvProgress').textContent = `Estimated time remaining: ${Math.ceil(remaining)}s`;
+            
+            if (remaining <= 0) {
+                clearInterval(progressInterval);
+            }
+        }, 1000);
         
         const {result_b64} = await response.json();
-        const endTime = performance.now();
-        const duration = ((endTime - startTime) / 1000).toFixed(2);
+        clearInterval(progressInterval);
+        const actualEndTime = performance.now();
+        const duration = ((actualEndTime - startTime) / 1000).toFixed(2);
         console.log(`[Main] Server request completed in ${duration}s`);
         console.log('[Main] Processing server response...');
         encServerResult = Uint8Array.from(atob(result_b64), c=>c.charCodeAt(0));
         console.log(`[Main] Received encrypted result: ${encServerResult.length} bytes`);
         $('encResult').value = `(${encServerResult.length} B)`;
         $('srvComputing').hidden = true;
+        $('srvProgress').hidden = true;
         $('srvStatus').textContent = `✓ received (${duration}s)`;
         enable('btnDecrypt');
     } catch (e) {
@@ -215,6 +234,7 @@ $('btnSend').onclick = async () => {
         const duration = ((endTime - startTime) / 1000).toFixed(2);
         console.error(`[Main] Server request failed after ${duration}s:`, e);
         $('srvComputing').hidden = true;
+        $('srvProgress').hidden = true;
         $('srvStatus').textContent = `Server error: ${e.message} (${duration}s)`;
         show('spin', false);
     }