src/lib/samples.js

/**
 * Pulpie WebUI - Sample HTML Documents
 *
 * Provides realistic benchmark test cases:
 * - Blog Article (author banner, main text, code snippet, sidebar, comments)
 * - Documentation Page (nav tree, breadcrumbs, API params table, footer)
 * - News Article (disclaimers, cookie banner, headline, lead story, ads)
 */

export const SAMPLE_HTMLS = {
  article: `<!DOCTYPE html>
<html>
<head><title>Understanding WebGPU: Next-Gen Graphics and Compute in the Browser</title></head>
<body>
  <header>
    <nav class="main-nav">
      <a href="/">Home</a> | <a href="/blog">Blog</a> | <a href="/about">About</a> | <a href="/careers">Careers</a>
    </nav>
    <div class="cookie-banner">This website uses cookies to personalize content. <button>Accept</button></div>
  </header>
  <div class="layout-container">
    <aside class="sidebar">
      <h3>Trending Posts</h3>
      <ul>
        <li><a href="/post-1">Top 10 JS Frameworks</a></li>
        <li><a href="/post-2">CSS Grid vs Flexbox</a></li>
      </ul>
      <div class="ad-banner">Sponsored Ad: Buy Cloud Compute 50% Off!</div>
    </aside>
    <main id="content">
      <article>
        <h1>Understanding WebGPU: Next-Gen Graphics and Compute in the Browser</h1>
        <p class="author-meta">Published by <strong>Elena Rostova</strong> on September 8, 2026 · 6 min read</p>
        <p>WebGPU is the new web standard for accelerated graphics and compute on the web. Unlike WebGL, which was built on the older OpenGL ES paradigm, WebGPU reflects modern GPU architectures such as Direct3D 12, Metal, and Vulkan.</p>
        <p>For machine learning engineers, WebGPU is transformative because it unlocks low-overhead compute shaders (WGSL) and half-precision floating point operations (<code>shader-f16</code>). This allows running 200M+ parameter transformer models directly in the user's browser with native hardware acceleration.</p>
        <h2>Key Benefits of WebGPU for Inference</h2>
        <p>Running neural networks directly in the browser provides several crucial advantages over server-side inference:</p>
        <ul>
          <li><strong>Zero Latency Network Hops:</strong> Once weights are cached in browser storage, token classification happens locally in milliseconds.</li>
          <li><strong>Complete Privacy:</strong> Sensitive documents and internal intranet pages never leave the client device.</li>
          <li><strong>Zero Cloud Compute Cost:</strong> Massive scalability without managing GPU server clusters.</li>
        </ul>
        <pre><code class="language-javascript">const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
console.log("WebGPU hardware ready:", adapter.info);</code></pre>
        <p>As browser engines continue optimizing WebGPU shader compilation, client-side intelligence will become the default architecture for web utilities.</p>
      </article>
    </main>
  </div>
  <footer>
    <div class="footer-links">
      <a href="/privacy">Privacy Policy</a> · <a href="/terms">Terms of Service</a> · <a href="/contact">Contact Support</a>
    </div>
    <p class="copyright">© 2026 TechInsights Media Group. All rights reserved.</p>
  </footer>
</body>
</html>`,

  docs: `<!DOCTYPE html>
<html>
<head><title>EuroBERT Architecture Reference & API Docs</title></head>
<body>
  <div class="topbar">
    <div class="logo">EuroBERT Docs</div>
    <input type="search" placeholder="Search docs (Ctrl+K)...">
  </div>
  <div class="docs-wrapper">
    <nav class="tree-nav">
      <h4>Getting Started</h4>
      <ul>
        <li><a href="#intro">Introduction</a></li>
        <li><a href="#quickstart">Quickstart</a></li>
      </ul>
      <h4>Model Architecture</h4>
      <ul>
        <li><a href="#encoder">Transformer Encoder</a></li>
        <li><a href="#tokenization">Vocabulary & Tokens</a></li>
      </ul>
    </nav>
    <div class="main-body">
      <div class="breadcrumb">Docs > Architecture > EuroBERT</div>
      <h1>EuroBERT Architecture Reference</h1>
      <p>EuroBERT is a multilingual encoder architecture optimized for token classification and sequence labeling tasks across European languages and structured HTML markup.</p>
      <h2>Model Specifications</h2>
      <table>
        <thead>
          <tr><th>Parameter</th><th>Value</th><th>Description</th></tr>
        </thead>
        <tbody>
          <tr><td>Total Parameters</td><td>210 Million</td><td>Orange Small encoder checkpoint</td></tr>
          <tr><td>Hidden Dimension</td><td>768</td><td>Internal transformer vector width</td></tr>
          <tr><td>Attention Heads</td><td>12</td><td>Multi-head self attention count</td></tr>
          <tr><td>Max Sequence Length</td><td>8,192 tokens</td><td>Context window per forward pass</td></tr>
          <tr><td>Precision</td><td>Float16 (ONNX)</td><td>Weights serialized in IEEE 754 half-precision</td></tr>
        </tbody>
      </table>
      <h2>Block Classification Semantics</h2>
      <p>Pulpie segments HTML into content blocks separated by the special delimiter <code>&lt;|sep|&gt;</code>. During inference, logits evaluated at each delimiter index classify that block as either primary article content or extraneous boilerplate.</p>
      <div class="feedback-box">
        <p>Was this page helpful? <button>Yes</button> <button>No</button></p>
      </div>
    </div>
  </div>
  <footer class="footer-nav">
    <p>Last edited 3 days ago by core maintainers.</p>
  </footer>
</body>
</html>`,

  news: `<!DOCTYPE html>
<html>
<head><title>Global Clean Energy Investment Reaches Historic Milestone</title></head>
<body>
  <div class="breaking-banner">BREAKING NEWS: Markets rally as renewable output breaks prior records</div>
  <nav class="news-nav">
    <a href="/world">World</a> | <a href="/finance">Finance</a> | <a href="/climate">Climate</a> | <a href="/tech">Tech</a>
  </nav>
  <div class="ad-leaderboard">Advertisement: Subscribe today for unlimited access - 80% off</div>
  <div class="article-container">
    <h1>Global Clean Energy Investment Reaches Historic Milestone</h1>
    <p class="dateline">GENEVA — September 9, 2026 — Clean energy investment has outpaced fossil fuel expenditure for the third consecutive year, according to annual figures published today.</p>
    <p>Solar and wind installations accounted for more than 85 percent of all new power generation capacity added worldwide over the past twelve months. Rapid declines in battery storage costs combined with upgraded grid interconnects accelerated deployment across Europe, Asia, and the Americas.</p>
    <p>"What we are witnessing is not merely an incremental transition, but an exponential realignment of global capital," remarked Dr. Sarah Vance, senior energy analyst at the International Transition Council.</p>
    <p>Grid operators reported record stability during peak summer demand, dispelling earlier concerns regarding renewable intermittency.</p>
  </div>
  <div class="newsletter-signup">
    <h3>Sign up for Morning Briefing</h3>
    <input type="email" placeholder="Your email address"><button>Subscribe</button>
  </div>
  <div class="footer-corporate">
    <p>© 2026 Global Dispatch Syndicate. Unauthorized reproduction prohibited.</p>
  </div>
</body>
</html>`,
};