| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="description" content="Demo videos for Multi-Block Diffusion Language Models, generated by the Diffulex inference engine."> |
| <title>Demo Videos — Multi-Block Diffusion Language Models</title> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet"> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <nav class="nav" aria-label="Site navigation"> |
| <div class="container"> |
| <a class="nav-logo" href="https://sjtu-deng-lab.github.io/" aria-label="DENG Lab website"> |
| <img src="assets/sjtu-deng-lab-logo.png" alt="DENG Lab"> |
| </a> |
| <a href="index.html">Home</a> |
| <a href="videos.html" class="is-current">Videos</a> |
| <a href="mbd-lms.html">MBD-LMs</a> |
| <a href="diffulex.html">Diffulex Engine</a> |
| </div> |
| </nav> |
|
|
| <main class="container"> |
| <section id="videos" class="video-section"> |
| <div class="section-kicker video-kicker">Decoding Demo Videos</div> |
| <div class="video-section-head"> |
| <div> |
| <h2>LLaDA2 + MBD: Same Prompts, Massive Speedup</h2> |
| <p class="section-lede">Each group below runs the <strong>same set of prompts</strong> across three stages of the same LLaDA2 model: <strong>vanilla LLaDA2-Mini</strong> (native single-block decoding), <strong>MBD-LLaDA2-Mini</strong> (our MultiBD post-training), and <strong>MBD-LLaDA2-Mini-DMax</strong> (with aggressive DMax parallel decoding). The speed progression from left to right comes purely from our method — all demos run on a <strong>single NVIDIA A100-SXM4-80GB</strong> through the Diffulex engine. On newer hardware the gap widens further.</p> |
| </div> |
| <div class="video-head-actions"> |
| <button class="button video-action video-open" type="button" data-video="assets/videos/chosen.mp4" data-title="MBD-LLaDA2-Mini-DMax Demo">Watch Featured Demo</button> |
| <a class="button secondary" href="mbd-lms.html">How It Works</a> |
| </div> |
| </div> |
|
|
| <div class="video-feature"> |
| <div class="video-player"> |
| <video class="video-preview" muted loop controls preload="metadata" playsinline> |
| <source src="assets/videos/chosen.mp4" type="video/mp4"> |
| </video> |
| </div> |
| <div class="video-feature-copy"> |
| <span>Featured Diffulex trace</span> |
| <h3>MBD-LLaDA2-Mini-DMax Demo</h3> |
| <p>This selected trace uses <strong>MBD-LLaDA2-Mini-DMax</strong>, the fastest model we trained.</p> |
| <p class="video-note"><strong>Playback note.</strong> The demo videos pass through a Streamlit frontend, which can consume much of the engine-side throughput advantage. Use the aggregate TPS numbers in the Runtime Engine section to judge the actual engine path.</p> |
| <button class="button secondary video-open" type="button" data-video="assets/videos/chosen.mp4" data-title="MBD-LLaDA2-Mini-DMax Demo">Watch Full Size</button> |
| </div> |
| </div> |
|
|
| <div class="video-group"> |
| <div class="video-group-head"> |
| <h3>Vanilla LLaDA2-Mini</h3> |
| <p>Native single-block decoding baseline. Same prompts, sequential block refinement.</p> |
| </div> |
| <div class="video-grid"> |
| <button class="video-card video-open" type="button" data-video="assets/videos/llada2_mini_1.mp4" data-title="LLaDA2-Mini 1"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/llada2_mini_1.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">LLaDA2-Mini 1</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/llada2_mini_2.mp4" data-title="LLaDA2-Mini 2"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/llada2_mini_2.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">LLaDA2-Mini 2</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/llada2_mini_3.mp4" data-title="LLaDA2-Mini 3"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/llada2_mini_3.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">LLaDA2-Mini 3</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/llada2_mini_4.mp4" data-title="LLaDA2-Mini 4"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/llada2_mini_4.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">LLaDA2-Mini 4</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="video-group"> |
| <div class="video-group-head"> |
| <h3>MBD-LLaDA2-Mini</h3> |
| <p>Our MultiBD post-training applied to the same model. Inter-block parallelism via bounded running-set.</p> |
| </div> |
| <div class="video-grid"> |
| <button class="video-card video-open" type="button" data-video="assets/videos/mbd_llada2_1.mp4" data-title="MBD-LLaDA2 1"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/mbd_llada2_1.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">MBD-LLaDA2 1</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/mbd_llada2_2.mp4" data-title="MBD-LLaDA2 2"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/mbd_llada2_2.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">MBD-LLaDA2 2</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/mbd_llada2_3.mp4" data-title="MBD-LLaDA2 3"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/mbd_llada2_3.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">MBD-LLaDA2 3</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/mbd_llada2_4.mp4" data-title="MBD-LLaDA2 4"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/mbd_llada2_4.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">MBD-LLaDA2 4</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="video-group"> |
| <div class="video-group-head"> |
| <h3>MBD-LLaDA2-Mini-DMax</h3> |
| <p>MultiBD + DMax aggressive parallel decoding. Highest throughput, same model backbone.</p> |
| </div> |
| <div class="video-grid"> |
| <button class="video-card video-open" type="button" data-video="assets/videos/mbd_llada2_dmax_1.mp4" data-title="MBD-LLaDA2-DMax 1"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/mbd_llada2_dmax_1.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">MBD-LLaDA2-DMax 1</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/mbd_llada2_dmax_2.mp4" data-title="MBD-LLaDA2-DMax 2"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/mbd_llada2_dmax_2.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">MBD-LLaDA2-DMax 2</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/mbd_llada2_dmax_3.mp4" data-title="MBD-LLaDA2-DMax 3"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/mbd_llada2_dmax_3.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">MBD-LLaDA2-DMax 3</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/mbd_llada2_dmax_4.mp4" data-title="MBD-LLaDA2-DMax 4"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/mbd_llada2_dmax_4.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">MBD-LLaDA2-DMax 4</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="video-group"> |
| <div class="video-group-head"> |
| <h3>DiffusionGemma</h3> |
| <p>Same method applied to a second diffusion model family for cross-architecture comparison.</p> |
| </div> |
| <div class="video-grid three-up"> |
| <button class="video-card video-open" type="button" data-video="assets/videos/dgemma_1.mp4" data-title="DiffusionGemma 1"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/dgemma_1.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">DiffusionGemma 1</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/dgemma_2.mp4" data-title="DiffusionGemma 2"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/dgemma_2.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">DiffusionGemma 2</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| <button class="video-card video-open" type="button" data-video="assets/videos/dgemma_3.mp4" data-title="DiffusionGemma 3"> |
| <video class="video-preview" muted loop preload="metadata" playsinline> |
| <source src="assets/videos/dgemma_3.mp4" type="video/mp4"> |
| </video> |
| <span class="video-card-copy"> |
| <span class="video-card-title">DiffusionGemma 3</span> |
| <span>Click to watch</span> |
| </span> |
| </button> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| <div class="video-modal" id="video-modal" hidden> |
| <div class="video-modal-backdrop" data-video-close></div> |
| <div class="video-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="video-modal-title"> |
| <div class="video-modal-head"> |
| <h2 id="video-modal-title">Demo Video</h2> |
| <button type="button" class="video-modal-close" data-video-close aria-label="Close video">Close</button> |
| </div> |
| <video id="modal-video" controls playsinline> |
| <source id="modal-video-source" src="" type="video/mp4"> |
| </video> |
| </div> |
| </div> |
|
|
| <footer> |
| <div class="container"> |
| Multi-Block Diffusion Language Models. Train with <a href="https://github.com/SJTU-DENG-Lab/mbd-lms">mbd-lms</a>; reproduce with <a href="https://github.com/SJTU-DENG-Lab/Diffulex/tree/mbd-lms">Diffulex mbd-lms</a>; develop with <a href="https://github.com/SJTU-DENG-Lab/Diffulex/tree/main">Diffulex main</a>. |
| </div> |
| </footer> |
| <script> |
| (() => { |
| const modal = document.getElementById("video-modal"); |
| const modalVideo = document.getElementById("modal-video"); |
| const modalSource = document.getElementById("modal-video-source"); |
| const modalTitle = document.getElementById("video-modal-title"); |
| |
| const closeVideo = () => { |
| if (!modal || !modalVideo || !modalSource) return; |
| modal.hidden = true; |
| document.body.classList.remove("modal-open"); |
| modalVideo.pause(); |
| modalSource.removeAttribute("src"); |
| modalVideo.load(); |
| }; |
| |
| const openVideo = (trigger) => { |
| if (!modal || !modalVideo || !modalSource || !modalTitle) return; |
| const src = trigger.dataset.video; |
| if (!src) return; |
| modalTitle.textContent = trigger.dataset.title || "Demo Video"; |
| modalSource.src = src; |
| modal.hidden = false; |
| document.body.classList.add("modal-open"); |
| modalVideo.load(); |
| modalVideo.play().catch(() => {}); |
| }; |
| |
| document.querySelectorAll(".video-open").forEach((trigger) => { |
| trigger.addEventListener("click", () => openVideo(trigger)); |
| }); |
| |
| document.querySelectorAll("[data-video-close]").forEach((trigger) => { |
| trigger.addEventListener("click", closeVideo); |
| }); |
| |
| document.addEventListener("keydown", (event) => { |
| if (event.key === "Escape") closeVideo(); |
| }); |
| |
| document.querySelectorAll(".video-preview").forEach((video) => { |
| video.play().catch(() => {}); |
| }); |
| })(); |
| </script> |
| </body> |
| </html> |
|
|
