Spaces:
Running
Running
improve UI/UX
Browse files- index.html +36 -13
- wasm-demo.js +4 -1
index.html
CHANGED
|
@@ -3,11 +3,11 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
| 6 |
-
<title>
|
| 7 |
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
| 8 |
|
| 9 |
<style>
|
| 10 |
-
@import url('https://fonts.googleapis.com/css2?family=
|
| 11 |
|
| 12 |
:root {
|
| 13 |
--yellow: #ffd200;
|
|
@@ -23,13 +23,31 @@
|
|
| 23 |
/* reset */
|
| 24 |
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
| 25 |
body {
|
| 26 |
-
font-family: '
|
| 27 |
background: var(--yellow);
|
| 28 |
color: var(--black);
|
| 29 |
line-height: 1.5;
|
| 30 |
font-weight: 400;
|
| 31 |
}
|
| 32 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 33 |
/* navbar */
|
| 34 |
.navbar {
|
| 35 |
display: flex;
|
|
@@ -52,7 +70,7 @@
|
|
| 52 |
border-radius: 8px;
|
| 53 |
font-size: 1rem;
|
| 54 |
font-weight: 600;
|
| 55 |
-
font-family: '
|
| 56 |
cursor: pointer;
|
| 57 |
transition: all .2s ease;
|
| 58 |
}
|
|
@@ -89,7 +107,7 @@
|
|
| 89 |
.hero-diagram {
|
| 90 |
background: var(--white);
|
| 91 |
border: 2px solid var(--black);
|
| 92 |
-
border-radius:
|
| 93 |
padding: calc(var(--spacing-unit) * 4);
|
| 94 |
box-shadow: 8px 8px 0 var(--black);
|
| 95 |
width: 100%;
|
|
@@ -100,7 +118,7 @@
|
|
| 100 |
}
|
| 101 |
.hero-diagram .mermaid {
|
| 102 |
max-width: 100%;
|
| 103 |
-
font-family: '
|
| 104 |
}
|
| 105 |
|
| 106 |
/* wizard */
|
|
@@ -127,7 +145,7 @@
|
|
| 127 |
.card {
|
| 128 |
background: var(--white);
|
| 129 |
border: 2px solid var(--black);
|
| 130 |
-
border-radius:
|
| 131 |
box-shadow: 6px 6px 0 var(--black);
|
| 132 |
padding: calc(var(--spacing-unit) * 4);
|
| 133 |
min-height: 280px;
|
|
@@ -167,8 +185,8 @@
|
|
| 167 |
width: 100%;
|
| 168 |
padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
|
| 169 |
border: 2px solid var(--black);
|
| 170 |
-
border-radius:
|
| 171 |
-
font-family: '
|
| 172 |
font-size: 1rem;
|
| 173 |
resize: vertical;
|
| 174 |
background: var(--white);
|
|
@@ -191,8 +209,8 @@
|
|
| 191 |
padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
|
| 192 |
min-width: 160px;
|
| 193 |
font-size: 1rem;
|
| 194 |
-
font-family: '
|
| 195 |
-
border-radius:
|
| 196 |
cursor: pointer;
|
| 197 |
transition: all .2s ease;
|
| 198 |
display: inline-flex;
|
|
@@ -248,7 +266,7 @@
|
|
| 248 |
|
| 249 |
/* Result styling */
|
| 250 |
#decResult {
|
| 251 |
-
font-family: '
|
| 252 |
padding: calc(var(--spacing-unit) * 2);
|
| 253 |
background: var(--grey-050);
|
| 254 |
border: 2px solid var(--black);
|
|
@@ -313,12 +331,16 @@
|
|
| 313 |
primaryTextColor: '#000',
|
| 314 |
lineColor: '#000',
|
| 315 |
tertiaryColor: '#fff',
|
| 316 |
-
fontFamily: '
|
| 317 |
}
|
| 318 |
});
|
| 319 |
</script>
|
| 320 |
</head>
|
| 321 |
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 322 |
<!-- Navbar -->
|
| 323 |
<nav class="navbar">
|
| 324 |
<div class="logo">ZAMA</div>
|
|
@@ -388,6 +410,7 @@ sequenceDiagram
|
|
| 388 |
<button id="btnEncrypt" class="btn" disabled>🛡️ Encrypt</button>
|
| 389 |
<span id="encryptSpin" class="loader" hidden aria-label="Encrypting"></span>
|
| 390 |
<span id="encIcon" hidden aria-label="Encrypted">🔒</span>
|
|
|
|
| 391 |
</div>
|
| 392 |
</div>
|
| 393 |
</section>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
| 6 |
+
<title>Private SynthID - Check if your text is AI Generated</title>
|
| 7 |
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
| 8 |
|
| 9 |
<style>
|
| 10 |
+
@import url('https://fonts.googleapis.com/css2?family=Telegraf:wght@400;500;600;700&display=swap');
|
| 11 |
|
| 12 |
:root {
|
| 13 |
--yellow: #ffd200;
|
|
|
|
| 23 |
/* reset */
|
| 24 |
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
|
| 25 |
body {
|
| 26 |
+
font-family: 'Telegraf', sans-serif;
|
| 27 |
background: var(--yellow);
|
| 28 |
color: var(--black);
|
| 29 |
line-height: 1.5;
|
| 30 |
font-weight: 400;
|
| 31 |
}
|
| 32 |
|
| 33 |
+
.explanation-text {
|
| 34 |
+
max-width: var(--container-max);
|
| 35 |
+
margin: 0 auto calc(var(--spacing-unit) * 4);
|
| 36 |
+
padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4);
|
| 37 |
+
font-size: 1.1rem;
|
| 38 |
+
line-height: 1.6;
|
| 39 |
+
}
|
| 40 |
+
|
| 41 |
+
.explanation-text a {
|
| 42 |
+
color: var(--black);
|
| 43 |
+
text-decoration: underline;
|
| 44 |
+
font-weight: 500;
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
.explanation-text a:hover {
|
| 48 |
+
opacity: 0.8;
|
| 49 |
+
}
|
| 50 |
+
|
| 51 |
/* navbar */
|
| 52 |
.navbar {
|
| 53 |
display: flex;
|
|
|
|
| 70 |
border-radius: 8px;
|
| 71 |
font-size: 1rem;
|
| 72 |
font-weight: 600;
|
| 73 |
+
font-family: 'Telegraf', sans-serif;
|
| 74 |
cursor: pointer;
|
| 75 |
transition: all .2s ease;
|
| 76 |
}
|
|
|
|
| 107 |
.hero-diagram {
|
| 108 |
background: var(--white);
|
| 109 |
border: 2px solid var(--black);
|
| 110 |
+
border-radius: 0;
|
| 111 |
padding: calc(var(--spacing-unit) * 4);
|
| 112 |
box-shadow: 8px 8px 0 var(--black);
|
| 113 |
width: 100%;
|
|
|
|
| 118 |
}
|
| 119 |
.hero-diagram .mermaid {
|
| 120 |
max-width: 100%;
|
| 121 |
+
font-family: 'Telegraf', sans-serif;
|
| 122 |
}
|
| 123 |
|
| 124 |
/* wizard */
|
|
|
|
| 145 |
.card {
|
| 146 |
background: var(--white);
|
| 147 |
border: 2px solid var(--black);
|
| 148 |
+
border-radius: 0;
|
| 149 |
box-shadow: 6px 6px 0 var(--black);
|
| 150 |
padding: calc(var(--spacing-unit) * 4);
|
| 151 |
min-height: 280px;
|
|
|
|
| 185 |
width: 100%;
|
| 186 |
padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
|
| 187 |
border: 2px solid var(--black);
|
| 188 |
+
border-radius: 0;
|
| 189 |
+
font-family: 'Telegraf', sans-serif;
|
| 190 |
font-size: 1rem;
|
| 191 |
resize: vertical;
|
| 192 |
background: var(--white);
|
|
|
|
| 209 |
padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
|
| 210 |
min-width: 160px;
|
| 211 |
font-size: 1rem;
|
| 212 |
+
font-family: 'Telegraf', sans-serif;
|
| 213 |
+
border-radius: 0;
|
| 214 |
cursor: pointer;
|
| 215 |
transition: all .2s ease;
|
| 216 |
display: inline-flex;
|
|
|
|
| 266 |
|
| 267 |
/* Result styling */
|
| 268 |
#decResult {
|
| 269 |
+
font-family: 'Telegraf', sans-serif;
|
| 270 |
padding: calc(var(--spacing-unit) * 2);
|
| 271 |
background: var(--grey-050);
|
| 272 |
border: 2px solid var(--black);
|
|
|
|
| 331 |
primaryTextColor: '#000',
|
| 332 |
lineColor: '#000',
|
| 333 |
tertiaryColor: '#fff',
|
| 334 |
+
fontFamily: 'Telegraf'
|
| 335 |
}
|
| 336 |
});
|
| 337 |
</script>
|
| 338 |
</head>
|
| 339 |
<body>
|
| 340 |
+
<div class="explanation-text">
|
| 341 |
+
Private SynthID uses Google's SynthID technology to detect AI-generated text while preserving privacy through Fully Homomorphic Encryption (FHE). This means you can check if text was generated by AI without revealing the content to anyone. Learn more about <a href="https://deepmind.google/science/synthid/" target="_blank">SynthID</a> and <a href="https://huggingface.co/spaces/zama-fhe/encrypted_image_filtering" target="_blank">FHE applications</a>.
|
| 342 |
+
</div>
|
| 343 |
+
|
| 344 |
<!-- Navbar -->
|
| 345 |
<nav class="navbar">
|
| 346 |
<div class="logo">ZAMA</div>
|
|
|
|
| 410 |
<button id="btnEncrypt" class="btn" disabled>🛡️ Encrypt</button>
|
| 411 |
<span id="encryptSpin" class="loader" hidden aria-label="Encrypting"></span>
|
| 412 |
<span id="encIcon" hidden aria-label="Encrypted">🔒</span>
|
| 413 |
+
<span id="encStatus" class="status"></span>
|
| 414 |
</div>
|
| 415 |
</div>
|
| 416 |
</section>
|
wasm-demo.js
CHANGED
|
@@ -66,10 +66,12 @@ show('tokenizerSpin', false);
|
|
| 66 |
show('encIcon', true);
|
| 67 |
enable('btnEncrypt', true);
|
| 68 |
enable('btnSend');
|
|
|
|
| 69 |
} else if (e.data.type === 'error') {
|
| 70 |
console.error('[Main] Encryption error:', e.data.error);
|
| 71 |
show('encryptSpin', false);
|
| 72 |
enable('btnEncrypt', true);
|
|
|
|
| 73 |
alert(`Encryption failed: ${e.data.error}`);
|
| 74 |
}
|
| 75 |
};
|
|
@@ -178,6 +180,8 @@ $('btnSend').onclick = async () => {
|
|
| 178 |
uid: sessionUid,
|
| 179 |
ciphertext_b64
|
| 180 |
})
|
|
|
|
|
|
|
| 181 |
});
|
| 182 |
|
| 183 |
console.log(`[Main] Server response status: ${response.status}`);
|
|
@@ -206,7 +210,6 @@ $('btnSend').onclick = async () => {
|
|
| 206 |
console.error(`[Main] Server request failed after ${duration}s:`, e);
|
| 207 |
$('srvComputing').hidden = true;
|
| 208 |
$('srvStatus').textContent = `Server error: ${e.message} (${duration}s)`;
|
| 209 |
-
} finally {
|
| 210 |
show('spin', false);
|
| 211 |
}
|
| 212 |
};
|
|
|
|
| 66 |
show('encIcon', true);
|
| 67 |
enable('btnEncrypt', true);
|
| 68 |
enable('btnSend');
|
| 69 |
+
$('encStatus').textContent = 'Your text is encrypted 🔒';
|
| 70 |
} else if (e.data.type === 'error') {
|
| 71 |
console.error('[Main] Encryption error:', e.data.error);
|
| 72 |
show('encryptSpin', false);
|
| 73 |
enable('btnEncrypt', true);
|
| 74 |
+
$('encStatus').textContent = `Encryption failed: ${e.data.error}`;
|
| 75 |
alert(`Encryption failed: ${e.data.error}`);
|
| 76 |
}
|
| 77 |
};
|
|
|
|
| 180 |
uid: sessionUid,
|
| 181 |
ciphertext_b64
|
| 182 |
})
|
| 183 |
+
}).catch(error => {
|
| 184 |
+
throw new Error(`Server unreachable: ${error.message}`);
|
| 185 |
});
|
| 186 |
|
| 187 |
console.log(`[Main] Server response status: ${response.status}`);
|
|
|
|
| 210 |
console.error(`[Main] Server request failed after ${duration}s:`, e);
|
| 211 |
$('srvComputing').hidden = true;
|
| 212 |
$('srvStatus').textContent = `Server error: ${e.message} (${duration}s)`;
|
|
|
|
| 213 |
show('spin', false);
|
| 214 |
}
|
| 215 |
};
|