🐛 fix(format): Fix format button and preview sticky position

src/script/formatPrompt.ts

@@ -8,13 +8,14 @@ export const Converter = {
    */
   addPromptButton(type: string): void {
     console.debug('🤯 [formatPrompt] inject', type);
-    const generateButton: HTMLElement | null = gradioApp().querySelector(`#${type}_generate`);
-    const actionsColumn: HTMLElement | null = gradioApp().querySelector(`#${type}_style_create`);
-    const nai2local: HTMLElement | null = gradioApp().querySelector(`#${type}_formatconvert`);
-    if (!generateButton || !actionsColumn || nai2local) return;
+    const actionsColumn: HTMLElement | null = gradioApp().querySelector(
+      `#${type}_tools > div.form`,
+    );
+    const formatBtn: HTMLElement | null = gradioApp().querySelector(`#${type}_formatconvert`);
+    if (!actionsColumn || formatBtn) return;
     const convertButton: HTMLElement = Converter.createButton(`${type}_formatconvert`, '🪄', () =>
       Converter.onClickConvert(type));
-    actionsColumn.parentNode?.append(convertButton);
+    actionsColumn.append(convertButton);
   },
 
   /**
@@ -221,7 +222,7 @@ export const Converter = {
     button.type = 'button';
     button.innerHTML = innerHTML;
     button.title = 'Format prompt~🪄';
-    button.className = 'lg secondary gradio-button tool svelte-1ipelgc';
+    button.className = 'lg secondary gradio-button tool svelte-cmf5ev';
     button.addEventListener('click', onClick);
     return button;
   },

src/script/replaceIcon.ts

@@ -8,12 +8,16 @@ import {
   clipboardList,
   cornerRightUp,
   dices,
+  fileArchive,
   folderClosed,
+  image,
   laptop2,
   panelRight,
+  penSquare,
+  pencilRuler,
+  pipette,
   play,
   refreshCcw,
-  ruler,
   save,
   settings,
   trash,
@@ -35,6 +39,10 @@ const replaceIcon = (button: HTMLButtonElement, emoji: string[], svg: string) =>
 export default () => {
   console.time('🤯 [svgIcon] replace');
   for (const button of document.querySelectorAll('button')) {
+    replaceIcon(button, ['🖌️'], penSquare);
+    replaceIcon(button, ['🗃️'], fileArchive);
+    replaceIcon(button, ['🖼️'], pipette);
+    replaceIcon(button, ['🎨️'], image);
     replaceIcon(button, ['📂'], folderClosed);
     replaceIcon(button, ['🔄', '🔁', '♻️'], refreshCcw);
     replaceIcon(button, ['↙️'], arrowDownLeft);
@@ -54,7 +62,7 @@ export default () => {
     replaceIcon(button, ['💥'], play);
     replaceIcon(button, ['📷'], webcam);
     replaceIcon(button, ['📝'], laptop2);
-    replaceIcon(button, ['📐'], ruler);
+    replaceIcon(button, ['📐'], pencilRuler);
   }
   console.timeEnd('🤯 [svgIcon] replace');
 };

src/styles/components/container.ts

@@ -41,5 +41,11 @@ export default (token: Theme) => {
       align-items: flex-start;
       justify-content: flex-start;
     }
+
+    #img2img_results,
+    #txt2img_results,
+    #extras_results {
+      top: 80px !important;
+    }
   `;
 };