Upload preview_generator.py

core/preview_generator.py

@@ -941,7 +941,7 @@ def generate_color_ramps_preview_html(
     <style>
         .color-ramps-preview {{
             font-family: system-ui, -apple-system, sans-serif;
-            background: {background};
+            background: #f5f5f5 !important;
             border-radius: 12px;
             padding: 20px;
             overflow-x: auto;
@@ -951,28 +951,28 @@ def generate_color_ramps_preview_html(
             display: flex;
             align-items: center;
             margin-bottom: 16px;
-            padding-bottom: 16px;
-            border-bottom: 1px solid #E8E8E8;
+            padding: 12px;
+            background: #ffffff !important;
+            border-radius: 8px;
+            border: 1px solid #d0d0d0 !important;
         }}
         
         .color-row:last-child {{
-            border-bottom: none;
             margin-bottom: 0;
-            padding-bottom: 0;
         }}
         
         .color-info {{
             display: flex;
             align-items: center;
-            min-width: 140px;
+            min-width: 160px;
             margin-right: 20px;
         }}
         
         .color-swatch {{
-            width: 40px;
-            height: 40px;
+            width: 44px;
+            height: 44px;
             border-radius: 8px;
-            border: 2px solid rgba(0,0,0,0.15);
+            border: 2px solid rgba(0,0,0,0.15) !important;
             margin-right: 12px;
             flex-shrink: 0;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
@@ -986,19 +986,20 @@ def generate_color_ramps_preview_html(
         .color-name {{
             font-weight: 700;
             font-size: 13px;
-            color: #1A1A1A;
-            margin-bottom: 2px;
-            background: #E8E8E8;
-            padding: 3px 8px;
+            color: #1a1a1a !important;
+            margin-bottom: 4px;
+            background: #e0e0e0 !important;
+            padding: 4px 10px;
             border-radius: 4px;
             display: inline-block;
         }}
         
         .color-hex {{
-            font-size: 11px;
-            color: #444;
-            font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+            font-size: 12px;
+            color: #333 !important;
+            font-family: 'SF Mono', Monaco, monospace;
             margin-top: 4px;
+            font-weight: 500;
         }}
         
         .color-ramp {{
@@ -1018,7 +1019,7 @@ def generate_color_ramps_preview_html(
             position: relative;
             cursor: pointer;
             transition: transform 0.15s;
-            border: 1px solid rgba(0,0,0,0.1);
+            border: 1px solid rgba(0,0,0,0.1) !important;
         }}
         
         .shade-cell:hover {{
@@ -1039,11 +1040,11 @@ def generate_color_ramps_preview_html(
         }}
         
         .aa-pass {{
-            color: #16A34A;
+            color: #166534 !important;
         }}
         
         .aa-fail {{
-            color: #DC2626;
+            color: #991b1b !important;
         }}
         
         .shade-cell:hover .shade-label,
@@ -1055,25 +1056,30 @@ def generate_color_ramps_preview_html(
         .ramp-header {{
             display: flex;
             margin-bottom: 12px;
-            padding-left: 160px;
+            padding-left: 180px;
+            background: #e8e8e8 !important;
+            padding-top: 8px;
+            padding-bottom: 8px;
+            border-radius: 6px;
         }}
         
         .ramp-header-label {{
             width: 48px;
             text-align: center;
-            font-size: 11px;
-            font-weight: 600;
-            color: #666;
+            font-size: 12px;
+            font-weight: 700;
+            color: #333 !important;
             margin-right: 4px;
         }}
         
         .ramps-header-info {{
             font-size: 14px;
-            color: #666;
+            color: #333 !important;
             margin-bottom: 16px;
-            padding: 8px 12px;
-            background: #f0f0f0;
+            padding: 10px 14px;
+            background: #e0e0e0 !important;
             border-radius: 6px;
+            font-weight: 500;
         }}
     </style>
     
@@ -1099,6 +1105,339 @@ def generate_color_ramps_preview_html(
     return html
 
 
+# =============================================================================
+# SEMANTIC COLOR RAMPS WITH LLM RECOMMENDATIONS (Stage 2)
+# =============================================================================
+
+def generate_semantic_color_ramps_html(
+    semantic_analysis: dict,
+    color_tokens: dict,
+    llm_recommendations: dict = None,
+    background: str = "#F5F5F5"
+) -> str:
+    """
+    Generate HTML preview for colors organized by semantic role with LLM recommendations.
+    
+    Args:
+        semantic_analysis: Output from SemanticColorAnalyzer
+        color_tokens: Dict of all color tokens
+        llm_recommendations: LLM suggestions for color improvements
+        background: Background color
+    
+    Returns:
+        HTML string for Gradio HTML component
+    """
+    
+    def generate_single_ramp(hex_val: str) -> str:
+        """Generate a single color ramp HTML."""
+        ramp = generate_color_ramp(hex_val)
+        if not ramp:
+            return ""
+        
+        shades_html = ""
+        for shade_info in ramp:
+            shade = shade_info["shade"]
+            hex_color = shade_info["hex"]
+            aa_white = shade_info["aa_on_white"]
+            aa_black = shade_info["aa_on_black"]
+            
+            text_color = "#000" if shade < 500 else "#FFF"
+            aa_indicator = "✓" if aa_white or aa_black else ""
+            
+            shades_html += f'''
+            <div class="sem-shade" style="background-color: {hex_color};">
+                <span class="sem-shade-num" style="color: {text_color};">{shade}</span>
+                <span class="sem-shade-aa" style="color: {text_color};">{aa_indicator}</span>
+            </div>
+            '''
+        return shades_html
+    
+    def color_row_with_recommendation(hex_val: str, role: str, role_display: str, recommendation: dict = None) -> str:
+        """Generate a color row with optional LLM recommendation."""
+        ramp_html = generate_single_ramp(hex_val)
+        
+        # Calculate contrast
+        try:
+            from core.color_utils import get_contrast_with_white
+            contrast = get_contrast_with_white(hex_val)
+            aa_status = "✓ AA" if contrast >= 4.5 else f"⚠️ {contrast:.1f}:1"
+            aa_class = "aa-ok" if contrast >= 4.5 else "aa-warn"
+        except:
+            aa_status = ""
+            aa_class = ""
+        
+        # LLM recommendation display
+        rec_html = ""
+        if recommendation:
+            suggested = recommendation.get("suggested", "")
+            issue = recommendation.get("issue", "")
+            if suggested and suggested != hex_val:
+                rec_html = f'''
+                <div class="llm-rec">
+                    <span class="rec-label">💡 LLM:</span>
+                    <span class="rec-issue">{issue}</span>
+                    <span class="rec-arrow">→</span>
+                    <span class="rec-suggested" style="background-color: {suggested};">{suggested}</span>
+                </div>
+                '''
+        
+        return f'''
+        <div class="sem-color-row">
+            <div class="sem-color-info">
+                <div class="sem-swatch" style="background-color: {hex_val};"></div>
+                <div class="sem-details">
+                    <div class="sem-role">{role_display}</div>
+                    <div class="sem-hex">{hex_val} <span class="{aa_class}">{aa_status}</span></div>
+                </div>
+            </div>
+            <div class="sem-ramp">{ramp_html}</div>
+            {rec_html}
+        </div>
+        '''
+    
+    def category_section(title: str, icon: str, colors: dict, category_key: str) -> str:
+        """Generate a category section with color rows."""
+        if not colors:
+            return ""
+        
+        rows_html = ""
+        for role, data in colors.items():
+            if data and isinstance(data, dict) and "hex" in data:
+                # Get LLM recommendation for this role
+                rec = None
+                if llm_recommendations:
+                    color_recs = llm_recommendations.get("color_recommendations", {})
+                    rec = color_recs.get(f"{category_key}.{role}", {})
+                
+                role_display = role.replace("_", " ").title()
+                rows_html += color_row_with_recommendation(
+                    data["hex"],
+                    f"{category_key}.{role}",
+                    role_display,
+                    rec
+                )
+        
+        if not rows_html:
+            return ""
+        
+        return f'''
+        <div class="sem-category">
+            <h3 class="sem-cat-title">{icon} {title}</h3>
+            {rows_html}
+        </div>
+        '''
+    
+    # Handle empty analysis
+    if not semantic_analysis:
+        return '''
+        <div style="padding: 40px; text-align: center; background: #fff3cd !important; border-radius: 8px;">
+            <p style="color: #856404 !important; font-size: 14px;">⚠️ No semantic analysis available.</p>
+        </div>
+        '''
+    
+    # Build sections
+    sections_html = ""
+    sections_html += category_section("Brand Colors", "🎨", semantic_analysis.get("brand", {}), "brand")
+    sections_html += category_section("Text Colors", "📝", semantic_analysis.get("text", {}), "text")
+    sections_html += category_section("Background Colors", "🖼️", semantic_analysis.get("background", {}), "background")
+    sections_html += category_section("Border Colors", "📏", semantic_analysis.get("border", {}), "border")
+    sections_html += category_section("Feedback Colors", "🚨", semantic_analysis.get("feedback", {}), "feedback")
+    
+    # LLM Impact Summary
+    llm_summary = ""
+    if llm_recommendations:
+        changes = llm_recommendations.get("changes_made", [])
+        if changes:
+            changes_html = "".join([f"<li>{c}</li>" for c in changes[:5]])
+            llm_summary = f'''
+            <div class="llm-summary">
+                <h4>🤖 LLM Recommendations Applied:</h4>
+                <ul>{changes_html}</ul>
+            </div>
+            '''
+    
+    html = f'''
+    <style>
+        .sem-ramps-preview {{
+            font-family: system-ui, -apple-system, sans-serif;
+            background: #f5f5f5 !important;
+            border-radius: 12px;
+            padding: 20px;
+        }}
+        
+        .sem-category {{
+            background: #ffffff !important;
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 20px;
+            border: 1px solid #d0d0d0 !important;
+        }}
+        
+        .sem-cat-title {{
+            font-size: 16px;
+            font-weight: 700;
+            color: #1a1a1a !important;
+            margin: 0 0 16px 0;
+            padding-bottom: 8px;
+            border-bottom: 2px solid #e0e0e0 !important;
+        }}
+        
+        .sem-color-row {{
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            padding: 12px;
+            background: #f8f8f8 !important;
+            border-radius: 6px;
+            margin-bottom: 12px;
+            border: 1px solid #e0e0e0 !important;
+        }}
+        
+        .sem-color-row:last-child {{
+            margin-bottom: 0;
+        }}
+        
+        .sem-color-info {{
+            display: flex;
+            align-items: center;
+            min-width: 180px;
+            margin-right: 16px;
+        }}
+        
+        .sem-swatch {{
+            width: 48px;
+            height: 48px;
+            border-radius: 8px;
+            border: 2px solid rgba(0,0,0,0.15) !important;
+            margin-right: 12px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }}
+        
+        .sem-details {{
+            flex: 1;
+        }}
+        
+        .sem-role {{
+            font-weight: 700;
+            font-size: 14px;
+            color: #1a1a1a !important;
+            margin-bottom: 4px;
+        }}
+        
+        .sem-hex {{
+            font-size: 12px;
+            font-family: 'SF Mono', Monaco, monospace;
+            color: #333 !important;
+        }}
+        
+        .aa-ok {{
+            color: #166534 !important;
+            font-weight: 600;
+        }}
+        
+        .aa-warn {{
+            color: #b45309 !important;
+            font-weight: 600;
+        }}
+        
+        .sem-ramp {{
+            display: flex;
+            gap: 3px;
+            flex: 1;
+            min-width: 400px;
+        }}
+        
+        .sem-shade {{
+            width: 36px;
+            height: 36px;
+            border-radius: 4px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border: 1px solid rgba(0,0,0,0.1) !important;
+        }}
+        
+        .sem-shade-num {{
+            font-size: 9px;
+            font-weight: 700;
+        }}
+        
+        .sem-shade-aa {{
+            font-size: 10px;
+        }}
+        
+        .llm-rec {{
+            width: 100%;
+            margin-top: 10px;
+            padding: 8px 12px;
+            background: #fef3c7 !important;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            border: 1px solid #f59e0b !important;
+        }}
+        
+        .rec-label {{
+            font-weight: 600;
+            color: #92400e !important;
+        }}
+        
+        .rec-issue {{
+            color: #78350f !important;
+            font-size: 13px;
+        }}
+        
+        .rec-arrow {{
+            color: #92400e !important;
+        }}
+        
+        .rec-suggested {{
+            padding: 4px 10px;
+            border-radius: 4px;
+            font-family: 'SF Mono', Monaco, monospace;
+            font-size: 12px;
+            font-weight: 600;
+            color: #fff !important;
+            text-shadow: 0 1px 2px rgba(0,0,0,0.3);
+        }}
+        
+        .llm-summary {{
+            background: #dbeafe !important;
+            border: 1px solid #3b82f6 !important;
+            border-radius: 8px;
+            padding: 16px;
+            margin-top: 20px;
+        }}
+        
+        .llm-summary h4 {{
+            color: #1e40af !important;
+            margin: 0 0 12px 0;
+            font-size: 14px;
+        }}
+        
+        .llm-summary ul {{
+            margin: 0;
+            padding-left: 20px;
+            color: #1e3a8a !important;
+        }}
+        
+        .llm-summary li {{
+            margin-bottom: 4px;
+            font-size: 13px;
+        }}
+    </style>
+    
+    <div class="sem-ramps-preview">
+        {sections_html}
+        {llm_summary}
+    </div>
+    '''
+    
+    return html
+
+
 # =============================================================================
 # COMBINED PREVIEW
 # =============================================================================