Merge pull request #1191 from JeLuF/splash

Add splash screen for testDiffusers users
This commit is contained in:
cmdr2 2023-06-26 16:07:58 +05:30 committed by GitHub
commit 672571a36c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 109 additions and 1 deletions

View File

@ -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()
}

View File

@ -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);
}

View File

@ -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() {