Update index.html

index.html

@@ -1330,6 +1330,15 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      color: rgba(255, 255, 255, 0.85);
+      text-decoration: none;
+      transition: all 0.2s ease;
+    }
+    
+    .base-overlay-item:hover {
+      color: #fff;
+      text-decoration: underline;
+      filter: brightness(1.2);
     }
     
     .base-overlay-item:last-child {
@@ -1846,6 +1855,30 @@
       return latestDateInRange;
     }
 
+    // Get the latest model version for a specific base type within date range
+    function getLatestModelForType(personKey, modelType, dateRange) {
+      const personData = uploadData.data[personKey];
+      if (!personData || !personData.models) return null;
+      
+      const models = personData.models[modelType];
+      if (!models || models.length === 0) return null;
+      
+      let latestModel = null;
+      let latestDate = null;
+      
+      for (const model of models) {
+        if (model.uploadedAt && isWithinDateRange(model.uploadedAt, dateRange)) {
+          const modelDate = new Date(model.uploadedAt);
+          if (!latestDate || modelDate > latestDate) {
+            latestDate = modelDate;
+            latestModel = model;
+          }
+        }
+      }
+      
+      return latestModel;
+    }
+
     // Get bases within date range for a person
     function getBasesInDateRange(personKey, selectedTypes, dateRange) {
       const personData = uploadData.data[personKey];
@@ -1865,17 +1898,11 @@
       
       // Check each model type
       for (const modelType of typesToCheck) {
-        const models = personData.models[modelType];
-        if (models && models.length > 0) {
-          // Check all models of this type
-          for (const model of models) {
-            if (model.uploadedAt && isWithinDateRange(model.uploadedAt, dateRange)) {
-              // Found a model of this type within the date range
-              if (!bases.includes(modelType)) {
-                bases.push(modelType);
-              }
-              break; // Found at least one, move to next type
-            }
+        const latestModel = getLatestModelForType(personKey, modelType, dateRange);
+        if (latestModel) {
+          // Found a model of this type within the date range
+          if (!bases.includes(modelType)) {
+            bases.push(modelType);
           }
         }
       }
@@ -1901,7 +1928,51 @@
       return baseNames[baseType] || baseType;
     }
 
-    // Create base overlay element for page view cards
+    // Get download URL for the latest model version
+    function getLatestModelDownloadUrl(personKey, modelType, dateRange) {
+      const latestModel = getLatestModelForType(personKey, modelType, dateRange);
+      if (!latestModel) return null;
+      
+      const folderMap = {
+        locon: 'lycoris',
+        lora: 'small-loras',
+        embedding: 'embeddings',
+        flux: 'flux',
+        klein9: 'klein9',
+        wan: 'wan',
+        sdxl: 'sdxl',
+        ltx: 'ltx',
+        qwen: 'qwen',
+        zimage: 'zimage',
+        zbase: 'zbase'
+      };
+      
+      const folder = folderMap[modelType];
+      if (!folder) return null;
+      
+      // Get the filename from filenames data
+      const filenamesData = window.filenames || {};
+      const personFilenames = filenamesData[personKey];
+      const filenames = personFilenames?.[modelType];
+      
+      if (!filenames || filenames.length === 0) {
+        // Fallback to repo page
+        return `https://huggingface.co/malcolmrey/${folder}`;
+      }
+      
+      // Try to match the filename with the model data
+      let filename = filenames[0];
+      if (latestModel.filename && filenames.includes(latestModel.filename)) {
+        filename = latestModel.filename;
+      }
+      
+      // For WAN models, add wan2.1/ prefix
+      const filePath = modelType === 'wan' ? `wan2.1/${filename}` : filename;
+      
+      return `https://huggingface.co/malcolmrey/${folder}/resolve/main/${filePath}?download=true`;
+    }
+
+    // Create clickable base overlay element for page view cards
     function createBaseOverlay(personKey, selectedTypes, dateRange) {
       const basesInRange = getBasesInDateRange(personKey, selectedTypes, dateRange);
       
@@ -1911,36 +1982,31 @@
       
       // Sort bases by upload date (latest first)
       const sortedBases = basesInRange.sort((a, b) => {
-        const personData = uploadData.data[personKey];
-        const modelsA = personData?.models?.[a] || [];
-        const modelsB = personData?.models?.[b] || [];
+        const modelA = getLatestModelForType(personKey, a, dateRange);
+        const modelB = getLatestModelForType(personKey, b, dateRange);
         
-        const latestDateA = modelsA.reduce((latest, model) => {
-          if (model.uploadedAt && isWithinDateRange(model.uploadedAt, dateRange)) {
-            const date = new Date(model.uploadedAt);
-            return !latest || date > latest ? date : latest;
-          }
-          return latest;
-        }, null);
+        const dateA = modelA ? new Date(modelA.uploadedAt) : null;
+        const dateB = modelB ? new Date(modelB.uploadedAt) : null;
         
-        const latestDateB = modelsB.reduce((latest, model) => {
-          if (model.uploadedAt && isWithinDateRange(model.uploadedAt, dateRange)) {
-            const date = new Date(model.uploadedAt);
-            return !latest || date > latest ? date : latest;
-          }
-          return latest;
-        }, null);
-        
-        return (latestDateB || 0) - (latestDateA || 0);
+        return (dateB || 0) - (dateA || 0);
       });
       
       // Create overlay element
       const overlay = document.createElement('div');
       overlay.className = 'base-overlay';
-      overlay.innerHTML = sortedBases.map(base => 
-        `<span class="base-overlay-item">${formatBaseName(base)}</span>`
-      ).join('');
       
+      const itemsHtml = sortedBases.map(baseType => {
+        const downloadUrl = getLatestModelDownloadUrl(personKey, baseType, dateRange);
+        const displayName = formatBaseName(baseType);
+        
+        if (downloadUrl) {
+          return `<a href="${downloadUrl}" target="_blank" class="base-overlay-item" onclick="event.stopPropagation();">${displayName}</a>`;
+        } else {
+          return `<span class="base-overlay-item">${displayName}</span>`;
+        }
+      }).join('');
+      
+      overlay.innerHTML = itemsHtml;
       return overlay;
     }
 
@@ -2160,7 +2226,7 @@
           </div>
         `;
         
-        // Add base overlay to the image container if date range is active
+        // Add clickable base overlay to the image container if date range is active
         const baseOverlay = createBaseOverlay(element.key, selectedTypes, dateRange);
         if (baseOverlay) {
           const imageContainer = card.querySelector('.imageContainer');
@@ -2275,13 +2341,13 @@
       return lines.join('\n');
     }
 
-    // Recent Updates Modal Functions
+    // Recent Updates Modal Functions - Updated to pick latest version within date range
     function openDailyUploadsModal() {
       const modal = document.getElementById('dailyUploadsModal');
       const dateSelect = document.getElementById('dailyDateSelect');
       
       // Populate date dropdown with sorted dates (newest first)
-      const dates = uploadData.uploadDates || [];
+      const dates = getAvailableUploadDates();
       dateSelect.innerHTML = dates.map(date => {
         const displayDate = new Date(date).toLocaleDateString('en-US', { 
           weekday: 'long', 
@@ -2326,6 +2392,9 @@
         return;
       }
       
+      // Create a date range for just this day
+      const dateRange = { from: selectedDate, to: selectedDate };
+      
       // Find all people who had uploads on this date
       const modelTypeOrder = [
         'locon',
@@ -2346,16 +2415,14 @@
       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
-              }
-            }
+        
+        for (const modelType of modelTypeOrder) {
+          const latestModel = getLatestModelForType(personKey, modelType, dateRange);
+          if (latestModel) {
+            modelsOnDate.push(modelType);
           }
         }
+        
         if (modelsOnDate.length > 0) {
           modelsOnDate.sort((a, b) => {
             const ai = orderIndex.get(String(a).toLowerCase()) ?? Number.POSITIVE_INFINITY;
@@ -2404,8 +2471,8 @@
           </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>`;
+              const link = getLatestModelDownloadUrl(item.person, m, dateRange);
+              return `<a href="${link || '#'}" target="_blank" class="daily-upload-model" data-type="${m.toLowerCase()}" onclick="event.stopPropagation();">${m}</a>`;
             }).join('')}
           </div>
         </div>
@@ -2413,40 +2480,9 @@
     }
 
     function getModelDownloadLink(personKey, modelType) {
-      const folderMap = {
-        locon: 'lycoris',
-        lora: 'small-loras',
-        embedding: 'embeddings',
-        flux: 'flux',
-        klein9: 'klein9',
-        wan: 'wan',
-        sdxl: 'sdxl',
-        ltx: 'ltx',
-        qwen: 'qwen',
-        zimage: 'zimage',
-        zbase: 'zbase'
-      };
-      
-      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`;
+      // This is the old function - use getLatestModelDownloadUrl instead
+      const dateRange = getDateRange();
+      return getLatestModelDownloadUrl(personKey, modelType, dateRange) || '#';
     }
 
     function yesNo(value) {