From f8732a84a362fc400741f750dda61dd269cb3fd2 Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Fri, 4 Oct 2024 04:37:09 +0300
Subject: [PATCH] add startup profile button to console log

---
 .../anapnoe-sd-uiux/html/svg/profile-line.svg |   1 +
 .../template-aside-extra-networks.html        | 149 ++++++++++--------
 .../html/templates/template-console-log.html  |  18 +++
 3 files changed, 102 insertions(+), 66 deletions(-)
 create mode 100644 extensions-builtin/anapnoe-sd-uiux/html/svg/profile-line.svg
 create mode 100644 extensions-builtin/anapnoe-sd-uiux/html/templates/template-console-log.html

diff --git a/extensions-builtin/anapnoe-sd-uiux/html/svg/profile-line.svg b/extensions-builtin/anapnoe-sd-uiux/html/svg/profile-line.svg
new file mode 100644
index 00000000..00feab77
--- /dev/null
+++ b/extensions-builtin/anapnoe-sd-uiux/html/svg/profile-line.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M21.0082 3C21.556 3 22 3.44495 22 3.9934V20.0066C22 20.5552 21.5447 21 21.0082 21H2.9918C2.44405 21 2 20.5551 2 20.0066V3.9934C2 3.44476 2.45531 3 2.9918 3H21.0082ZM20 5H4V19H20V5ZM18 15V17H6V15H18ZM12 7V13H6V7H12ZM18 11V13H14V11H18ZM10 9H8V11H10V9ZM18 7V9H14V7H18Z"></path></svg>
\ No newline at end of file
diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html
index 22742b15..c0797aca 100644
--- a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html
+++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-aside-extra-networks.html
@@ -1,62 +1,67 @@
 <div id="accordion-aside" iconTrigger="#acc-arrow-button" class="accordion accordion-vertical no-drag">
     <div class="accordion-bar">
-		<button id="acc-arrow-button" class="ae-button">
-			<div id="mask-icon-acc-arrow" class="mask-icon accordion-icon icon-arrow-down">
-			</div>
-		</button>
-		
-		<div id="sidebar_secondary_tabs" class="flexbox col">
-			<button class="ae-button">
-				<a title="Use via API" target="_blank" href="/docs" >
-					<div title ="Use via API" class="mask-icon icon-rocket">			
-					</div>
-                    <span>Use via API</span>
-				</a>
-			</button>
-			<button class="ae-button">
-				<a title="Github" target="_blank" href="https://github.com/anapnoe/stable-diffusion-webui-ux">
-					<div class="mask-icon icon-github">			
-					</div>
-                    <span>Github</span>
-				</a>
-			</button>
-			<button class="ae-button">
-				<a title="Gradio" target="_blank" href="https://gradio.app" >
-					<div class="mask-icon icon-gradio">			
-					</div>
-                    <span>Gradio</span>
-				</a>
-			</button>
-			<button class="ae-button">
-				<a title="Reload UI" href="/" onclick="javascript:gradioApp().getElementById('settings_restart_gradio').click(); return false">
-					<div class="mask-icon icon-reload">			
-					</div>
-                    <span>Reload UI</span>
-				</a>
-			</button>
-			<div class="flexbox col spacer-v">
+        <button id="acc-arrow-button" class="ae-button">
+            <div id="mask-icon-acc-arrow" class="mask-icon accordion-icon icon-arrow-down">
             </div>
-		</div>
+        </button>
+
+        <div id="sidebar_secondary_tabs" class="flexbox col">
+            <button class="ae-button">
+                <a title="Use via API" target="_blank" href="/docs">
+                    <div title="Use via API" class="mask-icon icon-rocket">
+                    </div>
+                    <span>Use via API</span>
+                </a>
+            </button>
+            <button class="ae-button">
+                <a title="Github" target="_blank" href="https://github.com/anapnoe/stable-diffusion-webui-ux">
+                    <div class="mask-icon icon-github">
+                    </div>
+                    <span>Github</span>
+                </a>
+            </button>
+            <button class="ae-button">
+                <a title="Gradio" target="_blank" href="https://gradio.app">
+                    <div class="mask-icon icon-gradio">
+                    </div>
+                    <span>Gradio</span>
+                </a>
+            </button>
+            <button class="ae-button">
+                <a title="Reload UI" href="/"
+                    onclick="javascript:gradioApp().getElementById('settings_restart_gradio').click(); return false">
+                    <div class="mask-icon icon-reload">
+                    </div>
+                    <span>Reload UI</span>
+                </a>
+            </button>
+            <div class="flexbox col spacer-v">
+            </div>
+        </div>
         <div class="flexbox col">
         </div>
