fix layout

app.py

@@ -112,8 +112,8 @@ demo = gr.Interface(
     fn=process,
     inputs=image,
     outputs=[output_slider, gr.File(label="output png file")],
-    title="🫧 Snap Clean 🧽",
-    description=config.DESCRIPTION
+    #title="🫧 Snap Clean 🧽",
+    description=config.DESCRIPTION + config.BUY_ME_A_COFFE
 )
 
 

config.py

@@ -8,15 +8,7 @@ DEFAULT_SEED = 124
 DEFAULT_NUM_INFERENCE_STEPS = 24
 DEFAULT_TRUE_GUIDANCE_SCALE = 3.5
 
-BUY_ME_A_COFFE = """  
-<a href="https://buymeacoffee.com/thesab" target="_blank">  
-    <button style="background-color: #FFDD00; border: none; color: black; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 10px;">  
-        ☕ Buy Me a Coffee  
-    </button>  
-</a>   
-"""
-
-DESCRIPTION = f"""  
+DESCRIPTION = """  
 <div style="max-width: 600px; margin: auto; font-family: Arial, sans-serif; color: #333;">  
 r    <h1 style="text-align: center; color: #fff;">🧽🫧Snap Clean!</h1>  
     <p style="text-align: center; font-size: 1.1em; line-height: 1.6;">  
@@ -24,9 +16,27 @@ Remove Unwanted Objects from Photos.
     </p>
     <p style="text-align: center; font-size: 1.1em; line-height: 1.6;">      
     </p>  
-    <div>
-        {BUY_ME_A_COFFE}
-    </div>  
-</div>
+</div>  
+<div>
 """
 
+
+
+# JavaScript to append the Buy Me a Coffee button to the bottom of the page
+BUY_ME_A_COFFE = """  
+<script type="text/javascript">  
+  document.addEventListener("DOMContentLoaded", function() {  
+    var coffeeButton = document.createElement("div");  
+    coffeeButton.innerHTML = `  
+      <div style="text-align: center; margin-top: 20px;">  
+        <a href="https://buymeacoffee.com/thesab" target="_blank">  
+          <button style="background-color: #FFDD00; border: none; color: black; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; border-radius: 10px;">  
+            ☕ Buy Me a Coffee  
+          </button>  
+        </a>  
+      </div>  
+    `;  
+    document.body.appendChild(coffeeButton);  
+  });  
+</script>  
+"""