Spaces:

zama-fhe
/

private-synthid

Running

App Files Files Community

jfrery-zama commited on Jun 13

Commit

80fbc0a

unverified ·

1 Parent(s): c7c27a1

more update to ux / ui

Browse files

Files changed (3) hide show

index.html +26 -65
wasm-demo.js +26 -8
zama_logo.webp +0 -0

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Private SynthID - Check if your text is AI Generated</title>
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <style>
@@ -56,9 +56,7 @@
       margin-inline: auto;
     }
     .logo {
-      font-size: 2rem;
-      font-weight: 700;
-      letter-spacing: -0.02em;
     }
     .contact-btn {
       border: 2px solid var(--black);
@@ -88,7 +86,7 @@
       max-width: var(--container-max);
       margin: calc(var(--spacing-unit) * 4) auto calc(var(--spacing-unit) * 10);
       padding-inline: calc(var(--spacing-unit) * 4);
-      grid-template-columns: 1fr 1fr;
     }
     .hero h1 {
       font-size: clamp(3rem, 6vw, 4.5rem);
@@ -301,6 +299,19 @@
       opacity: 0.8;
     }
     /* Responsive adjustments */
     @media (max-width: 968px) {
       .hero {
@@ -340,71 +351,22 @@
   <!-- external scripts -->
   <script type="module" src="https://belladoreai.github.io/llama3-tokenizer-js/bundle/llama3-tokenizer-with-baked-data.js"></script>
-  <script type="module">
-    import mermaid from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm';
-    mermaid.initialize({
-      startOnLoad: true,
-      theme: 'base',
-      themeVariables: {
-        primaryColor: '#ffd200',
-        primaryTextColor: '#000',
-        lineColor: '#000',
-        tertiaryColor: '#fff',
-        fontFamily: 'Telegraf',
-        fontSize: '1.4rem'
-      },
-      flowchart: {
-        nodeSpacing: 50,
-        rankSpacing: 50,
-        curve: 'basis',
-        fontSize: '1.4rem'
-      },
-      sequence: {
-        actorFontSize: '1.4rem',
-        noteFontSize: '1.4rem',
-        messageFontSize: '1.4rem'
-      }
-    });
-  </script>
 </head>
 <body>
   <!-- Navbar -->
   <nav class="navbar">
-    <div class="logo">ZAMA</div>
     <a href="https://www.zama.ai/contact" class="contact-btn" target="_blank" rel="noopener noreferrer">Contact us</a>
   </nav>
   <!-- Hero -->
   <header class="hero" role="banner">
     <div class="hero-copy">
-      <h1>Private Watermark Detection</h1>
       <div class="explanation-text">
-        Private SynthID uses Google's SynthID technology to detect watermarks in AI-generated text while preserving privacy through Fully Homomorphic Encryption (FHE). This means you can check if text contains AI watermarks without revealing the content to anyone. Learn more about <a href="https://deepmind.google/science/synthid/" target="_blank">SynthID</a> and <a href="https://www.zama.ai/" target="_blank">FHE applications</a>.
       </div>
     </div>
-    <div class="hero-diagram">
-      <pre class="mermaid">
-sequenceDiagram
-    participant User🧑‍💻
-    participant Browser🔐
-    participant RustServer🦀
-    User🧑‍💻->>Browser🔐: 1️⃣ Generate keys
-    Browser🔐->>Browser🔐: TFHE keygen (WASM)
-    Browser🔐->>RustServer🦀: 2️⃣ /handshake (server_key_b64)
-    RustServer🦀->>Browser🔐: UID (uuid-v4)
-    User🧑‍💻->>Browser🔐: 3️⃣ Enter text
-    Browser🔐->>Browser🔐: Tokenise ◁ HF tokenizer
-    Browser🔐->>Browser🔐: Encrypt tokens (WASM)
-    Browser🔐->>RustServer🦀: 4️⃣ /detect (uid, ciphertext_b64)
-    RustServer🦀->>RustServer🦀: FHE SynthID detect
-    RustServer🦀->>Browser🔐: Encrypted result_b64
-    Browser🔐->>Browser🔐: Decrypt result (WASM)
-    Browser🔐-->>User🧑‍💻: flag / score / g
-      </pre>
-    </div>
   </header>
   <!-- Wizard Steps -->
@@ -415,12 +377,12 @@ sequenceDiagram
         <h2 id="step1">1. Keys</h2>
         <div class="card-content">
           <div class="controls" style="margin-top: 0;">
-            <p id="keygenStatus" class="status" aria-live="polite">Ready to generate keys</p>
             <span id="keygenSpin" class="loader" hidden aria-label="Generating keys"></span>
           </div>
           <div style="display:flex; gap:var(--spacing-unit); margin-top:auto">
-            <button id="btnKeygen"     class="btn" aria-describedby="keygenStatus">🔑 Generate keys</button>
-            <button id="btnLoadSaved"  class="btn" aria-describedby="keygenStatus">🗝️ Load keys</button>
           </div>
         </div>
       </section>
@@ -436,8 +398,7 @@ sequenceDiagram
           <label for="tokenInput" class="visually-hidden">Text to encrypt</label>
           <textarea id="tokenInput" rows="2" placeholder="Enter text to encrypt or use the example below" autocomplete="off"></textarea>
           <div style="display: flex; gap: calc(var(--spacing-unit) * 1); margin-bottom: calc(var(--spacing-unit) * 2); flex-wrap: wrap; align-items: center;">
-            <button id="btnWatermarked" class="btn" style="min-width: auto; padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5); font-size: 1rem;">✨ Use watermarked example</button>
-            <span style="font-size: 1rem; color: var(--black); opacity: 0.7;">← Try this to see watermark detection in action</span>
           </div>
           <div class="controls" style="margin-top: auto;">
             <button id="btnEncrypt" class="btn" disabled>🛡️ Encrypt</button>
@@ -453,8 +414,8 @@ sequenceDiagram
         <h2 id="step3">3. Send to server</h2>
         <div class="card-content">
           <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>
           </div>
           <div class="controls" style="margin-top: auto;">
             <button id="btnSend" class="btn" disabled>📡 Send</button>
@@ -474,7 +435,7 @@ sequenceDiagram
             <button id="btnDecrypt" class="btn" disabled>🔓 Decrypt</button>
           </div>
           <div class="disclaimer" style="margin-top: calc(var(--spacing-unit) * 3); font-size: 0.9rem; color: var(--black); opacity: 0.7; line-height: 1.5;">
-            <p><strong>Note about reliability:</strong> Watermark detection is most reliable with longer texts (100+ tokens). In this demo, we limit input to 16 tokens for performance, which may affect accuracy. Detection improves significantly with 10+ tokens but is less reliable with very short texts.</p>
           </div>
         </div>
       </section>

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Private AI Text Detector – Check if your encrypted text is AI-generated</title>
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <style>
       margin-inline: auto;
     }
     .logo {
+      height: 40px;
     }
     .contact-btn {
       border: 2px solid var(--black);
       max-width: var(--container-max);
       margin: calc(var(--spacing-unit) * 4) auto calc(var(--spacing-unit) * 10);
       padding-inline: calc(var(--spacing-unit) * 4);
+      grid-template-columns: 1fr;
     }
     .hero h1 {
       font-size: clamp(3rem, 6vw, 4.5rem);
       opacity: 0.8;
     }
+    /* Result type styling */
+    .watermark-flag.inconclusive {
+      color: #f57c00;
+    }
+    .watermark-flag.watermarked {
+      color: #2e7d32;
+    }
+    .watermark-flag.ai-generated {
+      color: #1976d2;
+    }
     /* Responsive adjustments */
     @media (max-width: 968px) {
       .hero {
   <!-- external scripts -->
   <script type="module" src="https://belladoreai.github.io/llama3-tokenizer-js/bundle/llama3-tokenizer-with-baked-data.js"></script>
 </head>
 <body>
   <!-- Navbar -->
   <nav class="navbar">
+    <img src="zama_logo.webp" alt="Zama logo" class="logo" />
     <a href="https://www.zama.ai/contact" class="contact-btn" target="_blank" rel="noopener noreferrer">Contact us</a>
   </nav>
   <!-- Hero -->
   <header class="hero" role="banner">
     <div class="hero-copy">
+      <h1>Private AI Text Detection</h1>
       <div class="explanation-text">
+        Private SynthID uses Google's SynthID technology to identify AI-generated text while preserving privacy through Fully Homomorphic Encryption (FHE). This means you can learn whether your text was produced by an AI—without anyone ever seeing the content. Learn more about <a href="https://deepmind.google/science/synthid/" target="_blank">SynthID</a> and <a href="https://www.zama.ai/" target="_blank">FHE applications</a>.
       </div>
     </div>
   </header>
   <!-- Wizard Steps -->
         <h2 id="step1">1. Keys</h2>
         <div class="card-content">
           <div class="controls" style="margin-top: 0;">
+            <p id="keygenStatus" class="status" aria-live="polite">Generate new keys (a few minutes on first run)</p>
             <span id="keygenSpin" class="loader" hidden aria-label="Generating keys"></span>
           </div>
           <div style="display:flex; gap:var(--spacing-unit); margin-top:auto">
+            <button id="btnKeygen"     class="btn" aria-describedby="keygenStatus">🔑 Generate new keys</button>
+            <button id="btnLoadSaved"  class="btn" aria-describedby="keygenStatus">🗝️ Load saved keys</button>
           </div>
         </div>
       </section>
           <label for="tokenInput" class="visually-hidden">Text to encrypt</label>
           <textarea id="tokenInput" rows="2" placeholder="Enter text to encrypt or use the example below" autocomplete="off"></textarea>
           <div style="display: flex; gap: calc(var(--spacing-unit) * 1); margin-bottom: calc(var(--spacing-unit) * 2); flex-wrap: wrap; align-items: center;">
+            <button id="btnWatermarked" class="btn" style="min-width: auto; padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5); font-size: 1rem;">✨ Load sample AI text</button>
           </div>
           <div class="controls" style="margin-top: auto;">
             <button id="btnEncrypt" class="btn" disabled>🛡️ Encrypt</button>
         <h2 id="step3">3. Send to server</h2>
         <div class="card-content">
           <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="controls" style="margin-top: auto;">
             <button id="btnSend" class="btn" disabled>📡 Send</button>
             <button id="btnDecrypt" class="btn" disabled>🔓 Decrypt</button>
           </div>
           <div class="disclaimer" style="margin-top: calc(var(--spacing-unit) * 3); font-size: 0.9rem; color: var(--black); opacity: 0.7; line-height: 1.5;">
+            <p><strong>Note about reliability:</strong> AI text detection works best with longer passages (100+ tokens). In this demo, input is limited to 16 tokens for performance, which may affect accuracy. Reliability improves significantly with 10+ tokens but is less reliable on very short snippets.</p>
           </div>
         </div>
       </section>

wasm-demo.js CHANGED Viewed

@@ -394,18 +394,36 @@ $('btnDecrypt').onclick = () => {
         console.log('[Main] Starting decryption...');
         const dec = decrypt_serialized_u64_radix_flat_wasm(encServerResult, clientKey);
         const [flag, score_scaled, total_g] = Array.from(dec);
-        const score = (Number(score_scaled) / 1e6).toFixed(6);
         console.log('[Main] Decryption successful');
-        console.log(`[Main] Result - flag: ${flag}, score: ${score}, total_g: ${total_g}`);
-        // Create elegant result display
-        const isWatermarked = Number(flag) === 1;
-        const flagText = isWatermarked ? '✅ Watermarked' : '❌ Not Watermarked';
-        const scoreText = `Confidence Score: ${score}`;
         $('decResult').innerHTML = `
-            <div class="watermark-flag">${flagText}</div>
-            <div class="watermark-score">${scoreText}</div>
         `;
     } catch (e) {
         console.error('[Main] Decryption error:', e);

         console.log('[Main] Starting decryption...');
         const dec = decrypt_serialized_u64_radix_flat_wasm(encServerResult, clientKey);
         const [flag, score_scaled, total_g] = Array.from(dec);
+        const rawScore = Number(score_scaled) / 1e6;
         console.log('[Main] Decryption successful');
+        console.log(`[Main] Result - flag: ${flag}, raw_score: ${rawScore}, total_g: ${total_g}`);
+        // Convert to confidence value between 0 and 1
+        const confidence = Math.max(0, Math.min(1, rawScore));
+        // Determine result based on confidence ranges
+        let resultText, confidenceText, resultClass;
+        if (confidence < 0.5) {
+            // Problematic range - should not be addressed according to user
+            resultText = '⚠️ Inconclusive';
+            confidenceText = `Confidence: ${(confidence * 100).toFixed(1)}% (insufficient data)`;
+            resultClass = 'inconclusive';
+        } else if (confidence >= 0.5 && confidence < 0.6) {
+            // Very likely to be watermarked (close to 0.5)
+            resultText = '✅ AI-Generated (Watermarked)';
+            confidenceText = `Confidence: ${(confidence * 100).toFixed(1)}%`;
+            resultClass = 'watermarked';
+        } else {
+            // Between 0.6 and 1 - highly likely to be AI generated
+            resultText = '🤖 AI-Generated';
+            confidenceText = `Confidence: ${(confidence * 100).toFixed(1)}%`;
+            resultClass = 'ai-generated';
+        }
         $('decResult').innerHTML = `
+            <div class="watermark-flag ${resultClass}">${resultText}</div>
+            <div class="watermark-score">${confidenceText}</div>
         `;
     } catch (e) {
         console.error('[Main] Decryption error:', e);

zama_logo.webp ADDED Viewed