Upload index.html

index.html

@@ -336,6 +336,59 @@
       font-size: 16px;
     }
 
+    .multi-lora-toggle-wrap {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .multi-lora-toggle-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 44px;
+      height: 36px;
+      padding: 0;
+      background: var(--input-bg);
+      border: 2px solid var(--input-border);
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 0.2s;
+      position: relative;
+      font-size: 20px;
+    }
+
+    .multi-lora-toggle-btn:hover {
+      background: var(--hover-bg);
+      border-color: var(--accent-blue);
+    }
+
+    .multi-lora-toggle-btn.active {
+      background: rgba(96, 165, 250, 0.2);
+      border-color: var(--accent-blue);
+    }
+
+    .multi-lora-toggle-btn .multi-lora-icon {
+      position: absolute;
+      transition: opacity 0.2s;
+    }
+
+    .multi-lora-toggle-btn .multi-lora-icon.off {
+      opacity: 1;
+    }
+
+    .multi-lora-toggle-btn .multi-lora-icon.on {
+      opacity: 0;
+    }
+
+    .multi-lora-toggle-btn.active .multi-lora-icon.off {
+      opacity: 0;
+    }
+
+    .multi-lora-toggle-btn.active .multi-lora-icon.on {
+      opacity: 1;
+    }
+
     .mainContent {
       max-width: 1400px;
       margin: 0 auto;
@@ -1859,6 +1912,14 @@
               <option value="all">All</option>
             </select>
           </div>
+
+          <div class="control-group multi-lora-toggle-wrap">
+            <span class="control-label">MultiLora:</span>
+            <button type="button" id="multiLoraToggleBtn" class="multi-lora-toggle-btn" title="Show only models that have more than one lora version in a single category" onclick="toggleMultiLora();">
+              <span class="multi-lora-icon off">📖</span>
+              <span class="multi-lora-icon on">📚</span>
+            </button>
+          </div>
         </div>
 
         <div class="controls" style="margin-top: 16px;">
@@ -2160,6 +2221,7 @@
     let currentPage = 1;
     let totalPages = 1;
     let filteredResults = [];
+    let isMultiLoraEnabled = false;
 
     // Upload data (from data-hf-uploaded.js)
     const uploadData = {
@@ -3317,6 +3379,28 @@
       presenceModels.push(element);
     }
 
+    function hasMultiLoraForTypes(personKey, types) {
+      const personData = uploadData.data[personKey];
+      if (!personData || !personData.models) return false;
+      
+      const allTypes = ['locon', 'lora', 'embedding', 'flux', 'wan', 'sdxl', 'ltx', 'qwen', 'zimage', 'zbase', 'klein9'];
+      const typesToCheck = types && types.length > 0 ? types : allTypes;
+
+      for (const modelType of typesToCheck) {
+        const arr = personData.models[modelType];
+        if (Array.isArray(arr) && arr.length > 1) return true;
+      }
+      return false;
+    }
+
+    function toggleMultiLora() {
+      isMultiLoraEnabled = !isMultiLoraEnabled;
+      const btn = document.getElementById('multiLoraToggleBtn');
+      if (btn) btn.classList.toggle('active', isMultiLoraEnabled);
+      resetToFirstPage();
+      searchModels(getCurrentSearchValue());
+    }
+
     function filterByType(element) {
       const mode = document.getElementById('searchMode').value;
       const filters = [
@@ -3394,6 +3478,10 @@
       
       // Filter by search term and type
       let filtered = presenceModels.filter((element) => {
+        if (isMultiLoraEnabled) {
+             const typesToCheck = selectedTypes.length > 0 ? selectedTypes : null;
+             if (!hasMultiLoraForTypes(element.key, typesToCheck)) return false;
+        }
         return (
           (element.key.toLowerCase().includes(lowerCaseValue) || value === '*') &&
           filterByType(element)