| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Network Visualization</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://cdn.jsdelivr.net/npm/force-graph"></script> |
| <style> |
| #graph-container { |
| width: 100%; |
| height: 600px; |
| background: #111827; |
| } |
| .node { |
| fill: #6e8efb; |
| stroke: #4f46e5; |
| stroke-width: 1.5px; |
| } |
| .link { |
| stroke: #a777e3; |
| stroke-opacity: 0.6; |
| } |
| .network-panel { |
| background: rgba(17, 24, 39, 0.8); |
| backdrop-filter: blur(10px); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-900 text-white min-h-screen"> |
| <header class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i data-feather="share-2" class="text-blue-400"></i> |
| <h1 class="text-2xl font-bold">Network Topology</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="index.html" class="flex items-center space-x-1 hover:text-purple-400 transition"> |
| <i data-feather="home"></i> |
| <span>Home</span> |
| </a> |
| <a href="kwaipilot.html" class="flex items-center space-x-1 hover:text-blue-400 transition"> |
| <i data-feather="cpu"></i> |
| <span>Kwaipilot</span> |
| </a> |
| <a href="AGENTS.html" class="flex items-center space-x-1 hover:text-green-400 transition"> |
| <i data-feather="infinity"></i> |
| <span>Agents</span> |
| </a> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| <div class="lg:col-span-2"> |
| <div id="graph-container" class="rounded-xl overflow-hidden"></div> |
| </div> |
| |
| <div class="network-panel rounded-xl p-6 shadow-lg"> |
| <h2 class="text-xl font-bold mb-4">Node Information</h2> |
| |
| <div class="mb-6"> |
| <h3 class="text-sm uppercase text-gray-400 mb-2">Network Status</h3> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="bg-gray-800 p-3 rounded-lg"> |
| <div class="text-gray-400 text-sm">Active Nodes</div> |
| <div class="text-2xl font-mono">0.0</div> |
| </div> |
| <div class="bg-gray-800 p-3 rounded-lg"> |
| <div class="text-gray-400 text-sm">Connections</div> |
| <div class="text-2xl font-mono">0.0</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mb-6"> |
| <h3 class="text-sm uppercase text-gray-400 mb-2">Selected Node</h3> |
| <div class="bg-gray-800 p-4 rounded-lg"> |
| <div class="flex items-center space-x-3 mb-2"> |
| <div class="w-3 h-3 rounded-full bg-blue-400"></div> |
| <div class="font-mono">node_0.0.0.0</div> |
| </div> |
| <div class="text-sm text-gray-400 space-y-1"> |
| <div>Type: Imagination Processor</div> |
| <div>Latency: 0.0ms</div> |
| <div>Capabilities: Transformers</div> |
| </div> |
| </div> |
| </div> |
| |
| <div> |
| <h3 class="text-sm uppercase text-gray-400 mb-2">Network Actions</h3> |
| <button class="w-full bg-blue-600 hover:bg-blue-500 transition py-2 rounded-lg flex items-center justify-center space-x-2 mb-2"> |
| <i data-feather="refresh-cw"></i> |
| <span>Refresh Network</span> |
| </button> |
| <button class="w-full bg-purple-600 hover:bg-purple-500 transition py-2 rounded-lg flex items-center justify-center space |
| </body> |
| </html> |
