Skip to content

Commit 9905667

Browse files
Neet-NestorNeet-Nestor
committed
[site] Add hero section
1 parent 14bec5a commit 9905667

20 files changed

+1497
-6
lines changed

‎site/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ dist
22
llm-chat-config.json
33
_includes/stable_diffusion.html
44
_site
5+
.jekyll-cache

‎site/Gemfile

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# frozen_string_literal: true
2+
3+
source "https://rubygems.org"
4+
5+
# gem "rails"
6+
gem "jekyll-remote-theme"
7+
gem "jekyll-sass-converter"

‎site/_includes/arrow.svg

+21
Loading

‎site/_includes/github.svg

+8
Loading

‎site/_includes/head.html

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<meta name="description" content="WebLLM: High-Performance In-Browser LLM Inference Engine">
2+
<meta
3+
http-equiv="origin-trial"
4+
content="Agx76XA0ITxMPF0Z8rbbcMllwuxsyp9qdtQaXlLqu1JUrdHB6FPonuyIKJ3CsBREUkeioJck4nn3KO0c0kkwqAMAAABJeyJvcmlnaW4iOiJodHRwOi8vbG9jYWxob3N0Ojg4ODgiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5fQ=="
5+
/>
6+
<meta
7+
http-equiv="origin-trial"
8+
content="AnmwqQ1dtYDQTYkZ5iMtHdINCaxjE94uWQBKp2yOz1wPTcjSRtOHUGQG+r2BxsEuM0qhxTVnuTjyh31HgTeA8gsAAABZeyJvcmlnaW4iOiJodHRwczovL21sYy5haTo0NDMiLCJmZWF0dXJlIjoiV2ViR1BVIiwiZXhwaXJ5IjoxNjkxNzExOTk5LCJpc1N1YmRvbWFpbiI6dHJ1ZX0="
9+
/>
10+
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
11+
<link rel="stylesheet" href="{{ '/assets/css/hero.css' | relative_url }}" />

‎site/_includes/hero.html

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<section id="hero">
2+
<div class="heading-container">
3+
<h1>MLC LLM: High-Performance Universal LLM Engine for Cloud and Edge</h1>
4+
<div class="link-container">
5+
<a class="get-start-link" href="https://webllm.mlc.ai">
6+
<span class="get-start-link-content">
7+
<span>Check WebLLM</span>
8+
<span class="arrow-container">{% include arrow.svg %}</span></span
9+
>
10+
</a>
11+
<a class="chat-link moving-border" href="https://llm.mlc.ai/docs">
12+
<span class="border"></span>
13+
<span class="chat-link-content">
14+
<span>Get Started</span>
15+
<span class="arrow-container">{% include arrow.svg %}</span>
16+
</span>
17+
</a>
18+
</div>
19+
</div>
20+
<div class="demo-container">
21+
<!-- <img class="android" src="/assets/gif/android-demo.gif" alt="Android Demo" width="612" height="1334" />
22+
<img class="linux" src="/assets/gif/linux-demo.gif" alt="Linux Demo" width="1089" height="667" />
23+
<img class="ios" src="/assets/gif/ios-demo.gif" alt="iOS Demo" width="640" height="1394" /> -->
24+
<!-- <img src="https://llm.mlc.ai/docs/_images/project-workflow.svg" alt="MLC LLM Architecture" /> -->
25+
{% include project-workflow.svg %}
26+
</div>
27+
</section>
28+
29+
<script>
30+
(function() {
31+
32+
function handlerIn(e) {
33+
$(this).addClass("expanded");
34+
}
35+
function handlerOut(e) {
36+
$(this).removeClass("expanded");
37+
}
38+
39+
$(".chat-link").hover(handlerIn, handlerOut);
40+
$(".github-link").hover(handlerIn, handlerOut);
41+
})()
42+
</script>

‎site/_includes/project-workflow.svg

+1,176
Loading

‎site/assets/css/hero.scss

+229
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
---
2+
---
3+
4+
#hero {
5+
background: radial-gradient(100% 50rem at center 50rem, #3351cb50, #ffffff);
6+
padding: 3rem;
7+
width: 100vw;
8+
margin-left: calc(50% - 50vw);
9+
margin-top: -20px;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
14+
a {
15+
color: black;
16+
}
17+
18+
.heading-container {
19+
display: flex;
20+
flex-direction: column;
21+
align-items: center;
22+
font-family: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
23+
margin: auto;
24+
25+
a {
26+
min-width: fit-content;
27+
max-width: 16rem;
28+
flex-grow: 1;
29+
}
30+
31+
h1 {
32+
text-align: center;
33+
font-size: 2rem;
34+
font-weight: 700;
35+
}
36+
37+
.link-container {
38+
display: flex;
39+
margin-top: 2rem;
40+
align-items: center;
41+
flex-wrap: wrap;
42+
font-size: 1rem;
43+
word-break: keep-all;
44+
font-weight: 600;
45+
gap: 1rem;
46+
justify-content: center;
47+
48+
.get-start-link {
49+
display: inline-flex;
50+
gap: 1rem;
51+
border-radius: 9999px;
52+
vertical-align: middle;
53+
align-items: center;
54+
justify-content: center;
55+
text-decoration: none;
56+
cursor: pointer;
57+
height: fit-content;
58+
// padding: .25rem;
59+
60+
.get-start-link-content {
61+
width: 100%;
62+
height: 100%;
63+
z-index: 1;
64+
border-radius: 9999px;
65+
padding: 1rem 1.75rem;
66+
background-color: #000000;
67+
display: inline-flex;
68+
gap: .5rem;
69+
display: inline-flex;
70+
justify-content: center;
71+
color: rgb(229 229 229);
72+
73+
.icon {
74+
display: inline-flex;
75+
align-items: center;
76+
77+
svg {
78+
height: 1.5rem;
79+
}
80+
}
81+
}
82+
}
83+
84+
.chat-link {
85+
display: inline-flex;
86+
gap: 1rem;
87+
background-color: white;
88+
border-radius: 9999px;
89+
vertical-align: middle;
90+
align-items: center;
91+
justify-content: center;
92+
text-decoration: none;
93+
cursor: pointer;
94+
height: fit-content;
95+
padding: .25rem;
96+
97+
.chat-link-content {
98+
width: 100%;
99+
height: 100%;
100+
z-index: 1;
101+
border-radius: 9999px;
102+
padding: 1rem 1.75rem;
103+
background-color: white;
104+
display: inline-flex;
105+
justify-content: center;
106+
}
107+
}
108+
109+
.arrow-container {
110+
margin-left: .25rem;
111+
display: inline-flex;
112+
align-items: center;
113+
}
114+
}
115+
}
116+
117+
.arrow-expandable {
118+
stroke-dasharray: 10;
119+
stroke-dashoffset: 10;
120+
transition: stroke-dashoffset 200ms;
121+
}
122+
123+
.expanded {
124+
.arrow-expandable {
125+
stroke-dashoffset: 20;
126+
}
127+
}
128+
129+
.demo-container {
130+
position: relative;
131+
margin-top: 96px;
132+
width: 100%;
133+
max-width: 1024px;
134+
flex-shrink: 0;
135+
padding: 2rem;
136+
137+
svg {
138+
height: auto;
139+
width: 100%;
140+
border-radius: inherit;
141+
}
142+
}
143+
}
144+
145+
.moving-border {
146+
overflow: hidden;
147+
position: relative;
148+
149+
.border {
150+
position: absolute;
151+
inset: -1000%;
152+
animation: spin 3s linear infinite;
153+
border-radius: 1rem;
154+
background-image: conic-gradient(from 90deg at 50% 50%, #e2cbff 0, #393bb2 50%, #e2cbff 100%);
155+
}
156+
}
157+
158+
@media screen and (min-width:640px) {
159+
#hero {
160+
padding: 6rem;
161+
162+
.heading-container {
163+
max-width: 40rem;
164+
165+
h1 {
166+
font-size: 3rem;
167+
}
168+
}
169+
}
170+
}
171+
172+
173+
@media screen and (min-width:768px) {
174+
#hero {
175+
.heading-container {
176+
max-width: 45rem;
177+
178+
h1 {
179+
font-size: 3.2rem;
180+
}
181+
182+
.link-container {
183+
font-size: 1.2rem;
184+
}
185+
}
186+
}
187+
}
188+
189+
@media screen and (min-width:1024px) {
190+
#hero {
191+
padding: 8rem;
192+
193+
.heading-container {
194+
max-width: 50rem;
195+
196+
h1 {
197+
font-size: 3.5rem;
198+
}
199+
}
200+
}
201+
202+
}
203+
204+
@media screen and (min-width:1280px) {
205+
#hero {
206+
.heading-container {
207+
max-width: 60rem;
208+
209+
h1 {
210+
font-size: 4rem;
211+
}
212+
}
213+
}
214+
}
215+
216+
@media screen and (min-width:1760px) {
217+
#hero {
218+
background: radial-gradient(100% 50rem at center 50rem, #3351cb50, #ffffff);
219+
220+
gap: 4rem;
221+
padding-bottom: 12rem;
222+
}
223+
}
224+
225+
@keyframes spin {
226+
100% {
227+
transform: rotate(1turn);
228+
}
229+
}

‎site/gif/android-demo.gif ‎site/assets/gif/android-demo.gif

File renamed without changes.

‎site/gif/ios-demo.gif ‎site/assets/gif/ios-demo.gif

File renamed without changes.

‎site/gif/linux-demo.gif ‎site/assets/gif/linux-demo.gif

File renamed without changes.

‎site/img/android/android-diagram.png ‎site/assets/img/android/android-diagram.png

File renamed without changes.

‎site/img/android/android-studio.png ‎site/assets/img/android/android-studio.png

File renamed without changes.

‎site/img/android/android-vs-ios.png ‎site/assets/img/android/android-vs-ios.png

File renamed without changes.

‎site/img/android/local-advantage.png ‎site/assets/img/android/local-advantage.png

File renamed without changes.

‎site/img/diag.svg ‎site/assets/img/diag.svg

File renamed without changes.

‎site/img/multi-gpu/figure-1.svg ‎site/assets/img/multi-gpu/figure-1.svg

File renamed without changes.

‎site/img/multi-gpu/figure-2.svg ‎site/assets/img/multi-gpu/figure-2.svg

File renamed without changes.

‎site/img/multi-gpu/figure-3.svg ‎site/assets/img/multi-gpu/figure-3.svg

File renamed without changes.

‎site/index.md

+2-6
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,12 @@ title: Home
44
notitle: true
55
---
66

7-
# MLC LLM
7+
{% include hero.html %}
88

9-
Documentation: [https://llm.mlc.ai/docs](https://llm.mlc.ai/docs)
9+
## Overview
1010

1111
**M**achine **L**earning **C**ompilation for **L**arge **L**anguage **M**odels (MLC LLM) is a high-performance universal deployment solution that allows native deployment of any large language models with native APIs with compiler acceleration. The mission of this project is to enable everyone to develop, optimize and deploy AI models natively on everyone's devices with ML compilation techniques.
1212

13-
<p align="center">
14-
<img src="https://llm.mlc.ai/docs/_images/project-workflow.svg" height="300">
15-
</p>
16-
1713
## Installation
1814

1915
MLC LLM is available via [pip](https://llm.mlc.ai/docs/install/mlc_llm.html#install-mlc-packages).

0 commit comments

Comments
 (0)