-		
-        <div id="sidebar_tabs" class="flexbox col shrink">         
-			<button title="Quick Settings" tabItemId="#layout-quicksettings" tabGroup="extra_networks" id="btn_quick_settings" class="xtabs-tab">
-                <div  class="mask-icon icon-quicksettings">
+
+        <div id="sidebar_tabs" class="flexbox col shrink">
+            <button title="Quick Settings" tabItemId="#layout-quicksettings" tabGroup="extra_networks"
+                id="btn_quick_settings" class="xtabs-tab">
+                <div class="mask-icon icon-quicksettings">
                 </div>
                 <span>Quick Settings</span>
             </button>
-            <button title="PNG Info" tabItemId="#layout-pnginfo" tabGroup="extra_networks" id="ptn_pnginfo" class="xtabs-tab">
+            <button title="PNG Info" tabItemId="#layout-pnginfo" tabGroup="extra_networks" id="ptn_pnginfo"
+                class="xtabs-tab">
                 <div class="mask-icon icon-pnginfo">
                 </div>
                 <span>PNG Info</span>
             </button>
-            <button title="Checkpoint Merger" tabItemId="#layout-model-merger" tabGroup="extra_networks" onclick="mainTabs(this, '#tab_model_merger')" class="xtabs-tab">
+            <button title="Checkpoint Merger" tabItemId="#layout-model-merger" tabGroup="extra_networks"
+                onclick="mainTabs(this, '#tab_model_merger')" class="xtabs-tab">
                 <div class="mask-icon icon-model-merger">
                 </div>
                 <span>Checkpoint Merger</span>
             </button>
-			<button title="Theme Editor" id="btn_theme_editor" tabItemId="#layout-theme" tabGroup="extra_networks" class="xtabs-tab hidden">
+            <button title="Theme Editor" id="btn_theme_editor" tabItemId="#layout-theme" tabGroup="extra_networks"
+                class="xtabs-tab hidden">
                 <div id="mask-icon-theme" class="mask-icon icon-theme">
                 </div>
                 <span>Theme</span>
@@ -64,64 +69,76 @@
 
             <div class="flexbox col spacer-v">
             </div>
-			<button title="Extensions" tabItemId="#layout-extensions" tabGroup="extra_networks" id="btn_extensions" class="xtabs-tab">
-			  <div class="mask-icon icon-extensions">
-			  </div>
-			  <span>Extensions</span>
-			</button>
-            <button title="Settings" tabItemId="#layout-settings" tabGroup="extra_networks" id="btn_settings" class="xtabs-tab">
+            <button title="Extensions" tabItemId="#layout-extensions" tabGroup="extra_networks" id="btn_extensions"
+                class="xtabs-tab">
+                <div class="mask-icon icon-extensions">
+                </div>
+                <span>Extensions</span>
+            </button>
+            <button title="Settings" tabItemId="#layout-settings" tabGroup="extra_networks" id="btn_settings"
+                class="xtabs-tab">
                 <div class="mask-icon icon-settings">
                 </div>
                 <span>Settings</span>
             </button>
-			<button title="Console Log" tabItemId="#layout-console-log" tabGroup="extra_networks" id="btn_console" class="xtabs-tab">
+            <button title="Console Log" tabItemId="#layout-console-log" tabGroup="extra_networks" id="btn_console"
+                class="xtabs-tab">
                 <div class="mask-icon icon-terminal">
                 </div>
                 <span>Console Log</span>
             </button>
         </div>
-		
-		<div id="sidebar_extra_networks" class="flexbox col shrink">
-            <button title="Checkpoints" tabItemId="#layout_txt2img_checkpoints" id="btn_checkpoints" tabGroup="extra_networks" data-click="#tab_txt2img" active="true" class="xtabs-tab">
+
+        <div id="sidebar_extra_networks" class="flexbox col shrink">
+            <button title="Checkpoints" tabItemId="#layout_txt2img_checkpoints" id="btn_checkpoints"
+                tabGroup="extra_networks" data-click="#tab_txt2img" active="true" class="xtabs-tab">
                 <div class="mask-icon icon-checkpoints">
                 </div>
                 <span>Checkpoints</span>
             </button>
