Skip to content

Commit ac1f367

Browse files
wangchen615wangchen615
authored
Merge pull request #433 from vllm-project/feat/website-youtube-dashboard-demo
feat(website): add YouTube dashboard demo section to homepage
2 parents 644541d + 9c0854c commit ac1f367

File tree

3 files changed

+303
-0
lines changed

3 files changed

+303
-0
lines changed

‎website/src/components/YouTubeSection/index.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React from 'react'
2+
import styles from './styles.module.css'
3+
4+
const YouTubeSection: React.FC = () => {
5+
return (
6+
<section className={styles.youtubeSection}>
7+
<div className="container">
8+
<div className={styles.youtubeContainer}>
9+
<h2 className={styles.youtubeTitle}>
10+
🎥 vLLM Semantic Router Demos
11+
</h2>
12+
<p className={styles.youtubeDescription}>
13+
<strong>Latest News</strong>
14+
{' '}
15+
🎉: User Experience is something we do care about. Introducing vLLM-SR dashboard:
16+
</p>
17+
<div className={styles.featureList}>
18+
<div className={styles.featureItem}>
19+
<span className={styles.featureIcon}>💬</span>
20+
<span>Chat with vLLM-SR and see its thinking chain</span>
21+
</div>
22+
<div className={styles.featureItem}>
23+
<span className={styles.featureIcon}>🗺️</span>
24+
<span>View the topology of the intents for Models</span>
25+
</div>
26+
<div className={styles.featureItem}>
27+
<span className={styles.featureIcon}>📊</span>
28+
<span>Monitor real-time Metrics with Grafana Dashboard</span>
29+
</div>
30+
<div className={styles.featureItem}>
31+
<span className={styles.featureIcon}>⚙️</span>
32+
<span>Configure Mixture-of-Models with different Domains</span>
33+
</div>
34+
</div>
35+
<div className={styles.videoWrapper}>
36+
<iframe
37+
className={styles.videoIframe}
38+
src="https://www.youtube.com/embed/E2IirN8PsFw"
39+
title="vLLM Semantic Router Dashboard"
40+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
41+
allowFullScreen
42+
/>
43+
</div>
44+
</div>
45+
</div>
46+
</section>
47+
)
48+
}
49+
50+
export default YouTubeSection

‎website/src/components/YouTubeSection/styles.module.css‎

