diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -1,2443 +1,1147 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Mal's Models</title>
-  <script type="text/javascript" src="data-civitai.js"></script>
-  <script type="text/javascript" src="data-huggingface.js"></script>
-  <script type="text/javascript" src="data-filenames.js"></script>
-  <script type="text/javascript" src="data-hf-images.js"></script>
-  <script type="text/javascript" src="data-hf-uploaded.js"></script>
-  <script type="text/javascript" src="comparator.js"></script>
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-  <style>
-    /* Theme CSS Variables */
-    :root {
-      /* Dark theme (default) */
-      --bg-gradient-start: #0f172a;
-      --bg-gradient-end: #1e293b;
-      --text-primary: #f1f5f9;
-      --text-secondary: #94a3b8;
-      --text-muted: #64748b;
-      --link-color: #60a5fa;
-      --link-hover: #93c5fd;
-      --card-bg: rgba(30, 41, 59, 0.7);
-      --card-bg-solid: #1e293b;
-      --card-border: rgba(148, 163, 184, 0.1);
-      --input-bg: rgba(15, 23, 42, 0.6);
-      --input-border: rgba(148, 163, 184, 0.2);
-      --input-text: #e2e8f0;
-      --hover-bg: rgba(96, 165, 250, 0.2);
-      --modal-overlay: rgba(0, 0, 0, 0.8);
-      --shadow-color: rgba(0, 0, 0, 0.3);
-      --accent-blue: #60a5fa;
-      --accent-purple: #a78bfa;
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Model Gallery</title>
+  <!-- Preconnect to image CDN for faster handshake -->
+  <link rel="preconnect" href="https://wsrv.nl" />
+
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <!-- Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
+  <script>
+    tailwind.config = {
+      darkMode: 'class',
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Inter', 'sans-serif'],
+          },
+          colors: {
+            zinc: {
+              850: '#202023', // Custom intermediate dark shade
+            }
+          }
+        }
+      }
     }
-
-    [data-theme="light"] {
-      --bg-gradient-start: #f8fafc;
-      --bg-gradient-end: #e2e8f0;
-      --text-primary: #1e293b;
-      --text-secondary: #475569;
-      --text-muted: #64748b;
-      --link-color: #2563eb;
-      --link-hover: #1d4ed8;
-      --card-bg: rgba(255, 255, 255, 0.9);
-      --card-bg-solid: #ffffff;
-      --card-border: rgba(148, 163, 184, 0.3);
-      --input-bg: rgba(255, 255, 255, 0.8);
-      --input-border: rgba(148, 163, 184, 0.4);
-      --input-text: #1e293b;
-      --hover-bg: rgba(37, 99, 235, 0.1);
-      --modal-overlay: rgba(0, 0, 0, 0.5);
-      --shadow-color: rgba(0, 0, 0, 0.1);
-      --accent-blue: #2563eb;
-      --accent-purple: #7c3aed;
+  </script>
+  <style>
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
     }
 
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
+    ::-webkit-scrollbar-track {
+      background: #18181b;
+      /* zinc-900 */
     }
 
-    body {
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-      background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
-      color: var(--text-primary);
-      min-height: 100vh;
-      padding: 20px;
-      transition: background 0.3s ease, color 0.3s ease;
+    ::-webkit-scrollbar-thumb {
+      background: #3f3f46;
+      /* zinc-700 */
+      border-radius: 4px;
     }
 
-    a {
-      text-decoration: none;
-      color: var(--link-color);
-      transition: color 0.2s;
+    ::-webkit-scrollbar-thumb:hover {
+      background: #52525b;
+      /* zinc-600 */
     }
 
-    a:hover {
-      color: var(--link-hover);
+    .glass-panel {
+      background: rgba(24, 24, 27, 0.8);
+      /* zinc-900 with opacity */
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+      border: 1px solid rgba(255, 255, 255, 0.05);
     }
 
-    .header {
-      max-width: 1400px;
-      margin: 0 auto 30px;
-      background: var(--card-bg);
-      backdrop-filter: blur(10px);
-      border-radius: 16px;
-      padding: 24px;
-      box-shadow: 0 8px 32px var(--shadow-color);
-      border: 1px solid var(--card-border);
-      transition: background 0.3s ease, border-color 0.3s ease;
+    .card-hover:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.5);
     }
 
-    .header-title-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-      gap: 16px;
-      flex-wrap: wrap;
+    .line-clamp-1 {
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
     }
 
-    .header h1 {
-      font-size: 28px;
-      font-weight: 700;
-      margin: 0;
-      background: linear-gradient(135deg, var(--accent-blue) 0%, var(--accent-purple) 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+    /* Smooth image fading */
+    .img-fade-in {
+      opacity: 0;
+      transition: opacity 0.5s ease-in-out;
     }
 
-    .profile-links {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      align-items: center;
-      padding: 8px 12px;
-      background: var(--input-bg);
-      border-radius: 8px;
-      transition: background 0.3s ease;
+    .img-loaded {
+      opacity: 1;
     }
 
-    .profile-links a {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      padding: 6px 12px;
-      background: rgba(96, 165, 250, 0.1);
-      border-radius: 6px;
-      font-size: 14px;
-      transition: all 0.2s;
+    /* Checkbox Custom Style */
+    .custom-checkbox:checked {
+      background-color: #4f46e5;
+      border-color: #4f46e5;
     }
 
-    .profile-links a:hover {
-      background: rgba(96, 165, 250, 0.2);
-      transform: translateY(-1px);
+    /* Radio Custom Style for Sort */
+    .custom-radio:checked {
+      background-color: #4f46e5;
+      border-color: #4f46e5;
     }
+  </style>
+</head>
 
-    .last-update {
-      text-align: center;
-      font-size: 13px;
-      color: var(--text-secondary);
-      margin-bottom: 16px;
-    }
+<body
+  class="bg-zinc-900 text-zinc-100 min-h-screen flex flex-col font-sans selection:bg-indigo-500 selection:text-white">
+
+  <!-- Header -->
+  <header class="sticky top-0 z-40 w-full glass-panel border-b border-zinc-700/50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
+      <!-- Left: Logo -->
+      <div class="flex items-center gap-2 flex-shrink-0">
+        <i data-lucide="layers" class="text-indigo-400 h-6 w-6"></i>
+        <h1
+          class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-cyan-400 bg-clip-text text-transparent hidden sm:block">
+          Mal's Models
+        </h1>
+        <h1
+          class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-cyan-400 bg-clip-text text-transparent sm:hidden">
+          MV
+        </h1>
+      </div>
 
-    .controls {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      align-items: center;
-      justify-content: center;
-    }
+      <!-- Center: Item Count + Search + Sort + Filter -->
+      <div class="hidden sm:flex items-center gap-3 flex-grow justify-center px-4">
 
-    .search-container {
-      flex: 1 1 auto;
-      min-width: 300px;
-      max-width: 600px;
-      position: relative;
-    }
+        <!-- Search Input Container (Reduced Width) -->
+        <div class="relative w-full max-w-md flex items-center gap-2">
+          <div class="relative flex-grow">
+            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+              <i data-lucide="search" class="h-4 w-4 text-zinc-400"></i>
+            </div>
+            <input type="text" id="searchInput"
+              class="block w-full pl-10 pr-10 py-2 border border-zinc-700 rounded-lg leading-5 bg-zinc-800/50 text-zinc-300 placeholder-zinc-500 focus:outline-none focus:bg-zinc-800 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 sm:text-sm transition-all duration-200"
+              placeholder="Search models...">
+            <button id="clearSearchBtn"
+              class="absolute inset-y-0 right-0 pr-3 flex items-center hidden text-zinc-400 hover:text-white transition-colors">
+              <i data-lucide="x" class="h-4 w-4"></i>
+            </button>
+          </div>
 
-    .search-container input[type="text"] {
-      width: 100%;
-      padding: 12px 16px;
-      padding-right: 100px;
-      background: var(--input-bg);
-      border: 2px solid var(--input-border);
-      border-radius: 12px;
-      color: var(--input-text);
-      font-size: 15px;
-      font-family: inherit;
-      transition: all 0.3s;
-    }
+          <!-- Sort Button -->
+          <div class="relative">
+            <button id="sortBtn"
+              class="p-2 rounded-lg border border-zinc-700 bg-zinc-800/50 text-zinc-400 hover:text-white hover:border-indigo-500 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              title="Sort">
+              <i data-lucide="arrow-up-down" class="h-5 w-5"></i>
+            </button>
+
+            <div id="sortMenu"
+              class="hidden absolute right-0 mt-2 w-48 rounded-xl bg-zinc-850 border border-zinc-700 shadow-xl z-50 overflow-hidden transform transition-all duration-200 origin-top-right">
+              <div class="px-4 py-2 border-b border-zinc-700/50 bg-zinc-800/50">
+                <h3 class="text-xs font-semibold text-zinc-400 uppercase tracking-wider">Sort By</h3>
+              </div>
+              <div class="p-2 space-y-1" id="sortOptionsContainer">
+                <label class="flex items-center space-x-3 p-2 rounded-lg hover:bg-zinc-700/50 cursor-pointer">
+                  <input type="radio" name="sort" value="date_new"
+                    class="form-radio h-4 w-4 text-indigo-600 border-zinc-600 bg-zinc-700 focus:ring-indigo-500 custom-radio">
+                  <span class="text-sm text-zinc-300">Date (Newest)</span>
+                </label>
+                <label class="flex items-center space-x-3 p-2 rounded-lg hover:bg-zinc-700/50 cursor-pointer">
+                  <input type="radio" name="sort" value="date_old"
+                    class="form-radio h-4 w-4 text-indigo-600 border-zinc-600 bg-zinc-700 focus:ring-indigo-500 custom-radio">
+                  <span class="text-sm text-zinc-300">Date (Oldest)</span>
+                </label>
+                <div class="h-px bg-zinc-700/50 my-1"></div>
+                <label class="flex items-center space-x-3 p-2 rounded-lg hover:bg-zinc-700/50 cursor-pointer">
+                  <input type="radio" name="sort" value="name_asc"
+                    class="form-radio h-4 w-4 text-indigo-600 border-zinc-600 bg-zinc-700 focus:ring-indigo-500 custom-radio"
+                    checked>
+                  <span class="text-sm text-zinc-300">Name (A-Z)</span>
+                </label>
+                <label class="flex items-center space-x-3 p-2 rounded-lg hover:bg-zinc-700/50 cursor-pointer">
+                  <input type="radio" name="sort" value="name_desc"
+                    class="form-radio h-4 w-4 text-indigo-600 border-zinc-600 bg-zinc-700 focus:ring-indigo-500 custom-radio">
+                  <span class="text-sm text-zinc-300">Name (Z-A)</span>
+                </label>
+              </div>
+            </div>
+          </div>
 
-    .search-container input[type="text"]:focus {
-      outline: none;
-      border-color: var(--accent-blue);
-      background: var(--input-bg);
-      box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
-    }
+          <!-- Filter Button -->
+          <div class="relative">
+            <button id="filterBtn"
+              class="p-2 rounded-lg border border-zinc-700 bg-zinc-800/50 text-zinc-400 hover:text-white hover:border-indigo-500 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500"
+              title="Filter">
+              <i data-lucide="filter" class="h-5 w-5"></i>
+            </button>
+
+            <div id="filterMenu"
+              class="hidden absolute right-0 mt-2 w-56 rounded-xl bg-zinc-850 border border-zinc-700 shadow-xl z-50 overflow-hidden transform transition-all duration-200 origin-top-right">
+              <div class="px-4 py-3 border-b border-zinc-700/50 bg-zinc-800/50">
+                <h3 class="text-sm font-semibold text-white flex justify-between items-center">
+                  Filter Models
+                  <button id="clearFiltersBtn"
+                    class="text-xs text-indigo-400 hover:text-indigo-300 hidden">Clear</button>
+                </h3>
+              </div>
+              <div class="p-2 space-y-1 max-h-64 overflow-y-auto" id="filterOptionsContainer">
+                <!-- Dynamic Filter Options -->
+              </div>
+            </div>
+          </div>
+        </div>
 
-    .search-container input[type="text"]::placeholder {
-      color: var(--text-muted);
-    }
+        <!-- Item Count (Moved Right) -->
+        <span
+          class="text-xs font-medium text-zinc-500 px-2 py-1 bg-zinc-800 rounded border border-zinc-700 whitespace-nowrap item-count-display">0
+          Items</span>
+      </div>
 
-    .clear-btn {
-      position: absolute;
-      right: 8px;
-      top: 50%;
-      transform: translateY(-50%);
-      padding: 6px 14px;
-      background: rgba(239, 68, 68, 0.2);
-      border: 1px solid rgba(239, 68, 68, 0.3);
-      border-radius: 8px;
-      color: #fca5a5;
-      font-size: 13px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
+      <!-- Right: Socials -->
+      <div class="flex items-center gap-4 flex-shrink-0">
+        <!-- Civitai -->
+        <a href="https://civitai.com/user/malcolmrey" target="_blank" title="Civitai"
+          class="opacity-60 hover:opacity-100 transition-opacity">
+          <img src="https://civitai.com/favicon.ico" alt="Civitai" class="w-8 h-8 rounded-sm">
+        </a>
+        <!-- Hugging Face -->
+        <a href="https://huggingface.com/malcolmrey" target="_blank" title="Hugging Face"
+          class="opacity-60 hover:opacity-100 transition-opacity">
+          <img src="https://huggingface.co/favicon.ico" alt="Hugging Face" class="w-8 h-8 rounded-sm">
+        </a>
+        <!-- Reddit -->
+        <a href="https://reddit.com/r/malcolmrey" target="_blank" title="Reddit"
+          class="opacity-60 hover:opacity-100 transition-opacity">
+          <img src="https://www.reddit.com/favicon.ico" alt="Reddit" class="w-8 h-8 rounded-sm">
+        </a>
+        <!-- BuyMeACoffee -->
+        <a href="https://buymeacoffee.com/malcolmrey" target="_blank" title="Buy Me A Coffee"
+          class="opacity-60 hover:opacity-100 transition-opacity">
+          <img src="https://buymeacoffee.com/favicon.ico" alt="Buy Me A Coffee" class="w-8 h-8 rounded-sm">
+        </a>
+      </div>
+    </div>
+    <!-- Mobile Search & Tools -->
+    <div class="sm:hidden px-4 pb-3 flex flex-col gap-2">
+      <!-- Mobile Item Count -->
+      <div class="flex justify-between items-center mb-1">
+        <span class="text-xs font-medium text-zinc-500 item-count-display">0 Items</span>
+      </div>
 
-    .clear-btn:hover {
-      background: rgba(239, 68, 68, 0.3);
-      color: #fecaca;
-    }
+      <div class="relative">
+        <input type="text" id="mobileSearchInput"
+          class="block w-full px-3 py-2 pr-10 border border-zinc-700 rounded-lg bg-zinc-800/50 text-zinc-300 placeholder-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 text-sm"
+          placeholder="Search models...">
+        <!-- Mobile Clear Button -->
+        <button id="mobileClearSearchBtn"
+          class="absolute inset-y-0 right-0 pr-3 flex items-center hidden text-zinc-400 hover:text-white transition-colors">
+          <i data-lucide="x" class="h-4 w-4"></i>
+        </button>
+      </div>
+      <div class="flex gap-2">
+        <button id="mobileSortBtn"
+          class="flex-1 flex justify-center items-center gap-2 p-2 rounded-lg border border-zinc-700 bg-zinc-800/50 text-zinc-400 hover:text-white transition-colors text-sm">
+          <i data-lucide="arrow-up-down" class="h-4 w-4"></i> Sort
+        </button>
+        <button id="mobileFilterBtn"
+          class="flex-1 flex justify-center items-center gap-2 p-2 rounded-lg border border-zinc-700 bg-zinc-800/50 text-zinc-400 hover:text-white transition-colors text-sm">
+          <i data-lucide="filter" class="h-4 w-4"></i> Filter
+        </button>
+      </div>
+    </div>
+  </header>
 
-    .mode-select {
-      padding: 12px 40px 12px 16px;
-      background: var(--input-bg);
-      border: 2px solid var(--input-border);
-      border-radius: 12px;
-      color: var(--input-text);
-      font-size: 15px;
-      font-family: inherit;
-      cursor: pointer;
-      transition: all 0.3s;
-      font-weight: 500;
-      height: 48px;
-      line-height: 20px;
-      min-width: 150px;
-      flex-shrink: 0;
-      appearance: none;
-      -webkit-appearance: none;
-      -moz-appearance: none;
-      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-      background-repeat: no-repeat;
-      background-position: right 12px center;
-      background-size: 20px;
-      box-shadow: none;
-      outline: none;
-    }
+  <!-- Main Content -->
+  <main class="flex-grow max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 w-full relative">
 
-    .mode-select::-ms-expand {
-      display: none;
-    }
+    <!-- Loading State -->
+    <div id="loader" class="flex flex-col items-center justify-center py-20">
+      <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500 mb-4"></div>
+      <p class="text-zinc-400 animate-pulse">Loading library...</p>
+    </div>
 
-    .mode-select:focus {
-      outline: none;
-      border-color: var(--accent-blue);
-      box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
-    }
+    <!-- Error State -->
+    <div id="errorState" class="hidden flex-col items-center justify-center py-20 text-center">
+      <i data-lucide="alert-triangle" class="h-12 w-12 text-red-500 mb-4"></i>
+      <h3 class="text-lg font-medium text-white">Failed to load data</h3>
+      <p class="text-zinc-400 mt-1 max-w-md">Could not read unified-data.json.</p>
+    </div>
 
-    .mode-select option {
-      background: var(--card-bg-solid);
-      color: var(--input-text);
-      padding: 16px 20px;
-      font-size: 15px;
-      font-weight: 500;
-      border: none;
-      outline: none;
-    }
+    <!-- Gallery Grid -->
+    <div id="galleryGrid"
+      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6 opacity-0 transition-opacity duration-500">
+      <!-- Cards will be injected here -->
+    </div>
 
-    .mode-select option:hover {
-      background: linear-gradient(90deg, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0.05) 100%);
-      color: var(--accent-blue);
-      font-weight: 600;
-    }
+    <!-- Infinite Scroll Sentinel / Loading Indicator -->
+    <div id="sentinel" class="h-24 w-full flex items-center justify-center opacity-0 transition-opacity duration-300">
+      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-zinc-500"></div>
+    </div>
 
-    .mode-select option:checked,
-    .mode-select option:focus {
-      background: linear-gradient(90deg, rgba(96, 165, 250, 0.25) 0%, rgba(96, 165, 250, 0.15) 100%);
-      color: #93c5fd;
-      font-weight: 600;
-      box-shadow: none;
-      outline: none;
-    }
+    <!-- Empty State (Search) -->
+    <div id="noResults" class="hidden flex-col items-center justify-center py-20">
+      <i data-lucide="search-x" class="h-12 w-12 text-zinc-600 mb-4"></i>
+      <p class="text-zinc-400">No models found matching your filters.</p>
+    </div>
+  </main>
 
-    .checkbox-group {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-      align-items: center;
-    }
+  <!-- Footer
+  <footer class="border-t border-zinc-800 py-6 mt-8">
+    <div class="max-w-7xl mx-auto px-4 text-center text-zinc-500 text-sm">
+      <p>&copy; 2025 ModelVault Gallery. Local JSON Viewer.</p>
+    </div>
+  </footer> -->
 
-    .checkbox-label {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 10px 16px;
-      background: var(--input-bg);
-      border: 2px solid var(--input-border);
-      border-radius: 10px;
-      cursor: pointer;
-      transition: all 0.2s;
-      font-size: 14px;
-      font-weight: 500;
-      user-select: none;
-    }
+  <!-- Modal -->
+  <div id="modalBackdrop"
+    class="fixed inset-0 z-50 hidden bg-zinc-900/80 backdrop-blur-sm transition-opacity duration-300 opacity-0"
+    aria-labelledby="modal-title" role="dialog" aria-modal="true">
+    <div class="fixed inset-0 z-10 overflow-y-auto">
+      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+
+        <div id="modalPanel"
+          class="relative transform overflow-hidden rounded-2xl bg-zinc-850 border border-zinc-700 text-left shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-4xl opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+
+          <!-- Modal Header -->
+          <div class="bg-zinc-800/50 px-4 py-3 sm:px-6 flex justify-between items-center border-b border-zinc-700">
+            <h3 class="text-lg font-semibold leading-6 text-white" id="modalTitle">Model Name</h3>
+            <div class="flex items-center gap-3">
+              <button type="button" id="closeModalBtn"
+                class="rounded-md bg-transparent text-zinc-400 hover:text-white focus:outline-none transition-colors">
+                <i data-lucide="x" class="h-6 w-6"></i>
+              </button>
+            </div>
+          </div>
 
-    .checkbox-label:hover {
-      background: var(--hover-bg);
-      border-color: var(--input-border);
-    }
+          <!-- Modal Body -->
+          <div class="px-4 py-5 sm:p-6">
+
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+
+              <!-- Left: Images -->
+              <div class="lg:col-span-1 space-y-4">
+                <div
+                  class="aspect-[2/3] w-full rounded-xl overflow-hidden bg-zinc-800 border border-zinc-700 relative group">
+                  <img id="modalMainImage" src="" alt="Model preview"
+                    class="w-full h-full object-cover transition-opacity duration-300">
+                  <!-- Image source badge for modal main image -->
+                  <div class="absolute top-2 right-2">
+                    <span id="modalImageBadge"
+                      class="px-2 py-1 bg-black/60 backdrop-blur-md rounded text-[10px] font-bold text-white border border-white/10 uppercase tracking-wider hidden"></span>
+                  </div>
+                  <div id="imageOverlay"
+                    class="absolute inset-0 flex items-center justify-center bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity hidden">
+                    <a id="openOriginalLink" href="#" target="_blank"
+                      class="px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-full backdrop-blur-md text-sm font-medium transition-colors border border-white/20">
+                      View Original
+                    </a>
+                  </div>
+                </div>
+
+                <!-- Thumbnails Grid -->
+                <div id="modalThumbnails" class="grid grid-cols-4 gap-2">
+                  <!-- Dynamic thumbnails -->
+                </div>
+              </div>
+
+              <!-- Right: Info -->
+              <div class="lg:col-span-2 flex flex-col h-full">
+                <div class="mb-6">
+                  <span class="text-xs font-mono text-indigo-400 uppercase tracking-wider">Last Updated</span>
+                  <p id="modalDate" class="text-sm text-zinc-300 mt-1">Dec 28, 2025</p>
+                </div>
+
+                <div class="flex-grow">
+                  <div class="flex items-center justify-between mb-3">
+                    <h4 class="text-sm font-semibold text-white flex items-center gap-2">
+                      <i data-lucide="box" class="h-4 w-4 text-indigo-500"></i>
+                      Available Versions
+                    </h4>
+                  </div>
+
+                  <div
+                    class="bg-zinc-900/50 rounded-xl border border-zinc-700/50 overflow-hidden max-h-[400px] overflow-y-auto">
+                    <div class="overflow-x-auto">
+                      <table class="min-w-full divide-y divide-zinc-800">
+                        <thead class="bg-zinc-800 sticky top-0 z-10">
+                          <tr>
+                            <th scope="col"
+                              class="px-4 py-3 text-left text-xs font-medium text-zinc-400 uppercase tracking-wider w-1/4">
+                              Model Type</th>
+                            <th scope="col"
+                              class="px-4 py-3 text-left text-xs font-medium text-zinc-400 uppercase tracking-wider">
+                              Versions (Downloads)</th>
+                          </tr>
+                        </thead>
+                        <tbody id="filesTableBody" class="divide-y divide-zinc-800 bg-transparent">
+                          <!-- Dynamic Rows -->
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-    .checkbox-label input[type="checkbox"] {
-      width: 18px;
-      height: 18px;
-      cursor: pointer;
-      accent-color: var(--accent-blue);
-    }
+        </div>
+      </div>
+    </div>
+  </div>
 
-    .checkbox-label input[type="checkbox"]:checked + span {
-      color: var(--accent-blue);
-    }
+  <!-- Scripts -->
+  <script>
+    // --- 1. Data Management ---
+
+    const BASE_URLS = {
+      "locon": "https://huggingface.co/malcolmrey/lycoris/resolve/main/",
+      "lora": "https://huggingface.co/malcolmrey/small-loras/resolve/main/",
+      "embedding": "https://huggingface.co/malcolmrey/embeddings/resolve/main/",
+      "flux": "https://huggingface.co/malcolmrey/flux/resolve/main/",
+      "wan": "https://huggingface.co/malcolmrey/wan/resolve/main/wan2.1/",
+      "sdxl": "https://huggingface.co/malcolmrey/sdxl/tree/main/",
+      "zimage": "https://huggingface.co/malcolmrey/zimage/tree/main/"
+    };
 
-    .stats-bar {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 12px 20px;
-      background: var(--input-bg);
-      border-radius: 10px;
-      font-size: 14px;
-      font-weight: 600;
-      flex-shrink: 0;
-      transition: background 0.3s ease;
-    }
+    const TYPE_DISPLAY_NAMES = {
+      "locon": "SD Locon",
+      "lora": "SD LoRA",
+      "embedding": "SD Embedding",
+      "flux": "Flux",
+      "wan": "Wan",
+      "zimage": "ZImage",
+      "sdxl": "SDXL",
+      "qwen": "Qwen"
+    };
 
-    .stats-bar label {
-      color: var(--text-secondary);
-    }
+    const TYPE_COLORS = {
+      'locon': 'text-emerald-400 bg-emerald-400/10 border-emerald-400/20',
+      'lora': 'text-blue-400 bg-blue-400/10 border-blue-400/20',
+      'embedding': 'text-purple-400 bg-purple-400/10 border-purple-400/20',
+      'flux': 'text-orange-400 bg-orange-400/10 border-orange-400/20',
+      'wan': 'text-pink-400 bg-pink-400/10 border-pink-400/20',
+      'zimage': 'text-cyan-400 bg-cyan-400/10 border-cyan-400/20',
+      'sdxl': 'text-yellow-400 bg-yellow-400/10 border-yellow-400/20',
+      'qwen': 'text-indigo-400 bg-indigo-400/10 border-indigo-400/20'
+    };
 
-    .stats-bar input {
-      width: 70px;
-      padding: 6px 10px;
-      background: var(--card-bg);
-      border: 1px solid var(--input-border);
-      border-radius: 6px;
-      color: var(--accent-blue);
-      text-align: center;
-      font-weight: 700;
-      font-size: 16px;
-    }
+    // Included sample data as fallback
+    const SAMPLE_DATA = {
+      "aaliyah": {
+        "lastUpdated": "2025-12-28T23:28:29+01:00",
+        "models": {
+          "locon": [{ "filename": "locon_aaliyah_v1_from_v1_64_32.safetensors", "uploadedAt": "2025-06-20T16:10:36Z" }],
+          "lora": [{ "filename": "lora-small-aaliyah-v1.safetensors", "uploadedAt": "2025-06-20T13:39:55Z" }],
+          "embedding": [{ "filename": "aaliyah-ti.safetensors", "uploadedAt": "2025-06-20T13:22:11Z" }],
+          "flux": {
+            "loras": [{ "filename": "flux_aaliyah_v1-step00000400.safetensors", "uploadedAt": "2025-12-28T23:28:29+01:00" }],
+            "images": ["https://huggingface.co/datasets/malcolmrey/samples/resolve/main/flux/flux_aaliyah_00001_.png"]
+          },
+          "wan": {
+            "loras": [{ "filename": "wan_aaliyah_v1.safetensors", "uploadedAt": "2025-11-01T22:13:14+01:00" }],
+            "images": ["https://huggingface.co/datasets/malcolmrey/samples/resolve/main/wan/wan_aaliyah_00001_.png"]
+          },
+          "zimage": {
+            "loras": [{ "filename": "zimage_aaliyah_v1.safetensors", "uploadedAt": "2025-12-06T15:54:41+01:00" }],
+            "images": ["https://huggingface.co/datasets/malcolmrey/samples/resolve/main/zimage/zimage_aaliyah_00001_.png"]
+          },
+          "sdxl": [],
+          "qwen": []
+        }
+      },
+      "aarontaylorjohnson": {
+        "lastUpdated": "2025-12-28T23:31:50+01:00",
+        "models": {
+          "locon": [{ "filename": "locon_aarontaylorjohnson_v1_from_v1_64_32.safetensors", "uploadedAt": "2025-06-20T21:37:02Z" }],
+          "lora": [{ "filename": "lora-small-aaron-taylor-johnson-v1.safetensors", "uploadedAt": "2025-06-20T13:41:35Z" }],
+          "embedding": [{ "filename": "aarontaylorjohnson-ti.safetensors", "uploadedAt": "2025-06-20T13:22:11Z" }],
+          "flux": [],
+          "wan": {
+            "loras": [{ "filename": "wan_aarontaylorjohnson_v1.safetensors", "uploadedAt": "2025-11-09T15:45:28+01:00" }],
+            "images": [
+              "https://huggingface.co/datasets/malcolmrey/samples/resolve/main/wan/wan_aarontaylorjohnson_00001_.png",
+              "https://huggingface.co/datasets/malcolmrey/samples/resolve/main/wan/wan_aarontaylorjohnson_00002_.png",
+              "https://huggingface.co/datasets/malcolmrey/samples/resolve/main/wan/wan_aarontaylorjohnson_00003_.png"
+            ]
+          },
+          "zimage": {
+            "loras": [{ "filename": "zimage_aarontaylorjohnson_v1.safetensors", "uploadedAt": "2025-12-28T23:31:50+01:00" }],
+            "images": ["https://huggingface.co/datasets/malcolmrey/samples/resolve/main/zimage/zimage_aarontaylorjohnson_00001_.png"]
+          },
+          "sdxl": [],
+          "qwen": []
+        }
+      },
+      "angelinajolie": {
+        "lastUpdated": "2025-12-01T21:07:59+01:00",
+        "models": {
+          "locon": [
+            { "filename": "locon_angelinajolie_v1_from_v3_64_32.safetensors", "uploadedAt": "2025-06-20T16:10:36Z" }
+          ],
+          "lora": [
+            { "filename": "lora-small-angelina-jolie-v1.safetensors", "uploadedAt": "2025-06-20T13:39:55Z" },
+            { "filename": "lora-small-angelina-jolie-v2.safetensors", "uploadedAt": "2025-06-20T13:39:55Z" },
+            { "filename": "lora-small-angelina-jolie-v3.safetensors", "uploadedAt": "2025-06-20T13:39:55Z" }
+          ],
+          "embedding": [
+            { "filename": "angelinajolie-ti.safetensors", "uploadedAt": "2025-06-20T13:22:11Z" },
+            { "filename": "angelinajolie-v2-ti.safetensors", "uploadedAt": "2025-06-20T13:22:11Z" }
+          ],
+          "flux": {
+            "loras": [
+              { "filename": "flux_angelinajolie_v2-step00000400.safetensors", "uploadedAt": "2025-07-06T15:21:44Z" },
+              { "filename": "flux_angelinajolie_v3-step00000400.safetensors", "uploadedAt": "2025-07-06T15:21:44Z" },
+              { "filename": "flux_angelinajolie_v1-step00000400.safetensors", "uploadedAt": "2025-06-19T18:00:10Z" }
+            ],
+            "images": [
+              "https://huggingface.co/datasets/malcolmrey/samples/resolve/main/flux/flux_angelinajolie_00001_.png",
+              "https://huggingface.co/datasets/malcolmrey/samples/resolve/main/flux/flux_angelinajolie_00002_.png"
+            ]
+          },
+          "wan": {
+            "loras": [
+              { "filename": "wan_angelinajolie_v1.safetensors", "uploadedAt": "2025-09-21T11:35:32+02:00" }
+            ],
+            "images": [
+              "https://huggingface.co/datasets/malcolmrey/samples/resolve/main/wan/wan_angelinajolie_00001_.png"
+            ]
+          },
+          "zimage": {
+            "loras": [
+              { "filename": "zimage_angelinajolie_v1.safetensors", "uploadedAt": "2025-12-01T21:07:59+01:00" }
+            ],
+            "images": [
+              "https://huggingface.co/datasets/malcolmrey/samples/resolve/main/zimage/zimage_angelinajolie_00001_.png"
+            ]
+          },
+          "sdxl": [],
+          "qwen": []
+        }
+      }
+    };
 
-    .mainContent {
-      max-width: 1400px;
-      margin: 0 auto;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-      gap: 20px;
-      padding: 0 4px;
+    let db = {};
+
+    // --- State for Infinite Scroll, Filter & Sort ---
+    let filteredKeys = [];
+    let loadedCount = 0;
+    const BATCH_SIZE = 24;
+    let observer;
+    let activeFilters = new Set();
+    let currentSearchQuery = "";
+    let currentSort = "name_asc"; // Default changed to Name A-Z
+
+    // --- 2. Logic & Parsing ---
+
+    function getOptimizedImageUrl(url, width = 'auto') {
+      if (!url || url.includes('placehold.co')) return url;
+      return `https://wsrv.nl/?url=${encodeURIComponent(url)}&w=${width}&q=80&output=webp`;
+    }
+
+    function getPrimaryImageInfo(entry) {
+      const models = entry.models || {};
+      const priorities = [
+        { type: 'flux', list: models.flux?.images },
+        { type: 'wan', list: models.wan?.images },
+        { type: 'zimage', list: models.zimage?.images },
+        { type: 'sdxl', list: models.sdxl?.images },
+        { type: 'qwen', list: models.qwen?.images }
+      ];
+
+      for (const item of priorities) {
+        if (Array.isArray(item.list) && item.list.length > 0) {
+          return { url: item.list[0], type: item.type };
+        }
+      }
+      return { url: 'https://placehold.co/600x800/1e293b/FFF?text=No+Preview', type: null };
     }
 
-    .element {
-      background: var(--card-bg);
-      backdrop-filter: blur(10px);
-      border-radius: 16px;
-      overflow: hidden;
-      border: 1px solid var(--card-border);
-      transition: all 0.3s;
-      box-shadow: 0 4px 16px var(--shadow-color);
-      display: flex;
-      flex-direction: column;
-      cursor: pointer;
-    }
+    function getAllImages(entry) {
+      const models = entry.models || {};
+      let images = [];
+      const categories = ['flux', 'wan', 'zimage', 'sdxl', 'qwen'];
 
-    .element:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
-      border-color: rgba(96, 165, 250, 0.3);
-    }
+      categories.forEach(cat => {
+        if (models[cat] && Array.isArray(models[cat].images)) {
+          models[cat].images.forEach(url => {
+            images.push({ url: url, type: cat });
+          });
+        }
+      });
 
-    .model-name-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 14px 16px;
-      background: var(--input-bg);
-      border-bottom: 1px solid var(--card-border);
-      gap: 8px;
+      return images.length > 0 ? images : [{ url: 'https://placehold.co/600x800/1e293b/FFF?text=No+Preview', type: null }];
     }
 
-    .element .modelName {
-      font-weight: 600;
-      font-size: 14px;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      color: var(--input-text);
-      flex: 1;
-      min-width: 0;
-    }
+    function getGroupedFiles(entry) {
+      const models = entry.models || {};
+      const groups = {};
 
-    .google-search-icon,
-    .copy-link-icon {
-      font-size: 14px;
-      text-decoration: none;
-      opacity: 0.6;
-      transition: all 0.2s;
-      cursor: pointer;
-      flex-shrink: 0;
-    }
+      const addFile = (type, f) => {
+        if (!groups[type]) groups[type] = [];
+        groups[type].push({ ...f, type });
+      };
 
-    .google-search-icon:hover,
-    .copy-link-icon:hover {
-      opacity: 1;
-      transform: scale(1.2);
-    }
+      ['locon', 'lora', 'embedding'].forEach(type => {
+        if (Array.isArray(models[type])) {
+          models[type].forEach(f => addFile(type, f));
+        }
+      });
 
-    .copy-link-icon.copied {
-      opacity: 1;
-      color: #4caf50;
-    }
+      ['flux', 'wan', 'zimage', 'sdxl', 'qwen'].forEach(type => {
+        if (models[type] && Array.isArray(models[type].loras)) {
+          models[type].loras.forEach(f => addFile(type, f));
+        }
+      });
 
-    .model-calendar-icon {
-      font-size: 14px;
-      cursor: help;
-      opacity: 0.7;
-      transition: opacity 0.2s;
-      flex-shrink: 0;
-    }
+      Object.keys(groups).forEach(key => {
+        groups[key].sort((a, b) => a.filename.localeCompare(b.filename));
+      });
 
-    .model-calendar-icon:hover {
-      opacity: 1;
+      return groups;
     }
 
-    .element .imageContainer {
-      position: relative;
-      width: 100%;
-      padding-top: 137.5%; /* 192/264 aspect ratio */
-      overflow: hidden;
-      background: var(--input-bg);
-    }
+    function getCleanVersionLabel(filename) {
+      const vMatch = filename.match(/v(\d+(?:\.\d+)?)/i);
+      const stepMatch = filename.match(/step(\d+)/i);
 
-    .element .imageContainer img {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      transition: transform 0.3s;
+      if (vMatch) return `v${vMatch[1]}`;
+      if (stepMatch) return `Step ${parseInt(stepMatch[1])}`;
+      return "v1";
     }
 
-    .element:hover .imageContainer img {
-      transform: scale(1.05);
+    function hasModelType(entry, type) {
+      const modelData = entry.models?.[type];
+      if (!modelData) return false;
+      if (Array.isArray(modelData)) return modelData.length > 0;
+      return modelData.loras && Array.isArray(modelData.loras) && modelData.loras.length > 0;
     }
 
-    .statsBox {
-      padding: 16px;
-      background: var(--input-bg);
-      font-size: 13px;
-      line-height: 1.8;
-      flex: 1;
-      display: none; /* Hidden in main view */
-    }
+    // --- 3. UI Rendering & Infinite Scroll ---
 
-    .statsBox .stat-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-bottom: 6px;
-    }
+    // Helper: Sorting Function
+    function sortKeys(keys) {
+      return keys.sort((a, b) => {
+        const entryA = db[a];
+        const entryB = db[b];
 
-    .statsBox .stat-row:last-child {
-      margin-bottom: 0;
+        if (currentSort === 'name_asc') {
+          return a.localeCompare(b);
+        } else if (currentSort === 'name_desc') {
+          return b.localeCompare(a);
+        } else if (currentSort === 'date_new') {
+          return new Date(entryB.lastUpdated) - new Date(entryA.lastUpdated);
+        } else if (currentSort === 'date_old') {
+          return new Date(entryA.lastUpdated) - new Date(entryB.lastUpdated);
+        }
+        return 0;
+      });
     }
 
-    .statsBox .stat-label {
-      font-weight: 600;
-      color: var(--text-muted);
-      min-width: 75px;
-    }
+    function renderGallery() {
+      const grid = document.getElementById('galleryGrid');
+      const noResults = document.getElementById('noResults');
+      const itemCountElements = document.querySelectorAll('.item-count-display'); // Update for class selector
+      const sentinel = document.getElementById('sentinel');
 
-    .statsBox .stat-value {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-    }
+      // 1. Filter
+      filteredKeys = Object.keys(db).filter(name => {
+        const matchesSearch = name.toLowerCase().includes(currentSearchQuery.toLowerCase());
+        if (activeFilters.size === 0) return matchesSearch;
+        const matchesFilter = Array.from(activeFilters).some(type => hasModelType(db[name], type));
+        return matchesSearch && matchesFilter;
+      });
 
-    /* Modal Styles */
-    .modal-overlay {
-      display: none;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: var(--modal-overlay);
-      backdrop-filter: blur(8px);
-      z-index: 1000;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-      animation: fadeIn 0.2s ease-out;
-    }
+      // 2. Sort
+      sortKeys(filteredKeys);
 
-    .modal-overlay.active {
-      display: flex;
-    }
+      // Update Header (all instances)
+      itemCountElements.forEach(el => {
+        el.textContent = `${filteredKeys.length} Items`;
+      });
 
-    .modal-content {
-      background: linear-gradient(135deg, var(--bg-gradient-end) 0%, var(--bg-gradient-start) 100%);
-      border-radius: 20px;
-      max-width: 1100px;
-      width: 100%;
-      max-height: 90vh;
-      overflow: hidden;
-      position: relative;
-      border: 2px solid var(--card-border);
-      box-shadow: 0 20px 60px var(--shadow-color);
-      animation: slideUp 0.3s ease-out;
-      display: flex;
-      flex-direction: column;
-      transition: background 0.3s ease, border-color 0.3s ease;
-    }
+      // Reset UI state
+      grid.innerHTML = '';
+      loadedCount = 0;
+      window.scrollTo(0, 0);
 
-    @keyframes slideUp {
-      from {
-        opacity: 0;
-        transform: translateY(30px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
+      if (filteredKeys.length === 0) {
+        grid.classList.add('hidden');
+        noResults.classList.remove('hidden');
+        noResults.classList.add('flex');
+        sentinel.classList.add('hidden');
+        return;
       }
-    }
-
-    .modal-header {
-      padding: 24px;
-      border-bottom: 1px solid var(--card-border);
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      position: sticky;
-      top: 0;
-      background: var(--card-bg);
-      backdrop-filter: blur(10px);
-      z-index: 10;
-      transition: background 0.3s ease, border-color 0.3s ease;
-    }
-
-    .modal-title {
-      font-size: 24px;
-      font-weight: 700;
-      color: var(--text-primary);
-      margin: 0;
-    }
-
-    .modal-close {
-      width: 36px;
-      height: 36px;
-      border-radius: 10px;
-      background: rgba(239, 68, 68, 0.2);
-      border: 1px solid rgba(239, 68, 68, 0.3);
-      color: #fca5a5;
-      font-size: 20px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.2s;
-      font-weight: 700;
-    }
 
-    .modal-close:hover {
-      background: rgba(239, 68, 68, 0.3);
-      color: #fecaca;
-      transform: rotate(90deg);
-    }
+      noResults.classList.add('hidden');
+      noResults.classList.remove('flex');
+      grid.classList.remove('hidden');
+      sentinel.classList.remove('hidden');
 
-    .modal-body {
-      display: flex;
-      flex: 1;
-      overflow: hidden;
-      gap: 0;
+      renderBatch();
     }
 
-    .modal-left {
-      flex: 0 0 45%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--input-bg);
-      padding: 24px;
-      transition: background 0.3s ease;
-    }
+    function renderBatch() {
+      const grid = document.getElementById('galleryGrid');
+      const sentinel = document.getElementById('sentinel');
 
-    .modal-image-container {
-      width: 100%;
-      border-radius: 12px;
-      overflow: hidden;
-      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
-      max-height: 100%;
-    }
+      const nextBatch = filteredKeys.slice(loadedCount, loadedCount + BATCH_SIZE);
 
-    .modal-image-container img {
-      width: 100%;
-      height: auto;
-      display: block;
-    }
+      if (nextBatch.length === 0) {
+        sentinel.classList.add('hidden');
+        sentinel.classList.remove('opacity-100');
+        return;
+      }
 
-    .modal-right {
-      flex: 1;
-      padding: 24px;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-      gap: 16px;
-    }
+      const fragment = document.createDocumentFragment();
 
-    .modal-stats {
-      display: grid;
-      gap: 12px;
-    }
+      nextBatch.forEach(key => {
+        const entry = db[key];
+        const imgInfo = getPrimaryImageInfo(entry);
+        const optimizedUrl = getOptimizedImageUrl(imgInfo.url, 450);
+        const fileCount = Object.values(getGroupedFiles(entry)).flat().length;
+        const displayName = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase()).trim();
 
-    .modal-stat-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 16px 20px;
-      background: var(--input-bg);
-      border-radius: 12px;
-      border: 1px solid var(--card-border);
-      transition: all 0.2s;
-    }
+        const typeBadge = imgInfo.type
+          ? `<div class="absolute top-2 right-2 px-2 py-1 bg-black/60 backdrop-blur-md rounded text-[10px] font-bold text-white border border-white/10 uppercase tracking-wider shadow-sm z-10">${imgInfo.type}</div>`
+          : '';
 
-    .modal-stat-row:hover {
-      background: var(--hover-bg);
-      border-color: var(--card-border);
-    }
+        const card = document.createElement('div');
+        card.className = 'group relative bg-zinc-800 rounded-xl overflow-hidden border border-zinc-700 shadow-lg cursor-pointer card-hover flex flex-col h-full';
+        card.onclick = () => openModal(key, entry);
 
-    .modal-stat-label {
-      font-weight: 600;
-      font-size: 15px;
-      color: var(--text-secondary);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+        card.innerHTML = `
+                    <div class="aspect-[3/4] overflow-hidden bg-zinc-900 relative">
+                        <img src="${optimizedUrl}" loading="lazy" alt="${key}" class="w-full h-full object-cover transition-all duration-700 group-hover:scale-105 opacity-0 group-hover:opacity-100 img-fade-in" onload="this.classList.add('img-loaded'); this.classList.remove('opacity-0')">
+                        <div class="absolute inset-0 bg-gradient-to-t from-zinc-900 via-transparent to-transparent opacity-60"></div>
+
+                        ${typeBadge}
+
+                        <!-- Search Icon Button -->
+                        <a href="https://www.google.com/search?q=${encodeURIComponent(key)}" target="_blank" onclick="event.stopPropagation()" class="absolute top-2 left-2 p-2 bg-black/50 hover:bg-indigo-600 backdrop-blur-md rounded-lg text-white border border-white/10 transition-colors z-20 opacity-0 group-hover:opacity-100" title="Search ${displayName}">
+                            <i data-lucide="search" class="h-3 w-3"></i>
+                        </a>
+
+                        <div class="absolute bottom-0 left-0 right-0 p-4 transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300">
+                            <h3 class="text-lg font-bold text-white leading-tight truncate">${displayName}</h3>
+                            <div class="flex items-center gap-2 mt-1 text-xs text-indigo-300 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-75">
+                                <i data-lucide="file-box" class="h-3 w-3"></i>
+                                <span>${fileCount} files available</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-4 py-3 bg-zinc-800 border-t border-zinc-700/50 flex justify-between items-center">
+                         <span class="text-xs text-zinc-500 font-mono">Updated: ${new Date(entry.lastUpdated).toLocaleDateString()}</span>
+                         <div class="h-6 w-6 rounded-full bg-zinc-700 flex items-center justify-center text-zinc-300 group-hover:bg-indigo-600 group-hover:text-white transition-colors">
+                            <i data-lucide="arrow-right" class="h-3 w-3"></i>
+                         </div>
+                    </div>
+                `;
+        fragment.appendChild(card);
+      });
 
-    .modal-stat-value {
-      display: flex;
-      align-items: flex-start;
-      gap: 12px;
-      flex-wrap: wrap;
-    }
+      grid.appendChild(fragment);
+      loadedCount += nextBatch.length;
 
-    .modal-hf-links-container {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
-      margin-left: 8px;
-    }
+      lucide.createIcons();
 
-    .modal-hf-link {
-      padding: 6px 12px;
-      background: rgba(255, 107, 0, 0.15);
-      border: 1px solid rgba(255, 107, 0, 0.3);
-      border-radius: 8px;
-      font-size: 12px;
-      font-weight: 600;
-      color: #ff9d5c;
-      transition: all 0.2s;
-      text-decoration: none;
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      white-space: nowrap;
+      if (loadedCount >= filteredKeys.length) {
+        sentinel.classList.add('hidden');
+        sentinel.classList.remove('opacity-100');
+      } else {
+        sentinel.classList.remove('hidden');
+      }
     }
 
-    .modal-hf-link:hover {
-      background: rgba(255, 107, 0, 0.25);
-      border-color: rgba(255, 107, 0, 0.5);
-      transform: translateY(-1px);
-      color: #ffb380;
-    }
+    function initObserver() {
+      const options = {
+        root: null,
+        rootMargin: '200px',
+        threshold: 0.1
+      };
 
-    .modal-hf-placeholder {
-      padding: 6px 12px;
-      background: var(--input-bg);
-      border: 1px solid var(--card-border);
-      border-radius: 8px;
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--text-muted);
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      opacity: 0.5;
-    }
+      observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting && loadedCount < filteredKeys.length) {
+            const sentinel = document.getElementById('sentinel');
+            sentinel.classList.add('opacity-100');
+            renderBatch();
+          }
+        });
+      }, options);
 
-    .hf-logo {
-      width: 16px;
-      height: 16px;
-      display: inline-block;
+      const sentinel = document.getElementById('sentinel');
+      if (sentinel) observer.observe(sentinel);
     }
 
-    @media (max-width: 900px) {
-      .modal-body {
-        flex-direction: column;
-      }
+    // --- 4. Filtering & Sorting UI Logic ---
 
-      .modal-left {
-        flex: 0 0 auto;
-        max-height: 400px;
-      }
+    function renderFilterMenu() {
+      const container = document.getElementById('filterOptionsContainer');
+      container.innerHTML = '';
 
-      .modal-right {
-        flex: 1;
-      }
-    }
+      const types = Object.keys(TYPE_DISPLAY_NAMES);
 
-    .status-icon {
-      font-size: 16px;
-      display: inline-block;
-    }
+      types.forEach(type => {
+        const label = TYPE_DISPLAY_NAMES[type];
 
-    .status-available {
-      color: #4ade80;
-    }
+        const labelEl = document.createElement('label');
+        labelEl.className = "flex items-center space-x-3 p-2 rounded-lg hover:bg-zinc-700/50 cursor-pointer transition-colors";
 
-    .status-unavailable {
-      color: #f87171;
-    }
+        const checkbox = document.createElement('input');
+        checkbox.type = 'checkbox';
+        checkbox.className = "form-checkbox h-4 w-4 text-indigo-600 rounded border-zinc-600 bg-zinc-700 focus:ring-indigo-500 focus:ring-offset-zinc-900 custom-checkbox";
+        checkbox.value = type;
+        if (activeFilters.has(type)) checkbox.checked = true;
 
-    .status-unknown {
-      color: #fbbf24;
-    }
+        checkbox.addEventListener('change', (e) => {
+          if (e.target.checked) {
+            activeFilters.add(type);
+          } else {
+            activeFilters.delete(type);
+          }
+          toggleClearButton();
+          renderGallery();
+        });
 
-    .hf-link {
-      padding: 2px 8px;
-      background: rgba(96, 165, 250, 0.1);
-      border: 1px solid rgba(96, 165, 250, 0.2);
-      border-radius: 6px;
-      font-size: 11px;
-      font-weight: 600;
-      color: var(--accent-blue);
-      transition: all 0.2s;
-      display: inline-block;
-    }
+        const textSpan = document.createElement('span');
+        textSpan.className = "text-sm text-zinc-300 select-none";
+        textSpan.textContent = label;
 
-    .hf-link:hover {
-      background: rgba(96, 165, 250, 0.2);
-      border-color: rgba(96, 165, 250, 0.4);
+        labelEl.appendChild(checkbox);
+        labelEl.appendChild(textSpan);
+        container.appendChild(labelEl);
+      });
     }
 
-    @media (max-width: 768px) {
-      .controls {
-        flex-direction: column;
-        align-items: stretch;
-      }
-
-      .checkbox-group {
-        justify-content: center;
-      }
-
-      .mainContent {
-        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-        gap: 16px;
-      }
-    }
+    function toggleClearButton() {
+      const btn = document.getElementById('clearFiltersBtn');
+      const filterBtn = document.getElementById('filterBtn');
+      const mobileFilterBtn = document.getElementById('mobileFilterBtn');
 
-    /* Loading animation */
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
+      if (activeFilters.size > 0) {
+        btn.classList.remove('hidden');
+        // Highlight filter buttons
+        [filterBtn, mobileFilterBtn].forEach(el => {
+          if (el) {
+            el.classList.add('text-indigo-400', 'border-indigo-500');
+            el.classList.remove('text-zinc-400', 'border-zinc-700');
+          }
+        });
+      } else {
+        btn.classList.add('hidden');
+        [filterBtn, mobileFilterBtn].forEach(el => {
+          if (el) {
+            el.classList.remove('text-indigo-400', 'border-indigo-500');
+            el.classList.add('text-zinc-400', 'border-zinc-700');
+          }
+        });
       }
     }
 
-    .element {
-      animation: fadeIn 0.4s ease-out;
-    }
-
-    /* Scrollbar styling */
-    ::-webkit-scrollbar {
-      width: 12px;
-    }
+    function setupUIListeners() {
+      // -- Filter Logic --
+      const filterBtn = document.getElementById('filterBtn');
+      const filterMenu = document.getElementById('filterMenu');
+      const clearBtn = document.getElementById('clearFiltersBtn');
+      const mobileFilterBtn = document.getElementById('mobileFilterBtn');
 
-    ::-webkit-scrollbar-track {
-      background: var(--input-bg);
-    }
+      const toggleFilterMenu = (e) => {
+        e.stopPropagation();
+        // Close sort menu if open
+        document.getElementById('sortMenu').classList.add('hidden');
 
-    ::-webkit-scrollbar-thumb {
-      background: rgba(148, 163, 184, 0.3);
-      border-radius: 6px;
-    }
+        // Position logic for mobile
+        if (e.currentTarget === mobileFilterBtn) {
+          const rect = mobileFilterBtn.getBoundingClientRect();
+          filterMenu.style.top = `${rect.bottom + 5}px`;
+          filterMenu.style.right = '16px'; // Align with padding
+        } else {
+          filterMenu.style.top = ''; // Reset inline style
+          filterMenu.style.right = '';
+        }
+        filterMenu.classList.toggle('hidden');
+      };
 
-    ::-webkit-scrollbar-thumb:hover {
-      background: rgba(148, 163, 184, 0.5);
-    }
+      filterBtn.addEventListener('click', toggleFilterMenu);
+      if (mobileFilterBtn) mobileFilterBtn.addEventListener('click', toggleFilterMenu);
 
-    /* Image viewer with navigation */
-    .image-viewer {
-      position: relative;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-    }
+      clearBtn.addEventListener('click', () => {
+        activeFilters.clear();
+        const checkboxes = document.querySelectorAll('#filterOptionsContainer input[type="checkbox"]');
+        checkboxes.forEach(cb => cb.checked = false);
+        toggleClearButton();
+        renderGallery();
+      });
 
-    .modal-image {
-      max-width: 100%;
-      max-height: 70vh;
-      object-fit: contain;
-      border-radius: 8px;
-    }
+      renderFilterMenu();
 
-    .image-nav-arrow {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      background: var(--card-bg-solid);
-      border: 2px solid var(--input-border);
-      color: var(--accent-blue);
-      font-size: 48px;
-      font-weight: bold;
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: all 0.3s ease;
-      z-index: 10;
-      line-height: 1;
-      padding: 0;
-      user-select: none;
-    }
+      // -- Sort Logic --
+      const sortBtn = document.getElementById('sortBtn');
+      const mobileSortBtn = document.getElementById('mobileSortBtn');
+      const sortMenu = document.getElementById('sortMenu');
 
-    .image-nav-arrow:hover {
-      background: rgba(96, 165, 250, 0.3);
-      border-color: var(--accent-blue);
-      color: var(--link-hover);
-      transform: translateY(-50%) scale(1.1);
-      box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
-    }
+      const toggleSortMenu = (e) => {
+        e.stopPropagation();
+        document.getElementById('filterMenu').classList.add('hidden'); // Close filter
 
-    .image-nav-arrow:active {
-      transform: translateY(-50%) scale(0.95);
-    }
+        if (e.currentTarget === mobileSortBtn) {
+          const rect = mobileSortBtn.getBoundingClientRect();
+          sortMenu.style.top = `${rect.bottom + 5}px`;
+          sortMenu.style.left = '16px';
+        } else {
+          sortMenu.style.top = '';
+          sortMenu.style.left = '';
+        }
+        sortMenu.classList.toggle('hidden');
+      };
 
-    .image-nav-prev {
-      left: 10px;
-    }
+      sortBtn.addEventListener('click', toggleSortMenu);
+      if (mobileSortBtn) mobileSortBtn.addEventListener('click', toggleSortMenu);
+
+      // Handle radio changes for sorting
+      const sortRadios = document.querySelectorAll('input[name="sort"]');
+      sortRadios.forEach(radio => {
+        radio.addEventListener('change', (e) => {
+          currentSort = e.target.value;
+          renderGallery();
+          // Optional: Close menu on selection
+          // sortMenu.classList.add('hidden');
+        });
+      });
 
-    .image-nav-next {
-      right: 10px;
-    }
 
-    .image-info {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-top: 12px;
-      padding: 8px 12px;
-      background: var(--input-bg);
-      border-radius: 8px;
-      gap: 12px;
-    }
+      // -- Global Click Outside --
+      document.addEventListener('click', (e) => {
+        const clickedInsideFilter = filterMenu.contains(e.target) || filterBtn.contains(e.target) || (mobileFilterBtn && mobileFilterBtn.contains(e.target));
+        const clickedInsideSort = sortMenu.contains(e.target) || sortBtn.contains(e.target) || (mobileSortBtn && mobileSortBtn.contains(e.target));
 
-    .image-counter {
-      font-size: 14px;
-      font-weight: 500;
-      color: var(--text-muted);
+        if (!clickedInsideFilter) filterMenu.classList.add('hidden');
+        if (!clickedInsideSort) sortMenu.classList.add('hidden');
+      });
     }
 
-    .framework-label {
-      font-size: 13px;
-      font-weight: 600;
-      padding: 4px 12px;
-      border-radius: 12px;
-      background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
-      color: #fff;
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      box-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
-    }
+    // --- 5. Modal Logic ---
 
-    .framework-label[data-framework="WAN"] {
-      background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
-    }
+    const modalBackdrop = document.getElementById('modalBackdrop');
+    const modalPanel = document.getElementById('modalPanel');
 
-    .framework-label[data-framework="LyCORIS"] {
-      background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
-    }
+    function openModal(key, entry) {
+      const displayName = key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase()).trim();
+      const images = getAllImages(entry);
+      const groupedFiles = getGroupedFiles(entry);
+      const imgInfo = getPrimaryImageInfo(entry);
 
-    .framework-label[data-framework="Lora"] {
-      background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
-    }
+      document.getElementById('modalTitle').textContent = displayName;
+      document.getElementById('modalDate').textContent = new Date(entry.lastUpdated).toLocaleString();
 
-    .framework-label[data-framework="Embedding"] {
-      background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
-    }
+      const mainImg = document.getElementById('modalMainImage');
+      const openLink = document.getElementById('openOriginalLink');
+      const imageBadge = document.getElementById('modalImageBadge');
 
-    .framework-label[data-framework="Qwen"] {
-      background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
-    }
+      if (images.length > 0) {
+        mainImg.src = getOptimizedImageUrl(images[0].url, 1200);
+        openLink.href = images[0].url;
 
-    .framework-label[data-framework="Flux"] {
-      background: linear-gradient(135deg, #a855f7 0%, #d946ef 100%);
-    }
+        const currentType = images[0].type || imgInfo.type;
+        if (currentType) {
+          imageBadge.textContent = currentType;
+          imageBadge.classList.remove('hidden');
+        } else {
+          imageBadge.classList.add('hidden');
+        }
+      }
 
-    .framework-label[data-framework="SDXL"] {
-      background: linear-gradient(135deg, #84cc16 0%, #22c55e 100%);
-    }
+      const thumbContainer = document.getElementById('modalThumbnails');
+      thumbContainer.innerHTML = '';
 
-    .framework-label[data-framework="ZImage"] {
-      background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
-    }
+      if (images.length > 1) {
+        images.forEach(imgObj => {
+          const btn = document.createElement('button');
+          const thumbUrl = getOptimizedImageUrl(imgObj.url, 200);
 
-    /* Pagination Controls */
-    .pagination-controls {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: 8px;
-      margin-top: 24px;
-      margin-bottom: 16px;
-      flex-wrap: wrap;
-    }
+          btn.className = 'aspect-square rounded-lg overflow-hidden border border-zinc-700 hover:border-indigo-500 transition-all opacity-70 hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 relative';
+          btn.innerHTML = `<img src="${thumbUrl}" class="w-full h-full object-cover">`;
 
-    .pagination-btn {
-      padding: 10px 16px;
-      background: var(--input-bg);
-      border: 2px solid var(--input-border);
-      border-radius: 10px;
-      color: var(--text-primary);
-      font-size: 14px;
-      font-weight: 500;
-      cursor: pointer;
-      transition: all 0.2s;
-    }
+          btn.onclick = () => {
+            mainImg.src = getOptimizedImageUrl(imgObj.url, 1200);
+            openLink.href = imgObj.url;
 
-    .pagination-btn:hover:not(:disabled) {
-      background: var(--hover-bg);
-      border-color: var(--accent-blue);
-    }
+            if (imgObj.type) {
+              imageBadge.textContent = imgObj.type;
+              imageBadge.classList.remove('hidden');
+            } else {
+              imageBadge.classList.add('hidden');
+            }
+          };
+          thumbContainer.appendChild(btn);
+        });
+      }
 
-    .pagination-btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
+      const tableBody = document.getElementById('filesTableBody');
+      tableBody.innerHTML = '';
+
+      const sortedTypes = Object.keys(groupedFiles).sort();
+
+      sortedTypes.forEach(type => {
+        const files = groupedFiles[type];
+        const displayType = TYPE_DISPLAY_NAMES[type] || type.toUpperCase();
+        const colorClass = TYPE_COLORS[type] || 'text-zinc-400 bg-zinc-400/10 border-zinc-400/20';
+
+        files.sort((a, b) => new Date(b.uploadedAt) - new Date(a.uploadedAt));
+
+        let buttonsHtml = '<div class="flex flex-col gap-2 w-full">';
+        files.forEach(file => {
+          const label = getCleanVersionLabel(file.filename);
+          const downloadUrl = BASE_URLS[file.type] ? BASE_URLS[file.type] + file.filename : '#';
+          const dateStr = new Date(file.uploadedAt).toLocaleDateString();
+
+          buttonsHtml += `
+                        <div class="flex items-center justify-between bg-zinc-900/40 px-3 py-2 rounded-lg border border-zinc-700/50 hover:border-indigo-500/30 transition-colors group/file">
+                             <a href="${downloadUrl}" target="_blank" title="${file.filename}"
+                                class="flex items-center gap-2 text-sm font-medium text-zinc-200 hover:text-white transition-colors">
+                                <span class="px-2 py-0.5 rounded-md bg-zinc-700 text-xs text-white border border-zinc-600 group-hover/file:bg-indigo-600 group-hover/file:border-indigo-500 transition-colors">${label}</span>
+                                <span class="hidden sm:inline opacity-70 text-xs truncate max-w-[150px]">${file.filename}</span>
+                                <i data-lucide="download" class="h-3 w-3 opacity-50 group-hover/file:opacity-100"></i>
+                             </a>
+                             <span class="text-xs text-zinc-500 font-mono whitespace-nowrap">${dateStr}</span>
+                        </div>
+                    `;
+        });
+        buttonsHtml += '</div>';
+
+        const row = document.createElement('tr');
+        row.className = "hover:bg-zinc-800/50 transition-colors";
+        row.innerHTML = `
+                    <td class="px-4 py-4 align-top w-1/4">
+                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-bold rounded border ${colorClass}">
+                            ${displayType}
+                        </span>
+                    </td>
+                    <td class="px-4 py-4 align-top w-3/4">
+                        ${buttonsHtml}
+                    </td>
+                `;
+        tableBody.appendChild(row);
+      });
 
-    .pagination-info {
-      padding: 10px 20px;
-      background: var(--input-bg);
-      border-radius: 10px;
-      color: var(--text-muted);
-      font-size: 14px;
-      font-weight: 500;
-    }
+      modalBackdrop.classList.remove('hidden');
+      void modalBackdrop.offsetWidth;
 
-    /* Sorting and Page Size Controls */
-    .advanced-controls {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 12px;
-      align-items: center;
-      justify-content: center;
-      margin-top: 12px;
-    }
+      modalBackdrop.classList.remove('opacity-0');
+      modalPanel.classList.remove('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
+      modalPanel.classList.add('opacity-100', 'translate-y-0', 'sm:scale-100');
 
-    .control-group {
-      display: flex;
-      align-items: center;
-      gap: 8px;
+      document.body.style.overflow = 'hidden';
+      lucide.createIcons();
     }
 
-    .control-label {
-      color: var(--text-muted);
-      font-size: 13px;
-      font-weight: 500;
-    }
+    function closeModal() {
+      modalBackdrop.classList.remove('opacity-100');
+      modalPanel.classList.remove('opacity-100', 'translate-y-0', 'sm:scale-100');
+      modalPanel.classList.add('opacity-0', 'translate-y-4', 'sm:translate-y-0', 'sm:scale-95');
 
-    .control-select {
-      padding: 8px 32px 8px 12px;
-      background: var(--input-bg);
-      border: 2px solid var(--input-border);
-      border-radius: 8px;
-      color: var(--text-primary);
-      font-size: 13px;
-      font-family: inherit;
-      cursor: pointer;
-      transition: all 0.2s;
-      appearance: none;
-      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-      background-repeat: no-repeat;
-      background-position: right 8px center;
-      background-size: 16px;
+      setTimeout(() => {
+        modalBackdrop.classList.add('hidden');
+        document.body.style.overflow = 'auto';
+      }, 300);
     }
 
-    .control-select:focus {
-      outline: none;
-      border-color: var(--accent-blue);
-    }
+    // --- 6. Initialization ---
 
-    .control-select option {
-      background: var(--card-bg-solid);
-      color: var(--input-text);
-    }
+    document.getElementById('closeModalBtn').addEventListener('click', closeModal);
+    document.getElementById('modalBackdrop').addEventListener('click', (e) => {
+      if (e.target === modalBackdrop) closeModal();
+    });
 
-    .updates-group {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-    }
+    // Search Input Logic
+    const handleSearch = (e) => {
+      currentSearchQuery = e.target.value;
+      toggleSearchClearButtons();
+      renderGallery();
+    };
 
-    .last-update-inline {
-      font-size: 12px;
-      color: var(--text-secondary);
-      padding: 6px 12px;
-      background: var(--input-bg);
-      border-radius: 8px;
-      border: 1px solid var(--input-border);
-      white-space: nowrap;
-      transition: all 0.3s ease;
+    // Clear Search Logic
+    const clearSearch = () => {
+      currentSearchQuery = "";
+      document.getElementById('searchInput').value = "";
+      document.getElementById('mobileSearchInput').value = "";
+      toggleSearchClearButtons();
+      renderGallery();
     }
 
-    /* Theme Toggle Button */
-    .theme-toggle {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      width: 44px;
-      height: 44px;
-      border-radius: 50%;
-      background: var(--card-bg);
-      border: 2px solid var(--card-border);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 20px;
-      transition: all 0.3s ease;
-      z-index: 1000;
-      box-shadow: 0 4px 12px var(--shadow-color);
-    }
+    function toggleSearchClearButtons() {
+      const deskBtn = document.getElementById('clearSearchBtn');
+      const mobBtn = document.getElementById('mobileClearSearchBtn');
+      const hasText = currentSearchQuery.length > 0;
 
-    .theme-toggle:hover {
-      transform: scale(1.1);
-      border-color: var(--accent-blue);
+      if (hasText) {
+        deskBtn.classList.remove('hidden');
+        mobBtn.classList.remove('hidden');
+      } else {
+        deskBtn.classList.add('hidden');
+        mobBtn.classList.add('hidden');
+      }
     }
 
-    .theme-toggle .sun-icon {
-      display: none;
-    }
+    document.getElementById('searchInput').addEventListener('input', handleSearch);
+    document.getElementById('mobileSearchInput').addEventListener('input', handleSearch);
+    document.getElementById('clearSearchBtn').addEventListener('click', clearSearch);
+    document.getElementById('mobileClearSearchBtn').addEventListener('click', clearSearch);
 
-    .theme-toggle .moon-icon {
-      display: block;
-    }
 
-    [data-theme="light"] .theme-toggle .sun-icon {
-      display: block;
-    }
+    async function init() {
+      const loader = document.getElementById('loader');
+      const gallery = document.getElementById('galleryGrid');
+      const errorState = document.getElementById('errorState');
+      const sentinel = document.getElementById('sentinel');
 
-    [data-theme="light"] .theme-toggle .moon-icon {
-      display: none;
-    }
+      try {
+        const response = await fetch('unified-data.json');
 
-    .daily-uploads-btn {
-      padding: 10px 20px;
-      background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
-      border: none;
-      border-radius: 10px;
-      color: #fff;
-      font-size: 14px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.2s;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
+        if (!response.ok) {
+          throw new Error('File not found');
+        }
 
-    .daily-uploads-btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
-    }
+        db = await response.json();
+        console.log("Loaded data from unified-data.json");
+      } catch (err) {
+        console.warn("Could not load external JSON. Using embedded sample data for demo.", err);
+        db = SAMPLE_DATA;
+
+        if (!db) {
+          loader.classList.add('hidden');
+          errorState.classList.remove('hidden');
+          errorState.classList.add('flex');
+          return;
+        }
+      }
 
-    /* Daily Uploads Modal */
-    .daily-modal-content {
-      max-width: 900px;
-      max-height: 80vh;
-    }
+      setupUIListeners();
 
-    .daily-modal-body {
-      padding: 24px;
-      overflow-y: auto;
-      max-height: calc(80vh - 100px);
-    }
+      // Reduced artificial delay for snappier feel
+      setTimeout(() => {
+        loader.classList.add('hidden');
+        gallery.classList.remove('opacity-0');
 
-    .daily-date-selector {
-      margin-bottom: 20px;
+        // Initialize observer before rendering
+        initObserver();
+        renderGallery();
+      }, 100);
     }
 
-    .daily-date-select {
-      width: 100%;
-      padding: 14px 40px 14px 16px;
-      background: var(--input-bg);
-      border: 2px solid var(--input-border);
-      border-radius: 12px;
-      color: var(--input-text);
-      font-size: 16px;
-      font-family: inherit;
-      cursor: pointer;
-      appearance: none;
-      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-      background-repeat: no-repeat;
-      background-position: right 12px center;
-      background-size: 20px;
-      transition: all 0.3s ease;
-    }
+    // Start
+    init();
 
-    .daily-date-select:focus {
-      outline: none;
-      border-color: var(--accent-blue);
-    }
+  </script>
+</body>
 
-    .daily-date-select option {
-      background: var(--card-bg-solid);
-      color: var(--input-text);
-    }
-
-    .daily-uploads-list {
-      display: grid;
-      gap: 12px;
-    }
-
-    .daily-upload-item {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 16px 20px;
-      background: var(--input-bg);
-      border-radius: 12px;
-      border: 1px solid var(--card-border);
-      transition: all 0.2s;
-    }
-
-    .daily-upload-item:hover {
-      background: var(--hover-bg);
-      border-color: var(--card-border);
-    }
-
-    .daily-upload-person {
-      font-weight: 600;
-      color: var(--text-primary);
-      font-size: 15px;
-    }
-
-    .daily-upload-person-row {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-    }
-
-    .person-modal-link {
-      font-size: 14px;
-      opacity: 0.6;
-      transition: all 0.2s;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      text-decoration: none;
-    }
-
-    .person-modal-link:hover {
-      opacity: 1;
-      transform: scale(1.2);
-    }
-
-    .daily-upload-models {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 8px;
-    }
-
-    .daily-upload-model {
-      padding: 4px 10px;
-      background: rgba(96, 165, 250, 0.2);
-      border-radius: 6px;
-      font-size: 12px;
-      font-weight: 600;
-      color: var(--accent-blue);
-      text-transform: uppercase;
-      text-decoration: none;
-      cursor: pointer;
-      transition: all 0.15s ease;
-    }
-
-    .daily-upload-model:hover {
-      transform: translateY(-2px);
-      filter: brightness(1.2);
-      text-decoration: underline;
-    }
-
-    .daily-upload-model[data-type="wan"] {
-      background: rgba(239, 68, 68, 0.2);
-      color: #fca5a5;
-    }
-
-    .daily-upload-model[data-type="flux"] {
-      background: rgba(168, 85, 247, 0.2);
-      color: #c4b5fd;
-    }
-
-    .daily-upload-model[data-type="sdxl"] {
-      background: rgba(34, 197, 94, 0.2);
-      color: #86efac;
-    }
-
-    .daily-upload-model[data-type="zimage"] {
-      background: rgba(236, 72, 153, 0.2);
-      color: #f9a8d4;
-    }
-
-    .daily-upload-model[data-type="qwen"] {
-      background: rgba(6, 182, 212, 0.2);
-      color: #67e8f9;
-    }
-
-    .daily-upload-model[data-type="lora"] {
-      background: rgba(59, 130, 246, 0.2);
-      color: #93c5fd;
-    }
-
-    .daily-upload-model[data-type="locon"] {
-      background: rgba(16, 185, 129, 0.2);
-      color: #6ee7b7;
-    }
-
-    .daily-upload-model[data-type="embedding"] {
-      background: rgba(249, 115, 22, 0.2);
-      color: #fdba74;
-    }
-
-    .no-uploads-message {
-      text-align: center;
-      padding: 40px;
-      color: var(--text-secondary);
-      font-size: 15px;
-    }
-
-    .daily-stats {
-      padding: 16px;
-      background: var(--input-bg);
-      border-radius: 10px;
-      margin-bottom: 16px;
-      display: flex;
-      justify-content: center;
-      gap: 24px;
-      transition: background 0.3s ease;
-    }
-
-    .daily-stat {
-      text-align: center;
-    }
-
-    .daily-stat-value {
-      font-size: 24px;
-      font-weight: 700;
-      color: var(--accent-blue);
-    }
-
-    .daily-stat-label {
-      font-size: 12px;
-      color: var(--text-secondary);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-    }
-  </style>
-</head>
-<body>
-  <!-- Theme Toggle Button -->
-  <button class="theme-toggle" onclick="toggleTheme()" title="Toggle dark/light mode">
-    <span class="moon-icon">🌙</span>
-    <span class="sun-icon">☀️</span>
-  </button>
-
-  <div class="header">
-    <div class="header-title-row">
-      <h1>🎨 Mal's Models</h1>
-      <div class="profile-links">
-        <a href="https://civitai.com/user/malcolmrey" target="_blank">🎨 CivitAI</a>
-        <a href="https://huggingface.com/malcolmrey" target="_blank">🤗 HuggingFace</a>
-        <a href="https://buymeacoffee.com/malcolmrey" target="_blank">☕ BuyMeACoffee</a>
-        <a href="https://reddit.com/r/malcolmrey" target="_blank">💬 Reddit</a>
-      </div>
-    </div>
-    
-    <div class="controls">
-      <div class="search-container">
-        <input
-          id="search"
-          type="text"
-          onkeyup="javascript:searchModels(this.value);"
-          placeholder="Search models..."
-        />
-        <button
-          class="clear-btn"
-          onclick="javascript:clearCurrentSearchValue(); javascript:searchModels(getCurrentSearchValue())"
-        >
-          Clear
-        </button>
-      </div>
-
-      <select
-        class="mode-select"
-        id="searchMode"
-        onchange="javascript:searchModels(getCurrentSearchValue());"
-      >
-        <option value="available">Trained</option>
-        <option value="missing">Not trained</option>
-      </select>
-
-      <div class="stats-bar">
-        <label>Found:</label>
-        <input id="found" type="text" readonly />
-      </div>
-
-      <div class="updates-group">
-        <button class="daily-uploads-btn" onclick="openDailyUploadsModal()">
-          📋 Recent Updates
-        </button>
-        <span id="lastUpdateLabel" class="last-update-inline">Updated: N/A</span>
-      </div>
-    </div>
-
-    <div class="advanced-controls">
-      <div class="control-group">
-        <span class="control-label">Sort by:</span>
-        <select id="sortBy" class="control-select" onchange="resetToFirstPage(); searchModels(getCurrentSearchValue());">
-          <option value="name-asc">Name (A-Z)</option>
-          <option value="name-desc">Name (Z-A)</option>
-          <option value="date-desc">Update Date (Newest)</option>
-          <option value="date-asc">Update Date (Oldest)</option>
-        </select>
-      </div>
-
-      <div class="control-group">
-        <span class="control-label">Period:</span>
-        <select id="periodFilter" class="control-select" onchange="resetToFirstPage(); searchModels(getCurrentSearchValue());">
-          <option value="all">All Time</option>
-          <option value="today">Today</option>
-          <option value="week">This Week</option>
-          <option value="month">This Month</option>
-        </select>
-      </div>
-
-      <div class="control-group">
-        <span class="control-label">Per page:</span>
-        <select id="pageSize" class="control-select" onchange="resetToFirstPage(); searchModels(getCurrentSearchValue());">
-          <option value="10">10</option>
-          <option value="25">25</option>
-          <option value="50" selected>50</option>
-          <option value="100">100</option>
-          <option value="250">250</option>
-          <option value="500">500</option>
-          <option value="1000">1000</option>
-          <option value="all">All</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="controls" style="margin-top: 16px;">
-      <div class="checkbox-group">
-        <label class="checkbox-label">
-          <input
-            id="selectedLora"
-            type="checkbox"
-            onclick="javascript:searchModels(getCurrentSearchValue());"
-          />
-          <span>SD LoRA</span>
-        </label>
-
-        <label class="checkbox-label">
-          <input
-            id="selectedLocon"
-            type="checkbox"
-            onclick="javascript:searchModels(getCurrentSearchValue());"
-          />
-          <span>SD LoCon</span>
-        </label>
-
-        <label class="checkbox-label">
-          <input
-            id="selectedEmbedding"
-            type="checkbox"
-            onclick="javascript:searchModels(getCurrentSearchValue());"
-          />
-          <span>SD Embedding</span>
-        </label>
-        
-        <label class="checkbox-label">
-          <input
-            id="selectedFlux"
-            type="checkbox"
-            onclick="javascript:searchModels(getCurrentSearchValue());"
-          />
-          <span>Flux</span>
-        </label>
-
-        <label class="checkbox-label">
-          <input
-            id="selectedWan"
-            type="checkbox"
-            onclick="javascript:searchModels(getCurrentSearchValue());"
-          />
-          <span>WAN</span>
-        </label>
-
-        <label class="checkbox-label">
-          <input
-            id="selectedSdxl"
-            type="checkbox"
-            onclick="javascript:searchModels(getCurrentSearchValue());"
-          />
-          <span>SDXL</span>
-        </label>
-
-        <label class="checkbox-label">
-          <input
-            id="selectedZimage"
-            type="checkbox"
-            onclick="javascript:searchModels(getCurrentSearchValue());"
-          />
-          <span>ZImage</span>
-        </label>
-
-        <label class="checkbox-label">
-          <input
-            id="selectedQwen"
-            type="checkbox"
-            onclick="javascript:searchModels(getCurrentSearchValue());"
-          />
-          <span>Qwen</span>
-        </label>
-      </div>
-    </div>
-  </div>
-
-  <div id="paginationControls" class="pagination-controls" style="display: none;">
-    <button id="firstPageBtn" class="pagination-btn" onclick="firstPage()">⇤ First</button>
-    <button id="prevPageBtn" class="pagination-btn" onclick="previousPage()">← Previous</button>
-    <span id="paginationInfo" class="pagination-info"></span>
-    <button id="nextPageBtn" class="pagination-btn" onclick="nextPage()">Next →</button>
-    <button id="lastPageBtn" class="pagination-btn" onclick="lastPage()">Last ⇥</button>
-  </div>
-
-  <div id="mainContent" class="mainContent"></div>
-
-  <div id="paginationControlsBottom" class="pagination-controls" style="display: none;">
-    <button id="firstPageBtnBottom" class="pagination-btn" onclick="firstPage()">⇤ First</button>
-    <button id="prevPageBtnBottom" class="pagination-btn" onclick="previousPage()">← Previous</button>
-    <span id="paginationInfoBottom" class="pagination-info"></span>
-    <button id="nextPageBtnBottom" class="pagination-btn" onclick="nextPage()">Next →</button>
-    <button id="lastPageBtnBottom" class="pagination-btn" onclick="lastPage()">Last ⇥</button>
-  </div>
-
-  <!-- Recent Updates Modal -->
-  <div id="dailyUploadsModal" class="modal-overlay" onclick="closeDailyUploadsModalOnOverlay(event)">
-    <div class="modal-content daily-modal-content" onclick="event.stopPropagation()">
-      <div class="modal-header">
-        <h2 class="modal-title">📋 Recent Updates</h2>
-        <button class="modal-close" onclick="closeDailyUploadsModal()" aria-label="Close">×</button>
-      </div>
-      <div class="daily-modal-body">
-        <div class="daily-date-selector">
-          <select id="dailyDateSelect" class="daily-date-select" onchange="renderDailyUploads()">
-          </select>
-        </div>
-        <div id="dailyStats" class="daily-stats"></div>
-        <div id="dailyUploadsList" class="daily-uploads-list"></div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Modal -->
-  <div id="modalOverlay" class="modal-overlay" onclick="closeModalOnOverlay(event)">
-    <div class="modal-content" onclick="event.stopPropagation()">
-      <div class="modal-header">
-        <h2 id="modalTitle" class="modal-title"></h2>
-        <button class="modal-close" onclick="closeModal()" aria-label="Close">×</button>
-      </div>
-      <div class="modal-body">
-        <div class="modal-left">
-          <div class="modal-image-container">
-            <div class="image-viewer">
-              <button id="prevImageBtn" class="image-nav-arrow image-nav-prev" onclick="previousImage()" aria-label="Previous image" style="display:none;">‹</button>
-              <img id="modalImage" src="" alt="" class="modal-image" />
-              <button id="nextImageBtn" class="image-nav-arrow image-nav-next" onclick="nextImage()" aria-label="Next image" style="display:none;">›</button>
-            </div>
-            <div id="imageInfo" class="image-info" style="display:none;">
-              <div id="imageCounter" class="image-counter"></div>
-              <div id="frameworkLabel" class="framework-label"></div>
-            </div>
-          </div>
-        </div>
-        <div class="modal-right">
-          <div id="modalStats" class="modal-stats"></div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <script type="text/javascript">
-    // Theme management
-    function toggleTheme() {
-      const body = document.body;
-      const currentTheme = body.getAttribute('data-theme');
-      const newTheme = currentTheme === 'light' ? 'dark' : 'light';
-      
-      if (newTheme === 'dark') {
-        body.removeAttribute('data-theme');
-      } else {
-        body.setAttribute('data-theme', newTheme);
-      }
-      
-      // Save preference
-      localStorage.setItem('theme', newTheme);
-    }
-
-    // Initialize theme from localStorage
-    function initTheme() {
-      const savedTheme = localStorage.getItem('theme');
-      if (savedTheme === 'light') {
-        document.body.setAttribute('data-theme', 'light');
-      }
-    }
-    
-    // Call on page load
-    initTheme();
-
-    // Pagination state
-    let currentPage = 1;
-    let totalPages = 1;
-    let filteredResults = [];
-
-    // Upload data (from data-hf-uploaded.js)
-    const uploadData = {
-      uploadDates: window.uploadDates || [],
-      data: window.uploadedData || {}
-    };
-
-    // Update the "Last Updated" label with the latest date
-    function updateLastUpdateLabel() {
-      const label = document.getElementById('lastUpdateLabel');
-      if (label && uploadData.uploadDates.length > 0) {
-        const d = new Date(uploadData.uploadDates[0]);
-        const formatted = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
-        label.textContent = `Updated: ${formatted}`;
-      }
-    }
-    
-    // Initialize the label
-    updateLastUpdateLabel();
-
-    function getPageSize() {
-      const value = document.getElementById('pageSize').value;
-      return value === 'all' ? Infinity : parseInt(value, 10);
-    }
-
-    function getSortBy() {
-      return document.getElementById('sortBy').value;
-    }
-
-    function getPeriodFilter() {
-      return document.getElementById('periodFilter').value;
-    }
-
-    function resetToFirstPage() {
-      currentPage = 1;
-    }
-
-    function getPersonUploadDate(personKey) {
-      const personData = uploadData.data[personKey];
-      return personData?.lastUpdated || null;
-    }
-
-    function isWithinPeriod(dateStr, period) {
-      if (!dateStr || period === 'all') return true;
-      
-      const date = new Date(dateStr);
-      const now = new Date();
-      
-      switch (period) {
-        case 'today':
-          const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate());
-          return date >= todayStart;
-        case 'week':
-          const weekAgo = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
-          return date >= weekAgo;
-        case 'month':
-          const monthAgo = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
-          return date >= monthAgo;
-        default:
-          return true;
-      }
-    }
-
-    function sortModels(models, sortBy) {
-      const sorted = [...models];
-      
-      switch (sortBy) {
-        case 'name-asc':
-          sorted.sort((a, b) => a.key.localeCompare(b.key));
-          break;
-        case 'name-desc':
-          sorted.sort((a, b) => b.key.localeCompare(a.key));
-          break;
-        case 'date-desc':
-          sorted.sort((a, b) => {
-            const dateA = getPersonUploadDate(a.key) || '1970-01-01';
-            const dateB = getPersonUploadDate(b.key) || '1970-01-01';
-            return dateB.localeCompare(dateA);
-          });
-          break;
-        case 'date-asc':
-          sorted.sort((a, b) => {
-            const dateA = getPersonUploadDate(a.key) || '2100-01-01';
-            const dateB = getPersonUploadDate(b.key) || '2100-01-01';
-            return dateA.localeCompare(dateB);
-          });
-          break;
-      }
-      
-      return sorted;
-    }
-
-    function updatePaginationControls() {
-      const controls = document.getElementById('paginationControls');
-      const info = document.getElementById('paginationInfo');
-      const prevBtn = document.getElementById('prevPageBtn');
-      const nextBtn = document.getElementById('nextPageBtn');
-      const controlsBottom = document.getElementById('paginationControlsBottom');
-      const infoBottom = document.getElementById('paginationInfoBottom');
-      const prevBtnBottom = document.getElementById('prevPageBtnBottom');
-      const nextBtnBottom = document.getElementById('nextPageBtnBottom');
-      const pageSize = getPageSize();
-
-      if (pageSize === Infinity || totalPages <= 1) {
-        controls.style.display = 'none';
-        controlsBottom.style.display = 'none';
-        return;
-      }
-
-      controls.style.display = 'flex';
-      controlsBottom.style.display = 'flex';
-      const pageText = `Page ${currentPage} of ${totalPages}`;
-      info.textContent = pageText;
-      infoBottom.textContent = pageText;
-      
-      const firstBtn = document.getElementById('firstPageBtn');
-      const lastBtn = document.getElementById('lastPageBtn');
-      const firstBtnBottom = document.getElementById('firstPageBtnBottom');
-      const lastBtnBottom = document.getElementById('lastPageBtnBottom');
-      
-      const isFirstPage = currentPage <= 1;
-      const isLastPage = currentPage >= totalPages;
-      
-      prevBtn.disabled = isFirstPage;
-      firstBtn.disabled = isFirstPage;
-      nextBtn.disabled = isLastPage;
-      lastBtn.disabled = isLastPage;
-      
-      prevBtnBottom.disabled = isFirstPage;
-      firstBtnBottom.disabled = isFirstPage;
-      nextBtnBottom.disabled = isLastPage;
-      lastBtnBottom.disabled = isLastPage;
-    }
-
-    function firstPage() {
-      if (currentPage > 1) {
-        currentPage = 1;
-        renderCurrentPage();
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      }
-    }
-
-    function previousPage() {
-      if (currentPage > 1) {
-        currentPage--;
-        renderCurrentPage();
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      }
-    }
-
-    function nextPage() {
-      if (currentPage < totalPages) {
-        currentPage++;
-        renderCurrentPage();
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      }
-    }
-
-    function lastPage() {
-      if (currentPage < totalPages) {
-        currentPage = totalPages;
-        renderCurrentPage();
-        window.scrollTo({ top: 0, behavior: 'smooth' });
-      }
-    }
-
-    function renderCurrentPage() {
-      const pageSize = getPageSize();
-      const contentDiv = document.getElementById('mainContent');
-      contentDiv.innerHTML = '';
-
-      let pageItems;
-      if (pageSize === Infinity) {
-        pageItems = filteredResults;
-      } else {
-        const start = (currentPage - 1) * pageSize;
-        const end = start + pageSize;
-        pageItems = filteredResults.slice(start, end);
-      }
-
-      pageItems.forEach((element) => {
-        const card = document.createElement('div');
-        card.className = 'element';
-        
-        const uploadDate = getPersonUploadDate(element.key);
-        const copyLinkHtml = `<span class="copy-link-icon" title="Copy link to ${escapeHtml(element.key)}" onclick="event.stopPropagation(); copyPersonLink('${escapeHtml(element.key)}', this)">🔗</span>`;
-        const googleSearchHtml = `<a href="https://www.google.com/search?q=${encodeURIComponent(element.key)}" target="_blank" class="google-search-icon" title="Search on Google" onclick="event.stopPropagation()">🔍</a>`;
-        const calendarHtml = uploadDate 
-          ? `<span class="model-calendar-icon" title="${getPersonUpdateTooltip(element.key)}">📅</span>` 
-          : '';
-        
-        card.innerHTML = `
-          <div class="model-name-row">
-            <span class="modelName" title="${escapeHtml(element.key)}">${element.key}</span>
-            ${copyLinkHtml}
-            ${googleSearchHtml}
-            ${calendarHtml}
-          </div>
-          <div class="imageContainer">
-            <img src="${element.imageUrl ?? unknownImage}" alt="${escapeHtml(element.key)}" />
-          </div>
-        `;
-        
-        card.addEventListener('click', () => openModal(element));
-        contentDiv.appendChild(card);
-      });
-
-      updatePaginationControls();
-    }
-
-    function getPersonUpdateTooltip(personKey) {
-      const personData = uploadData.data?.[personKey];
-      if (!personData || !personData.models) {
-        return 'No update info available';
-      }
-      
-      const typeNames = {
-        locon: 'SD LoCon',
-        lora: 'SD LoRA',
-        embedding: 'SD Embedding',
-        flux: 'Flux',
-        wan: 'WAN',
-        sdxl: 'SDXL',
-        qwen: 'Qwen',
-        zimage: 'ZImage'
-      };
-      
-      // Collect all dates with their model types
-      const dateEntries = [];
-      for (const [modelType, modelInfoArray] of Object.entries(personData.models)) {
-        if (Array.isArray(modelInfoArray) && modelInfoArray.length > 0) {
-          const mostRecent = modelInfoArray[0];
-          if (mostRecent?.uploadedAt) {
-            const dateStr = mostRecent.uploadedAt;
-            const d = new Date(dateStr);
-            const displayDate = `${d.getFullYear()}.${String(d.getMonth() + 1).padStart(2, '0')}.${String(d.getDate()).padStart(2, '0')}`;
-            const displayName = typeNames[modelType] || modelType;
-            dateEntries.push({ name: displayName, date: displayDate, sortDate: dateStr });
-          }
-        }
-      }
-      
-      if (dateEntries.length === 0) {
-        return 'No update info available';
-      }
-      
-      // Sort by date descending to find newest
-      dateEntries.sort((a, b) => b.sortDate.localeCompare(a.sortDate));
-      const newestDate = dateEntries[0].sortDate;
-      
-      const lines = ['Update History:'];
-      // Re-sort alphabetically for display
-      dateEntries.sort((a, b) => a.name.localeCompare(b.name));
-      
-      for (const entry of dateEntries) {
-        // Add ⭐ to newest date, but only if there's more than one entry
-        const isNewest = entry.sortDate === newestDate && dateEntries.length > 1;
-        const prefix = isNewest ? '⭐ ' : '';
-        lines.push(`${prefix}${entry.name}: ${entry.date}`);
-      }
-      
-      return lines.join('\n');
-    }
-
-    // Recent Updates Modal Functions
-    function openDailyUploadsModal() {
-      const modal = document.getElementById('dailyUploadsModal');
-      const dateSelect = document.getElementById('dailyDateSelect');
-      
-      // Populate date dropdown with sorted dates (newest first)
-      const dates = uploadData.uploadDates || [];
-      dateSelect.innerHTML = dates.map(date => {
-        const displayDate = new Date(date).toLocaleDateString('en-US', { 
-          weekday: 'long', 
-          year: 'numeric', 
-          month: 'long', 
-          day: 'numeric' 
-        });
-        return `<option value="${date}">${displayDate}</option>`;
-      }).join('');
-      
-      if (dates.length === 0) {
-        dateSelect.innerHTML = '<option value="">No upload data available</option>';
-      }
-      
-      modal.classList.add('active');
-      document.body.style.overflow = 'hidden';
-      
-      renderDailyUploads();
-    }
-
-    function closeDailyUploadsModal() {
-      const modal = document.getElementById('dailyUploadsModal');
-      modal.classList.remove('active');
-      document.body.style.overflow = '';
-    }
-
-    function closeDailyUploadsModalOnOverlay(event) {
-      if (event.target.id === 'dailyUploadsModal') {
-        closeDailyUploadsModal();
-      }
-    }
-
-    function renderDailyUploads() {
-      const dateSelect = document.getElementById('dailyDateSelect');
-      const listContainer = document.getElementById('dailyUploadsList');
-      const statsContainer = document.getElementById('dailyStats');
-      const selectedDate = dateSelect.value;
-      
-      if (!selectedDate || !uploadData.data) {
-        listContainer.innerHTML = '<div class="no-uploads-message">No update data available. Run the update scan first.</div>';
-        statsContainer.innerHTML = '';
-        return;
-      }
-      
-      // Find all people who had uploads on this date
-      const uploadsOnDate = [];
-      for (const [personKey, personData] of Object.entries(uploadData.data)) {
-        const modelsOnDate = [];
-        const models = personData.models || {};
-        for (const [modelType, modelInfoArray] of Object.entries(models)) {
-          if (Array.isArray(modelInfoArray)) {
-            for (const modelInfo of modelInfoArray) {
-              if (modelInfo.uploadedAt && modelInfo.uploadedAt.startsWith(selectedDate)) {
-                modelsOnDate.push(modelType);
-                break; // Only add each model type once
-              }
-            }
-          }
-        }
-        if (modelsOnDate.length > 0) {
-          uploadsOnDate.push({ person: personKey, models: modelsOnDate });
-        }
-      }
-      
-      // Sort alphabetically
-      uploadsOnDate.sort((a, b) => a.person.localeCompare(b.person));
-      
-      // Calculate stats
-      const totalPeople = uploadsOnDate.length;
-      const totalModels = uploadsOnDate.reduce((sum, item) => sum + item.models.length, 0);
-      
-      statsContainer.innerHTML = `
-        <div class="daily-stat">
-          <div class="daily-stat-value">${totalPeople}</div>
-          <div class="daily-stat-label">People</div>
-        </div>
-        <div class="daily-stat">
-          <div class="daily-stat-value">${totalModels}</div>
-          <div class="daily-stat-label">Models</div>
-        </div>
-      `;
-      
-      if (uploadsOnDate.length === 0) {
-        listContainer.innerHTML = '<div class="no-uploads-message">No updates found for this date.</div>';
-        return;
-      }
-      
-      listContainer.innerHTML = uploadsOnDate.map(item => `
-        <div class="daily-upload-item">
-          <div class="daily-upload-person-row">
-            <span class="daily-upload-person">${escapeHtml(item.person)}</span>
-            <a href="?personcode=${encodeURIComponent(item.person)}" 
-               target="_blank" 
-               class="person-modal-link" 
-               title="Open model in new tab" 
-               onclick="event.stopPropagation();">
-              🔗
-            </a>
-          </div>
-          <div class="daily-upload-models">
-            ${item.models.map(m => {
-              const link = getModelDownloadLink(item.person, m);
-              return `<a href="${link}" target="_blank" class="daily-upload-model" data-type="${m.toLowerCase()}" onclick="event.stopPropagation();">${m}</a>`;
-            }).join('')}
-          </div>
-        </div>
-      `).join('');
-    }
-
-    function getModelDownloadLink(personKey, modelType) {
-      const folderMap = {
-        locon: 'lycoris',
-        lora: 'small-loras',
-        embedding: 'embeddings',
-        flux: 'flux',
-        wan: 'wan',
-        sdxl: 'sdxl',
-        qwen: 'qwen',
-        zimage: 'zimage'
-      };
-      
-      const folder = folderMap[modelType.toLowerCase()];
-      if (!folder) {
-        return '#';
-      }
-      
-      // Get the filename from filenames data
-      const filenamesData = window.filenames || {};
-      const personFilenames = filenamesData[personKey];
-      const filenames = personFilenames?.[modelType.toLowerCase()];
-      
-      if (!filenames || filenames.length === 0) {
-        // Fallback to repo page
-        return `https://huggingface.co/malcolmrey/${folder}`;
-      }
-      
-      const filename = filenames[0];
-      // For WAN models, add wan2.1/ prefix
-      const filePath = modelType.toLowerCase() === 'wan' ? `wan2.1/${filename}` : filename;
-      
-      return `https://huggingface.co/malcolmrey/${folder}/resolve/main/${filePath}?download=true`;
-    }
-
-    function yesNo(value) {
-      if (value === undefined) {
-        return '<span class="status-icon status-unknown">❓</span>';
-      }
-      return value 
-        ? '<span class="status-icon status-available">✅</span>' 
-        : '<span class="status-icon status-unavailable">❌</span>';
-    }
-
-    function formatHFLink(link, hasHF) {
-      if (!link) return '';
-      return `<a href="${link}" target="_blank" class="hf-link">HF</a>`;
-    }
-
-    function formatModalHFLink(isAvailable, link) {
-      if (isAvailable && link) {
-        return `<a href="${link}" target="_blank" class="modal-hf-link">🤗 HuggingFace</a>`;
-      } else if (isAvailable) {
-        return `<span class="modal-hf-placeholder">🤗 HuggingFace</span>`;
-      }
-      return '';
-    }
-
-    function formatModalHFLinks(isAvailable, folder, filenames, isWan = false) {
-      if (!isAvailable || !filenames || filenames.length === 0) {
-        return isAvailable ? `<span class="modal-hf-placeholder">🤗 No files found</span>` : '';
-      }
-      
-      // Generate a link for each filename, wrapped in a container for vertical layout
-      const links = filenames.map((filename, index) => {
-        // For WAN models, add wan2.1/ prefix to the filename in the path
-        const filePath = isWan ? `wan2.1/${filename}` : filename;
-        const link = `https://huggingface.co/malcolmrey/${folder}/resolve/main/${filePath}?download=true`;
-        const versionLabel = filenames.length > 1 ? ` (v${index + 1})` : '';
-        return `<a href="${link}" target="_blank" class="modal-hf-link">🤗 HuggingFace${versionLabel}</a>`;
-      }).join('');
-      
-      return `<div class="modal-hf-links-container">${links}</div>`;
-    }
-
-    function openModal(element) {
-      const modal = document.getElementById('modalOverlay');
-      const modalTitle = document.getElementById('modalTitle');
-      const modalImage = document.getElementById('modalImage');
-      const modalStats = document.getElementById('modalStats');
-
-      // Generate HuggingFace links using actual filenames from data-filenames.js
-      const personName = element.key;
-      const filenamesData = window.filenames || {};
-      const personFilenames = filenamesData[personName] || {};
-
-      modalTitle.textContent = element.key;
-      modalImage.src = element.imageUrl ?? unknownImage;
-      modalImage.alt = element.key;
-
-      modalStats.innerHTML = `
-        <div class="modal-stat-row">
-          <span class="modal-stat-label">${yesNo(element.locon)} SD LoCon</span>
-          <span class="modal-stat-value">
-            ${formatModalHFLinks(element.locon, 'lycoris', personFilenames.locon)}
-          </span>
-        </div>
-        <div class="modal-stat-row">
-          <span class="modal-stat-label">${yesNo(element.lora)} SD LoRA</span>
-          <span class="modal-stat-value">
-            ${formatModalHFLinks(element.lora, 'small-loras', personFilenames.lora)}
-          </span>
-        </div>
-        <div class="modal-stat-row">
-          <span class="modal-stat-label">${yesNo(element.embedding)} SD Embedding</span>
-          <span class="modal-stat-value">
-            ${formatModalHFLinks(element.embedding, 'embeddings', personFilenames.embedding)}
-          </span>
-        </div>
-        <div class="modal-stat-row">
-          <span class="modal-stat-label">${yesNo(element.flux)} Flux</span>
-          <span class="modal-stat-value">
-            ${formatModalHFLinks(element.flux, 'flux', personFilenames.flux)}
-          </span>
-        </div>
-        <div class="modal-stat-row">
-          <span class="modal-stat-label">${yesNo(element.wan)} WAN</span>
-          <span class="modal-stat-value">
-            ${formatModalHFLinks(element.wan, 'wan', personFilenames.wan, true)}
-          </span>
-        </div>
-        <div class="modal-stat-row">
-          <span class="modal-stat-label">${yesNo(element.sdxl)} SDXL</span>
-          <span class="modal-stat-value">
-            ${formatModalHFLinks(element.sdxl, 'sdxl', personFilenames.sdxl)}
-          </span>
-        </div>
-        <div class="modal-stat-row">
-          <span class="modal-stat-label">${yesNo(element.zimage)} ZImage</span>
-          <span class="modal-stat-value">
-            ${formatModalHFLinks(element.zimage, 'zimage', personFilenames.zimage)}
-          </span>
-        </div>
-        <div class="modal-stat-row">
-          <span class="modal-stat-label">${yesNo(element.qwen)} Qwen</span>
-          <span class="modal-stat-value">
-            ${formatModalHFLinks(element.qwen, 'qwen', personFilenames.qwen)}
-          </span>
-        </div>
-      `;
-
-      modal.classList.add('active');
-      document.body.style.overflow = 'hidden';
-    }
-
-    function closeModal() {
-      const modal = document.getElementById('modalOverlay');
-      modal.classList.remove('active');
-      document.body.style.overflow = '';
-    }
-
-    function closeModalOnOverlay(event) {
-      if (event.target.id === 'modalOverlay') {
-        closeModal();
-      }
-    }
-
-    // Close modal on ESC key
-    document.addEventListener('keydown', function(event) {
-      if (event.key === 'Escape') {
-        closeModal();
-      }
-    });
-
-    const notMatched = {
-      lycoris: [],
-      lora: [],
-      embedding: [],
-      flux: [],
-      wan: [],
-      sdxl: [],
-      qwen: [],
-    };
-
-    models.lycorises.forEach((lycoris) => {
-      const key = prepareKey(lycoris.name);
-      if (presence[key] !== undefined) {
-        presence[key].loconCivitai = true;
-        setImageUrl(key, lycoris.imageUrl);
-        presence[key].loconCivitaiLink = lycoris.url;
-      } else if (!isKnownSkippableKey(key)) {
-        notMatched.lycoris.push(key);
-      }
-    });
-
-    models.loras.forEach((lora) => {
-      const key = prepareKey(lora.name);
-      if (presence[key] !== undefined) {
-        presence[key].loraCivitai = true;
-        setImageUrl(key, lora.imageUrl);
-        presence[key].loraCivitaiLink = lora.url;
-      } else if (!isKnownSkippableKey(key)) {
-        notMatched.lora.push(key);
-      }
-    });
-
-    models.embeddings.forEach((embedding) => {
-      const key = prepareKey(embedding.name);
-      if (presence[key] !== undefined) {
-        presence[key].embeddingCivitai = true;
-        setImageUrl(key, embedding.imageUrl);
-        presence[key].embeddingCivitaiLink = embedding.url;
-      } else if (!isKnownSkippableKey(key)) {
-        notMatched.embedding.push(key);
-      }
-    });
-
-    models.fluxes.forEach((flux) => {
-      const key = prepareKey(flux.name);
-      if (presence[key] !== undefined) {
-        presence[key].fluxCivitai = true;
-        setImageUrl(key, flux.imageUrl);
-        presence[key].fluxCivitaiLink = flux.url;
-      } else if (!isKnownSkippableKey(key)) {
-        notMatched.flux.push(key);
-      }
-    });
-
-    models.wans.forEach((wan) => {
-      const key = prepareKey(wan.name);
-      if (presence[key] !== undefined) {
-        presence[key].wanCivitai = true;
-        setImageUrl(key, wan.imageUrl);
-        presence[key].wanCivitaiLink = wan.url;
-      } else if (!isKnownSkippableKey(key)) {
-        notMatched.wan.push(key);
-      }
-    });
-
-    models.sdxls.forEach((sdxl) => {
-      const key = prepareKey(sdxl.name);
-      if (presence[key] !== undefined) {
-        presence[key].sdxlCivitai = true;
-        setImageUrl(key, sdxl.imageUrl);
-        presence[key].sdxlCivitaiLink = sdxl.url;
-      } else if (!isKnownSkippableKey(key)) {
-        notMatched.sdxl.push(key);
-      }
-    });
-
-    models.qwens.forEach((qwen) => {
-      const key = prepareKey(qwen.name);
-      if (presence[key] !== undefined) {
-        presence[key].qwenCivitai = true;
-        setImageUrl(key, qwen.imageUrl);
-        presence[key].qwenCivitaiLink = qwen.url;
-      } else if (!isKnownSkippableKey(key)) {
-        notMatched.qwen.push(key);
-      }
-    });
-    
-    console.log(notMatched);
-
-    // Set primary imageUrl based on WAN > Civitai > HF samples priority
-    for (const key in presence) {
-      const personImages = buildImagesList(key, presence[key]);
-      if (personImages.length > 0) {
-        // Use the first image from our prioritized list (WAN first, then Civitai by type, then others)
-        presence[key].imageUrl = personImages[0].url;
-      }
-    }
-
-    const presenceModels = [];
-    for (const property in presence) {
-      const element = {
-        key: property,
-        locon: presence[property].locon,
-        lora: presence[property].lora,
-        embedding: presence[property].embedding,
-        flux: presence[property].flux,
-        wan: presence[property].wan,
-        sdxl: presence[property].sdxl,
-        zimage: presence[property].zimage,
-        qwen: presence[property].qwen,
-        mega: undefined,
-        imageUrl: presence[property]?.imageUrl ?? undefined,
-        loconHFLink: presence[property]?.loconHFLink,
-        loraHFLink: presence[property]?.loraHFLink,
-        embeddingHFLink: presence[property]?.embeddingHFLink,
-        fluxHFLink: presence[property]?.fluxHFLink,
-        wanHFLink: presence[property]?.wanHFLink,
-        sdxlHFLink: presence[property]?.sdxlHFLink,
-        zimageHFLink: presence[property]?.zimageHFLink,
-        qwenHFLink: presence[property]?.qwenHFLink,
-      };
-      presenceModels.push(element);
-    }
-
-    function searchModelsModern(value) {
-      const lowerCaseValue = value.toLowerCase();
-      const sortBy = getSortBy();
-      const periodFilter = getPeriodFilter();
-      const pageSize = getPageSize();
-
-      // Filter by search term and type
-      let filtered = presenceModels.filter((element) => {
-        return (
-          (element.key.toLowerCase().includes(lowerCaseValue) || value === '*') &&
-          filterByType(element)
-        );
-      });
-
-      // Filter by period
-      if (periodFilter !== 'all') {
-        filtered = filtered.filter((element) => {
-          const uploadDate = getPersonUploadDate(element.key);
-          return isWithinPeriod(uploadDate, periodFilter);
-        });
-      }
-
-      // Sort
-      filtered = sortModels(filtered, sortBy);
-
-      // Store for pagination
-      filteredResults = filtered;
-      
-      // Calculate total pages
-      if (pageSize === Infinity) {
-        totalPages = 1;
-      } else {
-        totalPages = Math.ceil(filtered.length / pageSize);
-      }
-      
-      // Ensure current page is valid
-      if (currentPage > totalPages) {
-        currentPage = Math.max(1, totalPages);
-      }
-
-      document.getElementById('found').value = filtered.length;
-
-      renderCurrentPage();
-    }
-
-    // Override the searchModels function
-    window.searchModels = searchModelsModern;
-
-    // Copy person link to clipboard
-    function copyPersonLink(personKey, iconElement) {
-      const url = new URL(window.location.href);
-      url.searchParams.set('personcode', personKey);
-      
-      navigator.clipboard.writeText(url.toString()).then(() => {
-        // Visual feedback
-        iconElement.classList.add('copied');
-        iconElement.title = 'Link copied!';
-        setTimeout(() => {
-          iconElement.classList.remove('copied');
-          iconElement.title = `Copy link to ${personKey}`;
-        }, 2000);
-      }).catch(err => {
-        console.error('Failed to copy link:', err);
-        alert('Failed to copy link to clipboard');
-      });
-    }
-
-    // Check for URL parameters and auto-search/open modal
-    function checkUrlParams() {
-      const urlParams = new URLSearchParams(window.location.search);
-      const personcode = urlParams.get('personcode');
-      
-      if (personcode) {
-        // Set the search value
-        document.getElementById('search').value = personcode;
-        
-        // Perform the search
-        searchModels(personcode);
-        
-        // Try to find and open the modal for the person
-        setTimeout(() => {
-          const lowerPersoncode = personcode.toLowerCase();
-          const matchingPerson = presenceModels.find(element => 
-            element.key.toLowerCase() === lowerPersoncode
-          );
-          
-          if (matchingPerson) {
-            openModal(matchingPerson);
-          }
-        }, 100);
-      } else {
-        searchModels(getCurrentSearchValue());
-      }
-    }
-
-    checkUrlParams();
-
-    // Image navigation for modal
-    let currentImages = [];
-    let currentImageIndex = 0;
-    let currentPersonKey = '';
-
-    function buildImagesList(personKey, personData) {
-      const images = [];
-      const hfImages = window.hfImages || {};
-      const personHFImages = hfImages[personKey] || {};
-      const civitaiTypMapping = { 'LoCon': 'LyCORIS', 'LORA': 'Lora', 'TextualInversion': 'Embedding' };
-
-      // 1. Add ZImage samples first (from HF samples data) - highest priority
-      if (personHFImages.ZImage) {
-        images.push(...personHFImages.ZImage);
-      }
-
-      // 2. Add WAN samples second (from HF samples data)
-      if (personHFImages.WAN) {
-        images.push(...personHFImages.WAN);
-      }
-
-      // 3. Add Civitai images by type
-      // Check each framework in personData for Civitai models
-      const checkCivitaiImage = (framework, civitaiModels) => {
-        if (!civitaiModels) return;
-        const civitaiModel = civitaiModels.find(m => {
-          const normalizedName = m.name.toLowerCase().replaceAll(' ', '').replaceAll('-', '').replaceAll("'", '');
-          return normalizedName === personKey;
-        });
-        if (civitaiModel && civitaiModel.imageUrl) {
-          const mappedFramework = civitaiTypMapping[civitaiModel.type] || civitaiModel.type;
-          if (mappedFramework !== 'Civitai') {
-            images.push({ url: civitaiModel.imageUrl, framework: mappedFramework });
-          }
-        }
-      };
-
-      checkCivitaiImage('LyCORIS', models.lycorises);
-      checkCivitaiImage('Lora', models.loras);
-      checkCivitaiImage('Embedding', models.embeddings);
-      checkCivitaiImage('Flux', models.fluxes);
-      checkCivitaiImage('WAN', models.wans);
-      checkCivitaiImage('SDXL', models.sdxls);
-      checkCivitaiImage('Qwen', models.qwens);
-
-      // 4. Add other HF samples (excluding ZImage and WAN which are already added)
-      const frameworkOrder = ['LyCORIS', 'Lora', 'Embedding', 'Flux', 'SDXL', 'Qwen'];
-      for (const fw of frameworkOrder) {
-        if (personHFImages[fw]) {
-          images.push(...personHFImages[fw]);
-        }
-      }
-
-      return images;
-    }
-
-    function updateImageDisplay() {
-      const modalImage = document.getElementById('modalImage');
-      const imageCounter = document.getElementById('imageCounter');
-      const frameworkLabel = document.getElementById('frameworkLabel');
-      const imageInfo = document.getElementById('imageInfo');
-      const prevBtn = document.getElementById('prevImageBtn');
-      const nextBtn = document.getElementById('nextImageBtn');
-
-      if (currentImages.length > 0) {
-        const currentImage = currentImages[currentImageIndex];
-        modalImage.src = currentImage.url;
-        
-        if (currentImages.length > 1) {
-          imageCounter.textContent = `${currentImageIndex + 1} / ${currentImages.length}`;
-          imageInfo.style.display = 'flex';
-          prevBtn.style.display = 'flex';
-          nextBtn.style.display = 'flex';
-        } else {
-          imageCounter.textContent = '';
-          prevBtn.style.display = 'none';
-          nextBtn.style.display = 'none';
-          imageInfo.style.display = 'flex';
-        }
-        
-        frameworkLabel.textContent = currentImage.framework;
-        frameworkLabel.setAttribute('data-framework', currentImage.framework);
-      }
-    }
-
-    function previousImage() {
-      if (currentImages.length > 1) {
-        currentImageIndex = (currentImageIndex - 1 + currentImages.length) % currentImages.length;
-        updateImageDisplay();
-      }
-    }
-
-    function nextImage() {
-      if (currentImages.length > 1) {
-        currentImageIndex = (currentImageIndex + 1) % currentImages.length;
-        updateImageDisplay();
-      }
-    }
-
-    // Update openModal to use image navigation
-    const originalOpenModal = openModal;
-    openModal = function(element) {
-      currentPersonKey = element.key;
-      currentImages = buildImagesList(element.key, element);
-      currentImageIndex = 0;
-      
-      originalOpenModal(element);
-      
-      if (currentImages.length > 0) {
-        updateImageDisplay();
-      }
-    };
-
-    // Keyboard navigation
-    document.addEventListener('keydown', function(e) {
-      const modal = document.getElementById('modalOverlay');
-      const dailyModal = document.getElementById('dailyUploadsModal');
-      
-      if (e.key === 'Escape') {
-        if (dailyModal.classList.contains('active')) {
-          closeDailyUploadsModal();
-        } else if (modal.classList.contains('active')) {
-          closeModal();
-        }
-      }
-      
-      if (modal.classList.contains('active')) {
-        if (e.key === 'ArrowLeft') {
-          e.preventDefault();
-          previousImage();
-        } else if (e.key === 'ArrowRight') {
-          e.preventDefault();
-          nextImage();
-        }
-      }
-    });
-  </script>
-</body>
-</html>
+</html>
\ No newline at end of file
