Function generateThumbnailsForModels

renderer.js:10972–11196

(models)

      const modelsContainer = document.createElement('div');

      // Process each model - use for...of to support async operations
      for (const [index, modelData] of finalUniqueModels.entries()) {
        const { model, generatedTags, existingTags, errorMessage } = modelData;
        const fileName = model.fileName || model.filePath?.split(/[/\\]/).pop() || 'Unknown';
        const filePath = model.filePath || 'Unknown path';

        // Create model section with unique ID to prevent duplicate rendering
        const normalizedModelPath = normalizeFilePath(model.filePath);
        const existingSection = modelsContainer.querySelector(`[data-normalized-path="${normalizedModelPath}"]`);
        if (existingSection) {
          console.warn(`[Tag Preview] Skipping duplicate model section for: ${model.filePath}`);
          continue; // Skip if this model section already exists
        }
        
        const modelSection = document.createElement('div');
        modelSection.style.marginBottom = '25px';
        modelSection.style.padding = '15px';
        modelSection.style.backgroundColor = '#2a2a2a';
        modelSection.style.border = '1px solid #444';
        modelSection.style.borderRadius = '8px';
        modelSection.dataset.filePath = model.filePath;
        modelSection.dataset.normalizedPath = normalizedModelPath;

        // Model header with thumbnail
        const modelHeader = document.createElement('div');
        modelHeader.style.display = 'flex';
        modelHeader.style.gap = '12px';
        modelHeader.style.marginBottom = '12px';
        modelHeader.style.paddingBottom = '10px';
        modelHeader.style.borderBottom = '1px solid #444';
        
        // Thumbnail
        const thumbnailContainer = document.createElement('div');
        thumbnailContainer.style.flexShrink = '0';
        thumbnailContainer.style.width = '80px';
        thumbnailContainer.style.height = '80px';
        thumbnailContainer.style.backgroundColor = '#1a1a1a';
        thumbnailContainer.style.border = '1px solid #444';
        thumbnailContainer.style.borderRadius = '6px';
        thumbnailContainer.style.overflow = 'hidden';
        thumbnailContainer.style.display = 'flex';
        thumbnailContainer.style.alignItems = 'center';
        thumbnailContainer.style.justifyContent = 'center';
        
        const thumbnailImg = document.createElement('img');
        
        // Handle thumbnail loading - especially for 3MF files which may have thumbnails stored differently
        let thumbnailSrc = null;
        
        if (model.thumbnail) {
          // Check if it's a delimited string (multiple thumbnails)
          if (model.thumbnail.includes('::')) {
            const thumbnails = model.thumbnail.split('::').filter(t => 
              t && t !== '3d.png' && t.length > 0 && t.startsWith('data:image')
            );
            thumbnailSrc = thumbnails.length > 0 ? thumbnails[0] : null;
          } else if (model.thumbnail !== '3d.png' && model.thumbnail.startsWith('data:image')) {
            // Single thumbnail