Spaces:
Running
Running
<html lang="en" class="dark"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>DARK_MAX AI SERVER</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"> | |
<script> | |
tailwind.config = { | |
darkMode: 'class', | |
theme: { | |
extend: { | |
colors: { | |
dark: { | |
900: '#0a0a0a', | |
800: '#1a1a1a', | |
700: '#2a2a2a', | |
600: '#3a3a3a', | |
}, | |
primary: { | |
500: '#6d28d9', | |
600: '#5b21b6', | |
} | |
} | |
} | |
} | |
} | |
</script> | |
<style> | |
.code-block { | |
font-family: 'Courier New', monospace; | |
background-color: rgba(0, 0, 0, 0.3); | |
border-left: 3px solid #6d28d9; | |
} | |
.glow { | |
text-shadow: 0 0 8px rgba(109, 40, 217, 0.7); | |
} | |
.pulse { | |
animation: pulse 2s infinite; | |
} | |
@keyframes pulse { | |
0% { opacity: 0.7; } | |
50% { opacity: 1; } | |
100% { opacity: 0.7; } | |
} | |
.terminal { | |
background-color: rgba(0, 0, 0, 0.5); | |
border: 1px solid #333; | |
border-radius: 0.5rem; | |
font-family: 'Courier New', monospace; | |
} | |
.file-drop-area { | |
border: 2px dashed #6d28d9; | |
transition: all 0.3s; | |
} | |
.file-drop-area.active { | |
border-color: #fff; | |
background-color: rgba(109, 40, 217, 0.1); | |
} | |
</style> | |
</head> | |
<body class="bg-dark-900 text-gray-200 min-h-screen"> | |
<div class="container mx-auto px-4 py-8"> | |
<!-- Header --> | |
<header class="flex justify-between items-center mb-8 border-b border-dark-700 pb-4"> | |
<div class="flex items-center space-x-3"> | |
<div class="w-10 h-10 bg-primary-500 rounded-full flex items-center justify-center"> | |
<i class="fas fa-brain text-xl"></i> | |
</div> | |
<h1 class="text-2xl font-bold glow">DARK_MAX <span class="text-primary-500">AI SERVER</span></h1> | |
</div> | |
<div class="flex items-center space-x-4"> | |
<button id="themeToggle" class="p-2 rounded-full hover:bg-dark-700 transition"> | |
<i class="fas fa-moon"></i> | |
</button> | |
<div class="flex items-center space-x-2"> | |
<span class="h-3 w-3 bg-green-500 rounded-full pulse"></span> | |
<span class="text-sm">Operational</span> | |
</div> | |
</div> | |
</header> | |
<!-- Main Grid --> | |
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
<!-- Left Panel - Upload & Files --> | |
<div class="lg:col-span-1 space-y-6"> | |
<!-- Upload Section --> | |
<div class="bg-dark-800 rounded-lg p-6 shadow-lg"> | |
<h2 class="text-xl font-semibold mb-4 flex items-center"> | |
<i class="fas fa-cloud-upload-alt mr-2 text-primary-500"></i> | |
Upload Source Files | |
</h2> | |
<div id="fileDropArea" class="file-drop-area rounded-lg p-8 text-center cursor-pointer mb-4"> | |
<i class="fas fa-file-upload text-4xl mb-3 text-primary-500"></i> | |
<p class="mb-2">Drag & drop files here</p> | |
<p class="text-sm text-gray-400 mb-4">or</p> | |
<input type="file" id="fileInput" class="hidden" multiple accept=".py,.sh,.ps1,.md,.txt,.c,.cpp,.js,.html,.css,.java,.go,.rs"> | |
<label for="fileInput" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded cursor-pointer transition"> | |
Select Files | |
</label> | |
</div> | |
<div id="fileList" class="max-h-60 overflow-y-auto"> | |
<!-- Files will be listed here --> | |
</div> | |
<button id="uploadBtn" class="w-full mt-4 bg-primary-500 hover:bg-primary-600 text-white py-2 rounded flex items-center justify-center transition"> | |
<i class="fas fa-server mr-2"></i> Process & Index Files | |
</button> | |
</div> | |
<!-- Database Info --> | |
<div class="bg-dark-800 rounded-lg p-6 shadow-lg"> | |
<h2 class="text-xl font-semibold mb-4 flex items-center"> | |
<i class="fas fa-database mr-2 text-primary-500"></i> | |
Vector Database | |
</h2> | |
<div class="space-y-3"> | |
<div class="flex justify-between"> | |
<span>Documents:</span> | |
<span id="docCount" class="font-mono">0</span> | |
</div> | |
<div class="flex justify-between"> | |
<span>Chunks:</span> | |
<span id="chunkCount" class="font-mono">0</span> | |
</div> | |
<div class="flex justify-between"> | |
<span>Embedding Model:</span> | |
<span class="font-mono">all-MiniLM-L6-v2</span> | |
</div> | |
<div class="flex justify-between"> | |
<span>Storage:</span> | |
<span class="font-mono">ChromaDB</span> | |
</div> | |
</div> | |
<button id="refreshDbBtn" class="w-full mt-4 bg-dark-700 hover:bg-dark-600 text-white py-2 rounded flex items-center justify-center transition"> | |
<i class="fas fa-sync-alt mr-2"></i> Refresh Stats | |
</button> | |
</div> | |
</div> | |
<!-- Center Panel - Query & Results --> | |
<div class="lg:col-span-2 space-y-6"> | |
<!-- Query Section --> | |
<div class="bg-dark-800 rounded-lg p-6 shadow-lg"> | |
<h2 class="text-xl font-semibold mb-4 flex items-center"> | |
<i class="fas fa-terminal mr-2 text-primary-500"></i> | |
Semantic Query | |
</h2> | |
<div class="flex space-x-2 mb-4"> | |
<button class="bg-dark-700 hover:bg-dark-600 px-3 py-1 rounded text-sm">Code</button> | |
<button class="bg-dark-700 hover:bg-dark-600 px-3 py-1 rounded text-sm">Documentation</button> | |
<button class="bg-dark-700 hover:bg-dark-600 px-3 py-1 rounded text-sm">Examples</button> | |
</div> | |
<div class="relative"> | |
<textarea id="queryInput" rows="4" class="w-full bg-dark-700 border border-dark-600 rounded-lg p-3 focus:outline-none focus:ring-2 focus:ring-primary-500" placeholder="Enter your query about the indexed files..."></textarea> | |
<div class="absolute bottom-3 right-3 flex space-x-2"> | |
<button id="clearQueryBtn" class="p-1 text-gray-400 hover:text-white"> | |
<i class="fas fa-times"></i> | |
</button> | |
<button id="sendQueryBtn" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-1 rounded flex items-center transition"> | |
<i class="fas fa-paper-plane mr-2"></i> Send | |
</button> | |
</div> | |
</div> | |
</div> | |
<!-- Results Section --> | |
<div class="bg-dark-800 rounded-lg p-6 shadow-lg"> | |
<div class="flex justify-between items-center mb-4"> | |
<h2 class="text-xl font-semibold flex items-center"> | |
<i class="fas fa-search mr-2 text-primary-500"></i> | |
Query Results | |
</h2> | |
<div class="flex space-x-2"> | |
<button id="exportJsonBtn" class="bg-dark-700 hover:bg-dark-600 px-3 py-1 rounded text-sm flex items-center"> | |
<i class="fas fa-file-export mr-1"></i> Export JSON | |
</button> | |
<button id="generateDatasetBtn" class="bg-primary-500 hover:bg-primary-600 px-3 py-1 rounded text-sm flex items-center"> | |
<i class="fas fa-database mr-1"></i> Generate Dataset | |
</button> | |
</div> | |
</div> | |
<div id="resultsContainer" class="space-y-4"> | |
<div class="terminal p-4 text-gray-300"> | |
<div class="flex items-center mb-2"> | |
<span class="text-green-500 mr-2">$</span> | |
<span class="text-gray-400">Ready to process queries...</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Training Section (Collapsible) --> | |
<div class="bg-dark-800 rounded-lg shadow-lg overflow-hidden"> | |
<div class="flex justify-between items-center p-6 cursor-pointer" id="trainingHeader"> | |
<h2 class="text-xl font-semibold flex items-center"> | |
<i class="fas fa-robot mr-2 text-primary-500"></i> | |
Model Training | |
</h2> | |
<i class="fas fa-chevron-down transition-transform" id="trainingArrow"></i> | |
</div> | |
<div class="px-6 pb-6 hidden" id="trainingContent"> | |
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
<div> | |
<label class="block text-sm font-medium mb-1">Training Method</label> | |
<select class="w-full bg-dark-700 border border-dark-600 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
<option>QLoRA</option> | |
<option>PEFT</option> | |
<option>Full Fine-Tuning</option> | |
</select> | |
</div> | |
<div> | |
<label class="block text-sm font-medium mb-1">Base Model</label> | |
<select class="w-full bg-dark-700 border border-dark-600 rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
<option>DeepSeek-Coder</option> | |
<option>GPT4All</option> | |
<option>Llama 2</option> | |
<option>Mistral</option> | |
</select> | |
</div> | |
</div> | |
<div class="mb-4"> | |
<label class="block text-sm font-medium mb-1">Training Parameters</label> | |
<div class="grid grid-cols-3 gap-2"> | |
<div> | |
<label class="text-xs block mb-1">Epochs</label> | |
<input type="number" value="3" class="w-full bg-dark-700 border border-dark-600 rounded-lg p-2"> | |
</div> | |
<div> | |
<label class="text-xs block mb-1">Batch Size</label> | |
<input type="number" value="4" class="w-full bg-dark-700 border border-dark-600 rounded-lg p-2"> | |
</div> | |
<div> | |
<label class="text-xs block mb-1">LR</label> | |
<input type="text" value="2e-5" class="w-full bg-dark-700 border border-dark-600 rounded-lg p-2"> | |
</div> | |
</div> | |
</div> | |
<div class="flex justify-between"> | |
<button class="bg-dark-700 hover:bg-dark-600 px-4 py-2 rounded flex items-center"> | |
<i class="fas fa-cog mr-2"></i> Advanced | |
</button> | |
<button class="bg-primary-500 hover:bg-primary-600 px-4 py-2 rounded flex items-center"> | |
<i class="fas fa-play mr-2"></i> Start Training | |
</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- Status Bar --> | |
<div class="mt-8 bg-dark-800 rounded-lg p-3 text-sm flex justify-between items-center"> | |
<div class="flex items-center space-x-4"> | |
<div class="flex items-center space-x-1"> | |
<i class="fas fa-microchip text-primary-500"></i> | |
<span>LLM: <span id="currentModel">DeepSeek-Coder-6.7B</span></span> | |
</div> | |
<div class="flex items-center space-x-1"> | |
<i class="fas fa-memory text-primary-500"></i> | |
<span>VRAM: <span id="vramUsage">12.4/16 GB</span></span> | |
</div> | |
</div> | |
<div class="text-gray-400"> | |
<span id="serverStatus">Server: 127.0.0.1:5000</span> | |
<span class="mx-2">|</span> | |
<span id="lastUpdate">Last indexed: Never</span> | |
</div> | |
</div> | |
</div> | |
<script> | |
// DOM Elements | |
const themeToggle = document.getElementById('themeToggle'); | |
const fileDropArea = document.getElementById('fileDropArea'); | |
const fileInput = document.getElementById('fileInput'); | |
const fileList = document.getElementById('fileList'); | |
const uploadBtn = document.getElementById('uploadBtn'); | |
const queryInput = document.getElementById('queryInput'); | |
const clearQueryBtn = document.getElementById('clearQueryBtn'); | |
const sendQueryBtn = document.getElementById('sendQueryBtn'); | |
const resultsContainer = document.getElementById('resultsContainer'); | |
const exportJsonBtn = document.getElementById('exportJsonBtn'); | |
const generateDatasetBtn = document.getElementById('generateDatasetBtn'); | |
const refreshDbBtn = document.getElementById('refreshDbBtn'); | |
const docCount = document.getElementById('docCount'); | |
const chunkCount = document.getElementById('chunkCount'); | |
const trainingHeader = document.getElementById('trainingHeader'); | |
const trainingContent = document.getElementById('trainingContent'); | |
const trainingArrow = document.getElementById('trainingArrow'); | |
const currentModel = document.getElementById('currentModel'); | |
const vramUsage = document.getElementById('vramUsage'); | |
const lastUpdate = document.getElementById('lastUpdate'); | |
// Theme Toggle | |
themeToggle.addEventListener('click', () => { | |
document.documentElement.classList.toggle('dark'); | |
const icon = themeToggle.querySelector('i'); | |
if (document.documentElement.classList.contains('dark')) { | |
icon.classList.remove('fa-sun'); | |
icon.classList.add('fa-moon'); | |
} else { | |
icon.classList.remove('fa-moon'); | |
icon.classList.add('fa-sun'); | |
} | |
}); | |
// File Drop Area | |
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
fileDropArea.addEventListener(eventName, preventDefaults, false); | |
}); | |
function preventDefaults(e) { | |
e.preventDefault(); | |
e.stopPropagation(); | |
} | |
['dragenter', 'dragover'].forEach(eventName => { | |
fileDropArea.addEventListener(eventName, highlight, false); | |
}); | |
['dragleave', 'drop'].forEach(eventName => { | |
fileDropArea.addEventListener(eventName, unhighlight, false); | |
}); | |
function highlight() { | |
fileDropArea.classList.add('active'); | |
} | |
function unhighlight() { | |
fileDropArea.classList.remove('active'); | |
} | |
fileDropArea.addEventListener('drop', handleDrop, false); | |
function handleDrop(e) { | |
const dt = e.dataTransfer; | |
const files = dt.files; | |
handleFiles(files); | |
} | |
fileInput.addEventListener('change', function() { | |
handleFiles(this.files); | |
}); | |
// Handle selected files | |
function handleFiles(files) { | |
fileList.innerHTML = ''; | |
for (let i = 0; i < files.length; i++) { | |
const file = files[i]; | |
const fileItem = document.createElement('div'); | |
fileItem.className = 'flex justify-between items-center p-2 bg-dark-700 rounded mb-2'; | |
fileItem.innerHTML = ` | |
<div class="flex items-center"> | |
<i class="fas fa-file-code mr-2 text-primary-500"></i> | |
<span>${file.name}</span> | |
<span class="text-xs text-gray-400 ml-2">(${(file.size / 1024).toFixed(1)} KB)</span> | |
</div> | |
<button class="text-red-400 hover:text-red-300" data-index="${i}"> | |
<i class="fas fa-times"></i> | |
</button> | |
`; | |
fileList.appendChild(fileItem); | |
} | |
// Add event listeners to remove buttons | |
document.querySelectorAll('#fileList button').forEach(btn => { | |
btn.addEventListener('click', function() { | |
// In a real app, we would remove the file from the FileList | |
// For this demo, we'll just remove the UI element | |
this.parentElement.remove(); | |
}); | |
}); | |
} | |
// Upload button | |
uploadBtn.addEventListener('click', function() { | |
if (fileList.children.length === 0) { | |
showMessage('Please select files first', 'error'); | |
return; | |
} | |
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...'; | |
this.disabled = true; | |
// Simulate processing | |
setTimeout(() => { | |
this.innerHTML = '<i class="fas fa-check mr-2"></i> Files Processed'; | |
showMessage('Files successfully indexed in vector database', 'success'); | |
// Update stats | |
docCount.textContent = Math.floor(Math.random() * 10) + 5; | |
chunkCount.textContent = Math.floor(Math.random() * 100) + 50; | |
lastUpdate.textContent = `Last indexed: ${new Date().toLocaleString()}`; | |
// Reset button after delay | |
setTimeout(() => { | |
this.innerHTML = '<i class="fas fa-server mr-2"></i> Process & Index Files'; | |
this.disabled = false; | |
}, 2000); | |
}, 3000); | |
}); | |
// Query handling | |
clearQueryBtn.addEventListener('click', function() { | |
queryInput.value = ''; | |
}); | |
sendQueryBtn.addEventListener('click', function() { | |
const query = queryInput.value.trim(); | |
if (!query) { | |
showMessage('Please enter a query', 'error'); | |
return; | |
} | |
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...'; | |
this.disabled = true; | |
// Simulate query processing | |
setTimeout(() => { | |
displayQueryResult(query); | |
this.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> Send'; | |
this.disabled = false; | |
}, 1500); | |
}); | |
// Display query result | |
function displayQueryResult(query) { | |
const resultId = Date.now(); | |
const codeExamples = [ | |
`def hello_world():\n print("Hello, World!")`, | |
`function calculateSum(a, b) {\n return a + b;\n}`, | |
`public class Main {\n public static void main(String[] args) {\n System.out.println("Hello World");\n }\n}` | |
]; | |
const randomCode = codeExamples[Math.floor(Math.random() * codeExamples.length)]; | |
const randomScore = (Math.random() * 0.5 + 0.5).toFixed(2); | |
const resultDiv = document.createElement('div'); | |
resultDiv.className = 'terminal p-4'; | |
resultDiv.innerHTML = ` | |
<div class="flex items-center mb-2"> | |
<span class="text-green-500 mr-2">$</span> | |
<span class="text-gray-400">${query}</span> | |
</div> | |
<div class="mb-3"> | |
<span class="text-xs bg-dark-700 px-2 py-1 rounded">Relevance: ${randomScore}</span> | |
<span class="text-xs bg-dark-700 px-2 py-1 rounded ml-2">Source: example.py</span> | |
</div> | |
<div class="code-block p-3 rounded mb-3"> | |
<pre class="whitespace-pre-wrap">${randomCode}</pre> | |
</div> | |
<div class="text-sm"> | |
<p>This code demonstrates a basic ${query.includes('function') ? 'function' : 'program'} in ${randomCode.includes('def') ? 'Python' : randomCode.includes('function') ? 'JavaScript' : 'Java'}.</p> | |
<p class="mt-1">It was found in the indexed files with high semantic relevance to your query.</p> | |
</div> | |
<div class="flex justify-end mt-2 space-x-2"> | |
<button class="text-xs bg-dark-700 hover:bg-dark-600 px-2 py-1 rounded">Copy</button> | |
<button class="text-xs bg-dark-700 hover:bg-dark-600 px-2 py-1 rounded">View Source</button> | |
<button class="text-xs bg-primary-500 hover:bg-primary-600 px-2 py-1 rounded">Add to Dataset</button> | |
</div> | |
`; | |
resultsContainer.prepend(resultDiv); | |
} | |
// Export JSON | |
exportJsonBtn.addEventListener('click', function() { | |
showMessage('Dataset exported as fine_tuning_data.json', 'success'); | |
}); | |
// Generate Dataset | |
generateDatasetBtn.addEventListener('click', function() { | |
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Generating...'; | |
this.disabled = true; | |
// Simulate dataset generation | |
setTimeout(() => { | |
showMessage('Dataset generated with 42 examples', 'success'); | |
this.innerHTML = '<i class="fas fa-database mr-1"></i> Generate Dataset'; | |
this.disabled = false; | |
// Add a dataset result | |
const resultDiv = document.createElement('div'); | |
resultDiv.className = 'terminal p-4'; | |
resultDiv.innerHTML = ` | |
<div class="flex items-center mb-2"> | |
<span class="text-purple-500 mr-2">$</span> | |
<span class="text-gray-400">Dataset Generation Complete</span> | |
</div> | |
<div class="mb-3"> | |
<span class="text-xs bg-dark-700 px-2 py-1 rounded">42 items</span> | |
<span class="text-xs bg-dark-700 px-2 py-1 rounded ml-2">Alpaca format</span> | |
</div> | |
<div class="code-block p-3 rounded mb-3"> | |
<pre class="whitespace-pre-wrap text-sm">{ | |
"instruction": "Explain this Python function", | |
"input": "def add(a, b):\n return a + b", | |
"output": "This function takes two parameters..." | |
}</pre> | |
</div> | |
<div class="flex justify-end mt-2"> | |
<button class="text-xs bg-primary-500 hover:bg-primary-600 px-3 py-1 rounded">Download JSON</button> | |
</div> | |
`; | |
resultsContainer.prepend(resultDiv); | |
}, 2000); | |
}); | |
// Refresh DB stats | |
refreshDbBtn.addEventListener('click', function() { | |
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Refreshing...'; | |
// Simulate refresh | |
setTimeout(() => { | |
docCount.textContent = Math.floor(Math.random() * 10) + 5; | |
chunkCount.textContent = Math.floor(Math.random() * 100) + 50; | |
this.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> Refresh Stats'; | |
showMessage('Database stats updated', 'info'); | |
}, 1000); | |
}); | |
// Toggle training section | |
trainingHeader.addEventListener('click', function() { | |
trainingContent.classList.toggle('hidden'); | |
trainingArrow.classList.toggle('rotate-180'); | |
}); | |
// Show message function | |
function showMessage(text, type) { | |
const message = document.createElement('div'); | |
message.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg ${ | |
type === 'error' ? 'bg-red-600' : | |
type === 'success' ? 'bg-green-600' : 'bg-blue-600' | |
}`; | |
message.textContent = text; | |
document.body.appendChild(message); | |
setTimeout(() => { | |
message.remove(); | |
}, 3000); | |
} | |
// Simulate initial load | |
setTimeout(() => { | |
currentModel.textContent = 'DeepSeek-Coder-6.7B'; | |
vramUsage.textContent = '12.4/16 GB'; | |
}, 500); | |
</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=Barbuuuuuuuu/dark-max-ai-server" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p><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=Bearbeardog/server" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
</html> |