UI Redesign and Speed Up

- new look - css reduced
yukiarimo · Jul 1, 2024 · 35db501 · 35db501
1 parent 8e41929
commit 35db501
Show file tree

Hide file tree

Showing 17 changed files with 315 additions and 619 deletions.
diff --git a/static/css/index.css b/static/css/index.css
diff --git a/static/css/styles.min.css b/static/css/styles.min.css
diff --git a/static/img/favicon.ico b/static/img/favicon.ico
diff --git a/static/img/products/chat.webp b/static/img/products/chat.webp
diff --git a/static/img/products/history.webp b/static/img/products/history.webp
diff --git a/static/img/products/profiles.webp b/static/img/products/profiles.webp
diff --git a/static/img/products/prompts.webp b/static/img/products/prompts.webp
diff --git a/static/img/products/yuna-ai.pxd b/static/img/products/yuna-ai.pxd
diff --git a/static/img/yuna-ai.png b/static/img/yuna-ai.png
diff --git a/static/img/yuna-girl-head.webp b/static/img/yuna-girl-head.webp
diff --git a/static/img/yuna-girl.webp b/static/img/yuna-girl.webp
diff --git a/static/js/creator.js b/static/js/creator.js
@@ -1,5 +1,5 @@
 // Get the necessary elements
-const promptTemplateTextarea = document.querySelector('.prompt-template');
+const promptTemplateTextarea = document.querySelector('#freeform-prompt-template');
 const bodyTextTextarea = document.querySelector('.body-text');
 const resultTextarea = document.querySelector('.result-container');
 const submitButton = document.getElementById('send-create-freeform');

diff --git a/static/js/index.js b/static/js/index.js
@@ -450,7 +450,7 @@ function setMessagePopoverListeners() {
       // reload the page
       setTimeout(function () {
         location.reload()
-      }, 100);
+      }, 50);
     });
   });
 }
@@ -497,11 +497,6 @@ class HistoryManager {
       .catch(error => {
         console.error('An error occurred:', error);
       });
-
-    // Reload the page with a delay of 1 second
-    setTimeout(() => {
-      location.reload();
-    }, 300);
   }
 
   get selectedFilename() {
@@ -731,7 +726,7 @@ function initializeVideoStream() {
 }
 
 // Initialize the video stream functionality after a delay
-setTimeout(initializeVideoStream, 2000);
+setTimeout(initializeVideoStream, 500);
 
 function closePopup(popupId) {
   var popup = document.getElementById(popupId);
@@ -975,7 +970,7 @@ function populateHistorySelect() {
       // reload the page with delay of 1 second if config is not available
       setTimeout(function () {
         location.reload()
-      }, 100);
+      }, 50);
     }
 
     server_port = JSON.parse(localStorage.getItem('config')).server.port
@@ -1067,16 +1062,12 @@ function populateHistorySelect() {
                       return response.json();
                     })
                     .then(responseData => {
-                      console.log(responseData);
+                      alert(responseData);
+                      location.reload();
                     })
                     .catch(error => {
                       console.error('An error occurred:', error);
                     });
-
-                  // reload the page with delay of 1 second
-                  setTimeout(function () {
-                    location.reload()
-                  }, 100);
                 }
                 break;
               case 'Download':
@@ -1281,7 +1272,7 @@ function updateMsgCount() {
   setTimeout(() => {
     document.getElementById('messageCount').textContent = document.querySelectorAll('#message-container .p-2.mb-2').length;
     document.getElementById('chatsCount').textContent = document.querySelectorAll('#chat-items .collection-item').length;
-  }, 400);
+  }, 300);
 }
 
 updateMsgCount();
@@ -1324,4 +1315,36 @@ document.querySelectorAll('.creatorStudio-tabs').forEach(tab => {
       const target = document.querySelector(this.getAttribute('data-bs-target'));
       target.classList.remove('d-none');
   });
