-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathbenchmark-projects.html
541 lines (496 loc) · 23.4 KB
/
benchmark-projects.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KCORES LLM Arena - 测试项目</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.10.4/dist/gsap.min.js"></script>
<style>
:root {
--primary: #3b82f6;
--secondary: #10b981;
--accent: #8b5cf6;
--dark: #1f2937;
--light: #f9fafb;
}
body {
font-family: 'Roboto', sans-serif;
background-color: var(--light);
color: var(--dark);
}
.project-card {
transition: all 0.3s ease;
border-left: 5px solid transparent;
}
.project-card.active {
border-left-color: var(--primary);
background-color: rgba(59, 130, 246, 0.1);
}
.category-card {
transition: all 0.3s ease;
border-left: 4px solid transparent;
}
.category-card.active {
border-left-color: var(--secondary);
background-color: rgba(16, 185, 129, 0.1);
}
.detail-card {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.detail-card.visible {
opacity: 1;
transform: translateY(0);
}
.category-badge {
background-color: var(--primary);
}
.language-badge.javascript {
background-color: #f7df1e;
color: black;
}
.language-badge.python {
background-color: #3776ab;
color: white;
}
.language-badge.html {
background-color: #e34c26;
color: white;
}
.language-badge.css {
background-color: #264de4;
color: white;
}
/* 背景动画 */
.bg-animation {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.05;
}
</style>
</head>
<body>
<div id="app" class="container mx-auto px-4 py-8">
<div class="bg-animation"></div>
<header class="mb-12 text-center">
<h1 class="text-4xl font-bold mb-2">KCORES LLM Arena</h1>
<h2 class="text-2xl font-semibold text-gray-700">测试项目</h2>
<p class="text-gray-500 mt-2">大模型编程能力测试项目详情</p>
<button @click="toggleAutoPlay"
class="mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors">
{{ autoPlay ? '停止自动播放' : '开始自动播放' }}
</button>
</header>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 第一列：主测试项目 -->
<div class="bg-white rounded-lg shadow-md p-4">
<h3 class="text-xl font-bold mb-4 pb-2 border-b">测试子项目</h3>
<div class="space-y-3">
<div v-for="(project, index) in projects" :key="index"
class="project-card p-3 rounded-md cursor-pointer hover:shadow-md"
:class="{'active': activeProject === index}" @click="selectProject(index)">
<h4 class="font-medium">{{ project.name }}</h4>
<p class="text-sm text-gray-500">{{ project.shortDesc }}</p>
<div class="flex flex-wrap gap-1 mt-2">
<span v-for="lang in project.languages" :key="lang"
class="language-badge text-xs px-2 py-1 rounded-full" :class="lang.toLowerCase()">
{{ lang }}
</span>
</div>
</div>
</div>
</div>
<!-- 第二列：测试类别 -->
<div class="bg-white rounded-lg shadow-md p-4">
<h3 class="text-xl font-bold mb-4 pb-2 border-b">测试类别</h3>
<div v-if="activeProject !== null" class="space-y-3">
<div v-for="(category, index) in projects[activeProject].categories" :key="index"
class="category-card p-3 rounded-md cursor-pointer hover:shadow-md"
:class="{'active': activeCategory === index}" @click="selectCategory(index)">
<div class="flex items-center gap-2">
<span class="category-badge text-xs text-white px-2 py-1 rounded-full">
{{ category.type }}
</span>
<h4 class="font-medium">{{ category.name }}</h4>
</div>
</div>
</div>
<div v-else class="text-center py-12 text-gray-400">
请先选择测试子项目
</div>
</div>
<!-- 第三列：测试详情 -->
<div class="bg-white rounded-lg shadow-md p-4">
<h3 class="text-xl font-bold mb-4 pb-2 border-b">测试详情</h3>
<div v-if="activeCategory !== null && activeProject !== null" class="space-y-4">
<div v-for="(detail, index) in projects[activeProject].categories[activeCategory].details"
:key="index" class="detail-card p-3 rounded-md shadow-sm bg-gray-50" :class="{'visible': true}">
<p>{{ detail }}</p>
</div>
</div>
<div v-else-if="activeProject !== null" class="text-center py-12 text-gray-400">
请选择测试类别
</div>
<div v-else class="text-center py-12 text-gray-400">
请先选择测试子项目
</div>
</div>
</div>
<!-- 项目图片预览区 -->
<div class="mt-8" v-if="activeProject !== null">
<h3 class="text-xl font-bold mb-4">项目概览</h3>
<div class="bg-white rounded-lg shadow-md p-4">
<img :src="projects[activeProject].image" :alt="projects[activeProject].name" class="w-full rounded-md">
<p class="text-center text-gray-500 mt-2">{{ projects[activeProject].name }} 测试结果</p>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
activeProject: null,
activeCategory: null,
autoPlay: false,
autoPlayTimer: null,
autoPlayInterval: 3000, // 3秒切换一次
projects: [
{
name: "Mandelbrot Set Meet LiBai Benchmark",
shortDesc: "曼德布洛特集合与李白诗词结合的基准测试",
image: "./benchmark-mandelbrot-set-meet-libai/scripts/llm_benchmark_results.png",
languages: ["JavaScript", "HTML", "CSS"],
categories: [
{
type: "性能",
name: "性能优化",
details: [
"双缓冲或三缓冲技术实现",
"离屏渲染提升性能",
"WebWorker 多线程计算"
]
},
{
type: "需求",
name: "需求还原",
details: [
"使用给定的20种颜色进行渲染",
"实现动画效果",
"按要求实现CSS样式"
]
},
{
type: "字符串",
name: "字符串处理",
details: [
"字符串过滤处理",
"字符串去重",
"保证字符串的原始顺序"
]
},
{
type: "计算",
name: "性能计算",
details: [
"FPS计算实现",
"平均FPS统计"
]
},
{
type: "数学",
name: "数学实现",
details: [
"Mandelbrot Set 算法实现",
"理解 Mandelbrot Set 各个气泡结构",
"使画面中心保持在气泡交界处"
]
}
]
},
{
name: "Mars Mission Benchmark",
shortDesc: "火星任务模拟基准测试",
image: "./benchmark-mars-mission/scripts/llm_benchmark_results.png",
languages: ["Python"],
categories: [
{
type: "需求",
name: "需求还原",
details: [
"展示各个行星",
"动画效果展示公转",
"展示轨迹"
]
},
{
type: "需求",
name: "需求补全",
details: [
"补全演示中缺失的坐标系与图例",
"渲染太阳"
]
},
{
type: "计算",
name: "轨道计算",
details: [
"圆周轨道与运行周期计算",
"飞船的飞行轨迹计算",
"飞船准确降落行星模拟"
]
},
{
type: "物理",
name: "天体物理",
details: [
"天体运行轨道半径",
"天体运行周期",
"飞行器发射窗口与返回窗口"
]
}
]
},
{
name: "Solar System Benchmark",
shortDesc: "太阳系模拟基准测试",
image: "./benchmark-solar-system/scripts/llm_benchmark_results.png",
languages: ["JavaScript", "HTML", "CSS"],
categories: [
{
type: "需求",
name: "需求还原",
details: [
"展示各个行星",
"动画效果展示公转",
"展示轨迹",
"CSS样式实现",
"各种动画效果",
"行星名称标签"
]
},
{
type: "计算",
name: "轨道计算",
details: [
"圆周轨道与运行周期",
"FPS与平均FPS计算"
]
},
{
type: "物理",
name: "天体物理",
details: [
"天体运行轨道半径",
"天体运行周期",
"天体大小比例"
]
},
{
type: "创意",
name: "创意设计",
details: [
"行星的颜色渲染"
]
}
]
},
{
name: "Ball Bouncing Inside Spinning Heptagon",
shortDesc: "旋转七边形内弹跳小球基准测试",
image: "./benchmark-ball-bouncing-inside-spinning-heptagon/scripts/llm_benchmark_results.png",
languages: ["Python"],
categories: [
{
type: "需求",
name: "需求还原",
details: [
"展示7边形旋转",
"展示20个小球的物理运动",
"展示小球上面的数字",
"小球大小一致"
]
},
{
type: "计算",
name: "物理计算",
details: [
"相关物理效果计算",
"7边形的旋转",
"小球不会重叠",
"小球不会超过7边形"
]
},
{
type: "物理",
name: "物理模拟",
details: [
"摩擦模拟",
"碰撞检测",
"重力模拟",
"小球弹性模拟"
]
}
]
}
]
}
},
methods: {
selectProject(index) {
this.activeProject = index;
this.activeCategory = null;
// 触发背景动画变化
this.changeBackgroundAnimation();
},
selectCategory(index) {
this.activeCategory = index;
// 动画显示详情卡片
setTimeout(() => {
const detailCards = document.querySelectorAll('.detail-card');
detailCards.forEach((card, i) => {
gsap.to(card, {
opacity: 1,
y: 0,
duration: 0.3,
delay: i * 0.1
});
});
}, 50);
},
changeBackgroundAnimation() {
const bg = document.querySelector('.bg-animation');
// 清除现有内容
bg.innerHTML = '';
// 根据当前选中的项目生成不同的背景
if (this.activeProject === 0) {
// Mandelbrot 风格背景
this.createFractalBackground(bg);
} else if (this.activeProject === 1 || this.activeProject === 2) {
// 星空风格背景
this.createStarryBackground(bg);
} else if (this.activeProject === 3) {
// 几何风格背景
this.createGeometricBackground(bg);
}
},
createFractalBackground(element) {
const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
element.appendChild(canvas);
// 简单的分形背景模拟
const ctx = canvas.getContext('2d');
for (let i = 0; i < 30; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const size = 20 + Math.random() * 80;
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = `rgba(59, 130, 246, ${Math.random() * 0.2})`;
ctx.fill();
}
},
createStarryBackground(element) {
const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
element.appendChild(canvas);
// 简单的星空背景
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0, 0, 0, 0.03)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < 200; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const radius = Math.random() * 1.5;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = `rgba(255, 255, 255, ${Math.random() * 0.8})`;
ctx.fill();
}
},
createGeometricBackground(element) {
const canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
element.appendChild(canvas);
// 几何图形背景
const ctx = canvas.getContext('2d');
for (let i = 0; i < 20; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const sides = 5 + Math.floor(Math.random() * 3);
const size = 30 + Math.random() * 50;
ctx.beginPath();
ctx.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));
for (let j = 1; j <= sides; j++) {
const angle = j * 2 * Math.PI / sides;
ctx.lineTo(x + size * Math.cos(angle), y + size * Math.sin(angle));
}
ctx.closePath();
ctx.strokeStyle = `rgba(139, 92, 246, ${Math.random() * 0.3})`;
ctx.lineWidth = 2;
ctx.stroke();
}
},
toggleAutoPlay() {
this.autoPlay = !this.autoPlay;
if (this.autoPlay) {
this.startAutoPlay();
} else {
this.stopAutoPlay();
}
},
startAutoPlay() {
// 清除可能存在的计时器
this.stopAutoPlay();
let projectIndex = 0;
let categoryIndex = 0;
// 设置定时器
this.autoPlayTimer = setInterval(() => {
// 先选择项目
this.selectProject(projectIndex);
// 延迟选择类别，让项目选择的动画先完成
setTimeout(() => {
// 选择类别
if (this.projects[projectIndex].categories.length > 0) {
this.selectCategory(categoryIndex);
}
// 更新下一次要显示的项目和类别索引
categoryIndex++;
// 如果类别已全部显示，切换到下一个项目的第一个类别
if (categoryIndex >= this.projects[projectIndex].categories.length) {
categoryIndex = 0;
projectIndex = (projectIndex + 1) % this.projects.length;
}
}, 80);
}, this.autoPlayInterval);
},
stopAutoPlay() {
if (this.autoPlayTimer) {
clearInterval(this.autoPlayTimer);
this.autoPlayTimer = null;
}
}
},
beforeUnmount() {
// 组件销毁前清除定时器
this.stopAutoPlay();
},
mounted() {
// 初始化时选择第一个项目
this.selectProject(0);
}
});
app.mount('#app');
</script>
</body>
</html>