UI.py

# Final `UI.py`

"""Modern Gradio UI for DALL·E Text-to-Image Generator."""

from __future__ import annotations

import gradio as gr

from app import clear_history, generate_image

# -------------------------------------------------------------------
# Example Prompts
# -------------------------------------------------------------------
EXAMPLE_PROMPTS = [
    "A futuristic cyberpunk city at night with neon lights",
    "Ultra realistic samurai standing in rain",
    "Fantasy floating island above clouds",
    "Luxury gaming room with RGB lighting",
    "Astronaut riding horse on Mars",
]

# -------------------------------------------------------------------
# Custom CSS
# -------------------------------------------------------------------
CUSTOM_CSS = """
body {
    background: #020617;
}

.gradio-container {
    max-width: 1450px !important;
    margin: auto !important;

    background:
        radial-gradient(circle at top left, rgba(59,130,246,0.18), transparent 25%),
        radial-gradient(circle at bottom right, rgba(168,85,247,0.18), transparent 25%),
        #020617 !important;

    color: white !important;
    font-family: Inter, sans-serif !important;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, #111827, #1e293b, #0f172a);

    border-radius: 28px;

    padding: 45px;

    margin-bottom: 20px;

    text-align: center;

    border: 1px solid rgba(255,255,255,0.08);

    box-shadow: 0 12px 50px rgba(0,0,0,0.45);
}

.hero-section h1 {
    font-size: 3rem;
    font-weight: 900;
}

.hero-section p {
    color: #cbd5e1;
    font-size: 1.1rem;
}

/* Creator */
.creator-name {
    color: #c084fc;
    font-size: 1.2rem;
    font-weight: 700;
    margin-top: 20px;
}

.creator-role {
    color: #94a3b8;
    font-size: 0.95rem;
}

/* Glass Panels */
.glass-panel {
    background: rgba(15,23,42,0.78) !important;

    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(18px);

    border-radius: 24px !important;

    padding: 22px !important;

    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}

/* Textbox */
textarea {
    background: rgba(255,255,255,0.06) !important;

    color: white !important;

    border-radius: 16px !important;

    border: 1px solid rgba(255,255,255,0.12) !important;
}

/* Buttons */
button {
    border-radius: 14px !important;

    transition: all 0.25s ease !important;
}

button:hover {
    transform: translateY(-2px);
}

/* Generate Button */
.generate-btn {
    background: linear-gradient(135deg, #7c3aed, #2563eb) !important;

    color: white !important;

    border: none !important;

    height: 55px !important;

    font-size: 1rem !important;

    font-weight: 700 !important;
}

/* Image */
.image-output {
    border-radius: 24px !important;
    overflow: hidden;
}

/* Footer */
.footer {
    text-align: center;

    margin-top: 18px;

    color: #94a3b8;

    font-size: 0.9rem;
}
"""

# -------------------------------------------------------------------
# Theme
# -------------------------------------------------------------------
THEME = gr.themes.Soft(
    primary_hue="violet",
    secondary_hue="blue",
    neutral_hue="slate",
)

# -------------------------------------------------------------------
# Build UI
# -------------------------------------------------------------------
def build_demo():

    with gr.Blocks(
        title="DALL·E AI Generator",
        theme=THEME,
        css=CUSTOM_CSS,
    ) as demo:

        # -----------------------------------------------------------
        # Hero Section
        # -----------------------------------------------------------
        gr.HTML(
            """
            <div class="hero-section">

                <h1>🎨 DALL·E AI Image Generator</h1>

                <p>
                    Generate stunning AI artwork using OpenAI.
                </p>

                <div class="creator-name">
                    🤖 Built By Vishal Varkhede
                </div>

                <div class="creator-role">
                    AI Engineer • Data Analyst • Azure Databricks Developer
                </div>

            </div>
            """
        )

        # -----------------------------------------------------------
        # Main Layout
        # -----------------------------------------------------------
        with gr.Row(equal_height=True):

            # Sidebar
            with gr.Column(scale=3, elem_classes="glass-panel"):

                gr.Markdown("## ⚙️ Settings")

                prompt_input = gr.Textbox(
                    label="Prompt",
                    placeholder="Describe your image...",
                    lines=5,
                )

                size_dropdown = gr.Dropdown(
                    choices=[
                        "1024x1024",
                        "1024x1792",
                        "1792x1024",
                    ],
                    value="1024x1024",
                    label="Image Size",
                )

                quality_dropdown = gr.Dropdown(
                    choices=[
                        "low",
                        "medium",
                        "high",
                    ],
                    value="high",
                    label="Quality",
                )

                style_dropdown = gr.Dropdown(
                    choices=[
                        "vivid",
                        "natural",
                    ],
                    value="vivid",
                    label="Style",
                )

                generate_button = gr.Button(
                    "🚀 Generate Image",
                    elem_classes="generate-btn",
                )

                clear_button = gr.Button(
                    "🗑️ Clear History"
                )

                gr.Markdown("---")
                gr.Markdown("## ✨ Example Prompts")

                for example in EXAMPLE_PROMPTS:

                    example_button = gr.Button(
                        example,
                        size="sm",
                    )

                    example_button.click(
                        lambda x=example: x,
                        outputs=prompt_input,
                    )

            # Main Content
            with gr.Column(scale=7, elem_classes="glass-panel"):

                gr.Markdown("## 🖼️ Generated Image")

                image_output = gr.Image(
                    type="filepath",
                    height=600,
                    interactive=False,
                    show_download_button=True,
                    elem_classes="image-output",
                )

                status_output = gr.Markdown(
                    "Generate an image using the controls."
                )

                gr.Markdown("## 🕘 Prompt History")

                history_output = gr.JSON(
                    label="Recent Prompts",
                )

        # Footer
        gr.HTML(
            """
            <div class="footer">
                Built with ❤️ using Gradio + OpenAI
            </div>
            """
        )

        # Generate Action
        generate_button.click(
            fn=generate_image,
            inputs=[
                prompt_input,
                size_dropdown,
                quality_dropdown,
                style_dropdown,
            ],
            outputs=[
                image_output,
                history_output,
                status_output,
            ],
            show_progress=True,
        )

        # Submit on Enter
        prompt_input.submit(
            fn=generate_image,
            inputs=[
                prompt_input,
                size_dropdown,
                quality_dropdown,
                style_dropdown,
            ],
            outputs=[
                image_output,
                history_output,
                status_output,
            ],
            show_progress=True,
        )

        # Clear History
        clear_button.click(
            fn=clear_history,
            outputs=history_output,
        )

    return demo