I want the absolute easiest interface for downloading and installing local AI tools and entities and frameworks and platforms for local secure, private installations of all of these things for me, free and open source and that being a founding principle and a fundamental corps. Value of our brand voice being great support of open source, and uh, mm, open source software and open source things. - Initial Deployment
acfb720
verified
| <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> |