Upload 2 files

index.html

@@ -10,6 +10,7 @@
   <script type="text/javascript" src="data-hf-images.js"></script>
   <script type="text/javascript" src="data-thumbnails.js"></script>
   <script type="text/javascript" src="data-hf-uploaded.js"></script>
+  <script type="text/javascript" src="data-huggingface-loras.js"></script>
   <script type="text/javascript" src="data-person-classifications.js"></script>
   <script type="text/javascript" src="data-person-tags.js"></script>
   <script type="text/javascript" src="data-person-urls.js"></script>
@@ -468,6 +469,177 @@
       padding: 0 4px;
     }
 
+    .hf-loras-section {
+      display: none;
+      max-width: 1400px;
+      margin: 0 auto 24px;
+      padding: 0 4px;
+    }
+
+    .hf-loras-section.active {
+      display: block;
+    }
+
+    .hf-loras-section-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 16px;
+      flex-wrap: wrap;
+    }
+
+    .hf-loras-section-header h2 {
+      font-size: 18px;
+      margin: 0;
+      color: var(--text-primary);
+    }
+
+    .hf-loras-summary {
+      color: var(--text-secondary);
+      font-size: 13px;
+    }
+
+    .hf-loras-search-container {
+      position: relative;
+      flex: 1 1 220px;
+      min-width: 180px;
+      max-width: 400px;
+    }
+
+    .hf-loras-search-input {
+      width: 100%;
+      padding: 10px 90px 10px 14px;
+      background: var(--input-bg);
+      border: 2px solid var(--input-border);
+      border-radius: 10px;
+      color: var(--input-text);
+      font-size: 14px;
+      font-family: inherit;
+      transition: all 0.3s;
+    }
+
+    .hf-loras-search-input:focus {
+      outline: none;
+      border-color: var(--accent-blue);
+      box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.1);
+    }
+
+    .hf-loras-repo-link {
+      font-size: 20px;
+      line-height: 1;
+      text-decoration: none;
+      opacity: 0.7;
+      transition: opacity 0.2s, transform 0.2s;
+    }
+
+    .hf-loras-repo-link:hover {
+      opacity: 1;
+      transform: scale(1.15);
+    }
+
+    #hfLorasPaginationTop, #hfLorasPaginationBottom {
+      justify-content: space-between;
+    }
+
+    .hf-loras-pager-nav {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    .hf-loras-page-size-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-muted);
+      font-size: 13px;
+    }
+
+    .hf-loras-search-input::placeholder {
+      color: var(--text-muted);
+    }
+
+    .hf-loras-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 16px;
+    }
+
+    .hf-lora-card {
+      background: var(--card-bg);
+      backdrop-filter: blur(10px);
+      border-radius: 16px;
+      overflow: hidden;
+      border: 1px solid var(--card-border);
+      box-shadow: 0 4px 16px var(--shadow-color);
+      display: flex;
+      flex-direction: column;
+    }
+
+    .hf-lora-card-name {
+      padding: 10px 12px;
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--input-text);
+      border-bottom: 1px solid var(--card-border);
+      background: var(--input-bg);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .hf-lora-card-image {
+      position: relative;
+      width: 100%;
+      padding-top: 100%;
+      background: var(--input-bg);
+      overflow: hidden;
+    }
+
+    .hf-lora-card-image img {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .hf-lora-no-sample {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-muted);
+      font-size: 12px;
+    }
+
+    .hf-lora-card-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 8px 12px;
+      font-size: 11px;
+      color: var(--text-secondary);
+      gap: 8px;
+    }
+
+    .hf-lora-card-footer a {
+      color: var(--link-color);
+      text-decoration: none;
+    }
+
+    .hf-lora-card-footer a:hover {
+      color: var(--link-hover);
+    }
+
+    .hf-loras-empty {
+      color: var(--text-muted);
+      font-size: 13px;
+      padding: 16px 0;
+    }
+
     .element {
       background: var(--card-bg);
       backdrop-filter: blur(10px);
@@ -1878,6 +2050,32 @@
       color: var(--accent-blue);
     }
 
