app.py

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 = [
    "Minions con gafas atrapados en un bloque de hielo transparente, mostrando expresiones de sorpresa. Hielo escarchado y agrietado que refleja luz azul. Copos de nieve caen suavemente en un paisaje invernal.",
    "Un caballo marrón dorado trotando alegremente en realismo 8K contra un cielo vibrante con nubes multicolores en azul, rosa y naranja.",
    "Casco de Kylo Ren en forma de gato con texturas rugosas. Renderizado 3D ultra detallado con iluminación de borde y texturas hiperrealistas. Tonos pulidos según los colores de Kylo Ren, renderizado octano en 8K, fondo contrastado."
]

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, label="Ejemplos de otros sueños")
            
            with gr.Row(elem_id="button-container"):
                generate_button = gr.Button("QUIERO VER MI SUEÑO", elem_id="generate-button", variant="primary")
                reset_button = gr.HTML('<button id="reset-button" style="width: 100%; padding: 10px; background-color: #f5f5f5; color: #333; border: 1px solid black; cursor: pointer;">REINICIAR MI SUEÑO</button>')

        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)