Update app.py

app.py

@@ -108,7 +108,6 @@ h1{text-align:center}
 footer {
     visibility: hidden
 }
-
 .wheel-and-hamster {
   --dur: 1s;
   position: relative;
@@ -116,14 +115,12 @@ footer {
   height: 12em;
   font-size: 14px;
 }
-
 .wheel,
 .hamster,
 .hamster div,
 .spoke {
   position: absolute;
 }
-
 .wheel,
 .spoke {
   border-radius: 50%;
@@ -132,12 +129,10 @@ footer {
   width: 100%;
   height: 100%;
 }
-
 .wheel {
   background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
   z-index: 2;
 }
-
 .hamster {
   animation: hamster var(--dur) ease-in-out infinite;
   top: 50%;
@@ -148,7 +143,6 @@ footer {
   transform-origin: 50% 0;
   z-index: 1;
 }
-
 .hamster__head {
   animation: hamsterHead var(--dur) ease-in-out infinite;
   background: hsl(30,90%,55%);
@@ -161,7 +155,6 @@ footer {
   height: 2.5em;
   transform-origin: 100% 50%;
 }
-
 .hamster__ear {
   animation: hamsterEar var(--dur) ease-in-out infinite;
   background: hsl(0,90%,85%);
@@ -173,7 +166,6 @@ footer {
   height: 0.75em;
   transform-origin: 50% 75%;
 }
-
 .hamster__eye {
   animation: hamsterEye var(--dur) linear infinite;
   background-color: hsl(0,0%,0%);
@@ -183,7 +175,6 @@ footer {
   width: 0.5em;
   height: 0.5em;
 }
-
 .hamster__nose {
   background: hsl(0,90%,75%);
   border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
@@ -192,7 +183,6 @@ footer {
   width: 0.2em;
   height: 0.25em;
 }
-
 .hamster__body {
   animation: hamsterBody var(--dur) ease-in-out infinite;
   background: hsl(30,90%,90%);
@@ -206,7 +196,6 @@ footer {
   transform-origin: 17% 50%;
   transform-style: preserve-3d;
 }
-
 .hamster__limb--fr,
 .hamster__limb--fl {
   clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
@@ -216,183 +205,381 @@ footer {
   height: 1.5em;
   transform-origin: 50% 0;
 }
-
 .hamster__limb--fr {
   animation: hamsterFRLimb var(--dur) linear infinite;
   background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
   transform: rotate(15deg) translateZ(-1px);
 }
-
 .hamster__limb--fl {
   animation: hamsterFLLimb var(--dur) linear infinite;
   background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
   transform: rotate(-60deg) translateZ(-1px);
 }
-
 .hamster__limb--br,
 .hamster__limb--bl {
-  clip-path: polygon(0 0,100% 0,100% 30%,70% 80%,50% 100%,40% 80%,0% 30%);
-  top: 1.25em;
+  clip-path: polygon(0 0,100% 0,100% 30%,70% 80%,60% 100%,40% 100%,30% 80%);
+  top: 2.3em;
   left: 2.8em;
-  width: 1.5em;
+  width: 1.25em;
   height: 2.5em;
-  transform-origin: 33% 10%;
+  transform-origin: 50% 10%;
 }
-
 .hamster__limb--br {
   animation: hamsterBRLimb var(--dur) linear infinite;
   background: linear-gradient(hsl(0,90%,75%) 40%,hsl(30,90%,80%) 40%);
-  transform: rotate(-15deg) translateZ(-1px);
+  transform: rotate(45deg) translateZ(-1px);
 }
-
 .hamster__limb--bl {
   animation: hamsterBLLimb var(--dur) linear infinite;
   background: linear-gradient(hsl(0,90%,75%) 40%,hsl(30,90%,80%) 40%);
-  transform: rotate(60deg) translateZ(-1px);
+  transform: rotate(-30deg) translateZ(-1px);
 }
-
 .hamster__tail {
   animation: hamsterTail var(--dur) linear infinite;
   background: hsl(0,90%,85%);
   border-radius: 0.25em 50% 50% 0.25em;
-  box-shadow: 0.25em 0 hsl(30,90%,55%) inset;
-  top: 1.5em;
-  left: 5.5em;
-  width: 0.5em;
+  box-shadow: 0.1em 0.5em 0 hsl(30,90%,55%) inset,
+		0.1em -0.25em 0 hsl(30,90%,90%) inset;
+  top: 3em;
+  left: 6em;
+  width: 0.75em;
   height: 0.75em;
   transform: rotate(30deg) translateZ(-1px);
-  transform-origin: 0.25em 0.125em;
 }
-
 .spoke {
-  background: radial-gradient(hsl(0,0%,70%) 25%,hsla(0,0%,60%,0) 26%) center/8px 8px;
-  z-index: 0;
+  --s: 0.2;
+  background: hsl(0,0%,100%);
+  box-shadow: 0 0 0 0.2em hsl(0,0%,0%);
+  left: calc(50% - var(--s)/2);
+  width: var(--s);
+  height: var(--s);
 }
-
-.spoke--1 {
-  animation: spoke var(--dur) linear infinite;
+.spoke:nth-child(1) {
+  --rotation: 15deg;
+  transform: rotate(var(--rotation));
 }
-
-.spoke--2 {
-  animation: spoke var(--dur) linear infinite;
-  transform: rotate(30deg);
+.spoke:nth-child(2) {
+  --rotation: 45deg;
+  transform: rotate(var(--rotation));
 }
-
-.spoke--3 {
-  animation: spoke var(--dur) linear infinite;
-  transform: rotate(60deg);
+.spoke:nth-child(3) {
+  --rotation: 75deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(4) {
+  --rotation: 105deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(5) {
+  --rotation: 135deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(6) {
+  --rotation: 165deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(7) {
+  --rotation: 195deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(8) {
+  --rotation: 225deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(9) {
+  --rotation: 255deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(10) {
+  --rotation: 285deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(11) {
+  --rotation: 315deg;
+  transform: rotate(var(--rotation));
+}
+.spoke:nth-child(12) {
+  --rotation: 345deg;
+  transform: rotate(var(--rotation));
 }
 
 @keyframes hamster {
-  0%,100% { transform: rotate(4deg) translate(-0.8em,1.85em) }
-  50% { transform: rotate(0) translate(-0.8em,1.85em) }
+  50% {
+	transform: rotate(-4deg) translate(-0.8em,1.85em);
+  }
 }
 
 @keyframes hamsterHead {
-  0%,100% { transform: rotate(0) }
-  50% { transform: rotate(-8deg) }
+  50% {
+	transform: rotate(-8deg);
+  }
 }
 
-@keyframes hamsterEar {
-  0%,100% { transform: rotate(0) }
-  50% { transform: rotate(-3deg) }
+@keyframes hamsterEye {
+  50% {
+	transform: translateY(0.1em);
+  }
 }
 
-@keyframes hamsterEye {
-  0%,90%,100% { transform: scaleY(1) }
-  95% { transform: scaleY(0) }
+@keyframes hamsterEar {
+  50% {
+	transform: rotate(8deg);
+  }
 }
 
 @keyframes hamsterBody {
-  0%,100% { transform: rotate(0) }
-  50% { transform: rotate(2deg) }
+  50% {
+	transform: rotate(2deg);
+  }
 }
 
 @keyframes hamsterFRLimb {
-  0%,100% { transform: rotate(15deg) translateZ(-1px) }
-  50% { transform: rotate(-30deg) translateZ(-1px) }
+  8%,70% {
+	transform: rotate(15deg) translateZ(-1px);
+  }
+  33% {
+	transform: rotate(-60deg) translateZ(-1px);
+  }
+  83% {
+	transform: rotate(45deg) translateZ(-1px);
+  }
 }
 
 @keyframes hamsterFLLimb {
-  0%,100% { transform: rotate(-60deg) translateZ(-1px) }
-  50% { transform: rotate(-25deg) translateZ(-1px) }
+  8%,70% {
+	transform: rotate(-60deg) translateZ(-1px);
+  }
+  33% {
+	transform: rotate(15deg) translateZ(-1px);
+  }
+  83% {
+	transform: rotate(-45deg) translateZ(-1px);
+  }
 }
 
 @keyframes hamsterBRLimb {
-  0%,100% { transform: rotate(-15deg) translateZ(-1px) }
-  50% { transform: rotate(30deg) translateZ(-1px) }
+  0%,50% {
+	transform: rotate(45deg) translateZ(-1px);
+  }
+  25% {
+	transform: rotate(-30deg) translateZ(-1px);
+  }
+  75% {
+	transform: rotate(60deg) translateZ(-1px);
+  }
 }
 
 @keyframes hamsterBLLimb {
-  0%,100% { transform: rotate(60deg) translateZ(-1px) }
-  50% { transform: rotate(25deg) translateZ(-1px) }
+  0%,50% {
+	transform: rotate(-30deg) translateZ(-1px);
+  }
+  25% {
+	transform: rotate(45deg) translateZ(-1px);
+  }
+  75% {
+	transform: rotate(-45deg) translateZ(-1px);
+  }
 }
 
 @keyframes hamsterTail {
-  0%,100% { transform: rotate(30deg) translateZ(-1px) }
-  50% { transform: rotate(10deg) translateZ(-1px) }
+  50% {
+	transform: rotate(-30deg) translateZ(-1px);
+  }
 }
 
-@keyframes spoke {
-  0% { transform: rotate(0) }
-  100% { transform: rotate(1turn) }
+#wrapper {
+  position: relative;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.loading-container {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.hidden {
+  display: none;
 }
 '''
 
 html = '''
-<div id="loading-animation" style="display: flex; justify-content: center; align-items: center; height: 100vh;">
-  <div class="wheel-and-hamster">
-    <div class="wheel"></div>
-    <div class="hamster">
-      <div class="hamster__body">
-        <div class="hamster__head">
-          <div class="hamster__ear"></div>
-          <div class="hamster__eye"></div>
-          <div class="hamster__nose"></div>
+<div id="wrapper">
+  <div class="loading-container">
+    <div class="wheel-and-hamster">
+      <div class="wheel">
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+        <div class="spoke"></div>
+      </div>
+      <div class="hamster">
+        <div class="hamster__body">
+          <div class="hamster__head">
+            <div class="hamster__ear"></div>
+            <div class="hamster__eye"></div>
+            <div class="hamster__nose"></div>
+          </div>
+          <div class="hamster__limb hamster__limb--fr"></div>
+          <div class="hamster__limb hamster__limb--fl"></div>
+          <div class="hamster__limb hamster__limb--br"></div>
+          <div class="hamster__limb hamster__limb--bl"></div>
+          <div class="hamster__tail"></div>
         </div>
-        <div class="hamster__limb hamster__limb--fr"></div>
-        <div class="hamster__limb hamster__limb--fl"></div>
-        <div class="hamster__limb hamster__limb--br"></div>
-        <div class="hamster__limb hamster__limb--bl"></div>
-        <div class="hamster__tail"></div>
       </div>
     </div>
-    <div class="spoke spoke--1"></div>
-    <div class="spoke spoke--2"></div>
-    <div class="spoke spoke--3"></div>
   </div>
 </div>
 <script>
-  window.onload = function() {
-    document.getElementById("loading-animation").style.display = "none";
-  }
+  // Wait for the Gradio app to load
+  document.addEventListener("DOMContentLoaded", function() {
+    const observer = new MutationObserver(function(mutationsList, observer) {
+      for (const mutation of mutationsList) {
+        if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
+          // Check if Gradio has loaded by looking for a specific element
+          const gradioApp = document.querySelector("#root");
+          if (gradioApp) {
+            // Hide the loading animation and observer
+            document.querySelector(".loading-container").classList.add("hidden");
+            observer.disconnect();
+          }
+        }
+      }
+    });
+
+    // Start observing the body for changes
+    observer.observe(document.body, { childList: true, subtree: true });
+  });
 </script>
 '''
 
-with gr.Blocks(css=css) as demo:
-    gr.HTML(html)
-    gr.Markdown("# Flash Attention with SDXL")
-    gr.Markdown("Generate images with Flash Attention and SDXL")
-
-    with gr.Row():
-        with gr.Column(scale=55):
-            prompt = gr.Textbox(label="Prompt", show_label=False, max_lines=2, placeholder="Enter your prompt")
-            negative_prompt = gr.Textbox(label="Negative Prompt", show_label=False, max_lines=2, placeholder="Enter negative prompt")
-        with gr.Column(scale=45):
-            generate_btn = gr.Button("Generate")
-
-    with gr.Row():
-        image_output = gr.Gallery(label="Generated Images", columns=2, height="auto")
-        seed_output = gr.Number(label="Seed Used")
+block = gr.Blocks(css=css)
 
-    gr.Examples(examples=examples, inputs=[prompt])
-
-    inputs = [prompt, negative_prompt, gr.Checkbox(False, label="Use Negative Prompt"), gr.Slider(1, MAX_SEED, value=1, label="Seed"),
-              gr.Slider(256, MAX_IMAGE_SIZE, value=1024, label="Width"), gr.Slider(256, MAX_IMAGE_SIZE, value=1024, label="Height"),
-              gr.Slider(1, 20, value=7.5, label="Guidance Scale"), gr.Slider(1, 100, value=30, label="Number of Inference Steps"),
-              gr.Checkbox(False, label="Randomize Seed"), gr.Checkbox(True, label="Use Resolution Binning"),
-              gr.Slider(1, 10, value=1, label="Number of Images")]
-
-    generate_btn.click(fn=generate, inputs=inputs, outputs=[image_output, seed_output])
-
-demo.launch()
+with block as demo:
+    gr.HTML(html)
+    with gr.Column(elem_id="main-app"):
+        gr.Markdown(
+            """
+            # Generate images with Stable Diffusion XL
+            """
+        )
+        with gr.Row():
+            with gr.Column():
+                text = gr.Textbox(
+                    label="Prompt",
+                    placeholder="Enter your prompt",
+                    lines=1,
+                )
+                negative_text = gr.Textbox(
+                    label="Negative Prompt",
+                    placeholder="Enter negative prompt",
+                    lines=1,
+                )
+                negative_prompt_chk = gr.Checkbox(
+                    label="Use Negative Prompt",
+                    value=True
+                )
+                seed = gr.Number(
+                    label="Seed",
+                    value=1,
+                    precision=0
+                )
+                randomize_seed = gr.Checkbox(
+                    label="Randomize Seed",
+                    value=False
+                )
+                width = gr.Slider(
+                    label="Width",
+                    value=1024,
+                    minimum=64,
+                    maximum=MAX_IMAGE_SIZE,
+                    step=8
+                )
+                height = gr.Slider(
+                    label="Height",
+                    value=1024,
+                    minimum=64,
+                    maximum=MAX_IMAGE_SIZE,
+                    step=8
+                )
+                guidance_scale = gr.Slider(
+                    label="Guidance Scale",
+                    value=3,
+                    minimum=0,
+                    maximum=50,
+                    step=0.5
+                )
+                num_inference_steps = gr.Slider(
+                    label="Number of Inference Steps",
+                    value=30,
+                    minimum=1,
+                    maximum=100,
+                    step=1
+                )
+                use_resolution_binning = gr.Checkbox(
+                    label="Use Resolution Binning",
+                    value=True
+                )
+                num_images = gr.Number(
+                    label="Number of Images to Generate",
+                    value=1,
+                    minimum=1,
+                    maximum=10,
+                    step=1
+                )
+                generate_button = gr.Button(label="Generate Images")
+            with gr.Column():
+                gr.Label(label="Examples:")
+                for example in examples:
+                    gr.Label(label=f"- {example}")
+
+        generated_images = gr.Image(
+            label="Generated Images",
+            type="PIL",  # Display the PIL image
+            source=None
+        )
+
+    def generate_images_interface():
+        args = {
+            "prompt": text.value,
+            "negative_prompt": negative_text.value if negative_prompt_chk.value else "",
+            "use_negative_prompt": negative_prompt_chk.value,
+            "seed": seed.value,
+            "width": int(width.value),
+            "height": int(height.value),
+            "guidance_scale": float(guidance_scale.value),
+            "num_inference_steps": int(num_inference_steps.value),
+            "randomize_seed": randomize_seed.value,
+            "use_resolution_binning": use_resolution_binning.value,
+            "num_images": int(num_images.value),
+            "progress": gr.Progress()
+        }
+        image_paths, _ = generate(**args)
+        images = [Image.open(image_path) for image_path in image_paths]
+        return images
+
+    def on_generate_click():
+        generated_images.set_value(generate_images_interface())
+
+    gr.Interface(
+        fn=on_generate_click,
+        live=True,
+        title="Diffusion Generator",
+        description="Generate images using Stable Diffusion XL.",
+        layout="vertical",
+        blocking=True
+    ).launch()