Update templates/index.html
Browse files- templates/index.html +48 -18
templates/index.html
CHANGED
|
@@ -3,34 +3,64 @@
|
|
| 3 |
<head>
|
| 4 |
<title>EE Server</title>
|
| 5 |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 6 |
</head>
|
| 7 |
-
<body class="container mt-5">
|
| 8 |
-
<h1>Equivariant Encryption Server</h1>
|
| 9 |
-
<ul class="nav nav-tabs">
|
| 10 |
-
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#server">Start Inference Server</a></li>
|
| 11 |
-
</ul>
|
| 12 |
|
| 13 |
-
<div class="
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 14 |
|
| 15 |
-
<!-- Server Tab -->
|
| 16 |
-
<div class="tab-pane" id="server">
|
| 17 |
<form method="POST">
|
| 18 |
<input type="hidden" name="action" value="start_server">
|
| 19 |
-
<div class="mb-3"
|
| 20 |
-
|
| 21 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
</form>
|
| 23 |
-
|
| 24 |
</div>
|
| 25 |
|
|
|
|
| 26 |
{% with messages = get_flashed_messages(with_categories=true) %}
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
{% endwith %}
|
| 33 |
|
| 34 |
-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
| 35 |
</body>
|
| 36 |
</html>
|
|
|
|
| 3 |
<head>
|
| 4 |
<title>EE Server</title>
|
| 5 |
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
| 6 |
+
<style>
|
| 7 |
+
body { background: #f8f9fa; }
|
| 8 |
+
.card { border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
|
| 9 |
+
.status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-right: 8px; }
|
| 10 |
+
.dot-green { background: #28a745; box-shadow: 0 0 6px #28a745; animation: pulse 2s infinite; }
|
| 11 |
+
.dot-gray { background: #adb5bd; }
|
| 12 |
+
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
|
| 13 |
+
</style>
|
| 14 |
</head>
|
| 15 |
+
<body class="container mt-5" style="max-width:600px">
|
|
|
|
|
|
|
|
|
|
|
|
|
| 16 |
|
| 17 |
+
<div class="text-center mb-4">
|
| 18 |
+
<h2 class="fw-bold">Equivariant Encryption Server</h2>
|
| 19 |
+
<p class="text-muted">Secure inference endpoint</p>
|
| 20 |
+
</div>
|
| 21 |
+
|
| 22 |
+
<!-- Status Card -->
|
| 23 |
+
<div class="card p-4 mb-4">
|
| 24 |
+
{% if server_ready %}
|
| 25 |
+
<div class="d-flex align-items-center mb-3">
|
| 26 |
+
<span class="status-dot dot-green"></span>
|
| 27 |
+
<strong class="text-success fs-5">Server Running</strong>
|
| 28 |
+
</div>
|
| 29 |
+
<p class="mb-1 text-muted">Model loaded:</p>
|
| 30 |
+
<p class="fw-semibold mb-3">{{ model_name }}</p>
|
| 31 |
+
<p class="mb-1 text-muted">Inference endpoint:</p>
|
| 32 |
+
<a href="{{ space_url }}/generate" target="_blank" class="btn btn-outline-primary btn-sm">
|
| 33 |
+
🔗 {{ space_url }}/generate
|
| 34 |
+
</a>
|
| 35 |
+
{% else %}
|
| 36 |
+
<div class="d-flex align-items-center mb-3">
|
| 37 |
+
<span class="status-dot dot-gray"></span>
|
| 38 |
+
<strong class="text-secondary fs-5">Server Not Started</strong>
|
| 39 |
+
</div>
|
| 40 |
|
|
|
|
|
|
|
| 41 |
<form method="POST">
|
| 42 |
<input type="hidden" name="action" value="start_server">
|
| 43 |
+
<div class="mb-3">
|
| 44 |
+
<label class="form-label fw-semibold">EE Model from Hub</label>
|
| 45 |
+
<input class="form-control" name="ee_model_name" placeholder="org/model-name" required>
|
| 46 |
+
</div>
|
| 47 |
+
<div class="mb-3">
|
| 48 |
+
<label class="form-label fw-semibold">HF Token</label>
|
| 49 |
+
<input type="password" class="form-control" name="hf_token" placeholder="hf_..." required>
|
| 50 |
+
</div>
|
| 51 |
+
<button class="btn btn-success w-100">▶ Load & Start Server</button>
|
| 52 |
</form>
|
| 53 |
+
{% endif %}
|
| 54 |
</div>
|
| 55 |
|
| 56 |
+
<!-- Flash messages -->
|
| 57 |
{% with messages = get_flashed_messages(with_categories=true) %}
|
| 58 |
+
{% if messages %}
|
| 59 |
+
{% for category, msg in messages %}
|
| 60 |
+
<div class="alert alert-{{ category }} rounded-3">{{ msg }}</div>
|
| 61 |
+
{% endfor %}
|
| 62 |
+
{% endif %}
|
| 63 |
{% endwith %}
|
| 64 |
|
|
|
|
| 65 |
</body>
|
| 66 |
</html>
|