add flip image horizontally button

javascript/ui.js

@@ -31,6 +31,19 @@ function extract_image_from_gallery(gallery){
     return [gallery[index]];
 }
 
+function flip_images(gallery_name) {
+    let imgs = gradioApp().getElementById(`${gallery_name}_gallery`).querySelectorAll('img')
+    for (let i = 0; i < imgs.length; i++) {
+        imgs[i].classList.toggle('flipped_h')
+    }
+}
+
+
+function flip_gallery_images() {
+    flip_images('txt2img')
+    flip_images('img2img')
+}
+
 function args_to_array(args){
     res = []
     for(var i=0;i<args.length;i++){

modules/ui_common.py

@@ -135,6 +135,7 @@ def open_folder(f):
                 if tabname != "extras":
                     save = gr.Button('Save', elem_id=f'save_{tabname}')
                     save_zip = gr.Button('Zip', elem_id=f'save_zip_{tabname}')
+                    flip_img = gr.Button('Flip', elem_id=f'flip_img_{tabname}')
 
                 buttons = parameters_copypaste.create_buttons(["img2img", "inpaint", "extras"])
 
@@ -193,6 +194,11 @@ def open_folder(f):
                         ]
                     )
 
+                    flip_img.click(
+                        fn=lambda x: None,
+                        _js="(x) => { flip_gallery_images(); return 1; }"
+                    )
+
             else:
                 html_info_x = gr.HTML(elem_id=f'html_info_x_{tabname}')
                 html_info = gr.HTML(elem_id=f'html_info_{tabname}')

style.css

@@ -959,3 +959,7 @@ footer {
 [id*='_prompt_container'] > div {
 	margin: 0!important;
 }
+
+.flipped_h {
+    transform: scaleX(-1)
+}