Update index.html

index.html

@@ -40,6 +40,22 @@
     .reveal h3 { font-size: 1.4rem; line-height: 1.2; }
     .reveal p, .reveal li { font-size: 1.7rem; line-height: 1.35; }
     .reveal pre code { font-size: 0.67em; }
+    /* Make <strong> more vibrant and aligned with the accent */
+    .reveal strong {
+      color: var(--accent-secondary);  /* orange highlight */
+      font-weight: 800;
+    }
+
+    /* Make <code> more obvious: change background, font, and padding */
+    .reveal code {
+      background: rgba(255, 255, 255, 0.1);
+      color: #ffd080;
+      padding: 0.15em 0.4em;
+      border-radius: 0.3em;
+      font-family: 'Fira Code', monospace;
+      font-size: 0.95em;
+    }
+
     @media (max-width: 1024px) { .reveal h1{font-size:2.2rem;} .reveal h2{font-size:1.6rem;} }
     .reveal table td, .reveal table th { font-size: 0.85rem; padding: 4px 8px; }
         body::after {
@@ -77,15 +93,17 @@
         " />      <!-- 1 · Opening -->
         </section>
       <section data-auto-animate>
-        <img src="assets/head_logo.svg"
-        alt="Logo"
-        style="width: 120px; margin-bottom: 1rem;"
-        class="animate__animated animate__fadeInDown" />
+        <div style="display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-bottom: 1rem;" class="animate__animated animate__fadeInDown">
+          <img src="assets/torchlogo.png" alt="PyTorch Logo" style="height: 48px;" />
+          <span style="color: white; font-size: 2.4rem; font-weight: 700;">×</span>
+          <img src="assets/head_logo.svg" alt="Transformers Logo" style="height: 48px;" />
+        </div>
+      
         <h1 class="animate__animated animate__fadeInDown">PyTorch × Transformers Journey</h1>
         <h3 class="animate__animated animate__fadeInDown animate__delay-1s">Pythonicity, Autodiff & Modularity in Modern AI</h3>
         <p class="animate__animated animate__fadeInUp animate__delay-2s">Pablo Montalvo‑Leroux &nbsp;·&nbsp; ML Engineer @ Hugging Face</p>
       </section>
-
+      
       <section>
         <h2>2016‑2018: Backprop &amp; Birth Pangs</h2>
         <p>The journey began with uncertainty: back in 2016, machine learning was far from standardized. Tools like Theano and CNTK were fading, and many of us—myself included—were jumping framework to framework. It was a time of raw experimentation.</p>
@@ -100,11 +118,27 @@
       <section>
         <h2>Transformers × PyTorch: Reproducibility</h2>
         <p>That all changed with <code>pytorch-pretrained-bert</code>, the predecessor to Transformers. Suddenly, the magic of BERT was available in an interface that made sense.</p>
-        <ul>
-          <li>No static graphs, just Python functions and PyTorch modules.</li>
-          <li>Readable, hackable code meant results could be shared, reproduced, improved.</li>
-          <li>This shifted the research community towards PyTorch.</li>
-        </ul>
+      
+        <div style="display: flex; gap: 2rem; justify-content: space-between; margin-top: 2rem;">
+          <div style="flex: 1; background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.6rem;">
+              🧩 Simpler Interface
+            </p>
+            <p>No static graphs, just Python functions and PyTorch modules.</p>
+          </div>
+          <div style="flex: 1; background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.6rem;">
+              ✨ Hackability
+            </p>
+            <p>Readable, hackable code meant results could be shared, reproduced, improved.</p>
+          </div>
+          <div style="flex: 1; background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.6rem;">
+              🚀 Community Shift
+            </p>
+            <p>This shifted the research community towards PyTorch.</p>
+          </div>
+        </div>
       </section>
       
 
@@ -129,12 +163,24 @@
       
       <section>
         <h2>Clone the Paper Tonight → Tweak Tomorrow</h2>
-        <p>PyTorch lowered the barrier to implementation. Transformers removed the rest.</p>
-        <ul>
-          <li>2018: debugging BERT fine-tunes meant live tensor prints, not codegen restarts.</li>
-          <li>Community credibility grew because patches could be merged fast and verified easily.</li>
-          <li>Experimentation became a matter of hours, not weeks.</li>
-        </ul>
+        <p>PyTorch lowered the barrier to implementation — Transformers built on top of that simplicity.</p>
+      
+        <div style="display: flex; gap: 1.5rem; margin-top: 2rem;">
+          <div style="flex: 1; background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.5rem;">🔍 Live Debugging</p>
+            <p>2018: BERT fine-tunes meant <code>print(tensor)</code>, not <em>recompile & hope</em>.</p>
+          </div>
+      
+          <div style="flex: 1; background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.5rem;">🤝 Fast Review</p>
+            <p>Patches were understandable and reproducible — merged quickly, verified quickly.</p>
+          </div>
+      
+          <div style="flex: 1; background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.5rem;">⚡ Fast Iteration</p>
+            <p>Experiments shifted from <em>weeks</em> to <strong>hours</strong> — feedback cycles accelerated.</p>
+          </div>
+        </div>
       </section>
       
       <!-- 6 · One Model · One File -->
@@ -169,43 +215,80 @@ class BertModel(PreTrainedModel):
 
       <section>
         <h2>Beyond Transformers: Ecosystem Reuse</h2>
-        <p>Other libraries depend on <code>transformers</code> as a model definition source. For example, <strong>TRL</strong> uses models from the Hub directly:</p>
+        <p><strong>Transformers</strong> makes modeling easy. <strong>vLLM</strong> makes inference fast.</p>
+      
+        <div style="display: flex; gap: 2rem; margin-top: 2rem;">
+          <div style="flex: 1;">
+            <p><strong>🔧 Prototype with Transformers:</strong></p>
+            <pre><code class="language-python" data-trim data-noescape>
+      from transformers import pipeline
+      
+      pipe = pipeline("text-generation", model="meta-llama/Llama-3.2-1B")
+      print(pipe("The future of AI is")[0]["generated_text"])
+            </code></pre>
+          </div>
+          <div style="flex: 1;">
+            <img src="assets/vLLM-Full-Logo.png" alt="vLLM Illustration" style="border-radius: 1rem; box-shadow: 0 0 12px #000; width: 100%;" />
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2>Deploy with vLLM — No Rewrite Needed</h2>
+        <p><strong>vLLM</strong> supports <code>transformers</code> models out of the box. Just specify <code>model_impl="transformers"</code> if needed:</p>
       
         <pre><code class="language-python" data-trim data-noescape>
-      from datasets import load_dataset
-      from transformers import AutoModelForCausalLM, AutoTokenizer
-      from trl import DPOConfig, DPOTrainer
-      
-      model = AutoModelForCausalLM.from_pretrained("Qwen/Qwen2.5-0.5B-Instruct")
-      tokenizer = AutoTokenizer.from_pretrained("Qwen/Qwen2.5-0.5B-Instruct")
-      dataset = load_dataset("trl-lib/ultrafeedback_binarized", split="train")
-      training_args = DPOConfig(output_dir="Qwen2.5-0.5B-DPO")
-      trainer = DPOTrainer(
-          model=model,
-          args=training_args,
-          train_dataset=dataset,
-          processing_class=tokenizer
-      )
-      trainer.train()
-        </code></pre>
+      from vllm import LLM, SamplingParams
       
-        <p class="fragment">No hacks, no refactoring — just <code>from_pretrained()</code>. Thanks to PyTorch autodiff and robust model definitions.</p>
+      llm = LLM(model="meta-llama/Llama-3.2-1B", model_impl="transformers")
+      params = SamplingParams(max_tokens=20)
+      outputs = llm.generate("The future of AI is", sampling_params=params)
+      print(outputs[0].outputs[0].text)
+        </code></pre>
+        <p class="fragment">We also support SGLang now, along with thousands of other libraries! </p>
+
+      </section>
+      <section>
+        <h2 style="margin-bottom: 1rem;">
+          Transformers × PyTorch — Enabling the Community
+        </h2>
+        <img src="assets/transformers_as_ref.png" alt="Transformers as Reference"
+          style="
+            width: 120%;
+            height: 110%;
+            object-fit: cover;
+            margin-left: -2.5%;
+            margin-top: -2.5%;
+          " />
       </section>
       
+      
 
             <!-- 8 · Paradigms come at a cost -->
       <section>
-        <h2>Paradigms come at a cost</h2>
-        <ul>
-          <p>The library took off, scientific and engineering ML community benefitted from it</p>
-          <p>Torch adoption grew at the same time!</p>
-          <p>The Hugging Face Hub became the AI app reference,</p>
-          <p>In transformers, <strong> Maintenance</strong> becomes an issue: we have a lot of repeated code on purpose!</p>
-          <p class="fragment">...but python is never far :) </p>
-
-        </ul>
+        <h2>Paradigms Come at a Cost</h2>
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem;">
+          <div style="background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.5rem;">📈 Community Growth</p>
+            <p>The scientific and engineering ML community thrived with Transformers.</p>
+          </div>
+      
+          <div style="background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.5rem;">🔥 PyTorch Synergy</p>
+            <p>Transformers and PyTorch grew together — adoption fed back into both ecosystems.</p>
+          </div>
+      
+          <div style="background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.5rem;">🛠️ Maintenance Pressure</p>
+            <p>We duplicate code on purpose — to preserve clarity, portability, and hackability.</p>
+          </div>
+      
+          <div class="fragment" style="background: #2d2d2d; padding: 1.2rem; border-radius: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,0.3);">
+            <p style="font-weight: 800; color: var(--accent-primary); margin-bottom: 0.5rem;">🧬 Pythonic Modularity</p>
+            <p>The <strong>Modularity</strong> of python is never far :)</p>
+          </div>
+        </div>
       </section>
