Update app.py

app.py

@@ -7,6 +7,35 @@ import base64
 import os
 from PIL import Image
 from io import BytesIO
+from gradio.themes.utils.theme_dropdown import create_theme_dropdown
+
+dropdown, js = create_theme_dropdown()
+
+with gr.Blocks(theme='xiaobaiyuan/theme_demo') as demo:
+    with gr.Row().style(equal_height=True):
+        with gr.Column(scale=10):
+            gr.Markdown(
+                """
+                # Theme preview: `theme_demo`
+                To use this theme, set `theme='xiaobaiyuan/theme_demo'` in `gr.Blocks()` or `gr.Interface()`.
+                You can append an `@` and a semantic version expression, e.g. @>=1.0.0,<2.0.0 to pin to a given version
+                of this theme.
+                """
+            )
+        with gr.Column(scale=3):
+            with gr.Box():
+                dropdown.render()
+                toggle_dark = gr.Button(value="Toggle Dark").style(full_width=True)
+
+    dropdown.change(None, dropdown, None, _js=js)
+    toggle_dark.click(
+        None,
+        _js="""
+        () => {
+            document.body.classList.toggle('dark');
+        }
+        """,
+    )
 
 class Prodia:
     def __init__(self, api_key, base=None):
@@ -100,22 +129,8 @@ css = """
 }
 """
 
-with gr.Blocks(theme='xiaobaiyuan/theme_demo') as demo:
-
-        with gr.Column(scale=3):
-            with gr.Box():
-                dropdown.render()
-                toggle_dark = gr.Button(value="Toggle Dark").style(full_width=True)
+with gr.Blocks(CSS=CSS) as demo:
 
-    dropdown.change(None, dropdown, None, _js=js)
-    toggle_dark.click(
-        None,
-        _js="""
-        () => {
-            document.body.classList.toggle('dark');
-        }
-        """,
-    )
 
     with gr.Row():
         with gr.Column(scale=6):