app.py

import gradio as gr
import random
import time
from typing import Dict, List, Tuple, Optional
import json

# Mock LLM UI generators (simulating different LLM responses)
def generate_ui_llm1(prompt: str, style: str = "modern") -> str:
    """Simulate LLM 1 generating UI code"""
    time.sleep(0.5)  # Simulate API call
    
    ui_templates = {
        "form": f"""
with gr.Blocks() as ui1:
    gr.Markdown("# {prompt.title()} - Generated by LLM 1")
    gr.Textbox(label="Name", placeholder="Enter your name")
    gr.Number(label="Age", minimum=1, maximum=120)
    gr.Dropdown(["Option A", "Option B", "Option C"], label="Choice")
    gr.Button("Submit", variant="primary")
""",
        "dashboard": f"""
with gr.Blocks() as ui1:
    gr.Markdown("## {prompt.title()} Dashboard - LLM 1")
    with gr.Row():
        with gr.Column():
            gr.Number(label="Metric 1", value=42)
            gr.Number(label="Metric 2", value=128)
        with gr.Column():
            gr.BarPlot(value={{"categories": ["A", "B", "C"], "values": [10, 20, 30]}})
    gr.Button("Refresh Data")
""",
        "chat": f"""
with gr.Blocks() as ui1:
    gr.Markdown("# {prompt.title()} Chat - LLM 1")
    chatbot = gr.Chatbot()
    msg = gr.Textbox(label="Message", placeholder="Type your message...")
    gr.Button("Send")
""",
        "data": f"""
with gr.Blocks() as ui1:
    gr.Markdown("## {prompt.title()} Data View - LLM 1")
    gr.Dataframe(
        headers=["Name", "Score", "Status"],
        value=[["Alice", 95, "Active"], ["Bob", 87, "Pending"], ["Charlie", 92, "Active"]]
    )
    gr.Button("Export")
"""
    }
    
    # Choose template based on prompt keywords
    keywords = prompt.lower()
    if "form" in keywords or "input" in keywords:
        return ui_templates["form"]
    elif "dashboard" in keywords or "metric" in keywords or "chart" in keywords:
        return ui_templates["dashboard"]
    elif "chat" in keywords or "message" in keywords:
        return ui_templates["chat"]
    else:
        return ui_templates["data"]

def generate_ui_llm2(prompt: str, style: str = "minimal") -> str:
    """Simulate LLM 2 generating UI code"""
    time.sleep(0.5)  # Simulate API call
    
    ui_templates = {
        "form": f'''
with gr.Blocks() as ui2:
    gr.Markdown(f"### {prompt.title()} - LLM 2 Design")
    with gr.Group():
        gr.Textbox(label="Full Name", info="Enter your full name")
        gr.Slider(1, 100, value=25, label="Age Range")
        gr.Radio(["Choice 1", "Choice 2", "Choice 3"], label="Selection")
    with gr.Row():
        gr.Button("Submit", variant="primary")
        gr.Button("Reset")
''',
        "dashboard": f'''
with gr.Blocks() as ui2:
    gr.Markdown(f"## {prompt.title()} Analytics - LLM 2")
    with gr.Row():
        gr.LinePlot(value={{"x": [1,2,3,4], "y": [10,20,15,25]}})
        gr.ScatterPlot(value={{"x": [1,2,3,4], "y": [5,15,10,20]}})
    gr.Number(label="Total", value=100)
''',
        "chat": f'''
with gr.Blocks() as ui2:
    gr.Markdown(f"# {prompt.title()} Assistant - LLM 2")
    with gr.Row():
        with gr.Column(scale=3):
            chatbot = gr.Chatbot(height=400)
        with gr.Column(scale=1):
            gr.Dropdown(["Greeting", "Question", "Feedback"], label="Quick Actions")
    msg = gr.Textbox(label="Your input", placeholder="Ask anything...")
''',
        "data": f'''
with gr.Blocks() as ui2:
    gr.Markdown(f"## {prompt.title()} Explorer - LLM 2")
    gr.JSON(value={{"data": [{"id": 1, "name": "Item 1"}, {"id": 2, "name": "Item 2"}]}})
    gr.FileExplorer()
'''
    }
    
    # Choose template based on prompt keywords
    keywords = prompt.lower()
    if "form" in keywords or "input" in keywords:
        return ui_templates["form"]
    elif "dashboard" in keywords or "metric" in keywords or "chart" in keywords:
        return ui_templates["dashboard"]
    elif "chat" in keywords or "message" in keywords:
        return ui_templates["chat"]
    else:
        return ui_templates["data"]

