Upload preview_generator.py

core/preview_generator.py

@@ -21,151 +21,224 @@ import re
 
 def generate_colors_asis_preview_html(
     color_tokens: dict,
-    background: str = "#FAFAFA"
+    background: str = "#FAFAFA",
+    max_colors: int = 50
 ) -> str:
     """
     Generate HTML preview for AS-IS colors (Stage 1).
     
     Shows simple color swatches without generated ramps.
+    Sorted by frequency (most used first).
     
     Args:
         color_tokens: Dict of colors {name: {value: "#hex", ...}}
         background: Background color
+        max_colors: Maximum colors to display (default 50)
     
     Returns:
         HTML string for Gradio HTML component
     """
     
+    # Sort by frequency (highest first)
+    sorted_tokens = []
+    for name, token in color_tokens.items():
+        if isinstance(token, dict):
+            freq = token.get("frequency", 0)
+        else:
+            freq = 0
+        sorted_tokens.append((name, token, freq))
+    
+    sorted_tokens.sort(key=lambda x: -x[2])  # Descending by frequency
+    
     rows_html = ""
     
-    for name, token in list(color_tokens.items())[:20]:  # Limit to 20 colors
+    for name, token, freq in sorted_tokens[:max_colors]:
         # Get hex value
         if isinstance(token, dict):
             hex_val = token.get("value", "#888888")
             frequency = token.get("frequency", 0)
             contexts = token.get("contexts", [])
             contrast_white = token.get("contrast_white", 0)
+            contrast_black = token.get("contrast_black", 0)
         else:
             hex_val = str(token)
             frequency = 0
             contexts = []
             contrast_white = 0
+            contrast_black = 0
         
         # Clean up hex
         if not hex_val.startswith("#"):
             hex_val = f"#{hex_val}"
         
+        # Determine text color based on background luminance
+        # Use contrast ratios to pick best text color
+        text_color = "#1a1a1a" if contrast_white and contrast_white < 4.5 else "#ffffff"
+        if not contrast_white:
+            # Fallback: calculate from hex
+            try:
+                r = int(hex_val[1:3], 16)
+                g = int(hex_val[3:5], 16)
+                b = int(hex_val[5:7], 16)
+                luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+                text_color = "#1a1a1a" if luminance > 0.5 else "#ffffff"
+            except:
+                text_color = "#1a1a1a"
+        
         # Clean name
-        display_name = name.replace("_", " ").replace("-", " ").title()
-        if len(display_name) > 20:
-            display_name = display_name[:17] + "..."
+        display_name = name.replace("_", " ").replace("-", " ").replace(".", " ").title()
+        if len(display_name) > 25:
+            display_name = display_name[:22] + "..."
         
         # AA compliance check
         aa_status = "✓ AA" if contrast_white and contrast_white >= 4.5 else "✗ AA" if contrast_white else ""
         aa_class = "aa-pass" if contrast_white and contrast_white >= 4.5 else "aa-fail"
         
-        # Context badges
+        # Context badges (limit to 3)
         context_html = ""
-        for ctx in contexts[:2]:
-            context_html += f'<span class="context-badge">{ctx}</span>'
+        for ctx in contexts[:3]:
+            ctx_display = ctx[:12] + "..." if len(ctx) > 12 else ctx
+            context_html += f'<span class="context-badge">{ctx_display}</span>'
         
         rows_html += f'''
         <div class="color-row-asis">
-            <div class="color-swatch-large" style="background-color: {hex_val};"></div>
+            <div class="color-swatch-large" style="background-color: {hex_val};">
+                <span class="swatch-hex" style="color: {text_color};">{hex_val}</span>
+            </div>
             <div class="color-info-asis">
                 <div class="color-name-asis">{display_name}</div>
-                <div class="color-hex-asis">{hex_val}</div>
                 <div class="color-meta-asis">
                     <span class="frequency">Used {frequency}x</span>
-                    {context_html}
                     <span class="{aa_class}">{aa_status}</span>
                 </div>
+                <div class="context-row">
+                    {context_html}
+                </div>
             </div>
         </div>
         '''
     
