diff --git a/astro.config.mjs b/astro.config.mjs index bd0af34..fd27190 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -21,6 +21,7 @@ export default defineConfig({ components: { Header: './src/components/Header.astro', PageTitle: './src/components/PageTitle.astro', + PageSidebar: './src/components/PageSidebar.astro', Footer: './src/components/Footer.astro', }, sidebar: [ diff --git a/public/diffusion-denoising.gif b/public/diffusion-denoising.gif new file mode 100644 index 0000000..0b37c6e Binary files /dev/null and b/public/diffusion-denoising.gif differ diff --git a/src/components/GenerationScalingChart.astro b/src/components/GenerationScalingChart.astro new file mode 100644 index 0000000..a6f77d1 --- /dev/null +++ b/src/components/GenerationScalingChart.astro @@ -0,0 +1,144 @@ +--- +type Point = { rate: number; throughput: number }; +type Panel = { + title: string; + xMax: number; + yMax: number; + xTicks: number[]; + yTicks: number[]; + fluxServe: Point[]; + sgLang: Point[]; +}; + +// Approximate values read from the supplied BigCodeBench plot. +const panels: Panel[] = [ + { + title: 'LLaDA2.0-mini', xMax: 400, yMax: 1400, + xTicks: [0, 100, 200, 300, 400], yTicks: [0, 400, 800, 1200], + fluxServe: [{ rate: 81, throughput: 1290 }, { rate: 114, throughput: 915 }, { rate: 165, throughput: 660 }, { rate: 231, throughput: 460 }, { rate: 350, throughput: 350 }], + sgLang: [{ rate: 55, throughput: 879 }, { rate: 82, throughput: 648 }, { rate: 135, throughput: 540 }, { rate: 214, throughput: 429 }, { rate: 371, throughput: 370 }], + }, + { + title: 'LLaDA2.1-mini', xMax: 820, yMax: 2700, + xTicks: [0, 200, 400, 600, 800], yTicks: [0, 500, 1000, 1500, 2000, 2500], + fluxServe: [{ rate: 160, throughput: 2550 }, { rate: 230, throughput: 1840 }, { rate: 340, throughput: 1360 }, { rate: 513, throughput: 1020 }, { rate: 780, throughput: 780 }], + sgLang: [{ rate: 86, throughput: 1383 }, { rate: 120, throughput: 955 }, { rate: 257, throughput: 1023 }, { rate: 444, throughput: 883 }, { rate: 773, throughput: 773 }], + }, + { + title: 'LLaDA2.0-flash', xMax: 260, yMax: 750, + xTicks: [0, 50, 100, 150, 200, 250], yTicks: [0, 150, 300, 450, 600, 750], + fluxServe: [{ rate: 45, throughput: 720 }, { rate: 61, throughput: 494 }, { rate: 86, throughput: 344 }, { rate: 124, throughput: 250 }, { rate: 199, throughput: 200 }], + sgLang: [{ rate: 33, throughput: 528 }, { rate: 49, throughput: 386 }, { rate: 77, throughput: 305 }, { rate: 116, throughput: 232 }, { rate: 244, throughput: 243 }], + }, + { + title: 'LLaDA2.1-flash', xMax: 520, yMax: 1300, + xTicks: [0, 100, 200, 300, 400, 500], yTicks: [0, 200, 400, 600, 800, 1000, 1200], + fluxServe: [{ rate: 78, throughput: 1247 }, { rate: 111, throughput: 891 }, { rate: 165, throughput: 662 }, { rate: 260, throughput: 518 }, { rate: 394, throughput: 394 }], + sgLang: [{ rate: 46, throughput: 782 }, { rate: 86, throughput: 701 }, { rate: 136, throughput: 554 }, { rate: 250, throughput: 500 }, { rate: 490, throughput: 490 }], + }, +]; + +const plotX = 66; +const plotY = 48; +const plotWidth = 454; +const plotHeight = 244; +const xy = (point: Point, panel: Panel) => ({ + x: plotX + point.rate / panel.xMax * plotWidth, + y: plotY + plotHeight - point.throughput / panel.yMax * plotHeight, +}); +const path = (points: Point[], panel: Panel) => points.map((point, index) => { + const { x, y } = xy(point, panel); + return `${index ? 'L' : 'M'}${x.toFixed(1)} ${y.toFixed(1)}`; +}).join(' '); +--- + +
+
+ + Performance Scaling + Four plots compare FluxServe and SGLang GPU throughput against user throughput for LLaDA 2.0 and 2.1 mini and flash models. + + + Performance scaling + + + + FluxServe + + + SGLang + + + {panels.map((panel, index) => { + const originX = 12 + index % 2 * 554; + const originY = 68 + Math.floor(index / 2) * 378; + return + {panel.title} + {panel.yTicks.map((tick) => { + const y = plotY + plotHeight - tick / panel.yMax * plotHeight; + return + + {tick} + ; + })} + {panel.xTicks.map((tick) => { + const x = plotX + tick / panel.xMax * plotWidth; + return + + {tick} + ; + })} + + + User Throughput (token/s) + GPU Throughput (token/s) + + + + {panel.fluxServe.map((point) => { + const { x, y } = xy(point, panel); + return + + FluxServe: {point.rate} user tokens/s, {point.throughput} GPU tokens/s + ; + })} + {panel.sgLang.map((point) => { + const { x, y } = xy(point, panel); + return + + SGLang: {point.rate} user tokens/s, {point.throughput} GPU tokens/s + ; + })} + ; + })} + +
+
Results are reported by sweeping cocurrency from 1 to 16 on BigCodeBench dataset.
+
+ + diff --git a/src/components/PageSidebar.astro b/src/components/PageSidebar.astro new file mode 100644 index 0000000..d386de8 --- /dev/null +++ b/src/components/PageSidebar.astro @@ -0,0 +1,8 @@ +--- +import DefaultPageSidebar from '@astrojs/starlight/components/PageSidebar.astro'; + +const toc = Astro.locals.starlightRoute.toc; +if (toc) toc.items = toc.items.flatMap((item) => item.slug === '_top' ? item.children : [item]); +--- + + diff --git a/src/components/SpeedBenchmarkChart.astro b/src/components/SpeedBenchmarkChart.astro index 24962b8..fe4cd7b 100644 --- a/src/components/SpeedBenchmarkChart.astro +++ b/src/components/SpeedBenchmarkChart.astro @@ -1,9 +1,9 @@ --- const results = [ - { model: 'LLaDA-2.0-mini', fluxServe: 1300, sgLang: 827 }, - { model: 'LLaDA-2.0-flash', fluxServe: 729, sgLang: 507 }, - { model: 'LLaDA-2.1-mini', fluxServe: 2451, sgLang: 1299 }, - { model: 'LLaDA-2.1-flash', fluxServe: 1279, sgLang: 805 }, + { model: 'LLaDA2.0-mini', fluxServe: 1300, sgLang: 827 }, + { model: 'LLaDA2.0-flash', fluxServe: 729, sgLang: 507 }, + { model: 'LLaDA2.1-mini', fluxServe: 2451, sgLang: 1299 }, + { model: 'LLaDA2.1-flash', fluxServe: 1279, sgLang: 805 }, ]; const baseline = 520; @@ -43,7 +43,7 @@ const barTop = (value: number) => baseline - value / maxValue * chartHeight; })} -
Mini models are run with TP=EP=1, and flash models are run with TP=EP=4 on 4 x NVIDIA GH200 GPUs.
+
Mini models are run with TP=EP=1, and flash models are run with TP=EP=4 on NVIDIA GH200 GPUs.
}

← All posts

@@ -38,4 +46,5 @@ const { Content, headings } = await render(post);