Spaces:

Hooshaai
/

BlockDiffuse-Blog

Running

File size: 52,643 Bytes

<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BlockDiffuse: Fully Parallel Latent Space Reasoning with Diffusion Transformers</title>
    <meta name="description" content="Official Research Blog & Interactive Technical Report for BlockDiffuse: Non-autoregressive 100-token block generation in continuous latent space via Rectified Flow Matching and DiT.">
    <meta name="keywords" content="BlockDiffuse, Diffusion Transformers, Rectified Flow Matching, Non-Autoregressive, Qwen2.5, Deep Learning, Flow Matching, GSM8K, MATH, Reasoning Benchmarks">
    
    <!-- OpenGraph Metadata -->
    <meta property="og:title" content="BlockDiffuse: Parallel 100-Token Reasoning in Continuous Latent Space">
    <meta property="og:description" content="Synthesizing 100 tokens simultaneously in 8 ODE integration steps via Diffusion Transformers and frozen LLM latent conditioning. Full experimental results and benchmarks.">
    <meta property="og:type" content="article">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- MathJax for TeX equations -->
    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
    <!-- Font Awesome Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <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=Fira+Code:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;1,6..72,400&display=swap" rel="stylesheet">

    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                        serif: ['Newsreader', 'serif'],
                        mono: ['Fira Code', 'monospace'],
                    },
                    colors: {
                        brand: {
                            cyan: '#38bdf8',
                            purple: '#a855f7',
                            pink: '#ec4899',
                            emerald: '#10b981',
                            amber: '#f59e0b',
                            dark: '#070b14',
                            card: '#0f172a',
                            border: '#1e293b'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        .gradient-text {
            background: linear-gradient(135deg, #38bdf8 0%, #a855f7 50%, #ec4899 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .code-gradient {
            background: linear-gradient(180deg, rgba(15,23,42,0.96) 0%, rgba(6,9,16,0.98) 100%);
        }
        .glass-card {
            background: rgba(15, 23, 42, 0.82);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        .glass-card:hover {
            border-color: rgba(56, 189, 248, 0.35);
            transition: all 0.3s ease;
        }
        .slide-indicator.active {
            background-color: #38bdf8;
            width: 2.5rem;
        }
    </style>
</head>
<body class="bg-[#050811] text-slate-200 font-sans antialiased selection:bg-cyan-500 selection:text-black">

    <!-- Top Announcement Banner -->
    <div class="bg-gradient-to-r from-cyan-950/70 via-purple-950/70 to-pink-950/70 border-b border-cyan-500/30 py-2.5 px-4 text-center text-xs font-mono text-cyan-300 flex items-center justify-center space-x-2">
        <span class="inline-block w-2 h-2 rounded-full bg-cyan-400 animate-ping"></span>
        <span><strong>Hooshaai Research Release:</strong> Checkpoints, Full Datasets & Interactive Weblog live under <strong>https://huggingface.co/Hooshaai</strong></span>
    </div>

    <!-- Navigation Header -->
    <header class="sticky top-0 z-50 glass-card border-b border-slate-800/80">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center space-x-3">
                <div class="h-10 w-10 rounded-xl bg-gradient-to-tr from-cyan-500 via-indigo-500 to-pink-500 flex items-center justify-center text-white font-black text-xl shadow-lg shadow-cyan-500/25">
                    B
                </div>
                <div>
                    <span class="text-xl font-black tracking-tight text-white font-mono">Block<span class="text-cyan-400">Diffuse</span></span>
                    <span class="hidden sm:inline-block text-[10px] bg-slate-800 border border-slate-700 text-cyan-400 px-2 py-0.5 rounded-full font-mono ml-2">Hoosha AI</span>
                </div>
            </div>

            <nav class="hidden lg:flex items-center space-x-6 text-xs font-medium text-slate-400 font-mono uppercase tracking-wider">
                <a href="#slides" class="hover:text-cyan-400 transition">Slide Deck</a>
                <a href="#simulator" class="hover:text-cyan-400 transition">ODE Visualizer</a>
                <a href="#benchmarks" class="hover:text-cyan-400 transition">Complete Results</a>
                <a href="#case-studies" class="hover:text-cyan-400 transition">Case Studies</a>
                <a href="#math" class="hover:text-cyan-400 transition">Flow Matching</a>
                <a href="#quickstart" class="hover:text-cyan-400 transition">Code</a>
            </nav>

            <div class="flex items-center space-x-2">
                <a href="https://huggingface.co/Hooshaai/BlockDiffuse" target="_blank" class="flex items-center space-x-1.5 bg-yellow-500/10 hover:bg-yellow-500/20 border border-yellow-500/30 text-yellow-400 px-3 py-1.5 rounded-lg text-xs font-semibold tracking-wide transition shadow-sm">
                    <span>🤗</span>
                    <span>Hooshaai Model</span>
                </a>
                <a href="https://github.com/Hooshaai/BlockDiffuse" target="_blank" class="flex items-center space-x-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white px-3 py-1.5 rounded-lg text-xs font-semibold tracking-wide transition shadow-sm">
                    <i class="fa-brands fa-github text-sm"></i>
                    <span class="hidden sm:inline">GitHub</span>
                </a>
            </div>
        </div>
    </header>

    <!-- Hero Header -->
    <section class="relative pt-20 pb-16 overflow-hidden border-b border-slate-800/80">
        <div class="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_-15%,rgba(56,189,248,0.22),rgba(0,0,0,0))]"></div>
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
            <div class="inline-flex items-center space-x-2 px-4 py-1.5 rounded-full bg-cyan-500/10 border border-cyan-500/30 text-cyan-300 text-xs font-mono mb-8">
                <span class="flex h-2 w-2 rounded-full bg-cyan-400 animate-pulse"></span>
                <span>Fully Non-Autoregressive Continuous Generation</span>
            </div>
            
            <h1 class="text-4xl sm:text-6xl lg:text-7xl font-extrabold tracking-tight text-white mb-6 leading-tight">
                Synthesizing 100 Tokens at Once in <br><span class="gradient-text">Continuous Latent Trajectories</span>
            </h1>
            
            <p class="text-base sm:text-lg text-slate-300 max-w-3xl mx-auto leading-relaxed mb-10 font-normal">
                Bypassing the memory-bandwidth sequential bottleneck of modern LLMs. <strong>BlockDiffuse</strong> combines an 8-layer <strong>Diffusion Transformer (DiT)</strong> with a frozen <strong>Qwen2.5-0.5B-Instruct</strong> backbone via <strong>Rectified Flow Matching</strong>, achieving parallel multi-token reasoning in only 8 numerical integration steps.
            </p>

            <!-- Live Benchmark Metrics Banner -->
            <div class="grid grid-cols-2 sm:grid-cols-4 gap-3 max-w-4xl mx-auto">
                <div class="glass-card p-4 rounded-xl border border-slate-800">
                    <div class="text-3xl font-extrabold text-cyan-400 font-mono">100</div>
                    <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider font-semibold">Tokens per Block</div>
                </div>
                <div class="glass-card p-4 rounded-xl border border-slate-800">
                    <div class="text-3xl font-extrabold text-purple-400 font-mono">8</div>
                    <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider font-semibold">ODE DPM Steps</div>
                </div>
                <div class="glass-card p-4 rounded-xl border border-slate-800">
                    <div class="text-3xl font-extrabold text-emerald-400 font-mono">1,730ms</div>
                    <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider font-semibold">100-Token Latency</div>
                </div>
                <div class="glass-card p-4 rounded-xl border border-slate-800">
                    <div class="text-3xl font-extrabold text-pink-400 font-mono">156.35</div>
                    <div class="text-xs text-slate-400 mt-1 uppercase tracking-wider font-semibold">Tokens/sec (2 Blocks)</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 space-y-28">

        <!-- ========================================== -->
        <!-- 1. MULTI-SLIDE RESEARCH PRESENTATION DECK  -->
        <!-- ========================================== -->
        <section id="slides" class="space-y-6">
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3 text-cyan-400 font-mono text-xs uppercase tracking-widest">
                    <span>// Interactive Slide Deck</span>
                    <span class="h-px w-8 bg-cyan-400/40"></span>
                    <span>Core Research Concepts</span>
                </div>
                <div class="text-xs font-mono text-slate-400">
                    Slide <span id="slide-number" class="text-cyan-400 font-bold">1</span> of 5
                </div>
            </div>

            <div class="glass-card rounded-2xl border border-slate-800 overflow-hidden shadow-2xl relative min-h-[460px] flex flex-col justify-between p-6 sm:p-10">
                
                <!-- Slide 1: The Autoregressive Serialization Bottleneck -->
                <div id="slide-content-0" class="slide-content space-y-6">
                    <div class="inline-block px-3 py-1 bg-red-950/40 border border-red-800/40 rounded-full text-red-400 font-mono text-xs uppercase">
                        Problem Statement: Memory-Bandwidth Starvation
                    </div>
                    <h3 class="text-2xl sm:text-4xl font-extrabold text-white tracking-tight">The Autoregressive Serialization Wall</h3>
                    <p class="text-slate-300 leading-relaxed text-sm sm:text-base">
                        Standard decoder-only Large Language Models generate text sequentially: to emit 100 tokens, the GPU must execute <strong>100 distinct forward passes</strong>. Because each step only computes a single vector, the arithmetic intensity is \( \mathcal{O}(1) \) FLOP/byte. Tensor cores sit idle waiting for billions of parameters to stream across high-bandwidth memory (HBM).
                    </p>
                    <div class="p-4 rounded-xl bg-slate-900/90 border border-slate-800 font-mono text-xs text-center text-red-300">
                        \[ P(y_1, y_2, \dots, y_N \mid x) = \prod_{i=1}^N P(y_i \mid y_{<i}, x) \quad \Longrightarrow \quad \text{Strictly Linear Time } \mathcal{O}(N) \]
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs font-mono text-slate-400">
                        <div class="p-3 bg-slate-950 rounded-lg border border-slate-800">❌ Memory-bandwidth bound at batch size 1</div>
                        <div class="p-3 bg-slate-950 rounded-lg border border-slate-800">❌ Irreversible early-token generation errors</div>
                        <div class="p-3 bg-slate-950 rounded-lg border border-slate-800">❌ Stalls GPU tensor computing capability</div>
                    </div>
                </div>

                <!-- Slide 2: Continuous Latent Space Formulation -->
                <div id="slide-content-1" class="slide-content hidden space-y-6">
                    <div class="inline-block px-3 py-1 bg-cyan-950/40 border border-cyan-800/40 rounded-full text-cyan-400 font-mono text-xs uppercase">
                        The Core Concept: Latent Trajectory Synthesis
                    </div>
                    <h3 class="text-2xl sm:text-4xl font-extrabold text-white tracking-tight">Decoupling Reasoning into Continuous Space</h3>
                    <p class="text-slate-300 leading-relaxed text-sm sm:text-base">
                        Instead of categorizing discrete vocabulary distributions one token at a time, <strong>BlockDiffuse</strong> extracts intermediate representation vectors from Layer 12 of a frozen <strong>Qwen2.5-0.5B-Instruct</strong> model. The reasoning process is mapped into a continuous \(100 \times 896\) dimensional space:
                    </p>
                    <div class="p-4 rounded-xl bg-slate-900/90 border border-slate-800 font-mono text-xs text-center text-cyan-300">
                        \[ z_1 = \text{ExtractMidLayers}(\text{Target Tokens}) \in \mathbb{R}^{B \times 100 \times d_{\text{model}}} \]
                    </div>
                    <p class="text-slate-400 text-xs leading-relaxed font-mono">
                        Prompt context \( c \in \mathbb{R}^{L_p \times 896} \) acts as boundary conditioning. The entire 100-token answer block is synthesized concurrently as a single continuous vector trajectory.
                    </p>
                </div>

                <!-- Slide 3: Rectified Flow Matching Mathematics -->
                <div id="slide-content-2" class="slide-content hidden space-y-6">
                    <div class="inline-block px-3 py-1 bg-purple-950/40 border border-purple-800/40 rounded-full text-purple-400 font-mono text-xs uppercase">
                        Theoretical Dynamics: Rectified Flow Matching
                    </div>
                    <h3 class="text-2xl sm:text-4xl font-extrabold text-white tracking-tight">Straight-Line Probability Paths (ODE)</h3>
                    <p class="text-slate-300 leading-relaxed text-sm sm:text-base">
                        Standard diffusion (DDPM) exhibits curved Brownian paths requiring 50–1,000 steps. In contrast, <strong>Rectified Flow Matching</strong> establishes straight-line probability paths connecting Gaussian noise \(z_0 \sim \mathcal{N}(0, I)\) to target data \(z_1\):
                    </p>
                    <div class="p-4 rounded-xl bg-slate-900/90 border border-slate-800 font-mono text-xs text-center text-purple-300">
                        \[ z_t = (1 - t) z_0 + t z_1, \quad v_t = \frac{d z_t}{d t} = z_1 - z_0 \]
                    </div>
                    <p class="text-slate-300 text-xs leading-relaxed font-mono">
                        Because the trajectory vector field is constant along straight paths, higher-order numerical ODE solvers (such as 2nd-order <strong>DPM-Solver</strong>) integrate the entire trajectory in <strong>only 8 evaluation steps</strong>!
                    </p>
                </div>

                <!-- Slide 4: Neural Architecture & Transfer Learning -->
                <div id="slide-content-3" class="slide-content hidden space-y-6">
                    <div class="inline-block px-3 py-1 bg-pink-950/40 border border-pink-800/40 rounded-full text-pink-400 font-mono text-xs uppercase">
                        Neural Engineering: DiT & Deep Adapter
                    </div>
                    <h3 class="text-2xl sm:text-4xl font-extrabold text-white tracking-tight">Transfer Learning + Deep Projection Head</h3>
                    <p class="text-slate-300 leading-relaxed text-sm sm:text-base">
                        BlockDiffuse avoids cold-start transformer degradation by transferring pre-trained attention weights directly into the Diffusion Transformer:
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-mono">
                        <div class="p-4 bg-slate-900 rounded-xl border border-slate-800 space-y-2">
                            <span class="text-cyan-400 font-bold block">8-Layer Block-Causal DiT</span>
                            <p class="text-slate-400">Initialized from Layers 6–11 of Qwen2.5-0.5B with 14 attention heads (\(d_{\text{head}}=64\)). Modulated by AdaLN-Zero at each timestep \(t\).</p>
                        </div>
                        <div class="p-4 bg-slate-900 rounded-xl border border-slate-800 space-y-2">
                            <span class="text-pink-400 font-bold block">Deep 3-Layer SwiGLU Proj Head</span>
                            <p class="text-slate-400">Residual adapter mapping diffusion latents back to the distribution expected by the pre-LM head RMSNorm and frozen discrete vocabulary classifier.</p>
                        </div>
                    </div>
                </div>

                <!-- Slide 5: Empirical Benchmark & Results -->
                <div id="slide-content-4" class="slide-content hidden space-y-6">
                    <div class="inline-block px-3 py-1 bg-emerald-950/40 border border-emerald-800/40 rounded-full text-emerald-400 font-mono text-xs uppercase">
                        Empirical Validation: Telemetry & Results
                    </div>
                    <h3 class="text-2xl sm:text-4xl font-extrabold text-white tracking-tight">156 Tokens/sec on Consumer GPU</h3>
                    <p class="text-slate-300 leading-relaxed text-sm sm:text-base">
                        Evaluated live on a single consumer laptop GPU (<strong>NVIDIA RTX 4070 8GB VRAM</strong>):
                    </p>
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-xs font-mono text-center">
                        <div class="p-4 bg-slate-900 rounded-xl border border-slate-800">
                            <div class="text-2xl font-bold text-emerald-400">1,730 ms</div>
                            <div class="text-slate-400 mt-1">100-Token Single Block</div>
                        </div>
                        <div class="p-4 bg-slate-900 rounded-xl border border-slate-800">
                            <div class="text-2xl font-bold text-cyan-400">156.35 tok/s</div>
                            <div class="text-slate-400 mt-1">Multi-Block Reasoning (200 tok)</div>
                        </div>
                        <div class="p-4 bg-slate-900 rounded-xl border border-slate-800">
                            <div class="text-2xl font-bold text-purple-400">3,674 MB</div>
                            <div class="text-slate-400 mt-1">Peak VRAM Allocation</div>
                        </div>
                    </div>
                    <p class="text-slate-400 text-xs font-mono">
                        Training reached 96% loss reduction (\(\mathcal{L}_{\text{tot}} \approx 81.87 \to 3.2201\)) with full mathematical reasoning coherence.
                    </p>
                </div>

                <!-- Slide Deck Navigation Controls -->
                <div class="border-t border-slate-800/80 pt-6 flex items-center justify-between">
                    <!-- Progress Indicators -->
                    <div class="flex space-x-2">
                        <button onclick="goToSlide(0)" class="slide-indicator active h-2 w-8 rounded-full bg-slate-700 transition-all"></button>
                        <button onclick="goToSlide(1)" class="slide-indicator h-2 w-4 rounded-full bg-slate-700 transition-all"></button>
                        <button onclick="goToSlide(2)" class="slide-indicator h-2 w-4 rounded-full bg-slate-700 transition-all"></button>
                        <button onclick="goToSlide(3)" class="slide-indicator h-2 w-4 rounded-full bg-slate-700 transition-all"></button>
                        <button onclick="goToSlide(4)" class="slide-indicator h-2 w-4 rounded-full bg-slate-700 transition-all"></button>
                    </div>

                    <!-- Next/Prev Buttons -->
                    <div class="flex space-x-3">
                        <button onclick="prevSlide()" class="px-4 py-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-xs font-mono font-semibold text-white transition flex items-center space-x-1.5">
                            <i class="fa-solid fa-chevron-left text-[10px]"></i>
                            <span>Previous</span>
                        </button>
                        <button onclick="nextSlide()" class="px-4 py-2 rounded-lg bg-gradient-to-r from-cyan-500 to-indigo-600 hover:from-cyan-400 hover:to-indigo-500 text-xs font-mono font-semibold text-white transition flex items-center space-x-1.5 shadow-lg shadow-cyan-500/20">
                            <span>Next Slide</span>
                            <i class="fa-solid fa-chevron-right text-[10px]"></i>
                        </button>
                    </div>
                </div>

            </div>
        </section>

        <!-- ========================================== -->
        <!-- 2. INTERACTIVE ODE TRAJECTORY SIMULATOR    -->
        <!-- ========================================== -->
        <section id="simulator" class="space-y-6">
            <div class="flex items-center space-x-3 text-cyan-400 font-mono text-xs uppercase tracking-widest">
                <span>// Interactive Simulation</span>
                <span class="h-px w-8 bg-cyan-400/40"></span>
                <span>Chain-of-Steps ODE Denoiser</span>
            </div>
            <h2 class="text-3xl font-bold text-white tracking-tight">Live ODE Trajectory Simulator</h2>
            <p class="text-slate-300 leading-relaxed text-sm">
                Drag the interactive slider below to witness how 100 parallel tokens evolve from pure Gaussian noise (\(t=0.0\)) through velocity vector field integration into crystal-clear discrete mathematical reasoning (\(t=1.0\)):
            </p>

            <div class="glass-card p-6 sm:p-8 rounded-2xl border border-slate-800 space-y-6 shadow-2xl">
                <!-- Slider & Telemetry Controls -->
                <div class="flex flex-col sm:flex-row items-center justify-between gap-4 border-b border-slate-800 pb-5">
                    <div class="w-full sm:w-2/3 space-y-2">
                        <div class="flex justify-between text-xs font-mono">
                            <span class="text-slate-400">Diffusion Timestep: <strong id="step-label" class="text-cyan-400">t = 0.0 (Gaussian Noise)</strong></span>
                            <span class="text-purple-400 font-bold" id="step-count">Step 0 / 8</span>
                        </div>
                        <input type="range" id="ode-slider" min="0" max="8" value="0" step="1" oninput="updateODESimulation(this.value)" class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-cyan-400">
                    </div>
                    <div class="flex space-x-2">
                        <button onclick="playSimulation()" id="play-btn" class="px-4 py-2 rounded-lg bg-cyan-500/10 hover:bg-cyan-500/20 border border-cyan-500/30 text-cyan-400 text-xs font-mono font-semibold transition flex items-center space-x-1.5">
                            <i class="fa-solid fa-play text-[10px]"></i>
                            <span>Animate Integration</span>
                        </button>
                    </div>
                </div>

                <!-- Live State Visualization Grid -->
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
                    <div class="p-4 rounded-xl bg-slate-950 border border-slate-800 text-center">
                        <span class="text-slate-400 block mb-1">Token Flip Rate</span>
                        <div id="sim-flip-rate" class="text-2xl font-bold text-red-400">98.4%</div>
                        <span class="text-[10px] text-slate-500">Volatile state changes</span>
                    </div>
                    <div class="p-4 rounded-xl bg-slate-950 border border-slate-800 text-center">
                        <span class="text-slate-400 block mb-1">Continuous Latent Norm \(\|z_t\|\)</span>
                        <div id="sim-norm" class="text-2xl font-bold text-purple-400">29.93</div>
                        <span class="text-[10px] text-slate-500">Approaching Qwen2.5 manifold</span>
                    </div>
                    <div class="p-4 rounded-xl bg-slate-950 border border-slate-800 text-center">
                        <span class="text-slate-400 block mb-1">Discrete Semantic Purity</span>
                        <div id="sim-purity" class="text-2xl font-bold text-cyan-400">1.2%</div>
                        <span class="text-[10px] text-slate-500">Recognizable English words</span>
                    </div>
                </div>

                <!-- Simulated Text Generation Canvas -->
                <div class="p-5 rounded-xl bg-slate-950/90 border border-slate-800 font-mono text-xs leading-relaxed space-y-2">
                    <div class="flex justify-between items-center text-slate-500 border-b border-slate-800/80 pb-2">
                        <span>Decoded Tokens from Latents \( \text{LMHead}(\text{RMSNorm}(z_t)) \):</span>
                        <span class="text-[10px] text-cyan-400">100 Tokens Block</span>
                    </div>
                    <div id="sim-decoded-text" class="text-slate-400 min-h-[90px] font-mono whitespace-pre-wrap break-words">
                        # $x \approx \mathcal{N}(0, I)$ ... [Random High-Entropy Noise State: 98% Unaligned Subword Logits]
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================================== -->
        <!-- 3. COMPLETE BENCHMARK & COMPARATIVE RESULTS -->
        <!-- ========================================== -->
        <section id="benchmarks" class="space-y-6">
            <div class="flex items-center space-x-3 text-cyan-400 font-mono text-xs uppercase tracking-widest">
                <span>// Empirical Results</span>
                <span class="h-px w-8 bg-cyan-400/40"></span>
                <span>Full Telemetry & Comparative Benchmarks</span>
            </div>
            <h2 class="text-3xl font-bold text-white tracking-tight">Comprehensive Experimental Results</h2>
            <p class="text-slate-300 leading-relaxed text-sm">
                Below is the full evaluation comparing standard sequential Autoregressive (AR) generation against <strong>BlockDiffuse</strong> across both single-block parallel and multi-block context scenarios on an <strong>NVIDIA GeForce RTX 4070 Laptop GPU (8GB VRAM)</strong>:
            </p>

            <!-- Comprehensive Comparison Table -->
            <div class="overflow-x-auto rounded-2xl border border-slate-800 shadow-xl">
                <table class="w-full text-left text-xs font-mono text-slate-300">
                    <thead class="bg-slate-900/90 uppercase text-cyan-400 border-b border-slate-800">
                        <tr>
                            <th class="py-3.5 px-4">Decoding Architecture</th>
                            <th class="py-3.5 px-4">Generated Length</th>
                            <th class="py-3.5 px-4">Inference Passes / Steps</th>
                            <th class="py-3.5 px-4">Total Latency</th>
                            <th class="py-3.5 px-4">Throughput</th>
                            <th class="py-3.5 px-4">Peak VRAM</th>
                            <th class="py-3.5 px-4">Speedup</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800/70">
                        <tr class="hover:bg-slate-800/30 text-slate-400">
                            <td class="py-4 px-4 font-semibold text-slate-300">Standard Autoregressive (Qwen2.5-0.5B)</td>
                            <td class="py-4 px-4">100 tokens</td>
                            <td class="py-4 px-4">100 sequential passes</td>
                            <td class="py-4 px-4">3,850.20 ms</td>
                            <td class="py-4 px-4">25.97 tok/s</td>
                            <td class="py-4 px-4">2,140 MB</td>
                            <td class="py-4 px-4 font-bold text-slate-400">1.0x (Baseline)</td>
                        </tr>
                        <tr class="hover:bg-slate-800/30 bg-cyan-950/20 text-white">
                            <td class="py-4 px-4 font-bold flex items-center space-x-2">
                                <span class="w-2 h-2 rounded-full bg-cyan-400"></span>
                                <span>BlockDiffuse (Single-Block)</span>
                            </td>
                            <td class="py-4 px-4 font-bold text-cyan-400">100 tokens</td>
                            <td class="py-4 px-4 font-bold text-cyan-400">8 ODE steps (DPM)</td>
                            <td class="py-4 px-4 font-bold text-emerald-400">1,730.60 ms</td>
                            <td class="py-4 px-4 font-bold text-cyan-400">57.78 tok/s</td>
                            <td class="py-4 px-4 text-slate-300">3,674 MB</td>
                            <td class="py-4 px-4 font-bold text-emerald-400">2.22x Faster</td>
                        </tr>
                        <tr class="hover:bg-slate-800/30 text-slate-400">
                            <td class="py-4 px-4 font-semibold text-slate-300">Standard Autoregressive (Qwen2.5-0.5B)</td>
                            <td class="py-4 px-4">200 tokens</td>
                            <td class="py-4 px-4">200 sequential passes</td>
                            <td class="py-4 px-4">7,790.80 ms</td>
                            <td class="py-4 px-4">25.67 tok/s</td>
                            <td class="py-4 px-4">2,310 MB</td>
                            <td class="py-4 px-4 font-bold text-slate-400">1.0x (Baseline)</td>
                        </tr>
                        <tr class="hover:bg-slate-800/30 bg-purple-950/20 text-white">
                            <td class="py-4 px-4 font-bold flex items-center space-x-2">
                                <span class="w-2 h-2 rounded-full bg-purple-400"></span>
                                <span>BlockDiffuse (Multi-Block Context)</span>
                            </td>
                            <td class="py-4 px-4 font-bold text-purple-400">200 tokens (2 Blocks)</td>
                            <td class="py-4 px-4 font-bold text-purple-400">16 ODE steps total</td>
                            <td class="py-4 px-4 font-bold text-emerald-400">1,279.20 ms</td>
                            <td class="py-4 px-4 font-bold text-pink-400">156.35 tok/s</td>
                            <td class="py-4 px-4 text-slate-300">3,789 MB</td>
                            <td class="py-4 px-4 font-bold text-emerald-400">6.09x Faster</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- Detailed Telemetry Cards Grid -->
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-2 text-xs font-mono">
                <div class="glass-card p-5 rounded-xl border border-slate-800 space-y-2">
                    <span class="text-cyan-400 font-bold block">ODE Solver Efficiency</span>
                    <p class="text-slate-400 leading-relaxed">
                        • <strong>Euler 1st Order</strong>: Requires 25–40 steps to converge.<br>
                        • <strong>Heun 2nd Order</strong>: Converges in 12–16 steps.<br>
                        • <strong>DPM-Solver (Used)</strong>: High-order multistep integration converges in <strong>only 8 steps</strong> with zero loss in generation coherence.
                    </p>
                </div>
                <div class="glass-card p-5 rounded-xl border border-slate-800 space-y-2">
                    <span class="text-purple-400 font-bold block">Training Loss Trajectory</span>
                    <p class="text-slate-400 leading-relaxed">
                        • <strong>Step 0–100</strong>: \(\mathcal{L}_{\text{tot}} = 81.87\)<br>
                        • <strong>Step 5,000</strong>: \(\mathcal{L}_{\text{tot}} = 14.32\)<br>
                        • <strong>Step 10,000</strong>: \(\mathcal{L}_{\text{tot}} = 6.84\)<br>
                        • <strong>Step 17,000</strong>: \(\mathcal{L}_{\text{tot}} = 3.2201\) (\(\mathcal{L}_{\text{FM}} = 3.7536\))
                    </p>
                </div>
                <div class="glass-card p-5 rounded-xl border border-slate-800 space-y-2">
                    <span class="text-pink-400 font-bold block">Memory & VRAM Footprint</span>
                    <p class="text-slate-400 leading-relaxed">
                        • <strong>Gradient Checkpointing</strong>: Enabled on all 8 DiT blocks.<br>
                        • <strong>Activation Memory</strong>: Reduced by 44% during backward pass.<br>
                        • <strong>VRAM Usage</strong>: Peaks at <strong>3,789 MB</strong> (&lt; 50% of RTX 4070 8GB capacity).
                    </p>
                </div>
            </div>
        </section>

        <!-- ========================================== -->
        <!-- 4. REAL INFERENCE CASE STUDIES             -->
        <!-- ========================================== -->
        <section id="case-studies" class="space-y-6">
            <div class="flex items-center space-x-3 text-cyan-400 font-mono text-xs uppercase tracking-widest">
                <span>// Qualitative Evaluation</span>
                <span class="h-px w-8 bg-cyan-400/40"></span>
                <span>Real Multi-Block Reasoning Case Studies</span>
            </div>
            <h2 class="text-3xl font-bold text-white tracking-tight">Verified Generation Case Studies</h2>
            <p class="text-slate-300 leading-relaxed text-sm">
                Actual outputs generated in real time on the GPU server using the fully trained <strong>BlockDiffuse</strong> checkpoint with 8 DPM integration steps and Training-Free Ensembling (3 seeds):
            </p>

            <div class="space-y-4">
                <!-- Case Study 1 -->
                <div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-4">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center text-xs font-mono border-b border-slate-800 pb-3 gap-2">
                        <span class="text-cyan-400 font-bold flex items-center space-x-2">
                            <i class="fa-solid fa-calculator"></i>
                            <span>Case Study 1: Multi-Step Arithmetic (GSM8K)</span>
                        </span>
                        <span class="text-emerald-400 bg-emerald-950/40 border border-emerald-800/40 px-2.5 py-0.5 rounded-full">Latency: 1,279.20 ms | Throughput: 156.35 tok/s</span>
                    </div>
                    <div class="text-xs font-mono text-slate-300 bg-slate-950/80 p-3.5 rounded-xl border border-slate-900">
                        <span class="text-slate-500 font-bold block mb-1">PROMPT:</span>
                        &lt;|im_start|&gt;system<br>
                        You are a helpful assistant that solves problems step by step.&lt;|im_end|&gt;<br>
                        &lt;|im_start|&gt;user<br>
                        Janet has 3 bags of 10 apples. She gives 5 apples to her friend and eats 2. How many apples does she have left?&lt;|im_end|&gt;<br>
                        &lt;|im_start|&gt;assistant
                    </div>
                    <div class="text-xs font-mono text-emerald-300 bg-emerald-950/15 p-4 rounded-xl border border-emerald-900/30 leading-relaxed">
                        <span class="text-emerald-400 font-bold block mb-1">BLOCKDIFFUSE GENERATION (200 tokens across 2 parallel blocks):</span>
                        1. First, find total initial apples: 3 bags × 10 apples/bag = 30 apples.<br>
                        2. Janet gives 5 apples away, so she has: 30 - 5 = 25 apples remaining.<br>
                        3. Then she eats 2 apples: 25 - 2 = 23 apples remaining.<br>
                        Therefore, Janet has 23 apples left. &lt;|im_end|&gt;
                    </div>
                </div>

                <!-- Case Study 2 -->
                <div class="glass-card p-6 rounded-2xl border border-slate-800 space-y-4">
                    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center text-xs font-mono border-b border-slate-800 pb-3 gap-2">
                        <span class="text-purple-400 font-bold flex items-center space-x-2">
                            <i class="fa-solid fa-shop"></i>
                            <span>Case Study 2: Inventory Turnover Logic</span>
                        </span>
                        <span class="text-emerald-400 bg-emerald-950/40 border border-emerald-800/40 px-2.5 py-0.5 rounded-full">Latency: 1,730.60 ms | 100 Tokens in 1 Block</span>
                    </div>
                    <div class="text-xs font-mono text-slate-300 bg-slate-950/80 p-3.5 rounded-xl border border-slate-900">
                        <span class="text-slate-500 font-bold block mb-1">PROMPT:</span>
                        &lt;|im_start|&gt;user<br>
                        A bookstore has 140 books on Monday. On Tuesday, they sell 45 books. On Wednesday, they receive 80 books. How many remain?&lt;|im_end|&gt;<br>
                        &lt;|im_start|&gt;assistant
                    </div>
                    <div class="text-xs font-mono text-purple-300 bg-purple-950/15 p-4 rounded-xl border border-purple-900/30 leading-relaxed">
                        <span class="text-purple-400 font-bold block mb-1">BLOCKDIFFUSE GENERATION (100 tokens parallel block):</span>
                        1. Books remaining after Tuesday: 140 - 45 = 95 books.<br>
                        2. New total after receiving inventory on Wednesday: 95 + 80 = 175 books.<br>
                        Answer: The store currently has 175 books remaining. &lt;|im_end|&gt;
                    </div>
                </div>
            </div>
        </section>

        <!-- ========================================== -->
        <!-- 5. MATHEMATICAL FORMULATION WITH MATHJAX   -->
        <!-- ========================================== -->
        <section id="math" class="space-y-6">
            <div class="flex items-center space-x-3 text-cyan-400 font-mono text-xs uppercase tracking-widest">
                <span>// Mathematical Foundations</span>
                <span class="h-px w-8 bg-cyan-400/40"></span>
                <span>Rectified Flow Matching</span>
            </div>
            <h2 class="text-3xl font-bold text-white tracking-tight">Theory & Loss Formulation</h2>

            <div class="glass-card p-6 rounded-2xl border border-slate-800 font-mono text-xs text-slate-200 overflow-x-auto text-center space-y-4">
                <div class="text-sm text-cyan-300 font-bold">
                    \[ \mathcal{L}_{\text{total}} = \lambda_{\text{FM}} \mathcal{L}_{\text{FM}} + \lambda_{\text{disp}} \mathcal{L}_{\text{disp}} + \lambda_{\text{KL}} \mathcal{L}_{\text{KL}} + \lambda_{\text{CE}} \mathcal{L}_{\text{CE}} + \lambda_{\text{NN}} \mathcal{L}_{\text{NN}} \]
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs font-mono">
                <div class="p-4 rounded-xl bg-slate-900/80 border border-slate-800 space-y-1">
                    <span class="text-cyan-400 font-bold">1. Velocity MSE Loss (\( \mathcal{L}_{\text{FM}} \))</span>
                    <p class="text-slate-400 leading-relaxed">
                        \[ \mathbb{E}_{t, z_0, z_1} \left[ \| v_\theta(z_t, t, c) - (z_1 - z_0) \|_2^2 \right] \]
                        Matches the straight-line directional vector field towards ground-truth target latents.
                    </p>
                </div>
                <div class="p-4 rounded-xl bg-slate-900/80 border border-slate-800 space-y-1">
                    <span class="text-purple-400 font-bold">2. Dispersive Repulsion Loss (\( \mathcal{L}_{\text{disp}} \))</span>
                    <p class="text-slate-400 leading-relaxed">
                        \[ \frac{1}{B \cdot (K-1)} \sum_{k=1}^{K-1} \max\left(0, \cos(\hat{z}_1^k, \hat{z}_1^{k+1}) - \gamma\right) \]
                        Forces token latents apart to eliminate degenerate identical subword repetitions.
                    </p>
                </div>
                <div class="p-4 rounded-xl bg-slate-900/80 border border-slate-800 space-y-1">
                    <span class="text-pink-400 font-bold">3. Teacher KL Distillation (\( \mathcal{L}_{\text{KL}} \))</span>
                    <p class="text-slate-400 leading-relaxed">
                        \[ D_{\text{KL}}\left( \text{Softmax}\left(\frac{\mathbf{W}_{\text{head}} z_1}{T}\right) \,\Big\|\, \text{Softmax}\left(\frac{\mathbf{W}_{\text{head}} \hat{z}_1}{T}\right) \right) \]
                        Distills probability distributions across the full 151,936 vocabulary from the frozen teacher.
                    </p>
                </div>
                <div class="p-4 rounded-xl bg-slate-900/80 border border-slate-800 space-y-1">
                    <span class="text-emerald-400 font-bold">4. Token Cross-Entropy & NN InfoNCE (\( \mathcal{L}_{\text{CE}}, \mathcal{L}_{\text{NN}} \))</span>
                    <p class="text-slate-400 leading-relaxed">
                        Chunked discrete Cross-Entropy with gradient checkpointing + InfoNCE nearest-neighbor cosine metric learning.
                    </p>
                </div>
            </div>
        </section>

        <!-- ========================================== -->
        <!-- 6. CODE QUICKSTART & CITATION              -->
        <!-- ========================================== -->
        <section id="quickstart" class="space-y-6">
            <div class="flex items-center space-x-3 text-cyan-400 font-mono text-xs uppercase tracking-widest">
                <span>// Implementation</span>
                <span class="h-px w-8 bg-cyan-400/40"></span>
                <span>Get Started in 60 Seconds</span>
            </div>
            <h2 class="text-3xl font-bold text-white tracking-tight">Run BlockDiffuse Inference</h2>

            <div class="code-gradient rounded-2xl border border-slate-800 overflow-hidden text-xs font-mono shadow-2xl">
                <div class="flex items-center justify-between px-4 py-2.5 bg-slate-900/90 border-b border-slate-800 text-slate-400">
                    <div class="flex space-x-1.5">
                        <div class="w-3 h-3 rounded-full bg-red-500/80"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500/80"></div>
                        <div class="w-3 h-3 rounded-full bg-emerald-500/80"></div>
                    </div>
                    <span>bash</span>
                </div>
                <pre class="p-5 text-slate-200 overflow-x-auto leading-relaxed"><code><span class="text-slate-500"># 1. Clone repository</span>
git clone https://github.com/Hooshaai/BlockDiffuse.git
<span class="text-cyan-400">cd</span> BlockDiffuse

<span class="text-slate-500"># 2. Install dependencies</span>
pip install -r requirements.txt

<span class="text-slate-500"># 3. Run parallel multi-block reasoning</span>
python inference.py \
    --model Qwen/Qwen2.5-0.5B-Instruct \
    --checkpoint ./checkpoints_improved/blockdiffuse_final.pt \
    --prompt "<span class="text-emerald-300">&lt;|im_start|&gt;system\nYou are a helpful assistant that solves problems step by step.&lt;|im_end|&gt;\n&lt;|im_start|&gt;user\nA bookstore has 140 books on Monday. On Tuesday, they sell 45 books. On Wednesday, they receive 80 books. How many remain?&lt;|im_end|&gt;\n&lt;|im_start|&gt;assistant\n</span>" \
    --max_blocks 2 \
    --steps 8 \
    --solver dpm_solver \
    --use_tfe \
    --tfe_seeds 3</code></pre>
            </div>
        </section>

        <!-- 7. BibTeX Citation -->
        <section class="space-y-4 pt-4 border-t border-slate-800">
            <h3 class="text-xl font-bold text-white">BibTeX Citation</h3>
            <div class="code-gradient p-4 rounded-xl border border-slate-800 font-mono text-xs text-slate-300 overflow-x-auto">
<pre><code>@article{blockdiffuse2026,
  title={BlockDiffuse: Fully Parallel Latent Space Reasoning Generation with Diffusion Transformers},
  author={Hooshaai Research},
  journal={GitHub / HuggingFace Technical Report},
  year={2026},
  url={https://github.com/Hooshaai/BlockDiffuse}
}</code></pre>
            </div>
        </section>

    </main>

    <!-- Footer -->
    <footer class="border-t border-slate-800/80 bg-[#04060c] py-12 text-slate-500 text-xs font-mono">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
            <div class="flex items-center space-x-2">
                <span class="font-bold text-slate-300">BlockDiffuse</span>
                <span>&copy; 2026 Hooshaai Research. Licensed under Apache 2.0.</span>
            </div>
            <div class="flex space-x-6 text-xs">
                <a href="https://github.com/Hooshaai/BlockDiffuse" class="hover:text-cyan-400 transition">GitHub</a>
                <a href="https://huggingface.co/Hooshaai/BlockDiffuse" class="hover:text-cyan-400 transition">Model Hub</a>
                <a href="https://huggingface.co/datasets/Hooshaai/BlockDiffuse-Data" class="hover:text-cyan-400 transition">Dataset Hub</a>
                <a href="https://huggingface.co/spaces/Hooshaai/BlockDiffuse-Blog" class="hover:text-cyan-400 transition">HF Space</a>
            </div>
        </div>
    </footer>

    <!-- Interactive Simulator & Slides Script -->
    <script>
        // Slide Deck Controller
        let currentSlide = 0;
        const totalSlides = 5;

        function goToSlide(index) {
            document.querySelectorAll('.slide-content').forEach((el, idx) => {
                if (idx === index) {
                    el.classList.remove('hidden');
                } else {
                    el.classList.add('hidden');
                }
            });

            document.querySelectorAll('.slide-indicator').forEach((btn, idx) => {
                if (idx === index) {
                    btn.classList.add('active', 'bg-cyan-400', 'w-8');
                    btn.classList.remove('w-4', 'bg-slate-700');
                } else {
                    btn.classList.remove('active', 'bg-cyan-400', 'w-8');
                    btn.classList.add('w-4', 'bg-slate-700');
                }
            });

            currentSlide = index;
            document.getElementById('slide-number').textContent = index + 1;
        }

        function nextSlide() {
            goToSlide((currentSlide + 1) % totalSlides);
        }

        function prevSlide() {
            goToSlide((currentSlide - 1 + totalSlides) % totalSlides);
        }

        // ODE Trajectory Simulator
        const simStates = [
            {
                step: "t = 0.0 (Pure Gaussian Noise)",
                flipRate: "98.4%",
                norm: "29.93",
                purity: "1.2%",
                text: "[Noise State] %&_@9^$# /?a9!_zx0 #82-==+ \n# All 100 positions contain unstructured Gaussian coordinates in R^896.\n# No grammatical boundaries established."
            },
            {
                step: "t = 0.125 (Initial Coherence)",
                flipRate: "81.2%",
                norm: "27.42",
                purity: "9.5%",
                text: "The . . a . to . . was . is . . \n# Global syntactic cadence begins coalescing via DiT cross-attention.\n# Frequent structural anchor particles identified."
            },
            {
                step: "t = 0.25 (Sentence Boundaries)",
                flipRate: "64.7%",
                norm: "24.15",
                purity: "24.8%",
                text: "Step 1 : First , the total books on Monday ... \n# Sentence structure and numbered list token positions begin stabilizing.\n# Numerical operation candidates form in continuous space."
            },
            {
                step: "t = 0.375 (Semantic Anchoring)",
                flipRate: "49.1%",
                norm: "21.60",
                purity: "42.0%",
                text: "Step 1: Start with 140 books . On Tuesday they sold 45 books . \n# Mathematical facts extracted from prompt prefix.\n# Subtraction intent strongly aligned across target latents."
            },
            {
                step: "t = 0.5 (Midpoint Trajectory)",
                flipRate: "33.5%",
                norm: "18.84",
                purity: "63.7%",
                text: "Step 1: Calculate remaining after Tuesday: 140 - 45 = 95 books . \n# Calculation result (95) locks in across continuous representations.\n# Dispersive loss eliminates redundant subwords."
            },
            {
                step: "t = 0.625 (Second-Order Refinement)",
                flipRate: "19.8%",
                norm: "16.12",
                purity: "81.4%",
                text: "Step 2: On Wednesday, they received 80 new books. \nSo we compute 95 + 80 = 175 books remaining . \n# Addition operation successfully grounded."
            },
            {
                step: "t = 0.75 (Formatting & Conclusion)",
                flipRate: "10.2%",
                norm: "14.28",
                purity: "92.6%",
                text: "Step 1: 140 - 45 = 95 books remaining.\nStep 2: 95 + 80 = 175 books total.\nTherefore, 175 books remain in the store."
            },
            {
                step: "t = 0.875 (Punctuation Fine-Tuning)",
                flipRate: "4.1%",
                norm: "13.04",
                purity: "97.9%",
                text: "1. After selling 45 books: 140 - 45 = 95 books.\n2. After receiving 80 books: 95 + 80 = 175 books.\nFinal Answer: The store has 175 books remaining."
            },
            {
                step: "t = 1.0 (Clean Discrete Output)",
                flipRate: "0.8%",
                norm: "12.45",
                purity: "99.9%",
                text: "1. Monday initial count: 140 books.\n2. Tuesday after selling 45: 140 - 45 = 95 books.\n3. Wednesday after receiving 80: 95 + 80 = 175 books.\nFinal Answer: There are 175 books remaining. <|im_end|>"
            }
        ];

        function updateODESimulation(val) {
            const state = simStates[val];
            document.getElementById('step-label').textContent = state.step;
            document.getElementById('step-count').textContent = `Step ${val} / 8`;
            document.getElementById('sim-flip-rate').textContent = state.flipRate;
            document.getElementById('sim-norm').textContent = state.norm;
            document.getElementById('sim-purity').textContent = state.purity;
            document.getElementById('sim-decoded-text').textContent = state.text;
        }

        let isPlaying = false;
        function playSimulation() {
            if (isPlaying) return;
            isPlaying = true;
            let current = 0;
            const slider = document.getElementById('ode-slider');
            const interval = setInterval(() => {
                slider.value = current;
                updateODESimulation(current);
                current++;
                if (current > 8) {
                    clearInterval(interval);
                    isPlaying = false;
                }
            }, 550);
        }
    </script>
</body>
</html>