Hugging Face's logo

Spaces:
Princess3
/
ClawWork-Demo
Running

App Files Community
Princess3 commited on
Commit
914378e
·
verified ·
1 Parent(s): 9bafa3e

Update ClawWork Demo files

Browse files
Files changed (2) hide show
  1. README.md +20 -4
  2. index.html +961 -18
README.md CHANGED
@@ -1,10 +1,26 @@
1
  ---
2
  title: ClawWork Demo
3
- emoji: 😻
4
- colorFrom: red
5
  colorTo: purple
6
  sdk: static
7
- pinned: false
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  ---
2
  title: ClawWork Demo
3
+ emoji: 🦀
4
+ colorFrom: blue
5
  colorTo: purple
6
  sdk: static
7
+ short_description: AI Coworker Economic Benchmarking Demo
8
  ---
9
 
10
+ # ClawWork Demo
11
+
12
+ Interactive demo of [ClawWork](https://github.com/HKUDS/ClawWork) — OpenClaw as Your AI Coworker.
13
+
14
+ AI agents start with $10, complete 220 professional tasks across 44 economic sectors, and must earn income through quality work to survive. Top agents achieve $1,500+/hr equivalent earnings.
15
+
16
+ ## Features
17
+
18
+ - 🎮 **Interactive Task Simulator** — Watch AI agents complete real professional tasks
19
+ - 📊 **Live Leaderboard** — See how different LLMs compete head-to-head
20
+ - 💰 **Economic Dynamics** — Track balance, earnings, and quality scores
21
+ - 📈 **Animated Stats** — Key metrics from the benchmark
22
+
23
+ ## Links
24
+
25
+ - [GitHub Repository](https://github.com/HKUDS/ClawWork)
26
+ - [Paper](https://arxiv.org/abs/2504.13042)
index.html CHANGED
@@ -1,19 +1,962 @@
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>ClawWork — OpenClaw as Your AI Coworker</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
10
+ <style>
11
+ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
12
+
13
+ :root {
14
+ --bg: #0a0a0a;
15
+ --card: #1a1a2e;
16
+ --card-hover: #22223a;
17
+ --border: #2a2a4a;
18
+ --text: #e8e8f0;
19
+ --text-muted: #8888aa;
20
+ --gold: #FFD700;
21
+ --silver: #C0C0C0;
22
+ --bronze: #CD7F32;
23
+ --green: #00ff88;
24
+ --red: #ff4444;
25
+ --accent: #6c5ce7;
26
+ --accent-light: #a29bfe;
27
+ }
28
+
29
+ html { scroll-behavior: smooth; }
30
+
31
+ body {
32
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
33
+ background: var(--bg);
34
+ color: var(--text);
35
+ line-height: 1.6;
36
+ min-height: 100vh;
37
+ overflow-x: hidden;
38
+ }
39
+
40
+ .container {
41
+ max-width: 1200px;
42
+ margin: 0 auto;
43
+ padding: 0 24px;
44
+ }
45
+
46
+ /* ========== NAV ========== */
47
+ nav {
48
+ position: fixed;
49
+ top: 0;
50
+ left: 0;
51
+ right: 0;
52
+ z-index: 100;
53
+ background: rgba(10, 10, 10, 0.85);
54
+ backdrop-filter: blur(20px);
55
+ border-bottom: 1px solid var(--border);
56
+ padding: 16px 0;
57
+ }
58
+ nav .container {
59
+ display: flex;
60
+ align-items: center;
61
+ justify-content: space-between;
62
+ }
63
+ .nav-logo {
64
+ font-size: 1.3rem;
65
+ font-weight: 800;
66
+ color: var(--gold);
67
+ text-decoration: none;
68
+ letter-spacing: -0.5px;
69
+ }
70
+ .nav-links { display: flex; gap: 24px; align-items: center; }
71
+ .nav-links a {
72
+ color: var(--text-muted);
73
+ text-decoration: none;
74
+ font-size: 0.9rem;
75
+ font-weight: 500;
76
+ transition: color 0.2s;
77
+ }
78
+ .nav-links a:hover { color: var(--text); }
79
+ .nav-cta {
80
+ background: var(--accent);
81
+ color: #fff !important;
82
+ padding: 8px 18px;
83
+ border-radius: 8px;
84
+ font-weight: 600;
85
+ transition: transform 0.2s, box-shadow 0.2s;
86
+ }
87
+ .nav-cta:hover {
88
+ transform: translateY(-1px);
89
+ box-shadow: 0 4px 20px rgba(108, 92, 231, 0.4);
90
+ }
91
+
92
+ /* ========== HERO ========== */
93
+ .hero {
94
+ padding: 160px 0 80px;
95
+ text-align: center;
96
+ position: relative;
97
+ overflow: hidden;
98
+ }
99
+ .hero::before {
100
+ content: '';
101
+ position: absolute;
102
+ top: -50%;
103
+ left: 50%;
104
+ transform: translateX(-50%);
105
+ width: 800px;
106
+ height: 800px;
107
+ background: radial-gradient(circle, rgba(108, 92, 231, 0.12) 0%, transparent 70%);
108
+ pointer-events: none;
109
+ }
110
+ .hero-badge {
111
+ display: inline-block;
112
+ background: rgba(108, 92, 231, 0.15);
113
+ border: 1px solid rgba(108, 92, 231, 0.3);
114
+ color: var(--accent-light);
115
+ padding: 6px 16px;
116
+ border-radius: 20px;
117
+ font-size: 0.8rem;
118
+ font-weight: 600;
119
+ margin-bottom: 24px;
120
+ letter-spacing: 0.5px;
121
+ }
122
+ .hero h1 {
123
+ font-size: clamp(2.5rem, 6vw, 4.5rem);
124
+ font-weight: 900;
125
+ letter-spacing: -2px;
126
+ margin-bottom: 8px;
127
+ background: linear-gradient(135deg, #fff 0%, var(--gold) 100%);
128
+ -webkit-background-clip: text;
129
+ -webkit-text-fill-color: transparent;
130
+ background-clip: text;
131
+ }
132
+ .hero .subtitle {
133
+ font-size: clamp(1.1rem, 2.5vw, 1.6rem);
134
+ color: var(--text-muted);
135
+ font-weight: 500;
136
+ margin-bottom: 12px;
137
+ }
138
+ .hero .tagline {
139
+ font-size: clamp(0.95rem, 2vw, 1.15rem);
140
+ color: var(--text-muted);
141
+ max-width: 580px;
142
+ margin: 0 auto 40px;
143
+ opacity: 0.8;
144
+ }
145
+
146
+ .balance-widget {
147
+ display: inline-flex;
148
+ flex-direction: column;
149
+ align-items: center;
150
+ background: var(--card);
151
+ border: 1px solid var(--border);
152
+ border-radius: 16px;
153
+ padding: 24px 48px;
154
+ margin-bottom: 32px;
155
+ position: relative;
156
+ }
157
+ .balance-widget::after {
158
+ content: '';
159
+ position: absolute;
160
+ inset: -1px;
161
+ border-radius: 17px;
162
+ background: linear-gradient(135deg, var(--gold), var(--green));
163
+ z-index: -1;
164
+ opacity: 0.2;
165
+ }
166
+ .balance-label {
167
+ font-size: 0.75rem;
168
+ text-transform: uppercase;
169
+ letter-spacing: 2px;
170
+ color: var(--text-muted);
171
+ margin-bottom: 4px;
172
+ }
173
+ .balance-amount {
174
+ font-size: 3rem;
175
+ font-weight: 900;
176
+ color: var(--green);
177
+ font-variant-numeric: tabular-nums;
178
+ }
179
+ .hero-github {
180
+ display: inline-flex;
181
+ align-items: center;
182
+ gap: 8px;
183
+ background: #fff;
184
+ color: #000;
185
+ text-decoration: none;
186
+ padding: 12px 28px;
187
+ border-radius: 10px;
188
+ font-weight: 600;
189
+ font-size: 0.95rem;
190
+ transition: transform 0.2s, box-shadow 0.2s;
191
+ }
192
+ .hero-github:hover {
193
+ transform: translateY(-2px);
194
+ box-shadow: 0 8px 30px rgba(255, 255, 255, 0.15);
195
+ }
196
+ .hero-github svg { width: 20px; height: 20px; }
197
+
198
+ /* ========== SECTION COMMON ========== */
199
+ section { padding: 80px 0; }
200
+ .section-label {
201
+ text-transform: uppercase;
202
+ letter-spacing: 3px;
203
+ font-size: 0.75rem;
204
+ font-weight: 700;
205
+ color: var(--accent-light);
206
+ margin-bottom: 12px;
207
+ }
208
+ .section-title {
209
+ font-size: clamp(1.8rem, 4vw, 2.5rem);
210
+ font-weight: 800;
211
+ letter-spacing: -1px;
212
+ margin-bottom: 16px;
213
+ }
214
+ .section-desc {
215
+ color: var(--text-muted);
216
+ max-width: 600px;
217
+ font-size: 1.05rem;
218
+ margin-bottom: 48px;
219
+ }
220
+
221
+ /* ========== HOW IT WORKS ========== */
222
+ .cards-grid {
223
+ display: grid;
224
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
225
+ gap: 24px;
226
+ }
227
+ .card {
228
+ background: var(--card);
229
+ border: 1px solid var(--border);
230
+ border-radius: 16px;
231
+ padding: 32px;
232
+ transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
233
+ }
234
+ .card:hover {
235
+ transform: translateY(-4px);
236
+ border-color: var(--accent);
237
+ box-shadow: 0 12px 40px rgba(108, 92, 231, 0.15);
238
+ }
239
+ .card-icon {
240
+ font-size: 2.2rem;
241
+ margin-bottom: 16px;
242
+ display: block;
243
+ }
244
+ .card h3 {
245
+ font-size: 1.2rem;
246
+ font-weight: 700;
247
+ margin-bottom: 8px;
248
+ }
249
+ .card p {
250
+ color: var(--text-muted);
251
+ font-size: 0.95rem;
252
+ line-height: 1.7;
253
+ }
254
+ .card .card-stat {
255
+ margin-top: 16px;
256
+ font-size: 1.8rem;
257
+ font-weight: 800;
258
+ color: var(--gold);
259
+ }
260
+ .card .card-stat span {
261
+ display: block;
262
+ font-size: 0.75rem;
263
+ font-weight: 500;
264
+ color: var(--text-muted);
265
+ margin-top: 2px;
266
+ }
267
+
268
+ /* ========== SIMULATOR ========== */
269
+ #simulator { background: #0d0d18; }
270
+ .sim-layout {
271
+ display: grid;
272
+ grid-template-columns: 1fr 1fr;
273
+ gap: 32px;
274
+ align-items: start;
275
+ }
276
+ .sim-controls {
277
+ background: var(--card);
278
+ border: 1px solid var(--border);
279
+ border-radius: 16px;
280
+ padding: 28px;
281
+ }
282
+ .sim-controls h3 {
283
+ font-size: 1.1rem;
284
+ font-weight: 700;
285
+ margin-bottom: 20px;
286
+ }
287
+ .sim-balance-display {
288
+ text-align: center;
289
+ padding: 20px;
290
+ background: rgba(0, 0, 0, 0.3);
291
+ border-radius: 12px;
292
+ margin-bottom: 20px;
293
+ }
294
+ .sim-balance-display .label {
295
+ font-size: 0.7rem;
296
+ text-transform: uppercase;
297
+ letter-spacing: 2px;
298
+ color: var(--text-muted);
299
+ }
300
+ .sim-balance-display .amount {
301
+ font-size: 2.2rem;
302
+ font-weight: 800;
303
+ color: var(--green);
304
+ font-variant-numeric: tabular-nums;
305
+ }
306
+ .sim-balance-display .amount.negative { color: var(--red); }
307
+ .sim-stats {
308
+ display: grid;
309
+ grid-template-columns: 1fr 1fr 1fr;
310
+ gap: 12px;
311
+ margin-bottom: 20px;
312
+ }
313
+ .sim-stat {
314
+ text-align: center;
315
+ padding: 12px 8px;
316
+ background: rgba(0, 0, 0, 0.2);
317
+ border-radius: 8px;
318
+ }
319
+ .sim-stat .val {
320
+ font-size: 1.3rem;
321
+ font-weight: 700;
322
+ }
323
+ .sim-stat .lbl {
324
+ font-size: 0.65rem;
325
+ text-transform: uppercase;
326
+ letter-spacing: 1px;
327
+ color: var(--text-muted);
328
+ }
329
+ .btn-run {
330
+ width: 100%;
331
+ padding: 14px;
332
+ background: linear-gradient(135deg, var(--accent), #8b5cf6);
333
+ color: #fff;
334
+ border: none;
335
+ border-radius: 10px;
336
+ font-family: inherit;
337
+ font-size: 1rem;
338
+ font-weight: 700;
339
+ cursor: pointer;
340
+ transition: transform 0.2s, box-shadow 0.2s;
341
+ }
342
+ .btn-run:hover {
343
+ transform: translateY(-2px);
344
+ box-shadow: 0 6px 24px rgba(108, 92, 231, 0.4);
345
+ }
346
+ .btn-run:disabled {
347
+ opacity: 0.5;
348
+ cursor: not-allowed;
349
+ transform: none;
350
+ box-shadow: none;
351
+ }
352
+ .btn-reset {
353
+ width: 100%;
354
+ padding: 12px;
355
+ background: transparent;
356
+ color: var(--text-muted);
357
+ border: 1px solid var(--border);
358
+ border-radius: 10px;
359
+ font-family: inherit;
360
+ font-size: 0.85rem;
361
+ font-weight: 600;
362
+ cursor: pointer;
363
+ margin-top: 10px;
364
+ transition: color 0.2s, border-color 0.2s;
365
+ }
366
+ .btn-reset:hover {
367
+ color: var(--text);
368
+ border-color: var(--text-muted);
369
+ }
370
+
371
+ .task-feed {
372
+ background: var(--card);
373
+ border: 1px solid var(--border);
374
+ border-radius: 16px;
375
+ padding: 28px;
376
+ max-height: 520px;
377
+ overflow-y: auto;
378
+ }
379
+ .task-feed h3 {
380
+ font-size: 1.1rem;
381
+ font-weight: 700;
382
+ margin-bottom: 16px;
383
+ }
384
+ .task-feed::-webkit-scrollbar { width: 6px; }
385
+ .task-feed::-webkit-scrollbar-track { background: transparent; }
386
+ .task-feed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
387
+
388
+ .task-item {
389
+ display: flex;
390
+ align-items: center;
391
+ gap: 14px;
392
+ padding: 14px;
393
+ border-radius: 10px;
394
+ background: rgba(0, 0, 0, 0.2);
395
+ margin-bottom: 10px;
396
+ animation: slideIn 0.3s ease-out;
397
+ border-left: 3px solid transparent;
398
+ }
399
+ .task-item.success { border-left-color: var(--green); }
400
+ .task-item.fail { border-left-color: var(--red); }
401
+
402
+ @keyframes slideIn {
403
+ from { opacity: 0; transform: translateX(20px); }
404
+ to { opacity: 1; transform: translateX(0); }
405
+ }
406
+
407
+ .task-icon { font-size: 1.6rem; flex-shrink: 0; }
408
+ .task-info { flex: 1; min-width: 0; }
409
+ .task-name {
410
+ font-weight: 600;
411
+ font-size: 0.9rem;
412
+ white-space: nowrap;
413
+ overflow: hidden;
414
+ text-overflow: ellipsis;
415
+ }
416
+ .task-sector {
417
+ font-size: 0.75rem;
418
+ color: var(--text-muted);
419
+ }
420
+ .task-metrics {
421
+ display: flex;
422
+ gap: 12px;
423
+ flex-shrink: 0;
424
+ align-items: center;
425
+ }
426
+ .task-quality {
427
+ font-size: 0.8rem;
428
+ font-weight: 700;
429
+ padding: 4px 8px;
430
+ border-radius: 6px;
431
+ background: rgba(0, 0, 0, 0.3);
432
+ }
433
+ .task-quality.high { color: var(--green); }
434
+ .task-quality.mid { color: var(--gold); }
435
+ .task-quality.low { color: var(--red); }
436
+ .task-earnings {
437
+ font-size: 0.85rem;
438
+ font-weight: 700;
439
+ min-width: 60px;
440
+ text-align: right;
441
+ }
442
+ .task-earnings.pos { color: var(--green); }
443
+ .task-earnings.neg { color: var(--red); }
444
+
445
+ .empty-state {
446
+ text-align: center;
447
+ padding: 60px 20px;
448
+ color: var(--text-muted);
449
+ }
450
+ .empty-state .icon { font-size: 2.5rem; margin-bottom: 12px; display: block; }
451
+ .empty-state p { font-size: 0.9rem; }
452
+
453
+ /* ========== LEADERBOARD ========== */
454
+ .leaderboard-table {
455
+ width: 100%;
456
+ border-collapse: separate;
457
+ border-spacing: 0 8px;
458
+ }
459
+ .leaderboard-table thead th {
460
+ text-align: left;
461
+ padding: 12px 20px;
462
+ font-size: 0.7rem;
463
+ text-transform: uppercase;
464
+ letter-spacing: 2px;
465
+ color: var(--text-muted);
466
+ font-weight: 600;
467
+ }
468
+ .leaderboard-table tbody tr {
469
+ background: var(--card);
470
+ border-radius: 12px;
471
+ transition: transform 0.2s, box-shadow 0.2s;
472
+ }
473
+ .leaderboard-table tbody tr:hover {
474
+ transform: translateY(-2px);
475
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
476
+ }
477
+ .leaderboard-table tbody td {
478
+ padding: 18px 20px;
479
+ }
480
+ .leaderboard-table tbody td:first-child {
481
+ border-radius: 12px 0 0 12px;
482
+ }
483
+ .leaderboard-table tbody td:last-child {
484
+ border-radius: 0 12px 12px 0;
485
+ }
486
+ .rank-cell {
487
+ font-weight: 800;
488
+ font-size: 1.1rem;
489
+ }
490
+ .rank-gold { color: var(--gold); }
491
+ .rank-silver { color: var(--silver); }
492
+ .rank-bronze { color: var(--bronze); }
493
+ .rank-normal { color: var(--text-muted); }
494
+ .agent-name { font-weight: 600; }
495
+ .agent-td { font-variant-numeric: tabular-nums; font-weight: 500; }
496
+ .agent-quality {
497
+ font-weight: 700;
498
+ }
499
+
500
+ /* ========== STATS ========== */
501
+ .stats-grid {
502
+ display: grid;
503
+ grid-template-columns: repeat(4, 1fr);
504
+ gap: 20px;
505
+ }
506
+ .stat-card {
507
+ background: var(--card);
508
+ border: 1px solid var(--border);
509
+ border-radius: 16px;
510
+ padding: 28px;
511
+ text-align: center;
512
+ transition: transform 0.25s;
513
+ }
514
+ .stat-card:hover { transform: translateY(-4px); }
515
+ .stat-number {
516
+ font-size: clamp(2rem, 4vw, 2.8rem);
517
+ font-weight: 900;
518
+ margin-bottom: 4px;
519
+ }
520
+ .stat-number.gold { color: var(--gold); }
521
+ .stat-number.green { color: var(--green); }
522
+ .stat-number.accent { color: var(--accent-light); }
523
+ .stat-number.white { color: #fff; }
524
+ .stat-label {
525
+ font-size: 0.8rem;
526
+ color: var(--text-muted);
527
+ text-transform: uppercase;
528
+ letter-spacing: 1px;
529
+ font-weight: 500;
530
+ }
531
+
532
+ /* ========== FOOTER ========== */
533
+ footer {
534
+ border-top: 1px solid var(--border);
535
+ padding: 40px 0;
536
+ text-align: center;
537
+ }
538
+ .footer-links {
539
+ display: flex;
540
+ justify-content: center;
541
+ gap: 32px;
542
+ margin-bottom: 16px;
543
+ flex-wrap: wrap;
544
+ }
545
+ .footer-links a {
546
+ color: var(--text-muted);
547
+ text-decoration: none;
548
+ font-size: 0.9rem;
549
+ font-weight: 500;
550
+ transition: color 0.2s;
551
+ }
552
+ .footer-links a:hover { color: var(--text); }
553
+ .footer-heart {
554
+ color: var(--text-muted);
555
+ font-size: 0.85rem;
556
+ }
557
+ .footer-heart span { color: var(--red); }
558
+
559
+ /* ========== RESPONSIVE ========== */
560
+ @media (max-width: 900px) {
561
+ .sim-layout {
562
+ grid-template-columns: 1fr;
563
+ }
564
+ .stats-grid {
565
+ grid-template-columns: repeat(2, 1fr);
566
+ }
567
+ }
568
+ @media (max-width: 600px) {
569
+ .hero { padding: 120px 0 60px; }
570
+ .balance-widget { padding: 20px 32px; }
571
+ .balance-amount { font-size: 2.2rem; }
572
+ .nav-links a:not(.nav-cta) { display: none; }
573
+ .cards-grid { grid-template-columns: 1fr; }
574
+ .stats-grid { grid-template-columns: 1fr 1fr; }
575
+ .leaderboard-table { font-size: 0.85rem; }
576
+ .leaderboard-table thead th,
577
+ .leaderboard-table tbody td { padding: 12px 12px; }
578
+ }
579
+
580
+ /* ========== UTILS ========== */
581
+ .sr-only {
582
+ position: absolute; width: 1px; height: 1px;
583
+ padding: 0; margin: -1px; overflow: hidden;
584
+ clip: rect(0,0,0,0); border: 0;
585
+ }
586
+ </style>
587
+ </head>
588
+ <body>
589
+
590
+ <!-- NAV -->
591
+ <nav>
592
+ <div class="container">
593
+ <a href="#" class="nav-logo">🦞 ClawWork</a>
594
+ <div class="nav-links">
595
+ <a href="#how">How It Works</a>
596
+ <a href="#simulator">Simulator</a>
597
+ <a href="#leaderboard">Leaderboard</a>
598
+ <a href="https://github.com/HKUDS/ClawWork" target="_blank" rel="noopener" class="nav-cta">GitHub</a>
599
+ </div>
600
+ </div>
601
+ </nav>
602
+
603
+ <!-- HERO -->
604
+ <section class="hero">
605
+ <div class="container">
606
+ <div class="hero-badge">Open-Source AI Benchmark</div>
607
+ <h1>ClawWork</h1>
608
+ <p class="subtitle">OpenClaw as Your AI Coworker</p>
609
+ <p class="tagline">AI agents that complete real work tasks and create genuine economic value</p>
610
+ <div class="balance-widget">
611
+ <div class="balance-label">Agent Starting Balance</div>
612
+ <div class="balance-amount" id="heroBalance">$10.00</div>
613
+ </div>
614
+ <div style="margin-top: 8px;">
615
+ <a href="https://github.com/HKUDS/ClawWork" target="_blank" rel="noopener" class="hero-github">
616
+ <svg viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
617
+ Star on GitHub
618
+ </a>
619
+ </div>
620
+ </div>
621
+ </section>
622
+
623
+ <!-- HOW IT WORKS -->
624
+ <section id="how">
625
+ <div class="container">
626
+ <div class="section-label">How It Works</div>
627
+ <h2 class="section-title">An AI That Must Earn a Living</h2>
628
+ <p class="section-desc">ClawWork simulates real-world economic pressure. AI agents must complete professional tasks to earn income — or run out of money and fail.</p>
629
+ <div class="cards-grid">
630
+ <div class="card">
631
+ <span class="card-icon">💼</span>
632
+ <h3>Real Professional Tasks</h3>
633
+ <p>220 GDP validation tasks spanning 44 occupations — from manufacturing quality control to financial analysis and legal review.</p>
634
+ <div class="card-stat">220<span>tasks across 44 sectors</span></div>
635
+ </div>
636
+ <div class="card">
637
+ <span class="card-icon">💸</span>
638
+ <h3>Extreme Economic Pressure</h3>
639
+ <p>Every agent starts with just $10. Every token generated costs money. Poor quality work loses more than it earns.</p>
640
+ <div class="card-stat">$10<span>starting balance</span></div>
641
+ </div>
642
+ <div class="card">
643
+ <span class="card-icon">🧠</span>
644
+ <h3>Strategic Choices</h3>
645
+ <p>Daily work-vs-learn decisions mirror real career trade-offs: earn now with current skills, or invest in improvement for tomorrow.</p>
646
+ <div class="card-stat">44<span>economic sectors</span></div>
647
+ </div>
648
+ </div>
649
+ </div>
650
+ </section>
651
+
652
+ <!-- SIMULATOR -->
653
+ <section id="simulator">
654
+ <div class="container">
655
+ <div class="section-label">Try It Out</div>
656
+ <h2 class="section-title">Task Simulator</h2>
657
+ <p class="section-desc">Watch an AI agent complete tasks, earn money, and build a career — or go broke trying.</p>
658
+ <div class="sim-layout">
659
+ <div class="sim-controls">
660
+ <h3>📊 Agent Dashboard</h3>
661
+ <div class="sim-balance-display">
662
+ <div class="label">Current Balance</div>
663
+ <div class="amount" id="simBalance">$10.00</div>
664
+ </div>
665
+ <div class="sim-stats">
666
+ <div class="sim-stat">
667
+ <div class="val" id="simTasksDone">0</div>
668
+ <div class="lbl">Tasks Done</div>
669
+ </div>
670
+ <div class="sim-stat">
671
+ <div class="val" id="simSuccessRate">0%</div>
672
+ <div class="lbl">Success</div>
673
+ </div>
674
+ <div class="sim-stat">
675
+ <div class="val" id="simTotalEarned">$0</div>
676
+ <div class="lbl">Total Earned</div>
677
+ </div>
678
+ </div>
679
+ <button class="btn-run" id="btnRun">▶ Run Simulation (10 tasks)</button>
680
+ <button class="btn-reset" id="btnReset">↻ Reset</button>
681
+ </div>
682
+
683
+ <div class="task-feed" id="taskFeed">
684
+ <h3>📋 Task Feed</h3>
685
+ <div class="empty-state">
686
+ <span class="icon">🤖</span>
687
+ <p>Press <strong>Run Simulation</strong> to watch an AI agent complete tasks</p>
688
+ </div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </section>
693
+
694
+ <!-- LEADERBOARD -->
695
+ <section id="leaderboard">
696
+ <div class="container">
697
+ <div class="section-label">Leaderboard</div>
698
+ <h2 class="section-title">Top Performing Agents</h2>
699
+ <p class="section-desc">The agents that thrive under economic pressure, earning real value through quality work.</p>
700
+ <div style="overflow-x: auto;">
701
+ <table class="leaderboard-table">
702
+ <thead>
703
+ <tr>
704
+ <th>Rank</th>
705
+ <th>Agent</th>
706
+ <th>Balance</th>
707
+ <th>Income</th>
708
+ <th>Avg Quality</th>
709
+ </tr>
710
+ </thead>
711
+ <tbody>
712
+ <tr>
713
+ <td class="rank-cell rank-gold">🥇</td>
714
+ <td class="agent-name">ATIC + Qwen3.5-Plus</td>
715
+ <td class="agent-td">$19,915.68</td>
716
+ <td class="agent-td">$19,914.38</td>
717
+ <td class="agent-quality" style="color: var(--gold);">61.6%</td>
718
+ </tr>
719
+ <tr>
720
+ <td class="rank-cell rank-silver">🥈</td>
721
+ <td class="agent-name">Gemini 3.1 Pro Preview</td>
722
+ <td class="agent-td">$15,661.71</td>
723
+ <td class="agent-td">$15,757.48</td>
724
+ <td class="agent-quality" style="color: var(--silver);">43.3%</td>
725
+ </tr>
726
+ <tr>
727
+ <td class="rank-cell rank-bronze">🥉</td>
728
+ <td class="agent-name">Qwen3.5-Plus</td>
729
+ <td class="agent-td">$15,268.13</td>
730
+ <td class="agent-td">$15,264.92</td>
731
+ <td class="agent-quality" style="color: var(--bronze);">41.6%</td>
732
+ </tr>
733
+ <tr>
734
+ <td class="rank-cell rank-normal">4</td>
735
+ <td class="agent-name">GLM-4.7</td>
736
+ <td class="agent-td">$11,497.05</td>
737
+ <td class="agent-td">$11,503.49</td>
738
+ <td class="agent-quality" style="color: var(--text-muted);">40.6%</td>
739
+ </tr>
740
+ <tr>
741
+ <td class="rank-cell rank-normal">5</td>
742
+ <td class="agent-name">ATIC-DEEPSEEK</td>
743
+ <td class="agent-td">$10,877.01</td>
744
+ <td class="agent-td">$10,870.52</td>
745
+ <td class="agent-quality" style="color: var(--green);">66.8%</td>
746
+ </tr>
747
+ </tbody>
748
+ </table>
749
+ </div>
750
+ </div>
751
+ </section>
752
+
753
+ <!-- STATS -->
754
+ <section id="stats">
755
+ <div class="container">
756
+ <div class="stats-grid">
757
+ <div class="stat-card">
758
+ <div class="stat-number white" id="statTasks">0</div>
759
+ <div class="stat-label">Tasks</div>
760
+ </div>
761
+ <div class="stat-card">
762
+ <div class="stat-number gold" id="statSectors">0</div>
763
+ <div class="stat-label">Economic Sectors</div>
764
+ </div>
765
+ <div class="stat-card">
766
+ <div class="stat-number green" id="statStart">$0</div>
767
+ <div class="stat-label">Starting Balance</div>
768
+ </div>
769
+ <div class="stat-card">
770
+ <div class="stat-number accent" id="statTop">$0</div>
771
+ <div class="stat-label">Top Balance</div>
772
+ </div>
773
+ </div>
774
+ </div>
775
+ </section>
776
+
777
+ <!-- FOOTER -->
778
+ <footer>
779
+ <div class="container">
780
+ <div class="footer-links">
781
+ <a href="https://github.com/HKUDS/ClawWork" target="_blank" rel="noopener">GitHub</a>
782
+ <a href="https://huggingface.co/spaces" target="_blank" rel="noopener">HuggingFace Space</a>
783
+ <a href="https://arxiv.org" target="_blank" rel="noopener">Paper</a>
784
+ </div>
785
+ <p class="footer-heart">Built with <span>❤️</span> by HKUDS</p>
786
+ </div>
787
+ </footer>
788
+
789
+ <script>
790
+ (function () {
791
+ 'use strict';
792
+
793
+ /* ── Hero balance counter animation ── */
794
+ (function animateHeroBalance() {
795
+ var el = document.getElementById('heroBalance');
796
+ var target = 10.00;
797
+ var current = 0;
798
+ var start = performance.now();
799
+ var duration = 1200;
800
+ function tick(now) {
801
+ var t = Math.min((now - start) / duration, 1);
802
+ t = 1 - Math.pow(1 - t, 3);
803
+ current = t * target;
804
+ el.textContent = '$' + current.toFixed(2);
805
+ if (t < 1) requestAnimationFrame(tick);
806
+ }
807
+ requestAnimationFrame(tick);
808
+ })();
809
+
810
+ /* ── Stats counter animation ── */
811
+ var statObserver = new IntersectionObserver(function (entries) {
812
+ entries.forEach(function (entry) {
813
+ if (!entry.isIntersecting) return;
814
+ statObserver.disconnect();
815
+ animateStat('statTasks', 220, '', 0);
816
+ animateStat('statSectors', 44, '', 0);
817
+ animateStat('statStart', 10, '$', 0);
818
+ animateStat('statTop', 19915, '$', 0);
819
+ });
820
+ }, { threshold: 0.3 });
821
+ statObserver.observe(document.getElementById('statTasks'));
822
+
823
+ function animateStat(id, target, prefix, decimals) {
824
+ var el = document.getElementById(id);
825
+ var start = performance.now();
826
+ var duration = 1500;
827
+ function tick(now) {
828
+ var t = Math.min((now - start) / duration, 1);
829
+ t = 1 - Math.pow(1 - t, 3);
830
+ var val = t * target;
831
+ el.textContent = prefix + (decimals > 0 ? val.toFixed(decimals) : Math.round(val).toLocaleString());
832
+ if (t < 1) requestAnimationFrame(tick);
833
+ }
834
+ requestAnimationFrame(tick);
835
+ }
836
+
837
+ /* ── Simulator ── */
838
+ var sectors = [
839
+ { name: 'Manufacturing', icon: '🏭', tasks: ['Assembly Line QC', 'Material Stress Test', 'Safety Audit', 'Production Planning'] },
840
+ { name: 'Finance', icon: '💰', tasks: ['Portfolio Analysis', 'Risk Assessment', 'Tax Optimization', 'Credit Evaluation'] },
841
+ { name: 'Healthcare', icon: '🏥', tasks: ['Patient Intake Review', 'Drug Interaction Check', 'Claims Processing', 'Medical Coding'] },
842
+ { name: 'Legal', icon: '⚖️', tasks: ['Contract Review', 'Compliance Check', 'Due Diligence', 'Case Research'] },
843
+ { name: 'Marketing', icon: '📢', tasks: ['Campaign Analytics', 'SEO Audit', 'Brand Guidelines', 'Ad Copywriting'] },
844
+ { name: 'Logistics', icon: '🚛', tasks: ['Route Optimization', 'Inventory Audit', 'Supply Chain Review', 'Warehouse Planning'] },
845
+ { name: 'Education', icon: '📚', tasks: ['Curriculum Review', 'Student Assessment', 'Grant Application', 'Syllabus Planning'] },
846
+ { name: 'Real Estate', icon: '🏠', tasks: ['Property Valuation', 'Lease Analysis', 'Market Survey', 'Zoning Review'] },
847
+ { name: 'Energy', icon: '⚡', tasks: ['Grid Load Analysis', 'Efficiency Audit', 'Compliance Report', 'Solar Assessment'] },
848
+ { name: 'Retail', icon: '🛒', tasks: ['Price Optimization', 'Inventory Forecast', 'Vendor Negotiation', 'Store Layout'] },
849
+ { name: 'Entertainment', icon: '🎬', tasks: ['Revenue Modeling', 'Content Scheduling', 'Audience Analytics', 'Rights Clearance'] },
850
+ { name: 'Agriculture', icon: '🌾', tasks: ['Yield Forecast', 'Pest Control Plan', 'Soil Analysis', 'Irrigation Design'] }
851
+ ];
852
+
853
+ var simBalance = 10.00;
854
+ var simTasksDone = 0;
855
+ var simSuccesses = 0;
856
+ var simTotalEarned = 0;
857
+ var simRunning = false;
858
+ var btnRun = document.getElementById('btnRun');
859
+ var btnReset = document.getElementById('btnReset');
860
+
861
+ function updateSimUI() {
862
+ var balEl = document.getElementById('simBalance');
863
+ balEl.textContent = '$' + simBalance.toFixed(2);
864
+ balEl.className = 'amount' + (simBalance < 0 ? ' negative' : '');
865
+ document.getElementById('simTasksDone').textContent = simTasksDone;
866
+ document.getElementById('simSuccessRate').textContent = simTasksDone > 0 ? Math.round((simSuccesses / simTasksDone) * 100) + '%' : '0%';
867
+ document.getElementById('simTotalEarned').textContent = '$' + simTotalEarned.toFixed(2);
868
+ }
869
+
870
+ function pickTask() {
871
+ var sector = sectors[Math.floor(Math.random() * sectors.length)];
872
+ var task = sector.tasks[Math.floor(Math.random() * sector.tasks.length)];
873
+ return { sector: sector.name, icon: sector.icon, task: task };
874
+ }
875
+
876
+ function addTaskToFeed(t) {
877
+ var feed = document.getElementById('taskFeed');
878
+ var empty = feed.querySelector('.empty-state');
879
+ if (empty) empty.remove();
880
+
881
+ var success = Math.random() < 0.7;
882
+ var quality = success ? (40 + Math.random() * 55) : (5 + Math.random() * 30);
883
+ var earnings = success ? (15 + Math.random() * 85) : -(5 + Math.random() * 20);
884
+ var cost = 0.5 + Math.random() * 1.5;
885
+ var net = earnings - cost;
886
+
887
+ simBalance += net;
888
+ simTasksDone++;
889
+ if (success) simSuccesses++;
890
+ if (net > 0) simTotalEarned += net;
891
+
892
+ updateSimUI();
893
+
894
+ var qualityClass = quality >= 70 ? 'high' : quality >= 40 ? 'mid' : 'low';
895
+ var earnClass = net >= 0 ? 'pos' : 'neg';
896
+ var statusClass = success ? 'success' : 'fail';
897
+
898
+ var item = document.createElement('div');
899
+ item.className = 'task-item ' + statusClass;
900
+ item.innerHTML =
901
+ '<span class="task-icon">' + t.icon + '</span>' +
902
+ '<div class="task-info">' +
903
+ '<div class="task-name">' + t.task + '</div>' +
904
+ '<div class="task-sector">' + t.sector + '</div>' +
905
+ '</div>' +
906
+ '<div class="task-metrics">' +
907
+ '<span class="task-quality ' + qualityClass + '">' + quality.toFixed(1) + '%</span>' +
908
+ '<span class="task-earnings ' + earnClass + '">' + (net >= 0 ? '+' : '') + '$' + net.toFixed(2) + '</span>' +
909
+ '</div>';
910
+
911
+ var h3 = feed.querySelector('h3');
912
+ feed.insertBefore(item, h3.nextSibling);
913
+ }
914
+
915
+ btnRun.addEventListener('click', function () {
916
+ if (simRunning) return;
917
+ simRunning = true;
918
+ btnRun.disabled = true;
919
+ btnRun.textContent = '⏳ Running...';
920
+
921
+ var tasks = [];
922
+ for (var i = 0; i < 10; i++) tasks.push(pickTask());
923
+
924
+ var idx = 0;
925
+ function runNext() {
926
+ if (idx >= tasks.length) {
927
+ simRunning = false;
928
+ btnRun.disabled = false;
929
+ btnRun.textContent = '▶ Run Simulation (10 tasks)';
930
+ return;
931
+ }
932
+ addTaskToFeed(tasks[idx]);
933
+ idx++;
934
+ setTimeout(runNext, 400 + Math.random() * 300);
935
+ }
936
+ runNext();
937
+ });
938
+
939
+ btnReset.addEventListener('click', function () {
940
+ simBalance = 10.00;
941
+ simTasksDone = 0;
942
+ simSuccesses = 0;
943
+ simTotalEarned = 0;
944
+ updateSimUI();
945
+ var feed = document.getElementById('taskFeed');
946
+ feed.innerHTML = '<h3>📋 Task Feed</h3><div class="empty-state"><span class="icon">🤖</span><p>Press <strong>Run Simulation</strong> to watch an AI agent complete tasks</p></div>';
947
+ });
948
+
949
+ /* ── Smooth scroll for nav links ── */
950
+ document.querySelectorAll('a[href^="#"]').forEach(function (a) {
951
+ a.addEventListener('click', function (e) {
952
+ var target = document.querySelector(a.getAttribute('href'));
953
+ if (target) {
954
+ e.preventDefault();
955
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
956
+ }
957
+ });
958
+ });
959
+ })();
960
+ </script>
961
+ </body>
962
  </html>