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

# Project by Nymbo

API_URL = "https://api-inference.huggingface.co/models/black-forest-labs/FLUX.1-dev"
API_TOKEN = os.getenv("HF_READ_TOKEN")
headers = {"Authorization": f"Bearer {API_TOKEN}"}
timeout = 100

def query(prompt, is_negative=False, steps=30, cfg_scale=7, strength=0.7):
    if not prompt:
        return None

    key = random.randint(0, 999)
    
    # Detectar el idioma del prompt y traducirlo al inglés
    translator = GoogleTranslator(target='en')
    try:
        prompt = translator.translate(prompt)
    except Exception as e:
        print(f"Error during translation: {e}")
        return None

    print(f'\033[1mGeneration {key} translation:\033[0m {prompt}')

    prompt = f"{prompt} | ultra detail, ultra elaboration, ultra quality, perfect."
    print(f'\033[1mGeneration {key}:\033[0m {prompt}')
    
    payload = {
        "inputs": prompt,
        "is_negative": is_negative,
        "steps": steps,
        "cfg_scale": cfg_scale,
        "strength": strength
    }

    response = requests.post(API_URL, headers=headers, json=payload, timeout=timeout)
    if response.status_code != 200:
        print(f"Error: Failed to get image. Response status: {response.status_code}")
        print(f"Response content: {response.text}")
        if response.status_code == 503:
            raise gr.Error(f"{response.status_code} : The model is being loaded")
        raise gr.Error(f"{response.status_code}")
    
    try:
        image_bytes = response.content
        image = Image.open(io.BytesIO(image_bytes))
        print(f'\033[1mGeneration {key} completed!\033[0m ({prompt})')
        return image
    except Exception as e:
        print(f"Error when trying to open the image: {e}")
        return None

css = """
#app-container {
    max-width: 100%; /* Ancho máximo del contenedor en 100% del espacio disponible */
    margin: 0 auto; /* Centrar el contenedor */
    padding: 20px; /* Espacio interno */
}

input, textarea, select {
    background-color: #f5f5f5; /* Fondo gris claro para inputs */
    color: #333333; /* Texto gris oscuro en inputs */
    border: 1px solid #cccccc; /* Borde gris claro en inputs */
    width: calc(100% - 40px); /* Ancho completo menos espacio para el botón */
    box-sizing: border-box; /* Incluir el borde en el ancho total */
    padding-right: 40px; /* Espacio para el botón de borrar */
}

input[type="text"] {
    position: relative;
}

input[type="text"]::after {
    content: "✕"; /* Símbolo de borrar */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
}

button {
    background-color: #f5f5f5; /* Fondo gris claro */
    color: #333333; /* Texto gris oscuro */
    border: 1px solid black; /* Borde negro en botones */
    width: 100%; /* Ancho completo del botón */
    box-sizing: border-box; /* Incluir el borde en el ancho total */
    padding: 10px; /* Espacio interno en el botón */
}

button.primary {
    background-color: green; /* Fondo verde para el botón 'Generate' */
    color: black; /* Texto negro en el botón 'Generate' */
}

button.secondary {
    background-color: #f5f5f5; /* Fondo gris claro para el botón 'Clear' */
    color: #333333; /* Texto gris oscuro en el botón 'Clear' */
}

button:hover {
    background-color: #e0e0e0; /* Fondo gris más oscuro en hover */
}

h1, h2, h3, h4, h5, h6 {
    color: #333333; /* Texto gris oscuro en encabezados */
}

@media (max-width: 768px) {
    .button-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Centra el botón en vista móvil */
    }

    .button-container button {
        width: auto; /* Ajusta el ancho del botón para móviles */
        margin-top: 10px; /* Espacio superior para el botón en móviles */
    }
}

@media (min-width: 769px) {
    .button-container {
        display: flex;
        justify-content: flex-end; /* Alinea el botón a la derecha en vista de escritorio */
    }

    .button-container button {
        width: auto; /* Ajusta el ancho del botón para escritorio */
    }
}
"""

examples = [
    "A group of Minions, the small, yellow, goggle-wearing characters, trapped inside in the same large square block of transparent ice. Their comical expressions of surprise and confusion are clearly visible through the ice, with their characteristic overalls and goggles still intact. The surrounding ice is frosted and cracked, with hints of blue light reflecting off the surface. The scene is set in a wintry environment, with snowflakes gently falling and an icy landscape stretching into the back.",
    "A golden brown horse, trotting forward with bright, expressive eyes and a joyful expression, is captured in stunning 8K realism. The vibrant, colorful sky features brilliantly bright, multicolored clouds in deep blue, pink, and orange hues. The horse's rich coat contrasts beautifully with the swirling clouds, creating a striking and dynamic scene full of energy and joy.",
    "((Helmet of Kylo Ren)) in dominant shape of cat, heavily adapted to the physical characteristics of (((cat))), incorporating rugged texture and robust elements. Ultra-detailed 3D render with exquisite rim lighting, vibrant and hyper-realistic textures. Majestic design, imposing presence, polished tones according to (colors of Kylo Ren). Contrasted and meticulously crafted background, high-quality octane rendering, 8K."
]

with gr.Blocks(css=css) as app:
    gr.HTML("""
    <center>
        <h1>Dream Generator with Flux</h1>
        <h2>Transforma tus sueños en imágenes vibrantes con un solo clic.</h2>
    </center>
    """)
    
    with gr.Row():
        with gr.Column(scale=1):
            text_prompt = gr.Textbox(
                label="¿Cuál fue tu sueño?", 
                placeholder="Describe lo que soñaste, no omitas ningún detalle.", 
                lines=2, 
                elem_id="prompt-text-input"
            )

            with gr.Accordion("Opciones Avanzadas", open=False):
                negative_prompt = gr.Textbox(
                    label="¿Qué elementos no deseas que se plasmen de tu sueño?", 
                    placeholder="Describe en detalle lo que quieres que aparezca.", 
                    value="(deformed, distorted, disfigured), poorly drawn, bad anatomy, wrong anatomy, extra limb, missing limb, floating limbs, (mutated hands and fingers), disconnected limbs, mutation, mutated, ugly, disgusting, blurry, amputation, misspellings, typos", 
                    lines=3, 
                    elem_id="negative-prompt-text-input"
                )
                steps = gr.Slider(
                    label="Profundidad del sueño (Pasos de muestreo)", 
                    value=35, 
                    minimum=1, 
                    maximum=100, 
                    step=1
                )
                cfg = gr.Slider(
                    label="Claridad del sueño (Nivel de detalle)", 
                    value=7, 
                    minimum=1, 
                    maximum=20, 
                    step=1
                )
                strength = gr.Slider(
                    label="Intensidad del sueño (Fuerza de transformación)", 
                    value=0.7, 
                    minimum=0, 
                    maximum=1, 
                    step=0.001
                )

            # Mover el componente de ejemplos aquí, justo debajo de Opciones Avanzadas
            gr.Examples(examples=examples, inputs=text_prompt)
            
            with gr.Row(elem_id="button-container"):
                generate_button = gr.Button("QUIERO VER MI SUEÑO", elem_id="generate-button", variant="primary")

        with gr.Column(scale=1):
            image_output = gr.Image(type="pil", label="Image Output", elem_id="gallery")

    generate_button.click(query, inputs=[text_prompt, negative_prompt, steps, cfg, strength], outputs=image_output)

app.launch(show_api=False, share=False)