Add JS based button titles

Add button titles on UI load. Use comments in aspect_ratios.txt and resolutions.txt to for user configured buttons, and hard-coded titles in sd-webui-ar.js for built-in buttons (i.e. for calculator).

javascript/button_titles.js

@@ -0,0 +1,2 @@
+// Do not put custom titles here. This file is overwritten each time the WebUI is started.
+ar_button_titles = {}

javascript/sd-webui-ar.js

@@ -0,0 +1,20 @@
+if ("undefined" === typeof ar_button_titles) {
+	ar_button_titles = {};
+}
+
+ar_button_titles["Calc"] = "Show or hide the aspect ratio calculator";
+ar_button_titles["\u{21c5}"] = "Swap width and height values";
+ar_button_titles["\u2B07\ufe0f"] = "Get dimensions from txt2img/img2img sliders";
+ar_button_titles["\u{1f5bc}"] = "Get dimensions from image on current img2img tab";
+ar_button_titles["Calculate Height"] = "Calculate new height based on source aspect ratio";
+ar_button_titles["Calculate Width"] = "Calculate new width based on source aspect ratio";
+ar_button_titles["Apply"] = "Apply calculated width and height to txt2img/img2img sliders";
+
+onUiUpdate(function(){
+	gradioApp().querySelectorAll('#txt2img_container_aspect_ratio button, #img2img_container_aspect_ratio button').forEach(function(elem){
+		tooltip = ar_button_titles[elem.textContent];
+		if(tooltip){
+		 	elem.title = tooltip;
+		}
+	})
+})

scripts/sd-webui-ar.py

@@ -12,10 +12,9 @@ aspect_ratios_dir = scripts.basedir()
 
 calculator_symbol = '\U0001F5A9'
 switch_values_symbol = '\U000021C5'
-get_dimensions_symbol = '\U00002B07'
+get_dimensions_symbol = '\u2B07\ufe0f'
 get_image_dimensions_symbol = '\U0001F5BC'
 
-
 class ResButton(ToolButton):
     def __init__(self, res=(512, 512), **kwargs):
         super().__init__(**kwargs)
@@ -110,10 +109,10 @@ def parse_resolutions_file(filename):
 # TODO: write a generic function handling both cases
 def write_aspect_ratios_file(filename):
     aspect_ratios = [
-        "1:1, 1.0\n",
-        "3:2, 3/2\n",
-        "4:3, 4/3\n",
-        "16:9, 16/9",
+        "1:1, 1.0 # 1:1 ratio based on minimum dimension\n",
+        "3:2, 3/2 # Set width based on 3:2 ratio to height\n",
+        "4:3, 4/3 # Set width based on 4:3 ratio to height\n",
+        "16:9, 16/9 # Set width based on 16:9 ratio to height",
     ]
     with open(filename, "w", encoding="utf-8") as f:
         f.writelines(aspect_ratios)
@@ -129,6 +128,20 @@ def write_resolutions_file(filename):
         f.writelines(resolutions)
 
 
+def write_js_titles_file(button_titles):
+    filename = Path(aspect_ratios_dir + "\\javascript\\", "button_titles.js")
+    content = ["// Do not put custom titles here. This file is overwritten each time the WebUI is started.\n"]
+    content.append("ar_button_titles = {\n")
+    counter = 0
+    while counter < len(button_titles[0]):
+        content.append(f"    \"{button_titles[0][counter]}\" : \"{button_titles[1][counter]}\",\n")
+        counter = counter + 1
+    content.append("}")
+
+    with open(filename, "w", encoding="utf-8") as f:
+        f.writelines(content)
+
+        
 def get_reduced_ratio(n, d):
     n, d = list(map(int, (n, d)))
 
@@ -196,6 +209,7 @@ class AspectRatioScript(scripts.Script):
         return scripts.AlwaysVisible
 
     def ui(self, is_img2img):
+        with gr.Column(elem_id=f'{"img" if is_img2img else "txt"}2img_container_aspect_ratio'):
             self.read_aspect_ratios()
             with gr.Row(elem_id=f'{"img" if is_img2img else "txt"}2img_row_aspect_ratio'):
                 # Toggle calculator display button
@@ -230,7 +244,6 @@ class AspectRatioScript(scripts.Script):
                     ResButton(res=res, value=label)
                     for res, label in zip(self.res, self.res_labels)
                 ]
-
                 with contextlib.suppress(AttributeError):
                     for b in btns:
                         if is_img2img:
@@ -243,6 +256,11 @@ class AspectRatioScript(scripts.Script):
                             outputs=resolution,
                         )
 
+            # Write button_titles.js with labels and comments read from aspect ratios and resolutions files
+            button_titles = [self.aspect_ratio_labels + self.res_labels]
+            button_titles.append(self.aspect_ratio_comments + self.res_comments)
+            write_js_titles_file(button_titles)
+
             # dummy components needed for JS function
             dummy_text1 = gr.Text(visible=False)
             dummy_text2 = gr.Text(visible=False)
@@ -360,6 +378,7 @@ class AspectRatioScript(scripts.Script):
                 lambda: [gr.update(visible=False), gr.update(visible=True), gr.update(visible=False)],
                 None, [arc_panel, arc_show_calculator, arc_hide_calculator])
 
+
     # https://github.com/AUTOMATIC1111/stable-diffusion-webui/pull/7456#issuecomment-1414465888
     def after_component(self, component, **kwargs):
         if kwargs.get("elem_id") == "txt2img_width":