class UIArena:
    def __init__(self):
        self.votes: Dict[str, int] = {"LLM 1": 0, "LLM 2": 0, "Tie": 0}
        self.current_comparison: Optional[Tuple[str, str]] = None
        
    def generate_comparison(self, prompt: str) -> Tuple[str, str, str]:
        """Generate UI code from both LLMs and update comparison"""
        ui1_code = generate_ui_llm1(prompt)
        ui2_code = generate_ui_llm2(prompt)
        
        self.current_comparison = (ui1_code, ui2_code)
        
        # Create visual previews (simplified for demonstration)
        preview1 = self.create_preview(ui1_code, "LLM 1")
        preview2 = self.create_preview(ui2_code, "LLM 2")
        
        return preview1, preview2, f"Comparison generated for: '{prompt}'"
    
    def create_preview(self, ui_code: str, llm_name: str) -> str:
        """Create a visual preview of the UI code"""
        return f"""
### {llm_name} Generated UI

{ui_code}
**Style Analysis:**
- Components: {ui_code.count('gr.') - ui_code.count('gr.Blocks')}
- Layout: {'Row & Column' if 'Row' in ui_code and 'Column' in ui_code else 'Single Column'}
- Variants: {'Yes' if 'variant=' in ui_code else 'No'}
"""
    
    def vote(self, choice: str) -> Tuple[str, str, str]:
        """Register a vote"""
        if choice in self.votes:
            self.votes[choice] += 1
        
        total_votes = sum(self.votes.values())
        if total_votes == 0:
            stats_text = "No votes yet"
        else:
            stats_text = "## Voting Results\n\n"
            for model, votes in self.votes.items():
                percentage = (votes / total_votes) * 100
                stats_text += f"**{model}**: {votes} votes ({percentage:.1f}%)\n"
        
        return f"Voted for {choice}!", stats_text, ""
    
    def get_stats(self) -> str:
        """Get current voting statistics"""
        total_votes = sum(self.votes.values())
        if total_votes == 0:
            return "No votes recorded yet. Generate a comparison and vote!"
        
        stats = "## 📊 UI Arena Statistics\n\n"
        for model, votes in self.votes.items():
            percentage = (votes / total_votes) * 100
            bar_length = int(percentage / 5)
            bar = "█" * bar_length + "░" * (20 - bar_length)
            stats += f"**{model}**: {votes} votes ({percentage:.1f}%)\n"
            stats += f"`{bar}`\n\n"
        
        stats += f"**Total Votes**: {total_votes}\n"
        
        if total_votes > 0:
            winner = max(self.votes, key=self.votes.get)
            if self.votes[winner] == max(self.votes.values()):
                stats += f"**Current Leader**: {winner}"
        
        return stats
    
    def reset_arena(self) -> Tuple[str, str, str, str]:
        """Reset the arena"""
        self.votes = {"LLM 1": 0, "LLM 2": 0, "Tie": 0}
        self.current_comparison = None
        return "", "", "Arena reset. Ready for new comparisons!", self.get_stats()

# Initialize arena
arena = UIArena()

