simplify ui

index.html

@@ -255,37 +255,7 @@
       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; 
@@ -465,11 +435,6 @@ 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="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>

wasm-demo.js

@@ -11,7 +11,6 @@ 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) {
@@ -31,60 +30,6 @@ 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);
@@ -121,7 +66,7 @@ show('tokenizerSpin', false);
                             show('encIcon', true);
                             enable('btnEncrypt', true);
                             enable('btnSend');
-                            $('encStatus').textContent = `Your text is encrypted 🔒 (${currentTokenCount} tokens)`;
+                            $('encStatus').textContent = 'Your text is encrypted 🔒';
                         } else if (e.data.type === 'error') {
                             console.error('[Main] Encryption error:', e.data.error);
                             show('encryptSpin', false);
@@ -215,7 +160,6 @@ $('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 });
@@ -235,8 +179,6 @@ 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;
         }
 
@@ -245,14 +187,11 @@ 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 => {
@@ -266,8 +205,6 @@ async function pollTaskStatus(currentTaskId, currentUid) {
         console.error('[Poll] Polling exception:', e);
         $('srvStatus').textContent = `Polling error: ${e.message}`;
         show('spin', false);
-        stopProgressAnimation();
-        hideProgress();
         return null;
     }
 }
@@ -297,8 +234,6 @@ async function getTaskResult(currentTaskId, currentUid, taskName) {
     } finally {
         show('spin', false);
         $('srvComputing').hidden = true;
-        stopProgressAnimation();
-        hideProgress();
     }
 }
 
@@ -317,10 +252,6 @@ $('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();
@@ -359,8 +290,6 @@ $('btnSend').onclick = async () => {
         $('srvStatus').textContent = `Task submission error: ${e.message} (${duration}s)`;
         show('spin', false);
         $('srvComputing').hidden = true;
-        stopProgressAnimation();
-        hideProgress();
     }
 };