feature for selecting inference steps (#1)

- feature for selecting inference steps (f679e15c7cfeea25ddf4eac9aecab8908f443625)
- css styling for the demo (609e807ebf002eab87d69d4794d8e227a419b33a)


Co-authored-by: yuvraj sharma <ysharma@users.noreply.huggingface.co>

app.py

@@ -4,34 +4,65 @@ from diffusers import StableDiffusionXLPipeline, EulerDiscreteScheduler
 from huggingface_hub import hf_hub_download
 import spaces
 
+
 # Constants
 base = "stabilityai/stable-diffusion-xl-base-1.0"
 repo = "ByteDance/SDXL-Lightning"
-ckpt = "sdxl_lightning_4step_unet.pth"
+checkpoints = {
+    "1-Step" : ["sdxl_lightning_1step_unet_x0.pth", 1],
+    "2-Step" : ["sdxl_lightning_2step_unet.pth", 2],
+    "4-Step" : ["sdxl_lightning_4step_unet.pth", 4],
+    "8-Step" : ["sdxl_lightning_8step_unet.pth", 8],
+}
 
-# Function 
-@spaces.GPU
-def generate_image(prompt):
-    # Ensure model and scheduler are initialized in GPU-enabled function
+
+# Ensure model and scheduler are initialized in GPU-enabled function
+if torch.cuda.is_available():
     pipe = StableDiffusionXLPipeline.from_pretrained(base, torch_dtype=torch.float16, variant="fp16").to("cuda")
-    pipe.unet.load_state_dict(torch.load(hf_hub_download(repo, ckpt), map_location="cuda"))
-    pipe.scheduler = EulerDiscreteScheduler.from_config(pipe.scheduler.config, timestep_spacing="trailing")
 
-    image = pipe(prompt, num_inference_steps=4, guidance_scale=0).images[0]
+
+# Function 
+@spaces.GPU(enable_queue=True)
+def generate_image(prompt, ckpt):
+
+    checkpoint = checkpoints[ckpt][0]
+    num_inference_steps = checkpoints[ckpt][1] 
+
+    if num_inference_steps==1:
+        # Ensure sampler uses "trailing" timesteps and "sample" prediction type for 1-step inference.
+        pipe.scheduler = EulerDiscreteScheduler.from_config(pipe.scheduler.config, timestep_spacing="trailing", prediction_type="sample")
+    else:
+        # Ensure sampler uses "trailing" timesteps.
+        pipe.scheduler = EulerDiscreteScheduler.from_config(pipe.scheduler.config, timestep_spacing="trailing")
+        
+    pipe.unet.load_state_dict(torch.load(hf_hub_download(repo, checkpoint), map_location="cuda"))
+    image = pipe(prompt, num_inference_steps=num_inference_steps, guidance_scale=0).images[0]
     return image
 
+
 # Gradio Interface
 description = """
 This demo utilizes the SDXL-Lightning model by ByteDance, which is a fast text-to-image generative model capable of producing high-quality images in 4 steps.
 As a community effort, this demo was put together by AngryPenguin. Link to model: https://huggingface.co/ByteDance/SDXL-Lightning
 """
 
-demo = gr.Interface(
-    fn=generate_image,
-    inputs="text",
-    outputs="image",
-    title="Text-to-Image with SDXL Lightning ⚡",
-    description=description
-)
+with gr.Blocks(css="style.css") as demo:
+    gr.HTML("<h1><center>Text-to-Image with SDXL Lightning ⚡</center></h1>")
+    gr.Markdown(description)
+    with gr.Group():
+        with gr.Row():
+            prompt = gr.Textbox(label='Enter you image prompt:', scale=8)
+            ckpt = gr.Dropdown(label='Select Inference Steps',choices=['1-Step', '2-Step', '4-Step', '8-Step'], value='4-Step', interactive=True)
+            submit = gr.Button(scale=1, variant='primary')
+    img = gr.Image(label='SDXL-Lightening Generate Image')
 
-demo.launch()
+    prompt.submit(fn=generate_image,
+                 inputs=[prompt, ckpt],
+                 outputs=img,
+                 )
+    submit.click(fn=generate_image,
+                 inputs=[prompt, ckpt],
+                 outputs=img,
+                 )
+    
+demo.queue().launch()

style.css

@@ -0,0 +1,12 @@
+.gradio-container {
+  max-width: 690px! important;
+}
+
+#share-btn-container{padding-left: 0.5rem !important; padding-right: 0.5rem !important; background-color: #000000; justify-content: center; align-items: center; border-radius: 9999px !important; max-width: 13rem; margin-left: auto;margin-top: 0.35em;}
+div#share-btn-container > div {flex-direction: row;background: black;align-items: center}
+#share-btn-container:hover {background-color: #060606}
+#share-btn {all: initial; color: #ffffff;font-weight: 600; cursor:pointer; font-family: 'IBM Plex Sans', sans-serif; margin-left: 0.5rem !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;right:0;font-size: 15px;}
+#share-btn * {all: unset}
+#share-btn-container div:nth-child(-n+2){width: auto !important;min-height: 0px !important;}
+#share-btn-container .wrap {display: none !important}
+#share-btn-container.hidden {display: none!important}