Undo UI cleanup (#1106)

* Moving to InvokeAI attention weighting syntax

* Fix restoration of disabled image tags

Fix the restoration inactive image tags.

* Undo feature UX cleanup

Just show the undo button when there's no task for a more consistent UI.

* cleanup code

* Revert "cleanup code"

This reverts commit 03199c5a4f.

* Update image-modifiers.js

* Update image-modifiers.js

ui/index.html

@@ -293,6 +293,12 @@
 
         <div id="preview" class="col-free">
 
+            <div id="initial-text">
+                Type a prompt and press the "Make Image" button.<br/><br/>You can set an "Initial Image" if you want to guide the AI.<br/><br/>
+                You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section 
+                and selecting the desired modifiers.<br/><br/>
+                Click "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
+            </div>
             <div id="preview-content">
                 <div id="preview-tools" class="displayNone">
                     <button id="clear-all-previews" class="secondaryButton"><i class="fa-solid fa-trash-can icon"></i> Clear All</button>
@@ -326,12 +332,6 @@
                     <div class="clearfix" style="clear: both;"></div>
                 </div>
             </div>
-            <div id="initial-text">
-                Type a prompt and press the "Make Image" button.<br/><br/>You can set an "Initial Image" if you want to guide the AI.<br/><br/>
-                You can also add modifiers like "Realistic", "Pencil Sketch", "ArtStation" etc by browsing through the "Image Modifiers" section 
-                and selecting the desired modifiers.<br/><br/>
-                Click "Image Settings" for additional settings like seed, image size, number of images to generate etc.<br/><br/>Enjoy! :)
-            </div>
         </div>
         </div>
 

ui/media/css/main.css

@@ -238,6 +238,10 @@ code {
 #stopImage:hover {
     background: rgb(177, 27, 0);
 }
+#undo {
+    float: right;
+    margin-left: 5px;
+}
 
 div#render-buttons {
     gap: 3px;

ui/media/js/main.js

@@ -1310,13 +1310,15 @@ async function stopAllTasks() {
 
 function updateInitialText() {
     if (document.querySelector('.imageTaskContainer') === null) {
-        if (undoBuffer.length == 0) {
+        if (undoBuffer.length > 0) {
-            previewTools.classList.add('displayNone')
+            initialText.prepend(undoButton)
         }
+        previewTools.classList.add('displayNone')
         initialText.classList.remove('displayNone')
     } else {
         initialText.classList.add('displayNone')
         previewTools.classList.remove('displayNone')
+        document.querySelector('div.display-settings').prepend(undoButton)
     }
 }