chore: Update UI

app.py

@@ -13,8 +13,12 @@ from diffusers import (
 from nunchaku import NunchakuQwenImageTransformer2DModel
 from nunchaku.utils import get_gpu_memory, get_precision
 
+from kofi import SCRIPT
+
 DEVICE = "cuda" if torch.cuda.is_available() else "cpu"
 
+HEADER = "# [Nunchaku Qwen-Image-Edit-2509](https://huggingface.co/nunchaku-tech/nunchaku-qwen-image-edit-2509)"
+
 RANK = 128
 PRECISION = get_precision() if DEVICE == "cuda" else "fp4"
 TRANSFORMER_ID = f"nunchaku-tech/nunchaku-qwen-image-edit-2509/svdq-{PRECISION}_r{RANK}-qwen-image-edit-2509.safetensors"
@@ -139,7 +143,7 @@ class Model:
         latents = callback_kwargs.get("latents", None)
 
         if latents is not None:
-            print(f"Latents shape: {latents.shape}, dtype: {latents.dtype}")
+            # print(f"Latents shape: {latents.shape}, dtype: {latents.dtype}")
 
             latents = pipeline._unpack_latents(
                 latents, self.image_height, self.image_width, pipeline.vae_scale_factor
@@ -166,15 +170,8 @@ class Model:
         return {}
 
 
-with gr.Blocks() as demo:
-    title = gr.Markdown(
-        "# [Nunchaku Qwen-Image-Edit-2509](https://huggingface.co/nunchaku-tech/nunchaku-qwen-image-edit-2509)"
-    )
-
-    if DEVICE != "cuda":
-        gr.Markdown(
-            "⚠️ **CUDA not available.** This application requires a CUDA-compatible GPU to function properly. You can duplicate this space with a CUDA-enabled runtime."
-        )
+with gr.Blocks(js=SCRIPT) as demo:
+    title = gr.Markdown(HEADER)
 
     with gr.Row():
         with gr.Column():
@@ -254,6 +251,15 @@ with gr.Blocks() as demo:
     with gr.Row():
         run_button = gr.Button("Run")
 
+    with gr.Row():
+        if DEVICE != "cuda":
+            gr.Markdown(
+                "⚠️ **CUDA not available.** This application requires a CUDA-compatible GPU to function properly. You can duplicate this space with a CUDA-enabled runtime."
+            )
+
+    with gr.Row():
+        gr.HTML('<div id="kofi" style="text-align: center;"></div>')
+
     def preprocess_image(
         image: PIL.Image.Image,
         image_size: int = IMAGE_SIZE,
@@ -353,5 +359,5 @@ with gr.Blocks() as demo:
 if __name__ == "__main__":
     demo.launch(
         allowed_paths=["output/video.mp4"],
-        # share=True,
+        share=False,
     )

kofi.py

@@ -0,0 +1,42 @@
+SCRIPT = """
+async function loadKofi() {
+    var kofiwidget2 = kofiwidget2 ||
+    (function () {
+        var style = "";
+        var html = "";
+        var color = "";
+        var text = "";
+        var id = "";
+        return {
+            init: function (pText, pColor, pId) {
+                color = pColor;
+                text = pText;
+                id = pId;
+                style =
+                    "img.kofiimg{display: initial!important;vertical-align:middle;height:13px!important;width:20px!important;padding-top:0!important;padding-bottom:0!important;border:none;margin-top:0;margin-right:7px!important;margin-left:0!important;margin-bottom:3px!important;content:url('https://storage.ko-fi.com/cdn/cup-border.png')}.kofiimg:after{vertical-align:middle;height:25px;padding-top:0;padding-bottom:0;border:none;margin-top:0;margin-right:6px;margin-left:0;margin-bottom:4px!important;content:url('https://storage.ko-fi.com/cdn/whitelogo.svg')}.btn-container{display:inline-block!important;white-space:nowrap;min-width:160px}span.kofitext{color:#fff !important;letter-spacing: -0.15px!important;text-wrap:none;vertical-align:middle;line-height:30px !important;padding:0;text-align:center;text-decoration:none!important; text-shadow: 0 1px 1px rgba(34, 34, 34, 0.05);}.kofitext a{color:#fff !important;text-decoration:none:important;}.kofitext a:hover{color:#fff !important;text-decoration:none}a.kofi-button{box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);line-height:27px!important;min-width:150px;display:inline-block!important;background-color:#29abe0;padding:2px 12px !important;text-align:center !important;border-radius:7px;color:#fff;cursor:pointer;overflow-wrap:break-word;vertical-align:middle;border:0 none #fff !important;font-family:'Quicksand',Helvetica,Century Gothic,sans-serif !important;text-decoration:none;text-shadow:none;font-weight:700!important;font-size:14px !important}a.kofi-button:visited{color:#fff !important;text-decoration:none !important}a.kofi-button:hover{opacity:.85;color:#f5f5f5 !important;text-decoration:none !important}a.kofi-button:active{color:#f5f5f5 !important;text-decoration:none !important}.kofitext img.kofiimg {height:15px!important;width:22px!important;display: initial;animation: kofi-wiggle 3s infinite;}";
+                style = style + "@keyframes kofi-wiggle{0%{transform:rotate(0) scale(1)}60%{transform:rotate(0) scale(1)}75%{transform:rotate(0) scale(1.12)}80%{transform:rotate(0) scale(1.1)}84%{transform:rotate(-10deg) scale(1.1)}88%{transform:rotate(10deg) scale(1.1)}92%{transform:rotate(-10deg) scale(1.1)}96%{transform:rotate(10deg) scale(1.1)}100%{transform:rotate(0) scale(1)}}";
+                style = "<style>" + style + "</style>";
+                html =
+                    "<link href='https://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>";
+                html +=
+                    '<div class=btn-container><a title="Support me on ko-fi.com" class="kofi-button" style="background-color:[color]; text-decoration: none;" href="https://ko-fi.com/[id]" target="_blank"> <span class="kofitext"><img src="https://storage.ko-fi.com/cdn/cup-border.png" alt="Ko-fi donations" class="kofiimg"/>[text]</span></a></div>';
+            },
+            getHTML: function () {
+                var rtn = style + html.replace("[color]", color).replace("[text]", text).replace("[id]", id);
+                return rtn;
+            },
+            draw: function () {
+                document.writeln(style + html.replace("[color]", color).replace("[text]", text).replace("[id]", id));
+            }
+        };
+    }());
+    const checkElement = setInterval(() => {
+        const kofiDiv = document.getElementById('kofi');
+        if (kofiDiv) {
+            clearInterval(checkElement);
+            kofiwidget2.init('Buy me a coffee', '#f87316', 'Y8Y0STZND');
+            kofiDiv.innerHTML = kofiwidget2.getHTML();
+        }
+    }, 100);
+}
+"""