-});
+});
+
+// Function to adjust textarea height
+function adjustTextareaHeight(textarea) {
+  textarea.style.height = 'auto';
+  textarea.style.height = textarea.scrollHeight + 'px';
+}
+
+// Function to initialize all textareas
+function initializeTextareas() {
+  const textareas = document.querySelectorAll('textarea');
+  textareas.forEach(textarea => {
+    // Disable manual resizing
+    textarea.style.resize = 'none';
+
+    // Initial adjustment
+    adjustTextareaHeight(textarea);
+
+    // Add event listeners for real-time updates
+    textarea.addEventListener('input', () => adjustTextareaHeight(textarea));
+    textarea.addEventListener('change', () => adjustTextareaHeight(textarea));
+
+    // Create a MutationObserver to watch for changes in content
+    const observer = new MutationObserver(() => adjustTextareaHeight(textarea));
+    observer.observe(textarea, { childList: true, characterData: true, subtree: true });
+  });
+}
+
+// Run the initialization when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', initializeTextareas);
+
+// Also run it immediately in case the script is loaded after the DOM
+initializeTextareas();
diff --git a/static/js/kawai-v11-2.js b/static/js/kawai-v11-2.js
@@ -193,6 +193,18 @@ function toggleTheme() {
     }
 }
 
+function getVisibleHeight() {
+    var elem = document.getElementById('message-container');
+    var inputWrapper = document.querySelector('.input-wrapper');
+    var bob = document.querySelector('.topbar-o');
+
+    elem.style.height = `calc(100% - ${bob.offsetHeight}px - ${inputWrapper.offsetHeight}px)`;
+
+    const topbarElement = document.querySelector('.topbar-o');
+    const style = window.getComputedStyle(topbarElement);
+    const bottomMargin = style.marginBottom;
+  }
+
 // Function to set margin-top for .block-o dynamically
 function kawaiAutoScale() {
     var topbar = document.querySelector('.topbar-o');

diff --git a/static/js/setup.js b/static/js/setup.js
@@ -28,7 +28,7 @@ function createFormGroup(id, value) {
   return `
     <div class="form-group" style="width: 100%;">
       <label for="${id}">${capitalize(id)}</label>
-      <input type="text" class="form-control" id="${id}" value="${value}">
+      <textarea type="text" class="form-control" id="${id}" value="${value}"></textarea>
     </div>
   `;
 }
@@ -116,7 +116,7 @@ async function checkConfigData() {
 
 checkConfigData();
 // run openConfigParams() with 1 second delay
-setTimeout(openConfigParams, 500);
+setTimeout(openConfigParams, 300);
 
 document.addEventListener("keydown", function (event) {
   // Prevent default action for Tab to avoid focusing on the next element
@@ -293,18 +293,6 @@ setTimeout(function () {
   messageContainer.style.height = `calc(${messageContainer.innerHeight}px - ${inputWrapper.innerHeight}px)`;
 }, 200);
 
-function getVisibleHeight() {
-  var elem = document.getElementById('message-container');
-  var inputWrapper = document.querySelector('.input-wrapper');
-  var bob = document.querySelector('.topbar-o');
-
-  elem.style.height = `calc(100% - ${bob.offsetHeight}px - ${inputWrapper.offsetHeight}px)`;
-
-  const topbarElement = document.querySelector('.topbar-o');
-  const style = window.getComputedStyle(topbarElement);
-  const bottomMargin = style.marginBottom;
-}
-
 setTimeout(getVisibleHeight, 100);
 
 // check if mobile device and add event listener to the sidebar links

diff --git a/static/sw.js b/static/sw.js
@@ -4,7 +4,6 @@ importScripts('/static/sw-toolbox.js');
 
 toolbox.precache([
     "/",
-    "/yuna.html",
     "/static/js/setup.js",
     "/static/js/himitsu.js",
     "/static/js/index.js",