From 991f9cda4223519354a03b66745a9fcdca51f837 Mon Sep 17 00:00:00 2001
From: JeLuF <jf@mormo.org>
Date: Sat, 22 Apr 2023 11:42:22 +0200
Subject: [PATCH] Add splash screen for testDiffusers users

The splash screen will only be shown once.

The splash screen version number can be used to roll out a new splash screen, which will also be shown only once.

Clicking on the EasyAndroidLady icon shows the splash screen again.
---
 ui/index.html         | 49 ++++++++++++++++++++++++++++++++++++++++++-
 ui/media/css/main.css | 18 ++++++++++++++++
 ui/media/js/main.js   | 15 +++++++++++++
 3 files changed, 81 insertions(+), 1 deletion(-)

diff --git a/ui/index.html b/ui/index.html
index 404d88af..0f163af0 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -30,7 +30,7 @@
             <h1>
                 <img id="logo_img" src="/media/images/icon-512x512.png" >
                 Easy Diffusion
-                <small>v2.5.33 <span id="updateBranchLabel"></span></small>
+                <small><span id="version">v2.5.33</span> <span id="updateBranchLabel"></span></small>
             </h1>
         </div>
         <div id="server-status">
@@ -399,6 +399,52 @@
         </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>
+            <p>New upcoming features in our new engine include:</p>
+            <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 inpainting models</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> multi GPU - cuda:1 and cuda:0 conflict</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>
@@ -519,6 +565,7 @@ async function init() {
             idle: onIdle
         }
     })
+    splashScreen()
 
     // playSound()
 }
diff --git a/ui/media/css/main.css b/ui/media/css/main.css
index 08dea664..79d87377 100644
--- a/ui/media/css/main.css
+++ b/ui/media/css/main.css
@@ -1292,6 +1292,24 @@ 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;
+}
+
 .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c {
     color: var(--button-text-color);
 }
diff --git a/ui/media/js/main.js b/ui/media/js/main.js
index 0720b988..d99c60d4 100644
--- a/ui/media/js/main.js
+++ b/ui/media/js/main.js
@@ -95,6 +95,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")
@@ -104,6 +105,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')
 
@@ -1797,6 +1799,19 @@ 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) )