import gradio as gr
from g4f.client import Client

client = Client()

# Supported models and styles
MODEL_CHOICES = [
    "DALL E 3",
    "dall-e-3",
    "midjourney",
    "stablediffusion",
    "pollinations"
]

IMAGE_STYLES = [
    "photographic", "anime", "painting", "digital-art",
    "cinematic", "3d-model", "pixel-art", "fantasy"
]

SAMPLING_METHODS = [
    "Euler", "Euler a", "DDIM", "DPM++ 2M Karras", "LMS"
]

def generate_image(
    prompt, negative_prompt,
    model, style,
    width, height,
    sampling_method, sampling_steps
):
    """
    Generates an image using the g4f client based on the provided parameters.
    Returns the URL of the generated image and a status message.
    """
    try:
        response = client.images.generate(
            model=model,
            prompt=prompt,
            negativePrompt=negative_prompt,
            imageStyle=style,
            width=width,
            height=height,
            samplingMethod=sampling_method,
            samplingSteps=sampling_steps,
            response_format="url"
        )
        image_url = response.data[0].url
        return image_url, f"✅ Image generated. URL: {image_url}"
    except Exception as e:
        return None, f"❌ Error: {str(e)}"

# --- Custom Theme Definition ---
# This theme provides a vibrant color palette, modern typography, and refined spacing.
# Subtle animations are handled by Gradio's default element transitions enhanced by CSS.
custom_theme = gr.themes.Base(
    primary_hue=gr.themes.Color(
        c50="#FDE6E8", c100="#FAD2D8", c200="#F5A7B3", c300="#F07C8E", c400="#EB5169",
        c500="#E62645", c600="#CD223E", c700="#B41D37", c800="#9B1930", c900="#821429",
        c950="#410A14"
    ), # Custom vibrant red/pink hue for primary elements
    secondary_hue="blue", # Complementary blue hue
    neutral_hue="gray", # Neutral shades for backgrounds and borders
    font=[gr.themes.GoogleFont("Poppins"), "ui-sans-serif", "system-ui", "sans-serif"], # Modern sans-serif font
    spacing_size=gr.themes.sizes.spacing_md, # Standard spacing size for balance
    radius_size=gr.themes.sizes.radius_md # Standard border radius for modern feel
)
# The `set()` method arguments that caused the `TypeError` have been removed.
# Gradio themes handle these defaults, or they can be adjusted via CSS if necessary.

# --- Custom CSS for Dynamic Header and Modern UI Elements ---
# This CSS handles the background photo for the header,
# subtle animations on interactive elements, and improved typography/spacing.
app_css = """
/* Dynamic Header with Background Photo */
#custom-header-container {
    background-image: url('https://surl.li/ofirja'); /* Background photo for the header */
    background-size: cover; /* Cover the entire area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */
    color: white; /* Text color for header content */
    padding: 50px 20px; /* Ample padding for visual appeal */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.8); /* Shadow for text readability */
    border-radius: var(--radius-md); /* Match theme's border radius */
    margin-bottom: var(--spacing-lg); /* Space below the header */
}

#custom-header-container h1 {
    color: white; /* Ensure the main title is white */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 10px; /* Space below title */
}

#custom-header-container p {
    color: white; /* Ensure paragraph text is white */
    margin-bottom: 0; /* Remove default bottom margin */
}

/* Modern UI Elements: Typography and Spacing enhancements */
.gradio-input, .gradio-dropdown, .gradio-number {
    border-radius: var(--radius-md); /* Apply theme's border radius */
    box-shadow: var(--shadow-md); /* Apply theme's shadow */
    padding: var(--spacing-sm) var(--spacing-md); /* Adjust padding */
    font-family: var(--font); /* Apply theme's font */
}

/* Subtle Animations for Buttons */
.gradio-button {
    border-radius: var(--radius-md); /* Apply theme's border radius */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}
.gradio-button:hover {
    transform: translateY(-2px); /* Slight lift effect on hover */
    box-shadow: var(--shadow-lg); /* Enhance shadow on hover */
}

/* Footer Styling */
#custom-footer-container {
    padding: 20px; /* Padding around footer content */
    text-align: center; /* Center align footer text */
    font-size: 0.85em; /* Slightly smaller font size */
    color: var(--neutral-600); /* Neutral color for footer text */
    border-top: 1px solid var(--neutral-100); /* Subtle top border */
    margin-top: var(--spacing-lg); /* Space above the footer */
}
"""

with gr.Blocks(title="🖼️ lumaGPT Image", theme=custom_theme, css=app_css) as demo:
    # Dynamic Header and Branding
    gr.Markdown(
        """
        <div id="custom-header-container" style="text-align:center;">
            <h1>🖼️ lumaGPT Image</h1>
            <p>Unleash your creativity with AI-powered image generation.</p>
        </div>
        """
    )

    gr.Markdown("""
    <div style="text-align:center; padding: 20px;">
        <p>Enter a description of the image, select the model and size.</p>
    </div>
    """)

    # Improved Layout with Panels
    with gr.Row():
        with gr.Column(scale=2, min_width=300): # Input parameters column
            gr.Markdown("## 🎨 Image Generation Parameters")
            prompt = gr.Textbox(label="Image Description", lines=3, placeholder="Example: A cyberpunk city at night", elem_id="prompt-input")
            negative_prompt = gr.Textbox(label="What NOT to include", lines=2, placeholder="e.g., bad quality, blur", elem_id="negative-prompt-input")

            gr.Markdown("### Model and Style Selection")
            with gr.Row():
                model = gr.Dropdown(choices=MODEL_CHOICES, label="Model", value="DALL E 3", elem_id="model-dropdown")
                style = gr.Dropdown(choices=IMAGE_STYLES, label="Image Style", value="photographic", elem_id="style-dropdown")

            gr.Markdown("### Image Dimensions")
            with gr.Row():
                width = gr.Number(label="Width", value=1024, precision=0, elem_id="width-input")
                height = gr.Number(label="Height", value=1024, precision=0, elem_id="height-input")

            gr.Markdown("### Advanced Sampling Options")
            with gr.Row():
                sampling_method = gr.Dropdown(choices=SAMPLING_METHODS, label="Sampling Method", value="Euler", elem_id="sampling-method-dropdown")
                sampling_steps = gr.Number(label="Sampling Steps", value=25, precision=0, elem_id="sampling-steps-input")

            btn = gr.Button("🎨 Generate Image", variant="primary", elem_id="generate-button")

        with gr.Column(scale=3, min_width=400): # Output image column
            gr.Markdown("## ✨ Generated Image Result")
            output_img = gr.Image(label="Result", type="pil", elem_id="output-image", height="auto") # Responsive image height
            status = gr.Textbox(label="Status", interactive=False, elem_id="status-textbox")

    btn.click(
        fn=generate_image,
        inputs=[
            prompt, negative_prompt,
            model, style,
            width, height,
            sampling_method, sampling_steps
        ],
        outputs=[output_img, status]
    )

    # Informative Footer
    gr.Markdown(
        """
        <div id="custom-footer-container">
            <p>&copy; 2025 lumaGPT Image. All rights reserved.</p>
            <p>For support or feedback, please contact us at <a href="mailto:splumagpt@gmail.com">splumagpt@gmail.com</a>.</p>
        </div>
        """
    )

demo.launch()