Merge pull request #1630 from easydiffusion/beta

Beta

ui/index.html

@@ -463,6 +463,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> to help cover the cost of development and maintenance! Thanks for your support!
+                </div>
             </div>
         </div>
         </div>
@@ -807,8 +810,6 @@
     <div id="footer-spacer"></div>
     <div id="footer">
         <div class="line-separator">&nbsp;</div>
-        <div id="supportBanner" style="display: none;"></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> or <a href="https://www.patreon.com/EasyDiffusion" target="_blank">support 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">donate the actual cost of this software</a>. Thanks 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/js/main.js

@@ -514,7 +514,7 @@ function showImages(reqBody, res, outputContainer, livePreview) {
                 { 
                     text: "Use as Thumbnail",
                     on_click: onUseAsThumbnailClick,
-                    filter: (req, img) => "use_embeddings_model" in req || "use_lora_model" in req,
+                    filter: (req, img) => "use_embeddings_model" in req || "use_lora_model" in req
                 },
             ]
 
@@ -748,7 +748,7 @@ function onUseAsThumbnailClick(req, img) {
         onUseAsThumbnailClick.croppr.setImage(img.src)
     }
 
-    useAsThumbSelect.innerHTML = ""
+    useAsThumbSelect.innerHTML=""
 
     if ("use_embeddings_model" in req) {
         let embeddings = req.use_embeddings_model.map((e) => e.split("/").pop())
@@ -766,6 +766,7 @@ function onUseAsThumbnailClick(req, img) {
         useAsThumbSelect.appendChild(embOptions)
     }
 
+
     if ("use_lora_model" in req) {
         let LORA = req.use_lora_model
         if (typeof LORA == "string") {
@@ -831,7 +832,8 @@ const Bucket = {
     },
 
     getList(path) {
-        return fetch(`bucket/${path}`).then((response) => (response.status == 200 ? response.json() : []))
+        return fetch(`bucket/${path}`)
+            .then((response) => (response.status == 200 ? response.json() : []))
     },
 
     store(path, data) {
@@ -839,7 +841,8 @@ const Bucket = {
     },
 
     retrieve(path) {
-        return fetch(`bucket/${path}.json`).then((response) => (response.status == 200 ? response.json() : null))
+        return fetch(`bucket/${path}.json`)
+            .then((response) => (response.status == 200 ? response.json() : null))
     },
 }
 
@@ -857,7 +860,9 @@ useAsThumbSaveBtn.addEventListener("click", (e) => {
             let options = useAsThumbSelect.selectedOptions
             let promises = []
             for (let embedding of options) {
-                promises.push(Bucket.upload(`${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`, blob))
+                promises.push(
+                    Bucket.upload(`${profileName}/${embedding.dataset["type"]}/${embedding.value}.png`, blob)
+                )
             }
             return Promise.all(promises)
         })
@@ -1040,12 +1045,12 @@ function makeImage() {
 
     updateInitialText()
 
-    // const countBeforeBanner = localStorage.getItem("countBeforeBanner") || 1
+    const countBeforeBanner = localStorage.getItem("countBeforeBanner") || 1
-    // if (countBeforeBanner <= 0) {
+    if (countBeforeBanner <= 0) {
-    //     // supportBanner.classList.remove("displayNone")
+        // supportBanner.classList.remove("displayNone")
-    // } else {
+    } else {
-    //     localStorage.setItem("countBeforeBanner", countBeforeBanner - 1)
+        localStorage.setItem("countBeforeBanner", countBeforeBanner - 1)
-    // }
+    }
 }
 
 /* Hover effect for the init image in the task list */
@@ -1245,7 +1250,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
@@ -1616,16 +1621,16 @@ function updateInitialText() {
         }
         previewTools.classList.add("displayNone")
         initialText.classList.remove("displayNone")
-        // supportBanner.classList.add("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
+        const countBeforeBanner = localStorage.getItem("countBeforeBanner") || 1
-        // if (countBeforeBanner <= 0) {
+        if (countBeforeBanner <= 0) {
-        //     supportBanner.classList.remove("displayNone")
+            supportBanner.classList.remove("displayNone")
-        // }
+        }
     }
 }
 
@@ -2517,7 +2522,7 @@ function updateEmbeddingsList(filter = "") {
 
             return Bucket.getList(`${profileName}/lora/`)
         })
-        .then(async function(icons) {
+        .then(async function (icons) {
             for (let lora of loraModelField.value.modelNames) {
                 let keywords = await getLoraKeywords(lora)
                 loraTokens = loraTokens.concat(keywords)
@@ -2526,13 +2531,14 @@ function updateEmbeddingsList(filter = "") {
                 if (icons.includes(`${loraname}.png`)) {
                     keywords.forEach((kw) => {
                         iconMap[kw.toLowerCase()] = `lora/${loraname}.png`
+                        
                     })
                 }
             }
 
             let tokenList = [...modelsOptions.embeddings]
             if (loraTokens.length != 0) {
-                tokenList.unshift(["LORA Keywords", loraTokens])
+                tokenList.unshift(['LORA Keywords', loraTokens])
             }
             embeddingsList.replaceChildren(html(tokenList, iconMap, "", filter))
             createCollapsibles(embeddingsList)