| | <!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> |
