Hugging Face's logo

Spaces:
Noah1115
/
anycoder-b3e5ec7d
Running

App Files Community
Noah1115 commited on
Commit
b736635
·
verified ·
1 Parent(s): 168be76

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +560 -19
index.html CHANGED
@@ -1,19 +1,560 @@
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="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TP DP PP 可视化分析</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #3a86ff;
11
+ --secondary-color: #8338ec;
12
+ --success-color: #38b000;
13
+ --warning-color: #ff9e00;
14
+ --danger-color: #ff006e;
15
+ --dark-color: #2b2d42;
16
+ --light-color: #f8f9fa;
17
+ --gray-color: #6c757d;
18
+ --border-radius: 12px;
19
+ --box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
20
+ --transition: all 0.3s ease;
21
+ }
22
+
23
+ * {
24
+ margin: 0;
25
+ padding: 0;
26
+ box-sizing: border-box;
27
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
28
+ }
29
+
30
+ body {
31
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
32
+ color: var(--dark-color);
33
+ min-height: 100vh;
34
+ padding: 20px;
35
+ }
36
+
37
+ .container {
38
+ max-width: 1200px;
39
+ margin: 0 auto;
40
+ }
41
+
42
+ header {
43
+ display: flex;
44
+ justify-content: space-between;
45
+ align-items: center;
46
+ padding: 20px 0;
47
+ margin-bottom: 30px;
48
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
49
+ }
50
+
51
+ .logo {
52
+ display: flex;
53
+ align-items: center;
54
+ gap: 12px;
55
+ font-size: 1.8rem;
56
+ font-weight: 700;
57
+ color: var(--primary-color);
58
+ }
59
+
60
+ .logo i {
61
+ font-size: 2.2rem;
62
+ }
63
+
64
+ .anycoder-link {
65
+ color: var(--secondary-color);
66
+ text-decoration: none;
67
+ font-size: 0.9rem;
68
+ font-weight: 500;
69
+ transition: var(--transition);
70
+ }
71
+
72
+ .anycoder-link:hover {
73
+ color: var(--primary-color);
74
+ text-decoration: underline;
75
+ }
76
+
77
+ h1 {
78
+ text-align: center;
79
+ margin-bottom: 10px;
80
+ color: var(--dark-color);
81
+ font-size: 2.5rem;
82
+ }
83
+
84
+ .subtitle {
85
+ text-align: center;
86
+ margin-bottom: 40px;
87
+ color: var(--gray-color);
88
+ font-size: 1.1rem;
89
+ }
90
+
91
+ .controls {
92
+ display: flex;
93
+ flex-wrap: wrap;
94
+ gap: 20px;
95
+ margin-bottom: 40px;
96
+ justify-content: center;
97
+ }
98
+
99
+ .control-group {
100
+ background: white;
101
+ padding: 20px;
102
+ border-radius: var(--border-radius);
103
+ box-shadow: var(--box-shadow);
104
+ flex: 1;
105
+ min-width: 250px;
106
+ max-width: 350px;
107
+ }
108
+
109
+ .control-group h3 {
110
+ margin-bottom: 15px;
111
+ color: var(--primary-color);
112
+ display: flex;
113
+ align-items: center;
114
+ gap: 10px;
115
+ }
116
+
117
+ .control-group h3 i {
118
+ font-size: 1.2rem;
119
+ }
120
+
121
+ .slider-container {
122
+ margin-bottom: 15px;
123
+ }
124
+
125
+ .slider-container label {
126
+ display: block;
127
+ margin-bottom: 8px;
128
+ font-weight: 500;
129
+ }
130
+
131
+ .slider {
132
+ width: 100%;
133
+ height: 8px;
134
+ -webkit-appearance: none;
135
+ background: #e0e0e0;
136
+ border-radius: 4px;
137
+ outline: none;
138
+ }
139
+
140
+ .slider::-webkit-slider-thumb {
141
+ -webkit-appearance: none;
142
+ width: 20px;
143
+ height: 20px;
144
+ border-radius: 50%;
145
+ background: var(--primary-color);
146
+ cursor: pointer;
147
+ transition: var(--transition);
148
+ }
149
+
150
+ .slider::-webkit-slider-thumb:hover {
151
+ transform: scale(1.2);
152
+ }
153
+
154
+ .slider-value {
155
+ text-align: right;
156
+ font-weight: 600;
157
+ color: var(--primary-color);
158
+ margin-top: 5px;
159
+ }
160
+
161
+ .visualization {
162
+ display: grid;
163
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
164
+ gap: 30px;
165
+ margin-bottom: 40px;
166
+ }
167
+
168
+ .chart-container {
169
+ background: white;
170
+ padding: 25px;
171
+ border-radius: var(--border-radius);
172
+ box-shadow: var(--box-shadow);
173
+ display: flex;
174
+ flex-direction: column;
175
+ }
176
+
177
+ .chart-container h3 {
178
+ margin-bottom: 20px;
179
+ color: var(--dark-color);
180
+ display: flex;
181
+ align-items: center;
182
+ gap: 10px;
183
+ }
184
+
185
+ .chart {
186
+ height: 300px;
187
+ position: relative;
188
+ display: flex;
189
+ align-items: flex-end;
190
+ justify-content: center;
191
+ gap: 20px;
192
+ margin-bottom: 20px;
193
+ }
194
+
195
+ .bar {
196
+ width: 60px;
197
+ border-radius: 8px 8px 0 0;
198
+ transition: var(--transition);
199
+ position: relative;
200
+ display: flex;
201
+ align-items: center;
202
+ justify-content: center;
203
+ color: white;
204
+ font-weight: 600;
205
+ }
206
+
207
+ .bar-tp {
208
+ background: var(--primary-color);
209
+ }
210
+
211
+ .bar-dp {
212
+ background: var(--secondary-color);
213
+ }
214
+
215
+ .bar-pp {
216
+ background: var(--success-color);
217
+ }
218
+
219
+ .bar-label {
220
+ position: absolute;
221
+ bottom: -30px;
222
+ left: 0;
223
+ right: 0;
224
+ text-align: center;
225
+ font-weight: 600;
226
+ color: var(--dark-color);
227
+ }
228
+
229
+ .metrics {
230
+ display: grid;
231
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
232
+ gap: 20px;
233
+ margin-bottom: 40px;
234
+ }
235
+
236
+ .metric-card {
237
+ background: white;
238
+ padding: 25px;
239
+ border-radius: var(--border-radius);
240
+ box-shadow: var(--box-shadow);
241
+ text-align: center;
242
+ transition: var(--transition);
243
+ }
244
+
245
+ .metric-card:hover {
246
+ transform: translateY(-5px);
247
+ }
248
+
249
+ .metric-card i {
250
+ font-size: 2.5rem;
251
+ margin-bottom: 15px;
252
+ }
253
+
254
+ .metric-card.tp i {
255
+ color: var(--primary-color);
256
+ }
257
+
258
+ .metric-card.dp i {
259
+ color: var(--secondary-color);
260
+ }
261
+
262
+ .metric-card.pp i {
263
+ color: var(--success-color);
264
+ }
265
+
266
+ .metric-card h3 {
267
+ margin-bottom: 10px;
268
+ font-size: 1.2rem;
269
+ }
270
+
271
+ .metric-value {
272
+ font-size: 2rem;
273
+ font-weight: 700;
274
+ margin-bottom: 10px;
275
+ }
276
+
277
+ .metric-description {
278
+ color: var(--gray-color);
279
+ font-size: 0.9rem;
280
+ }
281
+
282
+ .comparison {
283
+ background: white;
284
+ padding: 25px;
285
+ border-radius: var(--border-radius);
286
+ box-shadow: var(--box-shadow);
287
+ margin-bottom: 40px;
288
+ }
289
+
290
+ .comparison h3 {
291
+ margin-bottom: 20px;
292
+ color: var(--dark-color);
293
+ display: flex;
294
+ align-items: center;
295
+ gap: 10px;
296
+ }
297
+
298
+ .comparison-chart {
299
+ height: 200px;
300
+ display: flex;
301
+ align-items: flex-end;
302
+ gap: 15px;
303
+ justify-content: center;
304
+ }
305
+
306
+ .comparison-bar {
307
+ flex: 1;
308
+ border-radius: 8px 8px 0 0;
309
+ transition: var(--transition);
310
+ display: flex;
311
+ align-items: center;
312
+ justify-content: center;
313
+ color: white;
314
+ font-weight: 600;
315
+ max-width: 150px;
316
+ }
317
+
318
+ footer {
319
+ text-align: center;
320
+ padding: 20px;
321
+ color: var(--gray-color);
322
+ font-size: 0.9rem;
323
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
324
+ }
325
+
326
+ @media (max-width: 768px) {
327
+ .visualization {
328
+ grid-template-columns: 1fr;
329
+ }
330
+
331
+ .metrics {
332
+ grid-template-columns: 1fr;
333
+ }
334
+
335
+ h1 {
336
+ font-size: 2rem;
337
+ }
338
+
339
+ .controls {
340
+ flex-direction: column;
341
+ }
342
+
343
+ .control-group {
344
+ max-width: 100%;
345
+ }
346
+ }
347
+ </style>
348
+ </head>
349
+ <body>
350
+ <div class="container">
351
+ <header>
352
+ <div class="logo">
353
+ <i class="fas fa-chart-bar"></i>
354
+ <span>TP DP PP 可视化</span>
355
+ </div>
356
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
357
+ </header>
358
+
359
+ <h1>TP DP PP 性能可视化分析</h1>
360
+ <p class="subtitle">通过交互式图表展示张量并行(TP)、数据并行(DP)和流水线并行(PP)的性能指标</p>
361
+
362
+ <div class="controls">
363
+ <div class="control-group">
364
+ <h3><i class="fas fa-sliders-h"></i> 参数设置</h3>
365
+ <div class="slider-container">
366
+ <label for="tp-slider">张量并行度 (TP)</label>
367
+ <input type="range" min="1" max="8" value="4" class="slider" id="tp-slider">
368
+ <div class="slider-value" id="tp-value">4</div>
369
+ </div>
370
+ <div class="slider-container">
371
+ <label for="dp-slider">数据并行度 (DP)</label>
372
+ <input type="range" min="1" max="16" value="8" class="slider" id="dp-slider">
373
+ <div class="slider-value" id="dp-value">8</div>
374
+ </div>
375
+ <div class="slider-container">
376
+ <label for="pp-slider">流水线并行度 (PP)</label>
377
+ <input type="range" min="1" max="8" value="2" class="slider" id="pp-slider">
378
+ <div class="slider-value" id="pp-value">2</div>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="control-group">
383
+ <h3><i class="fas fa-cog"></i> 模型配置</h3>
384
+ <div class="slider-container">
385
+ <label for="model-size">模型规模 (亿参数)</label>
386
+ <input type="range" min="10" max="1000" value="175" class="slider" id="model-size">
387
+ <div class="slider-value" id="model-size-value">175亿</div>
388
+ </div>
389
+ <div class="slider-container">
390
+ <label for="batch-size">批次大小</label>
391
+ <input type="range" min="1" max="128" value="32" class="slider" id="batch-size">
392
+ <div class="slider-value" id="batch-size-value">32</div>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <div class="metrics">
398
+ <div class="metric-card tp">
399
+ <i class="fas fa-cube"></i>
400
+ <h3>张量并行 (TP)</h3>
401
+ <div class="metric-value" id="tp-metric">4</div>
402
+ <p class="metric-description">将单个张量操作拆分到多个设备上并行计算</p>
403
+ </div>
404
+ <div class="metric-card dp">
405
+ <i class="fas fa-database"></i>
406
+ <h3>数据并行 (DP)</h3>
407
+ <div class="metric-value" id="dp-metric">8</div>
408
+ <p class="metric-description">将数据拆分到多个设备上，每个设备有完整的模型副本</p>
409
+ </div>
410
+ <div class="metric-card pp">
411
+ <i class="fas fa-stream"></i>
412
+ <h3>流水线并行 (PP)</h3>
413
+ <div class="metric-value" id="pp-metric">2</div>
414
+ <p class="metric-description">将模型的不同层分配到不同的设备上，形成处理流水线</p>
415
+ </div>
416
+ </div>
417
+
418
+ <div class="visualization">
419
+ <div class="chart-container">
420
+ <h3><i class="fas fa-chart-line"></i> 并行效率对比</h3>
421
+ <div class="chart" id="efficiency-chart">
422
+ <div class="bar bar-tp" style="height: 85%;" data-value="85">85%</div>
423
+ <div class="bar bar-dp" style="height: 92%;" data-value="92">92%</div>
424
+ <div class="bar bar-pp" style="height: 78%;" data-value="78">78%</div>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="chart-container">
429
+ <h3><i class="fas fa-tachometer-alt"></i> 内存使用情况</h3>
430
+ <div class="chart" id="memory-chart">
431
+ <div class="bar bar-tp" style="height: 65%;" data-value="65">65%</div>
432
+ <div class="bar bar-dp" style="height: 85%;" data-value="85">85%</div>
433
+ <div class="bar bar-pp" style="height: 45%;" data-value="45">45%</div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+
438
+ <div class="comparison">
439
+ <h3><i class="fas fa-balance-scale"></i> 综合性能对比</h3>
440
+ <div class="comparison-chart">
441
+ <div class="comparison-bar bar-tp" style="height: 75%;">TP</div>
442
+ <div class="comparison-bar bar-dp" style="height: 88%;">DP</div>
443
+ <div class="comparison-bar bar-pp" style="height: 62%;">PP</div>
444
+ </div>
445
+ </div>
446
+
447
+ <footer>
448
+ <p>TP DP PP 可视化分析工具 | 使用交互式图表展示并行计算性能指标</p>
449
+ </footer>
450
+ </div>
451
+
452
+ <script>
453
+ // 获取DOM元素
454
+ const tpSlider = document.getElementById('tp-slider');
455
+ const dpSlider = document.getElementById('dp-slider');
456
+ const ppSlider = document.getElementById('pp-slider');
457
+ const modelSizeSlider = document.getElementById('model-size');
458
+ const batchSizeSlider = document.getElementById('batch-size');
459
+
460
+ const tpValue = document.getElementById('tp-value');
461
+ const dpValue = document.getElementById('dp-value');
462
+ const ppValue = document.getElementById('pp-value');
463
+ const modelSizeValue = document.getElementById('model-size-value');
464
+ const batchSizeValue = document.getElementById('batch-size-value');
465
+
466
+ const tpMetric = document.getElementById('tp-metric');
467
+ const dpMetric = document.getElementById('dp-metric');
468
+ const ppMetric = document.getElementById('pp-metric');
469
+
470
+ const efficiencyBars = document.querySelectorAll('#efficiency-chart .bar');
471
+ const memoryBars = document.querySelectorAll('#memory-chart .bar');
472
+ const comparisonBars = document.querySelectorAll('.comparison-bar');
473
+
474
+ // 更新滑块值显示
475
+ function updateSliderValues() {
476
+ tpValue.textContent = tpSlider.value;
477
+ dpValue.textContent = dpSlider.value;
478
+ ppValue.textContent = ppSlider.value;
479
+
480
+ const modelSize = parseInt(modelSizeSlider.value);
481
+ modelSizeValue.textContent = modelSize + '亿';
482
+
483
+ batchSizeValue.textContent = batchSizeSlider.value;
484
+
485
+ // 更新指标卡
486
+ tpMetric.textContent = tpSlider.value;
487
+ dpMetric.textContent = dpSlider.value;
488
+ ppMetric.textContent = ppSlider.value;
489
+
490
+ // 更新图表
491
+ updateCharts();
492
+ }
493
+
494
+ // 更新图表数据
495
+ function updateCharts() {
496
+ const tp = parseInt(tpSlider.value);
497
+ const dp = parseInt(dpSlider.value);
498
+ const pp = parseInt(ppSlider.value);
499
+ const modelSize = parseInt(modelSizeSlider.value);
500
+ const batchSize = parseInt(batchSizeSlider.value);
501
+
502
+ // 计算效率百分比（模拟算法）
503
+ const tpEfficiency = Math.max(50, 100 - (tp - 1) * 5);
504
+ const dpEfficiency = Math.max(60, 100 - (dp - 1) * 1);
505
+ const ppEfficiency = Math.max(40, 100 - (pp - 1) * 10);
506
+
507
+ // 计算内存使用（模拟算法）
508
+ const tpMemory = Math.min(95, 30 + tp * 10);
509
+ const dpMemory = Math.min(95, 50 + dp * 5);
510
+ const ppMemory = Math.min(95, 20 + pp * 15);
511
+
512
+ // 计算综合性能（模拟算法）
513
+ const tpPerformance = Math.max(30, 90 - (tp - 1) * 5);
514
+ const dpPerformance = Math.max(40, 95 - (dp - 1) * 1);
515
+ const ppPerformance = Math.max(20, 70 - (pp - 1) * 8);
516
+
517
+ // 更新效率图表
518
+ efficiencyBars[0].style.height = tpEfficiency + '%';
519
+ efficiencyBars[0].textContent = tpEfficiency + '%';
520
+ efficiencyBars[0].setAttribute('data-value', tpEfficiency);
521
+
522
+ efficiencyBars[1].style.height = dpEfficiency + '%';
523
+ efficiencyBars[1].textContent = dpEfficiency + '%';
524
+ efficiencyBars[1].setAttribute('data-value', dpEfficiency);
525
+
526
+ efficiencyBars[2].style.height = ppEfficiency + '%';
527
+ efficiencyBars[2].textContent = ppEfficiency + '%';
528
+ efficiencyBars[2].setAttribute('data-value', ppEfficiency);
529
+
530
+ // 更新内存图表
531
+ memoryBars[0].style.height = tpMemory + '%';
532
+ memoryBars[0].textContent = tpMemory + '%';
533
+ memoryBars[0].setAttribute('data-value', tpMemory);
534
+
535
+ memoryBars[1].style.height = dpMemory + '%';
536
+ memoryBars[1].textContent = dpMemory + '%';
537
+ memoryBars[1].setAttribute('data-value', dpMemory);
538
+
539
+ memoryBars[2].style.height = ppMemory + '%';
540
+ memoryBars[2].textContent = ppMemory + '%';
541
+ memoryBars[2].setAttribute('data-value', ppMemory);
542
+
543
+ // 更新综合性能图表
544
+ comparisonBars[0].style.height = tpPerformance + '%';
545
+ comparisonBars[1].style.height = dpPerformance + '%';
546
+ comparisonBars[2].style.height = ppPerformance + '%';
547
+ }
548
+
549
+ // 添加事件监听器
550
+ tpSlider.addEventListener('input', updateSliderValues);
551
+ dpSlider.addEventListener('input', updateSliderValues);
552
+ ppSlider.addEventListener('input', updateSliderValues);
553
+ modelSizeSlider.addEventListener('input', updateSliderValues);
554
+ batchSizeSlider.addEventListener('input', updateSliderValues);
555
+
556
+ // 初始化
557
+ updateSliderValues();
558
+ </script>
559
+ </body>
560
+ </html>