File size: 19,396 Bytes
acfb720 |
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 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OpenLocalAI - Free & Open Source AI Tools</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">
<style>
.gradient-bg {
background: linear-gradient(135deg, #4f46e5 0%, #10b981 100%);
}
.card-hover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.install-btn {
transition: all 0.3s ease;
}
.install-btn:hover {
background-color: #10b981;
}
.tool-icon {
filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- Header -->
<header class="gradient-bg text-white">
<div class="container mx-auto px-4 py-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-2">
<i class="fas fa-robot text-3xl"></i>
<h1 class="text-2xl font-bold">OpenLocalAI</h1>
</div>
<nav class="hidden md:block">
<ul class="flex space-x-6">
<li><a href="#" class="hover:text-gray-200 font-medium">Home</a></li>
<li><a href="#" class="hover:text-gray-200 font-medium">Tools</a></li>
<li><a href="#" class="hover:text-gray-200 font-medium">Guides</a></li>
<li><a href="#" class="hover:text-gray-200 font-medium">Community</a></li>
</ul>
</nav>
<button class="md:hidden text-xl">
<i class="fas fa-bars"></i>
</button>
</div>
<div class="mt-16 mb-20 text-center">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Local AI for Everyone</h2>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Free, open source AI tools that run on your devices. Private, secure, and community-driven.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-bold text-lg hover:bg-gray-100 transition">Browse Tools</button>
<button class="bg-transparent border-2 border-white px-6 py-3 rounded-lg font-bold text-lg hover:bg-white hover:text-indigo-600 transition">Learn More</button>
</div>
</div>
</div>
</header>
<!-- Values Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Our Open Source Values</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-50 p-6 rounded-xl text-center">
<div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-lock-open text-indigo-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Truly Open</h3>
<p class="text-gray-600">All our tools are 100% open source with permissive licenses. No hidden code, no telemetry.</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl text-center">
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-shield-alt text-green-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Privacy First</h3>
<p class="text-gray-600">Everything runs locally on your machine. No data leaves your device unless you choose to share it.</p>
</div>
<div class="bg-gray-50 p-6 rounded-xl text-center">
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-users text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Community Powered</h3>
<p class="text-gray-600">Built by and for the open source community. Your contributions help everyone.</p>
</div>
</div>
</div>
</section>
<!-- Tools Section -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-4">One-Click Install AI Tools</h2>
<p class="text-center text-gray-600 mb-12 max-w-2xl mx-auto">Simple installation for powerful local AI capabilities. No technical expertise required.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Tool Card 1 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition duration-300">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-indigo-100 p-3 rounded-lg mr-4 tool-icon">
<i class="fas fa-comment-dots text-indigo-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold">LocalChat</h3>
</div>
<p class="text-gray-600 mb-4">Private chatbot that runs completely offline with customizable AI models.</p>
<div class="flex justify-between items-center">
<span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Open Source</span>
<span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">Windows/Mac/Linux</span>
</div>
</div>
<div class="px-6 py-4 bg-gray-50">
<button class="w-full bg-indigo-600 text-white py-2 rounded-lg install-btn font-medium">Install Now</button>
</div>
</div>
<!-- Tool Card 2 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition duration-300">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-purple-100 p-3 rounded-lg mr-4 tool-icon">
<i class="fas fa-image text-purple-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold">ImageGen</h3>
</div>
<p class="text-gray-600 mb-4">Generate stunning images locally with Stable Diffusion and other models.</p>
<div class="flex justify-between items-center">
<span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Open Source</span>
<span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">Windows/Mac/Linux</span>
</div>
</div>
<div class="px-6 py-4 bg-gray-50">
<button class="w-full bg-indigo-600 text-white py-2 rounded-lg install-btn font-medium">Install Now</button>
</div>
</div>
<!-- Tool Card 3 -->
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover transition duration-300">
<div class="p-6">
<div class="flex items-center mb-4">
<div class="bg-red-100 p-3 rounded-lg mr-4 tool-icon">
<i class="fas fa-code text-red-600 text-2xl"></i>
</div>
<h3 class="text-xl font-bold">CodeAssistant</h3>
</div>
<p class="text-gray-600 mb-4">AI pair programmer that works offline with support for multiple languages.</p>
<div class="flex justify-between items-center">
<span class="text-sm bg-green-100 text-green-800 px-2 py-1 rounded">Open Source</span>
<span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">Windows/Mac/Linux</span>
</div>
</div>
<div class="px-6 py-4 bg-gray-50">
<button class="w-full bg-indigo-600 text-white py-2 rounded-lg install-btn font-medium">Install Now</button>
</div>
</div>
</div>
<div class="text-center mt-10">
<button class="text-indigo-600 font-bold hover:text-indigo-800 flex items-center justify-center mx-auto">
View All Tools <i class="fas fa-arrow-right ml-2"></i>
</button>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-12">Simple Installation Process</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center">
<div class="bg-indigo-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-indigo-600 font-bold text-2xl">1</span>
</div>
<h3 class="text-xl font-bold mb-2">Choose Your Tool</h3>
<p class="text-gray-600">Browse our curated collection of open source AI tools and select what you need.</p>
</div>
<div class="text-center">
<div class="bg-indigo-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-indigo-600 font-bold text-2xl">2</span>
</div>
<h3 class="text-xl font-bold mb-2">One-Click Install</h3>
<p class="text-gray-600">Our installer handles all dependencies and setup automatically.</p>
</div>
<div class="text-center">
<div class="bg-indigo-100 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
<span class="text-indigo-600 font-bold text-2xl">3</span>
</div>
<h3 class="text-xl font-bold mb-2">Start Using AI Locally</h3>
<p class="text-gray-600">Launch the application and enjoy private, offline AI capabilities.</p>
</div>
</div>
</div>
</section>
<!-- System Requirements -->
<section class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
<div class="md:flex">
<div class="md:w-1/2 gradient-bg text-white p-8 flex flex-col justify-center">
<h2 class="text-2xl font-bold mb-4">System Requirements</h2>
<p class="mb-6">Most tools work on modest hardware, but performance scales with your system specs.</p>
<div class="flex items-center mb-2">
<i class="fas fa-check-circle mr-2"></i>
<span>Windows 10+, macOS 10.15+, or Linux</span>
</div>
<div class="flex items-center mb-2">
<i class="fas fa-check-circle mr-2"></i>
<span>8GB RAM minimum (16GB recommended)</span>
</div>
<div class="flex items-center">
<i class="fas fa-check-circle mr-2"></i>
<span>NVIDIA GPU recommended for best performance</span>
</div>
</div>
<div class="md:w-1/2 p-8">
<h3 class="text-xl font-bold mb-4">Need Help?</h3>
<p class="text-gray-600 mb-6">Our community is here to support you with installation and troubleshooting.</p>
<button class="w-full bg-gray-800 text-white py-2 rounded-lg mb-4 font-medium hover:bg-gray-700 transition">
<i class="fab fa-discord mr-2"></i> Join Discord
</button>
<button class="w-full bg-gray-100 text-gray-800 py-2 rounded-lg font-medium hover:bg-gray-200 transition">
<i class="fab fa-github mr-2"></i> GitHub Discussions
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Newsletter -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4 max-w-3xl text-center">
<h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
<p class="text-gray-600 mb-8">Join our newsletter to get notified about new open source AI tools and updates.</p>
<div class="flex flex-col sm:flex-row gap-2">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
<button class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-bold hover:bg-indigo-700 transition">Subscribe</button>
</div>
<p class="text-sm text-gray-500 mt-3">We respect your privacy. Unsubscribe at any time.</p>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<div class="flex items-center mb-4">
<i class="fas fa-robot text-2xl mr-2"></i>
<span class="text-xl font-bold">OpenLocalAI</span>
</div>
<p class="text-gray-400">Democratizing local AI through open source software.</p>
<div class="flex space-x-4 mt-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord text-xl"></i></a>
</div>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Tools</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">All Tools</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Chat Models</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Image Generation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Code Assistants</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Resources</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Benchmarks</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Hardware Guide</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Community</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-white">Contribute</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Forum</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Events</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">Donate</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
<p>© 2023 OpenLocalAI. All tools are open source and free to use.</p>
</div>
</div>
</footer>
<script>
// Simple JavaScript for mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
const mobileMenuButton = document.querySelector('.md\\:hidden');
const navMenu = document.querySelector('nav');
mobileMenuButton.addEventListener('click', function() {
navMenu.classList.toggle('hidden');
navMenu.classList.toggle('block');
navMenu.classList.toggle('absolute');
navMenu.classList.toggle('top-16');
navMenu.classList.toggle('right-4');
navMenu.classList.toggle('bg-white');
navMenu.classList.toggle('text-gray-800');
navMenu.classList.toggle('p-4');
navMenu.classList.toggle('rounded-lg');
navMenu.classList.toggle('shadow-lg');
});
// Install button animation
const installButtons = document.querySelectorAll('.install-btn');
installButtons.forEach(button => {
button.addEventListener('click', function() {
this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Installing...';
setTimeout(() => {
this.innerHTML = '<i class="fas fa-check mr-2"></i> Installed!';
this.classList.remove('bg-indigo-600');
this.classList.add('bg-green-600');
}, 2000);
});
});
});
</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=Boobs00/mysite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |