| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Cybersecurity LLM Fine-Tuning UI</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"> |
| <style> |
| .wireframe-box { |
| border: 2px dashed #94a3b8; |
| background-color: #f8fafc; |
| border-radius: 0.5rem; |
| min-height: 60px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| color: #64748b; |
| font-weight: 500; |
| } |
| .tab-content { |
| display: none; |
| } |
| .tab-content.active { |
| display: block; |
| } |
| .progress-bar { |
| height: 8px; |
| background-color: #e2e8f0; |
| border-radius: 4px; |
| overflow: hidden; |
| } |
| .progress-fill { |
| height: 100%; |
| background-color: #3b82f6; |
| width: 0%; |
| transition: width 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 p-4"> |
| <div class="max-w-md mx-auto"> |
| |
| <div class="flex items-center justify-between mb-6"> |
| <div class="flex items-center"> |
| <i class="fas fa-shield-alt text-blue-600 text-xl mr-2"></i> |
| <h1 class="text-xl font-bold text-gray-800">SecuLLM</h1> |
| </div> |
| <button id="menu-btn" class="p-2 rounded-lg bg-gray-100"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
|
|
| |
| <div id="mobile-menu" class="hidden mb-6 p-4 bg-white rounded-lg shadow"> |
| <ul class="space-y-3"> |
| <li><a href="#" class="flex items-center text-blue-600"><i class="fas fa-home mr-2"></i> Dashboard</a></li> |
| <li><a href="#" class="flex items-center text-gray-700"><i class="fas fa-tasks mr-2"></i> Pipelines</a></li> |
| <li><a href="#" class="flex items-center text-gray-700"><i class="fas fa-chart-line mr-2"></i> Analytics</a></li> |
| <li><a href="#" class="flex items-center text-gray-700"><i class="fas fa-cog mr-2"></i> Settings</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <div class="flex border-b border-gray-200"> |
| <button class="tab-btn active px-4 py-2 font-medium text-blue-600 border-b-2 border-blue-600" data-tab="current">Current Runs</button> |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="history">History</button> |
| <button class="tab-btn px-4 py-2 font-medium text-gray-500" data-tab="templates">Templates</button> |
| </div> |
| </div> |
|
|
| |
| <div id="current" class="tab-content active"> |
| <div class="mb-4 p-4 bg-white rounded-lg shadow"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-medium">Threat Detection Model</h3> |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Running</span> |
| </div> |
| <p class="text-sm text-gray-500 mb-3">Fine-tuning on latest malware samples</p> |
| |
| <div class="progress-bar mb-2"> |
| <div class="progress-fill" style="width: 45%"></div> |
| </div> |
| <div class="flex justify-between text-xs text-gray-500"> |
| <span>Epoch 12/25</span> |
| <span>45% complete</span> |
| </div> |
| |
| <div class="mt-3 flex space-x-2"> |
| <button class="flex-1 py-1 bg-gray-100 rounded text-sm">View Logs</button> |
| <button class="flex-1 py-1 bg-gray-100 rounded text-sm">Pause</button> |
| </div> |
| </div> |
| |
| <div class="mb-4 p-4 bg-white rounded-lg shadow"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-medium">Phishing Detection</h3> |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">Completed</span> |
| </div> |
| <p class="text-sm text-gray-500 mb-3">Updated with Q2 phishing patterns</p> |
| |
| <div class="progress-bar mb-2"> |
| <div class="progress-fill" style="width: 100%"></div> |
| </div> |
| |
| <div class="mt-3 flex space-x-2"> |
| <button class="flex-1 py-1 bg-blue-600 text-white rounded text-sm">Deploy</button> |
| <button class="flex-1 py-1 bg-gray-100 rounded text-sm">Evaluate</button> |
| </div> |
| </div> |
| |
| <button class="w-full py-3 bg-blue-600 text-white rounded-lg font-medium flex items-center justify-center"> |
| <i class="fas fa-plus mr-2"></i> New Fine-Tuning Job |
| </button> |
| </div> |
|
|
| |
| <div id="history" class="tab-content"> |
| <div class="mb-4 p-4 bg-white rounded-lg shadow"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-medium">Anomaly Detection</h3> |
| <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">2 days ago</span> |
| </div> |
| <p class="text-sm text-gray-500 mb-3">Network behavior patterns</p> |
| <div class="flex justify-between text-xs"> |
| <span class="text-green-600">Accuracy: 94.2%</span> |
| <span class="text-blue-600">View Details</span> |
| </div> |
| </div> |
| |
| <div class="mb-4 p-4 bg-white rounded-lg shadow"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-medium">Vulnerability Scanner</h3> |
| <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">1 week ago</span> |
| </div> |
| <p class="text-sm text-gray-500 mb-3">CVE database update</p> |
| <div class="flex justify-between text-xs"> |
| <span class="text-green-600">Precision: 89.7%</span> |
| <span class="text-blue-600">View Details</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="templates" class="tab-content"> |
| <div class="mb-4 p-4 bg-white rounded-lg shadow"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-medium">Standard Threat Model</h3> |
| <i class="fas fa-ellipsis-v text-gray-400"></i> |
| </div> |
| <p class="text-sm text-gray-500 mb-3">Base configuration for malware detection</p> |
| <button class="w-full py-2 bg-gray-100 rounded text-sm">Use Template</button> |
| </div> |
| |
| <div class="mb-4 p-4 bg-white rounded-lg shadow"> |
| <div class="flex justify-between items-center mb-2"> |
| <h3 class="font-medium">SOC Analyst Assistant</h3> |
| <i class="fas fa-ellipsis-v text-gray-400"></i> |
| </div> |
| <p class="text-sm text-gray-500 mb-3">Pre-configured for ticket analysis</p> |
| <button class="w-full py-2 bg-gray-100 rounded text-sm">Use Template</button> |
| </div> |
| </div> |
|
|
| |
| <div class="fixed bottom-6 right-6"> |
| <button id="quick-actions-btn" class="w-12 h-12 bg-blue-600 text-white rounded-full shadow-lg flex items-center justify-center"> |
| <i class="fas fa-bolt"></i> |
| </button> |
| |
| <div id="quick-actions-menu" class="hidden absolute bottom-16 right-0 w-48 bg-white rounded-lg shadow-lg p-2"> |
| <button class="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 rounded"><i class="fas fa-play mr-2"></i> Start New Job</button> |
| <button class="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 rounded"><i class="fas fa-chart-bar mr-2"></i> Quick Report</button> |
| <button class="w-full text-left px-3 py-2 text-sm hover:bg-gray-100 rounded"><i class="fas fa-question-circle mr-2"></i> Help</button> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| document.getElementById('menu-btn').addEventListener('click', function() { |
| document.getElementById('mobile-menu').classList.toggle('hidden'); |
| }); |
| |
| |
| const tabButtons = document.querySelectorAll('.tab-btn'); |
| tabButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| |
| tabButtons.forEach(btn => btn.classList.remove('active', 'text-blue-600', 'border-blue-600')); |
| document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active')); |
| |
| |
| this.classList.add('active', 'text-blue-600', 'border-blue-600'); |
| |
| |
| const tabId = this.getAttribute('data-tab'); |
| document.getElementById(tabId).classList.add('active'); |
| }); |
| }); |
| |
| |
| document.getElementById('quick-actions-btn').addEventListener('click', function() { |
| document.getElementById('quick-actions-menu').classList.toggle('hidden'); |
| }); |
| |
| |
| setInterval(() => { |
| const progressFill = document.querySelector('.progress-fill[style="width: 45%"]'); |
| if (progressFill) { |
| const currentWidth = parseInt(progressFill.style.width); |
| if (currentWidth < 100) { |
| progressFill.style.width = (currentWidth + 1) + '%'; |
| } |
| } |
| }, 1000); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=S-Dreamer/secullm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
