add some javascripts

add some javascripts
This commit is contained in:
lllyasviel 2023-11-12 01:52:27 -08:00
parent 38b01230f2
commit 7e0c6d3421
6 changed files with 55 additions and 7 deletions

View File

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

37
javascript/viewer.js Normal file
View File

@ -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();
});

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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_gallery = gr.Gallery(label='Finished Images', show_label=True, object_fit='contain', height=640, visible=False)
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', height=745, visible=True, elem_classes='resizable_area')
progress_window = grh.Image(label='Preview', show_label=True, visible=False,
elem_classes=['main_view'])
progress_gallery = gr.Gallery(label='Finished Images', show_label=True, object_fit='contain',
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}"
down_js = "() => {setTimeout(() => window.scrollTo({ top: 850, behavior: 'smooth' }), 50);}"
switch_js = "(x) => {if(x){viewer_to_bottom(100);viewer_to_bottom(500);}else{viewer_to_top();} return x;}"
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)