Update aspect ratio panel

Aspect ratio changed according to wikipedia (https://en.wikipedia.org/wiki/Aspect_ratio_(image))
Slightly redesigned for 1:1 for a better look
Update preview image

README.md

@@ -10,7 +10,7 @@ Extension for [AUTOMATIC1111/stable-diffusion-webui](https://github.com/AUTOMATI
 - Better resolution presets (by formula: `f(x) = 512 + (1024-512)/4*x, 0 <= x <= 4`)
 - Better ratios presets
 
-![img](https://media.discordapp.net/attachments/1124020774055981108/1124503350856130620/image.png)
+![img](https://media.discordapp.net/attachments/1124020774055981108/1124647367644295229/image.png)
 
 
 ## Updates

scripts/sd-webui-ar.py

@@ -110,11 +110,11 @@ 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\n",
-        "21:9, 21/9\n",
+        "3:2, 3/2      # Photography\n",
+        "4:3, 4/3      # Television photography\n",
+        "16:9, 16/9    # Television photography\n",
+        "1.85:1, 1.85  # Cinematography\n",
+        "2.39:1, 2.39  # Cinematography",
     ]
     with open(filename, "w", encoding="utf-8") as f:
         f.writelines(aspect_ratios)
@@ -122,11 +122,11 @@ def write_aspect_ratios_file(filename):
 
 def write_resolutions_file(filename):
     resolutions = [
-        "512, 512, 512\n",
-        "640, 640, 640\n",
-        "768, 768, 768\n",
-        "896, 896, 896\n",
-        "1024, 1024, 1024",
+        "512, 512, 512     # 512x512\n",
+        "640, 640, 640     # 640x640\n",
+        "768, 768, 768     # 768x768\n",
+        "896, 896, 896     # 896x896\n",
+        "1024, 1024, 1024  # 1024x1024",
     ]
     with open(filename, "w", encoding="utf-8") as f:
         f.writelines(resolutions)
@@ -224,10 +224,7 @@ class AspectRatioScript(scripts.Script):
             with gr.Row(
                 elem_id=f'{"img" if is_img2img else "txt"}2img_row_aspect_ratio'
             ):
-                gr.HTML(
-                    visible=True,
-                    elem_id="arc_empty_space",
-                )
+                arc_empty_space = ARButton(ar=1.0, value="1:1", elem_id="arc_empty_space")
 
                 # Aspect Ratio buttons
                 btns = [
@@ -236,7 +233,7 @@ class AspectRatioScript(scripts.Script):
                         self.aspect_ratios,
                         self.aspect_ratio_labels,
                     )
-                ]
+                ] + [arc_empty_space]
 
                 with contextlib.suppress(AttributeError):
                     for b in btns:

style.css

@@ -22,7 +22,7 @@
 
 button#arc_show_calculator_button,
 button#arc_hide_calculator_button,
-#arc_empty_space {
+button#arc_empty_space {
 	max-width: 45px !important;
 	min-width: unset !important;
 	padding: var(--size-0-5) var(--size-2) !important;