| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>EE Secure Client</title> |
| <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg: #0d0f12; |
| --surface: #161a20; |
| --border: #252b34; |
| --border-hover: #3a4452; |
| --accent: #00d4aa; |
| --accent-dim: rgba(0, 212, 170, 0.12); |
| --text: #e2e8f0; |
| --text-muted: #64748b; |
| --text-dim: #94a3b8; |
| --danger: #f87171; |
| --danger-dim: rgba(248, 113, 113, 0.1); |
| --mono: 'IBM Plex Mono', monospace; |
| --sans: 'IBM Plex Sans', sans-serif; |
| } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { |
| background: var(--bg); |
| color: var(--text); |
| font-family: var(--sans); |
| min-height: 100vh; |
| padding: 48px 24px; |
| } |
| |
| .page { |
| max-width: 620px; |
| margin: 0 auto; |
| } |
| |
| |
| .header { |
| margin-bottom: 40px; |
| } |
| .header-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 7px; |
| background: var(--accent-dim); |
| border: 1px solid rgba(0,212,170,0.25); |
| color: var(--accent); |
| font-family: var(--mono); |
| font-size: 11px; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| padding: 5px 12px; |
| border-radius: 4px; |
| margin-bottom: 16px; |
| } |
| .lock-dot { |
| width: 7px; height: 7px; |
| background: var(--accent); |
| border-radius: 50%; |
| animation: blink 2.5s ease-in-out infinite; |
| } |
| @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} } |
| |
| h1 { |
| font-size: 26px; |
| font-weight: 600; |
| letter-spacing: -0.02em; |
| color: var(--text); |
| margin-bottom: 6px; |
| } |
| .subtitle { |
| font-size: 14px; |
| color: var(--text-muted); |
| line-height: 1.5; |
| } |
| |
| |
| .card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| padding: 28px; |
| margin-bottom: 20px; |
| } |
| |
| .section-label { |
| font-family: var(--mono); |
| font-size: 10px; |
| letter-spacing: 0.1em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| margin-bottom: 16px; |
| padding-bottom: 10px; |
| border-bottom: 1px solid var(--border); |
| } |
| |
| |
| .field { margin-bottom: 20px; } |
| .field:last-child { margin-bottom: 0; } |
| |
| label { |
| display: block; |
| font-size: 13px; |
| font-weight: 500; |
| color: var(--text-dim); |
| margin-bottom: 7px; |
| } |
| label span { |
| font-family: var(--mono); |
| font-size: 11px; |
| color: var(--text-muted); |
| font-weight: 400; |
| } |
| |
| input, textarea { |
| width: 100%; |
| background: var(--bg); |
| border: 1px solid var(--border); |
| border-radius: 6px; |
| padding: 10px 14px; |
| color: var(--text); |
| font-family: var(--sans); |
| font-size: 14px; |
| transition: border-color 0.15s; |
| outline: none; |
| -webkit-appearance: none; |
| } |
| input:focus, textarea:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px rgba(0,212,170,0.08); |
| } |
| input::placeholder, textarea::placeholder { |
| color: var(--text-muted); |
| } |
| textarea { |
| resize: vertical; |
| min-height: 120px; |
| line-height: 1.6; |
| font-family: var(--mono); |
| font-size: 13px; |
| } |
| |
| |
| .field-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 16px; |
| } |
| |
| |
| .btn { |
| width: 100%; |
| padding: 13px; |
| background: var(--accent); |
| color: #0d0f12; |
| border: none; |
| border-radius: 6px; |
| font-family: var(--sans); |
| font-size: 14px; |
| font-weight: 600; |
| cursor: pointer; |
| letter-spacing: 0.01em; |
| transition: opacity 0.15s, transform 0.1s; |
| margin-top: 4px; |
| } |
| .btn:hover { opacity: 0.88; } |
| .btn:active { transform: scale(0.99); } |
| .btn:disabled { opacity: 0.4; cursor: not-allowed; } |
| |
| |
| .result-card { |
| background: var(--surface); |
| border: 1px solid var(--border); |
| border-radius: 10px; |
| overflow: hidden; |
| } |
| .result-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 14px 20px; |
| border-bottom: 1px solid var(--border); |
| background: rgba(0,212,170,0.04); |
| } |
| .result-header-label { |
| font-family: var(--mono); |
| font-size: 11px; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| color: var(--accent); |
| } |
| .result-body { |
| padding: 20px; |
| font-family: var(--mono); |
| font-size: 13px; |
| line-height: 1.7; |
| color: var(--text); |
| white-space: pre-wrap; |
| word-break: break-word; |
| } |
| |
| |
| .error-card { |
| background: var(--danger-dim); |
| border: 1px solid rgba(248,113,113,0.25); |
| border-radius: 8px; |
| padding: 14px 18px; |
| font-size: 13px; |
| color: var(--danger); |
| font-family: var(--mono); |
| line-height: 1.6; |
| word-break: break-all; |
| } |
| .error-card::before { |
| content: "ERROR — "; |
| font-weight: 500; |
| } |
| |
| |
| .btn.loading { |
| position: relative; |
| color: transparent; |
| } |
| .btn.loading::after { |
| content: ''; |
| position: absolute; |
| inset: 0; |
| margin: auto; |
| width: 18px; height: 18px; |
| border: 2px solid rgba(13,15,18,0.3); |
| border-top-color: #0d0f12; |
| border-radius: 50%; |
| animation: spin 0.7s linear infinite; |
| } |
| @keyframes spin { to { transform: rotate(360deg); } } |
| |
| .help-text { |
| font-size: 12px; |
| color: var(--text-muted); |
| margin-top: 5px; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="page"> |
|
|
| <div class="header"> |
| <div class="header-badge"> |
| <span class="lock-dot"></span> |
| End-to-end encrypted |
| </div> |
| <h1>Equivariant Encryption Client</h1> |
| <p class="subtitle">Prompts are encrypted locally before leaving this Space — the inference server only ever sees scrambled embeddings.</p> |
| </div> |
|
|
| <form method="POST" id="mainForm"> |
|
|
| <div class="card"> |
| <div class="section-label">Connection</div> |
|
|
| <div class="field"> |
| <label>Server Space URL</label> |
| <input type="url" name="server_url" |
| placeholder="https://your-ee-server.hf.space" |
| value="https://broadfield-dev-equivariant-encryption-server.hf.space" |
| required readonly> |
| </div> |
|
|
| <div class="field"> |
| <label>EE Model <span>— from Hugging Face Hub</span></label> |
| <input type="text" name="ee_model_name" |
| placeholder="username/model-ee" |
| value="broadfield-dev/Qwen3-0.6B-dp-ee" |
| required readonly> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <div class="section-label">Encryption Key</div> |
|
|
| <div class="field"> |
| <label>Secret Seed <span>— never leaves this client</span></label> |
| <input type="number" name="ee_seed" |
| value="{{ form.get('ee_seed', '424242') }}" |
| required> |
| <p class="help-text">Use the same seed that was used when transforming the model.</p> |
| </div> |
| </div> |
|
|
| <div class="card"> |
| <div class="section-label">Prompt</div> |
|
|
| <div class="field"> |
| <label>Your message</label> |
| <textarea name="prompt" required |
| placeholder="Enter your prompt here...">{{ form.get('prompt', '') }}</textarea> |
| </div> |
|
|
| <div class="field"> |
| <label>Max new tokens</label> |
| <input type="number" name="max_tokens" |
| value="{{ form.get('max_tokens', '256') }}" |
| min="1" max="2048"> |
| </div> |
| </div> |
|
|
| <button type="submit" class="btn" id="submitBtn"> |
| Encrypt & Send → |
| </button> |
|
|
| </form> |
|
|
| {% if error %} |
| <div style="margin-top:20px"> |
| <div class="error-card">{{ error }}</div> |
| </div> |
| {% endif %} |
|
|
| {% if result %} |
| <div style="margin-top:20px"> |
| <div class="result-card"> |
| <div class="result-header"> |
| <span class="result-header-label">Server response</span> |
| <span style="font-size:12px; color: var(--text-muted); font-family: var(--mono);">decrypted locally</span> |
| </div> |
| <div class="result-body">{{ result }}</div> |
| </div> |
| </div> |
| {% endif %} |
|
|
| </div> |
|
|
| <script> |
| document.getElementById('mainForm').addEventListener('submit', function() { |
| const btn = document.getElementById('submitBtn'); |
| btn.classList.add('loading'); |
| btn.disabled = true; |
| }); |
| </script> |
| </body> |
| </html> |
