better js

fooocus_version.py

@@ -1 +1 @@
-version = '2.1.802'
+version = '2.1.803'

javascript/viewer.js

@@ -1,5 +1,23 @@
 window.main_viewer_height = 512;
 
+function refresh_grid() {
+    let gridContainer = document.querySelector('#final_gallery .grid-container');
+    let final_gallery = document.getElementById('final_gallery');
+
+    if (gridContainer) if (final_gallery) {
+        let rect = final_gallery.getBoundingClientRect();
+        let cols = Math.ceil((rect.width - 16.0) / rect.height);
+        if(cols < 2) cols = 2;
+        gridContainer.style.setProperty('--grid-cols', cols);
+    }
+}
+
+function refresh_grid_delayed() {
+    setTimeout(refresh_grid, 100);
+    setTimeout(refresh_grid, 500);
+    setTimeout(refresh_grid, 1000);
+}
+
 function resized() {
     let windowHeight = window.innerHeight - 260;
     let elements = document.getElementsByClassName('main_view');
@@ -11,6 +29,8 @@ function resized() {
     }
 
     window.main_viewer_height = windowHeight;
+
+    refresh_grid();
 }
 
 function viewer_to_top(delay = 100) {

webui.py

@@ -85,7 +85,8 @@ with shared.gradio_root:
             progress_html = gr.HTML(value=modules.html.make_progress_html(32, 'Progress 32%'), visible=False,
                                     elem_id='progress-bar', elem_classes='progress-bar')
             gallery = gr.Gallery(label='Gallery', show_label=False, object_fit='contain', visible=True, height=768,
-                                 elem_classes=['resizable_area', 'main_view'])
+                                 elem_classes=['resizable_area', 'main_view', 'final_gallery'],
+                                 elem_id='final_gallery')
             with gr.Row(elem_classes='type_row'):
                 with gr.Column(scale=17):
                     prompt = gr.Textbox(show_label=False, placeholder="Type prompt here.", elem_id='positive_prompt',
@@ -385,7 +386,7 @@ with shared.gradio_root:
             .then(advanced_parameters.set_all_advanced_parameters, inputs=adps) \
             .then(fn=generate_clicked, inputs=ctrls, outputs=[progress_html, progress_window, progress_gallery, gallery]) \
             .then(lambda: (gr.update(visible=True), gr.update(visible=False), gr.update(visible=False)), outputs=[generate_button, stop_button, skip_button]) \
-            .then(fn=None, _js='playNotification')
+            .then(fn=lambda: None, _js='playNotification').then(fn=lambda: None, _js='refresh_grid_delayed')
 
         for notification_file in ['notification.ogg', 'notification.mp3']:
             if os.path.exists(notification_file):