app.py

import gradio as gr
import numpy as np
import random
from diffusers import DiffusionPipeline, StableDiffusionXLPipeline, EulerAncestralDiscreteScheduler
import torch
import uuid
import spaces
import os

# Device configuration
device = "cuda" if torch.cuda.is_available() else "cpu"

# Load diffusion pipeline
if torch.cuda.is_available():
    pipe = DiffusionPipeline.from_pretrained("stabilityai/sdxl-turbo", torch_dtype=torch.float16, variant="fp16", use_safetensors=True)
    pipe.enable_xformers_memory_efficient_attention()
    pipe = pipe.to(device)
else:
    pipe = DiffusionPipeline.from_pretrained("stabilityai/sdxl-turbo", use_safetensors=True)
    pipe = pipe.to(device)

MAX_SEED = np.iinfo(np.int32).max
MAX_IMAGE_SIZE = 1024

def infer(prompt, negative_prompt, seed, randomize_seed, width, height, guidance_scale, num_inference_steps):
    if randomize_seed:
        seed = random.randint(0, MAX_SEED)
        
    generator = torch.Generator().manual_seed(seed)
    
    image = pipe(
        prompt=prompt, 
        negative_prompt=negative_prompt,
        guidance_scale=guidance_scale, 
        num_inference_steps=num_inference_steps, 
        width=width, 
        height=height,
        generator=generator
    ).images[0] 
    
    return image

examples = [
    "Closeup, Cocktail on a table in shining light, backgorund beach and sea, detailed, 8k",
    "a hyper realistic fullbody stormtrooper group, photorealistic, 8k, cinematic",
    "Super Closeup Portrait, action shot, Tiger in a castle, glass flowers, Stains, space grunge style, very detailed, hd",
]
javascript = """
<script>
function updateMetaTagContent(propertyName, newContent) {
    var metaTag = document.querySelector(`meta[property="${propertyName}"]`);
    if (metaTag) {
        metaTag.setAttribute('content', newContent);
        metaTag.style.setProperty('content', newContent, 'important');
    }
}
updateMetaTagContent("og:title", "h0a_h0a");
  document.addEventListener("DOMContentLoaded", function() {
    var metaTag = document.querySelector('meta[property="og:title"]');
    if (metaTag) {
      metaTag.setAttribute('content', '__h0a__');
    }
  });
</script>
"""
css = """
@media (min-width: 640px) {
  .app.svelte-182fdeq.svelte-182fdeq {
      max-width:unset !important;
  }
}
@media (min-width: 768px) {
  .app.svelte-182fdeq.svelte-182fdeq {
      max-width:unset !important;
  }
}
@media (min-width: 1024px) {
  .app.svelte-182fdeq.svelte-182fdeq {
      max-width:unset !important;
  }
}
@media (min-width: 1280px) {
  .app.svelte-182fdeq.svelte-182fdeq {
      max-width:unset !important;
  }
}
@media (min-width: 1536px) {
  .app.svelte-182fdeq.svelte-182fdeq {
       max-width:unset !important;
  }
}
div.svelte-15lo0d8>*,div.svelte-15lo0d8>.form>* {
  flex: 1 1 0%;
  flex-wrap: wrap;
  min-width: min(10px,100%);
}
.app.svelte-182fdeq.svelte-182fdeq{
padding:0px !important,
}
.gradio-container{
padding:0px !important,
}
.svelte-15lo0d8,
.svelte-1ed2p3z,
.svelte-12cmxck,
#component-7,
#component-20,
.svelte-13hsdno {
  }
@media (max-width: 600px) {
  .svelte-15lo0d8,
  .svelte-1ed2p3z,
  .svelte-12cmxck,
  #component-7,
  #component-20,
  .svelte-13hsdno {
  }
}
meta.title{
content: "h0a_TEXT_TO_IMAGE_h0a" !important;
}
meta.content{
content: "h0a_TEXT_TO_IMAGE_h0a" !important;
}
gradio-app{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url('https://cdn.pixabay.com/photo/2016/12/29/18/44/background-1939128_1280.jpg')!important;
  background-size: cover;
  object-fit: cover;
}
.gradio-container-4-26-0 .prose * {
color:white !important;
}
.gradio-container-4-26-0 .prose h1{
text-align:center !important;
text-color:white !important;
font-weight:600 !important;
font-size:35px !important;
}
span.svelte-1k4ye9u h1{
display:block !important;
text-color:white !important;
}
#col-container {
  margin: 0 auto !important;
 /* max-width: 520px !important; */
 max-width:unset !important;
  padding: 2px !important;
}
.p {
  font-weight: 500 !important;
}
.element.style
{
background-color: none !important;
}
.svelte-vt1mxs{
background-color: none !important;
}
.svelte-182fdeq{
background-color: none !important;
}
.gradio-container{
background-color: none !important;
text-align: center !important;
}
#component-0{
}
#col-container{
/* width: 100vw; */
align-items:center;
  max-width: 100vw !important;
 
}
#component-2{
}
#component-20{
color:white !important;
}
.svelte-12bm2fk{
}
.svelte-1ed2p3z{
}
.svelte-1yrv54{
}
.svelte-1k4ye9u{
}
.h1{
  color:red !imortant;
}
.p{
color:white !important;
}
#component-3{
}
#component-4{
border-width:0px !important;
border-radius:0px !important;
border-color:black !important;
}
.gallery.svelte-1viwdyg{
padding:10px !important;
color:royalblue !important;
}
.show-api,
.built-with{
display:none !important;
opacity:0 !important
}
#component-5{
border-radius:4px !important;
}
.svelte-15lo0d8{
border-width:0px !important;
border-color:black !important;
border-radius:0px !important;
  min-width: min(10px, 100%);
}
.svelte-1f354aw{
border-width:0px !important;
border-color:black !important;
border-radius:0px !important;
}
.svelte-1gfkn6j{
border-width:0px !important;
border-color:black !important;
border-radius:0px !important;
}
#component-3 {
display: flex;
background: white;
border-radius: 1rem;
background: linear-gradient(135deg, #23272F 0%, #14161a 100%);
box-shadow: 10px 10px 20px #0e1013, -10px -10px 40px #383e4b;
padding: 0.3rem;
gap: 0.3rem;
}
#component-3 input {
border-radius: 0.8rem 0 0 0.8rem;
background: #23272F;
box-shadow: inset 5px 5px 10px #0e1013, inset -5px -5px 10px #383e4b, 0px 0px 100px rgba(255, 212, 59, 0), 0px 0px 100px rgba(255, 102, 0, 0);
width: 100%;
flex-basis: 75%;
padding: 1rem;
border: none;
border: 1px solid transparent;
color: white;
transition: all 0.2s ease-in-out;
}
#component-3 input:focus {
border: 1px solid #FFD43B;
outline: none;
box-shadow: inset 0px 0px 10px rgba(255, 102, 0, 0.5), inset 0px 0px 10px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);
}
#component-3 button {
flex-basis: 25%;
padding: 1rem;
background: linear-gradient(135deg, rgb(255, 212, 59) 0%, rgb(255, 102, 0) 100%);
box-shadow: 0px 0px 1px rgba(255, 212, 59, 0.5), 0px 0px 1px rgba(255, 102, 0, 0.5);
font-weight: 900;
letter-spacing: 0.3rem;
text-transform: uppercase;
color: #23272F;
border: none;
width: 100%;
border-radius: 0 1rem 1rem 0;
transition: all 0.2s ease-in-out;
}
#component-3 button:hover {
background: linear-gradient(135deg, rgb(255, 212, 59) 50%, rgb(255, 102, 0) 100%);
box-shadow: 0px 0px 100px rgba(255, 212, 59, 0.5), 0px 0px 100px rgba(255, 102, 0, 0.5);
}
.svelte-1f354aw{
}
.svelte-1oiin9d{
  padding:2px;
}
"""

