Spaces:

nphSi
/

SDXL-LoRA-Archive-Index

Running

App Files Files

nphSi commited on 20 days ago

Commit

abbe697

verified ·

1 Parent(s): 83457a8

Upload 2 files

Browse files

Files changed (2) hide show

datascript.js +0 -0
index.html +277 -19

datascript.js ADDED Viewed

The diff for this file is too large to render. See raw diff

index.html CHANGED Viewed

@@ -1,19 +1,277 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>