From 43f222164c59f8ca83431dde8dad718a92c16d5d Mon Sep 17 00:00:00 2001 From: Andrey Cheptsov Date: Fri, 4 Sep 2026 18:42:25 +0200 Subject: [PATCH] Refresh landing page orchestration overview --- mkdocs/docs/index.md | 4 +- website/public/static/logos/smg.svg | 8 + .../src/components/ArchitectureDiagram.tsx | 32 ++-- website/src/components/DashedBorder.tsx | 11 -- website/src/pages/Home/ExploreSection.tsx | 57 +++---- website/src/pages/Home/FaqSection.tsx | 8 +- website/src/styles.css | 158 +++++++++--------- 7 files changed, 127 insertions(+), 151 deletions(-) create mode 100644 website/public/static/logos/smg.svg delete mode 100644 website/src/components/DashedBorder.tsx diff --git a/mkdocs/docs/index.md b/mkdocs/docs/index.md index a5df3e1fe..34c3f664d 100644 --- a/mkdocs/docs/index.md +++ b/mkdocs/docs/index.md @@ -19,8 +19,8 @@ It streamlines development, training, and inference, and is compatible with any dstackai/static-assets repo. The files are self-contained (embedded fonts + logos); the pair swaps with the docs theme via .arch-svg in mkdocs/assets/stylesheets/cloudscape-docs.css. --> -dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, on-prem clusters, and hardware below. -dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, on-prem clusters, and hardware below. +dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, VMs, bare-metal, and hardware below. +dstack architecture: an orchestration layer between AI frameworks and models on top, and GPU clouds, Kubernetes, VMs, bare-metal, and hardware below. ### Set up the server diff --git a/website/public/static/logos/smg.svg b/website/public/static/logos/smg.svg new file mode 100644 index 000000000..f18836381 --- /dev/null +++ b/website/public/static/logos/smg.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/website/src/components/ArchitectureDiagram.tsx b/website/src/components/ArchitectureDiagram.tsx index f8e60fe1a..70d1bf84e 100644 --- a/website/src/components/ArchitectureDiagram.tsx +++ b/website/src/components/ArchitectureDiagram.tsx @@ -1,5 +1,4 @@ import { asset } from '../asset'; -import { DashedBorder } from './DashedBorder'; // Layered "vendor-agnostic" architecture diagram, rebuilt as HTML/CSS (replaces the previous // static SVG). Logos are recolored to the current text color via CSS masking (see .arch-logo in @@ -21,8 +20,7 @@ const FRAMEWORKS: Logo[] = [ { key: 'pytorch', label: 'PyTorch', src: logoSrc('pytorch.svg') }, { key: 'vllm', label: 'vLLM', src: logoSrc('vllm.svg') }, { key: 'sglang', label: 'SGLang', src: logoSrc('sglang.svg') }, - { key: 'meta', label: 'Meta', src: logoSrc('meta.svg') }, - { key: 'huggingface', label: 'Hugging Face', src: logoSrc('huggingface.svg') }, + { key: 'smg', label: 'SMG', src: logoSrc('smg.svg') }, ]; const MODELS: Logo[] = [ @@ -82,17 +80,14 @@ function LogoRow({ logos }: { logos: Logo[] }) { export function ArchitectureDiagram() { return (
-
- {/* Top: what plugs in on top of the orchestration layer. "Any model" spans the last two - columns so it lines up with Kubernetes + on-prem below. */} -
+
+ {/* Top: what plugs in on top of the orchestration layer. */} +
- Any framework
- Any model
@@ -105,9 +100,8 @@ export function ArchitectureDiagram() {
- {['Fleets', 'Dev environments', 'Tasks', 'Services', 'Volumes'].map(name => ( + {['Projects', 'Fleets', 'Runs', 'Presets', 'Gateways'].map(name => (
- {name}
))} @@ -115,25 +109,21 @@ export function ArchitectureDiagram() {
{/* Bottom: where workloads run */} -
+
- - Any cloud + Clouds
-
- - +
+ Kubernetes
-
- - On-prem clusters +
+ VMs or bare-metal
- Any hardware
diff --git a/website/src/components/DashedBorder.tsx b/website/src/components/DashedBorder.tsx deleted file mode 100644 index 8c1932c5b..000000000 --- a/website/src/components/DashedBorder.tsx +++ /dev/null @@ -1,11 +0,0 @@ -// Dotted outline shared by the architecture diagram and the "AI-native orchestration" concept -// cards: a single rounded rect stroked with the exact 2-on / 6-off dash. Geometry, color, and -// radius live in CSS (.arch-dash / .arch-dash rect in styles.css), so it follows the element's -// rounded corners, stays crisp at any size, and takes the current text color (theme-adaptive). -export function DashedBorder() { - return ( - - ); -} diff --git a/website/src/pages/Home/ExploreSection.tsx b/website/src/pages/Home/ExploreSection.tsx index 5b8794d6e..6a224fe24 100644 --- a/website/src/pages/Home/ExploreSection.tsx +++ b/website/src/pages/Home/ExploreSection.tsx @@ -1,8 +1,6 @@ import { useState } from 'react'; -import Icon from '@cloudscape-design/components/icon'; import { AlternatingDocBlock } from '../../components/AlternatingDocBlock'; import { ArchitectureDiagram } from '../../components/ArchitectureDiagram'; -import { DashedBorder } from '../../components/DashedBorder'; import { highlightTerms } from '../../components/highlightTerms'; import { docsUrl } from '../../routes'; import { CapList, CloudGlyph, KubernetesGlyph, ServerGlyph } from './GetStartedSection'; @@ -11,10 +9,11 @@ import { CapList, CloudGlyph, KubernetesGlyph, ServerGlyph } from './GetStartedS // three run types (dev environments, tasks, services) into one card; there's no single runs // concept page, so it links to the quickstart ("creating fleets and submitting runs"). const keyConcepts = [ - { name: 'Fleets', label: 'Cloud & on-prem', href: docsUrl('concepts/fleets'), description: 'Provision and manage clusters across clouds, Kubernetes, and on-prem.' }, - { name: 'Runs', label: 'Dev, training, and inference', href: docsUrl('quickstart'), description: 'Run dev environments, training tasks, and inference services on your fleets.' }, - { name: 'Gateways', label: 'Ingress', href: docsUrl('concepts/gateways'), description: 'Manage auto-scaling, rate limits, ingress, custom domains, etc.' }, - { name: 'Presets', label: 'Inference optimization', href: docsUrl('concepts/presets'), description: 'Agent-based inference optimization toolkit, and a preset registry.' }, + { name: 'Projects', href: docsUrl('concepts/projects'), description: 'Multi-tenancy and resource isolation' }, + { name: 'Fleets', href: docsUrl('concepts/fleets'), description: 'Cluster provisioning and monitoring' }, + { name: 'Runs', href: docsUrl('quickstart'), description: 'Training and inference primitives' }, + { name: 'Presets', href: docsUrl('concepts/presets'), description: 'Agent-based inference optimization' }, + { name: 'Gateways', href: docsUrl('concepts/gateways'), description: 'Ingress, auto-scaling, rate limits, etc' }, ]; // The main marketing content: a sequence of alternating documentation blocks. @@ -22,10 +21,10 @@ export function ExploreSection() { return (
} title="Vendor-agnostic, open-source" imageFirst> - dstack unifies fleets, dev environments, tasks, services, volumes, and gateways in one control plane for AI workloads. + dstack gives cloud tenants and data-center operators a unified control plane for managing compute and orchestrating AI workloads.

- It’s built for containerized AI workloads with a simple CLI, UI, and API. No Kubernetes or Slurm hassle required. + It improves operational efficiency and removes vendor lock-in. No more hassle of building your own compute stack on top of Kubernetes or Slurm. @@ -68,7 +67,7 @@ function BringComputeBlock() { className={`gs-tab${pane === 'onprem' ? ' gs-tab--on' : ''}`} onClick={() => setPane('onprem')} > - On-prem clusters + On-prem