Spaces:

FourLabs-UN2
/

instance-insight-portal

Running

App Files Files Community

FourLabs-UN2 commited on Oct 8, 2025

Commit

4965449

verified ·

1 Parent(s): 2daa630

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.

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +484 -19

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Instance Insight Portal
-emoji: 😻
-colorFrom: red
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Instance Insight Portal 👁️
+colorFrom: gray
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,484 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>