-
+      
       <!-- 8 · Back to Python: Mary Shelley Mode -->
       <section>
         <h2>Back to Python: Modular “Mary Shelley” Mode</h2>
@@ -500,7 +583,7 @@ class GlmForCausalLM(LlamaForCausalLM):
   "layer.*.self_attn.v_proj": "colwise",
   "layer.*.self_attn.o_proj": "rowwise"
 }</code></pre>
-<p class="fragment">Translated to</p>
+<p>Translated to</p>
 
         <pre><code class="language-python" data-trim data-noescape>
 def translate_to_torch_parallel_style(style: str):
@@ -567,23 +650,45 @@ print(y)
         <p class="fragment">Same Transformer code — now with a <strong>3× faster</strong> GELU on A100s.</p>
       </section>
 
-
-      <!-- 18 · API design lessons -->
       <section>
         <h2>API Design Lessons</h2>
-        <ul>
-          <li>Make easy things obvious, hard things possible</li>
-          <li>Paper‑to‑repo diff should be minimal</li>
-          <li>Research repo-to-stable architecture should be as fast as possible</li>
-
-          <li>Hide sharding, expose intent</li>
-        </ul>
-        <p>We tune radios without building RF amplifiers — ML should feel the same.</p>
-        <p class="fragment">..while enabling people who build the amplifiers.</p>
-
+      
+        <div style="display: flex; gap: 1.2rem; margin-top: 1.2rem;">
+          <div style="flex: 1; background: #2c2c2c; padding: 0.9rem; border-radius: 0.6rem; box-shadow: 0 3px 10px rgba(0,0,0,0.25); font-size: 1.35rem;">
+            <p style="font-weight: 700; color: var(--accent-primary); margin-bottom: 0.4rem;">🔍 Make Easy Things Obvious</p>
+            <p style="margin-bottom: 0.4rem;">Models load in <code>one line</code> — no boilerplate.</p>
+            <pre><code class="language-python" style="font-size: 0.75em;">model = AutoModel.from_pretrained("bert-base-uncased")</code></pre>
+          </div>
+      
+          <div style="flex: 1; background: #2c2c2c; padding: 0.9rem; border-radius: 0.6rem; box-shadow: 0 3px 10px rgba(0,0,0,0.25); font-size: 1.35rem;">
+            <p style="font-weight: 700; color: var(--accent-primary); margin-bottom: 0.4rem;">📄 Paper-to-Repo Diff ≈ 0</p>
+            <p style="margin-bottom: 0.4rem;">Code reflects architecture directly.</p>
+            <pre><code class="language-python" style="font-size: 0.75em;">class LlamaAttention(nn.Module): ...</code></pre>
+          </div>
+        </div>
+      
+        <div style="display: flex; gap: 1.2rem; margin-top: 1.2rem;">
+          <div style="flex: 1; background: #2c2c2c; padding: 0.9rem; border-radius: 0.6rem; box-shadow: 0 3px 10px rgba(0,0,0,0.25); font-size: 1.35rem;">
+            <p style="font-weight: 700; color: var(--accent-primary); margin-bottom: 0.4rem;">🚀 Prototyping → Production</p>
+            <p style="margin-bottom: 0.4rem;">Same model runs in vLLM for deployment:</p>
+            <pre><code class="language-python" style="font-size: 0.75em;">LLM(model="llama", model_impl="transformers")</code></pre>
+          </div>
+      
+          <div style="flex: 1; background: #2c2c2c; padding: 0.9rem; border-radius: 0.6rem; box-shadow: 0 3px 10px rgba(0,0,0,0.25); font-size: 1.35rem;">
+            <p style="font-weight: 700; color: var(--accent-primary); margin-bottom: 0.4rem;">🎛️ Hide Sharding, Show Intent</p>
+            <p style="margin-bottom: 0.4rem;">Declarative TP via config:</p>
+            <pre><code class="language-json" style="font-size: 0.75em;">"q_proj": "colwise"</code></pre>
+          </div>
+        </div>
+      
+        <p style="font-size: 1.35rem; margin-top: 1.6rem;">
+          We tune radios without building RF amps. ML should feel the same.
+        </p>
+        <p class="fragment" style="font-size: 1.35rem;">
+          …while empowering those who do build the amps.
+        </p>
       </section>
