diff options
Diffstat (limited to 'about/showcase/hypr/image-1.svg')
| -rw-r--r-- | about/showcase/hypr/image-1.svg | 425 |
1 files changed, 425 insertions, 0 deletions
diff --git a/about/showcase/hypr/image-1.svg b/about/showcase/hypr/image-1.svg new file mode 100644 index 00000000..6bf71b4d --- /dev/null +++ b/about/showcase/hypr/image-1.svg @@ -0,0 +1,425 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1536 512" width="1536" height="512"> + <title>Hyperstack · Pi · FreeBSD Logo</title> + <defs> + <!-- Background gradient --> + <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0%" style="stop-color:#0d1117"/> + <stop offset="100%" style="stop-color:#161b22"/> + </linearGradient> + <!-- Blue: Hyperstack / GPU --> + <linearGradient id="gpuGrad" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0%" style="stop-color:#1f6feb"/> + <stop offset="100%" style="stop-color:#388bfd"/> + </linearGradient> + <!-- Pi symbol gradient --> + <linearGradient id="piGrad" x1="0%" y1="0%" x2="0%" y2="100%"> + <stop offset="0%" style="stop-color:#58a6ff"/> + <stop offset="100%" style="stop-color:#1f6feb"/> + </linearGradient> + <!-- Red: FreeBSD daemon horns --> + <linearGradient id="bsdGrad" x1="0%" y1="0%" x2="100%" y2="0%"> + <stop offset="0%" style="stop-color:#ff6b6b"/> + <stop offset="100%" style="stop-color:#ff4444"/> + </linearGradient> + <!-- Purple: AI / neural network --> + <linearGradient id="aiGrad" x1="0%" y1="0%" x2="100%" y2="100%"> + <stop offset="0%" style="stop-color:#a78bfa"/> + <stop offset="100%" style="stop-color:#7c3aed"/> + </linearGradient> + <!-- Green: tmux status bar --> + <linearGradient id="tmuxBar" x1="0%" y1="0%" x2="100%" y2="0%"> + <stop offset="0%" style="stop-color:#1a2d1a"/> + <stop offset="100%" style="stop-color:#0d1f0d"/> + </linearGradient> + + <!-- Glow for Pi symbol --> + <filter id="glow" x="-25%" y="-25%" width="150%" height="150%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="blur"/> + <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge> + </filter> + <!-- Glow for BSD horns --> + <filter id="hornGlow" x="-40%" y="-40%" width="180%" height="180%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"/> + <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge> + </filter> + <!-- Glow for AI nodes --> + <filter id="aiGlow" x="-60%" y="-60%" width="220%" height="220%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"/> + <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge> + </filter> + <!-- Soft glow for GPU chip --> + <filter id="chipGlow" x="-20%" y="-20%" width="140%" height="140%"> + <feGaussianBlur in="SourceGraphic" stdDeviation="4" result="blur"/> + <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge> + </filter> + </defs> + + <!-- ═══════════════════════════════════════════════════════════ + BACKGROUND + ═══════════════════════════════════════════════════════════ --> + <rect width="1536" height="512" rx="40" fill="url(#bg)"/> + + <!-- Full-width GPU circuit grid background texture --> + <g opacity="0.10" stroke="#388bfd" stroke-width="1"> + <!-- Horizontals --> + <line x1="0" y1="64" x2="1536" y2="64"/> + <line x1="0" y1="128" x2="1536" y2="128"/> + <line x1="0" y1="192" x2="1536" y2="192"/> + <line x1="0" y1="256" x2="1536" y2="256"/> + <line x1="0" y1="320" x2="1536" y2="320"/> + <line x1="0" y1="384" x2="1536" y2="384"/> + <line x1="0" y1="448" x2="1536" y2="448"/> + <!-- Verticals --> + <line x1="64" y1="0" x2="64" y2="512"/> + <line x1="128" y1="0" x2="128" y2="512"/> + <line x1="192" y1="0" x2="192" y2="512"/> + <line x1="256" y1="0" x2="256" y2="512"/> + <line x1="320" y1="0" x2="320" y2="512"/> + <line x1="384" y1="0" x2="384" y2="512"/> + <line x1="448" y1="0" x2="448" y2="512"/> + <line x1="512" y1="0" x2="512" y2="512"/> + <line x1="576" y1="0" x2="576" y2="512"/> + <line x1="640" y1="0" x2="640" y2="512"/> + <line x1="704" y1="0" x2="704" y2="512"/> + <line x1="768" y1="0" x2="768" y2="512"/> + <line x1="832" y1="0" x2="832" y2="512"/> + <line x1="896" y1="0" x2="896" y2="512"/> + <line x1="960" y1="0" x2="960" y2="512"/> + <line x1="1024" y1="0" x2="1024" y2="512"/> + <line x1="1088" y1="0" x2="1088" y2="512"/> + <line x1="1152" y1="0" x2="1152" y2="512"/> + <line x1="1216" y1="0" x2="1216" y2="512"/> + <line x1="1280" y1="0" x2="1280" y2="512"/> + <line x1="1344" y1="0" x2="1344" y2="512"/> + <line x1="1408" y1="0" x2="1408" y2="512"/> + <line x1="1472" y1="0" x2="1472" y2="512"/> + </g> + + <!-- ═══════════════════════════════════════════════════════════ + LEFT PANEL: AI Neural Network + GPU A100 chip + x: 0–460 + ═══════════════════════════════════════════════════════════ --> + + <!-- GPU A100 chip outline (left, centred vertically) --> + <!-- Chip body --> + <rect x="48" y="156" width="180" height="200" rx="10" + fill="none" stroke="#1f6feb" stroke-width="2" opacity="0.55" + filter="url(#chipGlow)"/> + <!-- Chip inner die --> + <rect x="74" y="182" width="128" height="148" rx="6" + fill="#1f6feb" fill-opacity="0.06" stroke="#388bfd" stroke-width="1" opacity="0.7"/> + <!-- Die grid pattern inside chip --> + <g stroke="#388bfd" stroke-width="0.5" opacity="0.35"> + <line x1="74" y1="214" x2="202" y2="214"/> + <line x1="74" y1="246" x2="202" y2="246"/> + <line x1="74" y1="278" x2="202" y2="278"/> + <line x1="74" y1="310" x2="202" y2="310"/> + <line x1="106" y1="182" x2="106" y2="330"/> + <line x1="138" y1="182" x2="138" y2="330"/> + <line x1="170" y1="182" x2="170" y2="330"/> + </g> + <!-- Chip pins — left side --> + <g stroke="#388bfd" stroke-width="2" opacity="0.6"> + <line x1="24" y1="180" x2="48" y2="180"/> + <line x1="24" y1="204" x2="48" y2="204"/> + <line x1="24" y1="228" x2="48" y2="228"/> + <line x1="24" y1="252" x2="48" y2="252"/> + <line x1="24" y1="276" x2="48" y2="276"/> + <line x1="24" y1="300" x2="48" y2="300"/> + <line x1="24" y1="324" x2="48" y2="324"/> + <line x1="24" y1="348" x2="48" y2="348"/> + </g> + <!-- Chip pins — right side --> + <g stroke="#388bfd" stroke-width="2" opacity="0.6"> + <line x1="228" y1="180" x2="252" y2="180"/> + <line x1="228" y1="204" x2="252" y2="204"/> + <line x1="228" y1="228" x2="252" y2="228"/> + <line x1="228" y1="252" x2="252" y2="252"/> + <line x1="228" y1="276" x2="252" y2="276"/> + <line x1="228" y1="300" x2="252" y2="300"/> + <line x1="228" y1="324" x2="252" y2="324"/> + <line x1="228" y1="348" x2="252" y2="348"/> + </g> + <!-- Chip pins — top side --> + <g stroke="#388bfd" stroke-width="2" opacity="0.6"> + <line x1="80" y1="132" x2="80" y2="156"/> + <line x1="106" y1="132" x2="106" y2="156"/> + <line x1="132" y1="132" x2="132" y2="156"/> + <line x1="158" y1="132" x2="158" y2="156"/> + <line x1="184" y1="132" x2="184" y2="156"/> + <line x1="210" y1="132" x2="210" y2="156"/> + </g> + <!-- Chip pins — bottom side --> + <g stroke="#388bfd" stroke-width="2" opacity="0.6"> + <line x1="80" y1="356" x2="80" y2="380"/> + <line x1="106" y1="356" x2="106" y2="380"/> + <line x1="132" y1="356" x2="132" y2="380"/> + <line x1="158" y1="356" x2="158" y2="380"/> + <line x1="184" y1="356" x2="184" y2="380"/> + <line x1="210" y1="356" x2="210" y2="380"/> + </g> + <!-- A100 label inside chip --> + <text x="138" y="262" + text-anchor="middle" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="22" font-weight="700" letter-spacing="1" + fill="#388bfd" opacity="0.8">A100</text> + <text x="138" y="284" + text-anchor="middle" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="10" font-weight="400" letter-spacing="1" + fill="#1f6feb" opacity="0.6">80GB · PCIe</text> + + <!-- Neural network nodes (AI) — right of the chip, bridging to center --> + <!-- Layer 1 (input) nodes — x≈290 --> + <g filter="url(#aiGlow)"> + <circle cx="295" cy="160" r="10" fill="url(#aiGrad)" opacity="0.85"/> + <circle cx="295" cy="220" r="10" fill="url(#aiGrad)" opacity="0.85"/> + <circle cx="295" cy="280" r="10" fill="url(#aiGrad)" opacity="0.85"/> + <circle cx="295" cy="340" r="10" fill="url(#aiGrad)" opacity="0.85"/> + </g> + <!-- Layer 2 (hidden) nodes — x≈360 --> + <g filter="url(#aiGlow)"> + <circle cx="370" cy="140" r="12" fill="url(#aiGrad)" opacity="0.90"/> + <circle cx="370" cy="200" r="12" fill="url(#aiGrad)" opacity="0.90"/> + <circle cx="370" cy="260" r="12" fill="url(#aiGrad)" opacity="0.90"/> + <circle cx="370" cy="320" r="12" fill="url(#aiGrad)" opacity="0.90"/> + <circle cx="370" cy="380" r="12" fill="url(#aiGrad)" opacity="0.90"/> + </g> + <!-- Layer 3 (output/bridge) nodes — x≈435 --> + <g filter="url(#aiGlow)"> + <circle cx="435" cy="180" r="9" fill="url(#aiGrad)" opacity="0.75"/> + <circle cx="435" cy="256" r="9" fill="url(#aiGrad)" opacity="0.75"/> + <circle cx="435" cy="332" r="9" fill="url(#aiGrad)" opacity="0.75"/> + </g> + <!-- Neural connections layer 1 → 2 --> + <g stroke="#7c3aed" stroke-width="1" fill="none" opacity="0.28"> + <line x1="305" y1="160" x2="358" y2="140"/> + <line x1="305" y1="160" x2="358" y2="200"/> + <line x1="305" y1="160" x2="358" y2="260"/> + <line x1="305" y1="220" x2="358" y2="140"/> + <line x1="305" y1="220" x2="358" y2="200"/> + <line x1="305" y1="220" x2="358" y2="260"/> + <line x1="305" y1="220" x2="358" y2="320"/> + <line x1="305" y1="280" x2="358" y2="200"/> + <line x1="305" y1="280" x2="358" y2="260"/> + <line x1="305" y1="280" x2="358" y2="320"/> + <line x1="305" y1="280" x2="358" y2="380"/> + <line x1="305" y1="340" x2="358" y2="260"/> + <line x1="305" y1="340" x2="358" y2="320"/> + <line x1="305" y1="340" x2="358" y2="380"/> + </g> + <!-- Neural connections layer 2 → 3 --> + <g stroke="#8b5cf6" stroke-width="1" fill="none" opacity="0.32"> + <line x1="382" y1="140" x2="426" y2="180"/> + <line x1="382" y1="200" x2="426" y2="180"/> + <line x1="382" y1="200" x2="426" y2="256"/> + <line x1="382" y1="260" x2="426" y2="180"/> + <line x1="382" y1="260" x2="426" y2="256"/> + <line x1="382" y1="260" x2="426" y2="332"/> + <line x1="382" y1="320" x2="426" y2="256"/> + <line x1="382" y1="320" x2="426" y2="332"/> + <line x1="382" y1="380" x2="426" y2="332"/> + </g> + <!-- Chip → neural network trace --> + <g stroke="#388bfd" stroke-width="1.5" fill="none" opacity="0.35"> + <polyline points="252,252 275,252 275,220 285,220"/> + <polyline points="252,300 275,300 275,340 285,340"/> + </g> + + <!-- "AI" label --> + <text x="138" y="110" + text-anchor="middle" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="11" font-weight="400" letter-spacing="2" + fill="#7c3aed" opacity="0.6">NEURAL · AI</text> + + <!-- ═══════════════════════════════════════════════════════════ + CENTER PANEL: π symbol with BSD daemon horns + Centred at x=768 + ═══════════════════════════════════════════════════════════ --> + + <!-- Stronger GPU grid in center zone only --> + <g opacity="0.18" stroke="#388bfd" stroke-width="1"> + <line x1="512" y1="128" x2="1024" y2="128"/> + <line x1="512" y1="192" x2="1024" y2="192"/> + <line x1="512" y1="256" x2="1024" y2="256"/> + <line x1="512" y1="320" x2="1024" y2="320"/> + <line x1="512" y1="384" x2="1024" y2="384"/> + <line x1="576" y1="80" x2="576" y2="450"/> + <line x1="640" y1="80" x2="640" y2="450"/> + <line x1="704" y1="80" x2="704" y2="450"/> + <line x1="768" y1="80" x2="768" y2="450"/> + <line x1="832" y1="80" x2="832" y2="450"/> + <line x1="896" y1="80" x2="896" y2="450"/> + <line x1="960" y1="80" x2="960" y2="450"/> + </g> + <!-- Circuit nodes in center --> + <g fill="#1f6feb" opacity="0.38"> + <circle cx="576" cy="128" r="4"/> + <circle cx="640" cy="192" r="4"/> + <circle cx="896" cy="128" r="4"/> + <circle cx="960" cy="192" r="4"/> + <circle cx="576" cy="384" r="4"/> + <circle cx="640" cy="320" r="4"/> + <circle cx="896" cy="384" r="4"/> + <circle cx="960" cy="320" r="4"/> + </g> + <!-- PCB traces in center zone --> + <g stroke="#1f6feb" stroke-width="2" fill="none" opacity="0.25"> + <polyline points="576,128 576,192 640,192"/> + <polyline points="960,128 960,192 896,192"/> + <polyline points="576,384 576,320 640,320"/> + <polyline points="960,384 960,320 896,320"/> + </g> + + <!-- Circular glow ring behind π --> + <ellipse cx="768" cy="300" rx="185" ry="165" + fill="none" stroke="#1f6feb" stroke-width="1.5" opacity="0.13"/> + <ellipse cx="768" cy="300" rx="210" ry="188" + fill="none" stroke="#1f6feb" stroke-width="0.5" opacity="0.07"/> + + <!-- + FreeBSD daemon horns — above the π crossbar, symmetric bezier curves. + Base at x≈718/818 (centred at 768). + --> + <!-- Left horn --> + <path d="M 718 172 + C 716 152 708 132 696 114 + C 686 98 668 90 673 100 + C 678 110 686 126 688 144 + C 690 158 698 170 708 174 Z" + fill="url(#bsdGrad)" filter="url(#hornGlow)"/> + <path d="M 716 168 C 710 148 700 128 692 112 C 686 100 678 96 681 106" + stroke="#ffaaaa" stroke-width="2" fill="none" opacity="0.4"/> + <!-- Right horn --> + <path d="M 818 172 + C 820 152 828 132 840 114 + C 850 98 868 90 863 100 + C 858 110 850 126 848 144 + C 846 158 838 170 828 174 Z" + fill="url(#bsdGrad)" filter="url(#hornGlow)"/> + <path d="M 820 168 C 826 148 836 128 844 112 C 850 100 858 96 855 106" + stroke="#ffaaaa" stroke-width="2" fill="none" opacity="0.4"/> + + <!-- + π (Pi) symbol — centred at x=768. + Crossbar: y=188–210. Legs extend to y≈400. + --> + <g filter="url(#glow)"> + <!-- Crossbar --> + <rect x="628" y="188" width="280" height="24" rx="12" fill="url(#piGrad)"/> + <!-- Left leg --> + <path d="M 666 212 + C 666 272 656 328 642 366 + C 634 386 630 400 638 410 + C 646 420 660 420 670 410 + C 678 402 680 386 684 366 + C 696 308 702 260 702 212 Z" + fill="url(#piGrad)"/> + <!-- Right leg — symmetric --> + <path d="M 870 212 + C 870 272 880 328 894 366 + C 902 386 906 400 898 410 + C 890 420 876 420 866 410 + C 858 402 856 386 852 366 + C 840 308 834 260 834 212 Z" + fill="url(#piGrad)"/> + </g> + + <!-- ═══════════════════════════════════════════════════════════ + RIGHT PANEL: tmux terminal window + x: 1086–1500 + ═══════════════════════════════════════════════════════════ --> + + <!-- Terminal window frame --> + <rect x="1096" y="80" width="400" height="352" rx="10" + fill="#0d1117" stroke="#30363d" stroke-width="1.5" opacity="0.95"/> + + <!-- Title bar --> + <rect x="1096" y="80" width="400" height="32" rx="10" + fill="#161b22"/> + <rect x="1096" y="96" width="400" height="16" fill="#161b22"/> + <!-- Traffic-light dots --> + <circle cx="1118" cy="96" r="6" fill="#ff5f56" opacity="0.9"/> + <circle cx="1138" cy="96" r="6" fill="#ffbd2e" opacity="0.9"/> + <circle cx="1158" cy="96" r="6" fill="#27c93f" opacity="0.9"/> + <!-- Title text --> + <text x="1296" y="101" + text-anchor="middle" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="11" fill="#6e7681">hyperstack.wg1 — zsh</text> + + <!-- Terminal content area --> + <rect x="1096" y="112" width="400" height="284" fill="#0d1117" opacity="0.95"/> + + <!-- Terminal lines — simulated shell session --> + <g font-family="'SF Mono','Fira Code','Consolas',monospace" font-size="11" fill="#c9d1d9"> + <!-- Prompt + command 1 --> + <text x="1112" y="140"> + <tspan fill="#3fb950">❯</tspan> + <tspan fill="#8b949e"> ruby hyperstack.rb create-both</tspan> + </text> + <text x="1112" y="158" fill="#6e7681"> Creating VM hyperstack1 (A100)...</text> + <text x="1112" y="174" fill="#6e7681"> Creating VM hyperstack2 (A100)...</text> + <text x="1112" y="190" fill="#3fb950"> vllm-ready ✓ wireguard-ok ✓</text> + + <!-- Prompt + command 2 --> + <text x="1112" y="214"> + <tspan fill="#3fb950">❯</tspan> + <tspan fill="#8b949e"> pi --model hyperstack1/nemotron</tspan> + </text> + <text x="1112" y="230" fill="#6e7681"> Connecting to hyperstack1.wg1…</text> + <text x="1112" y="246" fill="#58a6ff"> » Hello! Ready to code with you.</text> + + <!-- Prompt + command 3 --> + <text x="1112" y="270"> + <tspan fill="#3fb950">❯</tspan> + <tspan fill="#8b949e"> pi --model hyperstack2/qwen3</tspan> + </text> + <text x="1112" y="286" fill="#6e7681"> Connecting to hyperstack2.wg1…</text> + <text x="1112" y="302" fill="#58a6ff"> » I am Qwen3-Coder, let's build!</text> + + <!-- Blinking cursor --> + <rect x="1112" y="322" width="8" height="14" fill="#58a6ff" opacity="0.8"/> + </g> + + <!-- tmux status bar at bottom of terminal --> + <rect x="1096" y="396" width="400" height="24" rx="0" fill="url(#tmuxBar)"/> + <rect x="1096" y="408" width="400" height="12" fill="url(#tmuxBar)"/> + <rect x="1096" y="396" width="400" height="24" + fill="none" stroke="#30363d" stroke-width="0.5" opacity="0.5"/> + + <!-- tmux status bar text --> + <!-- Left: session + windows --> + <rect x="1096" y="396" width="68" height="24" fill="#3fb950" opacity="0.18"/> + <text x="1104" y="412" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="10" font-weight="600" fill="#3fb950">[hyperstack]</text> + <text x="1170" y="412" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="10" fill="#6e7681">0:pi* 1:ssh 2:logs</text> + <!-- Right: clock --> + <text x="1486" y="412" + text-anchor="end" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="10" fill="#6e7681">21:03</text> + + <!-- Terminal window bottom rounded finish --> + <rect x="1096" y="420" width="400" height="12" rx="10" + fill="#161b22" stroke="#30363d" stroke-width="1.5" opacity="0.6"/> + + <!-- ═══════════════════════════════════════════════════════════ + BOTTOM LABELS — full width + ═══════════════════════════════════════════════════════════ --> + <text x="768" y="470" + text-anchor="middle" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="22" font-weight="700" letter-spacing="6" + fill="#8b949e">HYPERSTACK</text> + <text x="768" y="494" + text-anchor="middle" + font-family="'SF Mono','Fira Code','Consolas',monospace" + font-size="11" font-weight="400" letter-spacing="3" + fill="#6e7681">GPU · PI.DEV · FREEBSD · AI · TMUX</text> +</svg> |