Adicione que ao clicar em Details abra um modal com um botão com um olho e ao apertar o botão mostre uma URL da instância.
4965449 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mr. Mxyzptlk - Dashboard de Instâncias | Fourlabs</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link rel="icon" type="image/x-icon" href="/static/imgs/icon.svg"> | |
| <link rel="stylesheet" href="/static/style/dashboard.css"> | |
| <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/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#21223a', | |
| secondary: '#ff580f', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-primary text-white w-64 md:w-20 lg:w-64 fixed h-full overflow-y-auto"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <div class="w-full flex flex-col items-center justify-center"> | |
| <img | |
| alt="logo" | |
| loading="lazy" | |
| width="100" | |
| height="100" | |
| decoding="async" | |
| data-nimg="1" | |
| class="w-36" | |
| src="/static/imgs/logo-branco-labs.svg" | |
| style="color: transparent;margin-top: 8px;" | |
| > | |
| <p | |
| class="text-[10px] text-white mt-2 text-center" | |
| style="margin-top: -1px; margin-left: 12px;font-size: 9px;"> | |
| Inovação e experimentação | |
| </p> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-center space-x-3 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center"> | |
| <span class="font-bold">MS</span> | |
| </div> | |
| <div class="lg:block hidden"> | |
| <h3 class="font-semibold">Marlon Sousa</h3> | |
| <p class="text-xs text-gray-400">Admin</p> | |
| </div> | |
| </div> | |
| <nav> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="/" | |
| class="sidebar-item flex items-center p-3 rounded-lg | |
| active"> | |
| <i class="fa-solid fa-server text-secondary w-6 text-center"></i> | |
| <span class="ml-3 lg:block hidden">Instances</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="/chat/" | |
| class="sidebar-item flex items-center p-3 rounded-lg | |
| "> | |
| <i class="fa-solid fa-comment text-secondary w-6 text-center"></i> | |
| <span class="ml-3 lg:block hidden">Chat Model</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="/" | |
| class="sidebar-item flex items-center p-3 rounded-lg | |
| "> | |
| <i data-feather="activity" class="text-secondary w-5 h-5 mr-3"></i> | |
| <span class="ml-3 lg:block hidden">Monitoring</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="/settings/" | |
| class="sidebar-item flex items-center p-3 rounded-lg | |
| "> | |
| <i class="fa-solid fa-screwdriver-wrench text-secondary w-6 text-center"></i> | |
| <span class="ml-3 lg:block hidden">Configurações</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-gray-700"> | |
| <h3 class="text-sm font-medium mb-2 lg:block hidden">Documentos Recentes</h3> | |
| <div class="agent-history"> | |
| <ul id="agent-history"> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 w-full p-4 border-t border-gray-700"> | |
| <form id="logout-form" method="POST" action="/account/logout/" class="hidden"> | |
| <input type="hidden" name="csrfmiddlewaretoken" value="JbiCJ0hDXZBxdpWd8qhGMWtRSghbpqK2t8Z4clh6OaHa5EZmiFPFefBjf3YALJQ7"> | |
| </form> | |
| <a href="#" onclick="document.getElementById('logout-form').submit(); return false;" class="sidebar-item flex items-center p-3 rounded-lg"> | |
| <i class="fas fa-sign-out-alt text-secondary w-6 text-center"></i> | |
| <span class="ml-3 lg:block hidden">Logout</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 ml-0 md:ml-20 lg:ml-64 overflow-y-auto"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="flex items-center justify-between p-4"> | |
| <div class="flex items-center space-x-4"> | |
| <button id="mobileToggleSidebar" class="text-gray-600 lg:hidden block"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| <h1 class="text-xl font-bold text-primary">Dashboard de Instâncias</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="/launch/" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"> | |
| <i data-feather="plus" class="mr-2 w-4 h-4"></i> | |
| Launch New Instance | |
| </a> | |
| <div class="relative"> | |
| <button id="notificationsBtn" class="relative"> | |
| <i class="fas fa-bell text-xl text-gray-600"></i> | |
| <span class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">0</span> | |
| </button> | |
| <div id="notificationsDropdown" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg overflow-hidden z-50"> | |
| <div class="py-1"> | |
| <div class="px-4 py-2 border-b border-gray-200"> | |
| <h3 class="text-sm font-medium text-gray-700">Notifications</h3> | |
| </div> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-50 text-center"> | |
| <a href="#" class="text-sm font-medium text-secondary hover:text-primary">View all notifications</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Dashboard Content --> | |
| <main class="p-6 "> | |
| <div class="mt-8 mb-6 gap-6"> | |
| <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4"> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary rounded-md p-3 flex items-center justify-center"> | |
| <i class="fa-solid fa-server text-secondary text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Active LLM Models</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">1</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-secondary rounded-md p-3 flex items-center justify-center"> | |
| <i class="fa-solid fa-microchip text-primary text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">LLM vCPUs Used</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">1</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary rounded-md p-3"> | |
| <i class="fa-solid fa-hard-drive text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">LLM Storage Used</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">8 GB</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white overflow-hidden shadow rounded-lg"> | |
| <div class="px-4 py-5 sm:p-6"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-secondary rounded-md p-3"> | |
| <i class="fa-solid fa-dollar-sign text-white text-2xl"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <dl> | |
| <dt class="text-sm font-medium text-gray-500 truncate">Estimated Cost</dt> | |
| <dd> | |
| <div class="text-lg font-medium text-gray-900">$86,4</div> | |
| </dd> | |
| </dl> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center mb-6 gap-6 mb-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search instances..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary w-64"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i data-feather="search" class="text-gray-400"></i> | |
| </div> | |
| </div> | |
| <select class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-primary focus:border-primary"> | |
| <option>All Regions</option> | |
| <option>us-east-1</option> | |
| <option>us-west-2</option> | |
| <option>eu-west-1</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-2 rounded-lg hover:bg-gray-100"> | |
| <i data-feather="refresh-cw"></i> | |
| </button> | |
| <button class="p-2 rounded-lg hover:bg-gray-100"> | |
| <i data-feather="filter"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Instance Card 1 --> | |
| <div class="instance-card bg-white overflow-hidden shadow rounded-lg transition-all duration-300 ease-in-out"> | |
| <div class="px-4 py-5 sm:px-6 border-b flex justify-between items-center"> | |
| <div> | |
| <p class="mt-1 text-sm text-gray-500">Instance ID: 20526234-ac5b-4108-9d01-3588e10c0fb6</p> | |
| </div> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"> | |
| Running | |
| </span> | |
| </div> | |
| <div class="px-4 py-5 sm:p-6 "> | |
| <div class="col-span-2 text-center gap-4 mb-4"> | |
| <p class="text-sm font-medium text-gray-500">LLM Model</p> | |
| <p class="mt-1 text-lg font-bold text-primary-600 bg-blue-50 px-4 py-2 rounded-lg">deepseek-r1:8b</p> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Public IP</p> | |
| <p class="mt-1 text-sm text-gray-900"></p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Instance Type</p> | |
| <p class="mt-1 text-sm text-gray-900"></p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Availability Zone</p> | |
| <p class="mt-1 text-sm text-gray-900">southamerica-east1</p> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500 truncate">Launch Time</p> | |
| <p class="mt-1 text-sm text-gray-900">8 de Outubro de 2025 às 16:20</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 px-4 py-4 sm:px-6 flex justify-between"> | |
| <div class="flex space-x-3"> | |
| <button class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i class="fa-solid fa-pause mr-1 w-3 h-3"></i> | |
| Stop | |
| </button> | |
| <form action="/instances/022dc463-91df-4a35-b38b-f95fc61ef7a0/terminate/" method="post" | |
| onsubmit="return confirm('Tem certeza que deseja terminar esta instância?');"> | |
| <input type="hidden" name="csrfmiddlewaretoken" value="JbiCJ0hDXZBxdpWd8qhGMWtRSghbpqK2t8Z4clh6OaHa5EZmiFPFefBjf3YALJQ7"> | |
| <button type="submit" | |
| class="inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-xs font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"> | |
| <i class="fa-solid fa-trash mr-1 w-3 h-3"></i> | |
| Terminate | |
| </button> | |
| </form> | |
| </div> | |
| <button onclick="openInstanceModal('20526234-ac5b-4108-9d01-3588e10c0fb6')" class="inline-flex items-center text-sm font-medium text-primary hover:text-primary-700"> | |
| Details | |
| <i class="fa-solid fa-chevron-right mr-1 w-3 h-3"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="flex items-center justify-between border-t border-gray-200 px-4 py-6 sm:px-6"> | |
| <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing | |
| <span class="font-medium">1</span> | |
| to | |
| <span class="font-medium">1</span> | |
| of | |
| <span class="font-medium">1</span> | |
| instances | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="isolate inline-flex -space-x-px rounded-md shadow-sm" aria-label="Pagination"> | |
| <span class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-300 ring-1 ring-inset ring-gray-300"> | |
| <i class="fa-solid fa-chevron-left"></i> | |
| </span> | |
| <span class="relative z-10 inline-flex items-center bg-primary px-4 py-2 text-sm font-semibold text-white"> | |
| 1 | |
| </span> | |
| <span class="relative inline-flex items-center rounded-r-md px-2 py-2 text-gray-300 ring-1 ring-inset ring-gray-300"> | |
| <i class="fa-solid fa-chevron-right"></i> | |
| </span> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Instance Details Modal --> | |
| <div id="instanceModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 hidden"> | |
| <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white"> | |
| <div class="mt-3 text-center"> | |
| <h3 class="text-lg font-medium text-gray-900 mb-4">Instance Details</h3> | |
| <div class="mt-2 px-7 py-3"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h4 class="text-sm font-medium text-gray-700">Instance URL</h4> | |
| <button id="toggleUrlBtn" class="p-2 rounded-lg hover:bg-gray-100 text-primary"> | |
| <i class="fa-solid fa-eye"></i> | |
| </button> | |
| </div> | |
| <div id="instanceUrlContainer" class="hidden"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm font-mono text-gray-800 break-all"> | |
| https://api.deepseek-r1-8b.instance-20526234.fourlabs.ai | |
| </p> | |
| </div> | |
| <div class="mt-4 grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-xs font-medium text-gray-500">Instance ID</p> | |
| <p class="text-sm text-gray-900" id="modalInstanceId"></p> | |
| </div> | |
| <div> | |
| <p class="text-xs font-medium text-gray-500">Status</p> | |
| <p class="text-sm text-green-600">Running</p> | |
| </div> | |
| <div> | |
| <p class="text-xs font-medium text-gray-500">LLM Model</p> | |
| <p class="text-sm text-gray-900">deepseek-r1:8b</p> | |
| </div> | |
| <div> | |
| <p class="text-xs font-medium text-gray-500">Region</p> | |
| <p class="text-sm text-gray-900">southamerica-east1</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="items-center px-4 py-3"> | |
| <button id="closeModalBtn" class="px-4 py-2 bg-primary text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| Close | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x3b82f6, | |
| backgroundColor: 0xf8fafc, | |
| points: 12.00, | |
| maxDistance: 22.00, | |
| spacing: 18.00 | |
| }); | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Pagination functionality | |
| document.querySelectorAll('.pagination a').forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Here you would typically fetch the next page of results | |
| // For demo purposes we'll just show an alert | |
| if(this.textContent.trim() === '2' || this.textContent.trim() === '3') { | |
| alert('Loading page ' + this.textContent.trim()); | |
| } | |
| }); | |
| }); | |
| // Instance Modal Functions | |
| function openInstanceModal(instanceId) { | |
| document.getElementById('modalInstanceId').textContent = instanceId; | |
| document.getElementById('instanceModal').classList.remove('hidden'); | |
| } | |
| function closeInstanceModal() { | |
| document.getElementById('instanceModal').classList.add('hidden'); | |
| document.getElementById('instanceUrlContainer').classList.add('hidden'); | |
| } | |
| // Event Listeners | |
| document.getElementById('closeModalBtn').addEventListener('click', closeInstanceModal); | |
| document.getElementById('toggleUrlBtn').addEventListener('click', function() { | |
| const urlContainer = document.getElementById('instanceUrlContainer'); | |
| urlContainer.classList.toggle('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| document.getElementById('instanceModal').addEventListener('click', function(e) { | |
| if (e.target === this) { | |
| closeInstanceModal(); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |