Spaces:

apiarium
/

labs

Running

App Files Files Community

labs / static /dashboard.html

3v324v23

deploy: unified router + dreamy website (2026-06-16T09:46:52Z)

c1a683f 22 days ago

Raw

History Blame Contribute Delete

9.88 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="theme-color" content="#FFD6E8" />
	<!-- CRITICAL: paint the dawn sky on the first byte, before any external CSS/JS
	loads. background-attachment:fixed locks it to the viewport AND is the only
	background iOS Safari renders in the overscroll/rubber-band region — so
	scrolling never exposes a bare strip. Literal hex because tokens.css
	hasn't loaded yet. -->
	<style>
	html{background:linear-gradient(180deg,#E8E0FF 0%,#FFD6E8 52%,#FFE5D9 100%) fixed;background-color:#FFD6E8;}
	</style>

	<title>Dashboard — DreamRouter</title>
	<meta name="description" content="Your DreamRouter account: credits, usage stats, and a streaming playground to try every model in the browser." />
	<meta name="robots" content="noindex, nofollow" />
	<link rel="canonical" href="https://apiarium-labs.hf.space/dashboard.html" />

	<meta property="og:type" content="website" />
	<meta property="og:title" content="Dashboard — DreamRouter" />
	<meta property="og:description" content="Live routing health, every model, and a streaming playground." />

	<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=Comfortaa:wght@400;500;700&family=Nunito:wght@400;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />

	<script src="https://unpkg.com/lenis@1.1.13/dist/lenis.min.js" defer></script>

	<link rel="stylesheet" href="css/tokens.css?v=20260620d" />
	<link rel="stylesheet" href="css/base.css?v=20260620d" />
	<link rel="stylesheet" href="css/scene.css?v=20260620d" />
	<link rel="stylesheet" href="css/whale.css?v=20260620d" />
	<link rel="stylesheet" href="css/nav.css?v=20260620d" />
	<link rel="stylesheet" href="css/auth.css?v=20260620d" />
	<link rel="stylesheet" href="css/billing.css?v=20260620d" />
	</head>

	<body data-page="dashboard">

	<div class="blur-overlay" aria-hidden="true"></div>
	<div class="grain-overlay" aria-hidden="true"></div>

	<div class="scene" aria-hidden="true">
	<div class="layer layer-far-clouds" data-speed="0.05" data-mouse="6">
	<svg class="cloud-far c1" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	<svg class="cloud-far c2" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	<svg class="cloud-far c3" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	</div>
	<div class="layer layer-mid-clouds" data-speed="0.16" data-mouse="16">
	<svg class="cloud-mid m1" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	<svg class="cloud-mid m2" viewBox="0 0 200 100"><use href="#cloud"/></svg>
	</div>
	</div>

	<div class="layer layer-top layer-bubbles bubbles" data-speed="0.26" data-mouse="28" aria-hidden="true"></div>

	<svg width="0" height="0" style="position:absolute" aria-hidden="true">
	<defs>
	<symbol id="cloud" viewBox="0 0 200 100">
	<path d="M40 80 Q20 80 20 60 Q20 45 38 42 Q42 22 65 25 Q78 8 98 18 Q118 5 132 22 Q155 18 162 40 Q180 44 178 64 Q178 80 158 80 Z"
	fill="#FFF5F8" opacity="0.9"/>
	</symbol>
	</defs>
	</svg>

	<div data-site-nav></div>

	<main id="main" class="dash-shell">

	<div class="dash-head">
	<div>
	<h1 id="greet">welcome back</h1>
	<p>Your account — credits, usage, and a streaming playground to try every model.</p>
	<span class="endpoint-mini"><code id="endpoint-mini">https://apiarium-labs.hf.space/v1</code></span>
	</div>
	<button type="button" class="logout-btn" id="logout">
	<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/>
	</svg>
	Sign out
	</button>
	</div>

	<!-- ============ YOUR ETHEREUM ADDRESS (hero) ============ -->
	<section class="dash-section wallet-hero" id="wallet-hero" aria-label="Your Ethereum wallet" hidden>
	<div class="wallet-card">
	<!-- scannable QR (phone wallet deposit) -->
	<div class="wallet-qr" id="wallet-qr" aria-hidden="true">
	<span class="wallet-qr-fallback" title="your deposit address QR">▨</span>
	</div>
	<!-- address + key details -->
	<div class="wallet-detail">
	<span class="wallet-label">your ethereum address</span>
	<code class="wallet-addr" id="wallet-addr">loading…</code>
	<div class="wallet-meta">
	<span class="wallet-chain"><svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg> Base L2</span>
	<span class="wallet-cur">ETH</span>
	</div>
	<div class="wallet-actions">
	<button type="button" class="btn btn-primary wallet-copy" id="wallet-copy">Copy address</button>
	<span class="wallet-copyok" id="wallet-copyok" hidden>Copied!</span>
	</div>
	<p class="wallet-note">
	Send ETH on the <strong>Base</strong> network to add credits (1 credit = $0.0001).
	Models tagged <code>free:</code> are <strong>always free</strong>, no credits needed.
	</p>
	<!-- API key (secondary — the key IS this address with an sk- prefix) -->
	<div class="wallet-keyrow">
	<span class="wallet-keylabel">api key</span>
	<code class="wallet-key" id="kh-key">…</code>
	<button type="button" class="copy-btn" id="kh-copy">Copy key</button>
	</div>
	</div>
	</div>
	</section>

	<!-- ============ YOUR USAGE ============ -->
	<section class="stats-row" aria-label="Your usage" id="stats-row" aria-live="polite">
	<!-- populated by dashboard.js; skeletons first -->
	</section>

	<!-- ============ BILLING ============ -->
	<section class="dash-section billing-section" id="billing-section" aria-label="Credits and wallet" hidden>
	<h2>credits & wallet</h2>
	<div class="billing-grid" id="billing-grid" aria-live="polite">
	<!-- populated by billing.js -->
	</div>
	<div class="ledger-wrap" id="ledger-wrap" hidden>
	<h3 class="ledger-title">transaction history</h3>
	<div class="ledger-table-scroll">
	<table class="ledger-table" id="ledger-table">
	<thead>
	<tr>
	<th scope="col">when</th>
	<th scope="col">type</th>
	<th scope="col">detail</th>
	<th scope="col" class="num">credits</th>
	</tr>
	</thead>
	<tbody id="ledger-body">
	<!-- populated by billing.js -->
	</tbody>
	</table>
	</div>
	<p class="ledger-empty" id="ledger-empty" hidden>No transactions yet. Make a request or deposit ETH to see activity here.</p>
	</div>
	</section>

	<!-- ============ PLAYGROUND ============ -->
	<section class="dash-section" aria-label="Streaming playground">
	<h2>try it live</h2>
	<form class="playground" id="pg-form">
	<div class="pg-row split">
	<div class="field" style="margin:0;">
	<label for="pg-model">Model</label>
	<div class="input-wrap">
	<select id="pg-model" name="model" required>
	<option value="">Loading models…</option>
	</select>
	</div>
	</div>
	<div class="field" style="margin:0;">
	<label for="pg-tokens">Max tokens</label>
	<div class="input-wrap">
	<input id="pg-tokens" type="number" min="1" max="4096" value="256" inputmode="numeric" />
	</div>
	</div>
	</div>
	<div class="field" style="margin:0;">
	<label for="pg-prompt">Your message</label>
	<div class="input-wrap">
	<textarea id="pg-prompt" name="prompt" placeholder="Ask the whale anything…" rows="3">Say hello in one short sentence.</textarea>
	</div>
	</div>
	<div class="pg-actions">
	<button type="submit" class="btn btn-primary auth-submit" id="pg-send" style="width:auto;min-height:48px;padding:0 1.6rem;">
	<span class="spinner" aria-hidden="true"></span>
	<span class="label">Send</span>
	</button>
	<button type="button" class="logout-btn" id="pg-clear" style="border-color:var(--panel-border);">Clear</button>
	<span class="pg-status" id="pg-status" role="status"></span>
	</div>
	<div class="pg-output" id="pg-output" aria-label="Model response" tabindex="0"></div>
	</form>
	</section>

	<!-- ============ MODELS ============ -->
	<section class="dash-section" aria-label="All models">
	<h2>every model</h2>
	<div class="model-grid" id="model-grid" aria-live="polite">
	<!-- populated by dashboard.js -->
	</div>
	</section>

	</main>

	<div data-site-footer></div>

	<script src="js/layout.js?v=20260620d"></script>
	<script src="js/motion.js?v=20260620d"></script>
	<script src="js/parallax.js?v=20260620d"></script>
	<script src="js/whale.js?v=20260620d"></script>
	<script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.js" crossorigin="anonymous"></script>
	<script src="js/dashboard.js?v=20260620d"></script>
	<script src="js/billing.js?v=20260620d"></script>
	</body>
	</html>