File size: 3,955 Bytes
827e64d |
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 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 |
import gradio as gr
import json
def get_theme_css(theme):
themes = {
"light": {
"background": "#ffffff",
"text": "#000000",
"accent": "#2196f3"
},
"dark": {
"background": "#1a1a1a",
"text": "#ffffff",
"accent": "#64b5f6"
},
"sepia": {
"background": "#f4ecd8",
"text": "#5c4b37",
"accent": "#8b4513"
}
}
return themes.get(theme, themes["light"])
def get_font_size(font_size):
font_sizes = {
"small": "14px",
"medium": "16px",
"large": "18px"
}
return font_sizes.get(font_size, "16px")
with gr.Blocks() as demo:
# Store theme preference and custom settings in browser state
browser_state = gr.BrowserState({ #"user_preferences":
"theme": "light",
"font_size": "medium",})
with gr.Row():
gr.Markdown("# Theme Customization Demo")
with gr.Row():
theme_dropdown = gr.Dropdown(
choices=["light", "dark", "sepia"],
value="light",
label="Select Theme"
)
font_size = gr.Radio(
choices=["small", "medium", "large"],
value="medium",
label="Font Size"
)
preview = gr.HTML()
def update_preview(theme, font_size,):
theme_css = get_theme_css(theme)
font_size = get_font_size(font_size)
# Create a preview of the selected settings
preview_html = f"""
<div style="
background-color: {theme_css['background']};
color: {theme_css['text']};
padding: 20px;
border-radius: 8px;
font-size: {font_size};
display: grid;
gap: 20px;
">
<div>
<h2 style="color: {theme_css['accent']}">Preview Content</h2>
<p>This is how your content will look with the selected theme and settings.</p>
<button style="
background-color: {theme_css['accent']};
color: {theme_css['background']};
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
">Sample Button</button>
</div>
</div>
"""
return preview_html
def save_preferences(theme, font_size, ):
return {
"theme": theme,
"font_size": font_size,
}
def load_preferences(saved_prefs):
if saved_prefs is None:
saved_prefs = {
"theme": "light",
"font_size": "medium",
}
return (
saved_prefs["theme"],
saved_prefs["font_size"],
update_preview(
saved_prefs["theme"],
saved_prefs["font_size"],
)
)
# Update preview when any setting changes
#for input_component in [theme_dropdown, font_size, ]:
theme_dropdown.change(
fn=update_preview,
inputs=[theme_dropdown, font_size, ],
outputs=[preview]
)
font_size.change(
fn=update_preview,
inputs=[theme_dropdown, font_size, ],
outputs=[preview]
)
# Save to browser state when any setting changes
theme_dropdown.change(
fn=save_preferences,
inputs=[theme_dropdown, font_size, ],
outputs=[browser_state]
)
font_size.change(
fn=save_preferences,
inputs=[theme_dropdown, font_size, ],
outputs=[browser_state]
)
# Load saved preferences when the page loads
demo.load(
fn=load_preferences,
inputs=[browser_state],
outputs=[theme_dropdown, font_size, preview]
)
demo.launch() |