add some javascripts

add some javascripts

fooocus_version.py

@@ -1 +1 @@
-version = '2.1.792'
+version = '2.1.793'

javascript/viewer.js

@@ -0,0 +1,37 @@
+window.main_viewer_height = 512;
+
+function resized() {
+    let windowHeight = window.innerHeight - 260;
+    let elements = document.getElementsByClassName('main_view');
+
+    if (windowHeight > 745) windowHeight = 745;
+
+    for (let i = 0; i < elements.length; i++) {
+        elements[i].style.height = windowHeight + 'px';
+    }
+
+    window.main_viewer_height = windowHeight;
+}
+
+function viewer_to_top(delay = 100) {
+    setTimeout(() => window.scrollTo({top: 0, behavior: 'smooth'}), delay);
+}
+
+function viewer_to_bottom(delay = 100) {
+    let element = document.getElementById('positive_prompt');
+    let yPos = window.main_viewer_height;
+
+    if (element) {
+        yPos = element.getBoundingClientRect().top + window.scrollY;
+    }
+
+    setTimeout(() => window.scrollTo({top: yPos - 8, behavior: 'smooth'}), delay);
+}
+
+window.addEventListener('resize', (e) => {
+    resized();
+});
+
+onUiLoaded(async () => {
+    resized();
+});

launch.py

@@ -10,6 +10,7 @@ sys.path += [root, backend_path]
 
 os.chdir(root)
 os.environ["PYTORCH_ENABLE_MPS_FALLBACK"] = "1"
+os.environ["GRADIO_SERVER_PORT"] = "7865"
 
 
 import platform

modules/ui_gradio_extensions.py

@@ -28,12 +28,14 @@ def javascript_html():
     localization_js_path = webpath('javascript/localization.js')
     zoom_js_path = webpath('javascript/zoom.js')
     edit_attention_js_path = webpath('javascript/edit-attention.js')
+    viewer_js_path = webpath('javascript/viewer.js')
     head = f'<script type="text/javascript">{localization_js(args_manager.args.language)}</script>\n'
     head += f'<script type="text/javascript" src="{script_js_path}"></script>\n'
     head += f'<script type="text/javascript" src="{context_menus_js_path}"></script>\n'
     head += f'<script type="text/javascript" src="{localization_js_path}"></script>\n'
     head += f'<script type="text/javascript" src="{zoom_js_path}"></script>\n'
     head += f'<script type="text/javascript" src="{edit_attention_js_path}"></script>\n'
+    head += f'<script type="text/javascript" src="{viewer_js_path}"></script>\n'
     return head
 
 

update_log.md

@@ -1,3 +1,7 @@
+# 2.1.793
+
+* Added many javascripts to improve user experience. Now users with small screen will always see full canvas without needing to scroll.
+
 # 2.1.790
 
 * Face swap (in line with Midjourney InsightFace): Input Image -> Image Prompt -> Advanced -> FaceSwap

webui.py

@@ -78,10 +78,14 @@ with shared.gradio_root:
     with gr.Row():
         with gr.Column(scale=2):
             with gr.Row():
-                progress_window = grh.Image(label='Preview', show_label=True, height=640, visible=False)
+                progress_window = grh.Image(label='Preview', show_label=True, visible=False,
-                progress_gallery = gr.Gallery(label='Finished Images', show_label=True, object_fit='contain', height=640, visible=False)
+                                            elem_classes=['main_view'])
-            progress_html = gr.HTML(value=modules.html.make_progress_html(32, 'Progress 32%'), visible=False, elem_id='progress-bar', elem_classes='progress-bar')
+                progress_gallery = gr.Gallery(label='Finished Images', show_label=True, object_fit='contain',
-            gallery = gr.Gallery(label='Gallery', show_label=False, object_fit='contain', height=745, visible=True, elem_classes='resizable_area')
+                                              visible=False, elem_classes=['main_view'])
+            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,
+                                 elem_classes=['resizable_area', 'main_view'])
             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',
@@ -171,8 +175,8 @@ with shared.gradio_root:
                         outpaint_selections = gr.CheckboxGroup(choices=['Left', 'Right', 'Top', 'Bottom'], value=[], label='Outpaint', show_label=False, container=False)
                         gr.HTML('* Powered by Fooocus Inpaint Engine (beta) <a href="https://github.com/lllyasviel/Fooocus/discussions/414" target="_blank">\U0001F4D4 Document</a>')
 
-            switch_js = "(x) => {if(x){setTimeout(() => window.scrollTo({ top: 850, behavior: 'smooth' }), 50);}else{setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 50);} return x}"
+            switch_js = "(x) => {if(x){viewer_to_bottom(100);viewer_to_bottom(500);}else{viewer_to_top();} return x;}"
-            down_js = "() => {setTimeout(() => window.scrollTo({ top: 850, behavior: 'smooth' }), 50);}"
+            down_js = "() => {viewer_to_bottom();}"
 
             input_image_checkbox.change(lambda x: gr.update(visible=x), inputs=input_image_checkbox, outputs=image_input_panel, queue=False, _js=switch_js)
             ip_advanced.change(lambda: None, queue=False, _js=down_js)