+    # Show count info
+    total_colors = len(color_tokens)
+    showing = min(max_colors, total_colors)
+    count_info = f"Showing {showing} of {total_colors} colors (sorted by frequency)"
+    
     html = f'''
     <style>
+        .colors-asis-header {{
+            font-family: system-ui, -apple-system, sans-serif;
+            font-size: 14px;
+            color: #333 !important;
+            margin-bottom: 16px;
+            padding: 8px 12px;
+            background: #e8e8e8 !important;
+            border-radius: 6px;
+        }}
+        
         .colors-asis-preview {{
             font-family: system-ui, -apple-system, sans-serif;
-            background: {background};
+            background: {background} !important;
             border-radius: 12px;
             padding: 20px;
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
             gap: 16px;
+            max-height: 800px;
+            overflow-y: auto;
         }}
         
         .color-row-asis {{
             display: flex;
             align-items: center;
-            background: #fff;
+            background: #ffffff !important;
             border-radius: 8px;
             padding: 12px;
-            border: 1px solid #e0e0e0;
+            border: 1px solid #d0d0d0 !important;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.08);
         }}
         
         .color-swatch-large {{
-            width: 60px;
-            height: 60px;
+            width: 80px;
+            height: 80px;
             border-radius: 8px;
-            border: 2px solid rgba(0,0,0,0.1);
+            border: 2px solid rgba(0,0,0,0.15) !important;
             margin-right: 16px;
             flex-shrink: 0;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }}
+        
+        .swatch-hex {{
+            font-size: 11px;
+            font-family: 'SF Mono', Monaco, monospace;
+            font-weight: 600;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.4);
         }}
         
         .color-info-asis {{
             flex: 1;
+            min-width: 0;
         }}
         
         .color-name-asis {{
             font-weight: 700;
             font-size: 14px;
-            color: #1a1a1a;
-            margin-bottom: 4px;
-        }}
-        
-        .color-hex-asis {{
-            font-size: 13px;
-            color: #444;
-            font-family: 'SF Mono', Monaco, monospace;
+            color: #1a1a1a !important;
             margin-bottom: 6px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }}
         
         .color-meta-asis {{
             display: flex;
-            gap: 8px;
-            flex-wrap: wrap;
+            gap: 12px;
             align-items: center;
+            margin-bottom: 6px;
         }}
         
         .frequency {{
-            font-size: 11px;
-            color: #666;
+            font-size: 12px;
+            color: #333 !important;
+            font-weight: 500;
+        }}
+        
+        .context-row {{
+            display: flex;
+            gap: 6px;
+            flex-wrap: wrap;
         }}
         
         .context-badge {{
             font-size: 10px;
-            background: #e8e8e8;
-            padding: 2px 6px;
+            background: #d0d0d0 !important;
+            padding: 2px 8px;
             border-radius: 4px;
-            color: #555;
+            color: #222 !important;
         }}
         
         .aa-pass {{
             font-size: 11px;
-            color: #16a34a;
-            font-weight: 600;
+            color: #166534 !important;
+            font-weight: 700;
+            background: #dcfce7 !important;
+            padding: 2px 6px;
+            border-radius: 4px;
         }}
         
         .aa-fail {{
             font-size: 11px;
-            color: #dc2626;
-            font-weight: 600;
+            color: #991b1b !important;
+            font-weight: 700;
+            background: #fee2e2 !important;
+            padding: 2px 6px;
+            border-radius: 4px;
         }}
     </style>
     
+    <div class="colors-asis-header">{count_info}</div>
     <div class="colors-asis-preview">
         {rows_html}
     </div>
@@ -214,7 +287,7 @@ def generate_spacing_asis_preview_html(
     <style>
         .spacing-asis-preview {{
             font-family: system-ui, -apple-system, sans-serif;
-            background: {background};
+            background: #f5f5f5 !important;
             border-radius: 12px;
             padding: 20px;
         }}
@@ -223,19 +296,22 @@ def generate_spacing_asis_preview_html(
             display: flex;
             align-items: center;
             margin-bottom: 12px;
+            background: #ffffff !important;
+            padding: 8px 12px;
+            border-radius: 6px;
         }}
         
         .spacing-label {{
-            width: 60px;
-            font-size: 13px;
+            width: 80px;
+            font-size: 14px;
             font-weight: 600;
-            color: #333;
-            font-family: monospace;
+            color: #1a1a1a !important;
+            font-family: 'SF Mono', Monaco, monospace;
         }}
         
         .spacing-bar {{
             height: 24px;
-            background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%);
+            background: linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%) !important;
             border-radius: 4px;
             min-width: 4px;
         }}
@@ -278,32 +354,35 @@ def generate_radius_asis_preview_html(
     <style>
         .radius-asis-preview {{
             font-family: system-ui, -apple-system, sans-serif;
-            background: {background};
+            background: #f5f5f5 !important;
             border-radius: 12px;
             padding: 20px;
             display: flex;
             flex-wrap: wrap;
-            gap: 16px;
+            gap: 20px;
         }}
         
         .radius-item {{
             display: flex;
             flex-direction: column;
             align-items: center;
+            background: #ffffff !important;
+            padding: 12px;
+            border-radius: 8px;
         }}
         
         .radius-box {{
             width: 60px;
             height: 60px;
-            background: #3b82f6;
+            background: #3b82f6 !important;
             margin-bottom: 8px;
         }}
         
         .radius-label {{
-            font-size: 12px;
+            font-size: 13px;
             font-weight: 600;
-            color: #333;
-            font-family: monospace;
+            color: #1a1a1a !important;
+            font-family: 'SF Mono', Monaco, monospace;
         }}
     </style>
     
@@ -350,7 +429,7 @@ def generate_shadows_asis_preview_html(
     <style>
         .shadows-asis-preview {{
             font-family: system-ui, -apple-system, sans-serif;
-            background: {background};
+            background: #f5f5f5 !important;
             border-radius: 12px;
             padding: 20px;
             display: grid;
@@ -362,27 +441,30 @@ def generate_shadows_asis_preview_html(
             display: flex;
             flex-direction: column;
             align-items: center;
+            background: #e8e8e8 !important;
+            padding: 16px;
+            border-radius: 8px;
         }}
         
         .shadow-box {{
             width: 100px;
             height: 100px;
-            background: #fff;
+            background: #ffffff !important;
             border-radius: 8px;
             margin-bottom: 12px;
         }}
         
         .shadow-label {{
-            font-size: 12px;
+            font-size: 13px;
             font-weight: 600;
-            color: #333;
+            color: #1a1a1a !important;
             margin-bottom: 4px;
         }}
         
         .shadow-value {{
             font-size: 10px;
-            color: #666;
-            font-family: monospace;
+            color: #444 !important;
+            font-family: 'SF Mono', Monaco, monospace;
             text-align: center;
             word-break: break-all;
         }}
@@ -695,22 +777,96 @@ def generate_color_ramp(base_hex: str) -> list[dict]:
 
 def generate_color_ramps_preview_html(
     color_tokens: dict,
-    background: str = "#FAFAFA"
+    background: str = "#FAFAFA",
+    max_colors: int = 20
 ) -> str:
     """
     Generate HTML preview for color ramps.
     
+    Sorts colors by frequency and filters out near-white/near-black
+    to prioritize showing actual brand colors.
+    
     Args:
         color_tokens: Dict of colors {name: {value: "#hex", ...}}
         background: Background color
+        max_colors: Maximum colors to show ramps for
     
     Returns:
         HTML string for Gradio HTML component
     """
     
+    def get_color_priority(name, token):
+        """Calculate priority score for a color (higher = more important)."""
+        if isinstance(token, dict):
+            hex_val = token.get("value", "#888888")
+            frequency = token.get("frequency", 0)
+        else:
+            hex_val = str(token)
+            frequency = 0
+        
+        # Clean hex
+        if not hex_val.startswith("#"):
+            hex_val = f"#{hex_val}"
+        
+        # Calculate luminance
+        try:
+            r = int(hex_val[1:3], 16)
+            g = int(hex_val[3:5], 16)
+            b = int(hex_val[5:7], 16)
+            luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+            
+            # Calculate saturation (simplified)
+            max_c = max(r, g, b)
+            min_c = min(r, g, b)
+            saturation = (max_c - min_c) / 255 if max_c > 0 else 0
+        except:
+            luminance = 0.5
+            saturation = 0
+        
+        # Priority scoring:
+        # - Penalize near-white (luminance > 0.9)
+        # - Penalize near-black (luminance < 0.1)
+        # - Penalize low saturation (grays)
+        # - Reward high frequency
+        # - Reward colors with "primary", "brand", "accent" in name
+        
+        score = frequency * 10  # Base score from frequency
+        
+        # Penalize extremes
+        if luminance > 0.9:
+            score -= 500  # Near white
+        if luminance < 0.1:
+            score -= 300  # Near black
+        
+        # Reward saturated colors (actual brand colors)
+        score += saturation * 200
+        
+        # Reward named brand colors
+        name_lower = name.lower()
+        if any(kw in name_lower for kw in ['primary', 'brand', 'accent', 'cyan', 'blue', 'green', 'red', 'orange', 'purple']):
+            score += 100
+        
+        # Penalize "background", "border", "text" colors
+        if any(kw in name_lower for kw in ['background', 'border', 'neutral', 'gray', 'grey']):
+            score -= 50
+        
+        return score
+    
+    # Sort colors by priority
+    sorted_colors = []
+    for name, token in color_tokens.items():
+        priority = get_color_priority(name, token)
+        sorted_colors.append((name, token, priority))
+    
+    sorted_colors.sort(key=lambda x: -x[2])  # Descending by priority
+    
     rows_html = ""
+    shown_count = 0
     
-    for name, token in list(color_tokens.items())[:10]:  # Limit to 10 colors
+    for name, token, priority in sorted_colors:
+        if shown_count >= max_colors:
+            break
+            
         # Get hex value
         if isinstance(token, dict):
             hex_val = token.get("value", "#888888")
@@ -721,15 +877,19 @@ def generate_color_ramps_preview_html(
         if not hex_val.startswith("#"):
             hex_val = f"#{hex_val}"
         
+        # Skip invalid hex
+        if len(hex_val) < 7:
+            continue
+        
         # Generate ramp
         ramp = generate_color_ramp(hex_val)
         if not ramp:
             continue
         
         # Clean name
-        display_name = name.replace("_", " ").replace("-", " ").title()
-        if len(display_name) > 15:
-            display_name = display_name[:12] + "..."
+        display_name = name.replace("_", " ").replace("-", " ").replace(".", " ").title()
+        if len(display_name) > 18:
+            display_name = display_name[:15] + "..."
         
         # Generate shade cells
         shades_html = ""
@@ -747,8 +907,8 @@ def generate_color_ramps_preview_html(
                 aa_indicator = "✓"
                 aa_class = "aa-pass"
             else:
-                aa_indicator = "✗"
-                aa_class = "aa-fail"
+                aa_indicator = ""
+                aa_class = ""
             
             shades_html += f'''
             <div class="shade-cell" style="background-color: {hex_color};" title="{hex_color} | AA: {'Pass' if aa_white or aa_black else 'Fail'}">
@@ -771,6 +931,11 @@ def generate_color_ramps_preview_html(
             </div>
         </div>
         '''
+        shown_count += 1
+    
+    # Count info
+    total_colors = len(color_tokens)
+    count_info = f"Showing {shown_count} of {total_colors} colors (sorted by brand priority)"
     
     html = f'''
     <style>
@@ -901,9 +1066,19 @@ def generate_color_ramps_preview_html(
             color: #666;
             margin-right: 4px;
         }}
+        
+        .ramps-header-info {{
+            font-size: 14px;
+            color: #666;
+            margin-bottom: 16px;
+            padding: 8px 12px;
+            background: #f0f0f0;
+            border-radius: 6px;
+        }}
     </style>
     
     <div class="color-ramps-preview">
+        <div class="ramps-header-info">{count_info}</div>
         <div class="ramp-header">
             <span class="ramp-header-label">50</span>
             <span class="ramp-header-label">100</span>