Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,6 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+images/control_imgs.png filter=lfs diff=lfs merge=lfs -text
+images/imgs.png filter=lfs diff=lfs merge=lfs -text
+images/intro.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,115 @@
+src
+data
+_backup
+
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+.hypothesis/
+.pytest_cache/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+.python-version
+
+# celery beat schedule file
+celerybeat-schedule
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json

LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,12 +1,132 @@
 ---
-title: Sdxs
-emoji: 🌖
-colorFrom: yellow
-colorTo: blue
+title: sdxs
+app_file: demo_sketch.py
 sdk: gradio
-sdk_version: 5.4.0
-app_file: app.py
-pinned: false
+sdk_version: 3.43.1
 ---
+<div align="center">
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## SDXS: Real-Time One-Step Latent Diffusion Models with Image Conditions
+
+[![Project](https://img.shields.io/badge/Home-Project-green?logo=Houzz&logoColor=white)](https://idkiro.github.io/sdxs)
+[![Paper](https://img.shields.io/badge/arxiv-Paper-blue?logo=arxiv)](https://arxiv.org/abs/2403.16627) 
+[![SDXS-512-0.9](https://img.shields.io/badge/🤗Model-512--0.9-gold)](https://huggingface.co/IDKiro/sdxs-512-0.9)
+[![SDXS-512-DreamShaper](https://img.shields.io/badge/🤗Model-512--DreamShaper-gold)](https://huggingface.co/IDKiro/sdxs-512-dreamshaper)
+[![SDXS-512-DreamShaper-Anime](https://img.shields.io/badge/🤗Model-512--DreamShaper--Anime-gold)](https://huggingface.co/IDKiro/sdxs-512-dreamshaper-anime)
+[![SDXS-512-DreamShaper-Sketch](https://img.shields.io/badge/🤗Model-512--DreamShaper--Sketch-gold)](https://huggingface.co/IDKiro/sdxs-512-dreamshaper-sketch)
+[![SDXS-512-DreamShaper-Demo](https://img.shields.io/badge/🤗Demo-Text2Image-pink)](https://huggingface.co/spaces/IDKiro/SDXS-512-DreamShaper)
+[![SDXS-512-DreamShaper-Anime-Demo](https://img.shields.io/badge/🤗Demo-Text2Image--Anime-pink)](https://huggingface.co/spaces/IDKiro/SDXS-512-DreamShaper-Anime)
+[![SDXS-512-DreamShaper-Sketch-Demo](https://img.shields.io/badge/🤗Demo-Sketch2Image-pink)](https://huggingface.co/spaces/IDKiro/SDXS-512-DreamShaper-Sketch)
+
+
+*Yuda Song, Zehao Sun, Xuanwu Yin*
+
+</div>
+
+We present two models, SDXS-512 and SDXS-1024, achieving inference speeds of approximately <b>100 FPS</b> (30x faster than SD v1.5) and <b>30 FPS</b> (60x faster than SDXL) on a single GPU. Assuming the image generation time is limited to <b>1 second</b>, then SDXL can only use 16 NFEs to produce a slightly blurry image, while SDXS-1024 can generate 30 clear images. 
+
+![](images/intro.png)
+
+Moreover, our proposed method can also train ControlNet, offering promising applications in image-conditioned control and facilitating efficient image-to-image translation.
+
+<p align="left" >
+<img src="images\sketch.gif" width="800" />
+</p>
+
+## 🔥News
+
+- **April 11, 2024:** [SDXS-512-DreamShaper-Anime](https://huggingface.co/IDKiro/sdxs-512-dreamshaper-anime) is released. We also create some Gradio demo on Hugging Face.
+- **April 10, 2024:** [SDXS-512-DreamShaper](https://huggingface.co/IDKiro/sdxs-512-dreamshaper) and [SDXS-512-DreamShaper-Sketch](https://huggingface.co/IDKiro/sdxs-512-dreamshaper-sketch) are released. We also upload our demo code.
+- **March 25, 2024:** [SDXS-512-0.9](https://huggingface.co/IDKiro/sdxs-512-0.9) is released, it is an old version of SDXS-512.
+
+## ⚡️Demo
+
+Create a new environment:
+
+```sh
+conda create -n sdxs
+```
+
+Activate the new environment:
+
+```sh
+conda activate sdxs
+```
+
+Install requirements:
+
+```sh
+conda install python=3.10 pytorch=2.2.1 torchvision torchaudio pytorch-cuda=11.8 xformers=0.0.25 -c pytorch -c nvidia -c xformers
+pip install -r requirements.txt
+```
+
+Run text-to-image demo:
+
+```sh
+python demo.py
+```
+
+Run anime-style text-to-image (LoRA) demo:
+
+```sh
+python demo_anime.py
+```
+
+Run sketch-to-image (ControlNet) demo:
+
+```sh
+python demo_sketch.py
+```
+
+## 💡Train
+
+I found that [DMD2](https://github.com/tianweiy/DMD2) release the training code, and its training scheme is identical to the new version of SDXS, so you can refer to it. 
+Unfortunately, the SDXS training code is not allowed to be open-sourced and will most likely not be updated again.
+
+## ✒️Method
+
+### Model Acceleration
+
+We train an extremely light-weight image decoder to mimic the original VAE decoder’s output through a combination of output distillation loss and GAN loss. We also leverage the block removal distillation strategy to efficiently transfer the knowledge from the original U-Net to a more compact version.
+
+![](images/method1.png)
+
+SDXS demonstrates efficiency far surpassing that of the base models, even achieving image generation at 100 FPS for 512x512 images and 30 FPS for 1024x1024 images on the GPU.
+
+![](images/speed.png)
+
+### Text-to-Image
+
+To reduce the NFEs, we suggest straightening the sampling trajectory and quickly finetuning the multi-step model into a one-step model by replacing the distillation loss function with the proposed feature matching loss. Then, we extend the Diff-Instruct training strategy, using the gradient of the proposed feature matching loss to replace the gradient provided by score distillation in the latter half of the timestep.
+
+![](images/method2.png)
+
+Despite a noticeable downsizing in both the sizes of the models and the number of sampling steps required, the prompt-following capability of SDXS-512 remains superior to that of SD v1.5. This observation is consistently validated in the performance of SDXS-1024 as well.  
+
+![](images/imgs.png)
+
+### Image-to-Image
+
+We extend our proposed training strategy to the training of ControlNet, relying on adding the pretrained ControlNet to the score function. 
+
+![](images/method3.png)
+
+We demonstrate its efficacy in facilitating image-to-image conversions utilizing ControlNet, specifically for transformations involving canny edges and depth maps.
+
+![](images/control_imgs.png)
+
+
+## Citation
+
+If you find this work useful for your research, please cite our paper:
+
+```bibtex
+@article{song2024sdxs,
+  author    = {Yuda Song, Zehao Sun, Xuanwu Yin},
+  title     = {SDXS: Real-Time One-Step Latent Diffusion Models with Image Conditions},
+  journal   = {arxiv},
+  year      = {2024},
+}
+```
+
+**Acknowledgment**: the demo code is based on https://github.com/GaParmar/img2img-turbo.

demo.py

@@ -0,0 +1,117 @@
+import base64
+from io import BytesIO
+
+import gradio as gr
+import PIL.Image
+import torch
+from diffusers import StableDiffusionPipeline, AutoencoderKL, AutoencoderTiny
+
+device = "mps"   # Linux & Windows
+weight_type = torch.float16  # 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")
+    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='Please choose GPU if you have a GPU.')
+
+                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, server_port=8080)
+    demo.queue().launch(debug=True, server_port=8080)

demo_anime.py

@@ -0,0 +1,119 @@
+import base64
+from io import BytesIO
+
+import gradio as gr
+import PIL.Image
+import torch
+
+from diffusers import StableDiffusionPipeline, AutoencoderKL, AutoencoderTiny
+from peft import PeftModel
+
+device = "cuda"   # Linux & Windows
+weight_type = torch.float16  # 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.unet = PeftModel.from_pretrained(pipe.unet, "IDKiro/sdxs-512-dreamshaper-anime")
+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 = [
+    "Self-portrait oil painting, a beautiful cyborg with golden hair, 8k",
+]
+
+with gr.Blocks(css="style.css") as demo:
+    gr.Markdown("# SDXS-512-DreamShaper Anime")
+    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='Please choose GPU if you have a GPU.')
+
+                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)

demo_sketch.py

@@ -0,0 +1,324 @@
+import random
+import numpy as np
+from PIL import Image
+import base64
+from io import BytesIO
+
+import torch
+import torchvision.transforms.functional as F
+from diffusers import ControlNetModel, StableDiffusionControlNetPipeline
+import gradio as gr
+
+device = "mps"   # Linux & Windows
+weight_type = torch.float16  # torch.float16 works as well, but pictures seem to be a bit worse
+
+controlnet = ControlNetModel.from_pretrained(
+    "IDKiro/sdxs-512-dreamshaper-sketch", torch_dtype=weight_type
+).to(device)
+pipe = StableDiffusionControlNetPipeline.from_pretrained(
+    "IDKiro/sdxs-512-dreamshaper", controlnet=controlnet, torch_dtype=weight_type
+)
+pipe.to(device)
+
+style_list = [
+    {
+        "name": "No Style",
+        "prompt": "{prompt}",
+    },
+    {
+        "name": "Cinematic",
+        "prompt": "cinematic still {prompt} . emotional, harmonious, vignette, highly detailed, high budget, bokeh, cinemascope, moody, epic, gorgeous, film grain, grainy",
+    },
+    {
+        "name": "3D Model",
+        "prompt": "professional 3d model {prompt} . octane render, highly detailed, volumetric, dramatic lighting",
+    },
+    {
+        "name": "Anime",
+        "prompt": "anime artwork {prompt} . anime style, key visual, vibrant, studio anime,  highly detailed",
+    },
+    {
+        "name": "Digital Art",
+        "prompt": "concept art {prompt} . digital artwork, illustrative, painterly, matte painting, highly detailed",
+    },
+    {
+        "name": "Photographic",
+        "prompt": "cinematic photo {prompt} . 35mm photograph, film, bokeh, professional, 4k, highly detailed",
+    },
+    {
+        "name": "Pixel art",
+        "prompt": "pixel-art {prompt} . low-res, blocky, pixel art style, 8-bit graphics",
+    },
+    {
+        "name": "Fantasy art",
+        "prompt": "ethereal fantasy concept art of  {prompt} . magnificent, celestial, ethereal, painterly, epic, majestic, magical, fantasy art, cover art, dreamy",
+    },
+    {
+        "name": "Neonpunk",
+        "prompt": "neonpunk style {prompt} . cyberpunk, vaporwave, neon, vibes, vibrant, stunningly beautiful, crisp, detailed, sleek, ultramodern, magenta highlights, dark purple shadows, high contrast, cinematic, ultra detailed, intricate, professional",
+    },
+    {
+        "name": "Manga",
+        "prompt": "manga style {prompt} . vibrant, high-energy, detailed, iconic, Japanese comic style",
+    },
+]
+
+styles = {k["name"]: k["prompt"] for k in style_list}
+STYLE_NAMES = list(styles.keys())
+DEFAULT_STYLE_NAME = "No Style"
+MAX_SEED = np.iinfo(np.int32).max
+
+
+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 randomize_seed_fn(seed: int, randomize_seed: bool) -> int:
+    if randomize_seed:
+        seed = random.randint(0, MAX_SEED)
+    return seed
+
+
+def run(
+    image, 
+    prompt, 
+    prompt_template, 
+    style_name, 
+    controlnet_conditioning_scale,
+    device_type="GPU",
+    param_dtype='torch.float16',
+):
+    if device_type == "CPU":
+        device = "cpu" 
+        param_dtype = 'torch.float32'
+    else:
+        device = "mps"
+    
+    pipe.to(torch_device=device, torch_dtype=torch.float16 if param_dtype == 'torch.float16' else torch.float32)
+
+    print(f"prompt: {prompt}")
+    print("sketch updated")
+    if image is None:
+        ones = Image.new("L", (512, 512), 255)
+        temp_url = pil_image_to_data_url(ones)
+        return ones, gr.update(link=temp_url), gr.update(link=temp_url)
+    prompt = prompt_template.replace("{prompt}", prompt)
+    control_image = image.convert("RGB")
+    control_image = Image.fromarray(255 - np.array(control_image))
+
+    output_pil = pipe(
+        prompt=prompt,
+        image=control_image,
+        width=512,
+        height=512,
+        guidance_scale=0.0,
+        num_inference_steps=1,
+        num_images_per_prompt=1,
+        output_type="pil",
+        controlnet_conditioning_scale=controlnet_conditioning_scale,
+    ).images[0]
+
+    input_sketch_url = pil_image_to_data_url(control_image)
+    output_image_url = pil_image_to_data_url(output_pil)
+    return (
+        output_pil,
+        gr.update(link=input_sketch_url),
+        gr.update(link=output_image_url),
+    )
+
+
+def update_canvas(use_line, use_eraser):
+    if use_eraser:
+        _color = "#ffffff"
+        brush_size = 20
+    if use_line:
+        _color = "#000000"
+        brush_size = 8
+    return gr.update(brush_radius=brush_size, brush_color=_color, interactive=True)
+
+
+def upload_sketch(file):
+    _img = Image.open(file.name)
+    _img = _img.convert("L")
+    return gr.update(value=_img, source="upload", interactive=True)
+
+
+scripts = """
+async () => {
+    globalThis.theSketchDownloadFunction = () => {
+        console.log("test")
+        var link = document.createElement("a");
+        dataUrl = document.getElementById('download_sketch').href
+        link.setAttribute("href", dataUrl)
+        link.setAttribute("download", "sketch.png")
+        document.body.appendChild(link); // Required for Firefox
+        link.click();
+        document.body.removeChild(link); // Clean up
+      
+        // also call the output download function
+        theOutputDownloadFunction();
+      return false
+    }
+
+    globalThis.theOutputDownloadFunction = () => {
+        console.log("test output download function")
+        var link = document.createElement("a");
+        dataUrl = document.getElementById('download_output').href
+        link.setAttribute("href", dataUrl);
+        link.setAttribute("download", "output.png");
+        document.body.appendChild(link); // Required for Firefox
+        link.click();
+        document.body.removeChild(link); // Clean up
+      return false
+    }
+
+    globalThis.UNDO_SKETCH_FUNCTION = () => {
+        console.log("undo sketch function")
+        var button_undo = document.querySelector('#input_image > div.image-container.svelte-p3y7hu > div.svelte-s6ybro > button:nth-child(1)');
+        // Create a new 'click' event
+        var event = new MouseEvent('click', {
+            'view': window,
+            'bubbles': true,
+            'cancelable': true
+        });
+        button_undo.dispatchEvent(event);
+    }
+
+    globalThis.DELETE_SKETCH_FUNCTION = () => {
+        console.log("delete sketch function")
+        var button_del = document.querySelector('#input_image > div.image-container.svelte-p3y7hu > div.svelte-s6ybro > button:nth-child(2)');
+        // Create a new 'click' event
+        var event = new MouseEvent('click', {
+            'view': window,
+            'bubbles': true,
+            'cancelable': true
+        });
+        button_del.dispatchEvent(event);
+    }
+
+    globalThis.togglePencil = () => {
+        el_pencil = document.getElementById('my-toggle-pencil');
+        el_pencil.classList.toggle('clicked');
+        // simulate a click on the gradio button
+        btn_gradio = document.querySelector("#cb-line > label > input");
+        var event = new MouseEvent('click', {
+            'view': window,
+            'bubbles': true,
+            'cancelable': true
+        });
+        btn_gradio.dispatchEvent(event);
+        if (el_pencil.classList.contains('clicked')) {
+            document.getElementById('my-toggle-eraser').classList.remove('clicked');
+            document.getElementById('my-div-pencil').style.backgroundColor = "gray";
+            document.getElementById('my-div-eraser').style.backgroundColor = "white";
+        }
+        else {
+            document.getElementById('my-toggle-eraser').classList.add('clicked');
+            document.getElementById('my-div-pencil').style.backgroundColor = "white";
+            document.getElementById('my-div-eraser').style.backgroundColor = "gray";
+        }
+        
+    }
+
+    globalThis.toggleEraser = () => {
+        element = document.getElementById('my-toggle-eraser');
+        element.classList.toggle('clicked');
+        // simulate a click on the gradio button
+        btn_gradio = document.querySelector("#cb-eraser > label > input");
+        var event = new MouseEvent('click', {
+            'view': window,
+            'bubbles': true,
+            'cancelable': true
+        });
+        btn_gradio.dispatchEvent(event);
+        if (element.classList.contains('clicked')) {
+            document.getElementById('my-toggle-pencil').classList.remove('clicked');
+            document.getElementById('my-div-pencil').style.backgroundColor = "white";
+            document.getElementById('my-div-eraser').style.backgroundColor = "gray";
+        }
+        else {
+            document.getElementById('my-toggle-pencil').classList.add('clicked');
+            document.getElementById('my-div-pencil').style.backgroundColor = "gray";
+            document.getElementById('my-div-eraser').style.backgroundColor = "white";
+        }
+    }
+}
+"""
+
+with gr.Blocks(css="style.css") as demo:
+    gr.Markdown("# SDXS-512-DreamShaper-Sketch")
+    # these are hidden buttons that are used to trigger the canvas changes
+    line = gr.Checkbox(label="line", value=False, elem_id="cb-line")
+    eraser = gr.Checkbox(label="eraser", value=False, elem_id="cb-eraser")
+    with gr.Row(elem_id="main_row"):
+        with gr.Column(elem_id="column_input"):
+            gr.Markdown("## INPUT", elem_id="input_header")
+            image = gr.Image(
+                source="canvas", tool="color-sketch", type="pil", image_mode="L",
+                invert_colors=True, shape=(512, 512), brush_radius=8, height=440, width=440,
+                brush_color="#000000", interactive=True, show_download_button=True, elem_id="input_image", show_label=False)
+            download_sketch = gr.Button("Download sketch", scale=1, elem_id="download_sketch")
+            
+            gr.HTML("""
+            <div class="button-row">
+                <div id="my-div-pencil" class="pad2"> <button id="my-toggle-pencil" onclick="return togglePencil(this)"></button> </div>
+                <div id="my-div-eraser" class="pad2"> <button id="my-toggle-eraser" onclick="return toggleEraser(this)"></button> </div>
+                <div class="pad2"> <button id="my-button-undo" onclick="return UNDO_SKETCH_FUNCTION(this)"></button> </div>
+                <div class="pad2"> <button id="my-button-clear" onclick="return DELETE_SKETCH_FUNCTION(this)"></button> </div>
+                <div class="pad2"> <button href="TODO" download="image" id="my-button-down" onclick='return theSketchDownloadFunction()'></button> </div>
+            </div>
+            """)
+            # gr.Markdown("## Prompt", elem_id="tools_header")
+            prompt = gr.Textbox(label="Prompt", value="", show_label=True)
+            with gr.Row():
+                style = gr.Dropdown(label="Style", choices=STYLE_NAMES, value=DEFAULT_STYLE_NAME, scale=1)
+                prompt_temp = gr.Textbox(label="Prompt Style Template", value=styles[DEFAULT_STYLE_NAME], scale=2, max_lines=1)
+            
+            controlnet_conditioning_scale = gr.Slider(label="Control Strength", minimum=0, maximum=1, step=0.01, value=0.8)
+
+                 
+            device_choices = ['GPU','CPU']
+            device_type = gr.Radio(device_choices, label='Device',  
+                                        value=device_choices[0],
+                                        interactive=True,
+                                        info='Please choose GPU if you have a GPU.')
+            
+            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.')
+                
+
+        with gr.Column(elem_id="column_process", min_width=50, scale=0.4):
+            gr.Markdown("## SDXS-Sketch", elem_id="description")
+            run_button = gr.Button("Run", min_width=50)
+
+        with gr.Column(elem_id="column_output"):
+            gr.Markdown("## OUTPUT", elem_id="output_header")
+            result = gr.Image(label="Result", height=440, width=440, elem_id="output_image", show_label=False, show_download_button=True)
+            download_output = gr.Button("Download output", elem_id="download_output")
+            gr.Markdown("### Instructions")
+            gr.Markdown("**1**. Enter a text prompt (e.g. cat)")
+            gr.Markdown("**2**. Start sketching")
+            gr.Markdown("**3**. Change the image style using a style template")
+            gr.Markdown("**4**. Adjust the effect of sketch guidance using the slider")
+
+    
+    eraser.change(fn=lambda x: gr.update(value=not x), inputs=[eraser], outputs=[line]).then(update_canvas, [line, eraser], [image])
+    line.change(fn=lambda x: gr.update(value=not x), inputs=[line], outputs=[eraser]).then(update_canvas, [line, eraser], [image])
+
+    demo.load(None,None,None,_js=scripts)
+    inputs = [image, prompt, prompt_temp, style, controlnet_conditioning_scale, device_type, param_dtype]
+    outputs = [result, download_sketch, download_output]
+    prompt.submit(fn=run, inputs=inputs, outputs=outputs)
+    style.change(lambda x: styles[x], inputs=[style], outputs=[prompt_temp]).then(
+        fn=run, inputs=inputs, outputs=outputs,)
+    run_button.click(fn=run, inputs=inputs, outputs=outputs)
+    image.change(run, inputs=inputs, outputs=outputs,)
+
+if __name__ == "__main__":
+    demo.queue().launch(debug=True, share=True)

demo_webcam.py

@@ -0,0 +1,128 @@
+import random
+import numpy as np
+from PIL import Image
+import base64
+from io import BytesIO
+
+import torch
+import torchvision.transforms.functional as F
+from diffusers import ControlNetModel, StableDiffusionControlNetPipeline
+import gradio as gr
+
+device = "mps"   # Linux & Windows
+weight_type = torch.float16  # torch.float16 works as well, but pictures seem to be a bit worse
+
+controlnet = ControlNetModel.from_pretrained(
+    "IDKiro/sdxs-512-dreamshaper-sketch", torch_dtype=weight_type
+).to(device)
+pipe = StableDiffusionControlNetPipeline.from_pretrained(
+    "IDKiro/sdxs-512-dreamshaper", controlnet=controlnet, torch_dtype=weight_type
+)
+pipe.to(device)
+
+style_list = [
+    {
+        "name": "No Style",
+        "prompt": "{prompt}",
+    },
+    {
+        "name": "Cinematic",
+        "prompt": "cinematic still {prompt} . emotional, harmonious, vignette, highly detailed, high budget, bokeh, cinemascope, moody, epic, gorgeous, film grain, grainy",
+    },
+    # Additional styles omitted for brevity
+]
+
+styles = {k["name"]: k["prompt"] for k in style_list}
+STYLE_NAMES = list(styles.keys())
+DEFAULT_STYLE_NAME = "No Style"
+MAX_SEED = np.iinfo(np.int32).max
+
+
+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(
+    image, 
+    prompt, 
+    prompt_template, 
+    style_name, 
+    controlnet_conditioning_scale,
+    device_type="GPU",
+    param_dtype='torch.float16',
+):
+    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)
+
+    print(f"prompt: {prompt}")
+    if image is None:
+        ones = Image.new("L", (512, 512), 255)
+        temp_url = pil_image_to_data_url(ones)
+        return ones, gr.update(link=temp_url), gr.update(link=temp_url)
+    prompt = prompt_template.replace("{prompt}", prompt)
+    control_image = image.convert("RGB")
+    control_image = Image.fromarray(255 - np.array(control_image))
+
+    output_pil = pipe(
+        prompt=prompt,
+        image=control_image,
+        width=512,
+        height=512,
+        guidance_scale=0.0,
+        num_inference_steps=1,
+        num_images_per_prompt=1,
+        output_type="pil",
+        controlnet_conditioning_scale=controlnet_conditioning_scale,
+    ).images[0]
+
+    input_image_url = pil_image_to_data_url(control_image)
+    output_image_url = pil_image_to_data_url(output_pil)
+    return (
+        output_pil,
+        gr.update(link=input_image_url),
+        gr.update(link=output_image_url),
+    )
+
+
+with gr.Blocks(css="style.css") as demo:
+    gr.Markdown("# SDXS-512-DreamShaper-Webcam")
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("## INPUT")
+            # Replace canvas with webcam image
+            image = gr.Image(
+                source="webcam", type="pil", label="Webcam Image", interactive=True
+            )
+
+            prompt = gr.Textbox(label="Prompt", value="", show_label=True)
+            style = gr.Dropdown(label="Style", choices=STYLE_NAMES, value=DEFAULT_STYLE_NAME)
+            prompt_template = gr.Textbox(label="Prompt Style Template", value=styles[DEFAULT_STYLE_NAME])
+
+            controlnet_conditioning_scale = gr.Slider(label="Control Strength", minimum=0, maximum=1, step=0.01, value=0.8)
+
+            device_choices = ['GPU','CPU']
+            device_type = gr.Radio(device_choices, label='Device', value=device_choices[0], interactive=True)
+
+            dtype_choices = ['torch.float16','torch.float32']
+            param_dtype = gr.Radio(dtype_choices, label='torch.weight_type', value=dtype_choices[0], interactive=True)
+
+        with gr.Column():
+            gr.Markdown("## OUTPUT")
+            result = gr.Image(label="Result", show_label=False, show_download_button=True)
+
+    inputs = [image, prompt, prompt_template, style, controlnet_conditioning_scale, device_type, param_dtype]
+    outputs = [result]
+    prompt.submit(fn=run, inputs=inputs, outputs=outputs)
+    style.change(lambda x: styles[x], inputs=[style], outputs=[prompt_template])
+    image.change(run, inputs=inputs, outputs=outputs)
+
+if __name__ == "__main__":
+    demo.queue().launch(debug=True)

demo_webcam_photo.py

@@ -0,0 +1,20 @@
+import gradio as gr
+
+# Function to display webcam image on canvas
+def display_webcam_image(img):
+    return img
+
+# Gradio app interface
+with gr.Blocks() as demo:
+    gr.Markdown("## Webcam Capture and Display")
+    # Webcam component
+    webcam = gr.Image(source="webcam", label="Webcam Capture", streaming=True)
+    # Canvas to display captured image
+    canvas = gr.Image(label="Captured Image")
+
+    # Button to capture image from webcam and display on canvas
+    capture_button = gr.Button("Capture Image")
+    capture_button.click(fn=display_webcam_image, inputs=webcam, outputs=canvas)
+
+# Launch the app
+demo.launch()

requirements.txt

@@ -0,0 +1,13 @@
+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
+tqdm>=4.65.0
+diffusers==0.25.1
+gradio==3.43.1
+tokenizers
+transformers
+accelerate
+peft

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;
+}