-
-
+      
       <!-- 14 · Rise of Multimodality -->
       <section>
         <h2>Rise of Multimodality</h2>
@@ -609,21 +714,43 @@ model = AutoModelForConditionalGeneration.from_pretrained("Qwen/Qwen3-8B")
         <iframe src="assets/model_growth.html" width="80%" height="600" style="border:none;"></iframe>
       </section>
 
-      <!-- 20 · Takeaways -->
       <section>
         <h2>Takeaways &amp; The Future</h2>
-        <ul>
-          <li style="display: flex; align-items: center; gap: 1rem;">
-            <img src="assets/torchlogo.png" alt="PyTorch" style="height: 2rem;" />
-            PyTorch &amp; <code>transformers</code> grow symbiotically
-            <img src="assets/head_logo.svg" alt="Transformers" style="height: 2rem;" />
-          </li>
-          <li>Pythonicity × pragmatism drive adoption</li>
-          <li>Open‑source models are shipping faster &amp; bigger than ever</li>
-          <li class="fragment"> Let's go!</li>
-
-        </ul>
-        <p>
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem;">
+          <div style="background: #2d2d2d; padding: 1rem; border-radius: 0.8rem;">
+            <p style="font-weight: 700; font-size: 1.4rem; color: var(--accent-primary); margin-bottom: 0.4rem;">
+              🤝 Symbiotic Growth
+            </p>
+            <p style="display: flex; align-items: center; gap: 0.4rem; font-size: 1.4rem;">
+              <img src="assets/torchlogo.png" alt="PyTorch" style="height: 1.4rem;" />
+              PyTorch &amp; <code>transformers</code> grow together
+              <img src="assets/head_logo.svg" alt="Transformers" style="height: 1.4rem;" />
+            </p>
+          </div>
+      
+          <div style="background: #2d2d2d; padding: 1rem; border-radius: 0.8rem;">
+            <p style="font-weight: 700; font-size: 1.4rem; color: var(--accent-primary); margin-bottom: 0.4rem;">
+              🧠 Pythonicity × Pragmatism
+            </p>
+            <p style="font-size: 1.4rem;">High-level code, low-level control — a winning combination for fast iteration.</p>
+          </div>
+      
+          <div style="background: #2d2d2d; padding: 1rem; border-radius: 0.8rem;">
+            <p style="font-weight: 700; font-size: 1.4rem; color: var(--accent-primary); margin-bottom: 0.4rem;">
+              🚢 Models Ship Faster
+            </p>
+            <p style="font-size: 1.4rem;">Open-source models are scaling up — and landing in users' hands faster than ever.</p>
+          </div>
+      
+          <div style="background: #2d2d2d; padding: 1rem; border-radius: 0.8rem;">
+            <p style="font-weight: 700; font-size: 1.4rem; color: var(--accent-primary); margin-bottom: 0.4rem;">
+              📚 Source of Truth for Model Definitions
+            </p>
+            <p style="font-size: 1.4rem;">We aim to be the canonical reference — while enabling the community to build, remix, and deploy at scale.</p>
+          </div>
+        </div>
+      
+        <p style="margin-top: 1.5rem; font-size: 1.3rem;">
           <a href="https://huggingface.co/transformers/contribute" target="_blank">
             hf.co/transformers/contribute
           </a>