Spaces:

matthewspring
/

anycoder-08f3fd38

Running

App Files Files Community

anycoder-08f3fd38 / index.html

matthewspring

Upload folder using huggingface_hub

938924d verified 8 days ago

raw

history blame contribute delete

17.9 kB

	<!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 3 or Gemma 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>