import gradio as gr
import models

# Global flag to ensure models are loaded and compiled only once
# In a multi-file setup, load_and_compile_models should be called once globally
# before the Gradio app is launched.
# This assumes models.py gets imported and its global functions run.
# Alternatively, it could be called within a gr.Blocks.load event, but that's per-session.
# For AoT, it must be during startup.

with gr.Blocks(css=".container { max-width: 1200px; margin: auto; }") as demo:
    gr.HTML("""
        <div style="text-align: center; margin-bottom: 20px;">
            <h1 style="font-size: 2.5em; color: #333;">🎨 SDXL IP-Adapter Image Remixer</h1>
            <p style="font-size: 1.1em; color: #555;">Drag up to three reference images, add a text prompt, and let the AI remix them into something new!</p>
            <p style="font-size: 0.9em; color: #777;">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="color: #007bff; text-decoration: none;">anycoder</a></p>
        </div>
    """)

    with gr.Column(elem_classes="container"):
        with gr.Row():
            image_input_1 = gr.Image(label="Reference Image 1 (Optional)", type="pil", height=256, sources=["upload", "clipboard"], interactive=True)
            image_input_2 = gr.Image(label="Reference Image 2 (Optional)", type="pil", height=256, sources=["upload", "clipboard"], interactive=True)
            image_input_3 = gr.Image(label="Reference Image 3 (Optional)", type="pil", height=256, sources=["upload", "clipboard"], interactive=True)

        prompt_input = gr.Textbox(
            label="Prompt",
            placeholder="A whimsical creature made of clouds and starlight, fantastical, vivid colors, highly detailed, 4k",
            lines=2,
            interactive=True,
        )

        generate_btn = gr.Button("Remix Images", variant="primary")

        output_gallery = gr.Gallery(
            label="Generated Images",
            columns=2, rows=1, height=512, object_fit="contain",
            allow_preview=True,
            interactive=False,
        )

        # Event listener for the generate button
        generate_btn.click(
            fn=models.remix_images,
            inputs=[prompt_input, image_input_1, image_input_2, image_input_3],
            outputs=output_gallery,
            api_name="remix_images",
            queue=True,
            show_progress="full",
        )

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