import gradio as gr

# Color options with their hex codes
COLORS = {
    "red": "#FF0000",
    "yellow": "#FFD700",
    "green": "#00FF00",
    "blue": "#0000FF",
    "indigo": "#4B0082",
    "purple": "#800080",
    "pink": "#FFC0CB",
    "gray": "#808080"
}

def create_gradient(color_from, color_to):
    # Create HTML with gradient background
    html = f"""
    <div style="
        width: 200px;
        height: 200px;
        background: linear-gradient(45deg, {COLORS[color_from]}, {COLORS[color_to]});
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    "></div>
    """
    return html

# Create the Gradio interface
with gr.Blocks() as demo:
    gr.Markdown("# Gradient Color Preview")
    gr.Markdown("Select colors to preview how they would look in your space's thumbnail.")
    
    with gr.Row():
        color_from = gr.Dropdown(
            choices=list(COLORS.keys()),
            value="blue",
            label="Color From"
        )
        color_to = gr.Dropdown(
            choices=list(COLORS.keys()),
            value="purple",
            label="Color To"
        )
    
    preview = gr.HTML(label="Preview")
    
    # Update preview when colors change
    color_from.change(
        fn=create_gradient,
        inputs=[color_from, color_to],
        outputs=preview
    )
    color_to.change(
        fn=create_gradient,
        inputs=[color_from, color_to],
        outputs=preview
    )
    
    # Initial preview
    preview.value = create_gradient("blue", "purple")

if __name__ == "__main__":
    demo.launch()