# Create Gradio interface
with gr.Blocks(css=css) as demo:
    with gr.Column(elem_id="col-container"):
        gr.Markdown(f"""
        # Text-to-Image Engine
        This Space runs Currently on CPU. 
        So Please be patient, it can take up to 5 Minutes- depended on the 'Width & Height'. 
        """)
        
        with gr.Row():
            prompt = gr.Text(
                label="Prompt",
                show_label=False,
                max_lines=1,
                placeholder="Enter your prompt Imagination",
                container=False,
            )
            run_button = gr.Button("Run", scale=0)
        
        result = gr.Image(label="Result", show_label=False)

        with gr.Accordion("Expert Settings", open=False):
            negative_prompt = gr.Text(
                label="Negative prompt",
                max_lines=1,
                placeholder="Enter a negative prompt",
                visible=True,
            )
            seed = gr.Slider(
                label="Seed",
                minimum=0,
                maximum=MAX_SEED,
                step=1,
                value=0,
            )
            randomize_seed = gr.Checkbox(label="Randomize seed", value=True)
            with gr.Row():
                width = gr.Slider(
                    label="Width",
                    minimum=256,
                    maximum=MAX_IMAGE_SIZE,
                    step=32,
                    value=512,
                )
                height = gr.Slider(
                    label="Height",
                    minimum=256,
                    maximum=MAX_IMAGE_SIZE,
                    step=32,
                    value=512,
                )
            with gr.Row():
                guidance_scale = gr.Slider(
                    label="Guidance scale",
                    minimum=0.0,
                    maximum=10.0,
                    step=0.1,
                    value=0.0,
                )
                num_inference_steps = gr.Slider(
                    label="Number of inference steps",
                    minimum=1,
                    maximum=12,
                    step=1,
                    value=2,
                )
        
        gr.Examples(
            examples=examples,
            inputs=[prompt]
        )

    run_button.click(
        fn=infer,
        inputs=[prompt, negative_prompt, seed, randomize_seed, width, height, guidance_scale, num_inference_steps],
        outputs=[result]
    )

demo.queue().launch()