File size: 3,710 Bytes
071a231 daece9c 0fe2df3 837f7f4 0fe2df3 3b59b23 0fe2df3 5ad721c 1801641 0f6bdf0 1801641 0fe2df3 837f7f4 1801641 0fe2df3 635b596 0f6bdf0 3b59b23 0f6bdf0 635b596 0f6bdf0 635b596 389e334 635b596 3b59b23 389e334 0fe2df3 635b596 837f7f4 aa37d2e 0f6bdf0 aa37d2e ac8140f aa37d2e fc3fde7 aa37d2e 0e2c0cc |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
import os
from typing import Iterable
import gradio as gr
from gradio.themes.base import Base
from gradio.themes.utils import colors, fonts, sizes
import time
class Frosted(Base):
def __init__(
self,
*,
primary_hue: colors.Color | str = colors.emerald,
secondary_hue: colors.Color | str = colors.blue,
neutral_hue: colors.Color | str = colors.blue,
spacing_size: sizes.Size | str = sizes.spacing_md,
radius_size: sizes.Size | str = sizes.radius_md,
text_size: sizes.Size | str = sizes.text_lg,
font: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("Quicksand"),
"ui-sans-serif",
"sans-serif",
),
font_mono: fonts.Font
| str
| Iterable[fonts.Font | str] = (
fonts.GoogleFont("IBM Plex Mono"),
"ui-monospace",
"monospace",
),
):
super().__init__(
primary_hue=primary_hue,
secondary_hue=secondary_hue,
neutral_hue=neutral_hue,
spacing_size=spacing_size,
radius_size=radius_size,
text_size=text_size,
font=font,
font_mono=font_mono,
)
super().set(
body_background_fill="rgba(255, 255, 255, 0.8)",
body_background_fill_dark="rgba(0, 0, 0, 0.8)",
button_primary_background_fill="rgba(255, 255, 255, 0.6)",
button_primary_background_fill_hover="rgba(255, 255, 255, 0.8)",
button_primary_text_color="black",
button_primary_background_fill_dark="rgba(0, 0, 0, 0.6)",
slider_color="rgba(0, 0, 0, 0.3)",
slider_color_dark="rgba(255, 255, 255, 0.3)",
block_title_text_weight="600",
block_border_width="1px",
block_shadow="0 4px 30px rgba(0, 0, 0, 0.1)",
button_shadow="0 4px 30px rgba(0, 0, 0, 0.1)",
button_large_padding="32px",
)
def apply_custom_css(self):
custom_css = """
.gradio-container {
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.3);
background-image: url('static/back.png');
background-size: cover;
color: black;
}
.gr-button {
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.4);
color: black;
}
"""
# Create the directory if it doesn't exist
os.makedirs("static", exist_ok=True)
# Write the CSS to the file
with open("static/custom.css", "w") as f:
f.write(custom_css)
# Ensure the CSS file is included in your Gradio app
# This might involve serving the file and referencing it in your Gradio interface
# Create an instance of the Frosted theme and apply the custom CSS
frosted = Frosted()
frosted.apply_custom_css()
with gr.Blocks(theme=frosted, css_file="static/custom.css") as demo:
textbox = gr.Textbox(label="Name")
slider = gr.Slider(label="Count", minimum=0, maximum=100, step=1)
with gr.Row():
button = gr.Button("Submit", variant="primary")
clear = gr.Button("Clear")
output = gr.Textbox(label="Output")
def repeat(name, count):
time.sleep(3)
return name * count
button.click(repeat, [textbox, slider], output)
demo.launch() |