[Docs] Restructure doc page and add AI gallery (#3331)

* WIP: AI gallery

* test

* Docs

* remove get started

* fix

* fixes

* move developer guide

* padding

* Add Github

* Add processing for gallery

* add blog and slack to tab

* fix hyperlins

* Add more gallery

* add mistral 7B

* Fix relative references

* format

* fix lorax logo

* Basic readme for TGI

* Add text for gallery

* bolding

* rename

* Use icon and ux fixes

* add redirect

* format

* use blank page for home

* change to welcome to skypilot

* rename gallery docs

* Fix cross reference

* Add a cover photo

* Add community

* use x for twitter

* change back to twitter

* format

* Fix company

* remove unused file.

* Fix tab movement

* Make plural

* fix sidebar drawer

* Address comments

* remove unecessary file

* same underline

* Update docs/source/_gallery_original/index.rst

Co-authored-by: Zongheng Yang <[email protected]>

* Update docs/source/_gallery_original/index.rst

Co-authored-by: Zongheng Yang <[email protected]>

* Update docs/source/_gallery_original/index.rst

Co-authored-by: Zongheng Yang <[email protected]>

* Update docs/source/_gallery_original/index.rst

Co-authored-by: Zongheng Yang <[email protected]>

* Update docs/source/_gallery_original/index.rst

Co-authored-by: Zongheng Yang <[email protected]>

* remove remnant

* change cover photo

* address some comments

* address comments

* remove -X POST

* adopt changes from #3330

* format

* address comments

* format

* address comments

---------

Co-authored-by: Zongheng Yang <[email protected]>

docs/Makefile

@@ -18,3 +18,4 @@ help:
 # "make mode" option.  $(O) is meant as a shortcut for $(SPHINXOPTS).
 %: Makefile
 	@$(SPHINXBUILD) -M $@ "$(SOURCEDIR)" "$(BUILDDIR)" $(SPHINXOPTS) $(O)
+

docs/source/.gitignore

@@ -0,0 +1 @@
+gallery/

docs/source/_gallery_original/applications/localgpt.md

@@ -0,0 +1 @@
+../../../../llm/localgpt/README.md

docs/source/_gallery_original/applications/tabby.md

@@ -0,0 +1 @@
+../../../../llm/tabby/README.md

docs/source/_gallery_original/frameworks/lorax.md

@@ -0,0 +1 @@
+../../../../llm/lorax/README.md

docs/source/_gallery_original/frameworks/sglang.md

@@ -0,0 +1 @@
+../../../../llm/sglang/README.md

docs/source/_gallery_original/frameworks/tgi.md

@@ -0,0 +1 @@
+../../../../llm/tgi/README.md

docs/source/_gallery_original/frameworks/vllm.md

@@ -0,0 +1 @@
+../../../../llm/vllm/README.md

docs/source/_gallery_original/index.rst

@@ -0,0 +1,67 @@
+AI Gallery
+====================
+
+
+AI Gallery is a collection of ready-to-run recipes for popular AI frameworks and AI models.
+It provides a simple way to **package**, **share**, and **run** AI projects using the simple interface of SkyPilot.
+
+You can directly execute the SkyPilot YAMLs on your own infrastructure, such as :ref:`cloud VMs <installation>` or :ref:`Kubernetes <kubernetes-overview>`.
+
+.. image:: ../images/ai-gallery-cover.png
+   :alt: AI Gallery
+   :align: center
+
+Contents
+--------
+
+.. Relative paths are not supported in README.md. Instead, we should use GitHub
+.. URLs for the references to the files.
+
+.. toctree::
+   :maxdepth: 1
+   :caption: Inference Engines
+
+   vLLM <frameworks/vllm>
+   Hugging Face TGI <frameworks/tgi>
+   SGLang <frameworks/sglang>
+   LoRAX <frameworks/lorax>
+
+
+.. toctree::
+   :maxdepth: 1
+   :caption: LLM Models
+
+   Mixtral (Mistral AI) <llms/mixtral>
+   Mistral 7B (Mistral AI) <https://docs.mistral.ai/self-deployment/skypilot/>
+   Llama-2 (Meta) <llms/llama-2>
+   CodeLlama (Meta) <llms/codellama>
+   Gemma (Google) <llms/gemma>
+
+.. toctree::
+   :maxdepth: 1
+   :caption: Applications
+
+   Tabby: Coding Assistant <applications/tabby>
+   LocalGPT: Chat with PDF <applications/localgpt>
+
+.. toctree::
+   :maxdepth: 1
+   :caption: Tutorials
+
+   tutorials/finetuning.md
+
+
+
+Adding an Example to the Gallery
+--------------------------------
+We welcome contributions from the community. If you would like to contribute, please follow the guidelines below.
+
+1. Fork the `SkyPilot repository <https://github.com/skypilot-org/skypilot>`__ on GitHub.
+2. Create a new folder for your own framework, LLM model, or tutorial under `llm/ <https://github.com/skypilot-org/skypilot/tree/master/llm>`__.
+3. Add a README.md, a SkyPilot YAML, and other necessary files to run the AI project.
+4. Create a soft link in `docs/source/_gallery_original <https://github.com/skypilot-org/skypilot/blob/master/docs/source/_gallery_original>`__ to the README file in one of the subfolders (frameworks, llms, tutorials), e.g., :code:`cd docs/source/_gallery_original/llms; ln -s ../../llm/mixtral/README.md mixtral.md`.
+5. Add the file path to the ``toctree`` above on this page.
+6. Create a pull request to the `SkyPilot repository <https://github.com/skypilot-org/skypilot/compare>`__.
+
+If you have any questions, please feel free to ask in the `SkyPilot Slack <https://slack.skypilot.co>`__.
+

docs/source/_gallery_original/llms/codellama.md

@@ -0,0 +1 @@
+../../../../llm/codellama/README.md

docs/source/_gallery_original/llms/gemma.md

@@ -0,0 +1 @@
+../../../../llm/gemma/README.md

docs/source/_gallery_original/llms/llama-2.md

@@ -0,0 +1 @@
+../../../../llm/llama-2/README.md

docs/source/_gallery_original/llms/mixtral.md

@@ -0,0 +1 @@
+../../../../llm/mixtral/README.md

docs/source/_gallery_original/tutorials/finetuning.md

@@ -0,0 +1 @@
+../../../../llm/vicuna-llama-2/README.md

docs/source/_static/custom.css

@@ -23,12 +23,18 @@
 
 
 html[data-theme="light"] {
+  --pst-color-link: #176de8;
+  --pst-color-primary: #176de8;
   --pst-color-secondary: var(--pst-color-primary);
+  --pst-color-text-base: #4c4c4d;
 }
 
 html[data-theme="dark"] {
+  --pst-color-link: #176de8;
+  --pst-color-primary: #176de8;
   --pst-color-secondary: var(--pst-color-primary);
-
+  --pst-color-text-base: #d8d8d8;
+
   .bd-sidebar::-webkit-scrollbar {
     width: 6px;
     background-color: #2e2e2e;
@@ -112,3 +118,61 @@ html[data-theme="dark"] {
     vertical-align: middle;
     line-height: 1; /* Adjust line height to ensure vertical alignment */
 }
+
+.navbar {
+  --bs-navbar-nav-link-padding-x: 1rem;
+}
+
+.navbar-brand.logo>svg {
+  width: 120px;
+}
+
+.navbar-brand.logo>svg .cls-6 {
+  fill: var(--pst-color-text-base);
+}
+/*********************************************
+* Footer - content *
+*********************************************/
+.footer {
+  font-size: var(--sbt-font-size-small-1);
+
+  &.bd-footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 15px;
+    border-top: 1px solid #ccc;
+    font-size: 85%;
+
+    .bd-footer-content__inner {
+      padding-left: 0px;
+
+      p {
+        margin-bottom: 0px;
+      }
+    }
+  }
+}
+
+
+.bd-header .navbar-nav li a.nav-link:hover {
+  text-decoration: none;
+}
+
+/* Add transparent underline for the other tabs that are not active to avoid
+active tab to be moved up. */
+.nav-link {
+  border-bottom: none;
+}
+
+.bd-header .navbar-nav>.current>.nav-link {
+  border-bottom: none;
+}
+
+/* Assuming your breakpoints are defined in pixels */
+@media (min-width: 959.98px) {
+
+  .bd-sidebar-primary {
+    width: 20% !important;
+  }
+}
+

docs/source/_static/custom.js

@@ -26,7 +26,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // New items:
     const newItems = [
         { selector: '.caption-text', text: 'SkyServe: Model Serving' },
-        { selector: '.toctree-l1 > a', text: 'Running on Kubernetes' }
+        { selector: '.toctree-l1 > a', text: 'Running on Kubernetes' },
     ];
     newItems.forEach(({ selector, text }) => {
         document.querySelectorAll(selector).forEach((el) => {
@@ -36,3 +36,12 @@ document.addEventListener('DOMContentLoaded', () => {
         });
     });
 });
+
+// Remove Previous button from every first page of each tab.
+document.addEventListener("DOMContentLoaded", function () {
+    if (window.location.pathname.endsWith('/') || window.location.pathname.endsWith('index.html')) {
+        var style = document.createElement('style');
+        style.innerHTML = '.prev-next-area a.left-prev { display: none; }';
+        document.head.appendChild(style);
+    }
+});

docs/source/_static/rtd-data.js

@@ -0,0 +1,8 @@
+// Dummy data for testing ReadTheDocs footer insertion
+// This mimics RTD data for a project that uses both versions + languages
+var READTHEDOCS_DATA = {
+    project: "frc-docs",
+    version: "latest",
+    language: "en",
+    proxied_api_host: "https://readthedocs.org",
+};

docs/source/_templates/author.html

@@ -0,0 +1,5 @@
+{% if author %}
+<p class="component-author">
+    By {{ author }}
+</p>
+{% endif %}

docs/source/_templates/main-sidebar-home.html

@@ -0,0 +1,16 @@
+{# Displays the TOC-subtree for pages nested under the currently active top-level TOCtree element. #}
+<nav class="bd-docs-nav bd-links" aria-label="{{ _('SkyPilot') }}">
+    <!-- <p class="bd-links__title" role="heading" aria-level="1">{{ _("SkyPilot") }}</p> -->
+    <div class="bd-toc-item navbar-nav">
+    {{- generate_toctree_html(
+    "sidebar",
+    startdepth=0,
+    show_nav_level=theme_show_nav_level | int,
+    maxdepth=theme_navigation_depth | int,
+    collapse=True,
+    includehidden=theme_sidebar_includehidden | tobool,
+    titles_only=True
+    )
+    -}}
+    </div>
+</nav>

docs/source/_templates/main-sidebar.html

@@ -0,0 +1,15 @@
+{# Displays the TOC-subtree for pages nested under the currently active top-level TOCtree element. #}
+<nav class="bd-docs-nav bd-links" aria-label="{{ _('SkyPilot') }}">
+    <!-- <p class="bd-links__title" role="heading" aria-level="1">{{ _("SkyPilot") }}</p> -->
+    <div class="bd-toc-item navbar-nav">
+    {{- generate_toctree_html(
+    "sidebar",
+    show_nav_level=theme_show_nav_level | int,
+    maxdepth=theme_navigation_depth | int,
+    collapse=theme_collapse_navigation | tobool,
+    includehidden=theme_sidebar_includehidden | tobool,
+    titles_only=True
+    )
+    -}}
+    </div>
+</nav>

docs/source/_templates/navbar-skypilot-logo.html

@@ -0,0 +1,13 @@
+{# Logo link generation -#}
+{% if not theme_logo.get("link") %}
+{% set href = pathto(root_doc) %}
+{% elif hasdoc(theme_logo.get("link")) %}
+{% set href = pathto(theme_logo.get("link")) %} {# internal page #}
+{% else %}
+{% set href = theme_logo.get("link") %} {# external url #}
+{% endif %}
+
+{#- Logo HTML and image #}
+<a class="navbar-brand logo" href="{{ href }}">
+    {{ theme_logo["svg"] }}
+</a>