Upload app.py

app.py

@@ -709,7 +709,11 @@ async def run_stage2_analysis(competitors_str: str = "", progress=gr.Progress())
         state.log("")
         state.log("🎨 Generating visual previews...")
         
-        from core.preview_generator import generate_typography_preview_html, generate_color_ramps_preview_html
+        from core.preview_generator import (
+            generate_typography_preview_html, 
+            generate_color_ramps_preview_html,
+            generate_semantic_color_ramps_html
+        )
         
         primary_font = fonts.get("primary", "Open Sans")
         
@@ -737,24 +741,54 @@ async def run_stage2_analysis(competitors_str: str = "", progress=gr.Progress())
             sample_text="The quick brown fox jumps over the lazy dog",
         )
         
-        color_ramps_preview_html = generate_color_ramps_preview_html(
-            color_tokens=color_dict,
-        )
+        # Use semantic color ramps if available, otherwise fallback to regular
+        semantic_analysis = getattr(state, 'semantic_analysis', None)
+        if semantic_analysis:
+            # Extract LLM color recommendations
+            llm_color_recs = {}
+            if final_recs and isinstance(final_recs, dict):
+                llm_color_recs = final_recs.get("color_recommendations", {})
+                # Also add accessibility fixes
+                aa_fixes = final_recs.get("accessibility_fixes", [])
+                if aa_fixes:
+                    llm_color_recs["changes_made"] = [
+                        f"AA fix suggested for {f.get('color', '?')}" 
+                        for f in aa_fixes if isinstance(f, dict)
+                    ][:5]
+            
+            color_ramps_preview_html = generate_semantic_color_ramps_html(
+                semantic_analysis=semantic_analysis,
+                color_tokens=color_dict,
+                llm_recommendations={"color_recommendations": llm_color_recs} if llm_color_recs else None,
+            )
+            state.log("   ✅ Semantic color ramps preview generated (with LLM recommendations)")
+        else:
+            color_ramps_preview_html = generate_color_ramps_preview_html(
+                color_tokens=color_dict,
+            )
+            state.log("   ✅ Color ramps preview generated (no semantic data)")
         
-        state.log("   ✅ Visual previews generated")
+        state.log("   ✅ Typography preview generated")
+        
+        # Generate LLM recommendations display
+        llm_recs_html = format_llm_color_recommendations_html(final_recs, semantic_analysis)
+        llm_recs_table = format_llm_color_recommendations_table(final_recs, semantic_analysis)
+        
+        state.log("   ✅ LLM recommendations formatted")
         
         progress(1.0, desc="✅ Analysis complete!")
         
         return (status, state.get_logs(), brand_md, font_families_md,
                 typography_desktop_data, typography_mobile_data, spacing_data, 
                 base_colors_md, color_ramps_md, radius_md, shadows_md,
-                typography_preview_html, color_ramps_preview_html)
+                typography_preview_html, color_ramps_preview_html,
+                llm_recs_html, llm_recs_table)
         
     except Exception as e:
         import traceback
         state.log(f"❌ Error: {str(e)}")
         state.log(traceback.format_exc())
-        return (f"❌ Analysis failed: {str(e)}", state.get_logs(), "", "", None, None, None, "", "", "", "", "", "")
+        return (f"❌ Analysis failed: {str(e)}", state.get_logs(), "", "", None, None, None, "", "", "", "", "", "", "", [])
 
 
 def normalized_to_dict(normalized) -> dict:
@@ -1052,6 +1086,303 @@ def format_font_families_display(fonts: dict) -> str:
     return "\n".join(lines)
 
 
