Merge pull request #1191 from JeLuF/splash

Add splash screen for testDiffusers users

ui/index.html

@@ -30,7 +30,7 @@
             <h1>
                 <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small>v2.5.41 <span id="updateBranchLabel"></span></small>
+                <small><span id="version">v2.5.41</span> <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">
@@ -432,6 +432,53 @@
         </div>
     </div>
     
+    <div class="popup" id="splash-screen" data-version="1">
+        <div>
+            <i class="close-button fa-solid fa-xmark"></i>
+            <img class="splash-img" src="/media/images/icon-512x512.png" width="128" height="128">
+            <h1>Diffusers Tech Preview</h1>
+            <p>The Diffusers Tech Preview allows early access to the new features based on <a href="https://huggingface.co/docs/diffusers/index" target="_blank">Diffusers</a>.</p>
+            <p>The Preview is under active development. It is experimental! It does still have bugs and missing features!</p>
+            <h2>New upcoming features in our new engine</h2>
+            <ul>
+                <li><a href="https://huggingface.co/blog/lora" target="_blank">LORA</a> support - Place LORA files in the <tt>models/lora</tt> folder.</li>
+                <li><a href="https://github.com/damian0815/compel/blob/main/Reference.md" target="_blank">Compel Prompt Parser</a> - New, more powerful parser. In short:
+                    <ul>
+                        <li> no limit to the length of prompts (i.e. long prompts are supported)</li>
+                        <li> Use <tt>+</tt> and <tt>-</tt> to increase/decrease the weight. E.g. <tt>apple</tt>, <tt>apple+</tt>, <tt>apple++</tt>, <tt>apple+++</tt>,
+                             or <tt>apple-</tt>, <tt>apple--</tt> for different weights.</li>
+                        <li> Use exact weights - 0.0 to 1.0 reduces the weight, 1.0 to 2.0 increases the weight.
+                             Think of it like a multiplier, like 1.5x or 0.5x: E.g. <tt>(apple)0.8 falling from a tree</tt>,
+                             <tt>(apple)1.5 falling from a tree</tt>, <tt>(apple falling)1.4 from a tree</tt></li>
+                        <li> You can group tokens together using parentheses/round-brackets. E.g. <tt>(apple falling)++
+                             from a tree</tt>. Nested parentheses are supported.</li>
+                    </ul>
+                    This clarifies a few things:
+                    <ul>
+                        <li> colon (<tt>:</tt>) is NOT used for blending. Neither is it used for weights. It has no impact and
+                             will be considered a part of the prompt.</li>
+                        <li> <tt>(())</tt> and <tt>[]</tt> do not affect the prompt's weights.</li>
+                    </ul>
+                </li>
+                <li> More choices for img2img samplers</li>
+                <li> Support for official inpainting models</li>
+		<li> Generate images that tile seamlessly</li>
+                <li> <a href="https://github.com/cmdr2/stable-diffusion-ui/wiki/Clip-Skip" target="_blank">Clip Skip</a> support allows to skip the last CLIP layer (recommended by some LORA models)</li>
+                <li> New samplers: DDPM and DEIS</li>
+                <li> Memory optimizations that allow the use of 2GB GPUs</li>
+            </ul>
+            <h2>Known issues</h2>
+            <ul>
+                <li> Some LoRA consistently fail to load in EasyDiffusion</li>
+                <li> Some LoRA are far more sensitive to alpha (compared to a11)</li>
+                <li> Hangs sometimes on "compel is ready", while making the token.</li>
+                <li> Some custom inpainting models don't work</li>
+                <li> These samplers don't work yet: Unipc SNR, Unipc TQ, Unipc SNR2, DPM++ 2s Ancestral, DPM++ SDE, DPM Fast, DPM Adaptive, DPM2</li>
+                <li> Hypernetwork doesn't work</li>
+                <li> The time remaining in browser differs from the one in the console</li>
+            </ul>
+        </div>
+    </div>
 
     <div class="popup" id="download-images-popup">
         <div>
@@ -553,6 +600,7 @@ async function init() {
             ping: tunnelUpdate
         }
     })
+    splashScreen()
 
     // playSound()
 }

ui/media/css/main.css

@@ -1292,6 +1292,49 @@ body.wait-pause {
    100% { border: solid 12px var(--accent-color); }
 }
 
+#splash-screen div {
+   text-align: left;
+   max-width: 70vw;
+}
+
+#splash-screen .splash-img {
+   float: right;
+   box-shadow: none;
+   margin-left: 6px;
+}
+
+#splash-screen tt {
+   font-family: monospace;
+   background: var(--input-background-color);
+   padding: 1px 4px 1px 4px;
+   border-radius: 5px;
+}
+
+#splash-screen li {
+   margin-bottom: 6px;
+}
+
+#splash-screen a
+{
+  color: #ccf;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+#splash-screen a[href^="http"]::after,
+#splash-screen a[href^="https://"]::after
+{
+  content: "";
+  width: 11px;
+  height: 11px;
+  margin-left: 4px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='lightblue' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: inline-block;
+}
+
 .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c {
     color: var(--button-text-color);
 }

ui/media/js/main.js

@@ -129,6 +129,7 @@ let initImageClearBtn = document.querySelector(".init_image_clear")
 let promptStrengthContainer = document.querySelector("#prompt_strength_container")
 
 let initialText = document.querySelector("#initial-text")
+let versionText = document.querySelector("#version")
 let previewTools = document.querySelector("#preview-tools")
 let clearAllPreviewsBtn = document.querySelector("#clear-all-previews")
 let showDownloadPopupBtn = document.querySelector("#show-download-popup")
@@ -138,6 +139,7 @@ let saveAllZipToggle = document.querySelector("#zip_toggle")
 let saveAllTreeToggle = document.querySelector("#tree_toggle")
 let saveAllJSONToggle = document.querySelector("#json_toggle")
 let saveAllFoldersOption = document.querySelector("#download-add-folders")
+let splashScreenPopup = document.querySelector("#splash-screen")
 
 let maskSetting = document.querySelector("#enable_mask")
 
@@ -1990,6 +1992,21 @@ function resumeClient() {
     })
 }
 
+
+function splashScreen(force = false) {
+    const splashVersion = splashScreenPopup.dataset['version']
+    const lastSplash = localStorage.getItem("lastSplashScreenVersion") || 0
+    if (testDiffusers.checked) {
+        if (force || lastSplash < splashVersion) {
+            splashScreenPopup.classList.add("active")
+            localStorage.setItem("lastSplashScreenVersion", splashVersion)
+        }
+    }
+}
+
+
+document.getElementById("logo_img").addEventListener("click", (e) => { splashScreen(true) })
+
 promptField.addEventListener("input", debounce(renameMakeImageButton, 1000))
 
 pauseBtn.addEventListener("click", function() {