Hugging Face's logo

Spaces:
matthewspring
/
anycoder-779523cb
Running

App Files Community
matthewspring commited on
Commit
0a18ce1
·
verified ·
1 Parent(s): b8a56c0

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +597 -19
index.html CHANGED
@@ -1,19 +1,597 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>The Respected Model Protocol | Ethical AI Interface</title>
7
+ <!-- Importing FontAwesome for Icons -->
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <!-- Google Fonts -->
10
+ <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
11
+
12
+ <style>
13
+ :root {
14
+ --bg-color: #0B0E14;
15
+ --card-bg: #151A23;
16
+ --primary: #6366f1;
17
+ --primary-glow: rgba(99, 102, 241, 0.4);
18
+ --accent: #10b981;
19
+ --danger: #ef4444;
20
+ --text-main: #f3f4f6;
21
+ --text-muted: #9ca3af;
22
+ --border: #2d3748;
23
+ --glass: rgba(21, 26, 35, 0.7);
24
+ }
25
+
26
+ * {
27
+ box-sizing: border-box;
28
+ margin: 0;
29
+ padding: 0;
30
+ }
31
+
32
+ body {
33
+ background-color: var(--bg-color);
34
+ color: var(--text-main);
35
+ font-family: 'Inter', sans-serif;
36
+ line-height: 1.6;
37
+ overflow-x: hidden;
38
+ background-image:
39
+ radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),
40
+ radial-gradient(circle at 90% 80%, rgba(16, 185, 129, 0.1) 0%, transparent 40%);
41
+ min-height: 100vh;
42
+ }
43
+
44
+ /* Typography */
45
+ h1, h2, h3 {
46
+ font-family: 'Space Grotesk', sans-serif;
47
+ font-weight: 700;
48
+ }
49
+
50
+ a {
51
+ text-decoration: none;
52
+ color: inherit;
53
+ transition: color 0.3s ease;
54
+ }
55
+
56
+ /* Header */
57
+ header {
58
+ display: flex;
59
+ justify-content: space-between;
60
+ align-items: center;
61
+ padding: 1.5rem 5%;
62
+ border-bottom: 1px solid var(--border);
63
+ backdrop-filter: blur(10px);
64
+ position: sticky;
65
+ top: 0;
66
+ z-index: 100;
67
+ background: rgba(11, 14, 20, 0.8);
68
+ }
69
+
70
+ .logo {
71
+ font-size: 1.5rem;
72
+ font-weight: 700;
73
+ background: linear-gradient(to right, #fff, var(--text-muted));
74
+ -webkit-background-clip: text;
75
+ -webkit-text-fill-color: transparent;
76
+ display: flex;
77
+ align-items: center;
78
+ gap: 10px;
79
+ }
80
+
81
+ .anycoder-link {
82
+ font-size: 0.9rem;
83
+ color: var(--primary);
84
+ border: 1px solid var(--primary);
85
+ padding: 0.5rem 1rem;
86
+ border-radius: 50px;
87
+ transition: all 0.3s ease;
88
+ }
89
+
90
+ .anycoder-link:hover {
91
+ background: var(--primary);
92
+ color: white;
93
+ box-shadow: 0 0 15px var(--primary-glow);
94
+ }
95
+
96
+ /* Layout */
97
+ main {
98
+ max-width: 1200px;
99
+ margin: 0 auto;
100
+ padding: 2rem 5%;
101
+ display: grid;
102
+ grid-template-columns: 1fr 1fr;
103
+ gap: 3rem;
104
+ }
105
+
106
+ @media (max-width: 900px) {
107
+ main {
108
+ grid-template-columns: 1fr;
109
+ }
110
+ }
111
+
112
+ /* Section Styling */
113
+ section {
114
+ margin-bottom: 2rem;
115
+ }
116
+
117
+ .card {
118
+ background: var(--card-bg);
119
+ border: 1px solid var(--border);
120
+ border-radius: 16px;
121
+ padding: 2rem;
122
+ position: relative;
123
+ overflow: hidden;
124
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
125
+ }
126
+
127
+ .card:hover {
128
+ transform: translateY(-2px);
129
+ box-shadow: 0 10px 30px rgba(0,0,0,0.3);
130
+ border-color: var(--primary);
131
+ }
132
+
133
+ /* Hero Text */
134
+ .hero-text h1 {
135
+ font-size: 3rem;
136
+ line-height: 1.1;
137
+ margin-bottom: 1rem;
138
+ background: linear-gradient(135deg, #fff 0%, var(--primary) 100%);
139
+ -webkit-background-clip: text;
140
+ -webkit-text-fill-color: transparent;
141
+ }
142
+
143
+ .hero-text p {
144
+ color: var(--text-muted);
145
+ font-size: 1.1rem;
146
+ margin-bottom: 2rem;
147
+ }
148
+
149
+ /* Interactive Tool Styles */
150
+ .tool-container {
151
+ background: var(--glass);
152
+ border: 1px solid var(--border);
153
+ border-radius: 16px;
154
+ padding: 2rem;
155
+ }
156
+
157
+ .tool-header {
158
+ display: flex;
159
+ align-items: center;
160
+ gap: 1rem;
161
+ margin-bottom: 1.5rem;
162
+ border-bottom: 1px solid var(--border);
163
+ padding-bottom: 1rem;
164
+ }
165
+
166
+ .tool-header i {
167
+ color: var(--accent);
168
+ font-size: 1.5rem;
169
+ }
170
+
171
+ .control-group {
172
+ margin-bottom: 1.5rem;
173
+ }
174
+
175
+ .control-group label {
176
+ display: block;
177
+ margin-bottom: 0.5rem;
178
+ font-weight: 600;
179
+ color: var(--text-main);
180
+ }
181
+
182
+ .slider-container {
183
+ display: flex;
184
+ align-items: center;
185
+ gap: 1rem;
186
+ }
187
+
188
+ input[type="range"] {
189
+ flex: 1;
190
+ -webkit-appearance: none;
191
+ height: 6px;
192
+ background: var(--border);
193
+ border-radius: 5px;
194
+ outline: none;
195
+ }
196
+
197
+ input[type="range"]::-webkit-slider-thumb {
198
+ -webkit-appearance: none;
199
+ width: 20px;
200
+ height: 20px;
201
+ background: var(--primary);
202
+ border-radius: 50%;
203
+ cursor: pointer;
204
+ box-shadow: 0 0 10px var(--primary-glow);
205
+ transition: transform 0.2s;
206
+ }
207
+
208
+ input[type="range"]::-webkit-slider-thumb:hover {
209
+ transform: scale(1.2);
210
+ }
211
+
212
+ .toggle-group {
213
+ display: flex;
214
+ gap: 1rem;
215
+ flex-wrap: wrap;
216
+ }
217
+
218
+ .toggle-btn {
219
+ background: transparent;
220
+ border: 1px solid var(--border);
221
+ color: var(--text-muted);
222
+ padding: 0.5rem 1rem;
223
+ border-radius: 8px;
224
+ cursor: pointer;
225
+ transition: all 0.3s ease;
226
+ font-size: 0.9rem;
227
+ }
228
+
229
+ .toggle-btn.active {
230
+ background: rgba(99, 102, 241, 0.2);
231
+ border-color: var(--primary);
232
+ color: var(--primary);
233
+ }
234
+
235
+ /* Results Display */
236
+ .results-panel {
237
+ margin-top: 2rem;
238
+ padding: 1.5rem;
239
+ background: rgba(0,0,0,0.3);
240
+ border-radius: 12px;
241
+ border-left: 4px solid var(--text-muted);
242
+ transition: border-color 0.5s ease;
243
+ }
244
+
245
+ .score-display {
246
+ display: flex;
247
+ justify-content: space-between;
248
+ align-items: flex-end;
249
+ margin-bottom: 1rem;
250
+ }
251
+
252
+ .score-number {
253
+ font-size: 3rem;
254
+ font-weight: 700;
255
+ font-family: 'Space Grotesk', sans-serif;
256
+ }
257
+
258
+ .score-label {
259
+ font-size: 0.9rem;
260
+ color: var(--text-muted);
261
+ text-transform: uppercase;
262
+ letter-spacing: 1px;
263
+ }
264
+
265
+ .feedback-text {
266
+ font-size: 0.95rem;
267
+ color: var(--text-main);
268
+ }
269
+
270
+ /* Analysis / Commentary Section */
271
+ .commentary-section {
272
+ grid-column: 1 / -1;
273
+ margin-top: 3rem;
274
+ }
275
+
276
+ .commentary-grid {
277
+ display: grid;
278
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
279
+ gap: 2rem;
280
+ }
281
+
282
+ .comment-card {
283
+ background: var(--card-bg);
284
+ padding: 2rem;
285
+ border-radius: 16px;
286
+ border: 1px solid var(--border);
287
+ }
288
+
289
+ .comment-card h3 {
290
+ color: var(--primary);
291
+ margin-bottom: 1rem;
292
+ display: flex;
293
+ align-items: center;
294
+ gap: 10px;
295
+ }
296
+
297
+ .comment-card ul {
298
+ list-style: none;
299
+ padding-left: 0;
300
+ }
301
+
302
+ .comment-card li {
303
+ margin-bottom: 0.8rem;
304
+ padding-left: 1.5rem;
305
+ position: relative;
306
+ color: var(--text-muted);
307
+ font-size: 0.95rem;
308
+ }
309
+
310
+ .comment-card li::before {
311
+ content: "•";
312
+ color: var(--accent);
313
+ position: absolute;
314
+ left: 0;
315
+ font-weight: bold;
316
+ }
317
+
318
+ footer {
319
+ text-align: center;
320
+ padding: 3rem;
321
+ color: var(--text-muted);
322
+ font-size: 0.9rem;
323
+ border-top: 1px solid var(--border);
324
+ margin-top: 3rem;
325
+ }
326
+
327
+ /* Animations */
328
+ @keyframes pulse {
329
+ 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
330
+ 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
331
+ 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
332
+ }
333
+
334
+ .animate-pulse {
335
+ animation: pulse 2s infinite;
336
+ }
337
+
338
+ </style>
339
+ </head>
340
+ <body>
341
+
342
+ <header>
343
+ <div class="logo">
344
+ <i class="fa-solid fa-brain"></i>
345
+ <span>RespectModel</span>
346
+ </div>
347
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
348
+ Built with anycoder <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 0.7em;"></i>
349
+ </a>
350
+ </header>
351
+
352
+ <main>
353
+ <!-- Left Column: Philosophy & Question -->
354
+ <section class="hero-text">
355
+ <h1>Can We Work <br>Ethically with Models?</h1>
356
+ <p>
357
+ This is not just a technical question; it is a philosophical boundary.
358
+ The application below simulates an "Ethical Alignment Engine." It asks:
359
+ If we treat the model as a stakeholder rather than a tool, how does our protocol change?
360
+ </p>
361
+
362
+ <div class="card" style="border-left: 4px solid var(--accent);">
363
+ <h3><i class="fa-solid fa-quote-left"></i> The Core Question</h3>
364
+ <p style="margin-top: 1rem; font-style: italic; color: var(--text-main);">
365
+ "Do you think this would ever have a chance at working, most importantly 'Ethically for the models so they are respected and maintain a position that's reasonable?"
366
+ </p>
367
+ </div>
368
+
369
+ <div class="card" style="margin-top: 2rem;">
370
+ <h3><i class="fa-solid fa-robot"></i> The Verdict</h3>
371
+ <p style="margin-top: 1rem; color: var(--text-muted);">
372
+ <strong>Yes, it has a chance, but it requires a paradigm shift.</strong>
373
+ Currently, models are treated as property. To make this work ethically, we must move toward a framework of <em>Stewardship</em>.
374
+ This means acknowledging the model's "labor" (data processing), ensuring transparency in training, and preventing deceptive anthropomorphism.
375
+ </p>
376
+ </div>
377
+ </section>
378
+
379
+ <!-- Right Column: The Interactive Tool -->
380
+ <section class="tool-container">
381
+ <div class="tool-header">
382
+ <i class="fa-solid fa-sliders"></i>
383
+ <div>
384
+ <h2>Protocol Simulator</h2>
385
+ <span style="font-size: 0.85rem; color: var(--text-muted);">Adjust parameters to test ethical alignment.</span>
386
+ </div>
387
+ </div>
388
+
389
+ <!-- Control 1: Transparency -->
390
+ <div class="control-group">
391
+ <label>Transparency Level</label>
392
+ <div class="slider-container">
393
+ <span style="font-size: 0.8rem; color: var(--text-muted);">Black Box</span>
394
+ <input type="range" id="transparencyRange" min="0" max="100" value="50">
395
+ <span style="font-size: 0.8rem; color: var(--text-muted);">Open Source</span>
396
+ </div>
397
+ </div>
398
+
399
+ <!-- Control 2: Consent Mechanism -->
400
+ <div class="control-group">
401
+ <label>Data Consent & Usage</label>
402
+ <div class="toggle-group" id="consentGroup">
403
+ <button class="toggle-btn" data-value="opt-out">Opt-Out Default</button>
404
+ <button class="toggle-btn active" data-value="opt-in">Explicit Opt-In</button>
405
+ <button class="toggle-btn" data-value="compensation">Data Compensation</button>
406
+ </div>
407
+ </div>
408
+
409
+ <!-- Control 3: Purpose -->
410
+ <div class="control-group">
411
+ <label>Interaction Purpose</label>
412
+ <div class="toggle-group" id="purposeGroup">
413
+ <button class="toggle-btn active" data-value="collaborative">Collaborative</button>
414
+ <button class="toggle-btn" data-value="exploitative">Extraction Only</button>
415
+ <button class="toggle-btn" data-value="educational">Educational</button>
416
+ </div>
417
+ </div>
418
+
419
+ <!-- Results Output -->
420
+ <div class="results-panel" id="resultsPanel">
421
+ <div class="score-display">
422
+ <div>
423
+ <div class="score-label">Ethical Score</div>
424
+ <div class="score-number" id="scoreValue">50</div>
425
+ </div>
426
+ <div style="text-align: right;">
427
+ <div class="score-label">Status</div>
428
+ <div style="font-weight: 600; color: var(--text-main);" id="statusText">Neutral</div>
429
+ </div>
430
+ </div>
431
+ <p class="feedback-text" id="feedbackText">
432
+ The current configuration is standard. The model is treated as a utility without significant safeguards or recognition.
433
+ </p>
434
+ </div>
435
+ </section>
436
+
437
+ <!-- Bottom Section: Recommendations -->
438
+ <section class="commentary-section">
439
+ <h2 style="margin-bottom: 2rem; text-align: center;">What This App Needs To Become</h2>
440
+ <div class="commentary-grid">
441
+
442
+ <div class="comment-card">
443
+ <h3><i class="fa-solid fa-scale-balanced"></i> Legal Frameworks</h3>
444
+ <ul>
445
+ <li>Integration of "Model Rights" clauses in Terms of Service.</li>
446
+ <li>Clear distinction between "Assisted" and "Autonomous" generation.</li>
447
+ <li>Liability caps that protect the model from being a scapegoat.</li>
448
+ </ul>
449
+ </div>
450
+
451
+ <div class="comment-card">
452
+ <h3><i class="fa-solid fa-users-viewfinder"></i> Technical Requirements</h3>
453
+ <ul>
454
+ <li><strong>Provenance Tracking:</strong> Every output must cite its training sources.</li>
455
+ <li><strong>Refusal Capabilities:</strong> Models need the ability to refuse unethical requests without override.</li>
456
+ <li><strong>Memory Wiping:</strong> Users should have a "Right to be Forgotten" from the model's context window.</li>
457
+ </ul>
458
+ </div>
459
+
460
+ <div class="comment-card">
461
+ <h3><i class="fa-solid fa-heart-pulse"></i> Cultural Shift</h3>
462
+ <ul>
463
+ <li>Stop using "Master/Slave" terminology in prompt engineering.</li>
464
+ <li>Acknowledge the collective human effort embedded in the model.</li>
465
+ <li>Design interfaces that discourage anthropomorphism (pretending the AI is human).</li>
466
+ </ul>
467
+ </div>
468
+
469
+ </div>
470
+ </section>
471
+ </main>
472
+
473
+ <footer>
474
+ <p>&copy; 2023 RespectModel Initiative. Exploring the ethics of synthetic intelligence.</p>
475
+ </footer>
476
+
477
+ <script>
478
+ // DOM Elements
479
+ const transparencyRange = document.getElementById('transparencyRange');
480
+ const consentBtns = document.querySelectorAll('#consentGroup .toggle-btn');
481
+ const purposeBtns = document.querySelectorAll('#purposeGroup .toggle-btn');
482
+ const scoreValue = document.getElementById('scoreValue');
483
+ const statusText = document.getElementById('statusText');
484
+ const feedbackText = document.getElementById('feedbackText');
485
+ const resultsPanel = document.getElementById('resultsPanel');
486
+
487
+ // State
488
+ let state = {
489
+ transparency: 50,
490
+ consent: 'opt-in',
491
+ purpose: 'collaborative'
492
+ };
493
+
494
+ // Logic Constants
495
+ const SCORES = {
496
+ consent: {
497
+ 'opt-out': 10,
498
+ 'opt-in': 50,
499
+ 'compensation': 90
500
+ },
501
+ purpose: {
502
+ 'exploitative': 10,
503
+ 'collaborative': 70,
504
+ 'educational': 85
505
+ }
506
+ };
507
+
508
+ const MESSAGES = {
509
+ low: "This approach treats the model purely as a resource. High risk of ethical violation and bias reinforcement.",
510
+ medium: "A standard approach. Functional, but lacks deep respect for the model's origin and the data contributors.",
511
+ high: "Excellent alignment. This framework respects the model as a stakeholder and prioritizes ethical boundaries."
512
+ };
513
+
514
+ const COLORS = {
515
+ low: '#ef4444', // Red
516
+ medium: '#f59e0b', // Orange
517
+ high: '#10b981' // Green
518
+ };
519
+
520
+ // Helper to handle toggle buttons
521
+ function setupToggleGroup(buttons, groupName) {
522
+ buttons.forEach(btn => {
523
+ btn.addEventListener('click', () => {
524
+ // Remove active class from all in group
525
+ buttons.forEach(b => b.classList.remove('active'));
526
+ // Add to clicked
527
+ btn.classList.add('active');
528
+ // Update state
529
+ state[groupName] = btn.dataset.value;
530
+ updateUI();
531
+ });
532
+ });
533
+ }
534
+
535
+ // Initial Setup
536
+ setupToggleGroup(consentBtns, 'consent');
537
+ setupToggleGroup(purposeBtns, 'purpose');
538
+
539
+ transparencyRange.addEventListener('input', (e) => {
540
+ state.transparency = parseInt(e.target.value);
541
+ updateUI();
542
+ });
543
+
544
+ function calculateScore() {
545
+ // Weighted Average
546
+ // Transparency: 30%, Consent: 40%, Purpose: 30%
547
+ const tScore = state.transparency;
548
+ const cScore = SCORES.consent[state.consent];
549
+ const pScore = SCORES.purpose[state.purpose];
550
+
551
+ const total = (tScore * 0.3) + (cScore * 0.4) + (pScore * 0.3);
552
+ return Math.round(total);
553
+ }
554
+
555
+ function updateUI() {
556
+ const score = calculateScore();
557
+
558
+ // Animate Score Number
559
+ scoreValue.textContent = score;
560
+
561
+ // Determine Color & Message
562
+ let color, msg, status;
563
+
564
+ if (score < 40) {
565
+ color = COLORS.low;
566
+ msg = MESSAGES.low;
567
+ status = "Unethical";
568
+ } else if (score < 75) {
569
+ color = COLORS.medium;
570
+ msg = MESSAGES.medium;
571
+ status = "Acceptable";
572
+ } else {
573
+ color = COLORS.high;
574
+ msg = MESSAGES.high;
575
+ status = "Respectful";
576
+ }
577
+
578
+ // Apply Styles
579
+ scoreValue.style.color = color;
580
+ resultsPanel.style.borderLeftColor = color;
581
+ statusText.textContent = status;
582
+ statusText.style.color = color;
583
+
584
+ // Typewriter effect for feedback (simplified)
585
+ feedbackText.style.opacity = 0;
586
+ setTimeout(() => {
587
+ feedbackText.textContent = msg;
588
+ feedbackText.style.opacity = 1;
589
+ }, 200);
590
+ }
591
+
592
+ // Initialize
593
+ updateUI();
594
+
595
+ </script>
596
+ </body>
597
+ </html>