server / index.html
Bearbeardog's picture
Add 3 files
a41d81c verified
<!DOCTYPE html>
<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>