Spaces:

broadfield-dev
/

Equivariant-Encryption-Client

Sleeping

App Files Files Community

broadfield-dev commited on 14 days ago

Commit

2c143bb

verified ·

1 Parent(s): 9737a84

Update templates/client.html

Browse files

Files changed (1) hide show

templates/client.html +324 -36

templates/client.html CHANGED Viewed

@@ -2,55 +2,343 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>EE Secure Client</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        body { background: #f8f9fa; padding: 40px; }
-        .result { background: white; border: 1px solid #ddd; padding: 25px; border-radius: 10px; min-height: 220px; }
     </style>
 </head>
 <body>
-    <div class="container">
-        <h1 class="mb-4">🔒 Equivariant Encryption Client</h1>
-        <p class="lead">Your prompt is encrypted locally before leaving this browser.</p>
-        <form method="POST">
-            <div class="mb-3">
-                <label class="form-label">Server Space URL</label>
-                <input type="url" class="form-control" name="server_url"
-                       placeholder="https://your-ee-processor.hf.space" required>
             </div>
-            <div class="mb-3">
-                <label class="form-label">EE Model Name</label>
-                <input type="text" class="form-control" name="ee_model_name"
-                       placeholder="yourusername/qwen3-0.6b-dp-ee" required>
             </div>
-            <div class="mb-3">
-                <label class="form-label">Your Secret EE Seed</label>
-                <input type="number" class="form-control" name="ee_seed" value="424242" required>
-                <small class="text-muted">Same seed you used when transforming the model</small>
             </div>
-            <div class="mb-3">
-                <label class="form-label">Your Prompt</label>
-                <textarea class="form-control" name="prompt" rows="5" required></textarea>
             </div>
-            <div class="mb-3">
-                <label class="form-label">Max New Tokens</label>
-                <input type="number" class="form-control" name="max_tokens" value="512">
             </div>
-            <button type="submit" class="btn btn-primary btn-lg">Encrypt & Send to Blind Server</button>
-        </form>
-        {% if result %}
-        <h4 class="mt-5">Response from server (decrypted on your side):</h4>
-        <div class="result">{{ result }}</div>
-        {% endif %}
-        {% if error %}
-        <div class="alert alert-danger mt-5">{{ error }}</div>
-        {% endif %}
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 </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 */
+        .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 */
+        .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);
+        }
+        /* Form */
+        .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;
+        }
+        /* Inline row */
+        .field-row {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+        }
+        /* Submit */
+        .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 */
+        .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 */
+        .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;
+        }
+        /* Loading state */
+        .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="{{ form.get('server_url', '') }}"
+                    required>
             </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="{{ form.get('ee_model_name', '') }}"
+                    required>
             </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 &amp; 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>