[docs] Rotate popular models on the landing pages, lead the Cookbook nav with Kimi (#32835)
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
zijiexia
co-authored by
Claude Opus 5
Claude Opus 5
parent
3c9efaf3e1
commit
5efbb18a6f
@@ -7,6 +7,24 @@ metatags:
|
|||||||
---
|
---
|
||||||
|
|
||||||
<CardGroup cols={3}>
|
<CardGroup cols={3}>
|
||||||
|
<Card
|
||||||
|
title="Kimi (Moonshot AI)"
|
||||||
|
mode="card"
|
||||||
|
href="/cookbook/autoregressive/Moonshotai/Kimi-K3"
|
||||||
|
img="/cards/logos/moonshotai.png"
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
title="Thinking Machines"
|
||||||
|
mode="card"
|
||||||
|
href="/cookbook/autoregressive/ThinkingMachines/Inkling"
|
||||||
|
img="/cards/logos/thinkingmachines.png"
|
||||||
|
/>
|
||||||
|
<Card
|
||||||
|
title="GLM"
|
||||||
|
mode="card"
|
||||||
|
href="/cookbook/autoregressive/GLM/GLM-5.2"
|
||||||
|
img="/cards/logos/glm.png"
|
||||||
|
/>
|
||||||
<Card
|
<Card
|
||||||
title="Qwen"
|
title="Qwen"
|
||||||
mode="card"
|
mode="card"
|
||||||
@@ -31,18 +49,6 @@ metatags:
|
|||||||
href="/cookbook/autoregressive/Llama/Llama3.3-70B"
|
href="/cookbook/autoregressive/Llama/Llama3.3-70B"
|
||||||
img="/cards/logos/llama.png"
|
img="/cards/logos/llama.png"
|
||||||
/>
|
/>
|
||||||
<Card
|
|
||||||
title="GLM"
|
|
||||||
mode="card"
|
|
||||||
href="/cookbook/autoregressive/GLM/GLM-5.2"
|
|
||||||
img="/cards/logos/glm.png"
|
|
||||||
/>
|
|
||||||
<Card
|
|
||||||
title="Thinking Machines"
|
|
||||||
mode="card"
|
|
||||||
href="/cookbook/autoregressive/ThinkingMachines/Inkling"
|
|
||||||
img="/cards/logos/thinkingmachines.png"
|
|
||||||
/>
|
|
||||||
<Card
|
<Card
|
||||||
title="Meituan"
|
title="Meituan"
|
||||||
mode="card"
|
mode="card"
|
||||||
@@ -67,12 +73,6 @@ metatags:
|
|||||||
href="/cookbook/autoregressive/OpenAI/GPT-OSS"
|
href="/cookbook/autoregressive/OpenAI/GPT-OSS"
|
||||||
img="/cards/logos/openai.png"
|
img="/cards/logos/openai.png"
|
||||||
/>
|
/>
|
||||||
<Card
|
|
||||||
title="Moonshotai"
|
|
||||||
mode="card"
|
|
||||||
href="/cookbook/autoregressive/Moonshotai/Kimi-K3"
|
|
||||||
img="/cards/logos/moonshotai.png"
|
|
||||||
/>
|
|
||||||
<Card
|
<Card
|
||||||
title="MiniMax"
|
title="MiniMax"
|
||||||
mode="card"
|
mode="card"
|
||||||
|
|||||||
@@ -6,6 +6,12 @@ metatags:
|
|||||||
|
|
||||||
A community-maintained repository of practical guides and recipes for deploying and using SGLang in production environments. Our mission is simple: answer the question **"How do I use SGLang (and related models) on hardware Y for task Z?"** with clear, actionable solutions.
|
A community-maintained repository of practical guides and recipes for deploying and using SGLang in production environments. Our mission is simple: answer the question **"How do I use SGLang (and related models) on hardware Y for task Z?"** with clear, actionable solutions.
|
||||||
|
|
||||||
|
import { popularModels } from "/src/snippets/configs/popular-models.jsx";
|
||||||
|
import { PopularModels } from "/src/snippets/_popular_models.jsx";
|
||||||
|
|
||||||
|
{/* Edit the list in /src/snippets/configs/popular-models.jsx — the docs landing
|
||||||
|
page's featured hero reads the same file. */}
|
||||||
|
<PopularModels models={popularModels} />
|
||||||
|
|
||||||
## Guides
|
## Guides
|
||||||
|
|
||||||
|
|||||||
+33
-33
@@ -969,6 +969,39 @@
|
|||||||
"group": "Autoregressive Models",
|
"group": "Autoregressive Models",
|
||||||
"pages": [
|
"pages": [
|
||||||
"cookbook/autoregressive/intro",
|
"cookbook/autoregressive/intro",
|
||||||
|
{
|
||||||
|
"group": "Kimi (Moonshot AI)",
|
||||||
|
"pages": [
|
||||||
|
"cookbook/autoregressive/Moonshotai/Kimi-K3",
|
||||||
|
"cookbook/autoregressive/Moonshotai/Kimi-K2.7-Code",
|
||||||
|
"cookbook/autoregressive/Moonshotai/Kimi-K2.6",
|
||||||
|
"cookbook/autoregressive/Moonshotai/Kimi-K2.5",
|
||||||
|
"cookbook/autoregressive/Moonshotai/Kimi-K2",
|
||||||
|
"cookbook/autoregressive/Moonshotai/Kimi-Linear"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"group": "Thinking Machines",
|
||||||
|
"pages": [
|
||||||
|
"cookbook/autoregressive/ThinkingMachines/Inkling"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"group": "GLM",
|
||||||
|
"pages": [
|
||||||
|
"cookbook/autoregressive/GLM/GLM-5.2",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-5.1",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-5",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-OCR",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-Glyph",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-4.7",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-4.7-Flash",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-4.6",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-4.6V",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-4.5",
|
||||||
|
"cookbook/autoregressive/GLM/GLM-4.5V"
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"group": "Qwen",
|
"group": "Qwen",
|
||||||
"pages": [
|
"pages": [
|
||||||
@@ -1009,28 +1042,6 @@
|
|||||||
"cookbook/autoregressive/Llama/Llama3.1"
|
"cookbook/autoregressive/Llama/Llama3.1"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"group": "GLM",
|
|
||||||
"pages": [
|
|
||||||
"cookbook/autoregressive/GLM/GLM-5.2",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-5.1",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-5",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-OCR",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-Glyph",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-4.7",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-4.7-Flash",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-4.6",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-4.6V",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-4.5",
|
|
||||||
"cookbook/autoregressive/GLM/GLM-4.5V"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"group": "Thinking Machines",
|
|
||||||
"pages": [
|
|
||||||
"cookbook/autoregressive/ThinkingMachines/Inkling"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"group": "Meituan",
|
"group": "Meituan",
|
||||||
"pages": [
|
"pages": [
|
||||||
@@ -1057,17 +1068,6 @@
|
|||||||
"cookbook/autoregressive/OpenAI/GPT-OSS"
|
"cookbook/autoregressive/OpenAI/GPT-OSS"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
|
||||||
"group": "Moonshotai",
|
|
||||||
"pages": [
|
|
||||||
"cookbook/autoregressive/Moonshotai/Kimi-K3",
|
|
||||||
"cookbook/autoregressive/Moonshotai/Kimi-K2.7-Code",
|
|
||||||
"cookbook/autoregressive/Moonshotai/Kimi-K2.6",
|
|
||||||
"cookbook/autoregressive/Moonshotai/Kimi-K2.5",
|
|
||||||
"cookbook/autoregressive/Moonshotai/Kimi-K2",
|
|
||||||
"cookbook/autoregressive/Moonshotai/Kimi-Linear"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
"group": "MiniMax",
|
"group": "MiniMax",
|
||||||
"pages": [
|
"pages": [
|
||||||
|
|||||||
+6
-178
@@ -9,184 +9,12 @@ keywords:
|
|||||||
mode: wide
|
mode: wide
|
||||||
---
|
---
|
||||||
|
|
||||||
<div className="not-prose">
|
import { popularModels } from "/src/snippets/configs/popular-models.jsx";
|
||||||
<div
|
import { PopularModels } from "/src/snippets/_popular_models.jsx";
|
||||||
style={{
|
|
||||||
position: "relative",
|
{/* One hero per model, rotating. The Cookbook landing page renders the same
|
||||||
overflow: "hidden",
|
list as a compact strip. Edit the list, not this page. */}
|
||||||
marginBottom: "1.5rem",
|
<PopularModels models={popularModels} variant="hero" />
|
||||||
padding: "clamp(1.5rem, 4vw, 2.5rem)",
|
|
||||||
border: "1px solid rgba(251, 146, 60, 0.35)",
|
|
||||||
borderRadius: "1rem",
|
|
||||||
background:
|
|
||||||
"linear-gradient(135deg, #111827 0%, #31202f 58%, #9a3412 100%)",
|
|
||||||
boxShadow: "0 20px 45px rgba(17, 24, 39, 0.18)",
|
|
||||||
color: "#ffffff",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
aria-hidden="true"
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
top: "-7rem",
|
|
||||||
right: "-5rem",
|
|
||||||
width: "18rem",
|
|
||||||
height: "18rem",
|
|
||||||
borderRadius: "999px",
|
|
||||||
background: "rgba(251, 146, 60, 0.18)",
|
|
||||||
filter: "blur(2px)",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: "relative",
|
|
||||||
zIndex: 1,
|
|
||||||
display: "flex",
|
|
||||||
flexWrap: "wrap",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: "clamp(1.25rem, 3vw, 2rem)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div style={{ flex: "1 1 24rem", minWidth: 0 }}>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "inline-flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: "0.45rem",
|
|
||||||
marginBottom: "0.9rem",
|
|
||||||
padding: "0.35rem 0.7rem",
|
|
||||||
border: "1px solid rgba(255, 255, 255, 0.28)",
|
|
||||||
borderRadius: "999px",
|
|
||||||
background: "rgba(255, 255, 255, 0.1)",
|
|
||||||
fontSize: "0.72rem",
|
|
||||||
fontWeight: 750,
|
|
||||||
letterSpacing: "0.08em",
|
|
||||||
textTransform: "uppercase",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span aria-hidden="true">✦</span>
|
|
||||||
Featured model · New
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="/cookbook/autoregressive/Moonshotai/Kimi-K3"
|
|
||||||
style={{
|
|
||||||
display: "block",
|
|
||||||
margin: 0,
|
|
||||||
color: "#ffffff",
|
|
||||||
fontSize: "clamp(1.75rem, 4vw, 2.65rem)",
|
|
||||||
fontWeight: 750,
|
|
||||||
lineHeight: 1.08,
|
|
||||||
letterSpacing: "-0.035em",
|
|
||||||
textDecoration: "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Meet Kimi-K3 on SGLang
|
|
||||||
</a>
|
|
||||||
<p
|
|
||||||
style={{
|
|
||||||
maxWidth: "48rem",
|
|
||||||
margin: "1rem 0 0",
|
|
||||||
color: "rgba(255, 255, 255, 0.82)",
|
|
||||||
fontSize: "1rem",
|
|
||||||
lineHeight: 1.65,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
SGLang natively implements and deeply optimizes K3's new architecture
|
|
||||||
with fused KDA decode kernels, DP attention, MTP, PD disaggregation,
|
|
||||||
and KDA-aware prefix caching. Kimi-K3 is supported on both NVIDIA and
|
|
||||||
AMD GPUs.
|
|
||||||
</p>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
flexWrap: "wrap",
|
|
||||||
gap: "0.5rem",
|
|
||||||
marginTop: "1.15rem",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{[
|
|
||||||
"2.8T parameters",
|
|
||||||
"Fused KDA decode",
|
|
||||||
"NVIDIA + AMD",
|
|
||||||
].map((item) => (
|
|
||||||
<span
|
|
||||||
key={item}
|
|
||||||
style={{
|
|
||||||
padding: "0.35rem 0.65rem",
|
|
||||||
borderRadius: "999px",
|
|
||||||
background: "rgba(255, 255, 255, 0.1)",
|
|
||||||
color: "rgba(255, 255, 255, 0.9)",
|
|
||||||
fontSize: "0.78rem",
|
|
||||||
fontWeight: 650,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item}
|
|
||||||
</span>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="/cookbook/autoregressive/Moonshotai/Kimi-K3"
|
|
||||||
style={{
|
|
||||||
display: "inline-flex",
|
|
||||||
alignItems: "center",
|
|
||||||
marginTop: "1.35rem",
|
|
||||||
padding: "0.7rem 1rem",
|
|
||||||
borderRadius: "0.55rem",
|
|
||||||
background: "#ffffff",
|
|
||||||
color: "#7c2d12",
|
|
||||||
fontSize: "0.88rem",
|
|
||||||
fontWeight: 750,
|
|
||||||
textDecoration: "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Open the Kimi-K3 cookbook →
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="/cookbook/autoregressive/Moonshotai/Kimi-K3"
|
|
||||||
aria-label="Open the Kimi-K3 cookbook"
|
|
||||||
style={{
|
|
||||||
flex: "0 1 12rem",
|
|
||||||
minWidth: "10rem",
|
|
||||||
padding: "0.8rem",
|
|
||||||
border: "1px solid rgba(255, 255, 255, 0.22)",
|
|
||||||
borderRadius: "0.9rem",
|
|
||||||
background: "rgba(255, 255, 255, 0.96)",
|
|
||||||
boxShadow: "0 16px 35px rgba(0, 0, 0, 0.22)",
|
|
||||||
textDecoration: "none",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
role="img"
|
|
||||||
aria-label="Moonshot AI"
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
aspectRatio: "16 / 9",
|
|
||||||
borderRadius: "0.45rem",
|
|
||||||
backgroundColor: "#ffffff",
|
|
||||||
backgroundImage: "url('/cards/logos/moonshotai.png')",
|
|
||||||
backgroundPosition: "center",
|
|
||||||
backgroundRepeat: "no-repeat",
|
|
||||||
backgroundSize: "cover",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
padding: "0.65rem 0.35rem 0.2rem",
|
|
||||||
color: "#111827",
|
|
||||||
textAlign: "center",
|
|
||||||
fontSize: "0.78rem",
|
|
||||||
fontWeight: 750,
|
|
||||||
letterSpacing: "0.06em",
|
|
||||||
textTransform: "uppercase",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Kimi-K3 deployment guide
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
class="github-button"
|
class="github-button"
|
||||||
|
|||||||
@@ -0,0 +1,458 @@
|
|||||||
|
// Auto-rotating carousel over the shared list in
|
||||||
|
// /src/snippets/configs/popular-models.jsx:
|
||||||
|
//
|
||||||
|
// <PopularModels models={popularModels} variant="hero" /> // docs home
|
||||||
|
// <PopularModels models={popularModels} /> // cookbook home
|
||||||
|
//
|
||||||
|
// variant="hero" full-width banner per model — headline, blurb, tags, CTA,
|
||||||
|
// brand tile, from the entry's `hero` block.
|
||||||
|
// variant="strip" (default) one compact line per model — brand mark, name,
|
||||||
|
// tags, "Open" button. No prose; the tags carry the pitch.
|
||||||
|
//
|
||||||
|
// Rotation pauses on hover/focus and is skipped under prefers-reduced-motion.
|
||||||
|
//
|
||||||
|
// One export for both shapes: Mintlify evaluates each exported component on its
|
||||||
|
// own at hydration, so anything two components would share (rotation state, the
|
||||||
|
// timer, the control cluster) has to sit inside one — module-level helpers are
|
||||||
|
// out of scope by the time this runs.
|
||||||
|
|
||||||
|
export const PopularModels = ({
|
||||||
|
models = [],
|
||||||
|
variant = "strip",
|
||||||
|
// A hero blurb takes longer to read than one line of tags.
|
||||||
|
interval = variant === "hero" ? 9000 : 6000,
|
||||||
|
label = "Popular models",
|
||||||
|
}) => {
|
||||||
|
const [index, setIndex] = useState(0);
|
||||||
|
const [paused, setPaused] = useState(false);
|
||||||
|
const [reduceMotion, setReduceMotion] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (typeof window === "undefined" || !window.matchMedia) return;
|
||||||
|
const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||||
|
const sync = () => setReduceMotion(mq.matches);
|
||||||
|
sync();
|
||||||
|
mq.addEventListener("change", sync);
|
||||||
|
return () => mq.removeEventListener("change", sync);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const count = models.length;
|
||||||
|
const isHero = variant === "hero";
|
||||||
|
|
||||||
|
// Functional update so the timer never closes over a stale index.
|
||||||
|
useEffect(() => {
|
||||||
|
if (count < 2 || paused || reduceMotion) return;
|
||||||
|
const id = window.setInterval(
|
||||||
|
() => setIndex((i) => (i + 1) % count),
|
||||||
|
Math.max(2000, interval)
|
||||||
|
);
|
||||||
|
return () => window.clearInterval(id);
|
||||||
|
}, [count, paused, reduceMotion, interval]);
|
||||||
|
|
||||||
|
// A shortened list must not leave the track parked past its last slide.
|
||||||
|
const active = count ? Math.min(index, count - 1) : 0;
|
||||||
|
|
||||||
|
if (!count) return null;
|
||||||
|
|
||||||
|
const navButtonStyle = {
|
||||||
|
display: "inline-flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "center",
|
||||||
|
width: "1.15rem",
|
||||||
|
height: "1.15rem",
|
||||||
|
padding: 0,
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.28)",
|
||||||
|
borderRadius: "999px",
|
||||||
|
background: "rgba(255, 255, 255, 0.1)",
|
||||||
|
color: "rgba(255, 255, 255, 0.92)",
|
||||||
|
fontSize: "0.8rem",
|
||||||
|
lineHeight: 1,
|
||||||
|
cursor: "pointer",
|
||||||
|
};
|
||||||
|
|
||||||
|
const controls =
|
||||||
|
count > 1 ? (
|
||||||
|
<span style={{ display: "inline-flex", alignItems: "center", gap: "0.45rem" }}>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIndex((i) => (i - 1 + count) % count)}
|
||||||
|
aria-label="Previous model"
|
||||||
|
style={navButtonStyle}
|
||||||
|
>
|
||||||
|
‹
|
||||||
|
</button>
|
||||||
|
<span style={{ display: "inline-flex", alignItems: "center", gap: "0.3rem" }}>
|
||||||
|
{models.map((m, i) => (
|
||||||
|
<button
|
||||||
|
key={m.href || m.name}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIndex(i)}
|
||||||
|
aria-label={`Show ${m.name}`}
|
||||||
|
aria-current={i === active ? "true" : undefined}
|
||||||
|
style={{
|
||||||
|
width: i === active ? "1.1rem" : "0.4rem",
|
||||||
|
height: "0.4rem",
|
||||||
|
padding: 0,
|
||||||
|
border: 0,
|
||||||
|
borderRadius: "999px",
|
||||||
|
background:
|
||||||
|
i === active ? "rgba(255, 255, 255, 0.92)" : "rgba(255, 255, 255, 0.34)",
|
||||||
|
cursor: "pointer",
|
||||||
|
transition: reduceMotion
|
||||||
|
? "none"
|
||||||
|
: "width 0.25s ease, background 0.25s ease",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setIndex((i) => (i + 1) % count)}
|
||||||
|
aria-label="Next model"
|
||||||
|
style={navButtonStyle}
|
||||||
|
>
|
||||||
|
›
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
// Only the active slide is opaque: mid-slide, a visible neighbour reads as two
|
||||||
|
// half-drawn cards rather than as motion.
|
||||||
|
const slideStyle = (i) => ({
|
||||||
|
flex: "0 0 100%",
|
||||||
|
minWidth: 0,
|
||||||
|
opacity: i === active ? 1 : 0,
|
||||||
|
pointerEvents: i === active ? "auto" : "none",
|
||||||
|
transition: reduceMotion ? "none" : "opacity 0.3s ease",
|
||||||
|
});
|
||||||
|
|
||||||
|
const tagChip = (t, big) => (
|
||||||
|
<span
|
||||||
|
key={t}
|
||||||
|
style={{
|
||||||
|
padding: big ? "0.35rem 0.65rem" : "0.15rem 0.45rem",
|
||||||
|
borderRadius: "999px",
|
||||||
|
background: big ? "rgba(255, 255, 255, 0.1)" : "rgba(255, 255, 255, 0.12)",
|
||||||
|
color: "rgba(255, 255, 255, 0.9)",
|
||||||
|
fontSize: big ? "0.78rem" : "0.68rem",
|
||||||
|
fontWeight: 650,
|
||||||
|
whiteSpace: big ? "normal" : "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
|
||||||
|
const heroSlide = (m, i) => {
|
||||||
|
const hero = m.hero || {};
|
||||||
|
const cta = hero.cta || `Open the ${m.name} cookbook`;
|
||||||
|
return (
|
||||||
|
<div key={m.href || m.name} aria-hidden={i === active ? undefined : "true"} style={slideStyle(i)}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "clamp(1.25rem, 3vw, 2rem)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flex: "1 1 24rem", minWidth: 0 }}>
|
||||||
|
<a
|
||||||
|
href={m.href}
|
||||||
|
tabIndex={i === active ? undefined : -1}
|
||||||
|
style={{
|
||||||
|
display: "block",
|
||||||
|
margin: 0,
|
||||||
|
color: "#ffffff",
|
||||||
|
fontSize: "clamp(1.75rem, 4vw, 2.65rem)",
|
||||||
|
fontWeight: 750,
|
||||||
|
lineHeight: 1.08,
|
||||||
|
letterSpacing: "-0.035em",
|
||||||
|
textDecoration: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{hero.headline || m.name}
|
||||||
|
</a>
|
||||||
|
{hero.blurb ? (
|
||||||
|
// A div, not a p: MDX rewrites `p` to its own inline element, so a
|
||||||
|
// paragraph here would depend on how that element is styled.
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
maxWidth: "48rem",
|
||||||
|
margin: "1rem 0 0",
|
||||||
|
color: "rgba(255, 255, 255, 0.82)",
|
||||||
|
fontSize: "1rem",
|
||||||
|
lineHeight: 1.65,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{hero.blurb}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
gap: "0.5rem",
|
||||||
|
marginTop: "1.15rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{(hero.tags || m.tags || []).map((t) => tagChip(t, true))}
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={m.href}
|
||||||
|
tabIndex={i === active ? undefined : -1}
|
||||||
|
style={{
|
||||||
|
display: "inline-flex",
|
||||||
|
alignItems: "center",
|
||||||
|
marginTop: "1.35rem",
|
||||||
|
padding: "0.7rem 1rem",
|
||||||
|
borderRadius: "0.55rem",
|
||||||
|
background: "#ffffff",
|
||||||
|
color: "#7c2d12",
|
||||||
|
fontSize: "0.88rem",
|
||||||
|
fontWeight: 750,
|
||||||
|
textDecoration: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{cta} →
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href={m.href}
|
||||||
|
aria-label={cta}
|
||||||
|
tabIndex={i === active ? undefined : -1}
|
||||||
|
style={{
|
||||||
|
flex: "0 1 12rem",
|
||||||
|
minWidth: "10rem",
|
||||||
|
padding: "0.8rem",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.22)",
|
||||||
|
borderRadius: "0.9rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.96)",
|
||||||
|
boxShadow: "0 16px 35px rgba(0, 0, 0, 0.22)",
|
||||||
|
textDecoration: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
role="img"
|
||||||
|
aria-label={m.vendor || m.name}
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
aspectRatio: "16 / 9",
|
||||||
|
borderRadius: "0.45rem",
|
||||||
|
backgroundColor: "#ffffff",
|
||||||
|
backgroundImage: `url('${m.logo}')`,
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{hero.caption ? (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
padding: "0.65rem 0.35rem 0.2rem",
|
||||||
|
color: "#111827",
|
||||||
|
textAlign: "center",
|
||||||
|
fontSize: "0.78rem",
|
||||||
|
fontWeight: 750,
|
||||||
|
letterSpacing: "0.06em",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{hero.caption}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stripSlide = (m, i) => (
|
||||||
|
<a
|
||||||
|
key={m.href || m.name}
|
||||||
|
href={m.href}
|
||||||
|
aria-hidden={i === active ? undefined : "true"}
|
||||||
|
tabIndex={i === active ? undefined : -1}
|
||||||
|
style={{
|
||||||
|
...slideStyle(i),
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.75rem",
|
||||||
|
color: "#ffffff",
|
||||||
|
textDecoration: "none",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
role="img"
|
||||||
|
aria-label={m.vendor || m.name}
|
||||||
|
style={{
|
||||||
|
flex: "0 0 auto",
|
||||||
|
width: "3.4rem",
|
||||||
|
aspectRatio: "16 / 9",
|
||||||
|
borderRadius: "0.35rem",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.22)",
|
||||||
|
backgroundColor: "#ffffff",
|
||||||
|
backgroundImage: `url('${m.logo}')`,
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundRepeat: "no-repeat",
|
||||||
|
backgroundSize: "cover",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<span style={{ flex: "1 1 auto", minWidth: 0 }}>
|
||||||
|
<span style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: "0.4rem" }}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontSize: "1.02rem",
|
||||||
|
fontWeight: 750,
|
||||||
|
letterSpacing: "-0.02em",
|
||||||
|
lineHeight: 1.2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{m.name}
|
||||||
|
</span>
|
||||||
|
{m.badge ? (
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
padding: "0.1rem 0.4rem",
|
||||||
|
borderRadius: "999px",
|
||||||
|
background: "rgba(255, 255, 255, 0.92)",
|
||||||
|
color: "#7c2d12",
|
||||||
|
fontSize: "0.6rem",
|
||||||
|
fontWeight: 800,
|
||||||
|
letterSpacing: "0.06em",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{m.badge}
|
||||||
|
</span>
|
||||||
|
) : null}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span style={{ display: "flex", flexWrap: "wrap", gap: "0.3rem", marginTop: "0.35rem" }}>
|
||||||
|
{(m.tags || []).map((t) => tagChip(t, false))}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
flex: "0 0 auto",
|
||||||
|
padding: "0.25rem 0.55rem",
|
||||||
|
borderRadius: "0.4rem",
|
||||||
|
background: "rgba(255, 255, 255, 0.92)",
|
||||||
|
color: "#7c2d12",
|
||||||
|
fontSize: "0.7rem",
|
||||||
|
fontWeight: 750,
|
||||||
|
whiteSpace: "nowrap",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Open →
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="not-prose">
|
||||||
|
<div
|
||||||
|
onMouseEnter={() => setPaused(true)}
|
||||||
|
onMouseLeave={() => setPaused(false)}
|
||||||
|
onFocus={() => setPaused(true)}
|
||||||
|
onBlur={() => setPaused(false)}
|
||||||
|
aria-roledescription="carousel"
|
||||||
|
aria-label={label}
|
||||||
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
overflow: "hidden",
|
||||||
|
margin: isHero ? "0 0 1.5rem" : "1.5rem 0",
|
||||||
|
padding: isHero ? "clamp(1.5rem, 4vw, 2.5rem)" : "0.8rem 1rem 0.9rem",
|
||||||
|
border: "1px solid rgba(251, 146, 60, 0.35)",
|
||||||
|
borderRadius: isHero ? "1rem" : "0.9rem",
|
||||||
|
background: "linear-gradient(135deg, #111827 0%, #31202f 58%, #9a3412 100%)",
|
||||||
|
boxShadow: isHero
|
||||||
|
? "0 20px 45px rgba(17, 24, 39, 0.18)"
|
||||||
|
: "0 14px 32px rgba(17, 24, 39, 0.16)",
|
||||||
|
color: "#ffffff",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
top: isHero ? "-7rem" : "-6rem",
|
||||||
|
right: isHero ? "-5rem" : "-4rem",
|
||||||
|
width: isHero ? "18rem" : "14rem",
|
||||||
|
height: isHero ? "18rem" : "14rem",
|
||||||
|
borderRadius: "999px",
|
||||||
|
background: "rgba(251, 146, 60, 0.18)",
|
||||||
|
filter: "blur(2px)",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Header line: label on the left, controls on the right. The hero's
|
||||||
|
label is the active entry's eyebrow, so it lives here rather than in
|
||||||
|
the slide — a floating control cluster would collide with a wide
|
||||||
|
eyebrow badge once the card narrows. */}
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "relative",
|
||||||
|
zIndex: 1,
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
gap: "0.75rem",
|
||||||
|
flexWrap: "wrap",
|
||||||
|
marginBottom: isHero ? "0.9rem" : "0.6rem",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={
|
||||||
|
isHero
|
||||||
|
? {
|
||||||
|
display: "inline-flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.45rem",
|
||||||
|
padding: "0.35rem 0.7rem",
|
||||||
|
border: "1px solid rgba(255, 255, 255, 0.28)",
|
||||||
|
borderRadius: "999px",
|
||||||
|
background: "rgba(255, 255, 255, 0.1)",
|
||||||
|
fontSize: "0.72rem",
|
||||||
|
fontWeight: 750,
|
||||||
|
letterSpacing: "0.08em",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
display: "inline-flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: "0.35rem",
|
||||||
|
color: "rgba(255, 255, 255, 0.78)",
|
||||||
|
fontSize: "0.66rem",
|
||||||
|
fontWeight: 750,
|
||||||
|
letterSpacing: "0.1em",
|
||||||
|
textTransform: "uppercase",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span aria-hidden="true">✦</span>
|
||||||
|
{isHero
|
||||||
|
? ((models[active] || {}).hero || {}).eyebrow || label
|
||||||
|
: label}
|
||||||
|
</span>
|
||||||
|
{controls}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style={{ position: "relative", zIndex: 1, overflow: "hidden" }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: isHero ? "stretch" : "center",
|
||||||
|
transform: `translateX(-${active * 100}%)`,
|
||||||
|
transition: reduceMotion ? "none" : "transform 0.45s ease",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{models.map((m, i) => (isHero ? heroSlide(m, i) : stripSlide(m, i)))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
// Single `export const popularModels` literal — no spreads/calls/IIFE (Mintlify
|
||||||
|
// re-evals at hydration).
|
||||||
|
//
|
||||||
|
// Rotated by <PopularModels> (/src/snippets/_popular_models.jsx) on the docs home
|
||||||
|
// (`variant="hero"`, uses each entry's `hero` block) and the Cookbook home
|
||||||
|
// (compact strip, uses `name` / `badge` / `tags`). Both walk this list in order,
|
||||||
|
// so an entry added here becomes a slide on both; an entry with no `hero` block
|
||||||
|
// still rotates on the home page, just without a blurb.
|
||||||
|
//
|
||||||
|
// Keep the copy to claims that hold on the linked page: platform counts from that
|
||||||
|
// model's config `supportedHardware`, precisions from its `quantizations`, blurbs
|
||||||
|
// paraphrasing that page's own opening.
|
||||||
|
|
||||||
|
export const popularModels = [
|
||||||
|
{
|
||||||
|
name: "Kimi-K3",
|
||||||
|
vendor: "Moonshot AI",
|
||||||
|
href: "/cookbook/autoregressive/Moonshotai/Kimi-K3",
|
||||||
|
logo: "/cards/logos/moonshotai.png",
|
||||||
|
badge: "New",
|
||||||
|
tags: ["8 platforms", "PD disagg", "DSPARK"],
|
||||||
|
hero: {
|
||||||
|
eyebrow: "Featured model · New",
|
||||||
|
headline: "Meet Kimi-K3 on SGLang",
|
||||||
|
blurb:
|
||||||
|
"SGLang natively implements and deeply optimizes K3's new architecture with fused KDA decode kernels, DP attention, MTP, PD disaggregation, and KDA-aware prefix caching. Kimi-K3 is supported on both NVIDIA and AMD GPUs.",
|
||||||
|
tags: ["2.8T parameters", "Fused KDA decode", "NVIDIA + AMD"],
|
||||||
|
cta: "Open the Kimi-K3 cookbook",
|
||||||
|
caption: "Kimi-K3 deployment guide",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Inkling",
|
||||||
|
vendor: "Thinking Machines",
|
||||||
|
href: "/cookbook/autoregressive/ThinkingMachines/Inkling",
|
||||||
|
logo: "/cards/logos/thinkingmachines.png",
|
||||||
|
badge: "New",
|
||||||
|
tags: ["7 platforms", "NVFP4 / BF16", "MTP + DSpark"],
|
||||||
|
hero: {
|
||||||
|
eyebrow: "Featured model · New",
|
||||||
|
headline: "Meet Inkling on SGLang",
|
||||||
|
blurb:
|
||||||
|
"Thinking Machines' open-weights Mixture-of-Experts model — 975B parameters, 41B active per token, a 1M-token context window, and native text, image, and audio input. The cookbook covers its MTP speculative-decoding path and long-context prefix caching on NVIDIA and AMD.",
|
||||||
|
tags: ["975B · 41B active", "1M context", "Text + image + audio"],
|
||||||
|
cta: "Open the Inkling cookbook",
|
||||||
|
caption: "Inkling deployment guide",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "GLM-5.2",
|
||||||
|
vendor: "Z.ai",
|
||||||
|
href: "/cookbook/autoregressive/GLM/GLM-5.2",
|
||||||
|
logo: "/cards/logos/glm.png",
|
||||||
|
badge: "New",
|
||||||
|
tags: ["7 platforms", "DSA attention", "FP8 / NVFP4"],
|
||||||
|
hero: {
|
||||||
|
eyebrow: "Featured model · New",
|
||||||
|
headline: "Meet GLM-5.2 on SGLang",
|
||||||
|
blurb:
|
||||||
|
"Z.ai's DeepSeek-Sparse-Attention Mixture-of-Experts model, with MTP speculative decoding and a 1M-token context window. Recipes cover FP8, BF16, and NVFP4 across H200, B200, B300, GB300, and AMD MI300X / MI325X / MI355X.",
|
||||||
|
tags: ["DSA attention", "1M context", "FP8 / BF16 / NVFP4"],
|
||||||
|
cta: "Open the GLM-5.2 cookbook",
|
||||||
|
caption: "GLM-5.2 deployment guide",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
Reference in New Issue
Block a user