Add ltx, klein.

index.html

@@ -902,6 +902,9 @@
       background: linear-gradient(135deg, #a855f7 0%, #d946ef 100%);
     }
 
+    .framework-label[data-framework="Klein9"] {
+      background: linear-gradient(135deg, #0ea5e9 0%, #facc15 100%);
+    }
     .framework-label[data-framework="SDXL"] {
       background: linear-gradient(135deg, #84cc16 0%, #22c55e 100%);
     }
@@ -1207,6 +1210,11 @@
       color: #c4b5fd;
     }
 
+    .daily-upload-model[data-type="klein9"] {
+      background: rgba(234, 179, 8, 0.22);
+      color: #fde047;
+    }
+
     .daily-upload-model[data-type="sdxl"] {
       background: rgba(34, 197, 94, 0.2);
       color: #86efac;
@@ -1423,6 +1431,15 @@
           <span>SDXL</span>
         </label>
 
+        <label class="checkbox-label">
+          <input
+            id="selectedLtx"
+            type="checkbox"
+            onclick="javascript:searchModels(getCurrentSearchValue());"
+          />
+          <span>LTX</span>
+        </label>
+
         <label class="checkbox-label">
           <input
             id="selectedZimage"
@@ -1432,6 +1449,15 @@
           <span>ZImage</span>
         </label>
 
+        <label class="checkbox-label">
+          <input
+            id="selectedKlein9"
+            type="checkbox"
+            onclick="javascript:searchModels(getCurrentSearchValue());"
+          />
+          <span>Klein9</span>
+        </label>
+
         <label class="checkbox-label">
           <input
             id="selectedQwen"
@@ -1850,6 +1876,8 @@
       if (document.getElementById('selectedSdxl').checked) selectedTypes.push('sdxl');
       if (document.getElementById('selectedZimage').checked) selectedTypes.push('zimage');
       if (document.getElementById('selectedQwen').checked) selectedTypes.push('qwen');
+      if (document.getElementById('selectedLtx').checked) selectedTypes.push('ltx');
+      if (document.getElementById('selectedKlein9').checked) selectedTypes.push('klein9');
       return selectedTypes;
     }
     
@@ -1891,8 +1919,10 @@
         lora: 'SD LoRA',
         embedding: 'SD Embedding',
         flux: 'Flux',
+        klein9: 'Klein9',
         wan: 'WAN',
         sdxl: 'SDXL',
+        ltx: 'LTX',
         qwen: 'Qwen',
         zimage: 'ZImage'
       };
@@ -1986,6 +2016,20 @@
       }
       
       // Find all people who had uploads on this date
+      const modelTypeOrder = [
+        'locon',
+        'lora',
+        'embedding',
+        'flux',
+        'wan',
+        'sdxl',
+        'ltx',
+        'zimage',
+        'klein9',
+        'qwen'
+      ];
+      const orderIndex = new Map(modelTypeOrder.map((t, i) => [t, i]));
+
       const uploadsOnDate = [];
       for (const [personKey, personData] of Object.entries(uploadData.data)) {
         const modelsOnDate = [];
@@ -2001,6 +2045,12 @@
           }
         }
         if (modelsOnDate.length > 0) {
+          modelsOnDate.sort((a, b) => {
+            const ai = orderIndex.get(String(a).toLowerCase()) ?? Number.POSITIVE_INFINITY;
+            const bi = orderIndex.get(String(b).toLowerCase()) ?? Number.POSITIVE_INFINITY;
+            if (ai !== bi) return ai - bi;
+            return String(a).localeCompare(String(b));
+          });
           uploadsOnDate.push({ person: personKey, models: modelsOnDate });
         }
       }
@@ -2056,8 +2106,10 @@
         lora: 'small-loras',
         embedding: 'embeddings',
         flux: 'flux',
+        klein9: 'klein9',
         wan: 'wan',
         sdxl: 'sdxl',
+        ltx: 'ltx',
         qwen: 'qwen',
         zimage: 'zimage'
       };
@@ -2129,6 +2181,7 @@
       const modalTitle = document.getElementById('modalTitle');
       const modalImage = document.getElementById('modalImage');
       const modalStats = document.getElementById('modalStats');
+      const modalVideo = document.getElementById('modalVideo');
 
       // Generate HuggingFace links using actual filenames from data-filenames.js
       const personName = element.key;
@@ -2138,6 +2191,12 @@
       modalTitle.textContent = element.key;
       modalImage.src = element.imageUrl ?? unknownImage;
       modalImage.alt = element.key;
+      if (modalVideo) {
+        modalVideo.pause?.();
+        modalVideo.removeAttribute('src');
+        modalVideo.load?.();
+        modalVideo.style.display = 'none';
+      }
 
       modalStats.innerHTML = `
         <div class="modal-stat-row">
@@ -2176,12 +2235,24 @@
             ${formatModalHFLinks(element.sdxl, 'sdxl', personFilenames.sdxl)}
           </span>
         </div>
+        <div class="modal-stat-row">
+          <span class="modal-stat-label">${yesNo(element.ltx)} LTX</span>
+          <span class="modal-stat-value">
+            ${formatModalHFLinks(element.ltx, 'ltx', personFilenames.ltx)}
+          </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.klein9)} Klein9</span>
+          <span class="modal-stat-value">
+            ${formatModalHFLinks(element.klein9, 'klein9', personFilenames.klein9)}
+          </span>
+        </div>
         <div class="modal-stat-row">
           <span class="modal-stat-label">${yesNo(element.qwen)} Qwen</span>
           <span class="modal-stat-value">
@@ -2220,6 +2291,7 @@
       flux: [],
       wan: [],
       sdxl: [],
+      ltx: [],
       qwen: [],
     };
 
@@ -2289,6 +2361,22 @@
       }
     });
 
+    if (models.ltxes) {
+      models.ltxes.forEach((ltx) => {
+        const key = prepareKey(ltx.name);
+        if (presence[key] !== undefined) {
+          presence[key].ltxCivitai = true;
+          setImageUrl(key, ltx.imageUrl);
+          presence[key].ltxCivitaiLink = ltx.url;
+        } else if (!isKnownSkippableKey(key)) {
+          if (!notMatched.ltx) {
+            notMatched.ltx = [];
+          }
+          notMatched.ltx.push(key);
+        }
+      });
+    }
+
     models.qwens.forEach((qwen) => {
       const key = prepareKey(qwen.name);
       if (presence[key] !== undefined) {
@@ -2319,8 +2407,10 @@
         lora: presence[property].lora,
         embedding: presence[property].embedding,
         flux: presence[property].flux,
+        klein9: presence[property].klein9,
         wan: presence[property].wan,
         sdxl: presence[property].sdxl,
+        ltx: presence[property].ltx,
         zimage: presence[property].zimage,
         qwen: presence[property].qwen,
         mega: undefined,
@@ -2329,14 +2419,52 @@
         loraHFLink: presence[property]?.loraHFLink,
         embeddingHFLink: presence[property]?.embeddingHFLink,
         fluxHFLink: presence[property]?.fluxHFLink,
+        klein9HFLink: presence[property]?.klein9HFLink,
         wanHFLink: presence[property]?.wanHFLink,
         sdxlHFLink: presence[property]?.sdxlHFLink,
+        ltxHFLink: presence[property]?.ltxHFLink,
         zimageHFLink: presence[property]?.zimageHFLink,
         qwenHFLink: presence[property]?.qwenHFLink,
       };
       presenceModels.push(element);
     }
 
+    function filterByType(element) {
+      const mode = document.getElementById('searchMode').value;
+      const filters = [
+        { selected: document.getElementById('selectedLocon').checked, property: element.locon },
+        { selected: document.getElementById('selectedLora').checked, property: element.lora },
+        { selected: document.getElementById('selectedEmbedding').checked, property: element.embedding },
+        { selected: document.getElementById('selectedFlux').checked, property: element.flux },
+        { selected: document.getElementById('selectedWan').checked, property: element.wan },
+        { selected: document.getElementById('selectedSdxl').checked, property: element.sdxl },
+        { selected: document.getElementById('selectedLtx').checked, property: element.ltx },
+        { selected: document.getElementById('selectedZimage').checked, property: element.zimage },
+        { selected: document.getElementById('selectedKlein9').checked, property: element.klein9 },
+        { selected: document.getElementById('selectedQwen').checked, property: element.qwen },
+      ];
+
+      // If no filters are selected, show all
+      const anySelected = filters.some((f) => f.selected);
+      if (!anySelected) {
+        return true;
+      }
+
+      // Check each selected filter
+      for (const filter of filters) {
+        if (filter.selected) {
+          if (mode === 'available' && !filter.property) {
+            return false;
+          }
+          if (mode === 'missing' && filter.property) {
+            return false;
+          }
+        }
+      }
+
+      return true;
+    }
+
     function searchModelsModern(value) {
       const lowerCaseValue = value.toLowerCase();
       const sortBy = getSortBy();
@@ -2471,12 +2599,22 @@
         images.push(...personHFImages.ZImage);
       }
 
-      // 2. Add WAN samples second (from HF samples data)
+      // 2. Add Klein9 samples second (from HF samples data)
+      if (personHFImages.Klein9) {
+        images.push(...personHFImages.Klein9);
+      }
+
+      // 3. Add WAN samples (from HF samples data)
       if (personHFImages.WAN) {
         images.push(...personHFImages.WAN);
       }
 
-      // 3. Add Civitai images by type
+      // 4. Add LTX samples (from HF samples data)
+      if (personHFImages.LTX) {
+        images.push(...personHFImages.LTX);
+      }
+
+      // 5. Add Civitai images by type
       // Check each framework in personData for Civitai models
       const checkCivitaiImage = (framework, civitaiModels) => {
         if (!civitaiModels) return;
@@ -2498,9 +2636,12 @@
       checkCivitaiImage('Flux', models.fluxes);
       checkCivitaiImage('WAN', models.wans);
       checkCivitaiImage('SDXL', models.sdxls);
+      if (models.ltxes) {
+        checkCivitaiImage('LTX', models.ltxes);
+      }
       checkCivitaiImage('Qwen', models.qwens);
 
-      // 4. Add other HF samples (excluding ZImage and WAN which are already added)
+      // 6. Add other HF samples (excluding ZImage, Klein9, WAN and LTX which are already added)
       const frameworkOrder = ['LyCORIS', 'Lora', 'Embedding', 'Flux', 'SDXL', 'Qwen'];
       for (const fw of frameworkOrder) {
         if (personHFImages[fw]) {
@@ -2513,6 +2654,7 @@
 
     function updateImageDisplay() {
       const modalImage = document.getElementById('modalImage');
+      const modalVideo = document.getElementById('modalVideo');
       const imageCounter = document.getElementById('imageCounter');
       const frameworkLabel = document.getElementById('frameworkLabel');
       const imageInfo = document.getElementById('imageInfo');
@@ -2521,7 +2663,23 @@
 
       if (currentImages.length > 0) {
         const currentImage = currentImages[currentImageIndex];
-        modalImage.src = currentImage.url;
+        const isVideo = currentImage.url.toLowerCase().endsWith('.mp4');
+        if (isVideo) {
+          if (modalVideo) {
+            modalVideo.src = currentImage.url;
+            modalVideo.style.display = 'block';
+          }
+          modalImage.style.display = 'none';
+        } else {
+          modalImage.src = currentImage.url;
+          modalImage.style.display = 'block';
+          if (modalVideo) {
+            modalVideo.pause?.();
+            modalVideo.removeAttribute('src');
+            modalVideo.load?.();
+            modalVideo.style.display = 'none';
+          }
+        }
         
         if (currentImages.length > 1) {
           imageCounter.textContent = `${currentImageIndex + 1} / ${currentImages.length}`;