github/AMD-SHARK-Studio
1
1
Fork 0
mirror of https://github.com/nod-ai/AMD-SHARK-Studio.git synced 2026-04-03 03:00:17 -04:00
Code Issues Packages Projects Releases Wiki Activity

(Shark 1.0) UI: Upgrade to gradio 4.12.0 and fix breakage (#2051)

Browse Source 
* (Shark 1.0) UI: Upgrade to gradio 4.12.0 and fix breakage

* Upgrade Shark 1.0 to gradio 4.12.0
* Add javascript workaround for gradio currently ignoring @media rules in custom CSS. This fixes UI not showing at full width on desktop (>1536px width).

* (Shark 1.0) UI: Re-enable gallery download buttons

* Re-enable gallery download buttons, as this is now working again in Gradio 4.12
This commit is contained in:
Stefan Kapusniak
2024-01-04 01:00:08 +00:00
committed by GitHub
parent 8d9b5b3afa
commit 3887d83f5d
11 changed files with 83 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/stable_diffusion/shark_studio_imports.py
View File

@@ -61,6 +61,7 @@ datas += [
("src/utils/resources/opt_flags.json", "resources"),
("src/utils/resources/base_model.json", "resources"),
("web/ui/css/*", "ui/css"),
("web/ui/js/*", "ui/js"),
("web/ui/logos/*", "logos"),
(
"../language_models/src/pipelines/minigpt4_utils/configs/*",

6
apps/stable_diffusion/web/index.py
View File

@@ -237,9 +237,13 @@ if __name__ == "__main__":
)
dark_theme = resource_path("ui/css/sd_dark_theme.css")
gradio_workarounds = resource_path("ui/js/sd_gradio_workarounds.js")
with gr.Blocks(
css=dark_theme, analytics_enabled=False, title="SHARK AI Studio"
css=dark_theme,
js=gradio_workarounds,
analytics_enabled=False,
title="SHARK AI Studio",
) as sd_web:
with gr.Tabs() as tabs:
# NOTE: If adding, removing, or re-ordering tabs, make sure that they

29
apps/stable_diffusion/web/ui/css/sd_dark_theme.css
View File

@@ -117,7 +117,7 @@ body {
height: 100% !important;
}
/* display in full width for desktop devices */
/* display in full width for desktop devices, but see below */
@media (min-width: 1536px)
{
.gradio-container {
@@ -125,6 +125,15 @@ body {
}
}
/* media rules in custom css are don't appear to be applied in
gradio versions > 4.7, so we have to define a class which
we will manually need add and remove using javascript.
Remove this once this fixed in gradio.
*/
.gradio-container-size-full {
max-width: var(--size-full) !important;
}
.gradio-container .contain {
padding: 0 var(--size-4) !important;
}
@@ -182,6 +191,8 @@ footer {
aspect-ratio: unset;
max-height: calc(55vh - (2 * var(--spacing-lg)));
}
/* fix width and height of gallery items when on very large desktop screens, but see below */
@media (min-width: 1921px) {
/* Force a 768px_height + 4px_margin_height + navbar_height for the gallery */
#gallery .grid-wrap, #gallery .preview{
@@ -193,6 +204,20 @@ footer {
max-height: 770px !important;
}
}
/* media rules in custom css are don't appear to be applied in
gradio versions > 4.7, so we have to define classes which
we will manually need add and remove using javascript.
Remove this once this fixed in gradio.
*/
.gallery-force-height768 .grid-wrap, .gallery-force-height768 .preview {
min-height: calc(768px + 4px + var(--size-14)) !important;
max-height: calc(768px + 4px + var(--size-14)) !important;
}
.gallery-limit-height768 .thumbnail-item.thumbnail-lg {
max-height: 770px !important;
}
/* Don't upscale when viewing in solo image mode */
#gallery .preview img {
object-fit: scale-down;
@@ -285,7 +310,7 @@ footer {
/* output gallery tab */
.output_parameters_dataframe table.table {
/* works around a gradio bug that always shows scrollbars */
/* works around a gradio bug that always shows scrollbars */
overflow: clip auto;
}

2
apps/stable_diffusion/web/ui/img2img_ui.py
View File

@@ -959,8 +959,6 @@ with gr.Blocks(title="Image-to-Image") as img2img_web:
elem_id="gallery",
columns=2,
object_fit="contain",
# TODO: Re-enable download when fixed in Gradio
show_download_button=False,
)
std_output = gr.Textbox(
value=f"{i2i_model_info}\n"

49
apps/stable_diffusion/web/ui/js/sd_gradio_workarounds.js Normal file
View File

@@ -0,0 +1,49 @@
// workaround gradio after 4.7, not applying any @media rules form the custom .css file
() => {
console.log(`innerWidth: ${window.innerWidth}` )
// 1536px rules
const mediaQuery1536 = window.matchMedia('(min-width: 1536px)')
function handleWidth1536(event) {
// display in full width for desktop devices
document.querySelectorAll(".gradio-container")
.forEach( (node) => {
if (event.matches) {
node.classList.add("gradio-container-size-full");
} else {
node.classList.remove("gradio-container-size-full")
}
});
}
mediaQuery1536.addEventListener("change", handleWidth1536);
mediaQuery1536.dispatchEvent(new MediaQueryListEvent("change", {matches: window.innerWidth >= 1536}));
// 1921px rules
const mediaQuery1921 = window.matchMedia('(min-width: 1921px)')
function handleWidth1921(event) {
/* Force a 768px_height + 4px_margin_height + navbar_height for the gallery */
/* Limit height to 768px_height + 2px_margin_height for the thumbnails */
document.querySelectorAll("#gallery")
.forEach( (node) => {
if (event.matches) {
node.classList.add("gallery-force-height768");
node.classList.add("gallery-limit-height768");
} else {
node.classList.remove("gallery-force-height768");
node.classList.remove("gallery-limit-height768");
}
});
}
mediaQuery1921.addEventListener("change", handleWidth1921);
mediaQuery1921.dispatchEvent(new MediaQueryListEvent("change", {matches: window.innerWidth >= 1921}));
}

2
apps/stable_diffusion/web/ui/outpaint_ui.py
View File

@@ -470,8 +470,6 @@ with gr.Blocks(title="Outpainting") as outpaint_web:
elem_id="gallery",
columns=[2],
object_fit="contain",
# TODO: Re-enable download when fixed in Gradio
show_download_button=False,
)
std_output = gr.Textbox(
value=f"{outpaint_model_info}\n"

2
apps/stable_diffusion/web/ui/outputgallery_ui.py
View File

@@ -92,8 +92,6 @@ with gr.Blocks() as outputgallery_web:
visible=False,
show_label=True,
columns=4,
# TODO: Re-enable download when fixed in Gradio
show_download_button=False,
)
with gr.Column(scale=4):

2
apps/stable_diffusion/web/ui/txt2img_sdxl_ui.py
View File

@@ -479,8 +479,6 @@ with gr.Blocks(title="Text-to-Image-SDXL", theme=theme) as txt2img_sdxl_web:
elem_id="gallery",
columns=[2],
object_fit="scale_down",
# TODO: Re-enable download when fixed in Gradio
show_download_button=False,
)
std_output = gr.Textbox(
value=f"{t2i_sdxl_model_info}\n"

2
apps/stable_diffusion/web/ui/txt2img_ui.py
View File

@@ -692,8 +692,6 @@ with gr.Blocks(title="Text-to-Image", css=dark_theme) as txt2img_web:
elem_id="gallery",
columns=[2],
object_fit="contain",
# TODO: Re-enable download when fixed in Gradio
show_download_button=False,
)
std_output = gr.Textbox(
value=f"{t2i_model_info}\n"

2
apps/stable_diffusion/web/ui/upscaler_ui.py
View File

@@ -470,8 +470,6 @@ with gr.Blocks(title="Upscaler") as upscaler_web:
elem_id="gallery",
columns=[2],
object_fit="contain",
# TODO: Re-enable download when fixed in Gradio
show_download_button=False,
)
std_output = gr.Textbox(
value=f"{upscaler_model_info}\n"

2
requirements.txt
View File

@@ -26,7 +26,7 @@ diffusers
accelerate
scipy
ftfy
gradio==4.8.0
gradio==4.12.0
altair
omegaconf
# 0.3.2 doesn't have binaries for arm64