+    /* Display is controlled inline via JS (hidden until repo data exists), not by this rule. */
+    .hf-loras-toggle-btn {
+      width: 44px;
+      height: 44px; /* Match link height approximately */
+      min-width: 0 !important; /* Override mode-select min-width */
+      padding: 0 !important; /* Override mode-select padding */
+      border-radius: 8px; /* Match links */
+      background: var(--input-bg);
+      border: 1px solid var(--input-border);
+      color: var(--text-secondary);
+      font-size: 20px;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.2s;
+      box-shadow: none;
+      appearance: none;
+      background-image: none !important; /* Remove arrow icon from mode-select */
+    }
+
+    .hf-loras-toggle-btn:hover, .hf-loras-toggle-btn.active {
+      background: var(--hover-bg);
+      border-color: var(--accent-blue);
+      color: var(--accent-blue);
+    }
+
     .modal-mobile-tabs {
       display: none;
       width: 100%;
@@ -1934,13 +2132,16 @@
         <a href="https://huggingface.com/malcolmrey" target="_blank">🤗 <span class="link-text">HuggingFace</span></a>
         <a href="https://buymeacoffee.com/malcolmrey" target="_blank">☕ <span class="link-text">BuyMeACoffee</span></a>
         <a href="https://reddit.com/r/malcolmrey" target="_blank">💬 <span class="link-text">Reddit</span></a>
+        <button id="hfLorasToggleBtn" class="mode-select hf-loras-toggle-btn" onclick="toggleHfLorasSection()" title="HuggingFace LoRA Repos" style="display: none;">
+          🤗
+        </button>
         <button id="toggleAdvanced" class="mode-select advanced-toggle-btn" onclick="toggleAdvancedOptions()" title="Advanced Options">
           ⚙️
         </button>
       </div>
     </div>
     
-    <div class="controls">
+    <div class="controls" id="regularBrowseControls">
       <div class="search-container">
         <input
           id="search"
@@ -2303,6 +2504,67 @@
     <button id="lastPageBtnBottom" class="pagination-btn" onclick="lastPage()">Last ⇥</button>
   </div>
 
+  <!-- Hidden by default (toggled via the 🤗 button next to the profile links above), so it
+       never sits on top of Mal's Models, which stays the default view. -->
+  <div class="hf-loras-section" id="hfLorasSection">
+    <div class="hf-loras-section-header">
+      <h2>🤗 HuggingFace LoRA Repos</h2>
+      <select id="hfLorasRepoSelect" class="mode-select" onchange="onHfLorasRepoChange()"></select>
+      <a
+        id="hfLorasRepoLink"
+        class="hf-loras-repo-link"
+        href="#"
+        target="_blank"
+        rel="noopener"
+        title="View on HuggingFace"
+        style="display: none;"
+      >🔗</a>
+      <div class="hf-loras-search-container">
+        <input
+          id="hfLorasSearch"
+          type="text"
+          class="hf-loras-search-input"
+          placeholder="Search LoRAs..."
+          oninput="onHfLorasSearchInput(this.value)"
+        />
+        <button class="clear-btn" onclick="clearHfLorasSearch()">Clear</button>
+      </div>
+      <span id="hfLorasSummary" class="hf-loras-summary"></span>
+    </div>
+
+    <div id="hfLorasPaginationTop" class="pagination-controls" style="display: none;">
+      <span class="hf-loras-pager-nav">
+        <button class="pagination-btn hf-loras-prev-btn" onclick="hfLorasPreviousPage()">← Previous</button>
+        <span class="pagination-info hf-loras-page-info"></span>
+        <button class="pagination-btn hf-loras-next-btn" onclick="hfLorasNextPage()">Next →</button>
+      </span>
+      <label class="hf-loras-page-size-label">
+        Per page:
+        <select id="hfLorasPageSize" class="mode-select" onchange="onHfLorasPageSizeChange()">
+          <option value="10">10</option>
+          <option value="25">25</option>
+          <option value="30" selected>30</option>
+          <option value="50">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>
+      </label>
+    </div>
+
+    <div id="hfLorasGrid" class="hf-loras-grid"></div>
+
+    <div id="hfLorasPaginationBottom" class="pagination-controls" style="display: none;">
+      <span class="hf-loras-pager-nav">
+        <button class="pagination-btn hf-loras-prev-btn" onclick="hfLorasPreviousPage()">← Previous</button>
+        <span class="pagination-info hf-loras-page-info"></span>
+        <button class="pagination-btn hf-loras-next-btn" onclick="hfLorasNextPage()">Next →</button>
+      </span>
+    </div>
+  </div>
+
   <!-- Recent Updates Modal -->
   <div id="dailyUploadsModal" class="modal-overlay" onclick="closeDailyUploadsModalOnOverlay(event)">
     <div class="modal-content daily-modal-content" onclick="event.stopPropagation()">
@@ -2493,10 +2755,228 @@
       updateTagsFilterCount();
     }
 