Lines changed: 245 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,245 @@
1+
/* YouTube Section Styles */
2+
.youtubeSection {
3+
padding: 4rem 0;
4+
background: linear-gradient(135deg, #FFFFFF 0%, #F6F8FA 50%, #FFFFFF 100%);
5+
position: relative;
6+
overflow: hidden;
7+
transition: all 0.3s ease;
8+
}
9+
10+
[data-theme='dark'] .youtubeSection {
11+
background: linear-gradient(135deg, #161B22 0%, #21262D 50%, #161B22 100%);
12+
}
13+
14+
.youtubeSection::before {
15+
content: '';
16+
position: absolute;
17+
top: 0;
18+
left: 0;
19+
right: 0;
20+
bottom: 0;
21+
background-image:
22+
radial-gradient(circle at 30% 30%, rgba(88, 166, 255, 0.05) 0%, transparent 50%),
23+
radial-gradient(circle at 70% 70%, rgba(253, 181, 22, 0.05) 0%, transparent 50%);
24+
pointer-events: none;
25+
transition: all 0.3s ease;
26+
}
27+
28+
[data-theme='dark'] .youtubeSection::before {
29+
background-image:
30+
radial-gradient(circle at 30% 30%, rgba(88, 166, 255, 0.08) 0%, transparent 50%),
31+
radial-gradient(circle at 70% 70%, rgba(253, 181, 22, 0.08) 0%, transparent 50%);
32+
}
33+
34+
.youtubeContainer {
35+
max-width: 1000px;
36+
margin: 0 auto;
37+
padding: 2rem;
38+
text-align: center;
39+
position: relative;
40+
z-index: 1;
41+
}
42+
43+
.youtubeTitle {
44+
font-size: 2.5rem;
45+
font-weight: 700;
46+
margin-bottom: 1rem;
47+
background: linear-gradient(135deg, #0969DA, #FDB516);
48+
-webkit-background-clip: text;
49+
-webkit-text-fill-color: transparent;
50+
background-clip: text;
51+
transition: all 0.3s ease;
52+
}
53+
54+
[data-theme='dark'] .youtubeTitle {
55+
background: linear-gradient(135deg, #58A6FF, #FDB516);
56+
-webkit-background-clip: text;
57+
-webkit-text-fill-color: transparent;
58+
background-clip: text;
59+
}
60+
61+
.youtubeDescription {
62+
font-size: 1.1rem;
63+
line-height: 1.7;
64+
color: #656D76;
65+
margin-bottom: 1.5rem;
66+
max-width: 800px;
67+
margin-left: auto;
68+
margin-right: auto;
69+
transition: color 0.3s ease;
70+
}
71+
72+
[data-theme='dark'] .youtubeDescription {
73+
color: #8B949E;
74+
}
75+
76+
.featureList {
77+
display: grid;
78+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
79+
gap: 1rem;
80+
margin-bottom: 2.5rem;
81+
max-width: 900px;
82+
margin-left: auto;
83+
margin-right: auto;
84+
text-align: left;
85+
}
86+
87+
.featureItem {
88+
display: flex;
89+
align-items: center;
90+
gap: 0.75rem;
91+
padding: 0.75rem 1rem;
92+
background: rgba(255, 255, 255, 0.6);
93+
border: 1px solid rgba(88, 166, 255, 0.2);
94+
border-radius: 10px;
95+
backdrop-filter: blur(10px);
96+
transition: all 0.3s ease;
97+
box-shadow: 0 2px 8px rgba(9, 105, 218, 0.08);
98+
}
99+
100+
[data-theme='dark'] .featureItem {
101+
background: rgba(33, 38, 45, 0.6);
102+
border-color: rgba(88, 166, 255, 0.3);
103+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
104+
}
105+
106+
.featureItem:hover {
107+
background: rgba(255, 255, 255, 0.9);
108+
border-color: rgba(88, 166, 255, 0.4);
109+
transform: translateX(4px);
110+
box-shadow: 0 4px 12px rgba(9, 105, 218, 0.15);
111+
}
112+
113+
[data-theme='dark'] .featureItem:hover {
114+
background: rgba(33, 38, 45, 0.9);
115+
border-color: rgba(88, 166, 255, 0.5);
116+
box-shadow: 0 4px 12px rgba(88, 166, 255, 0.2);
117+
}
118+
119+
.featureItem span:last-child {
120+
color: #1F2328;
121+
font-size: 0.95rem;
122+
line-height: 1.5;
123+
}
124+
125+
[data-theme='dark'] .featureItem span:last-child {
126+
color: #E6EDF3;
127+
}
128+
129+
.featureIcon {
130+
font-size: 1.25rem;
131+
flex-shrink: 0;
132+
filter: drop-shadow(0 0 4px rgba(9, 105, 218, 0.3));
133+
}
134+
135+
[data-theme='dark'] .featureIcon {
136+
filter: drop-shadow(0 0 4px rgba(88, 166, 255, 0.4));
137+
}
138+
139+
.videoWrapper {
140+
position: relative;
141+
padding-bottom: 56.25%; /* 16:9 aspect ratio */
142+
height: 0;
143+
overflow: hidden;
144+
border-radius: 16px;
145+
box-shadow: 0 16px 48px rgba(9, 105, 218, 0.15);
146+
background: rgba(255, 255, 255, 0.8);
147+
border: 1px solid rgba(88, 166, 255, 0.2);
148+
backdrop-filter: blur(10px);
149+
transition: all 0.3s ease;
150+
}
151+
152+
[data-theme='dark'] .videoWrapper {
153+
background: rgba(33, 38, 45, 0.8);
154+
border-color: rgba(88, 166, 255, 0.3);
155+
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
156+
}
157+
158+
.videoWrapper:hover {
159+
transform: translateY(-4px);
160+
box-shadow: 0 24px 64px rgba(9, 105, 218, 0.2);
161+
border-color: rgba(88, 166, 255, 0.4);
162+
}
163+
164+
[data-theme='dark'] .videoWrapper:hover {
165+
box-shadow: 0 24px 64px rgba(88, 166, 255, 0.25);
166+
border-color: rgba(88, 166, 255, 0.5);
167+
}
168+
169+
.videoIframe {
170+
position: absolute;
171+
top: 0;
172+
left: 0;
173+
width: 100%;
174+
height: 100%;
175+
border: none;
176+
border-radius: 16px;
177+
}
178+
179+
/* Responsive Design */
180+
@media screen and (max-width: 996px) {
181+
.youtubeContainer {
182+
padding: 1.5rem;
183+
}
184+
185+
.youtubeTitle {
186+
font-size: 2rem;
187+
}
188+
189+
.youtubeDescription {
190+
font-size: 1rem;
191+
margin-bottom: 1.25rem;
192+
}
193+
194+
.featureList {
195+
grid-template-columns: 1fr;
196+
gap: 0.75rem;
197+
margin-bottom: 2rem;
198+
}
199+
}
200+
201+
@media screen and (max-width: 768px) {
202+
.youtubeSection {
203+
padding: 3rem 0;
204+
}
205+
206+
.youtubeContainer {
207+
padding: 1rem;
208+
}
209+
210+
.youtubeTitle {
211+
font-size: 1.75rem;
212+
}
213+
214+
.youtubeDescription {
215+
font-size: 0.95rem;
216+
margin-bottom: 1rem;
217+
}
218+
219+
.featureList {
220+
grid-template-columns: 1fr;
221+
gap: 0.5rem;
222+
margin-bottom: 1.5rem;
223+
}
224+
225+
.featureItem {
226+
padding: 0.6rem 0.8rem;
227+
}
228+
229+
.featureItem span:last-child {
230+
font-size: 0.9rem;
231+
}
232+
233+
.featureIcon {
234+
font-size: 1.1rem;
235+
}
236+
237+
.videoWrapper {
238+
border-radius: 12px;
239+
}
240+
241+
.videoIframe {
242+
border-radius: 12px;
243+
}
244+
}
245+

‎website/src/pages/index.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ChainOfThoughtTerminal from '@site/src/components/ChainOfThoughtTerminal'
88
import NeuralNetworkBackground from '@site/src/components/NeuralNetworkBackground'
99
import AIChipAnimation from '@site/src/components/AIChipAnimation'
1010
import AcknowledgementsSection from '@site/src/components/AcknowledgementsSection'
11+
import YouTubeSection from '@site/src/components/YouTubeSection'
1112

1213
import styles from './index.module.css'
1314

@@ -150,6 +151,13 @@ const Home: React.FC = () => {
150151
<div className={`${styles.connectionLine} ${styles.connectionLine5}`}></div>
151152
</div>
152153
</div>
154+
<YouTubeSection />
155+
<div className={styles.connectionSection}>
156+
<div className={styles.connectionLines}>
157+
<div className={`${styles.connectionLine} ${styles.connectionLine1}`}></div>
158+
<div className={`${styles.connectionLine} ${styles.connectionLine2}`}></div>
159+
</div>
160+
</div>
153161
<HomepageFeatures />
154162
<div className={styles.connectionSection}>
155163
<div className={styles.connectionLines}>

0 commit comments

Comments
 (0)