Spaces:
Running
Running
| <html lang="en" class="scroll-smooth"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SDXL LoRA Lookalike Model Index Archive</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/lucide@latest"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-text { | |
| background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #ff8f8f 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .card-hover { | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .card-hover:hover { | |
| box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.15), 0 10px 10px -5px rgba(239, 68, 68, 0.1); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .glass-panel { | |
| background: rgba(17, 24, 39, 0.8); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| } | |
| [contenteditable]:focus { | |
| outline: 2px solid #ef4444; | |
| border-radius: 4px; | |
| padding: 2px 4px; | |
| } | |
| .image-overlay { | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: all 0.45s ease-in-out; | |
| } | |
| .image-overlay.active { | |
| opacity: 1; | |
| visibility: visible; | |
| } | |
| .image-overlay img { | |
| transform: scale(0.5); | |
| transition: transform 0.45s ease-in-out; | |
| } | |
| .image-overlay.active img { | |
| transform: scale(1); | |
| } | |
| .image-overlay video { | |
| transform: scale(0.5); | |
| transition: transform 0.45s ease-in-out; | |
| } | |
| .image-overlay.active video { | |
| transform: scale(1); | |
| } | |
| #myBtn { | |
| display: none; | |
| position: fixed; | |
| bottom: 20px; | |
| right: 30px; | |
| z-index: 99; | |
| font-size: 18px; | |
| border: none; | |
| outline: none; | |
| background-color: red; | |
| color: white; | |
| cursor: pointer; | |
| padding: 15px; | |
| border-radius: 4px; | |
| } | |
| #myBtn:hover { | |
| background-color: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-950 text-gray-100 antialiased"> | |
| <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> | |
| <script> | |
| // Get the button | |
| let mybutton = document.getElementById("myBtn"); | |
| // When the user scrolls down 20px from the top of the document, show the button | |
| window.onscroll = function() {scrollFunction()}; | |
| function scrollFunction() { | |
| if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) { | |
| mybutton.style.display = "block"; | |
| } else { | |
| mybutton.style.display = "none"; | |
| } | |
| } | |
| // When the user clicks on the button, scroll to the top of the document | |
| function topFunction() { | |
| document.body.scrollTop = 0; | |
| document.documentElement.scrollTop = 0; | |
| } | |
| </script> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 glass-panel border-b border-red-900/30"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-1"> | |
| <div class="flex flex-col lg:flex-row lg:items-center gap-4 justify-between"> | |
| <!-- Logo --> | |
| <div class="flex items-center gap-3"> | |
| <div class="w-20 h-20 bg-gradient-to-br rounded-lg flex items-center justify-center"> | |
| <img alt="nphSi's picture" class="h-16 w-16 overflow-hidden rounded-full border-[3px] border-white bg-white dark:border-gray-950 dark:bg-gray-950 lg:h-16 lg:w-16" src="https://cdn-avatars.huggingface.co/v1/production/uploads/6724de4c478a59591377a0aa/NfWB4LRni0DkkmAsdxQyR.jpeg"> | |
| </div> | |
| <div> | |
| <h1 class="text-xl font-bold gradient-text tracking-tight">SDXL Lookalike Archive</h1> | |
| <p class="text-xs text-gray-400">nphSi´s finest authentic Loras<br>Compatible with SDXL</p> | |
| </div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="flex flex-col sm:flex-row gap-3 flex-1 lg:justify-end"> | |
| <!-- Search --> | |
| <div class="relative group flex-1 max-w-md"> | |
| <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 group-focus-within:text-red-400 transition-colors"></i> | |
| <input type="text" id="searchInput" placeholder="Search models..." | |
| class="w-full bg-gray-900/50 border border-gray-800 rounded-lg pl-10 pr-4 py-2 text-sm focus:outline-none focus:border-red-500/50 focus:ring-2 focus:ring-red-500/20 transition-all placeholder-gray-600"> | |
| </div> | |
| <!-- Filters --> | |
| <select id="sortSelect" class="bg-gray-900/50 border border-gray-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-red-500/50 cursor-pointer"> | |
| <option value="name-asc" selected>Name (A-Z)</option> | |
| <option value="name-desc">Name (Z-A)</option> | |
| </select> | |
| <select id="categoryFilter" class="bg-gray-900/50 border border-gray-800 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-red-500/50 cursor-pointer"> | |
| <option value="all" selected>All Categories</option> | |
| </select> | |
| <button onclick="window.open('https://huggingface.co/nphSi/Z-Image-Lora/discussions')" class="bg-gradient-to-r from-red-600 to-pink-600 hover:from-red-500 hover:to-pink-500 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center gap-2 transition-all shadow-lg shadow-red-600/20 hover:shadow-red-600/30"> | |
| <span class="hidden sm:inline">Community</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Alphabet Navigation --> | |
| <div class="mt-1 flex gap-2 overflow-x-auto scrollbar-hide pb-1 items-center justify-between" id="alphabetNav"> | |
| <!-- Generated by JS --> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Bar --> | |
| <div class="bg-gray-900/30 border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2 flex flex-wrap gap-4 text-xs text-gray-400 items-center"> | |
| <span class="flex items-center gap-1"> | |
| <i data-lucide="database" class="w-3 h-3"></i> | |
| <span id="totalCount">1337</span> LoRAs | |
| </span> | |
| <span class="flex items-center gap-1"> | |
| <i data-lucide="filter" class="w-3 h-3"></i> | |
| <span id="filteredCount">Showing all</span> | |
| </span> | |
| <span class="ml-auto text-white-400 flex items-center gap-1"> | |
| <span id="catheader"></span> | |
| </span> | |
| <a href="https://ko-fi.com/nphsi" target="_blank" class="ml-auto flex items-center gap-1 text-pink-400 hover:text-pink-300 transition-colors"> | |
| <i data-lucide="coffee" class="w-3 h-3"></i> | |
| ❤️ Support me on Ko-fi ❤️ | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <!-- Grid --> | |
| <div id="modelGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4"> | |
| <!-- Cards injected by JS --> | |
| </div> | |
| <!-- Empty State --> | |
| <div id="emptyState" class="hidden text-center py-20"> | |
| <i data-lucide="search-x" class="w-16 h-16 text-gray-700 mx-auto mb-4"></i> | |
| <p class="text-gray-500 text-lg">No models found matching your criteria</p> | |
| <button onclick="resetFilters()" class="mt-4 text-red-400 hover:text-red-300 text-sm font-medium">Reset filters</button> | |
| </div> | |
| </main> | |
| <!-- Add/Edit Modal --> | |
| <div id="itemModal" class="fixed inset-0 z-[100] hidden"> | |
| <div class="absolute inset-0 flex items-center justify-center p-4"> | |
| <div class="bg-gray-900 border border-gray-800 rounded-2xl w-full max-w-lg shadow-2xl shadow-red-900/20 overflow-hidden transform transition-all scale-100"> | |
| <form id="itemForm" class="p-6 space-y-4"> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="border-t border-gray-800 bg-gray-900/30 mt-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="grid md:grid-cols-2 gap-6 text-sm text-gray-500"> | |
| <div> | |
| <h4 class="text-gray-300 font-semibold mb-2">Disclaimer</h4> | |
| <p class="text-xs leading-relaxed"> | |
| Loras with the (vrtlxxx) trigger are trained on public domain images found on the public internet. | |
| No nudity or pornography is involved in the training process. | |
| Takedown requests: barbara.cummingworth-(at)-protonmail.com | |
| </p> | |
| </div> | |
| <div class="md:text-right"> | |
| <h4 class="text-red-400 font-semibold mb-2 flex items-center md:justify-end gap-2"> | |
| <i data-lucide="alert-triangle" class="w-4 h-4"></i> | |
| Legal Notice | |
| </h4> | |
| <p class="text-xxs leading-relaxed text-red-300/80"> | |
| YOU ARE NOT ALLOWED TO SHARE NUDITY AND/OR PORNOGRAPHIC CONTENT (DEEPFAKES) OF FAMOUS PEOPLE (CELEBRITIES) MADE WITH MY LORAS<br> | |
| THIS IS ILLEGAL IN ALMOST ALL COUNTRIES IN THE WORLD. THE AUTHOR REJECTS ANY RESPONSIBILITY FOR CREATED ILLEGAL CONTENT IN ANY POSSIBLE WAY<br> | |
| Please do not spread Deepfakes. Please respect the dignity and privacy of other people as you would expect to be respected yourself! | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-800 text-center text-xs text-gray-600"> | |
| <p>Brain de Fecalo Productions • ephBeeEye Design • Created by nphSi 2026</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Image Overlay Modal --> | |
| <div id="imageOverlay" class="image-overlay fixed inset-0 z-50 bg-black/95 flex items-center justify-center p-1" onclick="closeOverlay()"> | |
| <div class="relative max-w-7xl max-h-full w-full flex flex-col items-center" onclick="event.stopPropagation();closeOverlay()"> | |
| <video autoplay playsinline loop id="overlayVideo" src="" poster="" alt="Loading..." class="hidden max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl" onclick="closeOverlay()"></video> | |
| <img id="overlayImage" src="" alt="Loading Image..." class="max-w-full max-h-[90vh] object-contain rounded-lg shadow-2xl" onclick="closeOverlay()"> | |
| <p id="overlayCaption" class="mt-2 text-white/60 text-lg font-medium text-center"></p> | |
| <p class="mt-1 text-white/40 text-xs">Click anywhere or press ESC to close.</p> | |
| </div> | |
| </div> | |
| <script src='datascript.js'></script> | |
| <script src='https://storage.ko-fi.com/cdn/scripts/overlay-widget.js'></script> | |
| <script> | |
| kofiWidgetOverlay.draw('nphsi', { | |
| 'type': 'floating-chat', | |
| 'floating-chat.donateButton.text': 'Support me', | |
| 'floating-chat.donateButton.background-color': '#323842', | |
| 'floating-chat.donateButton.text-color': '#fff' | |
| }); | |
| </script> | |
| <!-- 100% privacy-first analytics --> | |
| <script data-collect-dnt="true" async src="https://scripts.simpleanalyticscdn.com/latest.js"></script> | |
| <noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif?collect-dnt=true" alt="" referrerpolicy="no-referrer-when-downgrade"/></noscript> | |
| </body> | |
| </html> |