Spaces:

malcolmrey
/

browser

Running

App Files Files Community

malcolmrey commited on 15 days ago

Commit

4844f3f

verified ·

1 Parent(s): 06fca79

Upload index.html

Browse files

Files changed (1) hide show

index.html +1378 -335

index.html CHANGED Viewed

@@ -1,335 +1,1378 @@
-<!DOCTYPE html>
-<head>
-  <script type="text/javascript" src="data-civitai.js"></script>
-  <style>
-    body {
-      color: whitesmoke;
-      background-color: rgb(13, 46, 11);
-    }
-    .mainContent {
-      position: absolute;
-      margin-top: 20px;
-      display: flex;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-    .searchBox {
-      margin-top: 15px;
-      margin-left: 20px;
-    }
-    .found {
-      width: 30px;
-    }
-    .element {
-      padding: 0;
-      margin: 3px;
-      border: 1px solid rgb(5, 90, 0);
-      display: inline-block;
-      position: relative;
-      width: 192px;
-      height: 283px;
-    }
-    .element .modelType {
-      position: absolute;
-      padding: 2px;
-      padding-left: 4px;
-      padding-right: 4px;
-      right: 0;
-      background-color: rgba(0, 0, 0, 0.5);
-      bottom: 22px;
-    }
-    .element .modelName {
-      background-color: rgba(50, 217, 8, 0.15);
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      padding-left: 2px;
-    }
-    .element .modelCreator {
-      position: absolute;
-      background-color: rgba(0, 0, 0, 0.5);
-      padding: 2px;
-      padding-left: 4px;
-      padding-right: 4px;
-      bottom: 22px;
-    }
-    .statsBox {
-      position: relative;
-      top: -26px;
-      height: 22px;
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-    .statsBox .statsDownloadCount {
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-    .statsBox .statsFavoriteCount {
-      position: absolute;
-      top: 0;
-      left: 52px;
-    }
-    .statsBox .statsCommentCount {
-      position: absolute;
-      top: 0;
-      left: 105px;
-    }
-    .statsBox .statsRating {
-      position: absolute;
-      top: 0;
-      left: 141px;
-    }
-  </style>
-</head>
-<body>
-  <input
-    class="searchBox"
-    id="search"
-    type="text"
-    onkeyup="javascript:searchModels(this.value);"
-    placeholder="search"
-  />
-  <button
-    onclick="javascript:clearCurrentSearchValue(); javascript:searchModels(getCurrentSearchValue())"
-  >
-    Clear
-  </button>
-  Found: <input class="found" id="found" type="text" readonly />
-  <label>
-    <input
-      id="groupByType"
-      type="checkbox"
-      onclick="javascript:searchModels(getCurrentSearchValue());"
-    />
-    Group
-  </label>
-  <label>
-    <input
-      id="selectedLora"
-      type="checkbox"
-      onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
-      checked
-    />
-    LoRA
-  </label>
-  <label>
-    <input
-      id="selectedLocon"
-      type="checkbox"
-      onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
-      checked
-    />
-    LoCon
-  </label>
-  <label>
-    <input
-      id="selectedEmbedding"
-      type="checkbox"
-      onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
-      checked
-    />
-    Embedding
-  </label>
-  <label>
-    <input
-      id="selectedCheckpoint"
-      type="checkbox"
-      onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
-    />
-    Checkpoint
-  </label>
-  <label>
-    <input
-      id="selectedFlux"
-      type="checkbox"
-      onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
-    />
-    Flux
-  </label>
-  <label>
-    <input
-      id="selectedWan"
-      type="checkbox"
-      onclick="javascript:regenerateData(); searchModels(getCurrentSearchValue());"
-    />
-    WAN
-  </label>
-  <div id="mainContent" class="mainContent"></div>
-  <script type="text/javascript">
-    let allElements = [
-      ...models.loras,
-      ...models.checkpoints,
-      ...models.lycorises,
-      ...models.embeddings,
-      ...models.fluxes,
-      ...models.wans,
-    ].sort(compare);
-    let allElementsGroupped = [
-      ...models.loras.sort(compare),
-      ...models.checkpoints.sort(compare),
-      ...models.lycorises.sort(compare),
-      ...models.embeddings.sort(compare),
-      ...models.fluxes.sort(compare),
-      ...models.wans.sort(compare),
-    ];
-    const creator = 'malcolmrey';
-    function regenerateData() {
-      allElements = [
-        ...(document.getElementById('selectedLora').checked
-          ? models.loras
-          : []),
-        ...(document.getElementById('selectedCheckpoint').checked
-          ? models.checkpoints
-          : []),
-        ...(document.getElementById('selectedLocon').checked
-          ? models.lycorises
-          : []),
-        ...(document.getElementById('selectedEmbedding').checked
-          ? models.embeddings
-          : []),
-        ...(document.getElementById('selectedFlux').checked
-          ? models.fluxes
-          : []),
-        ...(document.getElementById('selectedWan').checked
-          ? models.wans
-          : []),
-      ].sort(compare);
-      allElementsGroupped = [
-        ...(document.getElementById('selectedLora').checked
-          ? models.loras
-          : []
-        ).sort(compare),
-        ...(document.getElementById('selectedCheckpoint').checked
-          ? models.checkpoints
-          : []
-        ).sort(compare),
-        ...(document.getElementById('selectedLocon').checked
-          ? models.lycorises
-          : []
-        ).sort(compare),
-        ...(document.getElementById('selectedEmbedding').checked
-          ? models.embeddings
-          : []
-        ).sort(compare),
-        ...(document.getElementById('selectedFlux').checked
-          ? models.fluxes
-          : []
-        ).sort(compare),
-        ...(document.getElementById('selectedWan').checked
-          ? models.wans
-          : []
-        ).sort(compare),
-      ];
-    }
-    function clearCurrentSearchValue() {
-      document.getElementById('search').value = '';
-    }
-    function getCurrentSearchValue() {
-      return document.getElementById('search').value;
-    }
-    function escapeHtml(unsafe) {
-      return unsafe
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')
-        .replace(/"/g, '&quot;')
-        .replace(/'/g, '&#039;');
-    }
-    function formatNumber(num) {
-      return Math.abs(num) > 999
-        ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + 'k'
-        : Math.sign(num) * Math.abs(num);
-    }
-    function compare(a, b) {
-      if (a.name < b.name) {
-        return -1;
-      }
-      if (a.name > b.name) {
-        return 1;
-      }
-      return 0;
-    }
-    function searchModels(value) {
-      const lowerCaseValue = value.toLowerCase();
-      const elementsToFilter = document.getElementById('groupByType').checked
-        ? allElementsGroupped
-        : allElements;
-      const filtered = elementsToFilter.filter((element) => {
-        return (
-          element.name.toLowerCase().includes(lowerCaseValue) || value === '*'
-        );
-      });
-      document.getElementById('found').value = filtered.length;
-      let htmlContent = '';
-      filtered.forEach((element) => {
-        htmlContent += `<div class="element">
-        <div class="modelName" title="${escapeHtml(element.name)}">${
-          element.name
-        }</div>
-        <div class="modelType">${
-          element.type === 'TextualInversion' ? 'Embedding' : element.type
-        }</div>
-        <div class="modelCreator" title="${creator}">${creator}</div>
-        <div><a href='${element.url}' target='_blank'><img src='${
-          element.imageUrl
-        }' height="264" width="192" title='[${element.id}] ${
-          element.url
-        }'/></a></div>
-        <div class="statsBox">
-            <div class="statsDownloadCount" title="⬇️${
-              element.stats.downloadCount
-            }">⬇️${formatNumber(element.stats.downloadCount)}</div>
-            <div class="statsFavoriteCount" title="❤️${
-              element.stats.favoriteCount
-            }">❤️${element.stats.favoriteCount}</div>
-            <div class="statsCommentCount" title="📃${
-              element.stats.commentCount
-            }">📃${element.stats.commentCount}</div>
-            <div class="statsRating" title="📈${
-              element.stats.ratingCount
-            } / ⭐${element.stats.rating}">⭐${element.stats.rating}</div>
-        </div>
-    </div>`;
-      });
-      const contentDiv = document.getElementById('mainContent');
-      contentDiv.innerHTML = htmlContent;
-    }
-    searchModels(getCurrentSearchValue());
-  </script>
-</body>

+<!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="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>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+      color: #f1f5f9;
+      min-height: 100vh;
+      padding: 20px;
+    }
+    a {
+      text-decoration: none;
+      color: #60a5fa;
+      transition: color 0.2s;
+    }
+    a:hover {
+      color: #93c5fd;
+    }
+    .header {
+      max-width: 1400px;
+      margin: 0 auto 30px;
+      background: rgba(30, 41, 59, 0.7);
+      backdrop-filter: blur(10px);
+      border-radius: 16px;
+      padding: 24px;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+      border: 1px solid rgba(148, 163, 184, 0.1);
+    }
+    .header h1 {
+      font-size: 28px;
+      font-weight: 700;
+      margin-bottom: 12px;
+      background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      text-align: center;
+    }
+    .profile-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 16px;
+      justify-content: center;
+      align-items: center;
+      margin-bottom: 12px;
+      padding: 12px;
+      background: rgba(15, 23, 42, 0.4);
+      border-radius: 8px;
+    }
+    .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;
+    }
+    .profile-links a:hover {
+      background: rgba(96, 165, 250, 0.2);
+      transform: translateY(-1px);
+    }
+    .last-update {
+      text-align: center;
+      font-size: 13px;
+      color: #94a3b8;
+      margin-bottom: 16px;
+    }
+    .controls {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 12px;
+      align-items: center;
+      justify-content: center;
+    }
+    .search-container {
+      flex: 1 1 auto;
+      min-width: 300px;
+      max-width: 600px;
+      position: relative;
+    }
+    .search-container input[type="text"] {
+      width: 100%;
+      padding: 12px 16px;
+      padding-right: 100px;
+      background: rgba(15, 23, 42, 0.6);
+      border: 2px solid rgba(148, 163, 184, 0.2);
+      border-radius: 12px;
+      color: #f1f5f9;
+      font-size: 15px;
+      font-family: inherit;
+      transition: all 0.3s;
+    }
+    .search-container input[type="text"]:focus {
+      outline: none;
+      border-color: #60a5fa;
+      background: rgba(15, 23, 42, 0.8);
+      box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
+    }
+    .search-container input[type="text"]::placeholder {
+      color: #64748b;
+    }
+    .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;
+    }
+    .clear-btn:hover {
+      background: rgba(239, 68, 68, 0.3);
+      color: #fecaca;
+    }
+    .mode-select {
+      padding: 12px 40px 12px 16px;
+      background: rgba(15, 23, 42, 0.6);
+      border: 2px solid rgba(148, 163, 184, 0.2);
+      border-radius: 12px;
+      color: #f1f5f9;
+      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;
+    }
+    .mode-select::-ms-expand {
+      display: none;
+    }
+    .mode-select:focus {
+      outline: none;
+      border-color: #60a5fa;
+      box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
+    }
+    .mode-select option {
+      background: #0f172a;
+      color: #e2e8f0;
+      padding: 16px 20px;
+      font-size: 15px;
+      font-weight: 500;
+      border: none;
+      outline: none;
+    }
+    .mode-select option:hover {
+      background: linear-gradient(90deg, rgba(96, 165, 250, 0.15) 0%, rgba(96, 165, 250, 0.05) 100%);
+      color: #60a5fa;
+      font-weight: 600;
+    }
+    .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;
+    }
+    .checkbox-group {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+    }
+    .checkbox-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      background: rgba(15, 23, 42, 0.4);
+      border: 2px solid rgba(148, 163, 184, 0.2);
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 0.2s;
+      font-size: 14px;
+      font-weight: 500;
+      user-select: none;
+    }
+    .checkbox-label:hover {
+      background: rgba(15, 23, 42, 0.6);
+      border-color: rgba(148, 163, 184, 0.3);
+    }
+    .checkbox-label input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: #60a5fa;
+    }
+    .checkbox-label input[type="checkbox"]:checked + span {
+      color: #60a5fa;
+    }
+    .stats-bar {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 20px;
+      background: rgba(15, 23, 42, 0.6);
+      border-radius: 10px;
+      font-size: 14px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+    .stats-bar label {
+      color: #94a3b8;
+    }
+    .stats-bar input {
+      width: 70px;
+      padding: 6px 10px;
+      background: rgba(30, 41, 59, 0.8);
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      border-radius: 6px;
+      color: #60a5fa;
+      text-align: center;
+      font-weight: 700;
+      font-size: 16px;
+    }
+    .mainContent {
+      max-width: 1400px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+      gap: 20px;
+      padding: 0 4px;
+    }
+    .element {
+      background: rgba(30, 41, 59, 0.6);
+      backdrop-filter: blur(10px);
+      border-radius: 16px;
+      overflow: hidden;
+      border: 1px solid rgba(148, 163, 184, 0.1);
+      transition: all 0.3s;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+      display: flex;
+      flex-direction: column;
+      cursor: pointer;
+    }
+    .element:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
+      border-color: rgba(96, 165, 250, 0.3);
+    }
+    .element .modelName {
+      padding: 14px 16px;
+      background: rgba(15, 23, 42, 0.8);
+      font-weight: 600;
+      font-size: 14px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+      color: #e2e8f0;
+    }
+    .element .imageContainer {
+      position: relative;
+      width: 100%;
+      padding-top: 137.5%; /* 192/264 aspect ratio */
+      overflow: hidden;
+      background: rgba(15, 23, 42, 0.6);
+    }
+    .element .imageContainer img {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.3s;
+    }
+    .element:hover .imageContainer img {
+      transform: scale(1.05);
+    }
+    .statsBox {
+      padding: 16px;
+      background: rgba(15, 23, 42, 0.8);
+      font-size: 13px;
+      line-height: 1.8;
+      flex: 1;
+      display: none; /* Hidden in main view */
+    }
+    .statsBox .stat-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+    }
+    .statsBox .stat-row:last-child {
+      margin-bottom: 0;
+    }
+    .statsBox .stat-label {
+      font-weight: 600;
+      color: #94a3b8;
+      min-width: 75px;
+    }
+    .statsBox .stat-value {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    /* Modal Styles */
+    .modal-overlay {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0, 0, 0, 0.8);
+      backdrop-filter: blur(8px);
+      z-index: 1000;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      animation: fadeIn 0.2s ease-out;
+    }
+    .modal-overlay.active {
+      display: flex;
+    }
+    .modal-content {
+      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+      border-radius: 20px;
+      max-width: 1100px;
+      width: 100%;
+      max-height: 90vh;
+      overflow: hidden;
+      position: relative;
+      border: 2px solid rgba(148, 163, 184, 0.2);
+      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+      animation: slideUp 0.3s ease-out;
+      display: flex;
+      flex-direction: column;
+    }
+    @keyframes slideUp {
+      from {
+        opacity: 0;
+        transform: translateY(30px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .modal-header {
+      padding: 24px;
+      border-bottom: 1px solid rgba(148, 163, 184, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: sticky;
+      top: 0;
+      background: rgba(30, 41, 59, 0.95);
+      backdrop-filter: blur(10px);
+      z-index: 10;
+    }
+    .modal-title {
+      font-size: 24px;
+      font-weight: 700;
+      color: #f1f5f9;
+      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);
+    }
+    .modal-body {
+      display: flex;
+      flex: 1;
+      overflow: hidden;
+      gap: 0;
+    }
+    .modal-left {
+      flex: 0 0 45%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: rgba(15, 23, 42, 0.6);
+      padding: 24px;
+    }
+    .modal-image-container {
+      width: 100%;
+      border-radius: 12px;
+      overflow: hidden;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+      max-height: 100%;
+    }
+    .modal-image-container img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+    .modal-right {
+      flex: 1;
+      padding: 24px;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    .modal-stats {
+      display: grid;
+      gap: 12px;
+    }
+    .modal-stat-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      background: rgba(15, 23, 42, 0.6);
+      border-radius: 12px;
+      border: 1px solid rgba(148, 163, 184, 0.1);
+      transition: all 0.2s;
+    }
+    .modal-stat-row:hover {
+      background: rgba(15, 23, 42, 0.8);
+      border-color: rgba(148, 163, 184, 0.2);
+    }
+    .modal-stat-label {
+      font-weight: 600;
+      font-size: 15px;
+      color: #cbd5e1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .modal-stat-value {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      flex-wrap: wrap;
+    }
+    .modal-hf-links-container {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-left: 8px;
+    }
+    .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;
+    }
+    .modal-hf-link:hover {
+      background: rgba(255, 107, 0, 0.25);
+      border-color: rgba(255, 107, 0, 0.5);
+      transform: translateY(-1px);
+      color: #ffb380;
+    }
+    .modal-hf-placeholder {
+      padding: 6px 12px;
+      background: rgba(100, 116, 139, 0.15);
+      border: 1px solid rgba(100, 116, 139, 0.3);
+      border-radius: 8px;
+      font-size: 12px;
+      font-weight: 600;
+      color: #94a3b8;
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      opacity: 0.5;
+    }
+    .hf-logo {
+      width: 16px;
+      height: 16px;
+      display: inline-block;
+    }
+    @media (max-width: 900px) {
+      .modal-body {
+        flex-direction: column;
+      }
+      .modal-left {
+        flex: 0 0 auto;
+        max-height: 400px;
+      }
+      .modal-right {
+        flex: 1;
+      }
+    }
+    .status-icon {
+      font-size: 16px;
+      display: inline-block;
+    }
+    .status-available {
+      color: #4ade80;
+    }
+    .status-unavailable {
+      color: #f87171;
+    }
+    .status-unknown {
+      color: #fbbf24;
+    }
+    .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: #60a5fa;
+      transition: all 0.2s;
+      display: inline-block;
+    }
+    .hf-link:hover {
+      background: rgba(96, 165, 250, 0.2);
+      border-color: rgba(96, 165, 250, 0.4);
+    }
+    @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;
+      }
+    }
+    /* Loading animation */
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(20px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    .element {
+      animation: fadeIn 0.4s ease-out;
+    }
+    /* Scrollbar styling */
+    ::-webkit-scrollbar {
+      width: 12px;
+    }
+    ::-webkit-scrollbar-track {
+      background: rgba(15, 23, 42, 0.5);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(148, 163, 184, 0.3);
+      border-radius: 6px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(148, 163, 184, 0.5);
+    }
+    /* Image viewer with navigation */
+    .image-viewer {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+    .modal-image {
+      max-width: 100%;
+      max-height: 70vh;
+      object-fit: contain;
+      border-radius: 8px;
+    }
+    .image-nav-arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background: rgba(15, 23, 42, 0.8);
+      border: 2px solid rgba(96, 165, 250, 0.3);
+      color: #60a5fa;
+      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;
+    }
+    .image-nav-arrow:hover {
+      background: rgba(96, 165, 250, 0.3);
+      border-color: #60a5fa;
+      color: #93c5fd;
+      transform: translateY(-50%) scale(1.1);
+      box-shadow: 0 0 20px rgba(96, 165, 250, 0.5);
+    }
+    .image-nav-arrow:active {
+      transform: translateY(-50%) scale(0.95);
+    }
+    .image-nav-prev {
+      left: 10px;
+    }
+    .image-nav-next {
+      right: 10px;
+    }
+    .image-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 12px;
+      padding: 8px 12px;
+      background: rgba(15, 23, 42, 0.6);
+      border-radius: 8px;
+      gap: 12px;
+    }
+    .image-counter {
+      font-size: 14px;
+      font-weight: 500;
+      color: #94a3b8;
+    }
+    .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);
+    }
+    .framework-label[data-framework="WAN"] {
+      background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+    }
+    .framework-label[data-framework="LyCORIS"] {
+      background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
+    }
+    .framework-label[data-framework="Lora"] {
+      background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
+    }
+    .framework-label[data-framework="Embedding"] {
+      background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%);
+    }
+    .framework-label[data-framework="Qwen"] {
+      background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
+    }
+    .framework-label[data-framework="Flux"] {
+      background: linear-gradient(135deg, #a855f7 0%, #d946ef 100%);
+    }
+    .framework-label[data-framework="SDXL"] {
+      background: linear-gradient(135deg, #84cc16 0%, #22c55e 100%);
+    }
+    .framework-label[data-framework="ZImage"] {
+      background: linear-gradient(135deg, #ec4899 0%, #f97316 100%);
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <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 class="last-update">Last updated: 2025.11.10</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>
+    <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="mainContent" class="mainContent"></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">
+    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 filtered = presenceModels.filter((element) => {
+        return (
+          (element.key.toLowerCase().includes(lowerCaseValue) || value === '*') &&
+          filterByType(element)
+        );
+      });
+      document.getElementById('found').value = filtered.length;
+      const contentDiv = document.getElementById('mainContent');
+      contentDiv.innerHTML = '';
+      filtered.forEach((element, index) => {
+        const card = document.createElement('div');
+        card.className = 'element';
+        card.innerHTML = `
+          <div class="modelName" title="${escapeHtml(element.key)}">${element.key}</div>
+          <div class="imageContainer">
+            <img src="${element.imageUrl ?? unknownImage}" alt="${escapeHtml(element.key)}" />
+          </div>
+        `;
+        card.addEventListener('click', () => openModal(element));
+        contentDiv.appendChild(card);
+      });
+    }
+    // Override the searchModels function
+    window.searchModels = searchModelsModern;
+    searchModels(getCurrentSearchValue());
+    // 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 WAN samples first (from HF samples data)
+      if (personHFImages.WAN) {
+        images.push(...personHFImages.WAN);
+      }
+      // 2. 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);
+      // 3. Add other HF samples
+      const frameworkOrder = ['LyCORIS', 'Lora', 'Embedding', 'Flux', 'ZImage', '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');
+      if (modal.style.display === 'flex') {
+        if (e.key === 'ArrowLeft') {
+          e.preventDefault();
+          previousImage();
+        } else if (e.key === 'ArrowRight') {
+          e.preventDefault();
+          nextImage();
+        }
+      }
+    });
+  </script>
+</body>
+</html>