docs: added docs about kollama cli

Signed-off-by: Neko Ayaka <[email protected]>
nekomeowww · Apr 20, 2024 · 466e51c · 466e51c
1 parent dd1acb0
commit 466e51c
Show file tree

Hide file tree

Showing 22 changed files with 481 additions and 413 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -1,7 +1,13 @@
 import { defineConfig } from 'vitepress'
+import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+  markdown: {
+    config(md) {
+      md.use(tabsMarkdownPlugin)
+    }
+  },
   title: "Ollama Operator",
   description: "Large language models, scaled, deployed. - Yet another operator for running large language models on Kubernetes with ease. 🙀",
   lastUpdated: true,
@@ -62,8 +68,15 @@ export default defineConfig({
             text: 'Guide',
             items: [
               { text: 'Overview', link: '/pages/en/guide/overview' },
+              {
+                text: 'Getting started',
+                items: [
+                  { text: 'Install Ollama Operator', link: '/pages/en/guide/getting-started/' },
+                  { text: 'Deploy models through CLI', link: '/pages/en/guide/getting-started/cli' },
+                  { text: 'Deploy models through CRD', link: '/pages/en/guide/getting-started/crd' },
+                ]
+              },
               { text: 'Supported models', link: '/pages/en/guide/supported-models' },
-              { text: 'Getting started', link: '/pages/en/guide/getting-started' },
             ]
           },
           {
@@ -83,8 +96,15 @@ export default defineConfig({
             text: 'Guide',
             items: [
               { text: 'Overview', link: '/pages/en/guide/overview' },
+              {
+                text: 'Getting started',
+                items: [
+                  { text: 'Install Ollama Operator', link: '/pages/en/guide/getting-started/' },
+                  { text: 'Deploy models through CLI', link: '/pages/en/guide/getting-started/cli' },
+                  { text: 'Deploy models through CRD', link: '/pages/en/guide/getting-started/crd' },
+                ]
+              },
               { text: 'Supported models', link: '/pages/en/guide/supported-models' },
-              { text: 'Getting started', link: '/pages/en/guide/getting-started' },
             ]
           },
           {
@@ -113,8 +133,15 @@ export default defineConfig({
             text: '指南',
             items: [
               { text: '概览', link: '/pages/zh-CN/guide/overview' },
+              {
+                text: '快速上手',
+                items: [
+                  { text: '安装 Ollama Operator', link: '/pages/zh-CN/guide/getting-started/' },
+                  { text: '通过 CLI 部署模型', link: '/pages/zh-CN/guide/getting-started/cli' },
+                  { text: '通过 CRD 部署模型', link: '/pages/zh-CN/guide/getting-started/crd' },
+                ]
+              },
               { text: '支持模型', link: '/pages/zh-CN/guide/supported-models' },
-              { text: '快速开始', link: '/pages/zh-CN/guide/getting-started' },
             ]
           },
           {
@@ -134,8 +161,15 @@ export default defineConfig({
             text: '指南',
             items: [
               { text: '概览', link: '/pages/zh-CN/guide/overview' },
+              {
+                text: '快速上手',
+                items: [
+                  { text: '安装 Ollama Operator', link: '/pages/zh-CN/guide/getting-started/' },
+                  { text: '通过 CLI 部署模型', link: '/pages/zh-CN/guide/getting-started/cli' },
+                  { text: '通过 CRD 部署模型', link: '/pages/zh-CN/guide/getting-started/crd' },
+                ]
+              },
               { text: '支持模型', link: '/pages/zh-CN/guide/supported-models' },
-              { text: '快速开始', link: '/pages/zh-CN/guide/getting-started' },
             ]
           },
           {

diff --git a/docs/.vitepress/theme/components/AsciinemaPlayer.vue b/docs/.vitepress/theme/components/AsciinemaPlayer.vue
diff --git a/docs/.vitepress/theme/components/GettingStartedBlocksEn.vue b/docs/.vitepress/theme/components/GettingStartedBlocksEn.vue
@@ -0,0 +1,65 @@
+<template>
+  <TitleBlockContainerGroup>
+    <TitleBlockContainer
+      href="/pages/en/guide/getting-started/cli"
+      bg="zinc-50 dark:zinc-800"
+      border="transparent solid 2 hover:zinc-200 dark:hover:zinc-800"
+      class="[&_.title-block-container]:bg-zinc-200 [&_.title-block-container]:dark:bg-zinc-600 [&_.title-block-container]:text-zinc-900 [&_.title-block-container]:dark:text-zinc-100"
+    >
+      <template #title>
+        <div flex-1 flex items-center gap-2>
+          <div class="title-block-container" transition="all ease-in-out duration-300" p-2 rounded-lg w-10 h-10 items-center flex justify-center>
+            <div i-icon-park-outline:bank-card-two />
+          </div>
+          <span font-semibold>Deploy models through Kollama CLI</span>
+        </div>
+      </template>
+      <div flex="~ col" h-full>
+        <div>
+          <p m="0!" pt="2" text="zinc-500">Dislike YAML?</p>
+          <p m="0!" text="zinc-500">Faster and better UX?</p>
+          <p m="0!" text="zinc-500">No worries, kollama here to rescue!</p>
+        </div>
+        <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
+          <p m="0!" text="zinc-400"># <span>as regular binary cli</span></p>
+          <p m="0!">$ <span text="blue-800 dark:blue-300">kollama </span><span text="green-800 dark:green-300">deploy phi</span></p>
+        </div>
+        <span flex="~ 1" items-center>or</span>
+        <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
+          <p m="0!" text="zinc-400"># <span>as kubectl plugin</span></p>
+          <p m="0!">$ <span text="blue-800 dark:blue-300">kubectl </span><span text="green-800 dark:green-300">ollama deploy phi</span></p>
+        </div>
+      </div>
+    </TitleBlockContainer>
+    <TitleBlockContainer
+      href="/pages/en/guide/getting-started/crd"
+      bg="zinc-50 dark:zinc-800"
+      border="transparent solid 2 hover:zinc-200 dark:hover:zinc-800"
+      class="[&_.title-block-container]:bg-zinc-200 [&_.title-block-container]:dark:bg-zinc-600 [&_.title-block-container]:text-zinc-900 [&_.title-block-container]:dark:text-zinc-100"
+    >
+      <template #title>
+        <div flex-1 flex items-center gap-2>
+          <div class="title-block-container" transition="all ease-in-out duration-300" p-2 rounded-lg w-10 h-10 items-center flex justify-center>
+            <div i-icon-park-outline:file-code />
+          </div>
+          <span font-semibold>Deploy models through CRD</span>
+        </div>
+      </template>
+      <div flex="~ col" h-full>
+        <div>
+          <p m="0!" pt="2" text="zinc-500">Fine-grained control over parameters?</p>
+          <p m="0!" text="zinc-500">GitOps and CI/CD?</p>
+          <p m="0!" text="zinc-500">CRD is simple enough with 6 lines!</p>
+        </div>
+        <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
+          <p m="0!"><span text="blue-800 dark:blue-300">apiVersion: </span><span text="green-800 dark:green-300">ollama.ayaka.io/v1</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">kind: </span><span text="green-800 dark:green-300">Model</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">metadata:</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">&nbsp;&nbsp;name: </span><span text="green-800 dark:green-300">phi</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">spec:</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">&nbsp;&nbsp;image: </span><span text="green-800 dark:green-300">phi</span></p>
+        </div>
+      </div>
+    </TitleBlockContainer>
+  </TitleBlockContainerGroup>
+</template>
diff --git a/docs/.vitepress/theme/components/GettingStartedBlocksZhCn.vue b/docs/.vitepress/theme/components/GettingStartedBlocksZhCn.vue
@@ -0,0 +1,65 @@
+<template>
+  <TitleBlockContainerGroup>
+    <TitleBlockContainer
+      href="/pages/zh-CN/guide/getting-started/cli"
+      bg="zinc-50 dark:zinc-800"
+      border="transparent solid 2 hover:zinc-200 dark:hover:zinc-800"
+      class="[&_.title-block-container]:bg-zinc-200 [&_.title-block-container]:dark:bg-zinc-600 [&_.title-block-container]:text-zinc-900 [&_.title-block-container]:dark:text-zinc-100"
+    >
+      <template #title>
+        <div flex-1 flex items-center gap-2>
+          <div class="title-block-container" transition="all ease-in-out duration-300" p-2 rounded-lg w-10 h-10 items-center flex justify-center>
+            <div i-icon-park-outline:bank-card-two />
+          </div>
+          <span font-semibold>通过 Kollama CLI 部署模型</span>
+        </div>
+      </template>
+      <div flex="~ col" h-full>
+        <div>
+          <p m="0!" pt="2" text="zinc-500">讨厌 YAML？</p>
+          <p m="0!" text="zinc-500">更好更快的使用体验？</p>
+          <p m="0!" text="zinc-500">没问题的，用 kollama 也可以！</p>
+        </div>
+        <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
+          <p m="0!" text="zinc-400"># <span>常规二进制</span></p>
+          <p m="0!">$ <span text="blue-800 dark:blue-300">kollama </span><span text="green-800 dark:green-300">deploy phi</span></p>
+        </div>
+        <span flex="~ 1" items-center>or</span>
+        <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
+          <p m="0!" text="zinc-400"># <span>作为 kubectl 插件</span></p>
+          <p m="0!">$ <span text="blue-800 dark:blue-300">kubectl </span><span text="green-800 dark:green-300">ollama deploy phi</span></p>
+        </div>
+      </div>
+    </TitleBlockContainer>
+    <TitleBlockContainer
+      href="/pages/zh-CN/guide/getting-started/crd"
+      bg="zinc-50 dark:zinc-800"
+      border="transparent solid 2 hover:zinc-200 dark:hover:zinc-800"
+      class="[&_.title-block-container]:bg-zinc-200 [&_.title-block-container]:dark:bg-zinc-600 [&_.title-block-container]:text-zinc-900 [&_.title-block-container]:dark:text-zinc-100"
+    >
+      <template #title>
+        <div flex-1 flex items-center gap-2>
+          <div class="title-block-container" transition="all ease-in-out duration-300" p-2 rounded-lg w-10 h-10 items-center flex justify-center>
+            <div i-icon-park-outline:file-code />
+          </div>
+          <span font-semibold>通过 CRD 部署模型</span>
+        </div>
+      </template>
+      <div flex="~ col" h-full>
+        <div>
+          <p m="0!" pt="2" text="zinc-500">对部署参数的精细控制？</p>
+          <p m="0!" text="zinc-500">GitOps 和自动化部署？</p>
+          <p m="0!" text="zinc-500">CRD 也超简单，只有 6 行！</p>
+        </div>
+        <div class="title-block-body" transition="all ease-in-out duration-300" font-mono p-2 mt-2 bg="zinc-200/50 dark:zinc-700/80" rounded-lg>
+          <p m="0!"><span text="blue-800 dark:blue-300">apiVersion: </span><span text="green-800 dark:green-300">ollama.ayaka.io/v1</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">kind: </span><span text="green-800 dark:green-300">Model</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">metadata:</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">&nbsp;&nbsp;name: </span><span text="green-800 dark:green-300">phi</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">spec:</span></p>
+          <p m="0!"><span text="blue-800 dark:blue-300">&nbsp;&nbsp;image: </span><span text="green-800 dark:green-300">phi</span></p>
+        </div>
+      </div>
+    </TitleBlockContainer>
+  </TitleBlockContainerGroup>
+</template>
diff --git a/docs/.vitepress/theme/components/TitleBlockContainer.vue b/docs/.vitepress/theme/components/TitleBlockContainer.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title?: string
+  href?: string
+}>()
+</script>
+
+<template>
+  <a w-full p-4 rounded-lg transition="all ease-in-out duration-300" cursor-pointer flex="~ col" :href="props.href" decoration="none!">
+    <div flex="1">
+      <div flex="~" items-center>
+        <div v-if="props.title" text-lg font-semibold flex-1>
+          <span>{{ props.title }}</span>
+        </div>
+        <template v-else>
+          <slot name="title" />
+        </template>
+      </div>
+    </div>
+    <slot />
+  </a>
+</template>
diff --git a/docs/.vitepress/theme/components/TitleBlockContainerGroup.vue b/docs/.vitepress/theme/components/TitleBlockContainerGroup.vue
@@ -0,0 +1,5 @@
+<template>
+  <div flex="~ row <md:col" w-full my-4 gap-4>
+    <slot />
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/index.mts b/docs/.vitepress/theme/index.mts
@@ -15,11 +15,18 @@ import {
   NolebaseHighlightTargetedHeading,
 } from '@nolebase/vitepress-plugin-highlight-targeted-heading/client'
 
+import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
+
+import TitleBlockContainer from './components/TitleBlockContainer.vue'
+import TitleBlockContainerGroup from './components/TitleBlockContainerGroup.vue'
+import GettingStartedBlocksEn from './components/GettingStartedBlocksEn.vue'
+import GettingStartedBlocksZhCn from './components/GettingStartedBlocksZhCn.vue'
+
 import '@nolebase/vitepress-plugin-enhanced-mark/client/style.css'
 import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
 import '@nolebase/vitepress-plugin-highlight-targeted-heading/client/style.css'
 
-import AsciinemaPlayer from './components/AsciinemaPlayer.vue'
+import 'asciinema-player/dist/bundle/asciinema-player.css';
 
 import 'virtual:uno.css'
 import './style.css'
@@ -42,7 +49,12 @@ export default {
     })
   },
   enhanceApp({ app }) {
-    app.component('AsciinemaPlayer', AsciinemaPlayer)
+    app.component('TitleBlockContainer', TitleBlockContainer)
+    app.component('TitleBlockContainerGroup', TitleBlockContainerGroup)
+    app.component('GettingStartedBlocksEn', GettingStartedBlocksEn)
+    app.component('GettingStartedBlocksZhCn', GettingStartedBlocksZhCn)
+
+    app.use(enhanceAppWithTabs)
     app.provide(InjectionKey, {
       spotlight: {
         defaultToggle: true

diff --git a/docs/package.json b/docs/package.json
@@ -8,9 +8,12 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.13.3",
+    "@iconify-json/carbon": "^1.1.31",
     "@iconify-json/icon-park-outline": "^1.1.15",
+    "@iconify-json/octicon": "^1.1.53",
     "@iconify-json/simple-icons": "^1.1.99",
     "@iconify-json/twemoji": "^1.1.15",
+    "@nolebase/ui": "2.0.0-rc8",
     "@nolebase/vitepress-plugin-enhanced-mark": "^2.0.0-rc8",
     "@nolebase/vitepress-plugin-enhanced-readabilities": "2.0.0-rc8",
     "@nolebase/vitepress-plugin-git-changelog": "2.0.0-rc8",
@@ -24,6 +27,7 @@
     "vite": "^5.2.8",
     "vite-plugin-inspect": "^0.8.3",
     "vitepress": "^1.1.0",
+    "vitepress-plugin-tabs": "^0.5.0",
     "vue": "^3.4.21"
   }
 }
diff --git a/docs/pages/en/guide/getting-started/cli.md b/docs/pages/en/guide/getting-started/cli.md
@@ -0,0 +1,39 @@
+# Deploy through `kollama` CLI
+
+We have a CLI called `kollama` here to simplify the deployment process. It is a simple way to deploy Ollama models to your Kubernetes cluster.
+
+## Getting Started
+
+1. Install the CLI:
+
+```shell
+go install github.com/nekomeowww/ollama-operator/cmd/kollama@latest
+```
+
+2. Deploy a model:
+
+```shell
+kollama deploy phi --expose --node-port 30001
+```
+
+That's it.
+
+3. Interact with the model:
+
+```shell
+OLLAMA_HOST=<Node ip>:30001 ollama run phi
+```
+
+or use the OpenAI API compatible endpoint:
+
+```shell
+curl http://<Node ip>:30001/v1/chat/completions -H "Content-Type: application/json" -d '{
+  "model": "phi",
+  "messages": [
+      {
+          "role": "user",
+          "content": "Hello!"
+      }
+  ]
+}'
+```