LlamaLocal

v2.4.0

Server Online

Local • CPU

Active Models

Configuration

GPU Memory 24%
2.4GB / 8GB

Llama Local • Inference UI

Context: 512 tokens
Threads: 4

Welcome to LlamaLocal!
I'm ready for local Llama inference. Select a model from the sidebar or ask me anything below.

Model: Llama-3-8B Status: Ready
Llama-3-8B
VRAM: 1.2GB CPU: 2.1GHz GPU: NVIDIA RTX 3090
Optimized for Local Llama
{ name: 'Llama-3-8B-Q4_K_M', size: '4.7 GB', type: 'Llama 3' }, { name: 'Mistral-7B-v0.3-Q3_K_M', size: '3.8 GB', type: 'Mistral' }, { name: 'Mixtral-8x7B-Q4_K_M', size: '24.1 GB', type: 'Mixtral' }, { name: 'WizardCoder-Python-13B-Q4_K_M', size: '7.7 GB', type: 'Coder' }, { name: 'CodeLlama-7B-Q4_K_M', size: '3.8 GB', type: 'Coder' }, { name: 'Phi-3-Mini-4K-Instruct-Q4_K_M', size: '2.3 GB', type: 'Phi-3' } ]; // Load models into UI const modelsList = document.getElementById('models-list'); models.forEach((model, i) => { const el = document.createElement('div'); el.className = `model-card bg-slate-800/50 rounded-xl p-3 border border-slate-700 hover:border-violet-500/30 cursor-pointer transition-all ${i === 0 ? 'bg-violet-900/20 border-violet-500/50' : ''}`; el.innerHTML = `
${model.name}
${model.type} • ${model.size}
${i === 0 ? 'Active' : ''}
`; modelsList.appendChild(el); }); // Populate model select const selectEl = document.getElementById('model-select'); models.forEach((model, i) => { const option = document.createElement('option'); option.value = model.name; option.textContent = `${model.name} (${model.size})`; selectEl.appendChild(option); }); // Theme toggle handler document.getElementById('theme-toggle').addEventListener('click', function() { this.innerHTML = this.innerHTML.includes('moon') ? '' : ''; }); // Settings modal handlers const settingsModal = document.getElementById('settings-modal'); document.getElementById('settings-btn').addEventListener('click', () => { settingsModal.classList.remove('hidden'); settingsModal.classList.add('flex'); }); document.getElementById('close-settings').addEventListener('click', () => { settingsModal.classList.add('hidden'); settingsModal.classList.remove('flex'); }); document.getElementById('save-settings').addEventListener('click', () => { settingsModal.classList.add('hidden'); settingsModal.classList.remove('flex'); alert('Configuration saved successfully!'); }); // Help modal handlers const helpModal = document.getElementById('help-modal'); document.getElementById('help-btn').addEventListener('click', () => { helpModal.classList.remove('hidden'); helpModal.classList.add('flex'); }); document.getElementById('close-help').addEventListener('click', () => { helpModal.classList.add('hidden'); helpModal.classList.remove('flex'); }); // Logs modal handlers const logsModal = document.getElementById('logs-modal'); document.getElementById('server-logs').addEventListener('click', () => { logsModal.classList.remove('hidden'); logsModal.classList.add('flex'); }); document.getElementById('close-logs').addEventListener('click', () => { logsModal.classList.add('hidden'); logsModal.classList.remove('flex'); }); // Interactive elements const userInputElement = document.getElementById('user-input'); const sendBtn = document.getElementById('send-btn'); const sendButton = () => { const text = userInputElement.value.trim(); if (text === '') return; // Add user message addMessage(text, 'user'); userInputElement.value = ''; // Simulate AI response setTimeout(() => { addMessage("Based on your request, I can provide information about local Llama inference. The UI is built with modern frameworks to ensure smooth performance. Your configuration settings have been optimized for your local system.", 'ai'); }, 800); }; const addMessage = (text, sender) => { const chatContainer = document.querySelector('.overflow-y-auto.custom-scrollbar'); const messageDiv = document.createElement('div'); messageDiv.className = 'flex items-start space-x-4'; const avatar = sender === 'user' ? '
' : '
'; messageDiv.innerHTML = ` ${avatar}

${text}

${sender === 'user' ? 'You' : 'Llama-3-8B'} Just now
`; chatContainer.appendChild(messageDiv); chatContainer.scrollTop = chatContainer.scrollHeight; }; // Event listeners sendBtn.addEventListener('click', sendButton); userInputElement.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendButton(); } }); // Range slider updates const updateSliderValue = (sliderId, displayId, value) => { document.getElementById(displayId).textContent = value; }; // Temperature slider const tempSlider = document.getElementById('temp-slider'); tempSlider.addEventListener('input', (e) => { updateSliderValue('temp-slider', 'temp-value', e.target.value); }); // Top P slider const topPSlider = document.getElementById('top-p-slider'); topPSlider.addEventListener('input', (e) => { updateSliderValue('top-p-slider', 'top-p-value', e.target.value); }); // Top K slider const topKSlider = document.getElementById('top-k-slider'); topKSlider.addEventListener('input', (e) => { updateSliderValue('top-k-slider', 'top-k-value', e.target.value); }); // Max tokens slider const maxTokensSlider = document.getElementById('max-tokens-slider'); maxTokensSlider.addEventListener('input', (e) => { updateSliderValue('max-tokens-slider', 'max-tokens-value', e.target.value); }); // N-Predict input document.getElementById('npredict-input').addEventListener('input', (e) => { const val = e.target.value; if (val > 32) e.target.value = 32; if (val < 1) e.target.value = 1; }); // Toggle switches const toggles = document.querySelectorAll('input[type="checkbox"]'); toggles.forEach(toggle => { toggle.addEventListener('change', () => { const parent = toggle.parentElement; const dot = parent.querySelector('.dot'); if (toggle.checked) { parent.querySelector('.block').classList.replace('bg-slate-700', 'bg-violet-600'); dot.classList.replace('left-1', 'left-5'); } else { parent.querySelector('.block').classList.replace('bg-violet-600', 'bg-slate-700'); dot.classList.replace('left-5', 'left-1'); } }); }); // Sidebar menu selection document.querySelectorAll('#models-list .model-card').forEach((card, i) => { card.addEventListener('click', () => { document.querySelectorAll('#models-list .model-card').forEach(c => { c.classList.remove('bg-violet-900/20', 'border-violet-500/50'); c.querySelector('.status-dot')?.remove(); }); card.classList.add('bg-violet-900/20', 'border-violet-500/50'); if (i !== 0) { card.innerHTML = card.innerHTML.replace(/Active<\/span>/, ''); card.innerHTML = card.innerHTML.replace('Active', 'Active'); } }); }); // Initial load animation window.addEventListener('load', () => { document.body.classList.add('animate-fade-in'); setTimeout(() => { document.querySelectorAll('.model-card').forEach((card, i) => { setTimeout(() => { card.style.opacity = '1'; card.style.transform = 'translateY(0)'; }, 300 + i * 100); }); }, 500); }); // Keyboard shortcuts document.addEventListener('keydown', (e) => { if (e.ctrlKey || e.metaKey) { switch (e.key.toLowerCase()) { case 'enter': sendButton(); break; case 'l': document.querySelector('.overflow-y-auto.custom-scrollbar').innerHTML = ''; break; case ',': settingsModal.classList.remove('hidden'); settingsModal.classList.add('flex'); break; } } });