-            <button title="Textual Inversion" tabItemId="#layout_txt2img_textual_inversion" id="btn_textual_inversion" tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
+            <button title="Textual Inversion" tabItemId="#layout_txt2img_textual_inversion" id="btn_textual_inversion"
+                tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
                 <div class="mask-icon icon-textual-inversion">
                 </div>
                 <span>Textual Inversion</span>
             </button>
-            <button title="Hypernetworks" tabItemId="#layout_txt2img_hypernetworks" id="btn_hypernetworks" tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
+            <button title="Hypernetworks" tabItemId="#layout_txt2img_hypernetworks" id="btn_hypernetworks"
+                tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
                 <div class="mask-icon icon-hypernetworks">
                 </div>
                 <span>Hypernetworks</span>
             </button>
-            <button title="Lora" tabItemId="#layout_txt2img_lora" id="btn_lora" tabGroup="extra_networks" data-click="#tab_txt2img" class="xtabs-tab">
+            <button title="Lora" tabItemId="#layout_txt2img_lora" id="btn_lora" tabGroup="extra_networks"
+                data-click="#tab_txt2img" class="xtabs-tab">
                 <div class="mask-icon icon-lora">
                 </div>
                 <span>Lora</span>
             </button>
             <div class="flexbox col spacer-v">
             </div>
-		</div>
+        </div>
     </div>
     <div class="accordion-container">
-        <div template="template-extra-networks" key="txt2img_checkpoints" id="en_txt2img_checkpoints" class="template"></div>
-        <div template="template-extra-networks" key="txt2img_textual_inversion" id="en_txt2img_textual_inversion" class="template"></div>
-        <div template="template-extra-networks" key="txt2img_hypernetworks" id="en_txt2img_hypernetworks" class="template"></div>
+        <div template="template-extra-networks" key="txt2img_checkpoints" id="en_txt2img_checkpoints" class="template">
+        </div>
+        <div template="template-extra-networks" key="txt2img_textual_inversion" id="en_txt2img_textual_inversion"
+            class="template"></div>
+        <div template="template-extra-networks" key="txt2img_hypernetworks" id="en_txt2img_hypernetworks"
+            class="template"></div>
         <div template="template-extra-networks" key="txt2img_lora" id="en_txt2img_lora" class="template"></div>
         <div id="template-pnginfo" class="template"></div>
         <div id="template-quicksettings" class="template"></div>
-		<div id="template-extensions" class="template"></div>
+        <div id="template-extensions" class="template"></div>
         <div id="template-settings" class="template"></div>
         <div id="template-model-merger" class="template"></div>
-		<div id="layout-console-log"></div>
-		<div id="layout-theme" class="flexbox col padding">		
-			<div show-button="#btn_theme_editor" data-selector="#tab_ui_theme > div" data-parent-selector="gradio-app" class="portal no-bg">
-			</div>
+        <!--<div id="layout-console-log"></div>-->
+        <div id="template-console-log" class="template"></div>
+        <div id="layout-theme" class="flexbox col padding">
+            <div show-button="#btn_theme_editor" data-selector="[id^='tab_ui_theme'] > div"
+                data-parent-selector="gradio-app" class="portal no-bg">
+            </div>
         </div>
 
-		
+
     </div>
 </div>
\ No newline at end of file
diff --git a/extensions-builtin/anapnoe-sd-uiux/html/templates/template-console-log.html b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-console-log.html
new file mode 100644
index 00000000..02f4e633
--- /dev/null
+++ b/extensions-builtin/anapnoe-sd-uiux/html/templates/template-console-log.html
@@ -0,0 +1,18 @@
+<div id="layout-console-log" class="layout">
+  <div class="layout-header">
+  </div>
+  <div class="layout-content">
+    <div id="container-console-log">
+    </div>
+  </div>
+  <div class="layout-footer">
+    <div class="flexbox flex-end padding">
+
+      <button title="Startup profile" class="ae-button"
+        onclick="popup_trigger.click(); testpopup(); showProfile('./internal/profile-startup'); return false;">
+        <div class="mask-icon icon-profile">
+        </div>
+      </button>
+    </div>
+  </div>
+</div>
\ No newline at end of file