Spaces:

matthewspring
/

anycoder-08f3fd38

Running

File size: 17,922 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hardened LLM Forge</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <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=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <style>
    :root{
      --bg:#050710;
      --card:#0d121f;
      --muted:#7d8b9f;
      --accent:#7f5af0;
      --accent-2:#62f4f6;
      --danger:#ff5470;
      --success:#2cb67d;
      --border:1px solid rgba(255,255,255,.08);
      --radius:22px;
      --shadow:0 20px 45px rgba(0,0,0,.35);
    }
    *{box-sizing:border-box;}
    body{
      margin:0;
      font-family:'Space Grotesk',system-ui,sans-serif;
      background:radial-gradient(circle at 20% 20%,rgba(127,90,240,.35),transparent 50%),
                 radial-gradient(circle at 80% 0%,rgba(98,244,246,.25),transparent 55%),
                 var(--bg);
      color:#f8f9fb;
      min-height:100vh;
      display:flex;
      flex-direction:column;
    }
    a{text-decoration:none;color:inherit;}
    header{
      position:sticky;
      top:0;
      z-index:10;
      background:rgba(5,7,16,.8);
      backdrop-filter:blur(12px);
      border-bottom:var(--border);
      padding:1.4rem clamp(1rem,4vw,3rem);
    }
    .header-inner{
      display:flex;
      gap:1rem;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.9rem;
      font-size:1.1rem;
      font-weight:600;
      letter-spacing:.05em;
    }
    .brand i{
      color:var(--accent-2);
      font-size:1.2rem;
    }
    nav{
      display:flex;
      gap:.6rem;
      flex-wrap:wrap;
    }
    nav a{
      padding:.55rem 1rem;
      border-radius:999px;
      font-size:.9rem;
      color:#cad3e0;
      border:var(--border);
      transition:.3s;
    }
    nav a:hover{
      color:#fff;
      border-color:rgba(255,255,255,.3);
      background:rgba(255,255,255,.06);
    }
    .anycoder-link{
      color:var(--accent);
      font-weight:600;
      text-decoration:underline;
    }
    main{
      padding:2rem clamp(1rem,5vw,3.8rem) 4rem;
      display:flex;
      flex-direction:column;
      gap:2rem;
    }
    .hero{
      background:linear-gradient(135deg,rgba(127,90,240,.2),rgba(98,244,246,.08));
      border-radius:var(--radius);
      padding:2.5rem clamp(1.2rem,5vw,3.5rem);
      border:var(--border);
      position:relative;
      overflow:hidden;
    }
    .hero::after{
      content:'';
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.1),transparent 40%);
      pointer-events:none;
    }
    .hero h1{
      margin:0 0 1rem;
      font-size:clamp(2rem,5vw,3.2rem);
    }
    .hero p{
      max-width:720px;
      color:var(--muted);
      font-size:1.05rem;
      line-height:1.6;
    }
    .cta-group{
      margin-top:1.6rem;
      display:flex;
      gap:1rem;
      flex-wrap:wrap;
      position:relative;
      z-index:2;
    }
    .btn{
      border:none;
      border-radius:999px;
      padding:.85rem 1.9rem;
      font-weight:600;
      cursor:pointer;
      font-size:.95rem;
      transition:.3s;
      display:flex;
      align-items:center;
      gap:.5rem;
    }
    .btn-primary{
      background:var(--accent);
      color:#050710;
      box-shadow:0 15px 30px rgba(127,90,240,.35);
    }
    .btn-primary:hover{transform:translateY(-2px);}
    .btn-ghost{
      background:transparent;
      border:1px solid rgba(255,255,255,.3);
      color:#f6f7fb;
    }
    .grid{
      display:grid;
      gap:1.5rem;
    }
    .grid.stats{
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    }
    .card{
      background:var(--card);
      border-radius:var(--radius);
      border:var(--border);
      padding:1.4rem;
      position:relative;
      overflow:hidden;
    }
    .card h3{
      margin:0 0 .4rem;
      font-size:1rem;
      color:#dfe7ff;
      letter-spacing:.04em;
      text-transform:uppercase;
    }
    .card strong{
      font-size:1.4rem;
      color:#fff;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      font-size:.8rem;
      padding:.25rem .7rem;
      border-radius:999px;
      background:rgba(98,244,246,.12);
      color:var(--accent-2);
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .compare{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:1.5rem;
    }
    .profile-card{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.1);
      padding:1.5rem;
      background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(5,7,16,.2));
      display:flex;
      flex-direction:column;
      gap:1rem;
      position:relative;
    }
    .profile-card.active{
      border-color:var(--accent);
      box-shadow:0 0 35px rgba(127,90,240,.25);
    }
    .profile-card ul{
      margin:0;
      padding:0 0 0 1.2rem;
      color:var(--muted);
      line-height:1.5;
    }
    .profile-card .badge{
      align-self:flex-start;
      padding:.3rem .85rem;
      border-radius:10px;
      background:rgba(255,255,255,.08);
      font-size:.8rem;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:#fff;
    }
    .timeline{
      border-left:2px solid rgba(255,255,255,.15);
      padding-left:1.4rem;
      display:flex;
      flex-direction:column;
      gap:1.5rem;
    }
    .step{
      position:relative;
    }
    .step::before{
      content:'';
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--accent);
      position:absolute;
      left:-1.7rem;
      top:5px;
      box-shadow:0 0 18px rgba(127,90,240,.6);
    }
    .code-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:1.5rem;
    }
    pre{
      background:#03050b;
      padding:1.2rem;
      border-radius:16px;
      color:#9ad7ff;
      font-size:.85rem;
      line-height:1.5;
      overflow:auto;
      border:1px solid rgba(255,255,255,.08);
      position:relative;
    }
    .copy-btn{
      position:absolute;
      top:.6rem;
      right:.6rem;
      border:none;
      border-radius:8px;
      padding:.3rem .7rem;
      background:rgba(255,255,255,.1);
      color:#fff;
      cursor:pointer;
      font-size:.75rem;
    }
    .matrix{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
      gap:1rem;
    }
    .matrix div{
      border:var(--border);
      border-radius:14px;
      padding:1rem;
      background:rgba(255,255,255,.03);
    }
    .status-dot{
      width:10px;
      height:10px;
      border-radius:50%;
      display:inline-block;
      margin-right:.4rem;
    }
    .ok{background:var(--success);}
    .warn{background:var(--danger);}
    .toggle-panel{
      display:flex;
      gap:1rem;
      flex-wrap:wrap;
    }
    .toggle{
      flex:1;
      min-width:180px;
      border-radius:14px;
      padding:1rem 1.2rem;
      border:var(--border);
      display:flex;
      align-items:center;
      justify-content:space-between;
    }
    .switch{
      position:relative;
      width:46px;
      height:24px;
    }
    .switch input{
      opacity:0;
      width:0;
      height:0;
    }
    .slider{
      position:absolute;
      cursor:pointer;
      inset:0;
      background:#333b4a;
      border-radius:999px;
      transition:.3s;
    }
    .slider:before{
      content:'';
      position:absolute;
      height:18px;
      width:18px;
      left:3px;
      top:3px;
      background:#fff;
      border-radius:50%;
      transition:.3s;
    }
    .switch input:checked + .slider{
      background:var(--accent);
    }
    .switch input:checked + .slider:before{
      transform:translateX(22px);
    }
    footer{
      margin-top:auto;
      text-align:center;
      padding:2rem 1rem 2.5rem;
      color:var(--muted);
      font-size:.9rem;
    }
    @media(max-width:720px){
      .timeline{border:none;padding-left:0;}
      .step::before{left:-28px;}
    }
  </style>
