1580158
/
automatic
mirror of https://github.com/vladmandic/automatic
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

change logo and add splash screen

pull/1792/head
Vladimir Mandic 2023-07-19 14:07:54 -04:00
parent 19d176ea3d
commit 2b0def1192
23 changed files with 46 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.eslintrc.json
View File

@ -75,7 +75,9 @@
"requestProgress": "readonly",
// imageviewer.js
"modalPrevImage": "readonly",
"modalNextImage": "readonly"
"modalNextImage": "readonly",
// loader.js
"removeSplash": "readonly"
},
"ignorePatterns": [
"node_modules",

4
CHANGELOG.md
View File

@ -1,5 +1,9 @@
# Change Log for SD.Next
## Update for 07/19/2023
- extra networks: add add/remove tags to prompt (e.g. lora activation keywords)
## Update for 07/18/2023
While we're waiting for official SD-XL release, here's another update with some fixes and enhancements...

BIN
html/logo-bg-1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 21 KiB

BIN
html/logo-bg-2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
html/logo-bg-3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
html/logo-bg-4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
html/logo-bg-5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
html/logo-bg-6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
html/logo-bg-7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
html/logo-bg-dark.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
html/logo-bg-light.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
html/logo-dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 153 KiB

BIN
html/logo-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 144 KiB

BIN
html/logo-transparent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
html/logo.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 81 KiB

BIN
html/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 KiB

54
html/logo.svg
View File

@ -1,54 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#Layer_00000017490036567012494010000005804862750708555662_);}
.st1{fill:url(#Layer_00000034050872017694305340000002149777042112552351_);}
.st2{fill:url(#Layer_00000138551514007669431480000005277331070455824283_);}
.st3{fill:url(#Layer_00000121260822957399194640000002004818051597458359_);}
.st4{fill:url(#Layer_00000089551383551611365750000017839558944096048031_);}
</style>
<g id="Layer_6">
<linearGradient id="Layer_00000049914890111007527720000017374358503294078090_" gradientUnits="userSpaceOnUse" x1="532.575" y1="791.8751" x2="1084.825" y2="239.625" gradientTransform="matrix(1 0 0 -1 0 1024)">
<stop offset="0" style="stop-color:#FF002F;stop-opacity:0.4"/>
<stop offset="0.9974" style="stop-color:#7E00B1;stop-opacity:0.4"/>
</linearGradient>
<path id="Layer_00000102536207121589900870000006567919986179283851_" style="fill:url(#Layer_00000049914890111007527720000017374358503294078090_);" d="
M669.3,150.4l333.8,715.7L948,866L614.3,150.4H669.3z"/>
<linearGradient id="Layer_00000160174143896567726850000004375001755377793183_" gradientUnits="userSpaceOnUse" x1="471.225" y1="791.925" x2="1023.525" y2="239.625" gradientTransform="matrix(1 0 0 -1 0 1024)">
<stop offset="0" style="stop-color:#FF002F;stop-opacity:0.6"/>
<stop offset="0.9974" style="stop-color:#7E00B1;stop-opacity:0.6"/>
</linearGradient>
<path id="Layer_00000060024555235152659250000001459138218033286026_" style="fill:url(#Layer_00000160174143896567726850000004375001755377793183_);" d="
M608,150.4l333.8,715.7l-55.1-0.1L552.9,150.4H608z"/>
<linearGradient id="Layer_00000031207641186489689680000000679959006580279939_" gradientUnits="userSpaceOnUse" x1="409.3" y1="791.5" x2="961.55" y2="239.25" gradientTransform="matrix(1 0 0 -1 0 1024)">
<stop offset="0" style="stop-color:#FF002F;stop-opacity:0.8"/>
<stop offset="0.9974" style="stop-color:#7E00B1;stop-opacity:0.8"/>
</linearGradient>
<path id="Layer_00000048487563565240844250000000391955575295241088_" style="fill:url(#Layer_00000031207641186489689680000000679959006580279939_);" d="
M546.4,150.4l333.8,715.7l-56.6-0.1L491.4,150.4H546.4z"/>
<linearGradient id="Layer_00000103976646255133082460000010809123275544418985_" gradientUnits="userSpaceOnUse" x1="315.15" y1="822.95" x2="898.7" y2="239.4" gradientTransform="matrix(1 0 0 -1 0 1024)">
<stop offset="0" style="stop-color:#FF002F"/>
<stop offset="0.9974" style="stop-color:#7E00B1"/>
</linearGradient>
<path id="Layer_00000029027851136719188610000011649511842649520560_" style="fill:url(#Layer_00000103976646255133082460000010809123275544418985_);" d="
M365.8,150.4h119.1l332.3,715.7l-57.5-0.1L454.2,212.2h-59.4L365.8,150.4z"/>
<linearGradient id="Layer_00000164482314129476801000000009884165076028213913_" gradientUnits="userSpaceOnUse" x1="94.75" y1="610.05" x2="618.9" y2="85.9001" gradientTransform="matrix(1 0 0 -1 0 1024)">
<stop offset="0" style="stop-color:#FF002F"/>
<stop offset="0.9974" style="stop-color:#7E00B1"/>
</linearGradient>
<path id="Layer_00000025403836054873122760000014972920566759998142_" style="fill:url(#Layer_00000164482314129476801000000009884165076028213913_);" d="
M19.8,866.1l338.5-715.7l333.9,714.4H456.7l-97.7-206l-95.6,207.3H19.8z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.6 KiB

19
javascript/loader.js Normal file
View File

@ -0,0 +1,19 @@
async function createSplash() {
const dark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
const num = Math.floor(Math.random() * 7) + 1;
const splash = `
<div id="splash" class="splash" style="background: ${dark ? 'black' : 'white'}">
<div class="loading"><div class="loader"></div></div>
<div class="splash-img" alt="logo" style="background-image: url(file=html/logo-bg-${dark ? 'dark' : 'light'}.jpg), url(file=html/logo-bg-${num}.jpg); background-blend-mode: ${dark ? 'color-burn' : 'color-dodge'}"></div>
</div>`;
document.body.insertAdjacentHTML('beforeend', splash);
console.log('createSplash', dark);
}
async function removeSplash() { // called at the end of setHints
const splash = document.getElementById('splash');
if (splash) splash.remove();
console.log('removeSplash');
}
window.onload = createSplash;

7
javascript/logMonitor.js
View File

@ -3,7 +3,6 @@ let logMonitorStatus = true;
async function logMonitor() {
if (logMonitorStatus) setTimeout(logMonitor, opts.logmonitor_refresh_period);
if (logMonitorEl) logMonitorEl.parentElement.style.display = opts.logmonitor_show ? 'block' : 'none';
if (!opts.logmonitor_show) return;
logMonitorStatus = false;
let res;
@ -12,8 +11,9 @@ async function logMonitor() {
logMonitorStatus = true;
if (!logMonitorEl) logMonitorEl = document.getElementById('logMonitorData');
if (!logMonitorEl) return;
logMonitorEl.parentElement.style.display = 'block';
const lines = await res.json();
console.log('HERE', logMonitorEl && lines?.length, opts.logmonitor_show);
if (logMonitorEl && lines?.length > 0) logMonitorEl.parentElement.parentElement.style.display = opts.logmonitor_show ? 'block' : 'none';
for (const line of lines) {
try {
const l = JSON.parse(line);
@ -37,7 +37,7 @@ async function initLogMonitor() {
logMonitorInitialized = true;
el.classList.add('log-monitor');
el.innerHTML = `
<table style="width: 100%;">
<table id="logMonitor" style="width: 100%;">
<thead style="display: block; text-align: left; border-bottom: solid 1px var(--button-primary-border-color)">
<tr>
<th style="width: 170px">Time</th>
@ -51,6 +51,7 @@ async function initLogMonitor() {
</tbody>
</table>
`;
el.style.display = 'none';
logMonitor();
console.log('initLogMonitor');
}

BIN
javascript/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 84 KiB

2
javascript/notification.js
View File

@ -12,7 +12,7 @@ function initNotifications() {
const galleryPreviews = gradioApp().querySelectorAll('div[id^="tab_"][style*="display: block"] div[id$="_results"] .thumbnail-item > img');
if (!galleryPreviews) return;
const headImg = galleryPreviews[0]?.src;
if (!headImg || headImg === lastHeadImg || headImg.endsWith('logo.png')) return;
if (!headImg || headImg === lastHeadImg || headImg.includes('logo-bg-')) return;
const audioNotification = gradioApp().querySelector('#audio_notification audio');
if (audioNotification) audioNotification.play();
lastHeadImg = headImg;

5
javascript/setHints.js
View File

@ -84,9 +84,8 @@ async function setHints() {
}
}
const t1 = performance.now();
console.log('setHints', {
type: locale.type, elements: elements.length, localized, hints, data: locale.data.length, time: t1 - t0,
});
console.log('setHints', { type: locale.type, elements: elements.length, localized, hints, data: locale.data.length, time: t1 - t0 });
removeSplash();
// validateHints(elements, locale.data)
}

23
javascript/style.css
View File

@ -501,19 +501,22 @@ div.controlnet_main_options { display: grid; grid-template-columns: 1fr 1fr; gri
#train_tab { flex-flow: row-reverse; }
#models_tab { flex-flow: row-reverse; }
.log-monitor {
display: none;
justify-content: unset !important;
overflow: hidden;
padding: 0;
margin-top: auto;
font-family: monospace;
font-size: 0.85em;
}
.log-monitor { display: none; justify-content: unset !important; overflow: hidden; padding: 0; margin-top: auto; font-family: monospace; font-size: 0.85em; }
.log-monitor td, .log-monitor th { padding-left: 1em; }
.logo { background-image: url("logo.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; }
/* Workaround for Gradio dropdowns capturing clicks during and after fadeout */
.gradio-dropdown > label > div > div:first-child:not(.showOptions) ~ ul.options {
pointer-events: none;
}
.splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 100; display: block; text-align: center; }
.splash-img { margin: 10% auto 0 auto; width: 512px; background-repeat: no-repeat; height: 512px; animation: move 5s infinite alternate; }
@keyframes move {
from { background-position-x: 0, -40px; }
to { background-position-x: 0, 40px; }
}
.loading { color: white; position: absolute; top: 20%; left: 50%; transform: translateX(-50%); }
.loader { width: 300px; height: 300px; border: var(--spacing-md) solid transparent; border-radius: 50%; border-top: var(--spacing-md) solid var(--primary-600); animation: spin 4s linear infinite; position: relative; }
.loader::before, .loader::after { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; right: 6px; border-radius: 50%; border: var(--spacing-md) solid transparent; }
.loader::before { border-top-color: var(--primary-900); animation: 3s spin linear infinite; }
.loader::after { border-top-color: var(--primary-300); animation: spin 1.5s linear infinite; }