improve ux

index.html

@@ -71,6 +71,8 @@
       font-family: 'Telegraf', sans-serif;
       cursor: pointer; 
       transition: all .2s ease; 
+      text-decoration: none;
+      display: inline-block;
     }
     .contact-btn:hover { 
       background: var(--black); 
@@ -253,6 +255,38 @@
       flex-shrink: 0;
     }
 
+    /* Progress bar styles */
+    .progress-container {
+      width: 100%;
+      background: var(--grey-200);
+      border: 2px solid var(--black);
+      height: 24px;
+      position: relative;
+      overflow: hidden;
+      display: none;
+    }
+
+    .progress-bar {
+      height: 100%;
+      background: var(--black);
+      width: 0%;
+      transition: width 0.5s ease;
+      position: relative;
+    }
+
+    .progress-text {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: var(--black);
+      font-size: 0.9rem;
+      font-weight: 600;
+      z-index: 1;
+      mix-blend-mode: difference;
+      filter: invert(1);
+    }
+
     footer { 
       font-size: 1.2rem; 
       text-align: center; 
@@ -351,7 +385,7 @@
   <!-- Navbar -->
   <nav class="navbar">
     <div class="logo">ZAMA</div>
-    <button class="contact-btn">Contact us</button>
+    <a href="https://www.zama.ai/contact" class="contact-btn" target="_blank" rel="noopener noreferrer">Contact us</a>
   </nav>
 
   <!-- Hero -->
@@ -433,6 +467,10 @@ sequenceDiagram
             <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="progress-container" id="progressContainer">
+            <div class="progress-bar" id="progressBar"></div>
+            <div class="progress-text" id="progressText">0%</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,7 @@ let keygenWorker;
 let encryptWorker;
 let sessionUid;
 let taskId;
+let currentTokenCount = 0;  // Track token count for progress estimation
 
 // Memory-efficient base64 encoding for large Uint8Array
 function uint8ToBase64(uint8) {
@@ -30,6 +31,60 @@ const $ = id => document.getElementById(id);
 const enable = (id, ok=true) => $(id).disabled = !ok;
 const show = (id, visible=true) => $(id).hidden = !visible;
 
+// Progress bar functions
+function showProgress() {
+    const container = $('progressContainer');
+    const bar = $('progressBar');
+    const text = $('progressText');
+    
+    container.style.display = 'block';
+    bar.style.width = '0%';
+    text.textContent = '0%';
+}
+
+function hideProgress() {
+    const container = $('progressContainer');
+    container.style.display = 'none';
+}
+
+function updateProgress(percent) {
+    const bar = $('progressBar');
+    const text = $('progressText');
+    
+    bar.style.width = percent + '%';
+    text.textContent = Math.round(percent) + '%';
+}
+
+// Progress animation based on token count
+let progressInterval;
+function startProgressAnimation(tokenCount) {
+    const estimatedTimePerToken = 30000; // 30 seconds per token in milliseconds
+    const totalEstimatedTime = tokenCount * estimatedTimePerToken;
+    const startTime = Date.now();
+    
+    progressInterval = setInterval(() => {
+        const elapsed = Date.now() - startTime;
+        const progress = Math.min((elapsed / totalEstimatedTime) * 100, 95); // Cap at 95% until actual completion
+        updateProgress(progress);
+        
+        // Update status message with time estimate
+        const remainingTime = Math.max(0, totalEstimatedTime - elapsed);
+        const remainingSeconds = Math.ceil(remainingTime / 1000);
+        if (remainingSeconds > 0) {
+            $('srvProgress').textContent = `Processing ${tokenCount} tokens... (~${remainingSeconds}s remaining)`;
+            show('srvProgress', true);
+        }
+    }, 100); // Update every 100ms for smooth animation
+}
+
+function stopProgressAnimation() {
+    if (progressInterval) {
+        clearInterval(progressInterval);
+        progressInterval = null;
+    }
+    show('srvProgress', false);
+}
+
 // Hide all spinners immediately
 show('keygenSpin', false);
 show('spin', false);
@@ -66,7 +121,7 @@ show('tokenizerSpin', false);
                             show('encIcon', true);
                             enable('btnEncrypt', true);
                             enable('btnSend');
-                            $('encStatus').textContent = 'Your text is encrypted 🔒';
+                            $('encStatus').textContent = `Your text is encrypted 🔒 (${currentTokenCount} tokens)`;
                         } else if (e.data.type === 'error') {
                             console.error('[Main] Encryption error:', e.data.error);
                             show('encryptSpin', false);
@@ -160,6 +215,7 @@ $('btnEncrypt').onclick = async () => {
     try {
         console.log('[Main] Tokenizing text:', text);
         const tokenIds = llama3Tokenizer.encode(text);
+        currentTokenCount = tokenIds.length;  // Store token count
         console.log('[Main] Token IDs:', tokenIds);
 
         encryptWorker.postMessage({ type: 'encrypt', tokenIds });
@@ -179,6 +235,8 @@ async function pollTaskStatus(currentTaskId, currentUid) {
             console.error(`[Poll] Error fetching status: ${statusResponse.status} ${errorText}`);
             $('srvStatus').textContent = `Status check error: ${statusResponse.status}`;
             show('spin', false);
+            stopProgressAnimation();
+            hideProgress();
             return null;
         }
 
@@ -187,11 +245,14 @@ async function pollTaskStatus(currentTaskId, currentUid) {
         $('srvStatus').textContent = `Status: ${statusData.status} - ${statusData.details}`;
 
         if (statusData.status === 'success' || statusData.status === 'completed') {
+            updateProgress(100);  // Complete the progress bar
             return statusData;
         } else if (['failure', 'revoked', 'unknown', 'error'].includes(statusData.status.toLowerCase())) {
             console.error('[Poll] Task failed or unrecoverable:', statusData);
             $('srvStatus').textContent = `Task failed: ${statusData.status}`;
             show('spin', false);
+            stopProgressAnimation();
+            hideProgress();
             return null;
         } else {
             setTimeout(() => pollTaskStatus(currentTaskId, currentUid).then(finalStatus => {
@@ -205,6 +266,8 @@ async function pollTaskStatus(currentTaskId, currentUid) {
         console.error('[Poll] Polling exception:', e);
         $('srvStatus').textContent = `Polling error: ${e.message}`;
         show('spin', false);
+        stopProgressAnimation();
+        hideProgress();
         return null;
     }
 }
@@ -234,6 +297,8 @@ async function getTaskResult(currentTaskId, currentUid, taskName) {
     } finally {
         show('spin', false);
         $('srvComputing').hidden = true;
+        stopProgressAnimation();
+        hideProgress();
     }
 }
 
@@ -252,6 +317,10 @@ $('btnSend').onclick = async () => {
     $('srvStatus').textContent = 'Submitting task…';
     $('srvComputing').hidden = true;
     window.taskStartTime = performance.now();
+    
+    // Show and start progress animation
+    showProgress();
+    startProgressAnimation(currentTokenCount);
 
     try {
         const formData = new FormData();
@@ -290,6 +359,8 @@ $('btnSend').onclick = async () => {
         $('srvStatus').textContent = `Task submission error: ${e.message} (${duration}s)`;
         show('spin', false);
         $('srvComputing').hidden = true;
+        stopProgressAnimation();
+        hideProgress();
     }
 };
 
@@ -306,4 +377,4 @@ $('btnDecrypt').onclick = () => {
         console.error('[Main] Decryption error:', e);
         $('decResult').textContent = `Decryption failed: ${e.message}`;
     }
-}; 
+};