diff --git a/.lintstagedrc.json b/.lintstagedrc.json index 089edcec..c8f00257 100644 --- a/.lintstagedrc.json +++ b/.lintstagedrc.json @@ -1,3 +1,3 @@ { - "./**/*.{js,ts,jsx,tsx,json,html,css}": ["eslint --fix", "prettier --write"] + "./**/*.{js,ts,jsx,tsx,json,css}": ["eslint --fix", "prettier --write"] } diff --git a/site/Gemfile b/site/Gemfile new file mode 100644 index 00000000..d8b7dbb1 --- /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/_config.yml b/site/_config.yml index 37a1ed07..97ca2068 100644 --- a/site/_config.yml +++ b/site/_config.yml @@ -1,5 +1,4 @@ - -name: "Web LLM" +name: "WebLLM" short_name: "WebLLM" url: https://webllm.mlc.ai @@ -11,7 +10,6 @@ plugins: remote_theme: mlc-ai/jekyll-theme-mlc - # Colorize code snippets with the rogue module if we want to deploy on GH. highlighter: rouge @@ -24,7 +22,7 @@ permalink: /blog/:year/:month/:day/:title.html front_page_news: 8 # Base pathname for links. -base: '' +base: "" # make pages for the _projects folder collections: diff --git a/site/_includes/arrow.svg b/site/_includes/arrow.svg new file mode 100644 index 00000000..1883ca76 --- /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 00000000..09a5c74d --- /dev/null +++ b/site/_includes/github.svg @@ -0,0 +1,8 @@ + + + diff --git a/site/_includes/head.html b/site/_includes/head.html index 0493ab07..a7a2527f 100644 --- a/site/_includes/head.html +++ b/site/_includes/head.html @@ -1,3 +1,11 @@ - - + + + + \ No newline at end of file diff --git a/site/_includes/hero.html b/site/_includes/hero.html new file mode 100644 index 00000000..541f3a08 --- /dev/null +++ b/site/_includes/hero.html @@ -0,0 +1,50 @@ +
+
+

WebLLM: High-Performance In-Browser LLM Serving Engine.