+def format_llm_color_recommendations_html(final_recs: dict, semantic_analysis: dict) -> str:
+    """Generate HTML showing LLM color recommendations with before/after comparison."""
+    
+    if not final_recs:
+        return '''
+        <div style="padding: 20px; background: #f0f0f0 !important; border-radius: 8px; text-align: center;">
+            <p style="color: #666 !important;">No LLM recommendations available yet. Run analysis first.</p>
+        </div>
+        '''
+    
+    color_recs = final_recs.get("color_recommendations", {})
+    aa_fixes = final_recs.get("accessibility_fixes", [])
+    
+    if not color_recs and not aa_fixes:
+        return '''
+        <div style="padding: 20px; background: #d4edda !important; border-radius: 8px; border: 1px solid #28a745;">
+            <p style="color: #155724 !important; margin: 0;">✅ No color changes recommended. Your colors look good!</p>
+        </div>
+        '''
+    
+    # Build recommendations HTML
+    recs_html = ""
+    
+    # Process color recommendations
+    for role, rec in color_recs.items():
+        if not isinstance(rec, dict):
+            continue
+        if role in ["generate_ramps_for", "changes_made"]:
+            continue
+            
+        current = rec.get("current", "?")
+        suggested = rec.get("suggested", current)
+        action = rec.get("action", "keep")
+        rationale = rec.get("rationale", "")
+        
+        if action == "keep" or suggested == current:
+            # No change needed
+            recs_html += f'''
+            <div class="llm-rec-row keep">
+                <div class="rec-color-box" style="background: {current};"></div>
+                <div class="rec-details">
+                    <span class="rec-role">{role}</span>
+                    <span class="rec-current">{current}</span>
+                    <span class="rec-action keep">✓ Keep</span>
+                </div>
+            </div>
+            '''
+        else:
+            # Change suggested
+            recs_html += f'''
+            <div class="llm-rec-row change">
+                <div class="rec-comparison">
+                    <div class="rec-before">
+                        <div class="rec-color-box" style="background: {current};"></div>
+                        <span class="rec-label">Before</span>
+                        <span class="rec-hex">{current}</span>
+                    </div>
+                    <span class="rec-arrow">→</span>
+                    <div class="rec-after">
+                        <div class="rec-color-box" style="background: {suggested};"></div>
+                        <span class="rec-label">After</span>
+                        <span class="rec-hex">{suggested}</span>
+                    </div>
+                </div>
+                <div class="rec-details">
+                    <span class="rec-role">{role}</span>
+                    <span class="rec-rationale">{rationale[:80]}...</span>
+                </div>
+            </div>
+            '''
+    
+    # Process accessibility fixes
+    for fix in aa_fixes:
+        if not isinstance(fix, dict):
+            continue
+        
+        color = fix.get("color", "?")
+        role = fix.get("role", "unknown")
+        issue = fix.get("issue", "contrast issue")
+        fix_color = fix.get("fix", color)
+        current_contrast = fix.get("current_contrast", "?")
+        fixed_contrast = fix.get("fixed_contrast", "?")
+        
+        if fix_color and fix_color != color:
+            recs_html += f'''
+            <div class="llm-rec-row aa-fix">
+                <div class="rec-comparison">
+                    <div class="rec-before">
+                        <div class="rec-color-box" style="background: {color};"></div>
+                        <span class="rec-label">⚠️ {current_contrast}:1</span>
+                        <span class="rec-hex">{color}</span>
+                    </div>
+                    <span class="rec-arrow">→</span>
+                    <div class="rec-after">
+                        <div class="rec-color-box" style="background: {fix_color};"></div>
+                        <span class="rec-label">✓ {fixed_contrast}:1</span>
+                        <span class="rec-hex">{fix_color}</span>
+                    </div>
+                </div>
+                <div class="rec-details">
+                    <span class="rec-role">{role}</span>
+                    <span class="rec-issue">🔴 {issue}</span>
+                </div>
+            </div>
+            '''
+    
+    if not recs_html:
+        return '''
+        <div style="padding: 20px; background: #d4edda !important; border-radius: 8px; border: 1px solid #28a745;">
+            <p style="color: #155724 !important; margin: 0;">✅ No color changes recommended. Your colors look good!</p>
+        </div>
+        '''
+    
+    html = f'''
+    <style>
+        .llm-recs-container {{
+            font-family: system-ui, -apple-system, sans-serif;
+            background: #f5f5f5 !important;
+            border-radius: 12px;
+            padding: 16px;
+        }}
+        
+        .llm-rec-row {{
+            display: flex;
+            align-items: center;
+            padding: 12px;
+            margin-bottom: 12px;
+            border-radius: 8px;
+            background: #ffffff !important;
+            border: 1px solid #e0e0e0 !important;
+        }}
+        
+        .llm-rec-row.change {{
+            border-left: 4px solid #f59e0b !important;
+        }}
+        
+        .llm-rec-row.aa-fix {{
+            border-left: 4px solid #dc2626 !important;
+            background: #fef2f2 !important;
+        }}
+        
+        .llm-rec-row.keep {{
+            border-left: 4px solid #22c55e !important;
+            background: #f0fdf4 !important;
+        }}
+        
+        .rec-comparison {{
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-right: 20px;
+        }}
+        
+        .rec-before, .rec-after {{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 4px;
+        }}
+        
+        .rec-color-box {{
+            width: 48px;
+            height: 48px;
+            border-radius: 8px;
+            border: 2px solid rgba(0,0,0,0.15) !important;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }}
+        
+        .rec-label {{
+            font-size: 11px;
+            font-weight: 600;
+            color: #666 !important;
+        }}
+        
+        .rec-hex {{
+            font-family: 'SF Mono', Monaco, monospace;
+            font-size: 11px;
+            color: #333 !important;
+        }}
+        
+        .rec-arrow {{
+            font-size: 20px;
+            color: #666 !important;
+            font-weight: bold;
+        }}
+        
+        .rec-details {{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 4px;
+        }}
+        
+        .rec-role {{
+            font-weight: 700;
+            font-size: 14px;
+            color: #1a1a1a !important;
+        }}
+        
+        .rec-action {{
+            font-size: 12px;
+            padding: 2px 8px;
+            border-radius: 4px;
+        }}
+        
+        .rec-action.keep {{
+            background: #dcfce7 !important;
+            color: #166534 !important;
+        }}
+        
+        .rec-rationale {{
+            font-size: 12px;
+            color: #666 !important;
+        }}
+        
+        .rec-issue {{
+            font-size: 12px;
+            color: #991b1b !important;
+            font-weight: 500;
+        }}
+    </style>
+    
+    <div class="llm-recs-container">
+        {recs_html}
+    </div>
+    '''
+    
+    return html
+
+
+def format_llm_color_recommendations_table(final_recs: dict, semantic_analysis: dict) -> list:
+    """Generate table data for LLM color recommendations with accept/reject checkboxes."""
+    
+    rows = []
+    
+    if not final_recs:
+        return rows
+    
+    color_recs = final_recs.get("color_recommendations", {})
+    aa_fixes = final_recs.get("accessibility_fixes", [])
+    
+    # Process color recommendations
+    for role, rec in color_recs.items():
+        if not isinstance(rec, dict):
+            continue
+        if role in ["generate_ramps_for", "changes_made"]:
+            continue
+            
+        current = rec.get("current", "?")
+        suggested = rec.get("suggested", current)
+        action = rec.get("action", "keep")
+        rationale = rec.get("rationale", "")[:50]
+        
+        if action != "keep" and suggested != current:
+            # Calculate contrast improvement
+            try:
+                from core.color_utils import get_contrast_with_white
+                old_contrast = get_contrast_with_white(current)
+                new_contrast = get_contrast_with_white(suggested)
+                contrast_str = f"{old_contrast:.1f} → {new_contrast:.1f}"
+            except:
+                contrast_str = "?"
+            
+            rows.append([
+                True,  # Accept checkbox (default True)
+                role,
+                current,
+                rationale or action,
+                suggested,
+                contrast_str,
+            ])
+    
+    # Process accessibility fixes
+    for fix in aa_fixes:
+        if not isinstance(fix, dict):
+            continue
+        
+        color = fix.get("color", "?")
+        role = fix.get("role", "unknown")
+        issue = fix.get("issue", "contrast")[:40]
+        fix_color = fix.get("fix", color)
+        current_contrast = fix.get("current_contrast", "?")
+        fixed_contrast = fix.get("fixed_contrast", "?")
+        
+        if fix_color and fix_color != color:
+            rows.append([
+                True,  # Accept checkbox
+                f"{role} (AA fix)",
+                color,
+                issue,
+                fix_color,
+                f"{current_contrast}:1 → {fixed_contrast}:1",
+            ])
+    
+    return rows
+
+
 def format_typography_comparison_viewport(normalized_tokens, base_size: int, viewport: str) -> list:
     """Format typography comparison for a specific viewport."""
     if not normalized_tokens:
