Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>IEEE CVPR LLM Laboratory</title> | |
| <!-- KaTeX for Math --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css"> | |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.js"></script> | |
| <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/contrib/auto-render.min.js" onload="renderMathInElement(document.body);"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="presentation-container"> | |
| <!-- Controls --> | |
| <div class="controls"> | |
| <button id="prev-btn" class="nav-btn" onclick="prevSlide()">◀</button> | |
| <span id="slide-counter" class="counter">1 / 17</span> | |
| <button id="next-btn" class="nav-btn" onclick="nextSlide()">▶</button> | |
| </div> | |
| <div id="slides-wrapper" class="slides-wrapper"> | |
| <!-- Slide 1: Title --> | |
| <section class="slide active"> | |
| <div class="slide-content title-slide"> | |
| <h1>LLM Laboratory Portfolio</h1> | |
| <h2>IEEE CVPR Hands-On Seminar</h2> | |
| <p style="margin-top: 20px; font-size: 1.5rem; color: var(--text-muted);">A comprehensive walkthrough of the 4 interactive web apps.</p> | |
| </div> | |
| </section> | |
| <!-- Slide 2: Intro --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-blue">Overview</span> | |
| <h2>The 4 Interactive Modules</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>What we built</h3> | |
| <p>We built 4 standalone, production-ready web applications deployed on Hugging Face Spaces. Each app isolates a specific component of the modern Large Language Model stack:</p> | |
| <ul style="font-size: 1.4rem; color: var(--text-muted); line-height: 2; margin-left: 30px;"> | |
| <li><strong class="c-blue">Module 1:</strong> The Tokenizer Visualizer</li> | |
| <li><strong class="c-red">Module 2:</strong> The Temperature Playground</li> | |
| <li><strong class="c-yellow">Module 3:</strong> The Structured Output Extractor</li> | |
| <li><strong class="c-green">Module 4:</strong> The LoRA Injection Simulator</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 3: Tokenizer Web App --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-blue">Lab 1</span> | |
| <h2>The Tokenizer Visualizer</h2> | |
| </div> | |
| <div class="panel" style="align-items: center; text-align: center;"> | |
| <h3 class="c-blue" style="font-size: 2.5rem;">See how the AI reads</h3> | |
| <p>A web application built with Flask and the `transformers` library, utilizing the native `unsloth/Llama-3.2-3B-Instruct` tokenizer.</p> | |
| <p>Type any text to see real-time BPE chunking and integer mapping.</p> | |
| <a href="#" class="launch-btn" target="_blank">Launch Tokenizer Space</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 4: Tokenizer Concept 1 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-blue">Concept 1A</span> | |
| <h2>The Vocabulary Bottleneck</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>Language models do not read English.</h3> | |
| <p>A neural network only understands floating-point numbers. To process text, we must compress all human language into a finite dictionary of integers. If the dictionary is too small (characters), the model lacks context. If it's too large (whole words), the matrix becomes impossibly massive.</p> | |
| <p>The solution is <strong>Sub-Word Tokenization</strong>: Breaking text into optimal linguistic chunks.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 5: Tokenizer Concept 2 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-blue">Concept 1B</span> | |
| <h2>Byte-Pair Encoding (BPE)</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>How it works in practice</h3> | |
| <p>BPE finds the most frequent combinations of characters and merges them into single tokens. Common words become one token, while rare words are broken down into syllables.</p> | |
| <div class="visualizer-block code-font"> | |
| <div class="token-row"> | |
| <span class="t-chunk c-blue">IEEE</span> | |
| <span class="t-chunk c-red">_Seminar</span> | |
| <span class="t-chunk c-green">_Rocks</span> | |
| </div> | |
| <div class="token-row">↓</div> | |
| <div class="token-row"> | |
| <span class="t-id">45812</span> | |
| <span class="t-id">1204</span> | |
| <span class="t-id">8831</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 6: Tokenizer Concept 3 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-blue">Concept 1C</span> | |
| <h2>The Embedding Space</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>From Integers to Vectors</h3> | |
| <p>Once the text is converted to a sequence of integers (e.g., `[45812, 1204]`), the model looks up each integer in a massive <strong>Embedding Matrix</strong>.</p> | |
| <p>This converts the discrete integers into high-dimensional continuous vectors, allowing the model to perform mathematical operations on the meaning of words.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 7: Temperature Web App --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-red">Lab 2</span> | |
| <h2>The Temperature Playground</h2> | |
| </div> | |
| <div class="panel" style="align-items: center; text-align: center;"> | |
| <h3 class="c-red" style="font-size: 2.5rem;">The ₹30 Boss Challenge</h3> | |
| <p>An interactive dashboard that visually renders probability distributions using a custom KenLM API endpoint.</p> | |
| <p>Features the <strong>₹30 Challenge</strong>: Can you perfectly slide the temperature to balance logic and creativity to hit exactly a 15% probability?</p> | |
| <a href="#" class="launch-btn red" target="_blank">Launch Temperature Space</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 8: Temperature Concept 1 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-red">Concept 2A</span> | |
| <h2>The Logit Bottleneck</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>Predicting the next token</h3> | |
| <p>At the very end of the network, the model outputs raw scores (logits) for every single token in its vocabulary. Because these are unbounded raw numbers, they don't add up to 100%. We need a way to reliably convert them into a probability distribution.</p> | |
| <p>This is done via the <strong>Softmax</strong> function.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 9: Temperature Concept 2 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-red">Concept 2B</span> | |
| <h2>The Softmax Formula</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>Exponential Smoothing</h3> | |
| <p>The standard Softmax formula exponentiates the logits and divides by the sum. This forces the outputs to be between 0 and 1, creating a valid probability distribution.</p> | |
| <div class="math-block"> | |
| $$ \sigma(z_i) = \frac{e^{z_i}}{\sum e^{z_j}} $$ | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 10: Temperature Concept 3 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-red">Concept 2C</span> | |
| <h2>Temperature & Creativity</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>Modulating the Softmax</h3> | |
| <p>By injecting a Temperature parameter ($\theta$), we divide the raw logits before they are exponentiated. This allows us to mathematically control the model's confidence.</p> | |
| <div class="grid-2"> | |
| <div class="info-card"> | |
| <h4 class="c-blue">Low Temp ($\theta < 1$)</h4> | |
| <p>Sharpened distribution. The highest logit dominates completely. Deterministic and "greedy".</p> | |
| </div> | |
| <div class="info-card"> | |
| <h4 class="c-red">High Temp ($\theta > 1$)</h4> | |
| <p>Flattened distribution. Lower scores become viable. Highly creative and diverse.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 11: Structured Output Web App --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-yellow">Lab 3</span> | |
| <h2>Structured Output Extractor</h2> | |
| </div> | |
| <div class="panel" style="align-items: center; text-align: center;"> | |
| <h3 class="c-yellow" style="font-size: 2.5rem;">Forcing JSON Responses</h3> | |
| <p>A web app showcasing 3 levels of data extraction complexity, powered by the `Groq` API.</p> | |
| <p>Try pasting unstructured text and watch the LLM perfectly populate a complex nested JSON schema without hallucinations.</p> | |
| <a href="#" class="launch-btn yellow" target="_blank">Launch Structured Output Space</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 12: Structured Concept 1 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-yellow">Concept 3A</span> | |
| <h2>Bridging AI and Software</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>Why text is not enough</h3> | |
| <p>Traditional software engineering relies on strict data structures (APIs, Databases). If an LLM returns a conversational response like <em>"Sure, the error code is 500!"</em>, the software will crash.</p> | |
| <p>We must constrain the LLM's generation so that it only outputs valid, machine-readable syntax.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 13: Structured Concept 2 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-yellow">Concept 3B</span> | |
| <h2>Grammar-Constrained Decoding</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>Restricting the Latent Space</h3> | |
| <p>During decoding, we can forcefully set the probability of invalid tokens to 0%. If the schema requires a boolean, the model is physically prevented from outputting anything other than `true` or `false`.</p> | |
| <div class="visualizer-block code-block code-font"> | |
| <pre><code>{ | |
| <span class="c-blue">"error_code"</span>: <span class="c-green">500</span>, | |
| <span class="c-blue">"affected_services"</span>: [ | |
| <span class="c-yellow">"Database"</span>, | |
| <span class="c-yellow">"Auth"</span> | |
| ] | |
| }</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 14: LoRA Web App --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-green">Lab 4</span> | |
| <h2>LoRA Interactive Simulator</h2> | |
| </div> | |
| <div class="panel" style="align-items: center; text-align: center;"> | |
| <h3 class="c-green" style="font-size: 2.5rem;">Brain vs. Sticky Note</h3> | |
| <p>An interactive VRAM calculator paired with a live "Sticky Note" injection simulator.</p> | |
| <p>Write a custom, hallucinated fact on the Sticky Note, and watch the frozen Llama-3 instantly adapt to it in real-time!</p> | |
| <a href="#" class="launch-btn green" target="_blank">Launch LoRA Space</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 15: LoRA Concept 1 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-green">Concept 4A</span> | |
| <h2>The VRAM Wall</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>Why Full Fine-Tuning is Expensive</h3> | |
| <p>To teach a model new facts, you must update its brain ($W$). A standard 3 Billion parameter model requires roughly 6GB of VRAM just to load.</p> | |
| <p>However, running backpropagation requires storing optimizer states (Adam), gradients, and activations. A full fine-tune of a 3B model requires upwards of <strong>30 GB of VRAM</strong>, putting it out of reach for consumer hardware.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 16: LoRA Concept 2 --> | |
| <section class="slide right"> | |
| <div class="slide-content"> | |
| <div class="header"> | |
| <span class="module-tag tag-green">Concept 4B</span> | |
| <h2>Low-Rank Adaptation (LoRA)</h2> | |
| </div> | |
| <div class="panel"> | |
| <h3>The Sticky Note Analogy</h3> | |
| <p>Instead of modifying the massive 3B parameter brain, LoRA freezes it entirely. We then append two tiny matrices ($A$ and $B$) that act as "sticky notes". The new knowledge is mathematically injected during the forward pass.</p> | |
| <div class="math-block"> | |
| $$ W_{new} = W_{frozen} + (A \times B) $$ | |
| </div> | |
| <div class="grid-2"> | |
| <div class="info-card"> | |
| <h4>$W_{frozen}$</h4> | |
| <p>3 Billion Parameters.<br>Fixed in memory. No gradients required.</p> | |
| </div> | |
| <div class="info-card" style="border: 2px solid var(--g-green);"> | |
| <h4 class="c-green">$A \times B$</h4> | |
| <p>1.5 Million Parameters.<br>Trainable in under 2 GB of VRAM!</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Slide 17: End --> | |
| <section class="slide right"> | |
| <div class="slide-content title-slide" style="text-align: center;"> | |
| <h1>Start Hacking</h1> | |
| <h2 style="margin-bottom: 30px;">All 4 spaces are live on Hugging Face.</h2> | |
| <p style="font-size: 1.4rem; color: var(--text-muted);">Thank you for attending the IEEE CVPR LLM Laboratory!</p> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |