File size: 8,863 Bytes
4e5d406 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ByteBrew - Local LLM Playground</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<section class="mb-12">
<div class="flex flex-col md:flex-row gap-8 items-center">
<div class="md:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-400 to-blue-500 bg-clip-text text-transparent">Run LLMs Locally <br>Like a Pro</h1>
<p class="text-lg text-gray-300 mb-6">Experience the power of local language models with our intuitive playground. No cloud required, just pure computational prowess.</p>
<div class="flex gap-4">
<a href="#playground" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition-colors">Try It Now</a>
<a href="#models" class="border border-purple-500 text-purple-400 hover:bg-purple-900/30 px-6 py-3 rounded-lg font-medium transition-colors">Available Models</a>
</div>
</div>
<div class="md:w-1/2">
<div class="bg-gray-800 rounded-xl p-2 border border-gray-700 shadow-lg">
<div class="bg-gray-900 rounded-t-lg p-3 flex items-center gap-2">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
</div>
<div class="p-4 font-mono text-sm">
<p class="text-green-400">$ ./run_llm --model llama2</p>
<p class="text-purple-400">>> Initializing local inference engine...</p>
<p class="text-blue-400">>> Model loaded successfully!</p>
<p class="text-green-400">$ Ask me anything:</p>
</div>
</div>
</div>
</div>
</section>
<section id="playground" class="mb-16">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i data-feather="cpu" class="w-6 h-6"></i> LLM Playground
</h2>
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div>
<div class="mb-4">
<label class="block text-gray-300 mb-2">Select Model</label>
<select class="w-full bg-gray-700 border border-gray-600 rounded-md p-3 text-gray-200">
<option>Llama 2 7B</option>
<option>Mistral 7B</option>
<option>GPT4All</option>
<option>Bloom</option>
</select>
</div>
<div class="mb-4">
<label class="block text-gray-300 mb-2">Prompt</label>
<textarea class="w-full bg-gray-700 border border-gray-600 rounded-md p-3 text-gray-200 h-40" placeholder="Type your prompt here..."></textarea>
</div>
<button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium w-full transition-colors flex items-center justify-center gap-2">
<i data-feather="play"></i> Run Model
</button>
</div>
<div>
<label class="block text-gray-300 mb-2">Output</label>
<div class="bg-gray-900 border border-gray-700 rounded-md p-4 font-mono text-sm h-40 overflow-y-auto whitespace-pre-wrap">
<p class="text-gray-400">>> Model output will appear here</p>
</div>
<div class="mt-4 flex items-center text-sm text-gray-400">
<div class="flex-1">
<i data-feather="hard-drive" class="w-4 h-4 inline mr-2"></i>
<span>VRAM: 12GB</span>
</div>
<div>
<i data-feather="clock" class="w-4 h-4 inline mr-2"></i>
<span>Response Time: 0.4s</span>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="models" class="mb-16">
<h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
<i data-feather="database" class="w-6 h-6"></i> Available Models
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-purple-500 transition-colors">
<div class="flex items-center gap-4 mb-4">
<div class="bg-purple-900/50 p-3 rounded-full">
<i data-feather="command" class="w-6 h-6 text-purple-400"></i>
</div>
<h3 class="text-xl font-bold">Llama 2 7B</h3>
</div>
<p class="text-gray-300 mb-4">Meta's open source model with 7 billion parameters, fine-tuned for conversation.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">Conversational</span>
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">7B Params</span>
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">8GB VRAM</span>
</div>
</div>
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-blue-500 transition-colors">
<div class="flex items-center gap-4 mb-4">
<div class="bg-blue-900/50 p-3 rounded-full">
<i data-feather="wind" class="w-6 h-6 text-blue-400"></i>
</div>
<h3 class="text-xl font-bold">Mistral 7B</h3>
</div>
<p class="text-gray-300 mb-4">High quality instruction following model with strong reasoning capabilities.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">Instruction</span>
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">7B Params</span>
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">6GB VRAM</span>
</div>
</div>
<div class="bg-gray-800 rounded-xl p-6 border border-gray-700 hover:border-green-500 transition-colors">
<div class="flex items-center gap-4 mb-4">
<div class="bg-green-900/50 p-3 rounded-full">
<i data-feather="box" class="w-6 h-6 text-green-400"></i>
</div>
<h3 class="text-xl font-bold">GPT4All</h3>
</div>
<p class="text-gray-300 mb-4">Optimized for running on consumer hardware with surprisingly good performance.</p>
<div class="flex flex-wrap gap-2">
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">Lightweight</span>
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">3.5B Params</span>
<span class="bg-gray-700 text-xs px-3 py-1 rounded-full">4GB VRAM</span>
</div>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |