localai-install-wizard / models.html
Hiagora's picture
# Load model directly
79356b0 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LocalAI Models</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-grow container mx-auto px-4 py-12">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-gray-800 mb-8">Available Models</h1>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
<div class="p-8">
<div class="flex items-center mb-4">
<i data-feather="cpu" class="w-8 h-8 text-indigo-600 mr-3"></i>
<h2 class="text-2xl font-semibold text-gray-800">Mistral-Nemo-12B-R1-v0.1-Q4_K_M-GGUF</h2>
</div>
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-2">Model Information</h3>
<ul class="list-disc pl-5 text-gray-600 space-y-1">
<li>Format: GGUF (4-bit quantized)</li>
<li>Size: ~12B parameters</li>
<li>Base Model: Mistral-Nemo</li>
<li>Quantization: Q4_K_M</li>
</ul>
</div>
<div class="mb-6">
<h3 class="text-lg font-medium text-gray-700 mb-2">Installation</h3>
<div class="bg-gray-100 p-4 rounded-lg mb-4">
<code class="text-gray-800 font-mono break-all">from transformers import AutoModel</code><br>
<code class="text-gray-800 font-mono break-all">model = AutoModel.from_pretrained("CreitinGameplays/Mistral-Nemo-12B-R1-v0.1-Q4_K_M-GGUF", dtype="auto")</code>
</div>
<button id="copyModelBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg flex items-center">
<i data-feather="copy" class="mr-2"></i>
Copy Code
</button>
</div>
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg">
<div class="flex">
<div class="flex-shrink-0">
<i data-feather="info" class="h-5 w-5 text-blue-500"></i>
</div>
<div class="ml-3">
<h3 class="text-sm font-medium text-blue-800">Requirements</h3>
<div class="mt-2 text-sm text-blue-700">
<p>• Minimum 16GB RAM</p>
<p>• 8GB+ VRAM for GPU acceleration</p>
<p>• Transformers library installed</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script>
feather.replace();
document.getElementById('copyModelBtn').addEventListener('click', function() {
const code = `from transformers import AutoModel
model = AutoModel.from_pretrained("CreitinGameplays/Mistral-Nemo-12B-R1-v0.1-Q4_K_M-GGUF", dtype="auto")`;
navigator.clipboard.writeText(code).then(() => {
const btn = document.getElementById('copyModelBtn');
btn.innerHTML = '<i data-feather="check" class="mr-2"></i>Copied!';
feather.replace();
setTimeout(() => {
btn.innerHTML = '<i data-feather="copy" class="mr-2"></i>Copy Code';
feather.replace();
}, 2000);
});
});
</script>
</body>
</html>