</head>
<body>
  <header>
    <div class="header-inner">
      <div class="brand">
        <i class="fas fa-vault"></i>
        Hardened LLM Forge
      </div>
      <a class="anycoder-link" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">Built with anycoder</a>
      <nav>
        <a href="#overview">Overview</a>
        <a href="#profiles">Profiles</a>
        <a href="#blueprint">Blueprint</a>
        <a href="#deploy">Deploy</a>
        <a href="#posture">Posture</a>
      </nav>
    </div>
  </header>

  <main>
    <section class="hero" id="overview">
      <h1>Hardened Alpine Images for Qwen 3 & Gemma 3</h1>
      <p>Deploy modern LLMs in zero-trust Alpine containers with immutable, read-only layers, local-only execution, and the strictest kernel hardening stack available. Choose between Qwen&nbsp;3 or Gemma&nbsp;3 builds—both running entirely offline while exposing only loopback ports and maintaining a forensic-friendly footprint.</p>
      <div class="cta-group">
        <button class="btn btn-primary"><i class="fas fa-shield-halved"></i>Provision Hardened Image</button>
        <button class="btn btn-ghost"><i class="fas fa-terminal"></i>View Offline Runbook</button>
      </div>
    </section>

    <section class="grid stats">
      <div class="card">
        <h3>Base Distribution</h3>
        <strong>Alpine 3.19</strong>
        <p class="tag"><i class="fas fa-snowflake"></i>musl + BusyBox</p>
      </div>
      <div class="card">
        <h3>Filesystem Mode</h3>
        <strong>read-only</strong>
        <p class="tag"><i class="fas fa-ban"></i>noexec / nosuid</p>
      </div>
      <div class="card">
        <h3>Network Surface</h3>
        <strong>127.0.0.1</strong>
        <p class="tag"><i class="fas fa-plug"></i>loopback only</p>
      </div>
      <div class="card">
        <h3>Capability Budget</h3>
        <strong>1 retained</strong>
        <p class="tag"><i class="fas fa-key"></i>CAP_NET_BIND_SERVICE</p>
      </div>
    </section>

    <section id="profiles">
      <h2 style="margin:0 0 1rem;">Model Profiles</h2>
      <div class="compare">
        <article class="profile-card active">
          <span class="badge">Qwen 3 Hardened</span>
          <h3 style="margin:.2rem 0 0;">Qwen 3 (7B/14B)</h3>
          <p style="color:var(--muted)">Optimized for multilingual reasoning with quantized weights (q4_0, q8_0) stored on a read-only volume. Includes hardware entropy mirroring for deterministic offline runs.</p>
          <ul>
            <li>Registry image: <code>registry.local/qwen3-alpine:secure</code></li>
            <li>ClamAV sweep of weights & binaries</li>
            <li>Seccomp allowlist (45 syscalls)</li>
            <li>Wireguard-ready for air-gapped updates</li>
          </ul>
        </article>
        <article class="profile-card">
          <span class="badge">Gemma 3 Hardened</span>
          <h3 style="margin:.2rem 0 0;">Gemma 3 (9B)</h3>
          <p style="color:var(--muted)">Latency-focused variant using llama.cpp runtime compiled with RELRO, stack canaries, and FORTIFY. Ships with detached attestations for every artifact.</p>
          <ul>
            <li>Image: <code>registry.local/gemma3-alpine:ro</code></li>
            <li>Read-only overlayfs with tmpfs scratch</li>
            <li>AppArmor profile <code>usr.bin.gemma</code></li>
            <li>Built for CPU-only, no CUDA dependency</li>
          </ul>
        </article>
      </div>
    </section>

    <section id="blueprint">
      <h2 style="margin:0 0 1rem;">Immutable Stack Blueprint</h2>
      <div class="timeline">
        <div class="step">
          <h3>1. Minimal Alpine Layer</h3>
          <p>apk add --no-cache bash tini curl; remove compilers, docs, and locales; enable <code>distroless</code>-style runtime.</p>
        </div>
        <div class="step">
          <h3>2. Model Injection (Read Only)</h3>
          <p>Weights unpacked to <code>/opt/models</code>, signed tarball verified with cosign, then mounted read-only through <code>overlayfs</code>.</p>
        </div>
        <div class="step">
          <h3>3. Hardening Envelope</h3>
          <p>seccomp.json, AppArmor policy, drop capabilities, disable ptrace, use unprivileged user <code>llm_runner</code> (UID 1100).</p>
        </div>
        <div class="step">
          <h3>4. Offline Runtime Contract</h3>
          <p>Entrypoint via <code>tini</code>, no DNS, <code>/etc/resolv.conf</code> emptied, firewall locks container to loopback, health checks executed locally.</p>
        </div>
      </div>
    </section>

    <section id="deploy">
      <h2 style="margin:0 0 1rem;">Deployment Snippets (Copy & run)</h2>
      <div class="code-grid">
        <div class="card" style="padding:0;">
          <pre><button class="copy-btn" data-target="dock">copy</button><code id="dock">FROM alpine:3.19