+    // Search/pagination state for the HF loras view — deliberately separate from the regular
+    // browser's currentPage/totalPages/filteredResults, which belong to a different dataset.
+    // Declared here, ahead of initHfLoras() below, since `let`/`const` (unlike `function`) are
+    // not hoisted — referencing them from a call this early in the script threw otherwise.
+    let hfLorasSearchTerm = '';
+    let hfLorasCurrentPage = 1;
+    let hfLorasTotalPages = 1;
+
     // Call on page load
     initTheme();
     initSamplesToggle();
     initTagsFilterGroup();
+    initHfLoras();
+
+    // HuggingFace LoRA repos section (data-huggingface-loras.js, generated via
+    // `npm run huggingface-loras:generate` from the repos in HUGGINGFACE_LORA_REPOS).
+    // Sample images and safetensors downloads are hotlinked straight to
+    // huggingface.co — nothing is mirrored locally, matching the other data-hf-*.js
+    // sources on this page.
+    // Repo file paths often carry spaces/parentheses (real filenames seen in these repos:
+    // "K2 Dichen Lachman (vrtlDichenLachman)-ID.webp"). Encode each path segment, not the
+    // whole path, so a subfolder's own "/" separators survive.
+    function encodeHfPath(path) {
+      return path.split('/').map(encodeURIComponent).join('/');
+    }
+
+    function formatHfLoraBytes(bytes) {
+      if (bytes === null || bytes === undefined) return '';
+      const units = ['B', 'KB', 'MB', 'GB'];
+      let value = bytes;
+      let unitIndex = 0;
+      while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex += 1;
+      }
+      return `${value.toFixed(1)} ${units[unitIndex]}`;
+    }
+
+    function populateHfLorasRepoSelect() {
+      const select = document.getElementById('hfLorasRepoSelect');
+      const registry = window.hfLorasRegistry || {};
+      const repoIds = Object.keys(registry);
+
+      select.innerHTML = repoIds
+        .map((repoId) => `<option value="${escapeHtml(repoId)}">${escapeHtml(repoId)}</option>`)
+        .join('');
+
+      // Section visibility is controlled by toggleHfLorasSection() (the 🤗 button), not here —
+      // this only decides whether there's anything to toggle to in the first place.
+      const toggleBtn = document.getElementById('hfLorasToggleBtn');
+      if (toggleBtn) {
+        toggleBtn.style.display = repoIds.length === 0 ? 'none' : 'flex';
+      }
+    }
+
+    // A switch, not an additional panel: showing the HuggingFace repos hides Malcolm Rey's own
+    // models (search/filters, the person grid, both pagination bars) rather than stacking below
+    // them, and vice versa. Default on page load is Malcolm Rey's models, since #hfLorasSection
+    // starts without the `active` class that makes it visible at all.
+    function toggleHfLorasSection() {
+      const hfSection = document.getElementById('hfLorasSection');
+      const btn = document.getElementById('hfLorasToggleBtn');
+      const regularControls = document.getElementById('regularBrowseControls');
+      const mainContent = document.getElementById('mainContent');
+      const paginationTop = document.getElementById('paginationControls');
+      const paginationBottom = document.getElementById('paginationControlsBottom');
+
+      const showingHfLoras = !hfSection.classList.contains('active');
+
+      hfSection.classList.toggle('active', showingHfLoras);
+      btn.classList.toggle('active', showingHfLoras);
+      regularControls.style.display = showingHfLoras ? 'none' : '';
+      mainContent.style.display = showingHfLoras ? 'none' : '';
+
+      if (showingHfLoras) {
+        paginationTop.style.display = 'none';
+        paginationBottom.style.display = 'none';
+      } else {
+        // Its own visibility depends on page count, independent of this switch — let it decide
+        // rather than forcing 'flex' back on regardless of whether there's more than one page.
+        updatePaginationControls();
+      }
+    }
+
+    function onHfLorasSearchInput(value) {
+      hfLorasSearchTerm = value;
+      hfLorasCurrentPage = 1;
+      renderHfLorasRepo();
+    }
+
+    function clearHfLorasSearch() {
+      document.getElementById('hfLorasSearch').value = '';
+      onHfLorasSearchInput('');
+    }
+
+    function onHfLorasRepoChange() {
+      hfLorasCurrentPage = 1;
+      renderHfLorasRepo();
+    }
+
+    function onHfLorasPageSizeChange() {
+      hfLorasCurrentPage = 1;
+      renderHfLorasRepo();
+    }
+
+    function getHfLorasPageSize() {
+      const value = document.getElementById('hfLorasPageSize').value;
+      return value === 'all' ? Infinity : parseInt(value, 10);
+    }
+
+    function hfLorasPreviousPage() {
+      if (hfLorasCurrentPage > 1) {
+        hfLorasCurrentPage -= 1;
+        renderHfLorasRepo();
+      }
+    }
+
+    function hfLorasNextPage() {
+      if (hfLorasCurrentPage < hfLorasTotalPages) {
+        hfLorasCurrentPage += 1;
+        renderHfLorasRepo();
+      }
+    }
+
+    // The per-page select lives inside the same bar as Previous/Next, but must stay reachable
+    // even when there's only one page (e.g. "All" is selected) — otherwise picking "All" would
+    // be a dead end with no way back to a smaller page size. Only `.hf-loras-pager-nav` (the
+    // Previous/count/Next trio) hides in that case; the bar itself, and the select, do not.
+    function updateHfLorasPaginationControls(matchCount, hasData) {
+      const pageSize = getHfLorasPageSize();
+      const showNav = hasData && matchCount > pageSize;
+      const infoText = `${hfLorasCurrentPage}/${hfLorasTotalPages}`;
+
+      document.querySelectorAll('#hfLorasPaginationTop, #hfLorasPaginationBottom').forEach((el) => {
+        el.style.display = hasData ? 'flex' : 'none';
+      });
+      document.querySelectorAll('.hf-loras-pager-nav').forEach((el) => {
+        el.style.display = showNav ? 'flex' : 'none';
+      });
+      document.querySelectorAll('.hf-loras-page-info').forEach((el) => {
+        el.textContent = infoText;
+      });
+      document.querySelectorAll('.hf-loras-prev-btn').forEach((el) => {
+        el.disabled = hfLorasCurrentPage <= 1;
+      });
+      document.querySelectorAll('.hf-loras-next-btn').forEach((el) => {
+        el.disabled = hfLorasCurrentPage >= hfLorasTotalPages;
+      });
+    }
+
+    function renderHfLorasRepo() {
+      const select = document.getElementById('hfLorasRepoSelect');
+      const grid = document.getElementById('hfLorasGrid');
+      const summary = document.getElementById('hfLorasSummary');
+      const repoLink = document.getElementById('hfLorasRepoLink');
+      const registry = window.hfLorasRegistry || {};
+      const snapshot = registry[select.value];
+
+      if (!snapshot) {
+        grid.innerHTML = '<div class="hf-loras-empty">No data for this repo yet — run `npm run huggingface-loras:generate`.</div>';
+        summary.textContent = '';
+        repoLink.style.display = 'none';
+        updateHfLorasPaginationControls(0, false);
+        return;
+      }
+
+      repoLink.href = `https://huggingface.co/${encodeHfPath(snapshot.repoId)}`;
+      repoLink.style.display = '';
+
+      const term = hfLorasSearchTerm.trim().toLowerCase();
+      const filtered = term
+        ? snapshot.loras.filter((lora) => lora.name.toLowerCase().includes(term))
+        : snapshot.loras;
+
+      const pageSize = getHfLorasPageSize();
+      hfLorasTotalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+      if (hfLorasCurrentPage > hfLorasTotalPages) hfLorasCurrentPage = hfLorasTotalPages;
+
+      const fetchedLabel = new Date(snapshot.fetchedAt).toLocaleString();
+      summary.textContent = term
+        ? `${filtered.length} of ${snapshot.loras.length} LoRA(s) · fetched ${fetchedLabel}`
+        : `${snapshot.loras.length} LoRA(s) · fetched ${fetchedLabel}`;
+
+      // pageSize is Infinity for "All". (hfLorasCurrentPage - 1) * Infinity is NaN when the
+      // page is 1 (0 * Infinity), and Infinity itself otherwise — either way `slice` on that
+      // start returns nothing. Substituting the actual filtered length sidesteps Infinity
+      // arithmetic entirely rather than special-casing every place it could leak in.
+      const effectivePageSize = pageSize === Infinity ? Math.max(filtered.length, 1) : pageSize;
+      const start = (hfLorasCurrentPage - 1) * effectivePageSize;
+      const pageItems = filtered.slice(start, start + effectivePageSize);
+
+      grid.innerHTML = pageItems.length === 0
+        ? '<div class="hf-loras-empty">No matching LoRAs.</div>'
+        : pageItems.map((lora) => {
+            const sampleFile = lora.sampleFiles[0];
+            const sampleUrl = sampleFile
+              ? `https://huggingface.co/${snapshot.repoId}/resolve/${snapshot.revision}/${encodeHfPath(sampleFile)}`
+              : null;
+            const downloadUrl = `https://huggingface.co/${snapshot.repoId}/resolve/${snapshot.revision}/${encodeHfPath(lora.safetensorsFile)}?download=true`;
+            const imageHtml = sampleUrl
+              ? `<img src="${sampleUrl}" alt="${escapeHtml(lora.name)}" loading="lazy" />`
+              : '<div class="hf-lora-no-sample">No sample</div>';
+
+            return `
+              <div class="hf-lora-card">
+                <div class="hf-lora-card-name" title="${escapeHtml(lora.name)}">${escapeHtml(lora.name)}</div>
+                <div class="hf-lora-card-image">${imageHtml}</div>
+                <div class="hf-lora-card-footer">
+                  <span>${formatHfLoraBytes(lora.safetensorsSizeBytes)}</span>
+                  <a href="${downloadUrl}" target="_blank" rel="noopener">⬇️ Download</a>
+                </div>
+              </div>
+            `;
+          }).join('');
+
+      updateHfLorasPaginationControls(filtered.length, true);
+    }
+
+    function initHfLoras() {
+      populateHfLorasRepoSelect();
+      renderHfLorasRepo();
+    }
 
     // Pagination state
     let currentPage = 1;