+
+ + + + Get Started + {% include arrow.svg %} + + + + + Chat with WebLLM + {% include arrow.svg %} + + +
+
+
+ +
+
+ + diff --git a/site/_includes/llm_chat.html b/site/_includes/llm_chat.html deleted file mode 100644 index ce9a4a46..00000000 --- a/site/_includes/llm_chat.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - -
- -
- - - - - - -
-
-
- -
- - -
-
- -
- - -
diff --git a/site/assets/css/hero.scss b/site/assets/css/hero.scss new file mode 100644 index 00000000..88f241df --- /dev/null +++ b/site/assets/css/hero.scss @@ -0,0 +1,244 @@ +--- +--- + +#hero { + background: radial-gradient(100% 50rem at center 50rem, #3352cb, #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 { + padding-top: 2rem; + 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: 1.2rem; + 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; + overflow: hidden; + position: relative; + // padding: .25rem; + + .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%); + } + + .get-start-link-content { + width: 100%; + height: 100%; + z-index: 1; + border-radius: 9999px; + padding: 1rem 1.75rem; + background-color: black; + 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; + overflow: hidden; + position: relative; + padding: .25rem; + + .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%); + } + + .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; + } + } + + .video-container { + position: relative; + border-radius: 16px; + overflow: hidden; + background-color: #13113c; + border-radius: 16px; + box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); + margin-top: 96px; + width: 100%; + margin-left: -3rem; + max-width: 1024px; + + aspect-ratio: 2292 / 1644; + + video { + width: 100%; + height: auto; + border-radius: inherit; + } + } +} + +@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; + } + } + } +} + +@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(1440px 100% at 75% 50%, #3352cb, #ffffff); + + flex-direction: row; + gap: 4rem; + + padding-bottom: 12rem; + } +} + +@keyframes spin { + 100% { + transform: rotate(1turn); + } +} \ No newline at end of file diff --git a/site/assets/img/fig/light_demo.png b/site/assets/img/fig/light_demo.png new file mode 100644 index 00000000..87975ea2 Binary files /dev/null and b/site/assets/img/fig/light_demo.png differ diff --git a/site/img/fig/pitts.png b/site/assets/img/fig/pitts.png similarity index 100% rename from site/img/fig/pitts.png rename to site/assets/img/fig/pitts.png diff --git a/site/img/fig/web-llm.svg b/site/assets/img/fig/web-llm.svg similarity index 100% rename from site/img/fig/web-llm.svg rename to site/assets/img/fig/web-llm.svg diff --git a/site/img/logo/catalyst.svg b/site/assets/img/logo/catalyst.svg similarity index 100% rename from site/img/logo/catalyst.svg rename to site/assets/img/logo/catalyst.svg diff --git a/site/img/logo/cmuscs.png b/site/assets/img/logo/cmuscs.png similarity index 100% rename from site/img/logo/cmuscs.png rename to site/assets/img/logo/cmuscs.png diff --git a/site/img/logo/mlc-logo-with-text-landscape.png b/site/assets/img/logo/mlc-logo-with-text-landscape.png similarity index 100% rename from site/img/logo/mlc-logo-with-text-landscape.png rename to site/assets/img/logo/mlc-logo-with-text-landscape.png diff --git a/site/img/logo/mlc-logo-with-text-landscape.svg b/site/assets/img/logo/mlc-logo-with-text-landscape.svg similarity index 100% rename from site/img/logo/mlc-logo-with-text-landscape.svg rename to site/assets/img/logo/mlc-logo-with-text-landscape.svg diff --git a/site/img/logo/octoml.png b/site/assets/img/logo/octoml.png similarity index 100% rename from site/img/logo/octoml.png rename to site/assets/img/logo/octoml.png diff --git a/site/img/logo/sjtu.png b/site/assets/img/logo/sjtu.png similarity index 100% rename from site/img/logo/sjtu.png rename to site/assets/img/logo/sjtu.png diff --git a/site/img/logo/uw.jpg b/site/assets/img/logo/uw.jpg similarity index 100% rename from site/img/logo/uw.jpg rename to site/assets/img/logo/uw.jpg diff --git a/site/assets/video/light_demo.mp4 b/site/assets/video/light_demo.mp4 new file mode 100644 index 00000000..c97d3563 Binary files /dev/null and b/site/assets/video/light_demo.mp4 differ diff --git a/site/assets/video/light_demo.webm b/site/assets/video/light_demo.webm new file mode 100644 index 00000000..09dc011f Binary files /dev/null and b/site/assets/video/light_demo.webm differ diff --git a/site/img/fig/demo.gif b/site/img/fig/demo.gif deleted file mode 100644 index 48bb4383..00000000 Binary files a/site/img/fig/demo.gif and /dev/null differ diff --git a/site/index.md b/site/index.md index efd37c74..e2d778de 100644 --- a/site/index.md +++ b/site/index.md @@ -3,25 +3,10 @@ layout: default title: Home notitle: true --- - -# Web LLM +{% include hero.html %} -**Llama 2 7B/13B are now available in Web LLM!!** Try it out in our [chat demo](#chat-demo). - -**Llama 2 70B is also supported.** If you have a Apple Silicon Mac with 64GB or more memory, you can follow the [instructions](#instructions) below to download and launch Chrome Canary and try out the 70B model in Web LLM. - -**Mistral 7B models and WizardMath** are all supported! - -This project brings large-language model and LLM-based chatbot to web browsers. **Everything runs inside the browser with no server support and accelerated with WebGPU.** This opens up a lot of fun opportunities to build AI assistants for everyone and enable privacy while enjoying GPU acceleration. Please check out our [GitHub repo](https://github.com/mlc-ai/web-llm) to see how we did it. -You can use WebLLM as a base [npm package](https://www.npmjs.com/package/@mlc-ai/web-llm) and build your own web application on top of it by following the [documentation](https://mlc.ai/mlc-llm/docs/deploy/javascript.html). - - - +## Overview We have been seeing amazing progress in generative AI and LLM recently. Thanks to the open-source efforts like LLaMA, Alpaca, Vicuna and Dolly, we start to see an exciting future of building our own open source language models and personal AI assistant. @@ -31,27 +16,22 @@ This project is our step to bring more diversity to the ecosystem. Specifically, Won’t it be even more amazing if we can simply open up a browser and directly bring AI natively to your browser tab? There is some level of readiness in the ecosystem. This project provides an affirmative answer to the question. - ## Instructions WebGPU just shipped in Chrome 113. Select the model you want to try out. Enter your inputs, click “Send” – we are ready to go! -The chat bot will first fetch model parameters into local cache. The download may take a few minutes, only for the first run. -The subsequent refreshes and runs will be faster. We have tested it on Windows and Mac, you will need a GPU with about 6GB memory to run Llama-7B, Vicuna-7B, and about 3GB memory to run RedPajama-3B. - -## Chat Demo -The chat demo is based on [Llama 3](https://llama.meta.com/llama3/), [Gemma](https://blog.google/technology/developers/gemma-open-models/), [Mistral-7B](https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.2) and its variants, and many more. More model supports are on the way. +WebLLM Chat will first fetch model parameters into local cache. The download may take a few minutes, only for the first run. -
+The subsequent refreshes and runs will be faster. We have tested it on Windows and Mac, you will need a GPU with about 6GB memory to run Llama-7B, Vicuna-7B, and about 3GB memory to run RedPajama-3B. Models with "-1k" suffix signify 1024 context length, lowering ~2-3GB VRAM requirement compared to their counterparts. Feel free to start trying with those. - ## Links -- [Web LLM GitHub](https://github.com/mlc-ai/web-llm) +- [WebLLM GitHub Repository](https://github.com/mlc-ai/web-llm) +- [WebLLM Chat GitHub Repository](https://github.com/mlc-ai/web-llm-chat) - You might also be interested in [Web Stable Diffusion](https://websd.mlc.ai/). ## Disclaimer