def create_demo():
    """Create the main demo interface"""
    
    # Custom CSS for better layout
    custom_css = """
    .arena-container {
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 20px;
        margin: 10px;
    }
    .comparison-box {
        min-height: 400px;
        border: 1px solid #d0d0d0;
        border-radius: 8px;
        padding: 15px;
        background: #f9f9f9;
    }
    .vote-button {
        margin: 5px;
        min-width: 120px;
    }
    """
    
    with gr.Blocks() as demo:
        gr.HTML("""
        <div style='text-align: center; margin-bottom: 20px;'>
            <h1>🏟️ UI Arena</h1>
            <p>Compare UIs generated by two different LLMs side by side</p>
            <p><a href='https://huggingface.co/spaces/akhaliq/anycoder' target='_blank'>Built with anycoder</a></p>
        </div>
        """)
        
        with gr.Row():
            with gr.Column(scale=2):
                gr.Markdown("## 🎯 Generate Comparison")
                
                with gr.Row():
                    prompt_input = gr.Textbox(
                        label="UI Description Prompt",
                        placeholder="Describe the UI you want to generate (e.g., 'Create a user registration form', 'Build a metrics dashboard')",
                        lines=2
                    )
                
                with gr.Row():
                    generate_btn = gr.Button("🚀 Generate UIs", variant="primary", scale=2)
                    reset_btn = gr.Button("🔄 Reset Arena", variant="secondary", scale=1)
                
                status_output = gr.Textbox(label="Status", interactive=False)
            
            with gr.Column(scale=1):
                gr.Markdown("## 📈 Live Statistics")
                stats_display = gr.Markdown(arena.get_stats())
        
        gr.Markdown("---")
        
        with gr.Row():
            gr.Markdown("## 🔬 Side-by-Side Comparison", elem_classes="arena-container")
        
        with gr.Row():
            with gr.Column():
                gr.Markdown("### LLM 1 Output", elem_id="llm1-header")
                ui1_output = gr.Markdown(
                    "Waiting for generation...",
                    elem_classes=["comparison-box"]
                )
                
            with gr.Column():
                gr.Markdown("### LLM 2 Output", elem_id="llm2-header")
                ui2_output = gr.Markdown(
                    "Waiting for generation...",
                    elem_classes=["comparison-box"]
                )
        
        with gr.Row():
            gr.Markdown("## 🗳️ Vote for Your Favorite")
        
        with gr.Row():
            vote_status = gr.Textbox(label="Vote Status", interactive=False)
        
        with gr.Row():
            with gr.Column():
                vote_llm1_btn = gr.Button("👍 Vote for LLM 1", variant="primary", elem_classes=["vote-button"])
            
            with gr.Column():
                vote_tie_btn = gr.Button("🤝 It's a Tie", variant="secondary", elem_classes=["vote-button"])
            
            with gr.Column():
                vote_llm2_btn = gr.Button("👍 Vote for LLM 2", variant="primary", elem_classes=["vote-button"])
        
        # Event handlers
        generate_btn.click(
            fn=arena.generate_comparison,
            inputs=[prompt_input],
            outputs=[ui1_output, ui2_output, status_output]
        ).then(
            fn=arena.get_stats,
            outputs=[stats_display]
        )
        
        reset_btn.click(
            fn=arena.reset_arena,
            outputs=[ui1_output, ui2_output, status_output, stats_display]
        )
        
        vote_llm1_btn.click(
            fn=lambda: arena.vote("LLM 1"),
            outputs=[vote_status, stats_display, ui1_output]
        )
        
        vote_llm2_btn.click(
            fn=lambda: arena.vote("LLM 2"),
            outputs=[vote_status, stats_display, ui2_output]
        )
        
        vote_tie_btn.click(
            fn=lambda: arena.vote("Tie"),
            outputs=[vote_status, stats_display, ui1_output]
        )
        
        # Auto-refresh stats periodically
        timer = gr.Timer(2)
        timer.tick(fn=arena.get_stats, outputs=[stats_display])
    
    return demo

# Create and launch the demo
if __name__ == "__main__":
    demo = create_demo()
    demo.launch(
        theme=gr.themes.Soft(
            primary_hue="blue",
            secondary_hue="indigo",
            neutral_hue="slate",
            text_size="lg",
            spacing_size="lg",
            radius_size="md"
        ),
        css="""
        .arena-container {
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            padding: 20px;
            margin: 10px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .comparison-box {
            min-height: 400px;
            border: 1px solid #d0d0d0;
            border-radius: 8px;
            padding: 15px;
            background: #f8f9fa;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .vote-button {
            margin: 5px;
            min-width: 120px;
            transition: all 0.3s ease;
        }
        .vote-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        """,
        footer_links=[
            {"label": "Built with anycoder", "url": "https://huggingface.co/spaces/akhaliq/anycoder"}
        ]
    )