Ralph-Pocket-Lab / index.html
bitzic's picture
Connect the public Device Lab invitation and physical-iPhone receipts
eccba12 verified
Raw History Blame Contribute Delete
41.9 kB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Choose, download, and verify the Ralph Qwen3-8B crown for your device.">
<meta name="theme-color" content="#1f3a6e">
<title>Ralph Pocket Lab</title>
<style>
:root {
--blue: #2e5bba;
--blue-deep: #1f3a6e;
--blue-dark: #17305e;
--blue-pale: #c7d7f3;
--navy: #14172b;
--navy-2: #1b213a;
--ink: #14172b;
--ink-2: #4f596d;
--ink-3: #7a8498;
--paper: #f5f7fb;
--surface: #ffffff;
--rule: #dce4f0;
--green: #178367;
--amber: #9d690f;
--shadow: 0 26px 70px -48px rgba(20, 23, 43, .58);
--radius: 18px;
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.skip-link {
position: fixed;
z-index: 100;
top: 10px;
left: 10px;
transform: translateY(-160%);
border-radius: 8px;
padding: 10px 13px;
background: #fff;
color: var(--blue-deep);
font-weight: 750;
}
.skip-link:focus { transform: translateY(0); }
.wrap { width: min(1160px, calc(100% - 36px)); margin-inline: auto; }
.hero {
position: relative;
overflow: hidden;
min-height: 600px;
background:
radial-gradient(circle at 16% 0%, rgba(127, 164, 232, .2), transparent 35%),
linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 67%, var(--blue-dark) 100%);
color: #fff;
}
.orbit {
position: absolute;
border: 2px solid rgba(207, 224, 255, .14);
border-radius: 50%;
pointer-events: none;
}
.orbit-a { width: 520px; height: 520px; top: -320px; right: -115px; }
.orbit-b { width: 340px; height: 340px; bottom: -245px; left: -110px; }
.orbit-c { width: 86px; height: 86px; top: 43%; right: 8%; border-color: rgba(207, 224, 255, .08); }
.nav {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
padding-block: 22px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.brand strong { font-size: 15px; letter-spacing: -.02em; }
.brand span { color: var(--blue-pale); font-family: var(--mono); font-size: 9px; letter-spacing: .13em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a { color: #e8effc; font-size: 13px; text-decoration: none; }
.nav-links a:hover { color: #fff; }
.nav-links .nav-cta { border: 1px solid rgba(255,255,255,.36); border-radius: 8px; padding: 9px 12px; }
.hero-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(0, 1.28fr) minmax(300px, .72fr);
gap: clamp(38px, 7vw, 90px);
align-items: end;
padding: clamp(60px, 9vw, 108px) 0 82px;
}
.eyebrow {
display: flex;
align-items: center;
gap: 9px;
margin: 0 0 22px;
color: var(--blue-pale);
font-family: var(--mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.eyebrow::before { width: 24px; height: 2px; background: currentColor; content: ""; }
h1 {
max-width: 820px;
margin: 0;
font-size: clamp(48px, 7.2vw, 92px);
font-weight: 760;
letter-spacing: -.064em;
line-height: .91;
}
h1 span { display: block; color: var(--blue-pale); }
.hero-copy > p {
max-width: 650px;
margin: 27px 0 0;
color: #e4ebf8;
font-size: clamp(16px, 2vw, 20px);
line-height: 1.55;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.button {
display: inline-flex;
min-height: 46px;
align-items: center;
justify-content: center;
gap: 8px;
border: 1px solid transparent;
border-radius: 9px;
padding: 0 16px;
font-size: 13px;
font-weight: 750;
text-decoration: none;
transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.button:hover { transform: translateY(-1px); }
.button-primary { background: #fff; color: var(--blue); }
.button-ghost { border-color: rgba(255,255,255,.38); color: #fff; }
.button-blue { background: var(--blue); color: #fff; }
.button-line { border-color: var(--rule); background: #fff; color: var(--blue-deep); }
.hero-proof {
border: 1px solid rgba(255,255,255,.2);
border-radius: 15px;
background: rgba(20, 23, 43, .2);
box-shadow: 0 35px 80px -52px rgba(0,0,0,.9);
backdrop-filter: blur(12px);
}
.hero-proof-head {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 15px 17px;
border-bottom: 1px solid rgba(255,255,255,.14);
color: var(--blue-pale);
font-family: var(--mono);
font-size: 9px;
letter-spacing: .1em;
text-transform: uppercase;
}
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #55dab0; box-shadow: 0 0 0 4px rgba(85,218,176,.11); }
.hero-metric { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 20px 18px; }
.hero-metric + .hero-metric { border-top: 1px solid rgba(255,255,255,.12); }
.hero-metric span { color: #bfcbe0; font-size: 12px; }
.hero-metric strong { color: #fff; font-family: var(--mono); font-size: 24px; letter-spacing: -.04em; }
.hero-metric small { color: var(--blue-pale); font-family: var(--mono); font-size: 9px; text-align: right; text-transform: uppercase; }
main { overflow: hidden; }
.section { padding-block: clamp(70px, 9vw, 118px); }
.section-white { background: var(--surface); }
.section-dark { position: relative; background: var(--navy); color: #fff; }
.section-blue { position: relative; overflow: hidden; background: var(--blue); color: #fff; }
.section-head { display: grid; grid-template-columns: minmax(0, .72fr) minmax(280px, .48fr); gap: 40px; align-items: end; margin-bottom: 38px; }
.kicker { margin: 0 0 13px; color: var(--blue); font-family: var(--mono); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.section-dark .kicker, .section-blue .kicker { color: var(--blue-pale); }
h2 { margin: 0; font-size: clamp(34px, 5vw, 60px); letter-spacing: -.05em; line-height: 1; }
.section-head > p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.section-dark .section-head > p, .section-blue .section-head > p { color: #aebbd0; }
.crown-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.crown-card {
position: relative;
min-width: 0;
border: 1px solid var(--rule);
border-radius: 14px;
padding: 21px;
background: #fff;
color: var(--ink);
text-align: left;
cursor: pointer;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.crown-card:hover { transform: translateY(-2px); border-color: #aec2e5; box-shadow: var(--shadow); }
.crown-card[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,91,186,.11), var(--shadow); }
.recommended {
position: absolute;
top: 14px;
right: 14px;
border-radius: 999px;
padding: 5px 7px;
background: #e9effb;
color: var(--blue-deep);
font-family: var(--mono);
font-size: 8px;
font-weight: 750;
letter-spacing: .07em;
text-transform: uppercase;
}
.crown-tier { color: var(--blue); font-family: var(--mono); font-size: 10px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.crown-card h3 { margin: 31px 0 5px; font-size: 22px; letter-spacing: -.035em; }
.crown-size { display: block; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.size-track { height: 4px; margin: 22px 0 18px; overflow: hidden; border-radius: 10px; background: #e5ebf4; }
.size-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),#7fa4e8); }
.crown-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--ink-3); font-family: var(--mono); font-size: 9px; line-height: 1.5; }
.crown-meta strong { color: var(--ink-2); font-weight: 650; }
.selected-panel {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
margin-top: 18px;
overflow: hidden;
border: 1px solid var(--rule);
border-radius: var(--radius);
background: #fff;
box-shadow: var(--shadow);
}
.selected-facts { padding: clamp(24px,4vw,43px); }
.selected-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.selected-top h3 { margin: 4px 0 0; font-size: clamp(25px,3vw,36px); letter-spacing: -.045em; }
.status-pill { flex: none; border-radius: 999px; padding: 6px 9px; background: #eaf7f2; color: var(--green); font-family: var(--mono); font-size: 8px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.fact-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 26px; border-top: 1px solid var(--rule); }
.fact { min-width: 0; padding: 15px 12px 14px 0; border-bottom: 1px solid var(--rule); }
.fact:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--rule); }
.fact span { display: block; color: var(--ink-3); font-family: var(--mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.fact strong, .fact a { display: block; margin-top: 5px; overflow-wrap: anywhere; color: var(--ink); font-size: 12px; line-height: 1.45; }
.fact a { color: var(--blue-deep); }
.hash-block { margin: 18px 0 0; padding: 14px; border-radius: 9px; background: #f0f4fa; }
.hash-block span { color: var(--ink-3); font-family: var(--mono); font-size: 8px; letter-spacing: .09em; text-transform: uppercase; }
.hash-block code { display: block; margin-top: 6px; overflow-wrap: anywhere; color: #394356; font-family: var(--mono); font-size: 10px; line-height: 1.55; }
.score-note { margin: 15px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.55; }
.command-panel { display: flex; flex-direction: column; padding: clamp(24px,4vw,43px); background: var(--navy-2); color: #fff; }
.command-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.command-head span { color: var(--blue-pale); font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.copy-button { border: 1px solid rgba(255,255,255,.24); border-radius: 7px; padding: 7px 9px; background: transparent; color: #e9eff9; font-size: 10px; cursor: pointer; }
.copy-button:hover { border-color: rgba(255,255,255,.5); }
pre { max-width: 100%; overflow: auto; margin: 17px 0 0; border-radius: 10px; padding: 18px; background: #0b1020; color: #dbe5f6; font: 11px/1.7 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.command-links { display: flex; flex-wrap: wrap; gap: 9px 17px; margin-top: 18px; }
.command-links a { color: var(--blue-pale); font-size: 11px; }
.template-note { margin: auto 0 0; padding-top: 20px; color: #99a8c0; font-size: 11px; line-height: 1.55; }
.template-note.warning { color: #e6c88d; }
.run-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.12); }
.run-step { padding: clamp(28px,4vw,44px); background: var(--navy-2); }
.run-step > span { color: var(--blue-pale); font-family: var(--mono); font-size: 10px; letter-spacing: .12em; }
.run-step h3 { margin: 27px 0 10px; font-size: 24px; letter-spacing: -.035em; }
.run-step p, .run-step li { color: #aebbd0; font-size: 13px; line-height: 1.65; }
.run-step ol { margin: 18px 0 0; padding-left: 19px; }
.run-step li + li { margin-top: 8px; }
.boundary { margin: 23px 0 0; padding: 15px 16px; border-left: 3px solid var(--blue); background: rgba(127,164,232,.08); color: #c7d2e4; font-size: 11px; line-height: 1.55; }
.receipt-grid { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: 22px; align-items: start; }
.receipt-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.field { min-width: 0; }
.field-wide { grid-column: 1 / -1; }
label { display: block; margin-bottom: 6px; color: var(--ink-2); font-size: 11px; font-weight: 700; }
input, select, textarea {
width: 100%;
border: 1px solid var(--rule);
border-radius: 9px;
padding: 11px 12px;
outline: none;
background: #fff;
color: var(--ink);
font-size: 13px;
}
input:focus, select:focus, textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46,91,186,.1); }
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.receipt-output { position: sticky; top: 18px; padding: 20px; border-radius: 14px; background: var(--navy); color: #fff; }
.receipt-output .command-head { margin-bottom: 4px; }
.receipt-output pre { min-height: 370px; margin-top: 13px; }
.privacy { margin: 15px 0 0; color: var(--ink-3); font-size: 11px; line-height: 1.55; }
.closing-orbit { width: 420px; height: 420px; right: -180px; bottom: -290px; border-color: rgba(255,255,255,.13); }
.closing { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 35px; align-items: end; }
.closing h2 { max-width: 760px; }
.closing h2 span { color: var(--blue-pale); }
.closing p { max-width: 660px; margin: 19px 0 0; color: #d5def0; line-height: 1.6; }
footer { padding: 28px 0; background: #0d1020; color: #838ea3; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 11px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 17px; }
.footer-links a { color: #aebbd0; }
.toast {
position: fixed;
z-index: 50;
right: 18px;
bottom: 18px;
transform: translateY(90px);
border-radius: 9px;
padding: 11px 14px;
background: #fff;
box-shadow: 0 12px 45px rgba(20,23,43,.28);
color: var(--blue-deep);
font-size: 12px;
font-weight: 750;
opacity: 0;
transition: transform .2s ease, opacity .2s ease;
}
.toast.show { transform: translateY(0); opacity: 1; }
@media (max-width: 900px) {
.hero-grid, .selected-panel, .receipt-grid { grid-template-columns: 1fr; }
.hero-proof { max-width: 560px; }
.crown-grid { grid-template-columns: 1fr 1fr; }
.section-head { grid-template-columns: 1fr; gap: 18px; }
.receipt-output { position: static; }
.closing { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 620px) {
.wrap { width: min(100% - 24px, 1160px); }
.nav-links a:not(.nav-cta) { display: none; }
.hero { min-height: auto; }
.hero-grid { padding-top: 45px; }
h1 { font-size: clamp(44px, 15vw, 66px); }
.crown-grid, .run-grid, .receipt-form { grid-template-columns: 1fr; }
.field-wide { grid-column: auto; }
.fact-grid { grid-template-columns: 1fr; }
.fact:nth-child(even) { padding-left: 0; border-left: 0; }
.footer-row { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; }
}
</style>
</head>
<body>
<a class="skip-link" href="#crowns">Skip to crowns</a>
<header class="hero">
<span class="orbit orbit-a" aria-hidden="true"></span>
<span class="orbit orbit-b" aria-hidden="true"></span>
<span class="orbit orbit-c" aria-hidden="true"></span>
<nav class="nav wrap" aria-label="Primary">
<a class="brand" href="https://ralphlabs.ai" target="_blank" rel="noopener">
<img src="https://ralphlabs.ai/brand/ralph-logo.png" alt="">
<span><strong>Ralph</strong><br>Bittensor SN40</span>
</a>
<div class="nav-links">
<a href="#crowns">Crowns</a>
<a href="#run">Run</a>
<a href="#receipt">Device receipt</a>
<a class="nav-cta" href="https://huggingface.co/RalphLabsAI/ralph-crowns" target="_blank" rel="noopener">View model ↗</a>
</div>
</nav>
<div class="hero-grid wrap">
<div class="hero-copy">
<p class="eyebrow">Ralph Pocket Lab · live crown manifest</p>
<h1>The same model.<span>Small enough for your phone.</span></h1>
<p>Qwen3-8B compressed into four public crowns. Same admitted architecture. Fewer bits. Every winner downloadable; every round auditable.</p>
<div class="hero-actions">
<a class="button button-primary" href="#crowns">Choose your crown ↓</a>
<a class="button button-ghost" href="https://huggingface.co/RalphLabsAI/ralph-crowns/discussions/3" target="_blank" rel="noopener">Join Device Lab #1 ↗</a>
<a class="button button-ghost" href="https://ralphlabs.ai/rounds/7" target="_blank" rel="noopener">Audit Round 7 ↗</a>
</div>
</div>
<aside class="hero-proof" aria-label="Sub2 size comparison">
<div class="hero-proof-head">
<span><i class="live-dot"></i><span id="source-status">loading live manifest</span></span>
<span>recommended start</span>
</div>
<div class="hero-metric">
<div><span>Qwen3-8B BF16 tensor estimate</span><strong>16.38 GB</strong></div>
<small>pinned<br>comparison</small>
</div>
<div class="hero-metric">
<div><span>Round 7 sub2 crown</span><strong>2.94 GB</strong></div>
<small>exact<br>GGUF size</small>
</div>
<div class="hero-metric">
<div><span>Weight-bearing parameter structure</span><strong>8.19B</strong></div>
<small>architecture<br>admission</small>
</div>
</aside>
</div>
</header>
<main id="main">
<section class="section section-white" id="device-lab">
<div class="wrap">
<div class="section-head">
<div><p class="kicker">Device Lab #1 · the open invitation</p><h2>Four real iPhones.<br>Your receipt next.</h2></div>
<p>Our configured 2.94 GB Round 7 sub2 crown loaded and answered in PocketPal on four physical iPhones. Watch the recorded runs, then add your own success or failure with your device, app version, and settings.</p>
</div>
<div class="hero-actions">
<a class="button button-blue" href="https://huggingface.co/RalphLabsAI/ralph-crowns/discussions/3" target="_blank" rel="noopener">Watch the video & join the discussion ↗</a>
<a class="button button-line" href="#receipt">Build your receipt ↓</a>
<a class="button button-line" href="https://huggingface.co/datasets/RalphLabsAI/ralph-device-lab/tree/7f5f1cfbf7882726a6c55a1d9b2f7c0ff06b3da8" target="_blank" rel="noopener">Inspect the uncut evidence ↗</a>
</div>
<p class="score-note">Team-authored BrowserStack physical-device tests, using a test-only PocketPal build. All four showed <strong>Memory tight</strong> and stayed connected—not App Store memory-fit or offline certification. The tested sub2 builder is <a href="https://huggingface.co/boweizh1204" target="_blank" rel="noopener">boweizh1204</a>. See the discussion for the exact file and full limitations.</p>
</div>
</section>
<section class="section section-white" id="crowns">
<div class="wrap">
<div class="section-head">
<div><p class="kicker">01 · Choose a crown</p><h2>Four sizes.<br>One open contest.</h2></div>
<p>Start with sub2 for the first phone test, or choose a different tradeoff. Sizes and hashes come from the public crown manifest; retention is Ralph's internal protocol metric, not a general quality score.</p>
</div>
<div class="crown-grid" id="crown-grid" aria-label="Crown selector"></div>
<div class="selected-panel" aria-live="polite">
<div class="selected-facts">
<div class="selected-top">
<div><span class="crown-tier" id="selected-tier">Sub2 crown</span><h3 id="selected-filename">ralph-qwen3-8b-sub2.gguf</h3></div>
<span class="status-pill" id="selected-status">new · round 7</span>
</div>
<div class="fact-grid">
<div class="fact"><span>Exact size</span><strong id="selected-size">2,937,263,168 bytes</strong></div>
<div class="fact"><span>Code bits / weight</span><strong id="selected-bits">2.2626</strong></div>
<div class="fact"><span>Retention at crown</span><strong id="selected-retention">0.282457</strong></div>
<div class="fact"><span>Chat-template key</span><strong id="selected-template">present</strong></div>
<div class="fact"><span>Scored source</span><a id="selected-source" href="#" target="_blank" rel="noopener">boweizh1204/… ↗</a></div>
<div class="fact"><span>Signed decision</span><a id="selected-record" href="#" target="_blank" rel="noopener">Round 7 record ↗</a></div>
</div>
<div class="hash-block"><span>SHA-256</span><code id="selected-hash"></code></div>
<p class="score-note">“Same model” means the same admitted architecture and parameter structure—not identical weights or guaranteed identical behavior.</p>
</div>
<div class="command-panel">
<div class="command-head"><span>Exact download</span><button class="copy-button" id="copy-download" type="button">Copy command</button></div>
<pre id="download-command"></pre>
<div class="command-head" style="margin-top:20px"><span>Verify after download</span><button class="copy-button" id="copy-verify" type="button">Copy checksum</button></div>
<pre id="verify-command"></pre>
<div class="command-links">
<a id="download-link" href="#" target="_blank" rel="noopener">Download file ↗</a>
<a href="https://huggingface.co/RalphLabsAI/ralph-crowns/blob/main/NOTICE" target="_blank" rel="noopener">License & notices ↗</a>
<a href="https://github.com/RalphLabsAI/ralph" target="_blank" rel="noopener">Protocol ↗</a>
</div>
<p class="template-note" id="template-note"></p>
</div>
</div>
</div>
</section>
<section class="section section-dark" id="run">
<div class="wrap">
<div class="section-head">
<div><p class="kicker">02 · Put it on a device</p><h2>One file.<br>One honest receipt.</h2></div>
<p>File size and format support are necessary—not sufficient—for a phone run. Record the exact device and settings so a success or failure teaches the next tester something real.</p>
</div>
<div class="run-grid">
<article class="run-step">
<span>POCKETPAL · iOS / Android</span>
<h3>Find it on the Hub</h3>
<ol>
<li>Open <strong>Models → Add from Hugging Face</strong>.</li>
<li>Search <strong>RalphLabsAI</strong> and open <strong>ralph-crowns</strong>.</li>
<li>Choose the exact filename shown above, then record the app's context and runtime settings.</li>
</ol>
<div class="boundary">PocketPal discoverability has been observed. It does not certify that every crown fits or runs well on every phone.</div>
</article>
<article class="run-step">
<span>LLAMA.CPP · DESKTOP / SERVER</span>
<h3>Run the same bytes</h3>
<p>For crowns with an embedded chat-template key, the standard conversation command is:</p>
<pre id="run-command"></pre>
<div class="boundary" id="run-boundary">Runtime support depends on the exact quantization, build, backend, memory, and context settings.</div>
</article>
</div>
</div>
</section>
<section class="section section-white" id="receipt">
<div class="wrap">
<div class="section-head">
<div><p class="kicker">03 · Make the run reproducible</p><h2>Build a device receipt.</h2></div>
<p>This form never uploads or stores anything. It produces Markdown you can paste into <a href="https://huggingface.co/RalphLabsAI/ralph-crowns/discussions/3" target="_blank" rel="noopener">Device Lab #1</a> with a screenshot or short recording.</p>
</div>
<div class="receipt-grid">
<form class="receipt-form" id="receipt-form" autocomplete="off">
<div class="field"><label for="receipt-device">Device</label><input id="receipt-device" placeholder="e.g. iPhone 16 Pro"></div>
<div class="field"><label for="receipt-os">OS version</label><input id="receipt-os" placeholder="e.g. iOS 20.0"></div>
<div class="field"><label for="receipt-app">App</label><select id="receipt-app"><option>PocketPal</option><option>Enclave</option><option>llama.cpp</option><option>Other</option></select></div>
<div class="field"><label for="receipt-app-version">App version</label><input id="receipt-app-version" placeholder="Exact version"></div>
<div class="field"><label for="receipt-context">Context size</label><input id="receipt-context" placeholder="e.g. 4096"></div>
<div class="field"><label for="receipt-loaded">Loaded successfully</label><select id="receipt-loaded"><option value="not recorded">Not recorded</option><option value="yes">Yes</option><option value="no">No</option></select></div>
<div class="field"><label for="receipt-prompt-speed">Prompt speed</label><input id="receipt-prompt-speed" placeholder="tokens/s, if shown"></div>
<div class="field"><label for="receipt-generation-speed">Generation speed</label><input id="receipt-generation-speed" placeholder="tokens/s, if shown"></div>
<div class="field field-wide"><label for="receipt-result">Result or exact failure</label><textarea id="receipt-result" placeholder="What happened? Include settings that may matter."></textarea></div>
<div class="field field-wide"><label for="receipt-media">Screenshot / recording URL</label><input id="receipt-media" placeholder="Optional public link"></div>
<div class="field field-wide"><button class="button button-blue" id="copy-receipt" type="button">Copy receipt</button> <a class="button button-line" href="https://huggingface.co/RalphLabsAI/ralph-crowns/discussions/3" target="_blank" rel="noopener">Post to Device Lab #1 ↗</a></div>
<p class="privacy field-wide">Before sharing media, hide notifications, account identifiers, serial numbers, and other private information. Failed loads are valid evidence.</p>
</form>
<aside class="receipt-output">
<div class="command-head"><span>Preview · Markdown</span><button class="copy-button" id="copy-receipt-top" type="button">Copy</button></div>
<pre id="receipt-preview"></pre>
</aside>
</div>
</div>
</section>
<section class="section section-blue">
<span class="orbit closing-orbit" aria-hidden="true"></span>
<div class="wrap closing">
<div><p class="kicker">THE OPEN INVITATION</p><h2>Download the crown.<br><span>Or build the model that takes it.</span></h2><p>Ralph turns compression into a public, recurring contest: pinned parent, fresh exam, signed decision, downloadable result.</p></div>
<a class="button button-primary" href="https://github.com/RalphLabsAI/ralph" target="_blank" rel="noopener">Read the miner guide ↗</a>
</div>
</section>
</main>
<footer>
<div class="wrap footer-row">
<span>Ralph · open model compression · Bittensor subnet 40</span>
<div class="footer-links"><a href="https://ralphlabs.ai" target="_blank" rel="noopener">Website</a><a href="https://huggingface.co/RalphLabsAI" target="_blank" rel="noopener">Hugging Face</a><a href="https://github.com/RalphLabsAI/ralph" target="_blank" rel="noopener">GitHub</a></div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite">Copied</div>
<script>
const REPO = "RalphLabsAI/ralph-crowns";
const MANIFEST_URL = `https://huggingface.co/${REPO}/resolve/main/crowns.json`;
const TIER_ORDER = ["binary", "ternary", "sub2", "sub4"];
const LABELS = { binary: "Binary crown", ternary: "Ternary crown", sub2: "Sub2 crown", sub4: "Sub4 crown" };
const FALLBACK = {
binary: { tier: "binary", filename: "ralph-qwen3-8b-binary.gguf", file_bytes: 1158964160, file_sha256: "05c568169fc180067172cbdd38c1a9f5c249a556ffdef1dacd7172bad40fab58", chat_template_present: false, code_bits: 1, retention: 0.263616, round: 7, source_repo: "ArizonaZZZ/ralph-v2-qwen3-8b-binary-p2A2-step500-05c56816", source_revision: "29c525c5c3166df2d62d5e180d09255199f778fe", record: "https://huggingface.co/datasets/RalphLabsAI/ralph-v2-rounds/resolve/main/rounds/round-00000007-f42ae20c6ed2a796.json" },
ternary: { tier: "ternary", filename: "ralph-qwen3-8b-ternary.gguf", file_bytes: 2477212736, file_sha256: "c643cb42575a7a85b7518fd935973202c5686db270ef8b593afa8616a986154a", chat_template_present: true, code_bits: 1.714, retention: 0.253732, round: 5, source_repo: "tensor-tailor/ralph-qwen3-8b-ternary-r5", source_revision: "3e4096acf9ce1eb270ba3897b5d8396425a18884", record: "https://huggingface.co/datasets/RalphLabsAI/ralph-v2-rounds/resolve/main/rounds/round-00000005-25e6fd0528a93e74.json" },
sub2: { tier: "sub2", filename: "ralph-qwen3-8b-sub2.gguf", file_bytes: 2937263168, file_sha256: "9c45bf0ac486e793bd761a99ce4b9d965ec12e70f2d420e02af16797c71f6b50", chat_template_present: true, code_bits: 2.2626, retention: 0.282457, round: 7, source_repo: "boweizh1204/ralph-qwen3-8b-sub2-qat5", source_revision: "261d535f67ba8e59f5d96ce7deeed98243ad8892", record: "https://huggingface.co/datasets/RalphLabsAI/ralph-v2-rounds/resolve/main/rounds/round-00000007-f42ae20c6ed2a796.json" },
sub4: { tier: "sub4", filename: "ralph-qwen3-8b-sub4.gguf", file_bytes: 4614304896, file_sha256: "b2ec80dce90258bbe9555a67983dea595d91f35cae48ca0d54c714eae8100edf", chat_template_present: true, code_bits: 4, retention: 0.320923, round: 7, source_repo: "boweizh1204/qwen3-8b-ralph-sub4-c1b-20260910", source_revision: "3c21306c630dac6440b37ad67b965a4b9b787cf9", record: "https://huggingface.co/datasets/RalphLabsAI/ralph-v2-rounds/resolve/main/rounds/round-00000007-f42ae20c6ed2a796.json" }
};
let crowns = Object.fromEntries(TIER_ORDER.map((tier) => [tier, { ...FALLBACK[tier] }]));
let selectedTier = "sub2";
let toastTimer;
const $ = (id) => document.getElementById(id);
const exactBytes = (value) => `${Number(value).toLocaleString("en-US")} bytes`;
const decimalGB = (value) => `${(Number(value) / 1e9).toFixed(2)} GB`;
const crownStatus = (tier, round) => tier === "ternary" ? `crowned r${round} · held r7` : `new · round ${round}`;
const sourceUrl = (item) => `https://huggingface.co/${item.source_repo}/tree/${item.source_revision}`;
const downloadUrl = (item) => `https://huggingface.co/${REPO}/resolve/main/${encodeURIComponent(item.filename)}?download=true`;
const downloadCommand = (item) => `hf download ${REPO} ${item.filename} --local-dir ./ralph-crowns`;
const verifyCommand = (item) => `sha256sum ./ralph-crowns/${item.filename}\n# expected: ${item.file_sha256}`;
const runCommand = (item) => item.chat_template_present
? `llama-cli -m ./ralph-crowns/${item.filename} -cnv --jinja \\\n -p "Explain one practical use of low-bit quantization."`
: `# No embedded chat-template key was found in ${item.filename}.\n# Establish a tested external template/runtime combination first.`;
function safeManifest(raw) {
if (!raw || typeof raw !== "object" || !TIER_ORDER.every((tier) => raw[tier])) return null;
const next = {};
for (const tier of TIER_ORDER) {
const item = raw[tier];
const fallback = FALLBACK[tier];
const filename = typeof item.filename === "string" && /^ralph-qwen3-8b-[a-z0-9-]+\.gguf$/.test(item.filename) ? item.filename : fallback.filename;
const sha = typeof item.file_sha256 === "string" && /^[a-f0-9]{64}$/.test(item.file_sha256) ? item.file_sha256 : fallback.file_sha256;
next[tier] = {
...fallback,
...item,
tier,
filename,
file_sha256: sha,
file_bytes: Number.isFinite(item.file_bytes) ? item.file_bytes : fallback.file_bytes,
code_bits: Number.isFinite(item.code_bits) ? item.code_bits : fallback.code_bits,
retention: Number.isFinite(item.retention) ? item.retention : fallback.retention,
round: Number.isInteger(item.round) ? item.round : fallback.round,
source_repo: typeof item.source_repo === "string" && /^[\w.-]+\/[\w.-]+$/.test(item.source_repo) ? item.source_repo : fallback.source_repo,
source_revision: typeof item.source_revision === "string" && /^[a-f0-9]{40}$/.test(item.source_revision) ? item.source_revision : fallback.source_revision,
record: typeof item.record === "string" && item.record.startsWith("https://huggingface.co/") ? item.record : fallback.record,
chat_template_present: item.chat_template_present === true || item.chat_template_present === false ? item.chat_template_present : fallback.chat_template_present
};
}
return next;
}
function renderCards() {
const maxSize = Math.max(...TIER_ORDER.map((tier) => crowns[tier].file_bytes));
$("crown-grid").replaceChildren(...TIER_ORDER.map((tier) => {
const item = crowns[tier];
const button = document.createElement("button");
button.type = "button";
button.className = "crown-card";
button.dataset.tier = tier;
button.setAttribute("aria-pressed", String(tier === selectedTier));
button.setAttribute("aria-label", `Select ${LABELS[tier]}, ${decimalGB(item.file_bytes)}`);
if (tier === "sub2") {
const badge = document.createElement("span");
badge.className = "recommended";
badge.textContent = "start here";
button.append(badge);
}
const tierLabel = document.createElement("span");
tierLabel.className = "crown-tier";
tierLabel.textContent = tier;
const heading = document.createElement("h3");
heading.textContent = `${item.code_bits} bit`;
const size = document.createElement("span");
size.className = "crown-size";
size.textContent = decimalGB(item.file_bytes);
const track = document.createElement("div");
track.className = "size-track";
const fill = document.createElement("i");
fill.style.width = `${Math.max(12, item.file_bytes / maxSize * 100)}%`;
track.append(fill);
const meta = document.createElement("div");
meta.className = "crown-meta";
const status = document.createElement("span");
status.innerHTML = `<strong>${tier === "ternary" ? "HELD" : "NEW"}</strong><br>round ${tier === "ternary" ? "7" : item.round}`;
const template = document.createElement("span");
template.innerHTML = `<strong>${item.chat_template_present ? "CHAT" : "NO CHAT"}</strong><br>template`;
meta.append(status, template);
button.append(tierLabel, heading, size, track, meta);
button.addEventListener("click", () => selectTier(tier));
return button;
}));
}
function selectTier(tier) {
selectedTier = tier;
const item = crowns[tier];
document.querySelectorAll(".crown-card").forEach((card) => card.setAttribute("aria-pressed", String(card.dataset.tier === tier)));
$("selected-tier").textContent = LABELS[tier];
$("selected-filename").textContent = item.filename;
$("selected-status").textContent = crownStatus(tier, item.round);
$("selected-size").textContent = exactBytes(item.file_bytes);
$("selected-bits").textContent = item.code_bits;
$("selected-retention").textContent = Number(item.retention).toFixed(6);
$("selected-template").textContent = item.chat_template_present ? "present" : "not found";
$("selected-source").href = sourceUrl(item);
$("selected-source").textContent = `${item.source_repo} @ ${item.source_revision.slice(0, 12)} ↗`;
$("selected-record").href = item.record;
$("selected-record").textContent = `Round ${item.round} record ↗`;
$("selected-hash").textContent = item.file_sha256;
$("download-command").textContent = downloadCommand(item);
$("verify-command").textContent = verifyCommand(item);
$("run-command").textContent = runCommand(item);
$("download-link").href = downloadUrl(item);
$("template-note").className = `template-note${item.chat_template_present ? "" : " warning"}`;
$("template-note").textContent = item.chat_template_present
? "An embedded chat-template key is present. Its presence does not certify support in every runtime."
: "No embedded chat-template key was found. Do not invent a universal chat command or repack the canonical file to add one.";
$("run-boundary").textContent = item.chat_template_present
? "Runtime support depends on the exact quantization, build, backend, memory, and context settings."
: "This crown needs a separately tested external chat template. The canonical GGUF bytes should remain unchanged.";
updateReceipt();
}
function receiptValue(id) { return $(id).value.trim() || "not recorded"; }
function receiptMarkdown() {
const item = crowns[selectedTier];
return `## Ralph device receipt\n\n` +
`- Device: ${receiptValue("receipt-device")}\n` +
`- OS version: ${receiptValue("receipt-os")}\n` +
`- App: ${receiptValue("receipt-app")}\n` +
`- App version: ${receiptValue("receipt-app-version")}\n` +
`- Exact GGUF: \`${item.filename}\`\n` +
`- SHA-256: \`${item.file_sha256}\`\n` +
`- Checksum verified: not recorded\n` +
`- Context size: ${receiptValue("receipt-context")}\n` +
`- Loaded successfully: ${receiptValue("receipt-loaded")}\n` +
`- Prompt processing speed: ${receiptValue("receipt-prompt-speed")}\n` +
`- Generation speed: ${receiptValue("receipt-generation-speed")}\n` +
`- Result or exact failure: ${receiptValue("receipt-result")}\n` +
`- Screenshot / recording: ${receiptValue("receipt-media")}\n`;
}
function updateReceipt() { $("receipt-preview").textContent = receiptMarkdown(); }
async function copyText(text, label = "Copied") {
try {
await navigator.clipboard.writeText(text);
} catch (_) {
const area = document.createElement("textarea");
area.value = text;
area.style.position = "fixed";
area.style.opacity = "0";
document.body.append(area);
area.select();
document.execCommand("copy");
area.remove();
}
clearTimeout(toastTimer);
$("toast").textContent = label;
$("toast").classList.add("show");
toastTimer = setTimeout(() => $("toast").classList.remove("show"), 1800);
}
$("copy-download").addEventListener("click", () => copyText(downloadCommand(crowns[selectedTier]), "Download command copied"));
$("copy-verify").addEventListener("click", () => copyText(verifyCommand(crowns[selectedTier]), "Checksum command copied"));
$("copy-receipt").addEventListener("click", () => copyText(receiptMarkdown(), "Device receipt copied"));
$("copy-receipt-top").addEventListener("click", () => copyText(receiptMarkdown(), "Device receipt copied"));
$("receipt-form").addEventListener("input", updateReceipt);
$("receipt-form").addEventListener("change", updateReceipt);
renderCards();
selectTier(selectedTier);
fetch(MANIFEST_URL, { headers: { Accept: "application/json" }, cache: "no-store" })
.then((response) => {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json();
})
.then((raw) => {
const checked = safeManifest(raw);
if (!checked) throw new Error("invalid manifest shape");
crowns = checked;
renderCards();
selectTier(selectedTier);
$("source-status").textContent = "live manifest";
})
.catch(() => {
$("source-status").textContent = "verified snapshot";
$("source-status").closest("span").title = "The live manifest could not be loaded; exact release snapshot values are shown.";
});
</script>
</body>
</html>