@@ -1304,8 +1635,8 @@ def snap_to_grid(value: float, base: int) -> int:
     return round(value / base) * base
 
 
-def apply_selected_upgrades(type_choice: str, spacing_choice: str, apply_ramps: bool):
-    """Apply selected upgrade options."""
+def apply_selected_upgrades(type_choice: str, spacing_choice: str, apply_ramps: bool, color_recs_table: list = None):
+    """Apply selected upgrade options including LLM color recommendations."""
     if not state.upgrade_recommendations:
         return "❌ Run analysis first", ""
     
@@ -1322,6 +1653,39 @@ def apply_selected_upgrades(type_choice: str, spacing_choice: str, apply_ramps:
     state.log(f"   Spacing: {spacing_choice}")
     state.log(f"   Color Ramps: {'Yes' if apply_ramps else 'No'}")
     
+    # Process accepted color recommendations
+    accepted_color_changes = []
+    if color_recs_table:
+        state.log("")
+        state.log("   🎨 LLM Color Recommendations:")
+        for row in color_recs_table:
+            if len(row) >= 5:
+                accept = row[0]  # Boolean checkbox
+                role = row[1]    # Role name
+                current = row[2] # Current color
+                issue = row[3]   # Issue description
+                suggested = row[4]  # Suggested color
+                
+                if accept and suggested and current != suggested:
+                    accepted_color_changes.append({
+                        "role": role,
+                        "from": current,
+                        "to": suggested,
+                        "reason": issue,
+                    })
+                    state.log(f"   ├─ ✅ ACCEPTED: {role}")
+                    state.log(f"   │  └─ {current} → {suggested}")
+                elif not accept:
+                    state.log(f"   ├─ ❌ REJECTED: {role} (keeping {current})")
+    
+    # Store accepted changes
+    state.selected_upgrades["color_changes"] = accepted_color_changes
+    
+    if accepted_color_changes:
+        state.log("")
+        state.log(f"   📊 {len(accepted_color_changes)} color change(s) will be applied to export")
+    
+    state.log("")
     state.log("✅ Upgrades applied! Proceed to Stage 3 for export.")
     
     return "✅ Upgrades applied! Proceed to Stage 3 to export.", state.get_logs()
@@ -2021,13 +2385,33 @@ def create_ui():
                     gr.Markdown("*Font family will be preserved. Sizes rounded to even numbers.*")
             
             # =============================================================
-            # COLORS SECTION - Base Colors + Ramps
+            # COLORS SECTION - Base Colors + Ramps + LLM Recommendations
             # =============================================================
             gr.Markdown("---")
             gr.Markdown("## 🎨 Colors")
             
+            # LLM Recommendations Section (NEW)
+            with gr.Accordion("🤖 LLM Color Recommendations", open=True):
+                gr.Markdown("""
+                *The LLMs analyzed your colors and made these suggestions. Accept or reject each one.*
+                """)
+                
+                llm_color_recommendations = gr.HTML(
+                    value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>LLM recommendations will appear after analysis...</div>",
+                    label="LLM Recommendations"
+                )
+                
+                # Accept/Reject table for color recommendations
+                color_recommendations_table = gr.Dataframe(
+                    headers=["Accept", "Role", "Current", "Issue", "Suggested", "Contrast"],
+                    datatype=["bool", "str", "str", "str", "str", "str"],
+                    label="Color Recommendations",
+                    interactive=True,
+                    col_count=(6, "fixed"),
+                )
+            
             # Visual Preview
-            with gr.Accordion("👁️ Color Ramps Visual Preview", open=True):
+            with gr.Accordion("👁️ Color Ramps Visual Preview (Semantic Groups)", open=True):
                 stage2_color_ramps_preview = gr.HTML(
                     value="<div style='padding: 20px; background: #f5f5f5; border-radius: 8px; color: #666;'>Color ramps preview will appear after analysis...</div>",
                     label="Color Ramps Preview"
@@ -2164,13 +2548,14 @@ def create_ui():
             outputs=[stage2_status, stage2_log, brand_comparison, font_families_display,
                      typography_desktop, typography_mobile, spacing_comparison, 
                      base_colors_display, color_ramps_display, radius_display, shadows_display,
-                     stage2_typography_preview, stage2_color_ramps_preview],
+                     stage2_typography_preview, stage2_color_ramps_preview,
+                     llm_color_recommendations, color_recommendations_table],
         )
         
         # Stage 2: Apply upgrades
         apply_upgrades_btn.click(
             fn=apply_selected_upgrades,
-            inputs=[type_scale_radio, spacing_radio, color_ramps_checkbox],
+            inputs=[type_scale_radio, spacing_radio, color_ramps_checkbox, color_recommendations_table],
             outputs=[apply_status, stage2_log],
         )