| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Nexuss AI Training Tutorials</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| nexuss: { |
| 50: '#f0f9ff', |
| 100: '#e0f2fe', |
| 200: '#bae6fd', |
| 300: '#7dd3fc', |
| 400: '#38bdf8', |
| 500: '#0ea5e9', |
| 600: '#0284c7', |
| 700: '#0369a1', |
| 800: '#075985', |
| 900: '#0c4a6e', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| |
| .prose pre { |
| background: #1e293b !important; |
| border-radius: 0.5rem; |
| padding: 1rem; |
| overflow-x: auto; |
| } |
| |
| .prose code { |
| font-family: 'Fira Code', monospace; |
| font-size: 0.875em; |
| } |
| |
| .prose h1 { |
| font-size: 2.25rem; |
| font-weight: 700; |
| margin-bottom: 1rem; |
| color: #f1f5f9; |
| } |
| |
| .prose h2 { |
| font-size: 1.875rem; |
| font-weight: 600; |
| margin-top: 2rem; |
| margin-bottom: 1rem; |
| color: #e2e8f0; |
| } |
| |
| .prose h3 { |
| font-size: 1.5rem; |
| font-weight: 600; |
| margin-top: 1.5rem; |
| margin-bottom: 0.75rem; |
| color: #cbd5e1; |
| } |
| |
| .prose p { |
| margin-bottom: 1rem; |
| line-height: 1.75; |
| color: #94a3b8; |
| } |
| |
| .prose ul, .prose ol { |
| margin-bottom: 1rem; |
| padding-left: 1.5rem; |
| color: #94a3b8; |
| } |
| |
| .prose li { |
| margin-bottom: 0.5rem; |
| } |
| |
| .prose a { |
| color: #38bdf8; |
| text-decoration: none; |
| transition: color 0.2s; |
| } |
| |
| .prose a:hover { |
| color: #7dd3fc; |
| text-decoration: underline; |
| } |
| |
| .prose blockquote { |
| border-left: 4px solid #38bdf8; |
| padding-left: 1rem; |
| margin: 1rem 0; |
| color: #94a3b8; |
| font-style: italic; |
| } |
| |
| .prose table { |
| width: 100%; |
| margin: 1rem 0; |
| border-collapse: collapse; |
| } |
| |
| .prose th, .prose td { |
| border: 1px solid #334155; |
| padding: 0.75rem; |
| text-align: left; |
| } |
| |
| .prose th { |
| background: #1e293b; |
| font-weight: 600; |
| color: #e2e8f0; |
| } |
| |
| .prose td { |
| color: #94a3b8; |
| } |
| |
| .scrollbar-thin::-webkit-scrollbar { |
| width: 6px; |
| height: 6px; |
| } |
| |
| .scrollbar-thin::-webkit-scrollbar-track { |
| background: #1e293b; |
| border-radius: 3px; |
| } |
| |
| .scrollbar-thin::-webkit-scrollbar-thumb { |
| background: #475569; |
| border-radius: 3px; |
| } |
| |
| .scrollbar-thin::-webkit-scrollbar-thumb:hover { |
| background: #64748b; |
| } |
| |
| .tree-item { |
| transition: all 0.2s ease; |
| } |
| |
| .tree-item:hover { |
| background: rgba(14, 165, 233, 0.1); |
| } |
| |
| .tree-item.active { |
| background: rgba(14, 165, 233, 0.2); |
| border-left: 3px solid #0ea5e9; |
| } |
| |
| .category-header { |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: #64748b; |
| margin-top: 1.5rem; |
| margin-bottom: 0.5rem; |
| padding-left: 0.75rem; |
| } |
| </style> |
| </head> |
| <body class="bg-slate-950 text-slate-100 min-h-screen"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <aside class="w-80 bg-slate-900 border-r border-slate-800 flex flex-col"> |
| |
| <div class="p-6 border-b border-slate-800"> |
| <div class="flex items-center gap-3"> |
| <div class="w-10 h-10 bg-gradient-to-br from-nexuss-500 to-nexuss-700 rounded-lg flex items-center justify-center"> |
| <i data-lucide="brain-circuit" class="w-6 h-6 text-white"></i> |
| </div> |
| <div> |
| <h1 class="font-bold text-lg">Nexuss AI</h1> |
| <p class="text-xs text-slate-400">Training Tutorials</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="p-4 border-b border-slate-800"> |
| <div class="relative"> |
| <i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-slate-400"></i> |
| <input |
| type="text" |
| id="searchInput" |
| placeholder="Search tutorials..." |
| class="w-full bg-slate-800 border border-slate-700 rounded-lg py-2 pl-10 pr-4 text-sm focus:outline-none focus:border-nexuss-500 focus:ring-1 focus:ring-nexuss-500 placeholder-slate-400" |
| > |
| </div> |
| </div> |
| |
| |
| <div class="p-4 border-b border-slate-800"> |
| </div> |
| |
| |
| <nav class="flex-1 overflow-y-auto scrollbar-thin p-4" id="tutorialTree"> |
| |
| </nav> |
| |
| |
| <div class="p-4 border-t border-slate-800 bg-slate-900"> |
| <div class="flex items-center justify-between text-xs text-slate-400"> |
| <span>v1.0.0</span> |
| <a href="https://github.com/nexuss0781/Nexuss-Transformer" target="_blank" class="flex items-center gap-1 hover:text-nexuss-400 transition-colors"> |
| <i data-lucide="github" class="w-3 h-3"></i> |
| GitHub |
| </a> |
| </div> |
| </div> |
| </aside> |
| |
| |
| <main class="flex-1 flex flex-col overflow-hidden"> |
| |
| <header class="h-16 bg-slate-900 border-b border-slate-800 flex items-center justify-between px-6"> |
| <div class="flex items-center gap-4"> |
| <button onclick="toggleSidebar()" class="lg:hidden p-2 hover:bg-slate-800 rounded-lg transition-colors"> |
| <i data-lucide="menu" class="w-5 h-5"></i> |
| </button> |
| <div class="flex items-center gap-2 text-sm text-slate-400"> |
| <i data-lucide="book-open" class="w-4 h-4"></i> |
| <span id="breadcrumb">Welcome</span> |
| </div> |
| </div> |
| <div class="flex items-center gap-3"> |
| <button onclick="toggleTheme()" class="p-2 hover:bg-slate-800 rounded-lg transition-colors"> |
| <i data-lucide="moon" class="w-5 h-5" id="themeIcon"></i> |
| </button> |
| <a href="https://nexuss-ai.com" target="_blank" class="px-4 py-2 bg-nexuss-600 hover:bg-nexuss-700 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"> |
| <i data-lucide="external-link" class="w-4 h-4"></i> |
| Nexuss AI |
| </a> |
| </div> |
| </header> |
| |
| |
| <div class="flex-1 overflow-y-auto scrollbar-thin p-8" id="contentArea"> |
| <div class="max-w-4xl mx-auto"> |
| |
| <div id="welcomeScreen"> |
| <div class="text-center mb-12"> |
| <div class="w-20 h-20 bg-gradient-to-br from-nexuss-500 to-nexuss-700 rounded-2xl flex items-center justify-center mx-auto mb-6"> |
| <i data-lucide="brain-circuit" class="w-12 h-12 text-white"></i> |
| </div> |
| <h1 class="text-4xl font-bold mb-4">Nexuss AI Training Tutorials</h1> |
| <p class="text-xl text-slate-400 max-w-2xl mx-auto"> |
| Complete end-to-end guide for AI model training from blank slate to production deployment |
| </p> |
| </div> |
| |
| <div class="grid md:grid-cols-3 gap-6 mb-12"> |
| <div class="bg-slate-900 border border-slate-800 rounded-xl p-6"> |
| <div class="w-12 h-12 bg-blue-900/30 rounded-lg flex items-center justify-center mb-4"> |
| <i data-lucide="layers" class="w-6 h-6 text-blue-400"></i> |
| </div> |
| <h3 class="font-semibold mb-2">14 Tutorials</h3> |
| <p class="text-sm text-slate-400">Comprehensive coverage from basics to advanced topics</p> |
| </div> |
| <div class="bg-slate-900 border border-slate-800 rounded-xl p-6"> |
| <div class="w-12 h-12 bg-green-900/30 rounded-lg flex items-center justify-center mb-4"> |
| <i data-lucide="code" class="w-6 h-6 text-green-400"></i> |
| </div> |
| <h3 class="font-semibold mb-2">Practical Examples</h3> |
| <p class="text-sm text-slate-400">Working code for every concept with explicit examples</p> |
| </div> |
| <div class="bg-slate-900 border border-slate-800 rounded-xl p-6"> |
| <div class="w-12 h-12 bg-purple-900/30 rounded-lg flex items-center justify-center mb-4"> |
| <i data-lucide="rocket" class="w-6 h-6 text-purple-400"></i> |
| </div> |
| <h3 class="font-semibold mb-2">Production Ready</h3> |
| <p class="text-sm text-slate-400">Debugging guides, monitoring, and best practices</p> |
| </div> |
| </div> |
| |
| <div class="bg-slate-900 border border-slate-800 rounded-xl p-6"> |
| <h3 class="font-semibold mb-4 flex items-center gap-2"> |
| <i data-lucide="map" class="w-5 h-5 text-nexuss-400"></i> |
| Learning Path |
| </h3> |
| <div class="space-y-3"> |
| <div class="flex items-start gap-3"> |
| <div class="w-6 h-6 bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"> |
| <span class="text-xs text-green-400 font-medium">1</span> |
| </div> |
| <div> |
| <p class="font-medium">Start with Introduction & Overview</p> |
| <p class="text-sm text-slate-400">Understand the framework and training lifecycle</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="w-6 h-6 bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"> |
| <span class="text-xs text-green-400 font-medium">2</span> |
| </div> |
| <div> |
| <p class="font-medium">Learn Model Architecture</p> |
| <p class="text-sm text-slate-400">Build blank slate models from scratch</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="w-6 h-6 bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"> |
| <span class="text-xs text-green-400 font-medium">3</span> |
| </div> |
| <div> |
| <p class="font-medium">Run Your First Training</p> |
| <p class="text-sm text-slate-400">Complete pipeline setup and monitoring</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="w-6 h-6 bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"> |
| <span class="text-xs text-green-400 font-medium">4</span> |
| </div> |
| <div> |
| <p class="font-medium">Master Fine-Tuning Techniques</p> |
| <p class="text-sm text-slate-400">Full fine-tuning, PEFT, LoRA, and RLHF</p> |
| </div> |
| </div> |
| <div class="flex items-start gap-3"> |
| <div class="w-6 h-6 bg-green-900/30 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5"> |
| <span class="text-xs text-green-400 font-medium">5</span> |
| </div> |
| <div> |
| <p class="font-medium">Deploy to Production</p> |
| <p class="text-sm text-slate-400">Validation, testing, MLOps, and governance</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="markdownContent" class="prose prose-invert max-w-none hidden"> |
| |
| </div> |
| </div> |
| </div> |
| </main> |
| </div> |
| |
| <script> |
| let tutorials = []; |
| let currentTutorial = null; |
| |
| |
| async function loadManifest() { |
| try { |
| const response = await fetch('manifest.json'); |
| const data = await response.json(); |
| tutorials = data.tutorials; |
| renderTree(tutorials); |
| } catch (error) { |
| console.error('Error loading manifest:', error); |
| } |
| } |
| |
| |
| function renderTree(items) { |
| const tree = document.getElementById('tutorialTree'); |
| tree.innerHTML = ''; |
| |
| const categories = {}; |
| items.forEach(item => { |
| if (!categories[item.category]) { |
| categories[item.category] = []; |
| } |
| categories[item.category].push(item); |
| }); |
| |
| Object.keys(categories).sort().forEach(category => { |
| const header = document.createElement('div'); |
| header.className = 'category-header'; |
| header.textContent = category; |
| tree.appendChild(header); |
| |
| categories[category].sort((a, b) => a.number - b.number).forEach(item => { |
| const treeItem = document.createElement('div'); |
| treeItem.className = 'tree-item p-3 rounded-lg cursor-pointer mb-1'; |
| treeItem.onclick = () => loadTutorial(item); |
| treeItem.innerHTML = ` |
| <div class="flex items-start gap-3"> |
| <div class="flex-shrink-0 w-8 h-8 bg-slate-800 rounded-md flex items-center justify-center"> |
| <span class="text-xs font-mono font-medium text-slate-300">${item.id}</span> |
| </div> |
| <div class="flex-1 min-w-0"> |
| <h4 class="font-medium text-sm truncate">${item.title}</h4> |
| </div> |
| </div> |
| `; |
| tree.appendChild(treeItem); |
| }); |
| }); |
| } |
| |
| |
| async function loadTutorial(item) { |
| currentTutorial = item; |
| |
| |
| document.querySelectorAll('.tree-item').forEach(el => el.classList.remove('active')); |
| event.currentTarget.classList.add('active'); |
| |
| |
| document.getElementById('breadcrumb').textContent = item.title; |
| |
| |
| document.getElementById('welcomeScreen').classList.add('hidden'); |
| const contentDiv = document.getElementById('markdownContent'); |
| contentDiv.classList.remove('hidden'); |
| contentDiv.innerHTML = '<div class="flex items-center justify-center py-12"><i data-lucide="loader-2" class="w-8 h-8 animate-spin text-nexuss-400"></i></div>'; |
| |
| try { |
| const response = await fetch(item.filename); |
| const markdown = await response.text(); |
| contentDiv.innerHTML = marked.parse(markdown); |
| lucide.createIcons(); |
| |
| |
| document.getElementById('contentArea').scrollTop = 0; |
| } catch (error) { |
| contentDiv.innerHTML = `<div class="text-center py-12 text-red-400">Error loading tutorial: ${error.message}</div>`; |
| } |
| } |
| |
| |
| document.getElementById('searchInput').addEventListener('input', (e) => { |
| const query = e.target.value.toLowerCase(); |
| if (query === '') { |
| renderTree(tutorials); |
| } else { |
| const filtered = tutorials.filter(t => |
| t.title.toLowerCase().includes(query) || |
| t.description.toLowerCase().includes(query) || |
| t.slug.includes(query) |
| ); |
| renderTree(filtered); |
| } |
| }); |
| |
| |
| function toggleTheme() { |
| document.documentElement.classList.toggle('dark'); |
| const icon = document.getElementById('themeIcon'); |
| if (document.documentElement.classList.contains('dark')) { |
| icon.setAttribute('data-lucide', 'moon'); |
| } else { |
| icon.setAttribute('data-lucide', 'sun'); |
| } |
| lucide.createIcons(); |
| } |
| |
| |
| function toggleSidebar() { |
| const sidebar = document.querySelector('aside'); |
| sidebar.classList.toggle('hidden'); |
| sidebar.classList.toggle('absolute'); |
| sidebar.classList.toggle('z-50'); |
| sidebar.classList.toggle('h-full'); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| loadManifest(); |
| lucide.createIcons(); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
