Merge branch 'banner' into beta

ui/index.html

@@ -461,6 +461,9 @@
                     </div>
                     <div class="clearfix" style="clear: both;"></div>
                 </div>
+                <div id="supportBanner" class="displayNone">
+                    If you found this project useful and want to help keep it alive, please consider <a href="https://ko-fi.com/easydiffusion" target="_blank">buying me a coffee</a> or <a href="https://www.patreon.com/EasyDiffusion" target="_blank">supporting me on Patreon</a> to help cover the cost of development and maintenance! Or even better, <a href="https://cmdr2.itch.io/easydiffusion" target="_blank">purchasing it at the full price</a>. Thank you for your support!
+                </div>
             </div>
         </div>
         </div>
@@ -789,7 +792,6 @@
     <div id="footer-spacer"></div>
     <div id="footer">
         <div class="line-separator">&nbsp;</div>
-        <p>If you found this project useful and want to help keep it alive, please <a href="https://ko-fi.com/easydiffusion" target="_blank"><img src="/media/images/kofi.png" id="coffeeButton"></a> to help cover the cost of development and maintenance! Thank you for your support!</p>
         <p>Please feel free to join the <a href="https://discord.com/invite/u9yhsFmEkB" target="_blank">discord community</a> or <a href="https://github.com/easydiffusion/easydiffusion/issues" target="_blank">file an issue</a> if you have any problems or suggestions in using this interface.</p>
         <div id="footer-legal">
             <p><b>Disclaimer:</b> The authors of this project are not responsible for any content generated using this interface.</p>

ui/media/css/main.css

@@ -2016,4 +2016,14 @@ div#enlarge-buttons {
     .model_entry .model_name {
         width: 60% !important;
     }
+}
+
+#supportBanner {
+    font-size: 9pt;
+    padding: 5pt;
+    border: 1px solid var(--background-color2);
+    margin-bottom: 5pt;
+    border-radius: 4pt;
+    padding-top: 6pt;
+    color: var(--small-label-color);
 }

ui/media/js/main.js

@@ -160,6 +160,7 @@ let initImageClearBtn = document.querySelector(".init_image_clear")
 let promptStrengthContainer = document.querySelector("#prompt_strength_container")
 
 let initialText = document.querySelector("#initial-text")
+let supportBanner = document.querySelector("#supportBanner")
 let versionText = document.querySelector("#version")
 let previewTools = document.querySelector("#preview-tools")
 let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
@@ -956,6 +957,13 @@ function makeImage() {
     newTaskRequests.forEach(createTask)
 
     updateInitialText()
+
+    const countBeforeBanner = localStorage.getItem("countBeforeBanner") || 1
+    if (countBeforeBanner <= 0) {
+        supportBanner.classList.remove("displayNone")
+    } else {
+        localStorage.setItem("countBeforeBanner", countBeforeBanner - 1)
+    }
 }
 
 /* Hover effect for the init image in the task list */
@@ -1155,7 +1163,7 @@ function createTask(task) {
     })
 
     task.isProcessing = true
-    taskEntry = imagePreviewContent.insertBefore(taskEntry, previewTools.nextSibling)
+    taskEntry = imagePreviewContent.insertBefore(taskEntry, supportBanner.nextSibling)
     htmlTaskMap.set(taskEntry, task)
 
     task.previewPrompt.innerText = task.reqBody.prompt
@@ -1521,10 +1529,16 @@ function updateInitialText() {
         }
         previewTools.classList.add("displayNone")
         initialText.classList.remove("displayNone")
+        supportBanner.classList.add("displayNone")
     } else {
         initialText.classList.add("displayNone")
         previewTools.classList.remove("displayNone")
         document.querySelector("div.display-settings").prepend(undoButton)
+
+        const countBeforeBanner = localStorage.getItem("countBeforeBanner") || 1
+        if (countBeforeBanner <= 0) {
+            supportBanner.classList.remove("displayNone")
+        }
     }
 }