Spaces:
Running
Running
| <html lang="en"> | |
| <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> | |
| @import url('https://fonts.googleapis.com/css2?family=Telegraf:wght@400;500;600;700&display=swap'); | |
| :root { | |
| --yellow: #ffd200; | |
| --black: #000; | |
| --white: #fff; | |
| --grey-050: #f9f9f9; | |
| --grey-200: #e0e0e0; | |
| --container-max: 1200px; | |
| --shadow-sm: 0 2px 4px rgba(0,0,0,0.06); | |
| --spacing-unit: 8px; | |
| } | |
| /* reset */ | |
| *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } | |
| body { | |
| font-family: 'Telegraf', sans-serif; | |
| background: var(--yellow); | |
| color: var(--black); | |
| line-height: 1.5; | |
| font-weight: 400; | |
| } | |
| .explanation-text { | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| margin-bottom: calc(var(--spacing-unit) * 4); | |
| } | |
| .explanation-text a { | |
| color: var(--black); | |
| text-decoration: underline; | |
| font-weight: 500; | |
| } | |
| .explanation-text a:hover { | |
| opacity: 0.8; | |
| } | |
| /* navbar */ | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4); | |
| max-width: var(--container-max); | |
| margin-inline: auto; | |
| } | |
| .logo { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| } | |
| .contact-btn { | |
| border: 2px solid var(--black); | |
| background: transparent; | |
| color: var(--black); | |
| padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| font-family: 'Telegraf', sans-serif; | |
| cursor: pointer; | |
| transition: all .2s ease; | |
| } | |
| .contact-btn:hover { | |
| background: var(--black); | |
| color: var(--yellow); | |
| transform: translateY(-1px); | |
| } | |
| /* hero */ | |
| .hero { | |
| display: grid; | |
| gap: calc(var(--spacing-unit) * 6); | |
| align-items: center; | |
| 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(2.5rem, 5vw, 4rem); | |
| font-weight: 700; | |
| margin-bottom: calc(var(--spacing-unit) * 3); | |
| letter-spacing: -0.03em; | |
| line-height: 1.1; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| max-width: 45ch; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| } | |
| .hero-diagram { | |
| background: var(--white); | |
| border: 2px solid var(--black); | |
| border-radius: 0; | |
| padding: calc(var(--spacing-unit) * 4); | |
| box-shadow: 8px 8px 0 var(--black); | |
| width: 100%; | |
| min-height: 400px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .hero-diagram .mermaid { | |
| max-width: 100%; | |
| font-family: 'Telegraf', sans-serif; | |
| font-size: 1.2rem; | |
| } | |
| /* wizard */ | |
| main { | |
| max-width: var(--container-max); | |
| margin: 0 auto calc(var(--spacing-unit) * 12); | |
| padding: 0 calc(var(--spacing-unit) * 4); | |
| } | |
| .section-title { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: calc(var(--spacing-unit) * 6); | |
| text-align: center; | |
| letter-spacing: -0.02em; | |
| } | |
| .cards-wrapper { | |
| display: grid; | |
| gap: calc(var(--spacing-unit) * 3); | |
| grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); | |
| } | |
| .card { | |
| background: var(--white); | |
| border: 2px solid var(--black); | |
| border-radius: 0; | |
| box-shadow: 6px 6px 0 var(--black); | |
| padding: calc(var(--spacing-unit) * 4); | |
| min-height: 280px; | |
| display: flex; | |
| flex-direction: column; | |
| transition: transform 0.2s ease; | |
| } | |
| .card:hover { | |
| transform: translate(-2px, -2px); | |
| box-shadow: 8px 8px 0 var(--black); | |
| } | |
| .card h2 { | |
| margin-bottom: calc(var(--spacing-unit) * 3); | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| letter-spacing: -0.01em; | |
| height: 30px; | |
| } | |
| .card-content { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| gap: calc(var(--spacing-unit) * 2); | |
| } | |
| .controls { | |
| display: flex; | |
| align-items: center; | |
| gap: calc(var(--spacing-unit) * 1.5); | |
| min-height: 40px; | |
| } | |
| textarea { | |
| width: 100%; | |
| padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2); | |
| border: 2px solid var(--black); | |
| border-radius: 0; | |
| font-family: 'Telegraf', sans-serif; | |
| font-size: 1rem; | |
| resize: vertical; | |
| background: var(--white); | |
| min-height: 60px; | |
| transition: all 0.2s ease; | |
| font-weight: 500; | |
| } | |
| textarea:focus { | |
| outline: none; | |
| transform: translate(-2px, -2px); | |
| box-shadow: 4px 4px 0 var(--black); | |
| } | |
| .btn { | |
| border: 2px solid var(--black); | |
| background: var(--yellow); | |
| color: var(--black); | |
| font-weight: 600; | |
| padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); | |
| min-width: 160px; | |
| font-size: 1rem; | |
| font-family: 'Telegraf', sans-serif; | |
| border-radius: 0; | |
| cursor: pointer; | |
| transition: all .2s ease; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: calc(var(--spacing-unit) * 1); | |
| white-space: nowrap; | |
| letter-spacing: -0.01em; | |
| } | |
| .btn:hover:not(:disabled) { | |
| background: var(--black); | |
| color: var(--yellow); | |
| transform: translateY(-2px); | |
| } | |
| .btn:disabled { | |
| opacity: .5; | |
| cursor: not-allowed; | |
| } | |
| .status { | |
| font-size: 1rem; | |
| color: var(--black); | |
| flex: 1; | |
| font-weight: 500; | |
| } | |
| .loader { | |
| width: 20px; | |
| height: 20px; | |
| border: 3px solid transparent; | |
| border-top: 3px solid var(--black); | |
| border-right: 3px solid var(--black); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| flex-shrink: 0; | |
| } | |
| @keyframes spin { to { transform: rotate(360deg);} } | |
| #encIcon { | |
| font-size: 1.25rem; | |
| flex-shrink: 0; | |
| } | |
| footer { | |
| font-size: 1rem; | |
| text-align: center; | |
| padding: calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 2); | |
| color: var(--black); | |
| font-weight: 500; | |
| } | |
| .visually-hidden { position: absolute ; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } | |
| /* Result styling */ | |
| #decResult { | |
| font-family: 'Telegraf', sans-serif; | |
| padding: calc(var(--spacing-unit) * 2); | |
| background: var(--grey-050); | |
| border: 2px solid var(--black); | |
| border-radius: 8px; | |
| min-height: 48px; | |
| display: flex; | |
| align-items: center; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| } | |
| #decResult:not(:empty) { | |
| color: var(--black); | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 968px) { | |
| .hero { | |
| grid-template-columns: 1fr; | |
| gap: calc(var(--spacing-unit) * 4); | |
| } | |
| .hero-diagram { | |
| min-height: 300px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .cards-wrapper { | |
| gap: calc(var(--spacing-unit) * 2); | |
| } | |
| .card { | |
| padding: calc(var(--spacing-unit) * 3); | |
| box-shadow: 4px 4px 0 var(--black); | |
| } | |
| .btn { | |
| min-width: 140px; | |
| padding: calc(var(--spacing-unit) * 1.25) calc(var(--spacing-unit) * 2.5); | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| <!-- 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' | |
| } | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Navbar --> | |
| <nav class="navbar"> | |
| <div class="logo">ZAMA</div> | |
| <button class="contact-btn">Contact us</button> | |
| </nav> | |
| <!-- Hero --> | |
| <header class="hero" role="banner"> | |
| <div class="hero-copy"> | |
| <h1>Private Watermark Detection - Check if your text is AI Generated</h1> | |
| <div class="explanation-text"> | |
| Private SynthID uses Google's SynthID technology to detect AI-generated text while preserving privacy through Fully Homomorphic Encryption (FHE). This means you can check if text was generated by AI without revealing the content to anyone. Learn more about <a href="https://deepmind.google/science/synthid/" target="_blank">SynthID</a> and <a href="https://huggingface.co/spaces/zama-fhe/encrypted_image_filtering" target="_blank">FHE applications</a>. | |
| </div> | |
| <p>Private, end-to-end detection using fully homomorphic encryption.</p> | |
| </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 --> | |
| <main> | |
| <h2 class="section-title">How it works</h2> | |
| <div class="cards-wrapper"> | |
| <!-- 1 Keys --> | |
| <section class="card" aria-labelledby="step1"> | |
| <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="margin-top: auto;"> | |
| <button id="btnKeygen" class="btn" aria-describedby="keygenStatus">🔑 Generate keys</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 2 Encrypt --> | |
| <section class="card" aria-labelledby="step2"> | |
| <h2 id="step2">2. Encrypt text</h2> | |
| <div class="card-content"> | |
| <div class="controls"> | |
| <p id="tokenizerStatus" class="status" aria-live="polite" style="display: none;">Loading tokenizer...</p> | |
| <span id="tokenizerSpin" class="loader" hidden aria-label="Loading tokenizer"></span> | |
| </div> | |
| <label for="tokenInput" class="visually-hidden">Text to encrypt</label> | |
| <textarea id="tokenInput" rows="2" placeholder="Enter text to encrypt" autocomplete="off"></textarea> | |
| <div class="controls" style="margin-top: auto;"> | |
| <button id="btnEncrypt" class="btn" disabled>🛡️ Encrypt</button> | |
| <span id="encryptSpin" class="loader" hidden aria-label="Encrypting"></span> | |
| <span id="encIcon" hidden aria-label="Encrypted">🔒</span> | |
| <span id="encStatus" class="status"></span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 3 Send --> | |
| <section class="card" aria-labelledby="step3"> | |
| <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> | |
| <span id="spin" class="loader" hidden aria-label="Working"></span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 4 Result --> | |
| <section class="card" aria-labelledby="step4"> | |
| <h2 id="step4">4. Result</h2> | |
| <div class="card-content"> | |
| <label for="encResult" class="visually-hidden">Encrypted result bytes</label> | |
| <textarea id="encResult" rows="1" readonly placeholder="Encrypted result will appear here"></textarea> | |
| <p id="decResult" aria-live="polite" style="flex: 1;"></p> | |
| <div class="controls" style="margin-top: auto;"> | |
| <button id="btnDecrypt" class="btn" disabled>🔓 Decrypt</button> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <footer>© 2025 Zama — Demo only, not for production use.</footer> | |
| <script type="module" src="wasm-demo.js"></script> | |
| <script> | |
| // Since the tokenizer loads automatically and there's no explicit loading status in the JS, | |
| // we'll hide the tokenizer status message on page load | |
| window.addEventListener('DOMContentLoaded', () => { | |
| const tokenizerStatus = document.getElementById('tokenizerStatus'); | |
| if (tokenizerStatus) { | |
| tokenizerStatus.style.display = 'none'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |