diff --git a/.eslintrc.json b/.eslintrc.json index 770b8b4e2..c8902f517 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -75,7 +75,9 @@ "requestProgress": "readonly", // imageviewer.js "modalPrevImage": "readonly", - "modalNextImage": "readonly" + "modalNextImage": "readonly", + // loader.js + "removeSplash": "readonly" }, "ignorePatterns": [ "node_modules", diff --git a/CHANGELOG.md b/CHANGELOG.md index 57d977666..b43010dbf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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... diff --git a/html/logo-bg-1.jpg b/html/logo-bg-1.jpg new file mode 100644 index 000000000..2bdb22759 Binary files /dev/null and b/html/logo-bg-1.jpg differ diff --git a/html/logo-bg-2.jpg b/html/logo-bg-2.jpg new file mode 100644 index 000000000..7c6a253db Binary files /dev/null and b/html/logo-bg-2.jpg differ diff --git a/html/logo-bg-3.jpg b/html/logo-bg-3.jpg new file mode 100644 index 000000000..12bb6b46f Binary files /dev/null and b/html/logo-bg-3.jpg differ diff --git a/html/logo-bg-4.jpg b/html/logo-bg-4.jpg new file mode 100644 index 000000000..1489d736c Binary files /dev/null and b/html/logo-bg-4.jpg differ diff --git a/html/logo-bg-5.jpg b/html/logo-bg-5.jpg new file mode 100644 index 000000000..3859bbebb Binary files /dev/null and b/html/logo-bg-5.jpg differ diff --git a/html/logo-bg-6.jpg b/html/logo-bg-6.jpg new file mode 100644 index 000000000..f016ce890 Binary files /dev/null and b/html/logo-bg-6.jpg differ diff --git a/html/logo-bg-7.jpg b/html/logo-bg-7.jpg new file mode 100644 index 000000000..0481d4fdf Binary files /dev/null and b/html/logo-bg-7.jpg differ diff --git a/html/logo-bg-dark.jpg b/html/logo-bg-dark.jpg new file mode 100644 index 000000000..7ca8c71dc Binary files /dev/null and b/html/logo-bg-dark.jpg differ diff --git a/html/logo-bg-light.jpg b/html/logo-bg-light.jpg new file mode 100644 index 000000000..401e5d794 Binary files /dev/null and b/html/logo-bg-light.jpg differ diff --git a/html/logo-dark.png b/html/logo-dark.png new file mode 100644 index 000000000..ca06906ce Binary files /dev/null and b/html/logo-dark.png differ diff --git a/html/logo-light.png b/html/logo-light.png new file mode 100644 index 000000000..94338efc3 Binary files /dev/null and b/html/logo-light.png differ diff --git a/html/logo-transparent.png b/html/logo-transparent.png new file mode 100644 index 000000000..c21ec601c Binary files /dev/null and b/html/logo-transparent.png differ diff --git a/html/logo.ico b/html/logo.ico index 72054a0fb..8e7927898 100644 Binary files a/html/logo.ico and b/html/logo.ico differ diff --git a/html/logo.png b/html/logo.png deleted file mode 100644 index 228af4b0e..000000000 Binary files a/html/logo.png and /dev/null differ diff --git a/html/logo.svg b/html/logo.svg deleted file mode 100644 index ac6e5431d..000000000 --- a/html/logo.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/javascript/loader.js b/javascript/loader.js new file mode 100644 index 000000000..f9907f244 --- /dev/null +++ b/javascript/loader.js @@ -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 = ` +
+
+
+
`; + 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; diff --git a/javascript/logMonitor.js b/javascript/logMonitor.js index bc2abfee1..7563d8a74 100644 --- a/javascript/logMonitor.js +++ b/javascript/logMonitor.js @@ -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 = ` - +
@@ -51,6 +51,7 @@ async function initLogMonitor() {
Time
`; + el.style.display = 'none'; logMonitor(); console.log('initLogMonitor'); } diff --git a/javascript/logo.png b/javascript/logo.png deleted file mode 100644 index 228af4b0e..000000000 Binary files a/javascript/logo.png and /dev/null differ diff --git a/javascript/notification.js b/javascript/notification.js index eb1bbfe55..738698824 100644 --- a/javascript/notification.js +++ b/javascript/notification.js @@ -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; diff --git a/javascript/setHints.js b/javascript/setHints.js index 368a79801..b78efa31e 100644 --- a/javascript/setHints.js +++ b/javascript/setHints.js @@ -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) } diff --git a/javascript/style.css b/javascript/style.css index 2d7df486c..d991ad755 100644 --- a/javascript/style.css +++ b/javascript/style.css @@ -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; }