Spaces:

Bur3hani
/

neuralv

Running

App Files Files Community

neuralv / index.html

Bur3hani

Add 3 files

7173650 verified about 1 year ago

raw

history blame contribute delete

58.7 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Advanced Neural Network Visualizer \| Model Fine-Tuning</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 src="https://cdn.jsdelivr.net/npm/chart.js"></script>
	<style>
	.neuron {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	position: relative;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
	transition: all 0.3s ease;
	}

	.layer {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: center;
	position: relative;
	}

	.connection {
	position: absolute;
	background: rgba(156, 163, 175, 0.3);
	transform-origin: 0 0;
	z-index: -1;
	transition: all 0.3s ease;
	}

	.connection.active {
	background: rgba(16, 185, 129, 0.6);
	height: 2px;
	}

	.code-editor {
	font-family: 'Courier New', monospace;
	font-size: 14px;
	line-height: 1.5;
	tab-size: 4;
	}

	.sidebar-item:hover {
	background-color: rgba(55, 65, 81, 0.5);
	}

	.jupyter-cell {
	border-left: 4px solid #3b82f6;
	}

	.jupyter-output {
	background-color: rgba(31, 41, 55, 0.7);
	}

	.draggable {
	cursor: move;
	}

	.resizable {
	resize: horizontal;
	overflow: auto;
	}

	@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
	}

	.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}

	.model-card {
	transition: all 0.2s ease;
	}

	.model-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
	}

	.model-card.selected {
	border-color: #3b82f6;
	background-color: rgba(59, 130, 246, 0.1);
	}

	.language-tag {
	transition: all 0.2s ease;
	}

	.language-tag:hover {
	transform: scale(1.05);
	}

	.language-tag.selected {
	background-color: #3b82f6;
	color: white;
	}

	.param-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #3b82f6;
	cursor: pointer;
	}

	.param-slider::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #3b82f6;
	cursor: pointer;
	}

	.tab-button {
	transition: all 0.2s ease;
	}

	.tab-button.active {
	border-bottom: 2px solid #3b82f6;
	color: #3b82f6;
	}

	.activation-node {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	}
	</style>
	</head>
	<body class="bg-gray-900 text-gray-200 h-screen flex flex-col overflow-hidden">
	<!-- Top Menu Bar -->
	<div class="bg-gray-800 px-4 py-2 flex items-center justify-between border-b border-gray-700">
	<div class="flex items-center space-x-4">
	<span class="font-bold text-blue-400 flex items-center">
	<i class="fas fa-brain mr-2"></i>
	<span>Neural Visualizer Pro</span>
	</span>
	<div class="flex space-x-2 text-sm">
	<button class="px-2 py-1 hover:bg-gray-700 rounded">File</button>
	<button class="px-2 py-1 hover:bg-gray-700 rounded">Edit</button>
	<button class="px-2 py-1 hover:bg-gray-700 rounded">View</button>
	<button class="px-2 py-1 hover:bg-gray-700 rounded">Run</button>
	<button class="px-2 py-1 hover:bg-gray-700 rounded">Help</button>
	</div>
	</div>
	<div class="flex items-center space-x-3">
	<span class="text-xs text-gray-400">Interactive Mode</span>
	<div class="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
	<button class="text-xs px-3 py-1 bg-blue-600 rounded hover:bg-blue-700">
	<i class="fas fa-cloud-upload-alt mr-1"></i> Save Model
	</button>
	</div>
	</div>

	<div class="flex flex-1 overflow-hidden">
	<!-- Sidebar -->
	<div class="w-16 bg-gray-800 flex flex-col items-center py-4 border-r border-gray-700">
	<button class="sidebar-item w-12 h-12 rounded-lg flex items-center justify-center mb-4 bg-gray-700 text-blue-400">
	<i class="fas fa-project-diagram text-xl"></i>
	</button>
	<button class="sidebar-item w-12 h-12 rounded-lg flex items-center justify-center mb-4 hover:text-blue-400">
	<i class="fas fa-layer-group text-xl"></i>
	</button>
	<button class="sidebar-item w-12 h-12 rounded-lg flex items-center justify-center mb-4 hover:text-blue-400">
	<i class="fas fa-sliders-h text-xl"></i>
	</button>
	<button class="sidebar-item w-12 h-12 rounded-lg flex items-center justify-center mb-4 hover:text-blue-400">
	<i class="fas fa-chart-line text-xl"></i>
	</button>
	<button class="sidebar-item w-12 h-12 rounded-lg flex items-center justify-center mb-4 hover:text-blue-400">
	<i class="fas fa-language text-xl"></i>
	</button>
	<div class="mt-auto">
	<button class="sidebar-item w-12 h-12 rounded-lg flex items-center justify-center mb-4 hover:text-blue-400">
	<i class="fas fa-cog text-xl"></i>
	</button>
	</div>
	</div>

	<!-- Main Content -->
	<div class="flex-1 flex overflow-hidden">
	<!-- Editor Panel -->
	<div class="w-1/2 flex flex-col border-r border-gray-700">
	<div class="bg-gray-800 px-4 py-2 flex items-center justify-between">
	<div class="flex items-center space-x-2">
	<i class="fas fa-file-code text-blue-400"></i>
	<span class="text-sm">model_config.py</span>
	</div>
	<div class="flex space-x-2">
	<button class="text-xs px-2 py-1 bg-blue-600 rounded hover:bg-blue-700">
	<i class="fas fa-play mr-1"></i> Run
	</button>
	<button class="text-xs px-2 py-1 bg-gray-700 rounded hover:bg-gray-600">
	<i class="fas fa-terminal mr-1"></i> Console
	</button>
	</div>
	</div>

	<div class="flex-1 overflow-auto bg-gray-900 p-4 code-editor">
	<!-- Model Selection Tabs -->
	<div class="flex border-b border-gray-700 mb-4">
	<button class="tab-button px-4 py-2 text-sm font-medium active" data-tab="config">
	<i class="fas fa-cog mr-2"></i>Configuration
	</button>
	<button class="tab-button px-4 py-2 text-sm font-medium" data-tab="training">
	<i class="fas fa-running mr-2"></i>Training
	</button>
	<button class="tab-button px-4 py-2 text-sm font-medium" data-tab="fine-tuning">
	<i class="fas fa-magic mr-2"></i>Fine-Tuning
	</button>
	</div>

	<!-- Config Tab Content -->
	<div id="config-tab" class="tab-content">
	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-green-400"># Model Configuration</div>
	<div class="text-gray-500"># Select a base model and customize parameters</div>
	</div>

	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-purple-400">from</div> <div class="text-gray-200">transformers</div> <div class="text-purple-400">import</div> <div class="text-gray-200">AutoModelForSequenceClassification</div>
	</div>

	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-yellow-400 mb-2"># Available Models (click to select)</div>
	<div class="grid grid-cols-3 gap-4 mb-4">
	<div class="model-card p-4 border border-gray-700 rounded-lg cursor-pointer bg-gray-800 selected" data-model="llama-2">
	<div class="flex items-center mb-2">
	<i class="fas fa-robot text-blue-400 mr-2"></i>
	<span class="font-medium">LLaMA 2</span>
	</div>
	<div class="text-xs text-gray-400">7B parameters</div>
	<div class="text-xs text-gray-400">Context: 4096</div>
	</div>
	<div class="model-card p-4 border border-gray-700 rounded-lg cursor-pointer bg-gray-800" data-model="gpt-3">
	<div class="flex items-center mb-2">
	<i class="fas fa-brain text-purple-400 mr-2"></i>
	<span class="font-medium">GPT-3.5</span>
	</div>
	<div class="text-xs text-gray-400">175B parameters</div>
	<div class="text-xs text-gray-400">Context: 4096</div>
	</div>
	<div class="model-card p-4 border border-gray-700 rounded-lg cursor-pointer bg-gray-800" data-model="bert">
	<div class="flex items-center mb-2">
	<i class="fas fa-shield-alt text-green-400 mr-2"></i>
	<span class="font-medium">BERT</span>
	</div>
	<div class="text-xs text-gray-400">340M parameters</div>
	<div class="text-xs text-gray-400">Context: 512</div>
	</div>
	</div>
	</div>

	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-yellow-400 mb-2"># Model Parameters</div>
	<div class="space-y-4">
	<div>
	<label class="block text-sm text-gray-400 mb-1">Learning Rate</label>
	<div class="flex items-center space-x-4">
	<input type="range" min="0.0001" max="0.01" step="0.0001" value="0.001" class="param-slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
	<span class="text-xs bg-gray-800 px-2 py-1 rounded">0.001</span>
	</div>
	</div>
	<div>
	<label class="block text-sm text-gray-400 mb-1">Batch Size</label>
	<div class="flex items-center space-x-4">
	<input type="range" min="8" max="128" step="8" value="32" class="param-slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
	<span class="text-xs bg-gray-800 px-2 py-1 rounded">32</span>
	</div>
	</div>
	<div>
	<label class="block text-sm text-gray-400 mb-1">Epochs</label>
	<div class="flex items-center space-x-4">
	<input type="range" min="1" max="50" step="1" value="10" class="param-slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
	<span class="text-xs bg-gray-800 px-2 py-1 rounded">10</span>
	</div>
	</div>
	<div>
	<label class="block text-sm text-gray-400 mb-1">Dropout Rate</label>
	<div class="flex items-center space-x-4">
	<input type="range" min="0" max="0.5" step="0.05" value="0.1" class="param-slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
	<span class="text-xs bg-gray-800 px-2 py-1 rounded">0.1</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Training Tab Content -->
	<div id="training-tab" class="tab-content hidden">
	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-green-400"># Training Configuration</div>
	<div class="text-gray-500"># Set up your training parameters and data</div>
	</div>

	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-yellow-400 mb-2"># Dataset Selection</div>
	<select class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm mb-4">
	<option>Custom Dataset</option>
	<option>GLUE Benchmark</option>
	<option>SQuAD 2.0</option>
	<option>IMDB Reviews</option>
	<option>Swahili News Dataset</option>
	</select>

	<div class="text-sm text-gray-400 mb-2">Or upload your own dataset:</div>
	<div class="border-2 border-dashed border-gray-700 rounded-lg p-4 text-center cursor-pointer hover:bg-gray-800 mb-4">
	<i class="fas fa-cloud-upload-alt text-2xl text-blue-400 mb-2"></i>
	<div class="text-sm">Click to upload or drag and drop</div>
	<div class="text-xs text-gray-500 mt-1">CSV, JSON, or TXT files</div>
	</div>
	</div>

	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-yellow-400 mb-2"># Training Options</div>
	<div class="space-y-3">
	<label class="flex items-center space-x-2 cursor-pointer">
	<input type="checkbox" class="form-checkbox text-blue-500 rounded" checked>
	<span class="text-sm">Use mixed precision training</span>
	</label>
	<label class="flex items-center space-x-2 cursor-pointer">
	<input type="checkbox" class="form-checkbox text-blue-500 rounded">
	<span class="text-sm">Enable gradient checkpointing</span>
	</label>
	<label class="flex items-center space-x-2 cursor-pointer">
	<input type="checkbox" class="form-checkbox text-blue-500 rounded" checked>
	<span class="text-sm">Use learning rate scheduling</span>
	</label>
	<label class="flex items-center space-x-2 cursor-pointer">
	<input type="checkbox" class="form-checkbox text-blue-500 rounded">
	<span class="text-sm">Enable early stopping</span>
	</label>
	</div>
	</div>
	</div>

	<!-- Fine-Tuning Tab Content -->
	<div id="fine-tuning-tab" class="tab-content hidden">
	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-green-400"># Fine-Tuning Options</div>
	<div class="text-gray-500"># Customize for specific languages or domains</div>
	</div>

	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-yellow-400 mb-2"># Language Specialization</div>
	<div class="flex flex-wrap gap-2 mb-4">
	<div class="language-tag px-3 py-1 bg-gray-800 rounded-full text-xs cursor-pointer selected" data-lang="en">
	<i class="fas fa-check-circle mr-1"></i> English
	</div>
	<div class="language-tag px-3 py-1 bg-gray-800 rounded-full text-xs cursor-pointer" data-lang="sw">
	<i class="fas fa-globe-africa mr-1"></i> Swahili
	</div>
	<div class="language-tag px-3 py-1 bg-gray-800 rounded-full text-xs cursor-pointer" data-lang="fr">
	<i class="fas fa-baguette mr-1"></i> French
	</div>
	<div class="language-tag px-3 py-1 bg-gray-800 rounded-full text-xs cursor-pointer" data-lang="es">
	<i class="fas fa-sun mr-1"></i> Spanish
	</div>
	<div class="language-tag px-3 py-1 bg-gray-800 rounded-full text-xs cursor-pointer" data-lang="de">
	<i class="fas fa-landmark mr-1"></i> German
	</div>
	<div class="language-tag px-3 py-1 bg-gray-800 rounded-full text-xs cursor-pointer" data-lang="zh">
	<i class="fas fa-yin-yang mr-1"></i> Chinese
	</div>
	</div>

	<div class="text-sm text-gray-400 mb-2">Custom tokenizer for selected language:</div>
	<textarea class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm h-20 mb-4" placeholder="Add special tokens or vocabulary for your language..."></textarea>
	</div>

	<div class="jupyter-cell mb-4 pl-2">
	<div class="text-yellow-400 mb-2"># Domain Adaptation</div>
	<select class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm mb-4">
	<option>General Language</option>
	<option>Medical</option>
	<option>Legal</option>
	<option>Financial</option>
	<option>Technical</option>
	<option>News</option>
	</select>

	<div class="text-sm text-gray-400 mb-2">Domain-specific vocabulary:</div>
	<textarea class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm h-20" placeholder="Add domain-specific terms..."></textarea>
	</div>
	</div>
	</div>

	<div class="bg-gray-800 px-4 py-2 border-t border-gray-700">
	<div class="flex items-center space-x-2 text-xs">
	<span>Python 3.10.6</span>
	<span class="text-gray-500">•</span>
	<span>PyTorch 2.0.1</span>
	<span class="text-gray-500">•</span>
	<span>Transformers 4.30.2</span>
	</div>
	</div>
	</div>

	<!-- Visualization Panel -->
	<div class="w-1/2 flex flex-col">
	<div class="bg-gray-800 px-4 py-2 flex items-center justify-between">
	<div class="flex items-center space-x-2">
	<i class="fas fa-project-diagram text-blue-400"></i>
	<span class="text-sm">Model Visualization & Training</span>
	</div>
	<div class="flex space-x-2">
	<button class="text-xs px-2 py-1 bg-gray-700 rounded hover:bg-gray-600">
	<i class="fas fa-sync-alt mr-1"></i> Refresh
	</button>
	<button class="text-xs px-2 py-1 bg-gray-700 rounded hover:bg-gray-600">
	<i class="fas fa-expand mr-1"></i> Fullscreen
	</button>
	<button class="text-xs px-2 py-1 bg-blue-600 rounded hover:bg-blue-700">
	<i class="fas fa-rocket mr-1"></i> Deploy
	</button>
	</div>
	</div>

	<div class="flex-1 overflow-auto bg-gray-900 p-8 flex flex-col">
	<!-- Model Architecture Visualization -->
	<div class="mb-8">
	<div class="text-lg font-medium mb-4 flex items-center">
	<i class="fas fa-network-wired text-blue-400 mr-2"></i>
	<span>Model Architecture</span>
	</div>
	<div class="bg-gray-800 rounded-lg p-6">
	<div class="flex items-center justify-center space-x-8" id="network-container">
	<!-- Network visualization will be rendered here -->
	</div>
	</div>
	</div>

	<!-- Training Controls -->
	<div class="mb-8">
	<div class="text-lg font-medium mb-4 flex items-center">
	<i class="fas fa-running text-green-400 mr-2"></i>
	<span>Training Controls</span>
	</div>
	<div class="bg-gray-800 rounded-lg p-6">
	<div class="grid grid-cols-3 gap-6 mb-6">
	<div>
	<label class="block text-sm text-gray-400 mb-2">Current Epoch</label>
	<div class="text-2xl font-bold text-center">0</div>
	</div>
	<div>
	<label class="block text-sm text-gray-400 mb-2">Training Loss</label>
	<div class="text-2xl font-bold text-center">-</div>
	</div>
	<div>
	<label class="block text-sm text-gray-400 mb-2">Validation Loss</label>
	<div class="text-2xl font-bold text-center">-</div>
	</div>
	</div>

	<div class="flex space-x-4">
	<button class="flex-1 py-2 bg-green-600 rounded hover:bg-green-700 flex items-center justify-center">
	<i class="fas fa-play mr-2"></i> Start Training
	</button>
	<button class="flex-1 py-2 bg-yellow-600 rounded hover:bg-yellow-700 flex items-center justify-center" disabled>
	<i class="fas fa-pause mr-2"></i> Pause
	</button>
	<button class="flex-1 py-2 bg-red-600 rounded hover:bg-red-700 flex items-center justify-center" disabled>
	<i class="fas fa-stop mr-2"></i> Stop
	</button>
	</div>
	</div>
	</div>

	<!-- Training Progress Charts -->
	<div class="mb-8">
	<div class="text-lg font-medium mb-4 flex items-center">
	<i class="fas fa-chart-line text-purple-400 mr-2"></i>
	<span>Training Metrics</span>
	</div>
	<div class="grid grid-cols-2 gap-6">
	<div class="bg-gray-800 rounded-lg p-4">
	<canvas id="training-chart" height="200"></canvas>
	</div>
	<div class="bg-gray-800 rounded-lg p-4">
	<canvas id="metrics-chart" height="200"></canvas>
	</div>
	</div>
	</div>

	<!-- Fine-Tuning Progress -->
	<div>
	<div class="text-lg font-medium mb-4 flex items-center">
	<i class="fas fa-magic text-pink-400 mr-2"></i>
	<span>Fine-Tuning Progress</span>
	</div>
	<div class="bg-gray-800 rounded-lg p-6">
	<div class="mb-4">
	<div class="flex justify-between text-sm mb-1">
	<span>Language Adaptation (Swahili)</span>
	<span>0%</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="bg-blue-500 h-2 rounded-full" style="width: 0%"></div>
	</div>
	</div>
	<div class="mb-4">
	<div class="flex justify-between text-sm mb-1">
	<span>Domain Specialization</span>
	<span>0%</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="bg-purple-500 h-2 rounded-full" style="width: 0%"></div>
	</div>
	</div>
	<div class="text-sm text-gray-400">
	<i class="fas fa-info-circle mr-2"></i>
	Fine-tuning will begin after initial training completes
	</div>
	</div>
	</div>
	</div>

	<div class="bg-gray-800 px-4 py-2 border-t border-gray-700 flex justify-between items-center">
	<div class="flex items-center space-x-4">
	<button class="text-xs px-3 py-1 bg-blue-600 rounded hover:bg-blue-700">
	<i class="fas fa-play mr-1"></i> Train Model
	</button>
	<div class="flex items-center space-x-2 text-xs">
	<span>GPU:</span>
	<span class="px-2 py-1 bg-gray-700 rounded">NVIDIA A100</span>
	</div>
	<div class="flex items-center space-x-2 text-xs">
	<span>Memory:</span>
	<span class="px-2 py-1 bg-gray-700 rounded">32GB</span>
	</div>
	</div>
	<div class="text-xs text-gray-400">
	<i class="fas fa-circle text-green-500 mr-1"></i> Ready
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	// Initialize the neural network visualization
	document.addEventListener('DOMContentLoaded', function() {
	// Network configuration
	const layers = [4, 8, 8, 4];
	const colors = ['bg-blue-500', 'bg-purple-500', 'bg-pink-500', 'bg-green-500'];
	const activations = ['sigmoid', 'relu', 'tanh', 'linear'];

	// Draw the network
	drawNetwork(layers, colors, activations);

	// Initialize charts
	initTrainingChart();
	initMetricsChart();

	// Make the editor panel resizable
	const editorPanel = document.querySelector('.w-1/2');
	editorPanel.classList.add('resizable');

	// Add draggable functionality to neurons
	makeNeuronsDraggable();

	// Setup tab switching
	setupTabs();

	// Setup model selection
	setupModelSelection();

	// Setup language selection
	setupLanguageSelection();

	// Update slider values
	updateSliderValues();

	// Simulate training when train button is clicked
	simulateTraining();
	});

	function drawNetwork(layers, colors, activations) {
	const container = document.getElementById('network-container');
	container.innerHTML = '';

	// Calculate positions for all neurons
	const maxNeurons = Math.max(...layers);
	const layerSpacing = 200;
	const neuronSpacing = 60;

	// Create each layer
	layers.forEach((neuronCount, layerIndex) => {
	const layerDiv = document.createElement('div');
	layerDiv.className = 'layer';

	// Calculate vertical offset to center the layer
	const verticalOffset = ((maxNeurons - neuronCount) * neuronSpacing) / 2;

	// Create neurons in this layer
	for (let i = 0; i < neuronCount; i++) {
	const neuron = document.createElement('div');
	neuron.className = `neuron ${colors[layerIndex]} draggable`;
	neuron.textContent = `${layerIndex+1}.${i+1}`;
	neuron.dataset.layer = layerIndex;
	neuron.dataset.neuron = i;
	neuron.style.top = `${verticalOffset + i * neuronSpacing}px`;
	neuron.style.left = `${layerIndex * layerSpacing}px`;

	// Add activation indicator
	const activationNode = document.createElement('div');
	activationNode.className = `activation-node bg-${getActivationColor(activations[layerIndex])}`;
	activationNode.title = activations[layerIndex];
	neuron.appendChild(activationNode);

	layerDiv.appendChild(neuron);
	}

	// Add layer label
	const layerLabel = document.createElement('div');
	layerLabel.className = 'text-xs mt-2 text-gray-400';

	if (layerIndex === 0) {
	layerLabel.textContent = 'Input Layer';
	} else if (layerIndex === layers.length - 1) {
	layerLabel.textContent = 'Output Layer';
	} else {
	layerLabel.textContent = `Hidden Layer ${layerIndex}`;
	}

	layerDiv.appendChild(layerLabel);
	container.appendChild(layerDiv);
	});

	// Draw connections between neurons
	if (layers.length > 1) {
	for (let l = 0; l < layers.length - 1; l++) {
	const currentLayerCount = layers[l];
	const nextLayerCount = layers[l + 1];

	for (let i = 0; i < currentLayerCount; i++) {
	for (let j = 0; j < nextLayerCount; j++) {
	const startNeuron = document.querySelector(`[data-layer="${l}"][data-neuron="${i}"]`);
	const endNeuron = document.querySelector(`[data-layer="${l+1}"][data-neuron="${j}"]`);

	if (startNeuron && endNeuron) {
	const startRect = startNeuron.getBoundingClientRect();
	const endRect = endNeuron.getBoundingClientRect();
	const containerRect = container.getBoundingClientRect();

	const startX = startRect.left + startRect.width/2 - containerRect.left;
	const startY = startRect.top + startRect.height/2 - containerRect.top;
	const endX = endRect.left + endRect.width/2 - containerRect.left;
	const endY = endRect.top + endRect.height/2 - containerRect.top;

	const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
	const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;

	const connection = document.createElement('div');
	connection.className = 'connection';
	connection.style.width = `${length}px`;
	connection.style.height = '1px';
	connection.style.left = `${startX}px`;
	connection.style.top = `${startY}px`;
	connection.style.transform = `rotate(${angle}deg)`;

	// Randomly make some connections more visible to show weights
	if (Math.random() < 0.3) {
	connection.classList.add('active');
	}

	container.appendChild(connection);
	}
	}
	}
	}
	}
	}

	function getActivationColor(activation) {
	switch(activation) {
	case 'relu': return 'red-500';
	case 'sigmoid': return 'blue-500';
	case 'tanh': return 'purple-500';
	case 'linear': return 'green-500';
	default: return 'gray-500';
	}
	}

	function initTrainingChart() {
	const ctx = document.getElementById('training-chart').getContext('2d');
	const chart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: Array.from({length: 20}, (_, i) => i * 5),
	datasets: [
	{
	label: 'Training Loss',
	data: [2.5, 2.1, 1.8, 1.5, 1.2, 0.9, 0.7, 0.5, 0.4, 0.3, 0.25, 0.2, 0.18, 0.16, 0.15, 0.14, 0.13, 0.12, 0.11, 0.1],
	borderColor: 'rgb(99, 102, 241)',
	backgroundColor: 'rgba(99, 102, 241, 0.1)',
	tension: 0.4,
	fill: true
	},
	{
	label: 'Validation Loss',
	data: [2.6, 2.3, 2.0, 1.7, 1.4, 1.1, 0.9, 0.7, 0.6, 0.5, 0.45, 0.4, 0.38, 0.36, 0.35, 0.34, 0.33, 0.32, 0.31, 0.3],
	borderColor: 'rgb(236, 72, 153)',
	backgroundColor: 'rgba(236, 72, 153, 0.1)',
	tension: 0.4,
	fill: true
	}
	]
	},
	options: {
	responsive: true,
	plugins: {
	title: {
	display: true,
	text: 'Training Loss',
	color: '#E5E7EB'
	},
	legend: {
	labels: {
	color: '#E5E7EB'
	}
	}
	},
	scales: {
	x: {
	title: {
	display: true,
	text: 'Epoch',
	color: '#9CA3AF'
	},
	ticks: {
	color: '#9CA3AF'
	},
	grid: {
	color: 'rgba(55, 65, 81, 0.5)'
	}
	},
	y: {
	title: {
	display: true,
	text: 'Loss',
	color: '#9CA3AF'
	},
	ticks: {
	color: '#9CA3AF'
	},
	grid: {
	color: 'rgba(55, 65, 81, 0.5)'
	}
	}
	}
	}
	});
	}

	function initMetricsChart() {
	const ctx = document.getElementById('metrics-chart').getContext('2d');
	const chart = new Chart(ctx, {
	type: 'line',
	data: {
	labels: Array.from({length: 20}, (_, i) => i * 5),
	datasets: [
	{
	label: 'Accuracy',
	data: [0.2, 0.3, 0.35, 0.4, 0.5, 0.6, 0.65, 0.7, 0.75, 0.78, 0.8, 0.82, 0.84, 0.85, 0.86, 0.87, 0.88, 0.89, 0.9, 0.91],
	borderColor: 'rgb(16, 185, 129)',
	backgroundColor: 'rgba(16, 185, 129, 0.1)',
	tension: 0.4,
	fill: true
	},
	{
	label: 'F1 Score',
	data: [0.15, 0.25, 0.3, 0.35, 0.45, 0.55, 0.6, 0.65, 0.7, 0.73, 0.76, 0.78, 0.8, 0.82, 0.83, 0.84, 0.85, 0.86, 0.87, 0.88],
	borderColor: 'rgb(245, 158, 11)',
	backgroundColor: 'rgba(245, 158, 11, 0.1)',
	tension: 0.4,
	fill: true
	}
	]
	},
	options: {
	responsive: true,
	plugins: {
	title: {
	display: true,
	text: 'Performance Metrics',
	color: '#E5E7EB'
	},
	legend: {
	labels: {
	color: '#E5E7EB'
	}
	}
	},
	scales: {
	x: {
	title: {
	display: true,
	text: 'Epoch',
	color: '#9CA3AF'
	},
	ticks: {
	color: '#9CA3AF'
	},
	grid: {
	color: 'rgba(55, 65, 81, 0.5)'
	}
	},
	y: {
	title: {
	display: true,
	text: 'Score',
	color: '#9CA3AF'
	},
	ticks: {
	color: '#9CA3AF'
	},
	grid: {
	color: 'rgba(55, 65, 81, 0.5)'
	}
	}
	}
	}
	});
	}

	function makeNeuronsDraggable() {
	const neurons = document.querySelectorAll('.draggable');
	let isDragging = false;
	let currentNeuron = null;
	let offsetX, offsetY;

	neurons.forEach(neuron => {
	neuron.addEventListener('mousedown', function(e) {
	isDragging = true;
	currentNeuron = this;
	offsetX = e.clientX - this.getBoundingClientRect().left;
	offsetY = e.clientY - this.getBoundingClientRect().top;

	// Bring to front
	this.style.zIndex = '10';
	this.classList.add('ring-2', 'ring-blue-400');
	});
	});

	document.addEventListener('mousemove', function(e) {
	if (!isDragging \|\| !currentNeuron) return;

	const container = document.getElementById('network-container');
	const containerRect = container.getBoundingClientRect();

	let x = e.clientX - containerRect.left - offsetX;
	let y = e.clientY - containerRect.top - offsetY;

	// Constrain to container
	x = Math.max(0, Math.min(x, containerRect.width - currentNeuron.offsetWidth));
	y = Math.max(0, Math.min(y, containerRect.height - currentNeuron.offsetHeight));

	currentNeuron.style.left = `${x}px`;
	currentNeuron.style.top = `${y}px`;

	// Redraw connections
	redrawConnections();
	});

	document.addEventListener('mouseup', function() {
	if (currentNeuron) {
	currentNeuron.style.zIndex = '';
	currentNeuron.classList.remove('ring-2', 'ring-blue-400');
	}
	isDragging = false;
	currentNeuron = null;
	});
	}

	function redrawConnections() {
	// Remove all existing connections
	const connections = document.querySelectorAll('.connection');
	connections.forEach(conn => conn.remove());

	// Get all neurons
	const neurons = document.querySelectorAll('.neuron');
	const container = document.getElementById('network-container');
	const containerRect = container.getBoundingClientRect();

	// Recreate connections between consecutive layers
	const layers = {};
	neurons.forEach(neuron => {
	const layer = parseInt(neuron.dataset.layer);
	if (!layers[layer]) layers[layer] = [];
	layers[layer].push(neuron);
	});

	const layerIndices = Object.keys(layers).sort();

	for (let i = 0; i < layerIndices.length - 1; i++) {
	const currentLayer = layers[layerIndices[i]];
	const nextLayer = layers[layerIndices[i+1]];

	currentLayer.forEach(startNeuron => {
	nextLayer.forEach(endNeuron => {
	const startRect = startNeuron.getBoundingClientRect();
	const endRect = endNeuron.getBoundingClientRect();

	const startX = startRect.left + startRect.width/2 - containerRect.left;
	const startY = startRect.top + startRect.height/2 - containerRect.top;
	const endX = endRect.left + endRect.width/2 - containerRect.left;
	const endY = endRect.top + endRect.height/2 - containerRect.top;

	const length = Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2));
	const angle = Math.atan2(endY - startY, endX - startX) * 180 / Math.PI;

	const connection = document.createElement('div');
	connection.className = 'connection';
	connection.style.width = `${length}px`;
	connection.style.height = '1px';
	connection.style.left = `${startX}px`;
	connection.style.top = `${startY}px`;
	connection.style.transform = `rotate(${angle}deg)`;

	// Randomly make some connections more visible to show weights
	if (Math.random() < 0.3) {
	connection.classList.add('active');
	}

	container.appendChild(connection);
	});
	});
	}
	}

	function setupTabs() {
	const tabButtons = document.querySelectorAll('.tab-button');
	const tabContents = document.querySelectorAll('.tab-content');

	tabButtons.forEach(button => {
	button.addEventListener('click', function() {
	// Remove active class from all buttons
	tabButtons.forEach(btn => btn.classList.remove('active'));
	// Add active class to clicked button
	this.classList.add('active');

	// Hide all tab contents
	tabContents.forEach(content => content.classList.add('hidden'));
	// Show the selected tab content
	const tabId = this.getAttribute('data-tab') + '-tab';
	document.getElementById(tabId).classList.remove('hidden');
	});
	});
	}

	function setupModelSelection() {
	const modelCards = document.querySelectorAll('.model-card');

	modelCards.forEach(card => {
	card.addEventListener('click', function() {
	// Remove selected class from all cards
	modelCards.forEach(c => c.classList.remove('selected'));
	// Add selected class to clicked card
	this.classList.add('selected');

	// Update network visualization based on selected model
	const model = this.getAttribute('data-model');
	updateNetworkForModel(model);
	});
	});
	}

	function updateNetworkForModel(model) {
	let layers, colors, activations;

	switch(model) {
	case 'llama-2':
	layers = [4, 8, 8, 4];
	colors = ['bg-blue-500', 'bg-purple-500', 'bg-pink-500', 'bg-green-500'];
	activations = ['sigmoid', 'relu', 'tanh', 'linear'];
	break;
	case 'gpt-3':
	layers = [4, 12, 12, 4];
	colors = ['bg-blue-500', 'bg-purple-500', 'bg-pink-500', 'bg-green-500'];
	activations = ['relu', 'relu', 'tanh', 'linear'];
	break;
	case 'bert':
	layers = [4, 8, 4];
	colors = ['bg-blue-500', 'bg-purple-500', 'bg-green-500'];
	activations = ['tanh', 'relu', 'linear'];
	break;
	default:
	layers = [4, 8, 8, 4];
	colors = ['bg-blue-500', 'bg-purple-500', 'bg-pink-500', 'bg-green-500'];
	activations = ['sigmoid', 'relu', 'tanh', 'linear'];
	}

	drawNetwork(layers, colors, activations);
	}

	function setupLanguageSelection() {
	const languageTags = document.querySelectorAll('.language-tag');

	languageTags.forEach(tag => {
	tag.addEventListener('click', function() {
	// Toggle selected class
	this.classList.toggle('selected');

	// If Swahili is selected, show special message
	if (this.getAttribute('data-lang') === 'sw' && this.classList.contains('selected')) {
	showSwahiliMessage();
	}
	});
	});
	}

	function showSwahiliMessage() {
	const fineTuningTab = document.getElementById('fine-tuning-tab');
	const message = document.createElement('div');
	message.className = 'bg-blue-900 text-blue-200 p-3 rounded-lg text-sm mb-4 flex items-start';
	message.innerHTML = `
	<i class="fas fa-info-circle mt-1 mr-2"></i>
	<div>
	<strong>Kumbuka:</strong> Unachagua kufanya fine-tuning kwa lugha ya Kiswahili.
	Hii itahitaji data ya ziada ya Kiswahili kwa matokeo bora.
	<div class="mt-1">Tafadhali hakikisha una dataset ya kutosha.</div>
	</div>
	`;

	fineTuningTab.insertBefore(message, fineTuningTab.firstChild.nextSibling);

	// Remove after 10 seconds
	setTimeout(() => {
	message.remove();
	}, 10000);
	}

	function updateSliderValues() {
	const sliders = document.querySelectorAll('.param-slider');

	sliders.forEach(slider => {
	const valueDisplay = slider.nextElementSibling;

	// Update display initially
	valueDisplay.textContent = slider.value;

	// Update display when slider changes
	slider.addEventListener('input', function() {
	valueDisplay.textContent = this.value;
	});
	});
	}

	function simulateTraining() {
	const startButton = document.querySelector('.bg-green-600');
	const pauseButton = document.querySelector('.bg-yellow-600');
	const stopButton = document.querySelector('.bg-red-600');
	const epochDisplay = document.querySelector('.text-2xl.font-bold.text-center');
	const trainingLossDisplay = document.querySelectorAll('.text-2xl.font-bold.text-center')[1];
	const valLossDisplay = document.querySelectorAll('.text-2xl.font-bold.text-center')[2];
	const progressBars = document.querySelectorAll('.bg-gray-700 .rounded-full > div');

	let isTraining = false;
	let isPaused = false;
	let currentEpoch = 0;
	let animationId;

	startButton.addEventListener('click', function() {
	if (!isTraining) {
	isTraining = true;
	currentEpoch = 0;
	startButton.disabled = true;
	pauseButton.disabled = false;
	stopButton.disabled = false;

	// Change button text
	startButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Training...';

	// Start training animation
	simulateEpoch();
	}
	});

	pauseButton.addEventListener('click', function() {
	if (isTraining && !isPaused) {
	isPaused = true;
	cancelAnimationFrame(animationId);
	pauseButton.innerHTML = '<i class="fas fa-play mr-2"></i> Resume';
	startButton.innerHTML = '<i class="fas fa-spinner mr-2"></i> Training Paused';
	} else if (isTraining && isPaused) {
	isPaused = false;
	pauseButton.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';
	startButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Training...';
	simulateEpoch();
	}
	});

	stopButton.addEventListener('click', function() {
	isTraining = false;
	isPaused = false;
	cancelAnimationFrame(animationId);

	startButton.disabled = false;
	pauseButton.disabled = true;
	stopButton.disabled = true;

	startButton.innerHTML = '<i class="fas fa-play mr-2"></i> Start Training';
	pauseButton.innerHTML = '<i class="fas fa-pause mr-2"></i> Pause';

	// Reset progress bars
	progressBars.forEach(bar => {
	bar.style.width = '0%';
	});
	});

	function simulateEpoch() {
	if (!isTraining \|\| isPaused) return;

	currentEpoch++;

	// Update displays
	epochDisplay.textContent = currentEpoch;

	// Simulate decreasing loss
	const trainingLoss = Math.max(0.1, 2.5 - (currentEpoch * 0.12));
	const valLoss = Math.max(0.15, 2.6 - (currentEpoch * 0.115));

	trainingLossDisplay.textContent = trainingLoss.toFixed(4);
	valLossDisplay.textContent = valLoss.toFixed(4);

	// Update progress bars after 5 epochs
	if (currentEpoch >= 5) {
	const progress = Math.min(100, (currentEpoch - 5) * 10);
	progressBars.forEach(bar => {
	bar.style.width = `${progress}%`;
	});
	}

	// Continue until 20 epochs
	if (currentEpoch < 20) {
	animationId = requestAnimationFrame(simulateEpoch);
	} else {
	isTraining = false;
	startButton.disabled = false;
	pauseButton.disabled = true;
	stopButton.disabled = true;

	startButton.innerHTML = '<i class="fas fa-play mr-2"></i> Start Training';

	// Show completion message
	const message = document.createElement('div');
	message.className = 'bg-green-900 text-green-200 p-3 rounded-lg text-sm mb-4 flex items-center absolute bottom-4 right-4';
	message.innerHTML = `
	<i class="fas fa-check-circle mr-2"></i>
	<div>Training completed successfully!</div>
	`;

	document.querySelector('.flex-1.overflow-auto').appendChild(message);

	// Remove after 5 seconds
	setTimeout(() => {
	message.remove();
	}, 5000);
	}
	}
	}
	</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=Bur3hani/neuralv" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>