import gradio as gr
import requests
import io
import random
import os
from PIL import Image

API_URL = "https://api-inference.huggingface.co/models/runwayml/stable-diffusion-v1-5"
API_TOKEN = os.getenv("HF_READ_TOKEN") # it is free
headers = {"Authorization": f"Bearer {API_TOKEN}"}

def query(prompt, is_negative=False, steps=1, cfg_scale=6, seed=None):
    payload = {
        "inputs": prompt,
        "is_negative": is_negative,
        "steps": steps,
        "cfg_scale": cfg_scale,
        "seed": seed if seed is not None else random.randint(-1, 2147483647)
        }

    image_bytes = requests.post(API_URL, headers=headers, json=payload).content
    image = Image.open(io.BytesIO(image_bytes))
    return image


css = """
        /* Improve overall layout and styling */
.gradio-container {
    font-family: 'IBM Plex Sans', sans-serif;
    max-width: 800px; /* Adjusted max-width for better readability */
    margin: auto;
    padding: 1.5rem;
    background-color: #f4f4f4; /* Added a light background color */
    border-radius: 10px; /* Added border radius for a softer look */
}

/* Improve button styling */
.gr-button {
    color: #fff;
    background: #3498db; /* Changed button color to a shade of blue */
    border: 1px solid #2980b9; /* Added a border for contrast */
    border-radius: 5px; /* Added border radius for rounded corners */
    padding: 10px 20px; /* Increased padding for a better click target */
}

.gr-button:hover {
    background: #217dbb; /* Darker shade on hover for visual feedback */
}

/* Improve range input styling */
input[type='range'] {
    accent-color: #3498db; /* Adjusted accent color for better visibility */
}

/* Improve gallery styling */
#gallery {
    min-height: 300px;
    margin: 15px auto; /* Centered the gallery with margin */
    border-radius: 10px; /* Added border radius for a softer look */
    overflow: hidden; /* Hide overflow for a cleaner appearance */
}

/* Add box shadow to gallery for depth */
#gallery>div {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Add transition to details for smoother underline effect */
.details {
    transition: text-decoration 0.3s ease;
}

/* Add styling to advanced options button */
#advanced-btn {
    font-size: 1rem;
    line-height: 24px;
    background-color: #27ae60; /* Green color for contrast */
    color: #fff;
    border-radius: 10px;
    padding: 8px 16px;
    cursor: pointer;
}

#advanced-btn:hover {
    background-color: #219653; /* Darker green on hover */
}

/* Show advanced options by default */
#advanced-options {
    display: block;
    margin-bottom: 20px;
}

/* Improve footer styling */
.footer {
    margin: 35px auto;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    padding: 15px 0;
}

.footer>p {
    font-size: 1rem;
    display: inline-block;
    padding: 0 10px;
    background: #fff;
    border-radius: 5px;
    margin: 0;
}

/* Improve acknowledgments heading */
.acknowledgments h4 {
    margin: 1em 0 0.25em 0;
    font-weight: bold;
    font-size: 120%; /* Slightly increased font size */
}

/* Add a subtle spin animation to the loading spinner */
.animate-spin {
    animation: spin 1s linear infinite;
}

/* Add box shadow to share button container for depth */
#share-btn-container {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Hide overflow for a cleaner appearance */
}

/* Adjust prompt container styles */
#prompt-container {
    gap: 10px; /* Increased gap for better spacing */
}

/* Adjust prompt text input padding */
#prompt-text-input, #negative-prompt-text-input {
    padding: 10px;
}

/* Adjust tab item styles */
.tabitem {
    border: 1px solid #ddd; /* Added a subtle border */
    border-radius: 5px; /* Added border radius for a softer look */
    margin: 5px;
    padding: 10px;
    cursor: pointer;
}

.tabitem:hover {
    background-color: #f5f5f5; /* Light background color on hover */
}

"""

with gr.Blocks(css=css, theme="pseudolab/huggingface-korea-theme") as dalle:
    gr.HTML(
        """
            <div style="text-align: center; margin: 0 auto;">
              <div
                style="
                  display: inline-flex;
                  align-items: center;
                  gap: 0.8rem;
                  font-size: 1.75rem;
                "
              >
                <h1 style="font-weight: 900; margin-bottom: 7px;margin-top:5px">
                  Stable Diffusion v1.5 XL
                </h1> 
              </div>
              <p style="margin-bottom: 10px; font-size: 94%; line-height: 23px;">
              </p>
            </div>
        """
    )

    with gr.Row():
        image_output = gr.Image(type="pil", label="Output Image", elem_id="gallery")
        with gr.Column(elem_id="prompt-container"):
            text_prompt = gr.Textbox(label="Prompt", placeholder="a cute dog", lines=1, elem_id="prompt-text-input")
            text_button = gr.Button("Generate", variant='primary', elem_id="gen-button")

    with gr.Accordion("Advanced settings", open=False):
        negative_prompt = gr.Textbox(label="Negative Prompt", value="text, blurry, fuzziness", lines=1, elem_id="negative-prompt-text-input")

    text_button.click(query, inputs=[text_prompt, negative_prompt], outputs=image_output)

dalle.launch(show_api=False)