Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Private AI Generated Text Detection</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 { | |
| /* palette tuned to match screenshot */ | |
| --white: #ffffff; | |
| --black: #000000; | |
| --grey-025: #f5f5f5; | |
| --grey-050: #f0f0f0; | |
| --grey-100: #e8e8e8; | |
| --grey-200: #e0e0e0; /* button & border base */ | |
| --grey-300: #d4d4d4; /* button hover */ | |
| --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(--white); /* removed yellow */ | |
| color: var(--black); | |
| line-height: 1.5; | |
| font-weight: 400; | |
| } | |
| /* general copy */ | |
| .explanation-text { | |
| font-size: 1.3rem; | |
| 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 { | |
| height: 120px; | |
| } | |
| .contact-btn { | |
| border: none; /* no thick outline */ | |
| background: var(--grey-200); /* light grey like screenshot */ | |
| color: var(--black); | |
| padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); | |
| border-radius: 6px; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| font-family: 'Telegraf', sans-serif; | |
| cursor: pointer; | |
| transition: background .2s ease; | |
| text-decoration: none; | |
| display: inline-block; | |
| } | |
| .contact-btn:hover { | |
| background: var(--grey-300); /* subtle hover */ | |
| } | |
| /* 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; | |
| } | |
| .hero h1 { | |
| font-size: clamp(3rem, 6vw, 4.5rem); | |
| font-weight: 700; | |
| margin-bottom: calc(var(--spacing-unit) * 3); | |
| letter-spacing: -0.03em; | |
| line-height: 1.1; | |
| } | |
| .hero p { | |
| font-size: 1.4rem; | |
| max-width: 45ch; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| } | |
| .hero-diagram { | |
| background: var(--white); | |
| border: 1px solid var(--grey-200); /* lighter border */ | |
| border-radius: 4px; | |
| padding: calc(var(--spacing-unit) * 4); | |
| box-shadow: none; /* removed strong shadow */ | |
| 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: 3rem; | |
| 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) * 6); | |
| grid-template-columns: 1fr; | |
| } | |
| .card { | |
| background: var(--white); | |
| border: 1px solid var(--grey-200); /* lighter soft border */ | |
| border-radius: 6px; | |
| box-shadow: none; /* no drop shadow */ | |
| padding: calc(var(--spacing-unit) * 4); | |
| min-height: 280px; | |
| display: flex; | |
| flex-direction: column; | |
| transition: background 0.2s ease; | |
| } | |
| .card:hover { | |
| background: var(--grey-025); | |
| } | |
| .card h2 { | |
| margin-bottom: calc(var(--spacing-unit) * 3); | |
| font-size: 1.8rem; | |
| 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: 1px solid var(--grey-200); | |
| border-radius: 4px; | |
| font-family: 'Telegraf', sans-serif; | |
| font-size: 1.2rem; | |
| resize: vertical; | |
| background: var(--white); | |
| min-height: 60px; | |
| transition: border-color 0.2s ease; | |
| font-weight: 500; | |
| } | |
| textarea:focus { | |
| outline: none; | |
| border-color: var(--grey-300); | |
| } | |
| .btn { | |
| border: none; /* flat buttons */ | |
| background: var(--grey-200); | |
| color: var(--black); | |
| font-weight: 600; | |
| padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); | |
| min-width: 160px; | |
| font-size: 1.2rem; | |
| font-family: 'Telegraf', sans-serif; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| transition: background 0.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(--grey-300); | |
| } | |
| .btn:disabled { | |
| opacity: .5; | |
| cursor: not-allowed; | |
| } | |
| .btn-discrete { | |
| background: transparent; | |
| border: 1px solid var(--grey-200); | |
| min-width: auto; | |
| padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5); | |
| font-size: 0.9rem; | |
| opacity: 0.7; | |
| transition: all 0.2s ease; | |
| } | |
| .btn-discrete:hover:not(:disabled) { | |
| background: var(--grey-100); | |
| opacity: 1; | |
| border-color: var(--grey-300); | |
| } | |
| .status { | |
| font-size: 1.2rem; | |
| 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: 1.2rem; | |
| 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) * 3); | |
| background: var(--grey-050); | |
| border: 1px solid var(--grey-200); | |
| border-radius: 6px; | |
| min-height: 80px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: calc(var(--spacing-unit) * 1); | |
| font-weight: 600; | |
| font-size: 1.4rem; | |
| text-align: center; | |
| } | |
| #decResult:not(:empty) { | |
| color: var(--black); | |
| } | |
| .watermark-flag { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| margin-bottom: calc(var(--spacing-unit) * 1); | |
| } | |
| .watermark-score { | |
| font-size: 1.2rem; | |
| font-weight: 500; | |
| opacity: 0.8; | |
| } | |
| /* Result type styling */ | |
| .watermark-flag.inconclusive { | |
| color: #f57c00; | |
| } | |
| .watermark-flag.watermarked { | |
| color: #2e7d32; | |
| } | |
| .watermark-flag.ai-generated { | |
| color: #1976d2; | |
| } | |
| /* Progress bar styling */ | |
| .progress-container { | |
| width: 100%; | |
| background: var(--grey-100); | |
| border-radius: 4px; | |
| height: 12px; | |
| margin: calc(var(--spacing-unit) * 2) 0; | |
| overflow: hidden; | |
| border: 1px solid var(--grey-200); | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: var(--black); | |
| border-radius: 3px; | |
| transition: width 0.3s ease; | |
| width: 0%; | |
| } | |
| .processing-note { | |
| font-size: 0.9rem; | |
| color: var(--black); | |
| opacity: 0.7; | |
| line-height: 1.4; | |
| margin-bottom: calc(var(--spacing-unit) * 2); | |
| } | |
| /* 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); | |
| } | |
| .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> | |
| </head> | |
| <body> | |
| <!-- Hero --> | |
| <header class="hero" role="banner"> | |
| <div class="hero-copy"> | |
| <h1>Private AI Generated Text Detection</h1> | |
| <!-- 1 — Why it matters --> | |
| <p class="explanation-text"> | |
| AI models can embed an invisible <strong>watermark</strong> – a tiny cryptographic | |
| signature hidden in the text – that proves the text came from them. | |
| This demo shows you can <em>detect</em> such a watermark | |
| while your words stay fully encrypted in your browser, thanks to | |
| <a href="https://www.zama.ai/" target="_blank">Fully Homomorphic Encryption (FHE)</a>. | |
| </p> | |
| <!-- 2 — How it works in plain English --> | |
| <p class="explanation-text"> | |
| • Your text is encrypted locally.<br> | |
| • Our server runs a watermark detector on the ciphertext.<br> | |
| • Because of FHE, the server never sees the plaintext. Neither does it learn whether you text is | |
| "watermarked" or "not watermarked." | |
| </p> | |
| <!-- 3 — Scope of the demo --> | |
| <p class="explanation-text"> | |
| In this prototype we look for the | |
| <a href="https://deepmind.google/science/synthid/" target="_blank">Google SynthID</a> watermark | |
| as a real-world example. | |
| <strong>No watermark</strong> simply means "no SynthID detected" — the text | |
| might still be human-written or AI-generated without that specific mark. | |
| </p> | |
| </div> | |
| </header> | |
| <!-- Wizard Steps --> | |
| <main> | |
| <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">Generate new keys and send them to the server (requires a 130MB upload). Keys can then be loaded (instantly).</p> | |
| <span id="keygenSpin" class="loader" hidden aria-label="Generating keys"></span> | |
| </div> | |
| <div style="display:flex; gap:var(--spacing-unit); margin-top:auto; flex-wrap: wrap;"> | |
| <button id="btnKeygen" class="btn" aria-describedby="keygenStatus">🔑 Generate new keys</button> | |
| <button id="btnLoadSaved" class="btn" aria-describedby="keygenStatus">🗝️ Load saved keys</button> | |
| <button id="btnDeleteKeys" class="btn btn-discrete" aria-describedby="keygenStatus">🗑️ Delete saved 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 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> | |
| <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 class="processing-note" id="processingNote" hidden> | |
| <strong>Estimated processing time:</strong> <span id="estimatedTime">0</span> seconds | |
| </div> | |
| <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="progress-container" id="progressContainer" hidden> | |
| <div class="progress-bar" id="progressBar"></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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 4 Result --> | |
| <section class="card" aria-labelledby="step4"> | |
| <h2 id="step4">4. Result</h2> | |
| <div class="card-content"> | |
| <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 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> | |
| </div> | |
| </main> | |
| <footer>© 2025 Zama — Demo only, not for production use.</footer> | |
| <script type="module" src="wasm-demo.js"></script> | |
| <script> | |
| // Hide tokenizer status on load | |
| window.addEventListener('DOMContentLoaded', () => { | |
| const tokenizerStatus = document.getElementById('tokenizerStatus'); | |
| if (tokenizerStatus) { | |
| tokenizerStatus.style.display = 'none'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |