From 9905667df67d5096c6a5563adb4388ecb3f60877 Mon Sep 17 00:00:00 2001 From: Nestor Qin Date: Sun, 26 May 2024 21:17:37 -0400 Subject: [PATCH] [site] Add hero section --- site/.gitignore | 1 + site/Gemfile | 7 + site/_includes/arrow.svg | 21 + site/_includes/github.svg | 8 + site/_includes/head.html | 11 + site/_includes/hero.html | 42 + site/_includes/project-workflow.svg | 1176 +++++++++++++++++ site/assets/css/hero.scss | 229 ++++ site/{ => assets}/gif/android-demo.gif | Bin site/{ => assets}/gif/ios-demo.gif | Bin site/{ => assets}/gif/linux-demo.gif | Bin .../img/android/android-diagram.png | Bin .../img/android/android-studio.png | Bin .../img/android/android-vs-ios.png | Bin .../img/android/local-advantage.png | Bin site/{ => assets}/img/diag.svg | 0 site/{ => assets}/img/multi-gpu/figure-1.svg | 0 site/{ => assets}/img/multi-gpu/figure-2.svg | 0 site/{ => assets}/img/multi-gpu/figure-3.svg | 0 site/index.md | 8 +- 20 files changed, 1497 insertions(+), 6 deletions(-) create mode 100644 site/Gemfile create mode 100644 site/_includes/arrow.svg create mode 100644 site/_includes/github.svg create mode 100644 site/_includes/head.html create mode 100644 site/_includes/hero.html create mode 100644 site/_includes/project-workflow.svg create mode 100644 site/assets/css/hero.scss rename site/{ => assets}/gif/android-demo.gif (100%) rename site/{ => assets}/gif/ios-demo.gif (100%) rename site/{ => assets}/gif/linux-demo.gif (100%) rename site/{ => assets}/img/android/android-diagram.png (100%) rename site/{ => assets}/img/android/android-studio.png (100%) rename site/{ => assets}/img/android/android-vs-ios.png (100%) rename site/{ => assets}/img/android/local-advantage.png (100%) rename site/{ => assets}/img/diag.svg (100%) rename site/{ => assets}/img/multi-gpu/figure-1.svg (100%) rename site/{ => assets}/img/multi-gpu/figure-2.svg (100%) rename site/{ => assets}/img/multi-gpu/figure-3.svg (100%) diff --git a/site/.gitignore b/site/.gitignore index 51b35994f6..a1c5d1baed 100644 --- a/site/.gitignore +++ b/site/.gitignore @@ -2,3 +2,4 @@ dist llm-chat-config.json _includes/stable_diffusion.html _site +.jekyll-cache \ No newline at end of file diff --git a/site/Gemfile b/site/Gemfile new file mode 100644 index 0000000000..d8b7dbb193 --- /dev/null +++ b/site/Gemfile @@ -0,0 +1,7 @@ +# frozen_string_literal: true + +source "https://rubygems.org" + +# gem "rails" +gem "jekyll-remote-theme" +gem "jekyll-sass-converter" diff --git a/site/_includes/arrow.svg b/site/_includes/arrow.svg new file mode 100644 index 0000000000..1883ca76f8 --- /dev/null +++ b/site/_includes/arrow.svg @@ -0,0 +1,21 @@ + diff --git a/site/_includes/github.svg b/site/_includes/github.svg new file mode 100644 index 0000000000..1b1812f0e9 --- /dev/null +++ b/site/_includes/github.svg @@ -0,0 +1,8 @@ + + + diff --git a/site/_includes/head.html b/site/_includes/head.html new file mode 100644 index 0000000000..28c070cc12 --- /dev/null +++ b/site/_includes/head.html @@ -0,0 +1,11 @@ + + + + + diff --git a/site/_includes/hero.html b/site/_includes/hero.html new file mode 100644 index 0000000000..298678283c --- /dev/null +++ b/site/_includes/hero.html @@ -0,0 +1,42 @@ +
+
+

MLC LLM: High-Performance Universal LLM Engine for Cloud and Edge

+
+ + + Check WebLLM + {% include arrow.svg %} + + + + + Get Started + {% include arrow.svg %} + + +
+
+
+ + + {% include project-workflow.svg %} +
+
+ + diff --git a/site/_includes/project-workflow.svg b/site/_includes/project-workflow.svg new file mode 100644 index 0000000000..7541c4173a --- /dev/null +++ b/site/_includes/project-workflow.svg @@ -0,0 +1,1176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/site/assets/css/hero.scss b/site/assets/css/hero.scss new file mode 100644 index 0000000000..63e9c8a782 --- /dev/null +++ b/site/assets/css/hero.scss @@ -0,0 +1,229 @@ +--- +--- + +#hero { + background: radial-gradient(100% 50rem at center 50rem, #3351cb50, #ffffff); + padding: 3rem; + width: 100vw; + margin-left: calc(50% - 50vw); + margin-top: -20px; + display: flex; + flex-direction: column; + align-items: center; + + a { + color: black; + } + + .heading-container { + display: flex; + flex-direction: column; + align-items: center; + font-family: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; + margin: auto; + + a { + min-width: fit-content; + max-width: 16rem; + flex-grow: 1; + } + + h1 { + text-align: center; + font-size: 2rem; + font-weight: 700; + } + + .link-container { + display: flex; + margin-top: 2rem; + align-items: center; + flex-wrap: wrap; + font-size: 1rem; + word-break: keep-all; + font-weight: 600; + gap: 1rem; + justify-content: center; + + .get-start-link { + display: inline-flex; + gap: 1rem; + border-radius: 9999px; + vertical-align: middle; + align-items: center; + justify-content: center; + text-decoration: none; + cursor: pointer; + height: fit-content; + // padding: .25rem; + + .get-start-link-content { + width: 100%; + height: 100%; + z-index: 1; + border-radius: 9999px; + padding: 1rem 1.75rem; + background-color: #000000; + display: inline-flex; + gap: .5rem; + display: inline-flex; + justify-content: center; + color: rgb(229 229 229); + + .icon { + display: inline-flex; + align-items: center; + + svg { + height: 1.5rem; + } + } + } + } + + .chat-link { + display: inline-flex; + gap: 1rem; + background-color: white; + border-radius: 9999px; + vertical-align: middle; + align-items: center; + justify-content: center; + text-decoration: none; + cursor: pointer; + height: fit-content; + padding: .25rem; + + .chat-link-content { + width: 100%; + height: 100%; + z-index: 1; + border-radius: 9999px; + padding: 1rem 1.75rem; + background-color: white; + display: inline-flex; + justify-content: center; + } + } + + .arrow-container { + margin-left: .25rem; + display: inline-flex; + align-items: center; + } + } + } + + .arrow-expandable { + stroke-dasharray: 10; + stroke-dashoffset: 10; + transition: stroke-dashoffset 200ms; + } + + .expanded { + .arrow-expandable { + stroke-dashoffset: 20; + } + } + + .demo-container { + position: relative; + margin-top: 96px; + width: 100%; + max-width: 1024px; + flex-shrink: 0; + padding: 2rem; + + svg { + height: auto; + width: 100%; + border-radius: inherit; + } + } +} + +.moving-border { + overflow: hidden; + position: relative; + + .border { + position: absolute; + inset: -1000%; + animation: spin 3s linear infinite; + border-radius: 1rem; + background-image: conic-gradient(from 90deg at 50% 50%, #e2cbff 0, #393bb2 50%, #e2cbff 100%); + } +} + +@media screen and (min-width:640px) { + #hero { + padding: 6rem; + + .heading-container { + max-width: 40rem; + + h1 { + font-size: 3rem; + } + } + } +} + + +@media screen and (min-width:768px) { + #hero { + .heading-container { + max-width: 45rem; + + h1 { + font-size: 3.2rem; + } + + .link-container { + font-size: 1.2rem; + } + } + } +} + +@media screen and (min-width:1024px) { + #hero { + padding: 8rem; + + .heading-container { + max-width: 50rem; + + h1 { + font-size: 3.5rem; + } + } + } + +} + +@media screen and (min-width:1280px) { + #hero { + .heading-container { + max-width: 60rem; + + h1 { + font-size: 4rem; + } + } + } +} + +@media screen and (min-width:1760px) { + #hero { + background: radial-gradient(100% 50rem at center 50rem, #3351cb50, #ffffff); + + gap: 4rem; + padding-bottom: 12rem; + } +} + +@keyframes spin { + 100% { + transform: rotate(1turn); + } +} \ No newline at end of file diff --git a/site/gif/android-demo.gif b/site/assets/gif/android-demo.gif similarity index 100% rename from site/gif/android-demo.gif rename to site/assets/gif/android-demo.gif diff --git a/site/gif/ios-demo.gif b/site/assets/gif/ios-demo.gif similarity index 100% rename from site/gif/ios-demo.gif rename to site/assets/gif/ios-demo.gif diff --git a/site/gif/linux-demo.gif b/site/assets/gif/linux-demo.gif similarity index 100% rename from site/gif/linux-demo.gif rename to site/assets/gif/linux-demo.gif diff --git a/site/img/android/android-diagram.png b/site/assets/img/android/android-diagram.png similarity index 100% rename from site/img/android/android-diagram.png rename to site/assets/img/android/android-diagram.png diff --git a/site/img/android/android-studio.png b/site/assets/img/android/android-studio.png similarity index 100% rename from site/img/android/android-studio.png rename to site/assets/img/android/android-studio.png diff --git a/site/img/android/android-vs-ios.png b/site/assets/img/android/android-vs-ios.png similarity index 100% rename from site/img/android/android-vs-ios.png rename to site/assets/img/android/android-vs-ios.png diff --git a/site/img/android/local-advantage.png b/site/assets/img/android/local-advantage.png similarity index 100% rename from site/img/android/local-advantage.png rename to site/assets/img/android/local-advantage.png diff --git a/site/img/diag.svg b/site/assets/img/diag.svg similarity index 100% rename from site/img/diag.svg rename to site/assets/img/diag.svg diff --git a/site/img/multi-gpu/figure-1.svg b/site/assets/img/multi-gpu/figure-1.svg similarity index 100% rename from site/img/multi-gpu/figure-1.svg rename to site/assets/img/multi-gpu/figure-1.svg diff --git a/site/img/multi-gpu/figure-2.svg b/site/assets/img/multi-gpu/figure-2.svg similarity index 100% rename from site/img/multi-gpu/figure-2.svg rename to site/assets/img/multi-gpu/figure-2.svg diff --git a/site/img/multi-gpu/figure-3.svg b/site/assets/img/multi-gpu/figure-3.svg similarity index 100% rename from site/img/multi-gpu/figure-3.svg rename to site/assets/img/multi-gpu/figure-3.svg diff --git a/site/index.md b/site/index.md index ac0367cdb2..75f4b44b21 100644 --- a/site/index.md +++ b/site/index.md @@ -4,16 +4,12 @@ title: Home notitle: true --- -# MLC LLM +{% include hero.html %} -Documentation: [https://llm.mlc.ai/docs](https://llm.mlc.ai/docs) +## Overview **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. -

- -

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