Create app.py

app.py

@@ -0,0 +1,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()