changelog management, move assets

Signed-off-by: Vladimir Mandic <mandic00@live.com>

javascript/changelog.js

@@ -0,0 +1,73 @@
+let changelogElements = [];
+
+const getAllChildren = (el) => {
+  const elements = [];
+  for (let i = 0; i < el.children.length; i++) {
+    elements.push(el.children[i]);
+    if (el.children[i].children.length) elements.push(...getAllChildren(el.children[i]));
+  }
+  return elements;
+};
+
+function getText(el) {
+  let text = '';
+  el.childNodes.forEach((node) => {
+    if (node.nodeType === Node.TEXT_NODE) text += node.nodeValue;
+  });
+  return text.trim();
+}
+
+let currentElement = -1;
+
+function changelogNavigate(found) {
+  const result = gradioApp().getElementById('changelog_result');
+  result.innerHTML = '';
+
+  const onPrev = () => {
+    if (currentElement > 0) {
+      currentElement--;
+      found[currentElement].scrollIntoView();
+    }
+  };
+  const onNext = () => {
+    if (currentElement < found.length - 1) {
+      currentElement++;
+      found[currentElement].scrollIntoView();
+    }
+  };
+
+  const prev = document.createElement('p');
+  prev.innerHTML = ' ⇦ ';
+  prev.className = 'changelog_arrow';
+  prev.onclick = onPrev;
+  result.appendChild(prev);
+
+  const next = document.createElement('p');
+  next.innerHTML = ' ⇨ ';
+  next.className = 'changelog_arrow';
+  next.onclick = onNext;
+  result.appendChild(next);
+
+  const text = document.createElement('p');
+  text.innerHTML = ` &nbsp found ${found.length} items`;
+  result.appendChild(text);
+}
+
+async function initChangelog() {
+  const search = gradioApp().querySelector('#changelog_search > label> textarea');
+  const md = gradioApp().getElementById('changelog_markdown');
+  const searchChangelog = async (e) => {
+    if (changelogElements.length < 100) changelogElements = getAllChildren(md);
+    const found = [];
+    for (const el of changelogElements) {
+      if (getText(el).toLowerCase().includes(search.value.toLowerCase())) {
+        el.classList.add('changelog_highlight');
+        found.push(el);
+      } else {
+        el.classList.remove('changelog_highlight');
+      }
+    }
+    changelogNavigate(found);
+  };
+  search.addEventListener('keyup', searchChangelog);
+}

javascript/sdnext.css

@@ -319,6 +319,12 @@ div:has(>#tab-gallery-folders) { flex-grow: 0 !important; background-color: var(
 .gallery-sort { background: var(--input-background-fill) !important; margin: 0 !important; padding: 6px !important; }
 .gallery-sort:hover { background: var(--button-primary-background-fill-hover) !important; }
 
+/* changelog */
+#changelog_markdown { max-height: 55vh; margin-top: 1em; }
+#changelog_result { display: flex; cursor: pointer; margin-left: 1em; }
+.changelog_arrow { font-size: 2em; margin-right: 0.5em; }
+.changelog_highlight { background-color: var(--color-warning); }
+
 /* loader */
 .splash { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; display: block; text-align: center; }
 .motd { margin-top: 2em; color: var(--body-text-color-subdued); font-family: monospace; font-variant: all-petite-caps; }

javascript/startup.js

@@ -16,6 +16,7 @@ async function initStartup() {
   initImageViewer();
   initGallery();
   initiGenerationParams();
+  initChangelog();
   setupControlUI();
 
   // reconnect server session