522 lines
26 KiB
XML
522 lines
26 KiB
XML
|
<?xml version="1.0" encoding="UTF-8"?>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 900" width="1200" height="900">
|
||
|
|
<defs>
|
||
|
|
<!-- Gradients -->
|
||
|
|
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#0a0e27"/>
|
||
|
|
<stop offset="50%" style="stop-color:#1a1f3a"/>
|
||
|
|
<stop offset="100%" style="stop-color:#0d1229"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="coreGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#6366f1"/>
|
||
|
|
<stop offset="100%" style="stop-color:#8b5cf6"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="dbGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#3b82f6"/>
|
||
|
|
<stop offset="100%" style="stop-color:#1d4ed8"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="vectorGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#8b5cf6"/>
|
||
|
|
<stop offset="100%" style="stop-color:#6d28d9"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="storageGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#10b981"/>
|
||
|
|
<stop offset="100%" style="stop-color:#059669"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="llmGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#f59e0b"/>
|
||
|
|
<stop offset="100%" style="stop-color:#d97706"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="secretsGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#ef4444"/>
|
||
|
|
<stop offset="100%" style="stop-color:#dc2626"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="cacheGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#06b6d4"/>
|
||
|
|
<stop offset="100%" style="stop-color:#0891b2"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<linearGradient id="metricsGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
|
|
<stop offset="0%" style="stop-color:#ec4899"/>
|
||
|
|
<stop offset="100%" style="stop-color:#db2777"/>
|
||
|
|
</linearGradient>
|
||
|
|
|
||
|
|
<!-- Glow filters -->
|
||
|
|
<filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
|
||
|
|
<feGaussianBlur stdDeviation="4" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<filter id="softGlow" x="-30%" y="-30%" width="160%" height="160%">
|
||
|
|
<feGaussianBlur stdDeviation="2" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<filter id="pulseGlow" x="-100%" y="-100%" width="300%" height="300%">
|
||
|
|
<feGaussianBlur stdDeviation="8" result="coloredBlur"/>
|
||
|
|
<feMerge>
|
||
|
|
<feMergeNode in="coloredBlur"/>
|
||
|
|
<feMergeNode in="SourceGraphic"/>
|
||
|
|
</feMerge>
|
||
|
|
</filter>
|
||
|
|
|
||
|
|
<!-- Data packet symbol -->
|
||
|
|
<symbol id="dataPacket" viewBox="0 0 10 10">
|
||
|
|
<circle cx="5" cy="5" r="4" fill="currentColor" opacity="0.9"/>
|
||
|
|
</symbol>
|
||
|
|
|
||
|
|
<!-- Heartbeat line -->
|
||
|
|
<symbol id="heartbeat" viewBox="0 0 100 30">
|
||
|
|
<path d="M0,15 L20,15 L25,5 L30,25 L35,10 L40,20 L45,15 L100,15"
|
||
|
|
fill="none" stroke="currentColor" stroke-width="2"/>
|
||
|
|
</symbol>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Background -->
|
||
|
|
<rect width="1200" height="900" fill="url(#bgGradient)"/>
|
||
|
|
|
||
|
|
<!-- Grid pattern -->
|
||
|
|
<g opacity="0.1">
|
||
|
|
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
|
||
|
|
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="#4f46e5" stroke-width="0.5"/>
|
||
|
|
</pattern>
|
||
|
|
<rect width="1200" height="900" fill="url(#grid)"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<text x="600" y="45" text-anchor="middle" fill="#e2e8f0" font-family="system-ui, sans-serif" font-size="28" font-weight="bold">
|
||
|
|
🔴 LIVE SYSTEM MONITOR
|
||
|
|
</text>
|
||
|
|
<text x="600" y="70" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="14">
|
||
|
|
General Bots Platform • Real-time Component Status
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Animated pulse ring around title -->
|
||
|
|
<circle cx="530" cy="40" r="8" fill="#ef4444" opacity="0.8">
|
||
|
|
<animate attributeName="r" values="6;10;6" dur="1s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.8;0.4;0.8" dur="1s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Connection lines (drawn first, behind components) -->
|
||
|
|
<g id="connections" stroke-width="2" fill="none">
|
||
|
|
<!-- PostgreSQL to Core -->
|
||
|
|
<path d="M250,300 Q350,300 450,400" stroke="#3b82f6" opacity="0.4">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,1000;200,800;400,600" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<circle r="4" fill="#3b82f6">
|
||
|
|
<animateMotion dur="2s" repeatCount="indefinite">
|
||
|
|
<mpath href="#pathToCore1"/>
|
||
|
|
</animateMotion>
|
||
|
|
</circle>
|
||
|
|
<path id="pathToCore1" d="M250,300 Q350,300 450,400" fill="none" stroke="none"/>
|
||
|
|
|
||
|
|
<!-- Qdrant to Core -->
|
||
|
|
<path d="M250,500 Q350,500 450,450" stroke="#8b5cf6" opacity="0.4">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,1000;200,800;400,600" dur="2.5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<circle r="4" fill="#8b5cf6">
|
||
|
|
<animateMotion dur="1.8s" repeatCount="indefinite">
|
||
|
|
<mpath href="#pathToCore2"/>
|
||
|
|
</animateMotion>
|
||
|
|
</circle>
|
||
|
|
<path id="pathToCore2" d="M250,500 Q350,500 450,450" fill="none" stroke="none"/>
|
||
|
|
|
||
|
|
<!-- MinIO to Core -->
|
||
|
|
<path d="M250,700 Q400,650 500,500" stroke="#10b981" opacity="0.4">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,1000;200,800;400,600" dur="2.8s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<circle r="4" fill="#10b981">
|
||
|
|
<animateMotion dur="2.2s" repeatCount="indefinite">
|
||
|
|
<mpath href="#pathToCore3"/>
|
||
|
|
</animateMotion>
|
||
|
|
</circle>
|
||
|
|
<path id="pathToCore3" d="M250,700 Q400,650 500,500" fill="none" stroke="none"/>
|
||
|
|
|
||
|
|
<!-- Core to BotModels -->
|
||
|
|
<path d="M700,400 Q800,350 900,300" stroke="#f59e0b" opacity="0.4">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,1000;200,800;400,600" dur="2.2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<circle r="4" fill="#f59e0b">
|
||
|
|
<animateMotion dur="1.5s" repeatCount="indefinite">
|
||
|
|
<mpath href="#pathToLLM"/>
|
||
|
|
</animateMotion>
|
||
|
|
</circle>
|
||
|
|
<path id="pathToLLM" d="M700,400 Q800,350 900,300" fill="none" stroke="none"/>
|
||
|
|
|
||
|
|
<!-- Core to Vault -->
|
||
|
|
<path d="M700,450 Q800,500 900,500" stroke="#ef4444" opacity="0.4">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,1000;200,800;400,600" dur="3.2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<circle r="4" fill="#ef4444">
|
||
|
|
<animateMotion dur="2s" repeatCount="indefinite">
|
||
|
|
<mpath href="#pathToVault"/>
|
||
|
|
</animateMotion>
|
||
|
|
</circle>
|
||
|
|
<path id="pathToVault" d="M700,450 Q800,500 900,500" fill="none" stroke="none"/>
|
||
|
|
|
||
|
|
<!-- Core to Redis -->
|
||
|
|
<path d="M650,520 Q750,600 900,650" stroke="#06b6d4" opacity="0.4">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,1000;200,800;400,600" dur="1.5s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<circle r="4" fill="#06b6d4">
|
||
|
|
<animateMotion dur="0.8s" repeatCount="indefinite">
|
||
|
|
<mpath href="#pathToRedis"/>
|
||
|
|
</animateMotion>
|
||
|
|
</circle>
|
||
|
|
<path id="pathToRedis" d="M650,520 Q750,600 900,650" fill="none" stroke="none"/>
|
||
|
|
|
||
|
|
<!-- Core to InfluxDB -->
|
||
|
|
<path d="M600,520 Q600,700 750,800" stroke="#ec4899" opacity="0.4">
|
||
|
|
<animate attributeName="stroke-dasharray" values="0,1000;200,800;400,600" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</path>
|
||
|
|
<circle r="4" fill="#ec4899">
|
||
|
|
<animateMotion dur="1.2s" repeatCount="indefinite">
|
||
|
|
<mpath href="#pathToInflux"/>
|
||
|
|
</animateMotion>
|
||
|
|
</circle>
|
||
|
|
<path id="pathToInflux" d="M600,520 Q600,700 750,800" fill="none" stroke="none"/>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ==================== CENTRAL CORE: BotServer ==================== -->
|
||
|
|
<g id="botserver" transform="translate(600, 450)">
|
||
|
|
<!-- Outer pulse rings -->
|
||
|
|
<circle r="120" fill="none" stroke="#6366f1" stroke-width="1" opacity="0.3">
|
||
|
|
<animate attributeName="r" values="100;130;100" dur="3s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.3;0.1;0.3" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle r="100" fill="none" stroke="#6366f1" stroke-width="1" opacity="0.4">
|
||
|
|
<animate attributeName="r" values="90;110;90" dur="2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.4;0.2;0.4" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Main core circle -->
|
||
|
|
<circle r="80" fill="url(#coreGradient)" filter="url(#glow)"/>
|
||
|
|
|
||
|
|
<!-- Inner rotating ring -->
|
||
|
|
<circle r="65" fill="none" stroke="#a5b4fc" stroke-width="2" stroke-dasharray="20 10" opacity="0.6">
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="20s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<!-- Bot icon -->
|
||
|
|
<text y="5" text-anchor="middle" fill="white" font-size="40">🤖</text>
|
||
|
|
|
||
|
|
<!-- Label -->
|
||
|
|
<text y="110" text-anchor="middle" fill="#e2e8f0" font-family="system-ui, sans-serif" font-size="16" font-weight="bold">BotServer</text>
|
||
|
|
<text y="128" text-anchor="middle" fill="#22c55e" font-family="monospace" font-size="12">● RUNNING</text>
|
||
|
|
<text y="145" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="11">v5.0.2 • Rust</text>
|
||
|
|
|
||
|
|
<!-- Heartbeat indicator -->
|
||
|
|
<g transform="translate(-40, -100)">
|
||
|
|
<use href="#heartbeat" width="80" height="24" color="#22c55e">
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="1s" repeatCount="indefinite"/>
|
||
|
|
</use>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ==================== LEFT SIDE: Data Layer ==================== -->
|
||
|
|
|
||
|
|
<!-- PostgreSQL -->
|
||
|
|
<g id="postgresql" transform="translate(150, 300)">
|
||
|
|
<rect x="-80" y="-50" width="160" height="100" rx="12" fill="url(#dbGradient)" filter="url(#softGlow)"/>
|
||
|
|
<rect x="-70" y="-40" width="140" height="25" rx="4" fill="#1e40af" opacity="0.5"/>
|
||
|
|
<rect x="-70" y="-10" width="140" height="25" rx="4" fill="#1e40af" opacity="0.3"/>
|
||
|
|
<rect x="-70" y="20" width="140" height="25" rx="4" fill="#1e40af" opacity="0.2"/>
|
||
|
|
|
||
|
|
<!-- Database icon -->
|
||
|
|
<text x="-55" y="-22" fill="white" font-size="16">🐘</text>
|
||
|
|
<text x="-30" y="-22" fill="white" font-family="system-ui, sans-serif" font-size="12" font-weight="bold">PostgreSQL</text>
|
||
|
|
|
||
|
|
<!-- Stats -->
|
||
|
|
<text x="-55" y="5" fill="#93c5fd" font-family="monospace" font-size="10">Connections: 24/100</text>
|
||
|
|
<text x="-55" y="35" fill="#93c5fd" font-family="monospace" font-size="10">Queries/sec: 847</text>
|
||
|
|
|
||
|
|
<!-- Status indicator -->
|
||
|
|
<circle cx="65" cy="-35" r="6" fill="#22c55e">
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<text y="70" text-anchor="middle" fill="#22c55e" font-family="monospace" font-size="11">● HEALTHY</text>
|
||
|
|
<text y="85" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="10">v16.2</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Feature box for PostgreSQL -->
|
||
|
|
<g transform="translate(150, 400)">
|
||
|
|
<rect x="-70" y="0" width="140" height="60" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1" stroke-dasharray="4 2"/>
|
||
|
|
<text x="0" y="18" text-anchor="middle" fill="#64748b" font-family="system-ui, sans-serif" font-size="9">FUNCTIONS</text>
|
||
|
|
<text x="0" y="33" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="9">• User Sessions</text>
|
||
|
|
<text x="0" y="46" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="9">• Bot Configs</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Qdrant -->
|
||
|
|
<g id="qdrant" transform="translate(150, 520)">
|
||
|
|
<rect x="-80" y="-50" width="160" height="100" rx="12" fill="url(#vectorGradient)" filter="url(#softGlow)"/>
|
||
|
|
|
||
|
|
<!-- Vector visualization -->
|
||
|
|
<g transform="translate(-50, -30)">
|
||
|
|
<circle cx="10" cy="10" r="3" fill="#c4b5fd" opacity="0.7">
|
||
|
|
<animate attributeName="cy" values="10;15;10" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="25" cy="20" r="3" fill="#c4b5fd" opacity="0.8">
|
||
|
|
<animate attributeName="cx" values="25;30;25" dur="1.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
<circle cx="15" cy="30" r="3" fill="#c4b5fd" opacity="0.6">
|
||
|
|
<animate attributeName="cy" values="30;25;30" dur="1.8s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="0" y="-15" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Qdrant</text>
|
||
|
|
<text x="0" y="5" text-anchor="middle" fill="#c4b5fd" font-family="monospace" font-size="10">Vectors: 1.2M</text>
|
||
|
|
<text x="0" y="20" text-anchor="middle" fill="#c4b5fd" font-family="monospace" font-size="10">Collections: 8</text>
|
||
|
|
<text x="0" y="35" text-anchor="middle" fill="#c4b5fd" font-family="monospace" font-size="10">Search: 12ms avg</text>
|
||
|
|
|
||
|
|
<circle cx="65" cy="-35" r="6" fill="#22c55e">
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<text y="70" text-anchor="middle" fill="#22c55e" font-family="monospace" font-size="11">● HEALTHY</text>
|
||
|
|
<text y="85" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="10">v1.9.2</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Feature box for Qdrant -->
|
||
|
|
<g transform="translate(150, 620)">
|
||
|
|
<rect x="-70" y="0" width="140" height="60" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1" stroke-dasharray="4 2"/>
|
||
|
|
<text x="0" y="18" text-anchor="middle" fill="#64748b" font-family="system-ui, sans-serif" font-size="9">FUNCTIONS</text>
|
||
|
|
<text x="0" y="33" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="9">• Semantic Search</text>
|
||
|
|
<text x="0" y="46" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="9">• RAG Embeddings</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- MinIO -->
|
||
|
|
<g id="minio" transform="translate(150, 740)">
|
||
|
|
<rect x="-80" y="-50" width="160" height="100" rx="12" fill="url(#storageGradient)" filter="url(#softGlow)"/>
|
||
|
|
|
||
|
|
<!-- Folder icons -->
|
||
|
|
<text x="-50" y="-10" fill="white" font-size="20">📁</text>
|
||
|
|
<text x="-20" y="-10" fill="white" font-size="20">📄</text>
|
||
|
|
<text x="10" y="-10" fill="white" font-size="20">🖼️</text>
|
||
|
|
|
||
|
|
<text x="0" y="15" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">MinIO Drive</text>
|
||
|
|
<text x="0" y="32" text-anchor="middle" fill="#a7f3d0" font-family="monospace" font-size="10">Storage: 45.2 GB</text>
|
||
|
|
<text x="0" y="45" text-anchor="middle" fill="#a7f3d0" font-family="monospace" font-size="10">Objects: 12,847</text>
|
||
|
|
|
||
|
|
<circle cx="65" cy="-35" r="6" fill="#22c55e">
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<text y="70" text-anchor="middle" fill="#22c55e" font-family="monospace" font-size="11">● HEALTHY</text>
|
||
|
|
<text y="85" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="10">v2024.01</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ==================== RIGHT SIDE: Services ==================== -->
|
||
|
|
|
||
|
|
<!-- BotModels (LLM Server) -->
|
||
|
|
<g id="botmodels" transform="translate(1000, 300)">
|
||
|
|
<rect x="-80" y="-50" width="160" height="100" rx="12" fill="url(#llmGradient)" filter="url(#softGlow)"/>
|
||
|
|
|
||
|
|
<!-- AI brain animation -->
|
||
|
|
<g transform="translate(-30, -35)">
|
||
|
|
<text font-size="24">🧠</text>
|
||
|
|
<circle cx="20" cy="12" r="15" fill="none" stroke="#fef3c7" stroke-width="1" opacity="0.5">
|
||
|
|
<animate attributeName="r" values="12;18;12" dur="1.5s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="opacity" values="0.5;0.2;0.5" dur="1.5s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="0" y="0" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">BotModels</text>
|
||
|
|
<text x="0" y="17" text-anchor="middle" fill="#fef3c7" font-family="monospace" font-size="10">Model: gpt-4o</text>
|
||
|
|
<text x="0" y="32" text-anchor="middle" fill="#fef3c7" font-family="monospace" font-size="10">Tokens/hr: 125K</text>
|
||
|
|
<text x="0" y="47" text-anchor="middle" fill="#fef3c7" font-family="monospace" font-size="10">Latency: 890ms</text>
|
||
|
|
|
||
|
|
<circle cx="65" cy="-35" r="6" fill="#22c55e">
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<text y="70" text-anchor="middle" fill="#22c55e" font-family="monospace" font-size="11">● RUNNING</text>
|
||
|
|
<text y="85" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="10">v2.1.0</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Feature box for BotModels -->
|
||
|
|
<g transform="translate(1000, 400)">
|
||
|
|
<rect x="-70" y="0" width="140" height="60" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1" stroke-dasharray="4 2"/>
|
||
|
|
<text x="0" y="18" text-anchor="middle" fill="#64748b" font-family="system-ui, sans-serif" font-size="9">FUNCTIONS</text>
|
||
|
|
<text x="0" y="33" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="9">• LLM Inference</text>
|
||
|
|
<text x="0" y="46" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="9">• Model Routing</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Vault -->
|
||
|
|
<g id="vault" transform="translate(1000, 520)">
|
||
|
|
<rect x="-80" y="-50" width="160" height="100" rx="12" fill="url(#secretsGradient)" filter="url(#softGlow)"/>
|
||
|
|
|
||
|
|
<!-- Lock icon -->
|
||
|
|
<text x="0" y="-15" text-anchor="middle" font-size="28">🔐</text>
|
||
|
|
|
||
|
|
<text x="0" y="10" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Vault</text>
|
||
|
|
<text x="0" y="27" text-anchor="middle" fill="#fecaca" font-family="monospace" font-size="10">Secrets: 156</text>
|
||
|
|
<text x="0" y="42" text-anchor="middle" fill="#fecaca" font-family="monospace" font-size="10">Policies: 12</text>
|
||
|
|
|
||
|
|
<circle cx="65" cy="-35" r="6" fill="#22c55e">
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<text y="70" text-anchor="middle" fill="#22c55e" font-family="monospace" font-size="11">● SEALED</text>
|
||
|
|
<text y="85" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="10">v1.15.0</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Redis -->
|
||
|
|
<g id="redis" transform="translate(1000, 680)">
|
||
|
|
<rect x="-80" y="-50" width="160" height="100" rx="12" fill="url(#cacheGradient)" filter="url(#softGlow)"/>
|
||
|
|
|
||
|
|
<!-- Lightning bolt for speed -->
|
||
|
|
<text x="0" y="-15" text-anchor="middle" font-size="24">⚡</text>
|
||
|
|
|
||
|
|
<text x="0" y="5" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">Redis Cache</text>
|
||
|
|
<text x="0" y="22" text-anchor="middle" fill="#a5f3fc" font-family="monospace" font-size="10">Hit Rate: 94.2%</text>
|
||
|
|
<text x="0" y="37" text-anchor="middle" fill="#a5f3fc" font-family="monospace" font-size="10">Keys: 8,421</text>
|
||
|
|
<text x="0" y="52" text-anchor="middle" fill="#a5f3fc" font-family="monospace" font-size="10">Memory: 256MB</text>
|
||
|
|
|
||
|
|
<circle cx="65" cy="-35" r="6" fill="#22c55e">
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<text y="70" text-anchor="middle" fill="#22c55e" font-family="monospace" font-size="11">● CONNECTED</text>
|
||
|
|
<text y="85" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="10">v7.2.4</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ==================== BOTTOM: Analytics ==================== -->
|
||
|
|
|
||
|
|
<!-- InfluxDB -->
|
||
|
|
<g id="influxdb" transform="translate(800, 800)">
|
||
|
|
<rect x="-80" y="-50" width="160" height="100" rx="12" fill="url(#metricsGradient)" filter="url(#softGlow)"/>
|
||
|
|
|
||
|
|
<!-- Chart icon -->
|
||
|
|
<g transform="translate(-50, -40)">
|
||
|
|
<rect x="0" y="20" width="8" height="20" fill="#fbcfe8" rx="2">
|
||
|
|
<animate attributeName="height" values="20;30;20" dur="1s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="y" values="20;10;20" dur="1s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="12" y="15" width="8" height="25" fill="#f9a8d4" rx="2">
|
||
|
|
<animate attributeName="height" values="25;15;25" dur="1.2s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="y" values="15;25;15" dur="1.2s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<rect x="24" y="10" width="8" height="30" fill="#f472b6" rx="2">
|
||
|
|
<animate attributeName="height" values="30;20;30" dur="0.8s" repeatCount="indefinite"/>
|
||
|
|
<animate attributeName="y" values="10;20;10" dur="0.8s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<text x="0" y="0" text-anchor="middle" fill="white" font-family="system-ui, sans-serif" font-size="14" font-weight="bold">InfluxDB</text>
|
||
|
|
<text x="0" y="17" text-anchor="middle" fill="#fbcfe8" font-family="monospace" font-size="10">Points/sec: 2,450</text>
|
||
|
|
<text x="0" y="32" text-anchor="middle" fill="#fbcfe8" font-family="monospace" font-size="10">Retention: 30d</text>
|
||
|
|
<text x="0" y="47" text-anchor="middle" fill="#fbcfe8" font-family="monospace" font-size="10">Buckets: 4</text>
|
||
|
|
|
||
|
|
<circle cx="65" cy="-35" r="6" fill="#22c55e">
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
|
||
|
|
<text y="70" text-anchor="middle" fill="#22c55e" font-family="monospace" font-size="11">● RECORDING</text>
|
||
|
|
<text y="85" text-anchor="middle" fill="#94a3b8" font-family="monospace" font-size="10">v2.7.3</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ==================== STATUS PANEL ==================== -->
|
||
|
|
<g transform="translate(400, 780)">
|
||
|
|
<rect x="-100" y="-30" width="200" height="100" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||
|
|
<text x="0" y="-10" text-anchor="middle" fill="#e2e8f0" font-family="system-ui, sans-serif" font-size="12" font-weight="bold">SYSTEM RESOURCES</text>
|
||
|
|
|
||
|
|
<!-- CPU Bar -->
|
||
|
|
<text x="-85" y="12" fill="#94a3b8" font-family="monospace" font-size="10">CPU</text>
|
||
|
|
<rect x="-50" y="3" width="120" height="12" rx="3" fill="#374151"/>
|
||
|
|
<rect x="-50" y="3" width="84" height="12" rx="3" fill="#22c55e">
|
||
|
|
<animate attributeName="width" values="84;90;84" dur="3s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<text x="80" y="12" fill="#94a3b8" font-family="monospace" font-size="10">70%</text>
|
||
|
|
|
||
|
|
<!-- Memory Bar -->
|
||
|
|
<text x="-85" y="32" fill="#94a3b8" font-family="monospace" font-size="10">MEM</text>
|
||
|
|
<rect x="-50" y="23" width="120" height="12" rx="3" fill="#374151"/>
|
||
|
|
<rect x="-50" y="23" width="72" height="12" rx="3" fill="#3b82f6">
|
||
|
|
<animate attributeName="width" values="72;78;72" dur="4s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<text x="80" y="32" fill="#94a3b8" font-family="monospace" font-size="10">60%</text>
|
||
|
|
|
||
|
|
<!-- GPU Bar -->
|
||
|
|
<text x="-85" y="52" fill="#94a3b8" font-family="monospace" font-size="10">GPU</text>
|
||
|
|
<rect x="-50" y="43" width="120" height="12" rx="3" fill="#374151"/>
|
||
|
|
<rect x="-50" y="43" width="48" height="12" rx="3" fill="#8b5cf6">
|
||
|
|
<animate attributeName="width" values="48;60;48" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</rect>
|
||
|
|
<text x="80" y="52" fill="#94a3b8" font-family="monospace" font-size="10">40%</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ==================== METRICS PANEL ==================== -->
|
||
|
|
<g transform="translate(600, 150)">
|
||
|
|
<rect x="-250" y="-35" width="500" height="70" rx="8" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||
|
|
|
||
|
|
<!-- Active Sessions -->
|
||
|
|
<g transform="translate(-180, 0)">
|
||
|
|
<text y="-10" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="10">SESSIONS</text>
|
||
|
|
<text y="15" text-anchor="middle" fill="#22c55e" font-family="system-ui, sans-serif" font-size="24" font-weight="bold">
|
||
|
|
247
|
||
|
|
<animate attributeName="opacity" values="1;0.8;1" dur="1s" repeatCount="indefinite"/>
|
||
|
|
</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Messages Today -->
|
||
|
|
<g transform="translate(-60, 0)">
|
||
|
|
<text y="-10" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="10">MESSAGES</text>
|
||
|
|
<text y="15" text-anchor="middle" fill="#3b82f6" font-family="system-ui, sans-serif" font-size="24" font-weight="bold">12.4K</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Response Time -->
|
||
|
|
<g transform="translate(60, 0)">
|
||
|
|
<text y="-10" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="10">AVG RESPONSE</text>
|
||
|
|
<text y="15" text-anchor="middle" fill="#f59e0b" font-family="system-ui, sans-serif" font-size="24" font-weight="bold">1.2s</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Uptime -->
|
||
|
|
<g transform="translate(180, 0)">
|
||
|
|
<text y="-10" text-anchor="middle" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="10">UPTIME</text>
|
||
|
|
<text y="15" text-anchor="middle" fill="#10b981" font-family="system-ui, sans-serif" font-size="24" font-weight="bold">99.9%</text>
|
||
|
|
</g>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ==================== LEGEND ==================== -->
|
||
|
|
<g transform="translate(50, 130)">
|
||
|
|
<rect x="0" y="0" width="130" height="90" rx="6" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||
|
|
<text x="10" y="20" fill="#e2e8f0" font-family="system-ui, sans-serif" font-size="11" font-weight="bold">STATUS LEGEND</text>
|
||
|
|
|
||
|
|
<circle cx="20" cy="40" r="5" fill="#22c55e"/>
|
||
|
|
<text x="35" y="44" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="10">Healthy/Running</text>
|
||
|
|
|
||
|
|
<circle cx="20" cy="58" r="5" fill="#f59e0b"/>
|
||
|
|
<text x="35" y="62" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="10">Warning/Degraded</text>
|
||
|
|
|
||
|
|
<circle cx="20" cy="76" r="5" fill="#ef4444"/>
|
||
|
|
<text x="35" y="80" fill="#94a3b8" font-family="system-ui, sans-serif" font-size="10">Error/Stopped</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- ==================== TIMESTAMP ==================== -->
|
||
|
|
<text x="1150" y="880" text-anchor="end" fill="#64748b" font-family="monospace" font-size="10">
|
||
|
|
Last updated: <tspan fill="#94a3b8">2025-01-14 15:42:31 UTC</tspan>
|
||
|
|
<animate attributeName="opacity" values="1;0.5;1" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</text>
|
||
|
|
|
||
|
|
<!-- Refresh indicator -->
|
||
|
|
<g transform="translate(1170, 870)">
|
||
|
|
<circle cx="0" cy="0" r="8" fill="none" stroke="#4f46e5" stroke-width="2" stroke-dasharray="12 8">
|
||
|
|
<animateTransform attributeName="transform" type="rotate" from="0" to="360" dur="2s" repeatCount="indefinite"/>
|
||
|
|
</circle>
|
||
|
|
</g>
|
||
|
|
</svg>
|