mirror of
https://github.com/vladmandic/automatic
synced 2026-09-05 12:30:46 +02:00
fix for vlad fork
This commit is contained in:
Miao Xiang
@@ -0,0 +1,320 @@
|
||||
/* generic html tags */
|
||||
:root { --font: system-ui, "Segoe UI", "Roboto", "sans-serif"; }
|
||||
html { font-size: 16px; }
|
||||
body, button, input, select, textarea { font-family: var(--font); overflow-x: hidden; }
|
||||
button { font-size: 1.2rem; }
|
||||
img { background-color: black; }
|
||||
input[type=range] { height: 18px; appearance: none; margin-top: 0; min-width: 160px; background-color: black; width: 100%; background: transparent; }
|
||||
input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 18px; cursor: pointer; box-shadow: 2px 2px 3px #111111; background: #50555C; border-radius: 2px; border: 0px solid #222222; }
|
||||
input[type=range]::-moz-range-track { width: 100%; height: 18px; cursor: pointer; box-shadow: 2px 2px 3px #111111; background: #50555C; border-radius: 2px; border: 0px solid #222222; }
|
||||
input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111; border: 0px solid #000000; height: 18px; width: 40px; border-radius: 2px; background: var(--highlight-color); cursor: pointer; -webkit-appearance: none; margin-top: 0px; }
|
||||
input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111; border: 0px solid #000000; height: 18px; width: 40px; border-radius: 2px; background: var(--highlight-color); cursor: pointer; -webkit-appearance: none; margin-top: 0px; }
|
||||
::-webkit-scrollbar { width: 12px; }
|
||||
::-webkit-scrollbar-track { background: #333333; }
|
||||
::-webkit-scrollbar-thumb { background-color: var(--highlight-color); border-radius: 2px; border-width: 0; box-shadow: 2px 2px 3px #111111; }
|
||||
div.form { border-width: 0; box-shadow: none; background: transparent; overflow: visible; gap: 0.5em; margin-bottom: 6px; }
|
||||
|
||||
/* main gradio components by selector */
|
||||
div.gradio-container.dark > div.w-full.flex.flex-col.min-h-screen > div { background-color: black; }
|
||||
|
||||
/* gradio shadowroot */
|
||||
.gradio-container { font-family: var(--font); --left-column: 490px; --highlight-color: #CE6400; --inactive-color: #4E1400; }
|
||||
|
||||
/* gradio style classes */
|
||||
.border-2 { border-width: 0; }
|
||||
.border-b-2 { border-bottom-width: 2px; border-color: var(--highlight-color) !important; padding-bottom: 2px; margin-bottom: 8px; }
|
||||
.dark .bg-white { color: lightyellow; border-radius: 0; background-color: var(--inactive-color); }
|
||||
.dark .bg-gray-200, .dark .\!bg-gray-200 { background-color: transparent; }
|
||||
.dark .dark\:bg-gray-900 { background-color: black; }
|
||||
.dark .gr-box { border-radius: 0 !important; background-color: #111111 !important; box-shadow: 2px 2px 3px #111111; border-width: 0; padding: 4px; margin: 12px 0px 12px 0px }
|
||||
.dark .gr-button { border-radius: 0; font-weight: normal; box-shadow: 2px 2px 3px #111111; font-size: 0.8rem; min-width: 32px; min-height: 32px; padding: 3px; margin: 3px; }
|
||||
.dark .gr-check-radio { background-color: var(--inactive-color); border-width: 0; border-radius: 2px; box-shadow: 2px 2px 3px #111111; }
|
||||
.dark .gr-check-radio:checked { background-color: var(--highlight-color); }
|
||||
.dark .gr-compact { border-radius: 0; background-color: black; }
|
||||
.dark .gr-form { border-radius: 0; border-width: 0; }
|
||||
.dark .gr-input { background-color: #333333 !important; padding: 4px; margin: 4px; }
|
||||
.dark .gr-input-label { color: lightyellow; border-width: 0; background: transparent; padding: 2px !important; }
|
||||
.dark .gr-panel { border-radius: 0; background-color: black; }
|
||||
.dark { background-color: black; }
|
||||
.dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span { padding: 0; margin-top: -4px; }
|
||||
.dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span { border-radius: 0;}
|
||||
.eta-bar { display: none !important }
|
||||
.extra-networks .tab-nav .search { max-height: 2em; }
|
||||
.extra-network-cards .card .actions .name { font-weight: 400; font-size: 1.2rem; }
|
||||
.extra-network-cards .card { width: 18em; height: 12em; box-shadow: none; }
|
||||
.extra-network-cards .card:hover { transform: scale(1.5); transition: all 0.3s ease; z-index: 99; box-shadow: none; }
|
||||
svg.feather.feather-image, .feather .feather-image { display: none }
|
||||
.gap-2 { padding-top: 8px; }
|
||||
.gr-box > div > div > input.gr-text-input { right: 0; width: 4em; padding: 0; top: -12px; border: none; max-height: 20px; }
|
||||
.output-html { line-height: 1.2rem; overflow-x: hidden; }
|
||||
.output-html > div { margin-bottom: 8px; }
|
||||
.overflow-hidden .flex .flex-col .relative col .gap-4 { min-width: var(--left-column); max-width: var(--left-column); } /* this is a problematic one */
|
||||
.p-2 { padding: 0; }
|
||||
.px-4 { padding-lefT: 1rem; padding-right: 1rem; }
|
||||
.py-6 { padding-bottom: 0; }
|
||||
.rounded-lg { border-radius: 0; }
|
||||
.tabs { background-color: black; }
|
||||
.gradio-button.tool { border-radius: 0; height: 2em; }
|
||||
.block.token-counter span { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; border-radius: 0; font-size: 0.8rem; }
|
||||
.tab-nav { zoom: 130%; margin-bottom: 16px; border-bottom: 2px solid #CE6400 !important; padding-bottom: 2px; }
|
||||
.label-wrap { margin: 16px 0px 8px 0px; }
|
||||
.gradio-slider input[type="number"] { width: 4.5em; font-size: 0.8rem; }
|
||||
#tab_extensions table td, #tab_extensions table th { border: none; padding: 0.5em; }
|
||||
#tab_extensions table { width: 96vw }
|
||||
#tab_extensions table thead { background-color: var(--neutral-700); }
|
||||
|
||||
/* automatic style classes */
|
||||
.progressDiv { border-radius: 0 !important; position: fixed; top: 318px; right: 26px; max-width: 262px; height: 48px; z-index: 99; }
|
||||
.progressDiv .progress { border-radius: 0 !important; background: var(--highlight-color); line-height: 3rem; height: 48px; }
|
||||
.gallery-item { box-shadow: none !important; }
|
||||
.performance { color: #888; }
|
||||
.modalControls { background-color: #4E1400; }
|
||||
|
||||
/* gradio elements overrides */
|
||||
#div.gradio-container.dark { overflow-x: hidden; }
|
||||
#img2img_label_copy_to_img2img { font-weight: normal; }
|
||||
#txt2img_prompt, #txt2img_neg_prompt, #img2img_prompt, #img2img_neg_prompt { background-color: black; box-shadow: 4px 4px 4px 0px #333333 !important; }
|
||||
#txt2img_prompt > label > textarea, #txt2img_neg_prompt > label > textarea, #img2img_prompt > label > textarea, #img2img_neg_prompt > label > textarea { font-size: 1.2rem; }
|
||||
#img2img_settings { min-width: calc(2 * var(--left-column)); max-width: calc(2 * var(--left-column)); background-color: #111111; padding-top: 16px; }
|
||||
#interrogate, #deepbooru { margin: 16px 0px 16px 0px; max-width: 100px; max-height: 74px; font-weight: normal; font-size: 14px; }
|
||||
#lightboxModal { background-color: rgba(20, 20, 20, 0.8) }
|
||||
#quicksettings .gr-button-tool { font-size: 1.6rem; box-shadow: none; margin-left: -20px; margin-top: -2px; height: 2.4em; }
|
||||
#quicksettings > div, #quicksettings > fieldset { min-width: 26em; max-width: 26em; line-height: 2em; }
|
||||
#refresh_sd_model_checkpoint { height: 40px; margin-left: -14px; background: #333333; box-shadow: none; }
|
||||
#refresh_txt2img_styles, #refresh_img2img_styles, #open_folder_txt2img, #open_folder_img2img, #open_folder_extras, #footer, #style_pos_col, #style_neg_col, #roll_col, #save_zip_txt2img, #save_zip_img2img, #extras_upscaler_2, #extras_upscaler_2_visibility, #txt2img_res_switch_btn, #img2img_res_switch_btn, #txt2img_seed_resize_from_w, #txt2img_seed_resize_from_h, #txt2img_tiling { display: none; }
|
||||
#save-animation { border-radius: 0 !important; margin-bottom: 16px; background-color: #111111; }
|
||||
#script_list { padding: 4px; margin-top: 20px; margin-bottom: 20px; }
|
||||
#settings > div.flex-wrap { width: 15em; }
|
||||
#tab_extensions table { background-color: #222222; }
|
||||
#txt2img_actions_column, #img2img_actions_column { min-width: 260px !important; max-width: 260px !important; }
|
||||
#txt2img_cfg_scale { min-width: 200px; }
|
||||
#txt2img_checkboxes, #img2img_checkboxes { background-color: transparent; }
|
||||
#txt2img_checkboxes, #img2img_checkboxes { margin-bottom: 0.2em; }
|
||||
#txt2img_gallery, #img2img_gallery, #extras_gallery { background: black !important; padding: 0; margin: 0; object-fit: contain; box-shadow: none; min-height: 0; }
|
||||
#txt2img_generate, #img2img_generate { height: 36px; border: none; border-radius: 0; min-height: 36px; padding: 0; }
|
||||
#txt2img_interrupt, #img2img_interrupt, #txt2img_skip, #img2img_skip { height: 36px; min-width: 116px; max-width: 116px; border: none; border-radius: 0; background-color: var(--inactive-color); margin-top: 46px; display: block !important; padding: 0; }
|
||||
#txt2img_progress_row > div { min-width: var(--left-column); max-width: var(--left-column); }
|
||||
#txt2img_results, #img2img_results, #extras_results { background-color: black; padding: 0; }
|
||||
#txt2img_seed_row { padding: 0; margin-top: 8px; }
|
||||
#txt2img_settings { min-width: var(--left-column); max-width: var(--left-column); background-color: #111111; padding-top: 16px; }
|
||||
#txt2img_subseed_row { padding: 0; margin-top: 16px; }
|
||||
#txt2img_subseed_show { min-width: 74px; padding: 8px 0 0 0 }
|
||||
#txt2img_subseed_strength { margin-top: 0; }
|
||||
#txt2img_tools, #img2img_tools { margin-top: 54px; scale: 120%; margin-left: 26px; }
|
||||
#txtimg_hr_finalres { max-width: 200px; }
|
||||
#pnginfo_html2_info { margin-top: -18px; background-color: var(--input-background-fill); padding: var(--input-padding) }
|
||||
|
||||
/* custom elements overrides */
|
||||
#steps-animation, #controlnet { border-width: 0; }
|
||||
|
||||
/* based on gradio built-in dark theme */
|
||||
.dark {
|
||||
--body-background-fill: black;
|
||||
--body-text-color: var(--neutral-100);
|
||||
--color-accent-soft: var(--neutral-700);
|
||||
--background-fill-primary: #222222;
|
||||
--background-fill-secondary: none;
|
||||
--border-color-accent: black;
|
||||
--border-color-primary: black;
|
||||
--link-text-color-active: var(--secondary-500);
|
||||
--link-text-color: var(--secondary-500);
|
||||
--link-text-color-hover: var(--secondary-400);
|
||||
--link-text-color-visited: var(--secondary-600);
|
||||
--body-text-color-subdued: var(--neutral-400);
|
||||
--shadow-spread: 1px;
|
||||
--block-background-fill: None;
|
||||
--block-border-color: var(--border-color-primary);
|
||||
--block_border_width: None;
|
||||
--block-info-text-color: var(--body-text-color-subdued);
|
||||
--block-label-background-fill: var(--background-fill-secondary);
|
||||
--block-label-border-color: var(--border-color-primary);
|
||||
--block_label_border_width: None;
|
||||
--block-label-text-color: var(--neutral-200);
|
||||
--block_shadow: None;
|
||||
--block_title_background_fill: None;
|
||||
--block_title_border_color: None;
|
||||
--block_title_border_width: None;
|
||||
--block-title-text-color: white;
|
||||
--panel-background-fill: var(--background-fill-secondary);
|
||||
--panel-border-color: var(--border-color-primary);
|
||||
--panel_border_width: None;
|
||||
--checkbox-background-color: var(--neutral-800);
|
||||
--checkbox-background-color-focus: var(--checkbox-background-color);
|
||||
--checkbox-background-color-hover: var(--checkbox-background-color);
|
||||
--checkbox-background-color-selected: var(--secondary-600);
|
||||
--checkbox-border-color: var(--neutral-700);
|
||||
--checkbox-border-color-focus: var(--secondary-500);
|
||||
--checkbox-border-color-hover: var(--neutral-600);
|
||||
--checkbox-border-color-selected: var(--secondary-600);
|
||||
--checkbox-border-width: var(--input-border-width);
|
||||
--checkbox-label-background-fill: None;
|
||||
--checkbox-label-background-fill-hover: None;
|
||||
--checkbox-label-background-fill-selected: var(--checkbox-label-background-fill);
|
||||
--checkbox-label-border-color: var(--border-color-primary);
|
||||
--checkbox-label-border-color-hover: var(--checkbox-label-border-color);
|
||||
--checkbox-label-border-width: var(--input-border-width);
|
||||
--checkbox-label-text-color: var(--body-text-color);
|
||||
--checkbox-label-text-color-selected: var(--checkbox-label-text-color);
|
||||
--error-background-fill: var(--background-fill-primary);
|
||||
--error-border-color: var(--border-color-primary);
|
||||
--error_border_width: None;
|
||||
--error-text-color: #ef4444;
|
||||
--input-background-fill: var(--neutral-800);
|
||||
--input-background-fill-focus: var(--secondary-600);
|
||||
--input-background-fill-hover: var(--input-background-fill);
|
||||
--input-border-color: var(--border-color-primary);
|
||||
--input-border-color-focus: var(--neutral-700);
|
||||
--input-border-color-hover: var(--input-border-color);
|
||||
--input_border_width: None;
|
||||
--input-placeholder-color: var(--neutral-500);
|
||||
--input-shadow: 2px 2px 2px 2px #111111;
|
||||
--input-shadow-focus: 2px 2px 2px 2px #111111;
|
||||
--loader_color: None;
|
||||
--slider_color: None;
|
||||
--stat-background-fill: linear-gradient(to right, var(--primary-400), var(--primary-600));
|
||||
--table-border-color: var(--neutral-700);
|
||||
--table-even-background-fill: #222222;
|
||||
--table-odd-background-fill: #333333;
|
||||
--table-row-focus: var(--color-accent-soft);
|
||||
--button-border-width: var(--input-border-width);
|
||||
--button-cancel-background-fill: linear-gradient(to bottom right, #dc2626, #b91c1c);
|
||||
--button-cancel-background-fill-hover: linear-gradient(to bottom right, #dc2626, #dc2626);
|
||||
--button-cancel-border-color: #dc2626;
|
||||
--button-cancel-border-color-hover: var(--button-cancel-border-color);
|
||||
--button-cancel-text-color: white;
|
||||
--button-cancel-text-color-hover: var(--button-cancel-text-color);
|
||||
--button-primary-background-fill: linear-gradient(to bottom right, var(--primary-500), var(--primary-800));
|
||||
--button-primary-background-fill-hover: linear-gradient(to bottom right, var(--primary-500), var(--primary-300));
|
||||
--button-primary-border-color: var(--primary-500);
|
||||
--button-primary-border-color-hover: var(--button-primary-border-color);
|
||||
--button-primary-text-color: white;
|
||||
--button-primary-text-color-hover: var(--button-primary-text-color);
|
||||
--button-secondary-background-fill: linear-gradient(to bottom right, var(--neutral-600), var(--neutral-800));
|
||||
--button-secondary-background-fill-hover: linear-gradient(to bottom right, var(--neutral-600), var(--neutral-400));
|
||||
--button-secondary-border-color: var(--neutral-600);
|
||||
--button-secondary-border-color-hover: var(--button-secondary-border-color);
|
||||
--button-secondary-text-color: white;
|
||||
--button-secondary-text-color-hover: var(--button-secondary-text-color);
|
||||
--primary-50: #fff7ed;
|
||||
--primary-100: #ffedd5;
|
||||
--primary-200: #fed7aa;
|
||||
--primary-300: #fdba74;
|
||||
--primary-400: #fb923c;
|
||||
--primary-500: #f97316;
|
||||
--primary-600: #ea580c;
|
||||
--primary-700: #c2410c;
|
||||
--primary-800: #9a3412;
|
||||
--primary-900: #7c2d12;
|
||||
--primary-950: #6c2e12;
|
||||
--secondary-50: #eff6ff;
|
||||
--secondary-100: #dbeafe;
|
||||
--secondary-200: #bfdbfe;
|
||||
--secondary-300: #93c5fd;
|
||||
--secondary-400: #60a5fa;
|
||||
--secondary-500: #3b82f6;
|
||||
--secondary-600: #2563eb;
|
||||
--secondary-700: #1d4ed8;
|
||||
--secondary-800: #1e40af;
|
||||
--secondary-900: #1e3a8a;
|
||||
--secondary-950: #1d3660;
|
||||
--neutral-50: #f0f0f0;
|
||||
--neutral-100: #e0e0e0;
|
||||
--neutral-200: #d0d0d0;
|
||||
--neutral-300: #b0b0b0;
|
||||
--neutral-400: #909090;
|
||||
--neutral-500: #707070;
|
||||
--neutral-600: #606060;
|
||||
--neutral-700: #404040;
|
||||
--neutral-800: #333333;
|
||||
--neutral-900: #111827;
|
||||
--neutral-950: #0b0f19;
|
||||
--spacing-xxs: 1px;
|
||||
--spacing-xs: 2px;
|
||||
--spacing-sm: 4px;
|
||||
--spacing-md: 6px;
|
||||
--spacing-lg: 8px;
|
||||
--spacing-xl: 10px;
|
||||
--spacing-xxl: 18px;
|
||||
--radius-xxs: 0;
|
||||
--radius-xs: 0;
|
||||
--radius-sm: 0;
|
||||
--radius-md: 0;
|
||||
--radius-lg: 0;
|
||||
--radius-xl: 0;
|
||||
--radius-xxl: 0;
|
||||
--text-xxs: 9px;
|
||||
--text-xs: 10px;
|
||||
--text-sm: 12px;
|
||||
--text-md: 14px;
|
||||
--text-lg: 16px;
|
||||
--text-xl: 22px;
|
||||
--text-xxl: 26px;
|
||||
--font: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;
|
||||
--font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
|
||||
--body-text-size: var(--text-md);
|
||||
--body-text-weight: 400;
|
||||
--embed-radius: var(--radius-lg);
|
||||
--color-accent: var(--primary-500);
|
||||
--shadow-drop: 0;
|
||||
--shadow-drop-lg: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-inset: rgba(0,0,0,0.05) 0px 2px 4px 0px inset;
|
||||
--block-border-width: 1px;
|
||||
--block-info-text-size: var(--text-sm);
|
||||
--block-info-text-weight: 400;
|
||||
--block-label-border-width: 1px;
|
||||
--block-label-margin: 0;
|
||||
--block-label-padding: var(--spacing-sm) var(--spacing-lg);
|
||||
--block-label-radius: calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px) 0;
|
||||
--block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
|
||||
--block-label-text-size: var(--text-sm);
|
||||
--block-label-text-weight: 400;
|
||||
--block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
|
||||
--block-radius: var(--radius-lg);
|
||||
--block-shadow: var(--shadow-drop);
|
||||
--block-title-background-fill: none;
|
||||
--block-title-border-color: none;
|
||||
--block-title-border-width: 0px;
|
||||
--block-title-padding: 0;
|
||||
--block-title-radius: none;
|
||||
--block-title-text-size: var(--text-md);
|
||||
--block-title-text-weight: 400;
|
||||
--container-radius: var(--radius-lg);
|
||||
--form-gap-width: 1px;
|
||||
--layout-gap: var(--spacing-xxl);
|
||||
--panel-border-width: 0;
|
||||
--section-header-text-size: var(--text-md);
|
||||
--section-header-text-weight: 400;
|
||||
--checkbox-border-radius: var(--radius-sm);
|
||||
--checkbox-label-gap: 2px;
|
||||
--checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
|
||||
--checkbox-label-shadow: var(--shadow-drop);
|
||||
--checkbox-label-text-size: var(--text-md);
|
||||
--checkbox-label-text-weight: 400;
|
||||
--checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
|
||||
--radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
||||
--checkbox-shadow: var(--input-shadow);
|
||||
--error-border-width: 1px;
|
||||
--input-border-width: 0;
|
||||
--input-padding: 6px;
|
||||
--input-radius: var(--radius-lg);
|
||||
--input-text-size: var(--text-md);
|
||||
--input-text-weight: 400;
|
||||
--loader-color: var(--color-accent);
|
||||
--prose-text-size: var(--text-md);
|
||||
--prose-text-weight: 400;
|
||||
--prose-header-text-weight: 600;
|
||||
--slider-color: ;
|
||||
--table-radius: var(--radius-lg);
|
||||
--button-large-padding: 2px 10px;
|
||||
--button-large-radius: var(--radius-lg);
|
||||
--button-large-text-size: var(--text-lg);
|
||||
--button-large-text-weight: 400;
|
||||
--button-shadow: 4px 4px 4px 0px #333333;
|
||||
--button-shadow-active: 1px 1px 4px 0px #555555;
|
||||
--button-shadow-hover: 1px 1px 4px 0px #555555;
|
||||
--button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
|
||||
--button-small-radius: var(--radius-lg);
|
||||
--button-small-text-size: var(--text-md);
|
||||
--button-small-text-weight: 400;
|
||||
--button-transition: none;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
@@ -132,13 +132,14 @@ addContextMenuEventListener = initResponse[2];
|
||||
//Start example Context Menu Items
|
||||
let generateOnRepeat = function(genbuttonid,interruptbuttonid){
|
||||
let genbutton = gradioApp().querySelector(genbuttonid);
|
||||
let interruptbutton = gradioApp().querySelector(interruptbuttonid);
|
||||
if(!interruptbutton.offsetParent){
|
||||
const busy = document.getElementById('progressbar')?.style.display == "block"
|
||||
if(!busy){
|
||||
genbutton.click();
|
||||
}
|
||||
clearInterval(window.generateOnRepeatInterval)
|
||||
window.generateOnRepeatInterval = setInterval(function(){
|
||||
if(!interruptbutton.offsetParent){
|
||||
const busy = document.getElementById('progressbar')?.style.display == "block"
|
||||
if(!busy){
|
||||
genbutton.click();
|
||||
}
|
||||
},
|
||||
|
||||
Vendored
+1
@@ -61,6 +61,7 @@ window.document.addEventListener('dragover', e => {
|
||||
|
||||
window.document.addEventListener('drop', e => {
|
||||
const target = e.composedPath()[0];
|
||||
if (!target.placeholder) return;
|
||||
if (target.placeholder.indexOf("Prompt") == -1) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -2,48 +2,32 @@
|
||||
function extensions_apply(_, _, disable_all){
|
||||
var disable = []
|
||||
var update = []
|
||||
|
||||
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){
|
||||
if(x.name.startsWith("enable_") && ! x.checked)
|
||||
disable.push(x.name.substr(7))
|
||||
|
||||
if(x.name.startsWith("update_") && x.checked)
|
||||
update.push(x.name.substr(7))
|
||||
if(x.name.startsWith("enable_") && ! x.checked) disable.push(x.name.substr(7))
|
||||
if(x.name.startsWith("update_") && x.checked) update.push(x.name.substr(7))
|
||||
})
|
||||
|
||||
restart_reload()
|
||||
|
||||
return [JSON.stringify(disable), JSON.stringify(update), disable_all]
|
||||
}
|
||||
|
||||
function extensions_check(_, _){
|
||||
var disable = []
|
||||
|
||||
gradioApp().querySelectorAll('#extensions input[type="checkbox"]').forEach(function(x){
|
||||
if(x.name.startsWith("enable_") && ! x.checked)
|
||||
disable.push(x.name.substr(7))
|
||||
if(x.name.startsWith("enable_") && ! x.checked) disable.push(x.name.substr(7))
|
||||
})
|
||||
|
||||
gradioApp().querySelectorAll('#extensions .extension_status').forEach(function(x){
|
||||
x.innerHTML = "Loading..."
|
||||
})
|
||||
|
||||
|
||||
var id = randomId()
|
||||
requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, function(){
|
||||
|
||||
})
|
||||
|
||||
requestProgress(id, gradioApp().getElementById('extensions_installed_top'), null, null, null, false)
|
||||
return [id, JSON.stringify(disable)]
|
||||
}
|
||||
|
||||
function install_extension_from_index(button, url){
|
||||
button.disabled = "disabled"
|
||||
button.value = "Installing..."
|
||||
|
||||
textarea = gradioApp().querySelector('#extension_to_install textarea')
|
||||
textarea.value = url
|
||||
updateInput(textarea)
|
||||
|
||||
gradioApp().querySelector('#install_extension_button').click()
|
||||
}
|
||||
|
||||
@@ -6,12 +6,15 @@ function setupExtraNetworksForTab(tabname){
|
||||
var search = gradioApp().querySelector('#'+tabname+'_extra_search textarea')
|
||||
var refresh = gradioApp().getElementById(tabname+'_extra_refresh')
|
||||
var descriptInput = gradioApp().getElementById(tabname+ '_description_input')
|
||||
var close = gradioApp().getElementById(tabname+'_extra_close')
|
||||
|
||||
search.classList.add('search')
|
||||
tabs.appendChild(search)
|
||||
tabs.appendChild(refresh)
|
||||
tabs.appendChild(descriptInput)
|
||||
|
||||
tabs.appendChild(close)
|
||||
|
||||
search.addEventListener("input", function(evt){
|
||||
searchTerm = search.value.toLowerCase()
|
||||
|
||||
|
||||
@@ -2,12 +2,8 @@
|
||||
|
||||
let txt2img_gallery, img2img_gallery, modal = undefined;
|
||||
onUiUpdate(function(){
|
||||
if (!txt2img_gallery) {
|
||||
txt2img_gallery = attachGalleryListeners("txt2img")
|
||||
}
|
||||
if (!img2img_gallery) {
|
||||
img2img_gallery = attachGalleryListeners("img2img")
|
||||
}
|
||||
if (!txt2img_gallery) txt2img_gallery = attachGalleryListeners("txt2img")
|
||||
if (!img2img_gallery) img2img_gallery = attachGalleryListeners("img2img")
|
||||
if (!modal) {
|
||||
modal = gradioApp().getElementById('lightboxModal')
|
||||
modalObserver.observe(modal, { attributes : true, attributeFilter : ['style'] });
|
||||
@@ -15,10 +11,11 @@ onUiUpdate(function(){
|
||||
});
|
||||
|
||||
let modalObserver = new MutationObserver(function(mutations) {
|
||||
mutations.forEach(function(mutationRecord) {
|
||||
let selectedTab = gradioApp().querySelector('#tabs div button.bg-white')?.innerText
|
||||
if (mutationRecord.target.style.display === 'none' && selectedTab === 'txt2img' || selectedTab === 'img2img')
|
||||
gradioApp().getElementById(selectedTab+"_generation_info_button").click()
|
||||
mutations.forEach((mutationRecord) => {
|
||||
let selectedTab = gradioApp().querySelector('#tabs div button.selected')?.innerText
|
||||
if (!selectedTab) selectedTab = gradioApp().querySelector('#tabs div button')?.innerText
|
||||
if (mutationRecord.target.style.display === 'none' && (selectedTab === 'txt2img' || selectedTab === 'img2img'))
|
||||
gradioApp().getElementById(selectedTab+"_generation_info_button")?.click()
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
@@ -1,6 +1,7 @@
|
||||
window.onload = (function(){
|
||||
window.addEventListener('drop', e => {
|
||||
const target = e.composedPath()[0];
|
||||
if (!target.placeholder) return;
|
||||
const idx = selected_gallery_index();
|
||||
if (target.placeholder.indexOf("Prompt") == -1) return;
|
||||
|
||||
|
||||
+17
-59
@@ -8,20 +8,14 @@ function showModal(event) {
|
||||
const modalImage = gradioApp().getElementById("modalImage")
|
||||
const lb = gradioApp().getElementById("lightboxModal")
|
||||
modalImage.src = source.src
|
||||
if (modalImage.style.display === 'none') {
|
||||
lb.style.setProperty('background-image', 'url(' + source.src + ')');
|
||||
}
|
||||
if (modalImage.style.display === 'none') lb.style.setProperty('background-image', 'url(' + source.src + ')');
|
||||
lb.style.display = "flex";
|
||||
lb.focus()
|
||||
|
||||
const tabTxt2Img = gradioApp().getElementById("tab_txt2img")
|
||||
const tabImg2Img = gradioApp().getElementById("tab_img2img")
|
||||
// show the save button in modal only on txt2img or img2img tabs
|
||||
if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") {
|
||||
gradioApp().getElementById("modal_save").style.display = "inline"
|
||||
} else {
|
||||
gradioApp().getElementById("modal_save").style.display = "none"
|
||||
}
|
||||
if (tabTxt2Img.style.display != "none" || tabImg2Img.style.display != "none") gradioApp().getElementById("modal_save").style.display = "inline"
|
||||
else gradioApp().getElementById("modal_save").style.display = "none"
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
@@ -33,41 +27,29 @@ function updateOnBackgroundChange() {
|
||||
const modalImage = gradioApp().getElementById("modalImage")
|
||||
if (modalImage && modalImage.offsetParent) {
|
||||
let currentButton = selected_gallery_button();
|
||||
|
||||
if (currentButton?.children?.length > 0 && modalImage.src != currentButton.children[0].src) {
|
||||
modalImage.src = currentButton.children[0].src;
|
||||
if (modalImage.style.display === 'none') {
|
||||
modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
||||
}
|
||||
if (modalImage.style.display === 'none') modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function modalImageSwitch(offset) {
|
||||
var galleryButtons = all_gallery_buttons();
|
||||
|
||||
if (galleryButtons.length > 1) {
|
||||
var currentButton = selected_gallery_button();
|
||||
|
||||
var result = -1
|
||||
galleryButtons.forEach(function(v, i) {
|
||||
if (v == currentButton) {
|
||||
result = i
|
||||
}
|
||||
if (v == currentButton) result = i
|
||||
})
|
||||
|
||||
if (result != -1) {
|
||||
nextButton = galleryButtons[negmod((result + offset), galleryButtons.length)]
|
||||
nextButton.click()
|
||||
const modalImage = gradioApp().getElementById("modalImage");
|
||||
const modal = gradioApp().getElementById("lightboxModal");
|
||||
modalImage.src = nextButton.children[0].src;
|
||||
if (modalImage.style.display === 'none') {
|
||||
modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
||||
}
|
||||
setTimeout(function() {
|
||||
modal.focus()
|
||||
}, 10)
|
||||
if (modalImage.style.display === 'none') modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
||||
setTimeout(() => modal.focus(), 10)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -77,13 +59,9 @@ function saveImage(){
|
||||
const tabImg2Img = gradioApp().getElementById("tab_img2img")
|
||||
const saveTxt2Img = "save_txt2img"
|
||||
const saveImg2Img = "save_img2img"
|
||||
if (tabTxt2Img.style.display != "none") {
|
||||
gradioApp().getElementById(saveTxt2Img).click()
|
||||
} else if (tabImg2Img.style.display != "none") {
|
||||
gradioApp().getElementById(saveImg2Img).click()
|
||||
} else {
|
||||
console.error("missing implementation for saving modal of this type")
|
||||
}
|
||||
if (tabTxt2Img.style.display != "none") gradioApp().getElementById(saveTxt2Img).click()
|
||||
else if (tabImg2Img.style.display != "none") gradioApp().getElementById(saveImg2Img).click()
|
||||
else console.error("missing implementation for saving modal of this type")
|
||||
}
|
||||
|
||||
function modalSaveImage(event) {
|
||||
@@ -119,36 +97,24 @@ function modalKeyHandler(event) {
|
||||
}
|
||||
|
||||
function setupImageForLightbox(e) {
|
||||
if (e.dataset.modded)
|
||||
return;
|
||||
|
||||
if (e.dataset.modded) return;
|
||||
e.dataset.modded = true;
|
||||
e.style.cursor='pointer'
|
||||
e.style.userSelect='none'
|
||||
|
||||
var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
|
||||
|
||||
// For Firefox, listening on click first switched to next image then shows the lightbox.
|
||||
// If you know how to fix this without switching to mousedown event, please.
|
||||
// For other browsers the event is click to make it possiblr to drag picture.
|
||||
var event = isFirefox ? 'mousedown' : 'click'
|
||||
|
||||
e.addEventListener(event, function (evt) {
|
||||
if(!opts.js_modal_lightbox || evt.button != 0) return;
|
||||
|
||||
modalZoomSet(gradioApp().getElementById('modalImage'), opts.js_modal_lightbox_initially_zoomed)
|
||||
evt.preventDefault()
|
||||
showModal(evt)
|
||||
}, true);
|
||||
|
||||
}
|
||||
|
||||
function modalZoomSet(modalImage, enable) {
|
||||
if (enable) {
|
||||
modalImage.classList.add('modalImageFullscreen');
|
||||
} else {
|
||||
modalImage.classList.remove('modalImageFullscreen');
|
||||
}
|
||||
if (enable) modalImage.classList.add('modalImageFullscreen');
|
||||
else modalImage.classList.remove('modalImageFullscreen');
|
||||
}
|
||||
|
||||
function modalZoomToggle(event) {
|
||||
@@ -168,21 +134,16 @@ function modalTileImageToggle(event) {
|
||||
modalImage.style.display = 'none';
|
||||
modal.style.setProperty('background-image', `url(${modalImage.src})`)
|
||||
}
|
||||
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
function galleryImageHandler(e) {
|
||||
//if (e && e.parentElement.tagName == 'BUTTON') {
|
||||
e.onclick = showGalleryImage;
|
||||
//}
|
||||
e.onclick = showGalleryImage;
|
||||
}
|
||||
|
||||
onUiUpdate(function() {
|
||||
fullImg_preview = gradioApp().querySelectorAll('.gradio-gallery > div > img')
|
||||
if (fullImg_preview != null) {
|
||||
fullImg_preview.forEach(setupImageForLightbox);
|
||||
}
|
||||
if (fullImg_preview != null) fullImg_preview.forEach(setupImageForLightbox);
|
||||
updateOnBackgroundChange();
|
||||
})
|
||||
|
||||
@@ -251,9 +212,6 @@ document.addEventListener("DOMContentLoaded", function() {
|
||||
|
||||
modal.appendChild(modalNext)
|
||||
|
||||
gradioApp().appendChild(modal)
|
||||
|
||||
|
||||
document.body.appendChild(modal);
|
||||
|
||||
try { gradioApp().appendChild(modal); }
|
||||
catch (e) { gradioApp().body.appendChild(modal); }
|
||||
});
|
||||
|
||||
@@ -1,165 +0,0 @@
|
||||
|
||||
// localization = {} -- the dict with translations is created by the backend
|
||||
|
||||
ignore_ids_for_localization={
|
||||
setting_sd_hypernetwork: 'OPTION',
|
||||
setting_sd_model_checkpoint: 'OPTION',
|
||||
setting_realesrgan_enabled_models: 'OPTION',
|
||||
modelmerger_primary_model_name: 'OPTION',
|
||||
modelmerger_secondary_model_name: 'OPTION',
|
||||
modelmerger_tertiary_model_name: 'OPTION',
|
||||
train_embedding: 'OPTION',
|
||||
train_hypernetwork: 'OPTION',
|
||||
txt2img_styles: 'OPTION',
|
||||
img2img_styles: 'OPTION',
|
||||
setting_random_artist_categories: 'SPAN',
|
||||
setting_face_restoration_model: 'SPAN',
|
||||
setting_realesrgan_enabled_models: 'SPAN',
|
||||
extras_upscaler_1: 'SPAN',
|
||||
extras_upscaler_2: 'SPAN',
|
||||
}
|
||||
|
||||
re_num = /^[\.\d]+$/
|
||||
re_emoji = /[\p{Extended_Pictographic}\u{1F3FB}-\u{1F3FF}\u{1F9B0}-\u{1F9B3}]/u
|
||||
|
||||
original_lines = {}
|
||||
translated_lines = {}
|
||||
|
||||
function textNodesUnder(el){
|
||||
var n, a=[], walk=document.createTreeWalker(el,NodeFilter.SHOW_TEXT,null,false);
|
||||
while(n=walk.nextNode()) a.push(n);
|
||||
return a;
|
||||
}
|
||||
|
||||
function canBeTranslated(node, text){
|
||||
if(! text) return false;
|
||||
if(! node.parentElement) return false;
|
||||
|
||||
parentType = node.parentElement.nodeName
|
||||
if(parentType=='SCRIPT' || parentType=='STYLE' || parentType=='TEXTAREA') return false;
|
||||
|
||||
if (parentType=='OPTION' || parentType=='SPAN'){
|
||||
pnode = node
|
||||
for(var level=0; level<4; level++){
|
||||
pnode = pnode.parentElement
|
||||
if(! pnode) break;
|
||||
|
||||
if(ignore_ids_for_localization[pnode.id] == parentType) return false;
|
||||
}
|
||||
}
|
||||
|
||||
if(re_num.test(text)) return false;
|
||||
if(re_emoji.test(text)) return false;
|
||||
return true
|
||||
}
|
||||
|
||||
function getTranslation(text){
|
||||
if(! text) return undefined
|
||||
|
||||
if(translated_lines[text] === undefined){
|
||||
original_lines[text] = 1
|
||||
}
|
||||
|
||||
tl = localization[text]
|
||||
if(tl !== undefined){
|
||||
translated_lines[tl] = 1
|
||||
}
|
||||
|
||||
return tl
|
||||
}
|
||||
|
||||
function processTextNode(node){
|
||||
text = node.textContent.trim()
|
||||
|
||||
if(! canBeTranslated(node, text)) return
|
||||
|
||||
tl = getTranslation(text)
|
||||
if(tl !== undefined){
|
||||
node.textContent = tl
|
||||
}
|
||||
}
|
||||
|
||||
function processNode(node){
|
||||
if(node.nodeType == 3){
|
||||
processTextNode(node)
|
||||
return
|
||||
}
|
||||
|
||||
if(node.title){
|
||||
tl = getTranslation(node.title)
|
||||
if(tl !== undefined){
|
||||
node.title = tl
|
||||
}
|
||||
}
|
||||
|
||||
if(node.placeholder){
|
||||
tl = getTranslation(node.placeholder)
|
||||
if(tl !== undefined){
|
||||
node.placeholder = tl
|
||||
}
|
||||
}
|
||||
|
||||
textNodesUnder(node).forEach(function(node){
|
||||
processTextNode(node)
|
||||
})
|
||||
}
|
||||
|
||||
function dumpTranslations(){
|
||||
dumped = {}
|
||||
if (localization.rtl) {
|
||||
dumped.rtl = true
|
||||
}
|
||||
|
||||
Object.keys(original_lines).forEach(function(text){
|
||||
if(dumped[text] !== undefined) return
|
||||
|
||||
dumped[text] = localization[text] || text
|
||||
})
|
||||
|
||||
return dumped
|
||||
}
|
||||
|
||||
onUiUpdate(function(m){
|
||||
m.forEach(function(mutation){
|
||||
mutation.addedNodes.forEach(function(node){
|
||||
processNode(node)
|
||||
})
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
processNode(gradioApp())
|
||||
|
||||
if (localization.rtl) { // if the language is from right to left,
|
||||
(new MutationObserver((mutations, observer) => { // wait for the style to load
|
||||
mutations.forEach(mutation => {
|
||||
mutation.addedNodes.forEach(node => {
|
||||
if (node.tagName === 'STYLE') {
|
||||
observer.disconnect();
|
||||
|
||||
for (const x of node.sheet.rules) { // find all rtl media rules
|
||||
if (Array.from(x.media || []).includes('rtl')) {
|
||||
x.media.appendMedium('all'); // enable them
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
})).observe(gradioApp(), { childList: true });
|
||||
}
|
||||
})
|
||||
|
||||
function download_localization() {
|
||||
text = JSON.stringify(dumpTranslations(), null, 4)
|
||||
|
||||
var element = document.createElement('a');
|
||||
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
|
||||
element.setAttribute('download', "localization.json");
|
||||
element.style.display = 'none';
|
||||
document.body.appendChild(element);
|
||||
|
||||
element.click();
|
||||
|
||||
document.body.removeChild(element);
|
||||
}
|
||||
|
||||
+43
-88
@@ -1,14 +1,8 @@
|
||||
// code related to showing and updating progressbar shown as the image is being made
|
||||
function rememberGallerySelection(id_gallery) {}
|
||||
|
||||
function rememberGallerySelection(id_gallery){
|
||||
function getGallerySelectedIndex(id_gallery) {}
|
||||
|
||||
}
|
||||
|
||||
function getGallerySelectedIndex(id_gallery){
|
||||
|
||||
}
|
||||
|
||||
function request(url, data, handler, errorHandler){
|
||||
function request(url, data, handler, errorHandler) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
var url = url;
|
||||
xhr.open("POST", url, true);
|
||||
@@ -32,147 +26,108 @@ function request(url, data, handler, errorHandler){
|
||||
xhr.send(js);
|
||||
}
|
||||
|
||||
function pad2(x){
|
||||
function pad2(x) {
|
||||
return x<10 ? '0'+x : x
|
||||
}
|
||||
|
||||
function formatTime(secs){
|
||||
if(secs > 3600){
|
||||
return pad2(Math.floor(secs/60/60)) + ":" + pad2(Math.floor(secs/60)%60) + ":" + pad2(Math.floor(secs)%60)
|
||||
} else if(secs > 60){
|
||||
return pad2(Math.floor(secs/60)) + ":" + pad2(Math.floor(secs)%60)
|
||||
} else{
|
||||
return Math.floor(secs) + "s"
|
||||
}
|
||||
function formatTime(secs) {
|
||||
if(secs > 3600) return pad2(Math.floor(secs/60/60)) + ":" + pad2(Math.floor(secs/60)%60) + ":" + pad2(Math.floor(secs)%60)
|
||||
else if(secs > 60) return pad2(Math.floor(secs/60)) + ":" + pad2(Math.floor(secs)%60)
|
||||
else return Math.floor(secs) + "s"
|
||||
}
|
||||
|
||||
function setTitle(progress){
|
||||
function setTitle(progress) {
|
||||
var title = 'Stable Diffusion'
|
||||
|
||||
if(opts.show_progress_in_title && progress){
|
||||
title = '[' + progress.trim() + '] ' + title;
|
||||
}
|
||||
|
||||
if(document.title != title){
|
||||
document.title = title;
|
||||
}
|
||||
if(opts.show_progress_in_title && progress) title = '[' + progress.trim() + '] ' + title;
|
||||
if(document.title != title) document.title = title;
|
||||
}
|
||||
|
||||
|
||||
function randomId(){
|
||||
function randomId() {
|
||||
return "task(" + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7) + Math.random().toString(36).slice(2, 7)+")"
|
||||
}
|
||||
|
||||
// starts sending progress requests to "/internal/progress" uri, creating progressbar above progressbarContainer element and
|
||||
// preview inside gallery element. Cleans up all created stuff when the task is over and calls atEnd.
|
||||
// calls onProgress every time there is a progress update
|
||||
function requestProgress(id_task, progressbarContainer, gallery, atEnd, onProgress){
|
||||
function requestProgress(id_task, progressbarContainer, gallery, atEnd = null, onProgress = null, once = false) {
|
||||
var hasStarted = false
|
||||
var dateStart = new Date()
|
||||
var wasEverActive = false
|
||||
var prevProgress = null
|
||||
var parentProgressbar = progressbarContainer.parentNode
|
||||
var parentGallery = gallery ? gallery.parentNode : null
|
||||
|
||||
var divProgress = document.createElement('div')
|
||||
divProgress.className='progressDiv'
|
||||
divProgress.id = 'progressbar'
|
||||
divProgress.style.display = opts.show_progressbar ? "block" : "none"
|
||||
var divInner = document.createElement('div')
|
||||
divInner.className='progress'
|
||||
|
||||
divProgress.appendChild(divInner)
|
||||
parentProgressbar.insertBefore(divProgress, progressbarContainer)
|
||||
|
||||
if(parentGallery){
|
||||
localStorage.setItem('task', id_task);
|
||||
console.debug('task active:', id_task)
|
||||
if (parentGallery) {
|
||||
var livePreview = document.createElement('div')
|
||||
livePreview.className='livePreview'
|
||||
parentGallery.insertBefore(livePreview, gallery)
|
||||
}
|
||||
|
||||
var removeProgressBar = function(){
|
||||
var removeProgressBar = function() {
|
||||
console.debug('task end: ', id_task)
|
||||
localStorage.removeItem('task');
|
||||
setTitle("")
|
||||
parentProgressbar.removeChild(divProgress)
|
||||
if(parentGallery) parentGallery.removeChild(livePreview)
|
||||
if (divProgress) parentProgressbar.removeChild(divProgress)
|
||||
if (parentGallery) parentGallery.removeChild(livePreview)
|
||||
atEnd()
|
||||
}
|
||||
|
||||
var fun = function(id_task, id_live_preview){
|
||||
request("./internal/progress", {"id_task": id_task, "id_live_preview": id_live_preview}, function(res){
|
||||
if(res.completed){
|
||||
request("./internal/progress", {"id_task": id_task, "id_live_preview": id_live_preview}, function(res){
|
||||
var elapsedFromStart = (new Date() - dateStart) / 1000
|
||||
if (res.completed) {
|
||||
removeProgressBar()
|
||||
return
|
||||
}
|
||||
|
||||
var rect = progressbarContainer.getBoundingClientRect()
|
||||
|
||||
if(rect.width){
|
||||
divProgress.style.width = rect.width + "px";
|
||||
}
|
||||
|
||||
if (rect.width) divProgress.style.width = rect.width + "px";
|
||||
progressText = ""
|
||||
|
||||
divInner.style.width = ((res.progress || 0) * 100.0) + '%'
|
||||
divInner.style.background = res.progress ? "" : "transparent"
|
||||
|
||||
if(res.progress > 0){
|
||||
progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%'
|
||||
}
|
||||
|
||||
if(res.eta){
|
||||
progressText += " ETA: " + formatTime(res.eta)
|
||||
}
|
||||
|
||||
|
||||
if (res.progress > 0) progressText = ((res.progress || 0) * 100.0).toFixed(0) + '%'
|
||||
if (res.eta) progressText += " ETA: " + formatTime(res.eta)
|
||||
setTitle(progressText)
|
||||
|
||||
if(res.textinfo && res.textinfo.indexOf("\n") == -1){
|
||||
progressText = res.textinfo + " " + progressText
|
||||
}
|
||||
|
||||
if (res.textinfo && res.textinfo.indexOf("\n") == -1) progressText = res.textinfo + " " + progressText
|
||||
divInner.textContent = progressText
|
||||
|
||||
var elapsedFromStart = (new Date() - dateStart) / 1000
|
||||
|
||||
if(res.active) wasEverActive = true;
|
||||
|
||||
if(! res.active && wasEverActive){
|
||||
hasStarted |= res.active
|
||||
if (!res.active && (hasStarted || once)) {
|
||||
removeProgressBar()
|
||||
return
|
||||
}
|
||||
|
||||
if(elapsedFromStart > 5 && !res.queued && !res.active){
|
||||
if (res.completed) {
|
||||
removeProgressBar()
|
||||
return
|
||||
}
|
||||
if (elapsedFromStart > 10 && !res.queued && res.progress == prevProgress) {
|
||||
removeProgressBar()
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
if(res.live_preview && gallery){
|
||||
if (res.live_preview && gallery) {
|
||||
var rect = gallery.getBoundingClientRect()
|
||||
if(rect.width){
|
||||
livePreview.style.width = rect.width + "px"
|
||||
livePreview.style.height = rect.height + "px"
|
||||
}
|
||||
|
||||
var img = new Image();
|
||||
img.onload = function() {
|
||||
livePreview.appendChild(img)
|
||||
if(livePreview.childElementCount > 2){
|
||||
livePreview.removeChild(livePreview.firstElementChild)
|
||||
}
|
||||
if (livePreview.childElementCount > 2) livePreview.removeChild(livePreview.firstElementChild)
|
||||
}
|
||||
img.src = res.live_preview;
|
||||
}
|
||||
|
||||
|
||||
if(onProgress){
|
||||
onProgress(res)
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
fun(id_task, res.id_live_preview);
|
||||
}, opts.live_preview_refresh_period || 500)
|
||||
}, function(){
|
||||
if (onProgress) onProgress(res)
|
||||
setTimeout(() => fun(id_task, res.id_live_preview), opts.live_preview_refresh_period || 250)
|
||||
}, function() {
|
||||
removeProgressBar()
|
||||
})
|
||||
}
|
||||
|
||||
fun(id_task, 0)
|
||||
}
|
||||
|
||||
Binary file not shown.
@@ -3,15 +3,10 @@
|
||||
|
||||
function start_training_textual_inversion(){
|
||||
gradioApp().querySelector('#ti_error').innerHTML=''
|
||||
|
||||
var id = randomId()
|
||||
requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), function(){}, function(progress){
|
||||
gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo
|
||||
})
|
||||
|
||||
const onProgress = (progress) => gradioApp().getElementById('ti_progress').innerHTML = progress.textinfo;
|
||||
requestProgress(id, gradioApp().getElementById('ti_output'), gradioApp().getElementById('ti_gallery'), null, onProgress, false)
|
||||
var res = args_to_array(arguments)
|
||||
|
||||
res[0] = id
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
+77
-97
@@ -2,18 +2,14 @@
|
||||
|
||||
function set_theme(theme){
|
||||
gradioURL = window.location.href
|
||||
if (!gradioURL.includes('?__theme=')) {
|
||||
window.location.replace(gradioURL + '?__theme=' + theme);
|
||||
}
|
||||
if (!gradioURL.includes('?__theme=')) window.location.replace(gradioURL + '?__theme=' + theme);
|
||||
}
|
||||
|
||||
function all_gallery_buttons() {
|
||||
var allGalleryButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnails > .thumbnail-item.thumbnail-small');
|
||||
var visibleGalleryButtons = [];
|
||||
allGalleryButtons.forEach(function(elem) {
|
||||
if (elem.parentElement.offsetParent) {
|
||||
visibleGalleryButtons.push(elem);
|
||||
}
|
||||
if (elem.parentElement.offsetParent) visibleGalleryButtons.push(elem);
|
||||
})
|
||||
return visibleGalleryButtons;
|
||||
}
|
||||
@@ -22,9 +18,7 @@ function selected_gallery_button() {
|
||||
var allCurrentButtons = gradioApp().querySelectorAll('[style="display: block;"].tabitem div[id$=_gallery].gradio-gallery .thumbnail-item.thumbnail-small.selected');
|
||||
var visibleCurrentButton = null;
|
||||
allCurrentButtons.forEach(function(elem) {
|
||||
if (elem.parentElement.offsetParent) {
|
||||
visibleCurrentButton = elem;
|
||||
}
|
||||
if (elem.parentElement.offsetParent) visibleCurrentButton = elem;
|
||||
})
|
||||
return visibleCurrentButton;
|
||||
}
|
||||
@@ -32,42 +26,27 @@ function selected_gallery_button() {
|
||||
function selected_gallery_index(){
|
||||
var buttons = all_gallery_buttons();
|
||||
var button = selected_gallery_button();
|
||||
|
||||
var result = -1
|
||||
buttons.forEach(function(v, i){ if(v==button) { result = i } })
|
||||
|
||||
return result
|
||||
}
|
||||
|
||||
function extract_image_from_gallery(gallery){
|
||||
if (gallery.length == 0){
|
||||
return [null];
|
||||
}
|
||||
if (gallery.length == 1){
|
||||
return [gallery[0]];
|
||||
}
|
||||
|
||||
if (gallery.length == 0) return [null];
|
||||
if (gallery.length == 1) return [gallery[0]];
|
||||
index = selected_gallery_index()
|
||||
|
||||
if (index < 0 || index >= gallery.length){
|
||||
// Use the first image in the gallery as the default
|
||||
index = 0;
|
||||
}
|
||||
|
||||
if (index < 0 || index >= gallery.length) index = 0;
|
||||
return [gallery[index]];
|
||||
}
|
||||
|
||||
function args_to_array(args){
|
||||
res = []
|
||||
for(var i=0;i<args.length;i++){
|
||||
res.push(args[i])
|
||||
}
|
||||
for(var i=0;i<args.length;i++) res.push(args[i])
|
||||
return res
|
||||
}
|
||||
|
||||
function switch_to_txt2img(){
|
||||
gradioApp().querySelector('#tabs').querySelectorAll('button')[0].click();
|
||||
|
||||
return args_to_array(arguments);
|
||||
}
|
||||
|
||||
@@ -75,6 +54,7 @@ function switch_to_img2img_tab(no){
|
||||
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
|
||||
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[no].click();
|
||||
}
|
||||
|
||||
function switch_to_img2img(){
|
||||
switch_to_img2img_tab(0);
|
||||
return args_to_array(arguments);
|
||||
@@ -98,35 +78,26 @@ function switch_to_inpaint_sketch(){
|
||||
function switch_to_inpaint(){
|
||||
gradioApp().querySelector('#tabs').querySelectorAll('button')[1].click();
|
||||
gradioApp().getElementById('mode_img2img').querySelectorAll('button')[2].click();
|
||||
|
||||
return args_to_array(arguments);
|
||||
}
|
||||
|
||||
function switch_to_extras(){
|
||||
gradioApp().querySelector('#tabs').querySelectorAll('button')[2].click();
|
||||
|
||||
return args_to_array(arguments);
|
||||
}
|
||||
|
||||
function get_tab_index(tabId){
|
||||
var res = 0
|
||||
|
||||
gradioApp().getElementById(tabId).querySelector('div').querySelectorAll('button').forEach(function(button, i){
|
||||
if(button.className.indexOf('selected') != -1)
|
||||
res = i
|
||||
if(button.className.indexOf('selected') != -1) res = i
|
||||
})
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
function create_tab_index_args(tabId, args){
|
||||
var res = []
|
||||
for(var i=0; i<args.length; i++){
|
||||
res.push(args[i])
|
||||
}
|
||||
|
||||
for(var i=0; i<args.length; i++) res.push(args[i])
|
||||
res[0] = get_tab_index(tabId)
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
@@ -139,70 +110,53 @@ function get_img2img_tab_index() {
|
||||
|
||||
function create_submit_args(args){
|
||||
res = []
|
||||
for(var i=0;i<args.length;i++){
|
||||
res.push(args[i])
|
||||
}
|
||||
|
||||
for(var i=0;i<args.length;i++) res.push(args[i])
|
||||
// As it is currently, txt2img and img2img send back the previous output args (txt2img_gallery, generation_info, html_info) whenever you generate a new image.
|
||||
// This can lead to uploading a huge gallery of previously generated images, which leads to an unnecessary delay between submitting and beginning to generate.
|
||||
// I don't know why gradio is sending outputs along with inputs, but we can prevent sending the image gallery here, which seems to be an issue for some.
|
||||
// If gradio at some point stops sending outputs, this may break something
|
||||
if(Array.isArray(res[res.length - 3])){
|
||||
res[res.length - 3] = null
|
||||
}
|
||||
|
||||
if(Array.isArray(res[res.length - 3])) res[res.length - 3] = null
|
||||
return res
|
||||
}
|
||||
|
||||
function showSubmitButtons(tabname, show){
|
||||
gradioApp().getElementById(tabname+'_interrupt').style.display = show ? "none" : "block"
|
||||
gradioApp().getElementById(tabname+'_skip').style.display = show ? "none" : "block"
|
||||
// gradioApp().getElementById(tabname+'_interrupt').style.display = "block"
|
||||
// gradioApp().getElementById(tabname+'_skip').style.display = "block"
|
||||
}
|
||||
|
||||
function submit(){
|
||||
rememberGallerySelection('txt2img_gallery')
|
||||
showSubmitButtons('txt2img', false)
|
||||
|
||||
var id = randomId()
|
||||
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), function(){
|
||||
showSubmitButtons('txt2img', true)
|
||||
|
||||
})
|
||||
|
||||
const id = randomId()
|
||||
const atEnd = () => showSubmitButtons('txt2img', true)
|
||||
requestProgress(id, gradioApp().getElementById('txt2img_gallery_container'), gradioApp().getElementById('txt2img_gallery'), atEnd)
|
||||
var res = create_submit_args(arguments)
|
||||
|
||||
res[0] = id
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
function submit_img2img(){
|
||||
rememberGallerySelection('img2img_gallery')
|
||||
showSubmitButtons('img2img', false)
|
||||
|
||||
var id = randomId()
|
||||
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), function(){
|
||||
showSubmitButtons('img2img', true)
|
||||
})
|
||||
|
||||
const id = randomId()
|
||||
const atEnd = () => showSubmitButtons('img2img', true)
|
||||
requestProgress(id, gradioApp().getElementById('img2img_gallery_container'), gradioApp().getElementById('img2img_gallery'), atEnd)
|
||||
var res = create_submit_args(arguments)
|
||||
|
||||
res[0] = id
|
||||
res[1] = get_tab_index('mode_img2img')
|
||||
|
||||
return res
|
||||
}
|
||||
|
||||
function modelmerger(){
|
||||
var id = randomId()
|
||||
requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null, function(){})
|
||||
|
||||
const id = randomId()
|
||||
requestProgress(id, gradioApp().getElementById('modelmerger_results_panel'), null)
|
||||
var res = create_submit_args(arguments)
|
||||
res[0] = id
|
||||
return res
|
||||
}
|
||||
|
||||
|
||||
function ask_for_style_name(_, prompt_text, negative_prompt_text) {
|
||||
name_ = prompt('Style name:')
|
||||
return [name_, prompt_text, negative_prompt_text]
|
||||
@@ -213,11 +167,9 @@ function confirm_clear_prompt(prompt, negative_prompt) {
|
||||
prompt = ""
|
||||
negative_prompt = ""
|
||||
}
|
||||
|
||||
return [prompt, negative_prompt]
|
||||
}
|
||||
|
||||
|
||||
promptTokecountUpdateFuncs = {}
|
||||
|
||||
function recalculatePromptTokens(name){
|
||||
@@ -238,29 +190,21 @@ function recalculate_prompts_img2img(){
|
||||
return args_to_array(arguments);
|
||||
}
|
||||
|
||||
|
||||
opts = {}
|
||||
onUiUpdate(function(){
|
||||
if(Object.keys(opts).length != 0) return;
|
||||
|
||||
json_elem = gradioApp().getElementById('settings_json')
|
||||
if(json_elem == null) return;
|
||||
|
||||
if(Object.keys(opts).length != 0) return;
|
||||
json_elem = gradioApp().getElementById('settings_json')
|
||||
if(json_elem == null) return;
|
||||
var textarea = json_elem.querySelector('textarea')
|
||||
var jsdata = textarea.value
|
||||
opts = JSON.parse(jsdata)
|
||||
executeCallbacks(optionsChangedCallbacks);
|
||||
|
||||
Object.defineProperty(textarea, 'value', {
|
||||
set: function(newValue) {
|
||||
var valueProp = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, 'value');
|
||||
var oldValue = valueProp.get.call(textarea);
|
||||
valueProp.set.call(textarea, newValue);
|
||||
|
||||
if (oldValue != newValue) {
|
||||
opts = JSON.parse(textarea.value)
|
||||
}
|
||||
|
||||
if (oldValue != newValue) opts = JSON.parse(textarea.value)
|
||||
executeCallbacks(optionsChangedCallbacks);
|
||||
},
|
||||
get: function() {
|
||||
@@ -268,30 +212,21 @@ onUiUpdate(function(){
|
||||
return valueProp.get.call(textarea);
|
||||
}
|
||||
});
|
||||
|
||||
json_elem.parentElement.style.display="none"
|
||||
|
||||
function registerTextarea(id, id_counter, id_button){
|
||||
var prompt = gradioApp().getElementById(id)
|
||||
var counter = gradioApp().getElementById(id_counter)
|
||||
var textarea = gradioApp().querySelector("#" + id + " > label > textarea");
|
||||
|
||||
if(counter.parentElement == prompt.parentElement){
|
||||
return
|
||||
}
|
||||
|
||||
if(counter.parentElement == prompt.parentElement) return
|
||||
prompt.parentElement.insertBefore(counter, prompt)
|
||||
prompt.parentElement.style.position = "relative"
|
||||
|
||||
promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }
|
||||
textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
|
||||
promptTokecountUpdateFuncs[id] = function(){ update_token_counter(id_button); }
|
||||
textarea.addEventListener("input", promptTokecountUpdateFuncs[id]);
|
||||
}
|
||||
|
||||
registerTextarea('txt2img_prompt', 'txt2img_token_counter', 'txt2img_token_button')
|
||||
registerTextarea('txt2img_neg_prompt', 'txt2img_negative_token_counter', 'txt2img_negative_token_button')
|
||||
registerTextarea('img2img_prompt', 'img2img_token_counter', 'img2img_token_button')
|
||||
registerTextarea('img2img_neg_prompt', 'img2img_negative_token_counter', 'img2img_negative_token_button')
|
||||
|
||||
show_all_pages = gradioApp().getElementById('settings_show_all_pages')
|
||||
settings_tabs = gradioApp().querySelector('#settings div')
|
||||
if(show_all_pages && settings_tabs){
|
||||
@@ -334,6 +269,10 @@ function update_img2img_tokens(...args) {
|
||||
return args;
|
||||
}
|
||||
|
||||
function getTranslation(...args) {
|
||||
return null
|
||||
}
|
||||
|
||||
function update_token_counter(button_id) {
|
||||
if (token_timeouts[button_id])
|
||||
clearTimeout(token_timeouts[button_id]);
|
||||
@@ -342,8 +281,7 @@ function update_token_counter(button_id) {
|
||||
|
||||
function restart_reload(){
|
||||
document.body.innerHTML='<h1 style="font-family:monospace;margin-top:20%;color:lightgray;text-align:center;">Reloading...</h1>';
|
||||
setTimeout(function(){location.reload()},2000)
|
||||
|
||||
setTimeout(function(){location.reload()},8000)
|
||||
return []
|
||||
}
|
||||
|
||||
@@ -355,9 +293,51 @@ function updateInput(target){
|
||||
target.dispatchEvent(e);
|
||||
}
|
||||
|
||||
|
||||
var desiredCheckpointName = null;
|
||||
function selectCheckpoint(name){
|
||||
desiredCheckpointName = name;
|
||||
gradioApp().getElementById('change_checkpoint').click()
|
||||
}
|
||||
|
||||
function create_theme_element() {
|
||||
el = document.createElement('img');
|
||||
el.id = 'theme-preview';
|
||||
el.className = 'theme-preview';
|
||||
el.onclick = () => el.style.display = 'none';
|
||||
document.body.appendChild(el);
|
||||
return el;
|
||||
}
|
||||
|
||||
function preview_theme() {
|
||||
const name = gradioApp().getElementById('setting_gradio_theme').querySelectorAll('span')[1].innerText; // ugly but we want current value without the need to set apply
|
||||
if (name === 'black-orange' || name.startsWith('gradio/')) {
|
||||
el = document.getElementById('theme-preview') || create_theme_element();
|
||||
el.style.display = el.style.display === 'block' ? 'none' : 'block';
|
||||
if (name === 'black-orange') el.src = '/file=javascript/black-orange.jpg';
|
||||
else el.src = `/file=javascript/${name.replace('/', '-')}.jpg`;
|
||||
} else {
|
||||
fetch('/file=javascript/themes.json')
|
||||
.then((r) => r.json())
|
||||
.then(themes => {
|
||||
theme = themes.find((t)=> t.id === name);
|
||||
window.open(theme.subdomain, '_blank');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function reconnect_ui() {
|
||||
const el1 = gradioApp().getElementById('txt2img_gallery_container')
|
||||
const el2 = gradioApp().getElementById('txt2img_gallery')
|
||||
const task_id = localStorage.getItem('task')
|
||||
if (!el1 || !el2) return
|
||||
else clearInterval(start_check)
|
||||
if (task_id) {
|
||||
console.debug('task check:', task_id)
|
||||
rememberGallerySelection('txt2img_gallery')
|
||||
showSubmitButtons('txt2img', false)
|
||||
const atEnd = () => showSubmitButtons('txt2img', true)
|
||||
requestProgress(task_id, el1, el2, atEnd, null, true)
|
||||
}
|
||||
}
|
||||
|
||||
var start_check = setInterval(reconnect_ui, 50)
|
||||
|
||||
Reference in New Issue
Block a user