RUN addgroup -S llm && adduser -S llm -G llm \
 && apk add --no-cache tini ca-certificates \
 && apk add --no-cache --virtual .build-deps curl tar \
 && curl -sS https://registry.local/qwen3.tar.gz | tar xz -C /opt \
 && apk del .build-deps \
 && chown -R llm:llm /opt

USER llm
WORKDIR /opt/runtime
ENTRYPOINT ["/sbin/tini","--"]
CMD ["./launch.sh","--offline","--rofs"]</code></pre>
        </div>
        <div class="card" style="padding:0;">
          <pre><button class="copy-btn" data-target="compose">copy</button><code id="compose">services:
  qwen3-hardened:
    image: registry.local/qwen3-alpine:secure
    read_only: true
    tmpfs:
      - /tmp:rw,noexec,nosuid,size=64m
      - /run:rw,noexec,nosuid,size=16m
    network_mode: "none"
    security_opt:
      - no-new-privileges:true
      - apparmor=usr.bin.qwen3
      - seccomp=/policies/seccomp.json
    cap_drop: ["ALL"]
    cap_add: ["NET_BIND_SERVICE"]
    command: ["./serve","--port","8080","--bind","127.0.0.1"]</code></pre>
        </div>
        <div class="card" style="padding:0;">
          <pre><button class="copy-btn" data-target="runtime">copy</button><code id="runtime">docker run \
  --rm \
  --read-only \
  --tmpfs /tmp:rw,noexec,nosuid,size=64m \
  --tmpfs /var/log:rw,noexec,nosuid,size=16m \
  --cap-drop ALL \
  --cap-add NET_BIND_SERVICE \
  --security-opt seccomp=/policies/seccomp.json \
  --security-opt apparmor=usr.bin.gemma \
  --network none \
  -p 127.0.0.1:8080:8080 \
  registry.local/gemma3-alpine:ro \
  ./serve --offline --model /opt/models/gemma3.bin</code></pre>
        </div>
      </div>
    </section>

    <section id="posture">
      <h2 style="margin:0 0 1rem;">Security Posture Matrix</h2>
      <div class="matrix">
        <div>
          <span class="status-dot ok"></span><strong>Filesystem</strong>
          <p>Rootfs sealed read-only, tmpfs scratchpads with size quotas & noexec.</p>
        </div>
        <div>
          <span class="status-dot ok"></span><strong>Network</strong>
          <p>Docker network none; optional unix socket for supervisor only.</p>
        </div>
        <div>
          <span class="status-dot ok"></span><strong>Supply Chain</strong>
          <p>cosign attestations, SBOM exported via syft, images pinned by digest.</p>
        </div>
        <div>
          <span class="status-dot ok"></span><strong>Runtime</strong>
          <p>Seccomp allowlist, AppArmor enforce, kernel keyring disabled.</p>
        </div>
        <div>
          <span class="status-dot warn"></span><strong>Entropy</strong>
          <p>Optional rngd sidecar if hardware RNG unavailable (offline safe).</p>
        </div>
        <div>
          <span class="status-dot ok"></span><strong>Observability</strong>
          <p>Logs to stdout/stderr only; can be piped to local filebeat agent.</p>
        </div>
      </div>

      <h3 style="margin:2rem 0 1rem;">Offline Controls</h3>
      <div class="toggle-panel">
        <div class="toggle">
          <div>
            <strong>Internet Egress</strong>
            <p style="margin:0;color:var(--muted);font-size:.85rem;">Hard-blocked via iptables</p>
          </div>
          <label class="switch">
            <input type="checkbox" checked disabled>
            <span class="slider"></span>
          </label>
        </div>
        <div class="toggle">
          <div>
            <strong>Model FS Mutations</strong>
            <p style="margin:0;color:var(--muted);font-size:.85rem;">Overlay set as RO</p>
          </div>
          <label class="switch">
            <input type="checkbox" checked disabled>
            <span class="slider"></span>
          </label>
        </div>
        <div class="toggle">
          <div>
            <strong>Local-only Serving</strong>
            <p style="margin:0;color:var(--muted);font-size:.85rem;">127.0.0.1:8080</p>
          </div>
          <label class="switch">
            <input type="checkbox" checked disabled>
            <span class="slider"></span>
          </label>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <p>© 2024 Hardened LLM Forge — fully local, zero internet trust boundary maintained.</p>
  </footer>

  <script>
    document.querySelectorAll('.copy-btn').forEach(btn=>{
      btn.addEventListener('click',()=>{
        const id=btn.getAttribute('data-target');
        const text=document.getElementById(id).innerText;
        navigator.clipboard.writeText(text).then(()=>{
          const original=btn.textContent;
          btn.textContent='copied!';
          setTimeout(()=>btn.textContent='copy',1800);
        });
      });
    });
  </script>
</body>
</html>