Upload 3 files

app.py

@@ -0,0 +1,120 @@
+import base64
+from io import BytesIO
+
+import gradio as gr
+import PIL.Image
+import torch
+
+from diffusers import StableDiffusionPipeline, AutoencoderKL, AutoencoderTiny
+import torch
+
+import torch
+
+device = "cpu"   # Linux & Windows
+weight_type = torch.float32  # torch.float16 works as well, but pictures seem to be a bit worse
+
+pipe = StableDiffusionPipeline.from_pretrained("IDKiro/sdxs-512-dreamshaper", torch_dtype=weight_type)
+pipe.to(torch_device=device, torch_dtype=weight_type)
+
+vae_tiny = AutoencoderTiny.from_pretrained("IDKiro/sdxs-512-dreamshaper", subfolder="vae")
+vae_tiny.to(device, dtype=weight_type)
+
+vae_large = AutoencoderKL.from_pretrained("IDKiro/sdxs-512-dreamshaper", subfolder="vae_large")
+vae_tiny.to(device, dtype=weight_type)
+
+def pil_image_to_data_url(img, format="PNG"):
+    buffered = BytesIO()
+    img.save(buffered, format=format)
+    img_str = base64.b64encode(buffered.getvalue()).decode()
+    return f"data:image/{format.lower()};base64,{img_str}"
+
+
+def run(
+    prompt: str,
+    device_type="GPU",
+    vae_type=None,
+    param_dtype='torch.float16',
+) -> PIL.Image.Image:
+    if vae_type == "tiny vae":
+        pipe.vae = vae_tiny
+    elif vae_type == "large vae":
+        pipe.vae = vae_large
+
+    if device_type == "CPU":
+        device = "cpu" 
+        param_dtype = 'torch.float32'
+    else:
+        device = "cuda"
+    
+    pipe.to(torch_device=device, torch_dtype=torch.float16 if param_dtype == 'torch.float16' else torch.float32)
+
+    result = pipe(
+        prompt=prompt,
+        guidance_scale=0.0,
+        num_inference_steps=1,
+        output_type="pil",
+    ).images[0]
+
+    result_url = pil_image_to_data_url(result)
+
+    return (result, result_url)
+
+
+examples = [
+    "A photo of beautiful mountain with realistic sunset and blue lake, highly detailed, masterpiece",
+]
+
+with gr.Blocks(css="style.css") as demo:
+    gr.Markdown("# SDXS-512-DreamShaper (only CPU now)")
+    with gr.Group():
+        with gr.Row():
+            with gr.Column(min_width=685):
+                with gr.Row():
+                    prompt = gr.Text(
+                        label="Prompt",
+                        show_label=False,
+                        max_lines=1,
+                        placeholder="Enter your prompt",
+                        container=False,
+                    )
+                    run_button = gr.Button("Run", scale=0)
+                    
+                device_choices = ['GPU','CPU']
+                device_type = gr.Radio(device_choices, label='Device',  
+                                            value=device_choices[0],
+                                            interactive=True,
+                                            info='Only CPU now.')
+
+                vae_choices = ['tiny vae','large vae']
+                vae_type = gr.Radio(vae_choices, label='Image Decoder Type',  
+                                            value=vae_choices[0],
+                                            interactive=True,
+                                            info='To save GPU memory, use tiny vae. For better quality, use large vae.')
+
+                dtype_choices = ['torch.float16','torch.float32']
+                param_dtype = gr.Radio(dtype_choices,label='torch.weight_type',  
+                                            value=dtype_choices[0],
+                                            interactive=True,
+                                            info='To save GPU memory, use torch.float16. For better quality, use torch.float32.')
+                
+                download_output = gr.Button("Download output", elem_id="download_output")
+
+            with gr.Column(min_width=512):
+                result = gr.Image(label="Result", height=512, width=512, elem_id="output_image", show_label=False, show_download_button=True)
+
+    gr.Examples(
+        examples=examples,
+        inputs=prompt,
+        outputs=result,
+        fn=run
+    )
+
+    demo.load(None,None,None)
+
+    inputs = [prompt, device_type, vae_type, param_dtype]
+    outputs = [result, download_output]
+    prompt.submit(fn=run, inputs=inputs, outputs=outputs)
+    run_button.click(fn=run, inputs=inputs, outputs=outputs)
+
+if __name__ == "__main__":
+    demo.queue().launch(debug=True)

requirements.txt

@@ -0,0 +1,23 @@
+einops>=0.6.1
+numpy>=1.24.4
+opencv-python==4.6.0.66
+pillow>=9.5.0
+scipy==1.11.1
+timm>=0.9.2
+tokenizers
+torch>=2.0.1
+torchaudio>=2.0.2
+torchdata==0.6.1
+torchvision>=0.15.2
+tqdm>=4.65.0
+transformers
+triton==2.0.0
+urllib3<1.27,>=1.25.4
+xformers>=0.0.20
+accelerate
+streamlit-keyup==0.2.0
+peft
+dominate
+diffusers==0.25.1
+gradio==3.43.1
+hf_transfer

style.css

@@ -0,0 +1,213 @@
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
+
+/* the outermost contrained of the app */
+.main{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1200px;
+}
+
+/* #main_row{
+    
+} */
+
+/* hide this class */
+.svelte-p4aq0j {
+    display: none;
+}
+
+.wrap.svelte-p4aq0j.svelte-p4aq0j {
+    display: none;
+}
+
+#download_sketch{
+    display: none;
+}
+
+#download_output{
+    display: none;
+}
+
+#column_input, #column_output{
+    width: 500px;
+    display: flex;
+    /* justify-content: center; */
+    align-items: center;
+}
+
+#tools_header, #input_header, #output_header, #process_header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 400px;
+}
+
+
+#nn{
+    width: 100px;
+    height: 100px;
+}
+
+
+#column_process{
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+    height: 600px;
+}
+
+/* this is the "pix2pix-turbo" above the process button */
+#description > span{
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+}
+
+/* this is the "UNDO_BUTTON, X_BUTTON" */
+div.svelte-1030q2h{
+    width: 30px;
+    height: 30px;
+    display: none;
+}
+
+
+#component-5 > div{
+    border: 0px;
+    box-shadow: none;
+}
+
+#cb-eraser, #cb-line{
+    display: none;
+}
+
+/* eraser text */
+#cb-eraser > label > span{
+    display: none;
+}
+#cb-line > label > span{
+    display: none;
+}
+
+
+.button-row {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+    border: 0px;
+}
+
+#my-toggle-pencil{
+    background-image: url("https://icons.getbootstrap.com/assets/icons/pencil.svg");
+    background-color: white;
+    background-size: cover;
+    margin: 0px;
+    box-shadow: none;
+    width: 40px;
+    height: 40px;
+}
+
+#my-toggle-pencil.clicked{
+    background-image: url("https://icons.getbootstrap.com/assets/icons/pencil-fill.svg");
+    transform: scale(0.98);
+    background-color: gray;
+    background-size: cover;
+    /* background-size: 95%;
+    background-position: center; */
+    /* border: 2px solid #000; */
+    margin: 0px;
+    box-shadow: none;
+    width: 40px;
+    height: 40px;
+}
+
+
+#my-toggle-eraser{
+    background-image: url("https://icons.getbootstrap.com/assets/icons/eraser.svg");
+    background-color: white;
+    background-color: white;
+    background-size: cover;
+    margin: 0px;
+    box-shadow: none;
+    width: 40px;
+    height: 40px;
+}
+
+#my-toggle-eraser.clicked{
+    background-image: url("https://icons.getbootstrap.com/assets/icons/eraser-fill.svg");
+    transform: scale(0.98);
+    background-color: gray;
+    background-size: cover;
+    margin: 0px;
+    box-shadow: none;
+    width: 40px;
+    height: 40px;
+}
+
+
+
+#my-button-undo{
+    background-image: url("https://icons.getbootstrap.com/assets/icons/arrow-counterclockwise.svg");
+    background-color: white;
+    background-size: cover;
+    margin: 0px;
+    box-shadow: none;
+    width: 40px;
+    height: 40px;
+}
+
+#my-button-clear{
+    background-image: url("https://icons.getbootstrap.com/assets/icons/x-lg.svg");
+    background-color: white;
+    background-size: cover;
+    margin: 0px;
+    box-shadow: none;
+    width: 40px;
+    height: 40px;
+    
+}
+
+
+#my-button-down{
+    background-image: url("https://icons.getbootstrap.com/assets/icons/arrow-down.svg");
+    background-color: white;
+    background-size: cover;
+    margin: 0px;
+    box-shadow: none;
+    width: 40px;
+    height: 40px;
+    
+}
+
+.pad2{
+    padding: 2px;
+    background-color: white;
+    border: 2px solid #000;
+    margin: 10px;
+    display: flex;
+    justify-content: center; /* Center horizontally */
+    align-items: center; /* Center vertically */
+}
+
+
+
+
+#output_image, #input_image{
+    border-radius: 0px;
+    border: 5px solid #000;
+    border-width: none;
+}
+
+
+#output_image > img{
+    border: 5px solid #000;
+    border-radius: 0px;
+    border-width: none;
+}
+
+#input_image > div.image-container.svelte-p3y7hu > div.wrap.svelte-yigbas > canvas:nth-child(1){
+    border: 5px solid #000;
+    border-radius: 0px;
+    border-width: none;
+}