Repository navigation
Expand file tree
/
Copy pathmodel-inference-platform-design.html
More file actions
2514 lines (2375 loc) · 130 KB
/
Copy pathmodel-inference-platform-design.html
File metadata and controls
2514 lines (2375 loc) · 130 KB
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
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模型推理云平台 — 产品架构方案</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&family=JetBrains+Mono:wght@400;600&family=Playfair+Display:wght@700;900&display=swap" rel="stylesheet">
<style>
:root {
--bg-primary: #f8fafc;
--bg-secondary: #f1f5f9;
--bg-card: #ffffff;
--bg-card-hover: #f8fafc;
--accent-blue: #2563eb;
--accent-cyan: #0891b2;
--accent-purple: #7c3aed;
--accent-emerald: #059669;
--accent-amber: #d97706;
--accent-rose: #e11d48;
--accent-orange: #ea580c;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--border: #e2e8f0;
--border-accent: #cbd5e1;
--gradient-blue: linear-gradient(135deg, #2563eb, #0891b2);
--gradient-purple: linear-gradient(135deg, #7c3aed, #db2777);
--gradient-emerald: linear-gradient(135deg, #059669, #0891b2);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Noto Sans SC', sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.7;
overflow-x: hidden;
}
.hero {
position: relative;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 40px;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,99,235,0.08), transparent),
radial-gradient(ellipse 60% 40% at 80% 100%, rgba(124,58,237,0.06), transparent),
radial-gradient(ellipse 50% 50% at 20% 80%, rgba(8,145,178,0.05), transparent);
}
.hero-content { position: relative; z-index: 1; max-width: 900px; }
.hero h1 {
font-family: 'Playfair Display', serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 900;
letter-spacing: -0.02em;
background: linear-gradient(135deg, #0f172a 0%, #2563eb 50%, #0891b2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 16px;
}
.hero .subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
font-weight: 300;
max-width: 700px;
margin: 0 auto;
}
.hero .meta {
margin-top: 24px;
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
}
.hero .meta span {
font-size: 0.85rem;
color: var(--text-secondary);
padding: 6px 16px;
border: 1px solid var(--border);
border-radius: 20px;
background: rgba(255,255,255,0.7);
}
nav.toc {
position: sticky;
top: 0;
z-index: 100;
background: rgba(248,250,252,0.88);
backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border);
padding: 0 20px;
overflow-x: auto;
}
nav.toc ul {
display: flex;
gap: 4px;
list-style: none;
max-width: 1200px;
margin: 0 auto;
padding: 8px 0;
}
nav.toc a {
color: var(--text-secondary);
text-decoration: none;
font-size: 0.82rem;
padding: 8px 14px;
border-radius: 6px;
white-space: nowrap;
transition: all 0.2s;
}
nav.toc a:hover, nav.toc a.active {
color: var(--text-primary);
background: var(--bg-card);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
section {
padding: 80px 0;
border-bottom: 1px solid var(--border);
}
section:last-child { border-bottom: none; }
.section-header {
margin-bottom: 48px;
}
.section-tag {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 12px;
border-radius: 4px;
margin-bottom: 12px;
}
.tag-blue { background: rgba(37,99,235,0.1); color: var(--accent-blue); }
.tag-purple { background: rgba(124,58,237,0.1); color: var(--accent-purple); }
.tag-cyan { background: rgba(8,145,178,0.1); color: var(--accent-cyan); }
.tag-emerald { background: rgba(5,150,105,0.1); color: var(--accent-emerald); }
.tag-amber { background: rgba(217,119,6,0.1); color: var(--accent-amber); }
.tag-rose { background: rgba(225,29,72,0.1); color: var(--accent-rose); }
.section-header h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 8px;
}
.section-header p {
color: var(--text-secondary);
font-size: 1.05rem;
max-width: 700px;
}
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.card.highlight-card {
border-color: var(--accent);
background: linear-gradient(135deg, rgba(79, 70, 229, 0.06) 0%, rgba(59, 130, 246, 0.06) 100%);
}
.card:hover {
border-color: var(--border-accent);
background: var(--bg-card-hover);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.card .card-icon {
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 16px;
}
.card h3 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 8px;
}
.card p {
font-size: 0.9rem;
color: var(--text-secondary);
line-height: 1.6;
}
.card ul {
list-style: none;
margin-top: 12px;
}
.card ul li {
font-size: 0.85rem;
color: var(--text-secondary);
padding: 4px 0;
padding-left: 18px;
position: relative;
}
.card ul li::before {
content: '›';
position: absolute;
left: 0;
color: var(--accent-blue);
font-weight: 700;
}
.arch-diagram {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 40px;
margin-top: 32px;
overflow-x: auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.arch-layer {
margin-bottom: 16px;
position: relative;
}
.arch-layer-label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 600;
margin-bottom: 8px;
padding-left: 4px;
}
.arch-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.arch-box {
padding: 12px 20px;
border-radius: 8px;
font-size: 0.82rem;
font-weight: 500;
border: 1px solid;
flex: 1;
min-width: 120px;
text-align: center;
transition: transform 0.2s;
}
.arch-box:hover { transform: scale(1.03); }
.arch-blue { background: rgba(37,99,235,0.06); border-color: rgba(37,99,235,0.25); color: var(--accent-blue); }
.arch-cyan { background: rgba(8,145,178,0.06); border-color: rgba(8,145,178,0.25); color: var(--accent-cyan); }
.arch-purple { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.25); color: var(--accent-purple); }
.arch-emerald { background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.25); color: var(--accent-emerald); }
.arch-amber { background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.25); color: var(--accent-amber); }
.arch-rose { background: rgba(225,29,72,0.06); border-color: rgba(225,29,72,0.25); color: var(--accent-rose); }
.arch-orange { background: rgba(234,88,12,0.06); border-color: rgba(234,88,12,0.25); color: var(--accent-orange); }
.arch-connector {
text-align: center;
padding: 4px 0;
color: var(--text-muted);
font-size: 1.2rem;
letter-spacing: 4px;
}
.tech-table {
width: 100%;
border-collapse: collapse;
margin-top: 24px;
}
.tech-table thead th {
text-align: left;
padding: 14px 16px;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
border-bottom: 1px solid var(--border-accent);
font-weight: 600;
}
.tech-table tbody td {
padding: 14px 16px;
font-size: 0.9rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.tech-table tbody tr:hover { background: rgba(37,99,235,0.04); }
.tech-table .tech-name {
font-weight: 600;
color: var(--text-primary);
}
.tech-table .tech-desc {
color: var(--text-secondary);
font-size: 0.85rem;
}
.tech-tag {
display: inline-block;
font-size: 0.72rem;
padding: 2px 8px;
border-radius: 4px;
background: rgba(37,99,235,0.08);
color: var(--accent-blue);
margin-right: 4px;
margin-bottom: 4px;
font-family: 'JetBrains Mono', monospace;
}
.phase-timeline {
position: relative;
padding-left: 32px;
margin-top: 32px;
}
.phase-timeline::before {
content: '';
position: absolute;
left: 11px;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--accent-blue), var(--accent-purple), var(--accent-emerald));
}
.phase-item {
position: relative;
margin-bottom: 32px;
padding: 24px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
}
.phase-item::before {
content: '';
position: absolute;
left: -27px;
top: 28px;
width: 12px;
height: 12px;
border-radius: 50%;
border: 2px solid var(--accent-blue);
background: #ffffff;
}
.phase-item h4 {
font-size: 1rem;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 10px;
}
.phase-item .phase-badge {
font-size: 0.72rem;
padding: 2px 10px;
border-radius: 4px;
font-weight: 600;
}
.phase-item ul {
list-style: none;
margin-top: 8px;
}
.phase-item ul li {
font-size: 0.88rem;
color: var(--text-secondary);
padding: 3px 0 3px 18px;
position: relative;
}
.phase-item ul li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--accent-emerald);
font-size: 0.8rem;
}
.highlight-box {
background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(124,58,237,0.05));
border: 1px solid rgba(37,99,235,0.15);
border-radius: 12px;
padding: 24px;
margin: 20px 0;
}
.highlight-box h4 {
font-size: 0.95rem;
margin-bottom: 8px;
color: var(--accent-blue);
}
.highlight-box p {
font-size: 0.9rem;
color: var(--text-secondary);
}
code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.85em;
background: rgba(37,99,235,0.07);
padding: 2px 6px;
border-radius: 4px;
color: var(--accent-blue);
}
.tabs {
display: flex;
gap: 4px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border);
padding-bottom: 0;
}
.tab-btn {
background: none;
border: none;
color: var(--text-muted);
font-size: 0.88rem;
padding: 10px 18px;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.2s;
font-family: inherit;
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active {
color: var(--accent-blue);
border-bottom-color: var(--accent-blue);
}
.tab-content { display: none; }
.tab-content.active { display: block; }
.stats-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
margin: 32px 0;
}
.stat-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 20px;
text-align: center;
}
.stat-card .stat-value {
font-size: 2rem;
font-weight: 900;
font-family: 'JetBrains Mono', monospace;
}
.stat-card .stat-label {
font-size: 0.8rem;
color: var(--text-muted);
margin-top: 4px;
}
.v-blue { color: var(--accent-blue); }
.v-cyan { color: var(--accent-cyan); }
.v-purple { color: var(--accent-purple); }
.v-emerald { color: var(--accent-emerald); }
.v-amber { color: var(--accent-amber); }
@media (max-width: 768px) {
.arch-row { flex-direction: column; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
section { padding: 48px 0; }
.hero { padding: 48px 20px; min-height: 40vh; }
}
</style>
</head>
<body>
<!-- HERO -->
<header class="hero">
<div class="hero-content">
<h1>Model Inference Cloud Platform</h1>
<p class="subtitle">
一站式模型推理云平台产品方案 — 涵盖功能设计、系统架构与技术选型的完整蓝图，支持从快速实验到生产级部署的全生命周期
</p>
<div class="meta">
<span>架构设计 v2.6</span>
<span>2026-04-30</span>
<span>产品架构方案</span>
<span>Phase 1 ✅ · Phase 2 ✅ · Phase 3 🚀（HAMi ✅ · K8s ✅ · 多引擎 ✅ · 前端新增功能 ✅）</span>
</div>
</div>
</header>
<!-- NAV -->
<nav class="toc" id="toc">
<ul>
<li><a href="#overview">平台概览</a></li>
<li><a href="#features">功能设计</a></li>
<li><a href="#architecture">系统架构</a></li>
<li><a href="#tech-stack">技术选型</a></li>
<li><a href="#data-flow">数据流设计</a></li>
<li><a href="#security">安全与合规</a></li>
<li><a href="#roadmap">实施路线</a></li>
</ul>
</nav>
<main class="container">
<!-- ============================== 1. 平台概览 ============================== -->
<section id="overview">
<div class="section-header">
<span class="section-tag tag-blue">PLATFORM OVERVIEW</span>
<h2>平台概览</h2>
<p>构建一个面向企业和开发者的一站式模型推理云平台，提供从模型探索、推理部署、微调训练到生产运维的全链路能力</p>
</div>
<div class="stats-row">
<div class="stat-card">
<div class="stat-value v-blue">17</div>
<div class="stat-label">核心功能模块</div>
</div>
<div class="stat-card">
<div class="stat-value v-cyan">7</div>
<div class="stat-label">模型类型支持</div>
</div>
<div class="stat-card">
<div class="stat-value v-purple">2</div>
<div class="stat-label">部署模式</div>
</div>
<div class="stat-card">
<div class="stat-value v-emerald">99.9%</div>
<div class="stat-label">SLA 可用性目标</div>
</div>
<div class="stat-card">
<div class="stat-value v-amber"><200ms</div>
<div class="stat-label">TTFT 延迟目标</div>
</div>
</div>
<div class="highlight-box">
<h4>产品定位</h4>
<p>打造兼具 <strong>Serverless 共享推理</strong>（按 Token 计费）和 <strong>专属端点</strong>（独占 GPU 资源）两种模式的推理服务平台。同时支持 <strong>Responses API</strong> 和 <strong>Chat Completions API</strong> 双格式，最大化降低迁移成本。</p>
</div>
<div class="grid-2" style="margin-top: 24px;">
<div class="card">
<div class="card-icon" style="background: rgba(37,99,235,0.1); color: var(--accent-blue);">🔮</div>
<h3>Serverless 共享推理</h3>
<p>零运维开箱即用，按 Token 量弹性计费，适用于开发测试和中小规模生产负载</p>
</div>
<div class="card">
<div class="card-icon" style="background: rgba(124,58,237,0.1); color: var(--accent-purple);">🏗️</div>
<h3>专属端点 (Dedicated)</h3>
<p>独占 GPU 实例 + 三维指标复合伸缩 + Warm Pool 冷启动优化 + 跨 AZ 高可用，面向生产级推理</p>
</div>
<div class="card">
<div class="card-icon" style="background: rgba(5,150,105,0.1); color: var(--accent-emerald);">🇨🇳</div>
<h3>国产化算力适配</h3>
<p>支持华为昇腾 910B/950、海光 K100、寒武纪 590 等国产 GPU，满足信创与国产化合规要求，异构混合调度透明切换</p>
</div>
</div>
</section>
<!-- ============================== 2. 功能设计 ============================== -->
<section id="features">
<div class="section-header">
<span class="section-tag tag-purple">FEATURE DESIGN</span>
<h2>功能设计</h2>
<p>划分为 15 大功能模块，覆盖推理服务、模型管理、数据闭环、运维监控、开发者工具、安全合规全链路</p>
</div>
<!-- 功能模块全局总览 -->
<div class="feature-overview" style="margin-bottom: 40px; overflow-x: auto;">
<table class="overview-table" style="width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.82rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--border);">
<thead>
<tr style="background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(59,130,246,0.08));">
<th style="padding: 14px 16px; text-align: left; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border); width: 15%;">功能模块</th>
<th style="padding: 14px 16px; text-align: left; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border); width: 13%;">一级功能</th>
<th style="padding: 14px 16px; text-align: left; font-weight: 600; color: var(--text-primary); border-bottom: 1px solid var(--border);">功能简介</th>
</tr>
</thead>
<tbody>
<tr style="background: var(--bg-card);">
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">推理引擎</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">模型推理服务</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">七大模型类型 · Responses API + Chat Completions 双格式 · FlashAttention-4 / KV Cache 压缩 / 投机解码 / PD 分离</td>
</tr>
<tr>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">Playground</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">交互式试玩</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">参数调节 · 模型对比 · Function Calling / 结构化输出测试 · Prompt Preset · 代码导出</td>
</tr>
<tr style="background: var(--bg-card);">
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">专属端点</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Dedicated Endpoints</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">独占 GPU 实例 · 复合伸缩策略 (队列+延迟+GPU) · Warm Pool 冷启动优化 (<5s) · 零停机蓝绿部署 · 跨 AZ 高可用 · 资源配额管理</td>
</tr>
<tr>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">模型部署</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Deployments</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">轻量弹性部署模式 · 三步向导（选模型→计费方式→配置确认）· 三种计费方式（Token/置备吐单元/模型单元）· 五种状态流转 · 自动生成唯一 Endpoint URL</td>
</tr>
<tr style="background: var(--bg-card);">
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">模型微调</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Fine-tuning</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">LoRA / 全参数微调 · 任务全生命周期管理 · 数据集验证 · LoRA 挂载与合并</td>
</tr>
<tr style="background: var(--bg-card);">
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">数据实验室</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Data Lab</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">推理日志 + 数据集统一工作空间 · Datasets API · SQL 查询 · PII 脱敏与合规</td>
</tr>
<tr>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">批量推理</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Batch API</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">异步批量推理 · 折扣定价 · 不占实时配额 · 任务拆分与优先级调度</td>
</tr>
<tr style="background: var(--bg-card);">
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">可观测性</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Observability</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">TTFT / TPS / 吞吐 / 错误率 / GPU 利用率多维指标 · Prometheus 导出 · Grafana 仪表盘 · Webhook 告警</td>
</tr>
<tr>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">团队管理</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">权限控制</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">组织 → 项目两级层级 · RBAC 角色权限 · SSO (SAML/OIDC) · MFA · API Key 粒度管控</td>
</tr>
<tr style="background: var(--bg-card);">
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">成员管理</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Members</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">邀请制轻量成员管理 · 四种角色（owner/admin/member/viewer）· 邀请状态（pending→active）· 成员列表/角色修改/移除</td>
</tr>
<tr>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">计费系统</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Billing</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Token 计量 + GPU·小时双模式 · 支付宝/微信支付 · Promo Code / 试用额度 · 实时余额 · 成本预警</td>
</tr>
<tr>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">第三方集成</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">生态集成</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">LangChain / LlamaIndex / CrewAI · Cursor / Continue / Cline · LiteLLM · 国产生态 (魔搭/钉钉/飞书)</td>
</tr>
<tr style="background: var(--bg-card);">
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">迁移指南</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">Switch Guide</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">零成本迁移方案 (改 base_url + api_key) · API 兼容性矩阵 · 代码示例 · 逐步迁移文档</td>
</tr>
<tr>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 500; color: var(--accent);">Cookbook</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">开发者示例库</td>
<td style="padding: 12px 16px; border-bottom: 1px solid var(--border); color: var(--text-secondary);">GitHub 开源示例仓库 · API 调用 / Agent / RAG / 微调蒸馏 / 多模态完整示例</td>
</tr>
<tr style="background: var(--bg-card);">
<td style="padding: 12px 16px; font-weight: 500; color: var(--accent);">CLI 工具</td>
<td style="padding: 12px 16px; color: var(--text-secondary);">命令行客户端</td>
<td style="padding: 12px 16px; color: var(--text-secondary);">Go 单二进制跨平台 · 推理/微调/批量/端点/数据集全流程 · REPL 对话 + CI/CD 脚本化双模式</td>
</tr>
</tbody>
</table>
</div>
<!-- Tabs -->
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(event, 'feat-inference')">推理引擎</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-playground')">Playground</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-endpoint')">专属端点</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-deployment')">模型部署</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-finetune')">模型微调</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-datalab')">数据实验室</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-observe')">可观测性</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-team')">团队管理</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-members')">成员管理</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-billing')">计费系统</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-integration')">集成生态</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-cli')">CLI 工具</button>
<button class="tab-btn" onclick="switchTab(event, 'feat-switch')">迁移指南</button>
</div>
<!-- 推理引擎 -->
<div class="tab-content active" id="feat-inference">
<div class="grid-2">
<div class="card">
<h3>模型类型支持</h3>
<ul>
<li><strong>Text-to-Text</strong> — 对话补全、代码生成、翻译、摘要</li>
<li><strong>Vision (多模态)</strong> — 图文理解、文档解析</li>
<li><strong>Embedding / Rerank</strong> — 向量化、文档重排序</li>
<li><strong>Text-to-Image</strong> — Flux / SDXL / Kolors / CogView</li>
<li><strong>Text-to-Video</strong> — CogVideoX / Seedance</li>
<li><strong>Speech</strong> — 语音合成与识别</li>
</ul>
</div>
<div class="card">
<h3>双 API 格式支持</h3>
<p>同时兼容 OpenAI <strong>Responses API</strong> 和 <strong>Chat Completions API</strong>:</p>
<ul>
<li><code>/v1/responses</code> — <strong>Responses API</strong> (推荐新项目)</li>
<li><code>/v1/chat/completions</code> — Chat Completions (持续支持)</li>
<li><code>/v1/completions</code> — 文本补全 (FIM)</li>
<li><code>/v1/embeddings</code> / <code>/v1/rerank</code></li>
<li><code>/v1/images/generations</code> — 图像生成</li>
<li><code>/v1/batches</code> / <code>/v1/files</code> / <code>/v1/datasets</code></li>
</ul>
</div>
<div class="card highlight-card">
<h3>Responses API 核心特性</h3>
<ul>
<li><strong>Items 数据模型</strong> — message / function_call / function_call_output 类型化联合体</li>
<li><strong>服务端状态管理</strong> — <code>store: true</code> + <code>previous_response_id</code> 链式多轮对话</li>
<li><strong>顶层 instructions</strong> — 系统指令与用户输入解耦，语义更清晰</li>
<li><strong>内置工具</strong> — web_search / code_interpreter / file_search / image_generation / mcp</li>
<li><strong>缓存利用率提升 40-80%</strong> — 相比 Chat Completions 显著降低成本</li>
<li><strong>Agentic Loop</strong> — 单次请求内自动调用多工具，原生 Agent 能力</li>
</ul>
</div>
<div class="card">
<h3>注意力与缓存优化</h3>
<ul>
<li><strong>FlashAttention-4</strong> — Blackwell 原生优化，较 cuDNN 提速 1.3x</li>
<li><strong>PagedAttention</strong> — 分页管理显存，提升吞吐</li>
<li><strong>KV Cache 压缩</strong> — TurboQuant 3-bit 存储，6x 内存压缩</li>
<li><strong>KV Cache CPU 卸载</strong> — 智能 Offloading + FlexKV 后端</li>
<li><strong>自动前缀缓存</strong> — System Prompt KV 跨请求零配置复用</li>
<li><strong>语义缓存</strong> — 向量嵌入匹配语义相似查询</li>
</ul>
</div>
<div class="card">
<h3>量化与投机解码</h3>
<ul>
<li><strong>NVFP4</strong> — Blackwell 原生 4-bit，显存降低 3.5x</li>
<li><strong>FP8</strong> — Hopper/Blackwell 原生，精度损失 <1%</li>
<li><strong>EAGLE-3 / FastEagle</strong> — 特征层非自回归投机</li>
<li><strong>N-gram 树投机</strong> — 零参数训练，代码生成吞吐 2x</li>
<li><strong>连续批处理</strong> — 动态合批最大化 GPU 利用率</li>
<li><strong>Performance Mode</strong> — balanced / interactivity / throughput</li>
</ul>
</div>
<div class="card">
<h3>分布式推理架构</h3>
<ul>
<li><strong>PD 分离</strong> — Prefill/Decode 部署不同节点，独立伸缩</li>
<li><strong>NVIDIA Dynamo</strong> — 数据中心级编排，KV-aware 路由</li>
<li><strong>NIXL</strong> — GPU 间直接 KV Cache 传输</li>
<li><strong>MoE 专家并行</strong> — 弹性 EP + DeepEP 稀疏通信</li>
<li><strong>AF 分离</strong> — Attention/FFN 异构部署（前沿方向）</li>
<li>DeepSeek-R1 场景可实现 <strong>30x 吞吐提升</strong></li>
</ul>
</div>
<div class="card">
<h3>模型 Flavor 机制</h3>
<p>同一模型提供不同推理配置 (flavor) 以平衡成本与性能:</p>
<ul>
<li><strong>Base</strong> — 标准配置，大 batch，高吞吐，成本最优</li>
<li><strong>Fast</strong> — 小 batch + 投机解码，低延迟优先</li>
<li>在模型名后追加 <code>-fast</code> 即可切换 flavor</li>
<li>两种 flavor 模型输出完全一致</li>
</ul>
</div>
<div class="card highlight-card">
<h3>多推理引擎支持 (Multi-Engine Router)</h3>
<p>平台支持多种推理引擎，用户可根据需求自由选择：</p>
<ul>
<li><strong>vLLM</strong> — PagedAttention + Continuous Batching，吞吐最高，适合共享推理集群</li>
<li><strong>SGLang</strong> — RadixAttention 自动前缀缓存，多轮对话更快，适合 Agent 场景</li>
<li><strong>Custom</strong> — 用户自定义引擎地址（LMDeploy/TensorRT-LLM 等），适合私有部署</li>
<li><strong>Mock</strong> — 本地开发模拟，无需真实引擎，适合开发测试/CI/CD</li>
<li><strong>环境变量配置</strong> — INFERENCE_ENGINE / VLLM_ENDPOINT / SGLANG_ENDPOINT / CUSTOM_ENGINE_<MODEL_ID></li>
<li><strong>数据库配置</strong> — models.engine_type / models.engine_addr 字段</li>
<li><strong>自动降级</strong> — 无真实引擎时自动降级为 Mock，保障开发体验</li>
</ul>
</div>
</div>
<div class="highlight-box" style="margin-top: 20px;">
<h4>国产开源模型重点支持</h4>
<p>
<strong>DeepSeek-V4/R1</strong>（深度求索 · 极致性价比） |
<strong>Qwen3.5/4</strong>（阿里 · Dense+MoE 双架构） |
<strong>GLM-5</strong>（智谱 · 深度适配 7 种国产芯片） |
<strong>Kimi-K2.5</strong>（月之暗面 · 1T 参数 256K 上下文） |
<strong>InternVL3</strong>（书生 · 多模态） |
<strong>豆包 2.0</strong>（字节 · Pro/Lite/Mini 全系列） |
<strong>Baichuan4</strong>（百川 · 中文搜索增强）
</p>
</div>
<div class="highlight-box" style="margin-top: 12px;">
<h4>批量推理 (Batch API)</h4>
<p>针对非实时场景（离线评测、数据标注、大规模生成），提供异步批量推理能力。利用空闲算力执行，享受 <strong>50% 价格折扣</strong>和更高的速率限制。支持 JSONL 文件上传、任务状态查询、结果文件下载。</p>
</div>
</div>
<!-- Playground -->
<div class="tab-content" id="feat-playground">
<div class="grid-2">
<div class="card">
<h3>交互式模型试玩</h3>
<ul>
<li>Web UI 直接与模型对话，零代码门槛</li>
<li>System Prompt 编辑与 few-shot 示例设置</li>
<li>实时调节生成参数 (temperature, top_p, max_tokens 等)</li>
<li>支持图片上传进行多模态对话</li>
<li>对话历史自动保存与导出</li>
</ul>
</div>
<div class="card">
<h3>模型对比 (Compare)</h3>
<ul>
<li>双模型并排对话，同时发送 Prompt</li>
<li>参数同步 / 独立配置切换</li>
<li>延迟与 Token 消耗实时对比</li>
<li>帮助快速选择最适合业务的模型</li>
</ul>
</div>
<div class="card">
<h3>代码导出 (View Code)</h3>
<ul>
<li>一键导出 Python / JavaScript / cURL 代码片段</li>
<li>包含完整的模型配置与对话上下文</li>
<li>快速从实验过渡到应用集成</li>
</ul>
</div>
<div class="card">
<h3>Prompt Preset 管理</h3>
<ul>
<li>保存 System Prompt + 参数 + Few-shot 示例为预设</li>
<li>团队内共享链接复用 Prompt 模板</li>
<li>一键导出预设为代码片段</li>
</ul>
</div>
<div class="card">
<h3>Function Calling 测试</h3>
<ul>
<li>在参数面板中定义工具函数 JSON Schema</li>
<li>测试模型的函数选择与参数生成能力</li>
<li>验证 tool_choice 策略（auto / 指定函数）</li>
</ul>
</div>
<div class="card">
<h3>结构化输出测试</h3>
<ul>
<li>切换 Response Format（JSON Object / JSON Schema）</li>
<li>提供 JSON Schema 验证结构化输出</li>
<li>对比不同模型的 JSON 生成准确率</li>
</ul>
</div>
</div>
</div>
<!-- 专属端点 -->
<div class="tab-content" id="feat-endpoint">
<div class="grid-2">
<div class="card">
<h3>三步创建向导</h3>
<ul>
<li><strong>Step 1 — 选择模型</strong>：从模型模板目录选择，支持搜索 + 类型筛选（对话/多模态）</li>
<li><strong>Step 2 — GPU 配置</strong>：选择 GPU 类型（5 种可选）、数量、区域，实时显示单价和费率</li>
<li><strong>Step 3 — 端点配置</strong>：设置名称、描述、副本范围（min/max）+ 费用预估卡片</li>
</ul>
</div>
<div class="card highlight-card">
<h3>GPU 类型与定价</h3>
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px;">Step 2 GPU 配置页面实时展示单价，让用户明确费用：</p>
<ul>
<li><strong>H100-80GB</strong> — ¥5.80/GPU·时（Hopper 架构，速度比 A100 快 3x）</li>
<li><strong>A100-80GB</strong> — ¥3.50/GPU·时（旗舰级训练/推理，适合 70B+ 大模型）</li>
<li><strong>A100-40GB</strong> — ¥2.20/GPU·时（通用高性能，适合 7B–40B 模型）</li>
<li><strong>L40S-48GB</strong> — ¥1.60/GPU·时（推理优化型，性价比极高）</li>
<li><strong>RTX4090-24GB</strong> — ¥0.90/GPU·时（消费级旗舰，适合轻量模型）</li>
</ul>
</div>
<div class="card highlight-card">
<h3>费用透明展示</h3>
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px;">用户在创建前和运行时均可清晰了解费用：</p>
<ul>
<li><strong>Step 2 费用提示</strong>：显示「按 GPU·小时计费」+ 当前配置单副本费率</li>
<li><strong>Step 3 费用预估卡片</strong>：最低费用（min=0 时显示 ¥0.00）+ 最高费用</li>
<li><strong>列表费率列</strong>：运行中端点显示 ¥X.XX/时 + ≈¥X/天，停止显示 —</li>
<li><strong>顶部总费率</strong>：汇总所有运行中端点的实时费率</li>
<li><strong>详情侧边栏</strong>：计费信息卡片（GPU 单价 + 当前费率 + 预估日费 + 计费公式）</li>
</ul>
</div>
<div class="card highlight-card">
<h3>HAMi GPU 资源隔离</h3>
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 12px;">基于 HAMi (CNCF Sandbox) 实现 GPU 资源硬隔离，杜绝 noisy neighbor：</p>
<ul>
<li><strong>GPU 内存硬隔离</strong> — <code>nvidia.com/gpumem</code> (MiB)，容器超用即 OOM，保障推理 SLA</li>
<li><strong>算力配额</strong> — <code>nvidia.com/gpucores</code> (0–100%)，精确控制 GPU 计算资源分配</li>
<li><strong>三种调度策略</strong>：</li>
<li style="padding-left: 18px;">• <strong>Binpack</strong> — 共享集群，最大化利用率，适合成本优化场景</li>
<li style="padding-left: 18px;">• <strong>Spread</strong> — 专属端点，跨节点分散部署，高可用保障</li>
<li style="padding-left: 18px;">• <strong>Topology-aware</strong> — MoE 专家并行，NVLink 优化，减少跨节点通信</li>
<li><strong>多厂商支持</strong> — NVIDIA / 华为昇腾 / 寒武纪 MLU / 海光 DCU，统一 API 透明切换</li>
<li><strong>本地开发降级</strong> — <code>HAMI_ENABLED=false</code> 自动 Stub 模式，无需 Kubernetes</li>
</ul>
</div>
<div class="card">
<h3>详情侧边栏</h3>
<ul>
<li><strong>计费信息卡片</strong>：橙色渐变卡片，GPU 单价 / 当前费率 / 预估日费三格展示</li>
<li><strong>Routing Key</strong>：一键复制，用于 API 调用的 model 字段</li>
<li><strong>配置信息</strong>：模型、GPU 类型/数量、区域、副本范围、当前副本</li>
<li><strong>API 调用示例</strong>：cURL / Python 代码切换 + 一键复制</li>
<li><strong>操作按钮</strong>：启停端点 + 调整副本</li>
</ul>
</div>
<div class="card">
<h3>副本调整弹窗</h3>
<ul>
<li><strong>当前副本滑块</strong>：拖拽调整，立即生效</li>
<li><strong>最小/最大副本</strong>：输入框设置弹性范围</li>
<li><strong>费用影响预览</strong>：当前副本费率 + 弹性范围费率 + 预估日费用</li>
<li>实时计算：GPU 单价 × GPU 数量 × 副本数</li>
</ul>
</div>
<div class="card">
<h3>列表功能增强</h3>
<ul>
<li><strong>搜索 + 状态筛选</strong>：按名称/模型/routing_key 搜索；按运行中/已停止/启动中/异常筛选</li>
<li><strong>费率列</strong>：运行中显示实时费率（¥X.XX/时 + ≈¥X/天）</li>
<li><strong>快捷操作</strong>：Scale / 详情 / 删除</li>
<li><strong>行点击展开详情</strong>：右侧滑出详情侧边栏</li>
</ul>
</div>
<div class="card">
<h3>智能弹性伸缩</h3>
<ul>
<li><strong>复合伸缩策略</strong>：队列深度 + P99 延迟 + GPU 利用率三维指标</li>
<li>扩容步长 ceil(current×0.5)，缩容保守步长 1（防抖动）</li>
<li>扩容冷却期 60s / 缩容冷却期 300s / 缩至零延迟 600s</li>
<li>每 15 秒评估一次，60 秒滑动窗口采样</li>
<li>支持 Scale-to-Zero，无流量自动停止计费</li>
</ul>
</div>
<div class="card">
<h3>冷启动优化</h3>
<ul>
<li><strong>NVMe 模型预缓存</strong>：权重文件预缓存到节点本地 SSD，减少 60-80% 冷启动时间</li>
<li><strong>Warm Pool 预热副本</strong>：已加载模型的待命副本，冷启动 < 5s</li>
<li><strong>预测性扩容</strong>：基于历史流量模式提前扩容</li>
<li><strong>分层模型加载</strong>：先加载前几层开始推理，后续层后台流式加载</li>
<li><strong>Checkpoint 快照</strong>：GPU 内存状态序列化快照，快速恢复</li>
</ul>
</div>
<div class="card">
<h3>高可用与容错</h3>