0ac0009c50
- 8 html files (main-view, detail, pastebin-panel, etc) now committed in canonical @prospector - These are the visual contract; referenced from READMEs and future app impl - Cleans git status after package migration commit - (Note: duplication with @quinn-prospector/designs until app relocation in indep wave) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
122 lines
7 KiB
HTML
122 lines
7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Quinn Prospector • DO GPU Hosts</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--app-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
|
|
}
|
|
body {
|
|
font-family: var(--app-font);
|
|
font-feature-settings: "kern" "liga" "tnum";
|
|
}
|
|
.mac-window {
|
|
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.6),
|
|
0 10px 10px -5px rgb(0 0 0 / 0.4);
|
|
border: 1px solid #3f3f46;
|
|
}
|
|
.mac-titlebar {
|
|
background: linear-gradient(to bottom, #27272a, #1f1f22);
|
|
font-weight: 500;
|
|
letter-spacing: -0.2px;
|
|
}
|
|
.text-primary { color: #f1f5f9; }
|
|
.text-secondary { color: #cbd5e1; }
|
|
.text-muted { color: #94a3b8; }
|
|
.section-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.3px;
|
|
color: #e2e8f0;
|
|
}
|
|
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
|
|
.gpu-bar { transition: width 0.4s cubic-bezier(0.23, 1.0, 0.32, 1); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-[#0a0a0c] flex items-center justify-center min-h-screen p-8 text-[#e2e8f0]">
|
|
<div class="mac-window w-[960px] bg-[#1c1c1f] rounded-2xl overflow-hidden shadow-2xl">
|
|
<!-- macOS Title Bar -->
|
|
<div class="mac-titlebar h-9 px-4 flex items-center border-b border-[#3f3f46]">
|
|
<div class="flex items-center gap-x-2 text-xs">
|
|
<div class="flex gap-x-1.5">
|
|
<div class="w-[12px] h-[12px] rounded-full bg-[#ff5f57] border border-[#e0443e]/60"></div>
|
|
<div class="w-[12px] h-[12px] rounded-full bg-[#febc2e] border border-[#d9a023]/60"></div>
|
|
<div class="w-[12px] h-[12px] rounded-full bg-[#28c840] border border-[#1a9e2b]/60"></div>
|
|
</div>
|
|
<span class="font-medium text-[#d1d5db] ml-1">Hosts & DO GPU On-Demand Fleet</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 text-sm">
|
|
<div class="flex gap-5">
|
|
<!-- Main GPU droplet card -->
|
|
<div class="flex-1 bg-[#111113] border border-[#166534] rounded-2xl p-5">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<div class="flex items-center gap-x-2">
|
|
<div class="text-emerald-400 font-semibold text-base tracking-tight">prospector-gpu-raw</div>
|
|
</div>
|
|
<div class="text-xs text-[#94a3b8] mt-0.5">nyc2 • H100 80GB • Raw Ubuntu</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">ONLINE</div>
|
|
<div class="mono text-[10px] text-[#64748b] mt-1">10.9.0.42 (wg1)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<div class="flex justify-between items-center mb-1 text-xs">
|
|
<span class="text-[#cbd5e1]">vLLM DeepSeek-R1-Distill</span>
|
|
<span class="font-mono text-emerald-400">87% GPU</span>
|
|
</div>
|
|
<div class="h-1.5 bg-[#052e16] rounded-full overflow-hidden">
|
|
<div class="gpu-bar h-1.5 bg-emerald-400 rounded-full" style="width: 87%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-[11px] leading-snug text-[#64748b]">
|
|
Provisioned via <span class="font-mono text-emerald-400/80">provision-raw-gpu-droplet.sh</span> • model-boss registered • <strong>backend only</strong> (quinn-api models). The 2 quinn-prospector apps (OSX + iOS) access the private API + shared DB via SSO (no mesh/VPN).
|
|
</div>
|
|
|
|
<div class="mt-4 flex gap-x-2">
|
|
<button class="px-3 py-1 text-xs rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 transition active:bg-white/15">SSH into droplet</button>
|
|
<button class="px-3 py-1 text-xs rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 transition active:bg-white/15">View logs (nvidia-smi)</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mesh / Fleet sidebar -->
|
|
<div class="w-72 bg-[#111113] border border-[#3f3f46] rounded-2xl p-4">
|
|
<div class="section-title mb-2.5">Mesh / Fleet</div>
|
|
<div class="space-y-1 text-xs">
|
|
<div class="flex justify-between items-center bg-[#1f2937] px-2.5 py-1.5 rounded-lg">
|
|
<span class="text-[#e2e8f0]">Hub (vps-0)</span>
|
|
<span class="mono text-emerald-400">10.9.0.1</span>
|
|
</div>
|
|
<div class="flex justify-between items-center bg-[#1f2937] px-2.5 py-1.5 rounded-lg">
|
|
<span class="text-[#e2e8f0]">black (quinn.api)</span>
|
|
<span class="mono text-emerald-400">10.9.0.4</span>
|
|
</div>
|
|
<div class="flex justify-between items-center bg-emerald-500/10 px-2.5 py-1.5 rounded-lg border border-emerald-500/20">
|
|
<span class="font-medium text-emerald-300">GPU (this)</span>
|
|
<span class="mono text-emerald-400">10.9.0.42</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-[10px] text-emerald-400/70 mt-3 leading-tight">
|
|
Joined via uvlava / net-tools mesh patterns (same as tv-anarchy)
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5 pt-4 border-t border-[#3f3f46] text-[11px] text-[#64748b] leading-relaxed">
|
|
On-demand GPU (vLLM + model-boss) used by the shared quinn-api backend for prospector classify + draft (uncensored OSS models optimized for the work).
|
|
<strong>Client apps (this OSX + dedicated iOS quinn-prospector)</strong> access the private quinn-api + DB via SSO only — no mesh/VPN required.
|
|
See lilith-platform.live/scripts/provision-raw-gpu-droplet.sh and cocottetech terraform/test-fleet for IaC. The mesh is backend-only.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|