Add themes

app.py

@@ -3,6 +3,7 @@ import datetime
 from openai import OpenAI
 import gradio as gr
 
+from theme import apriel
 from utils import COMMUNITY_POSTFIX_URL, get_model_config, log_message, check_format, models_config
 
 MODEL_TEMPERATURE = 0.8
@@ -154,7 +155,13 @@ def chat_fn(message, history):
 title = None
 description = None
 
-with gr.Blocks(theme=gr.themes.Default(primary_hue="green")) as demo:
+# theme = gr.themes.Default(primary_hue="green")
+# theme = gr.themes.Soft(primary_hue="gray", secondary_hue="slate", neutral_hue="slate",
+#   text_size=gr.themes.sizes.text_lg, font=[gr.themes.GoogleFont("Inconsolata"), "Arial", "sans-serif"])
+# theme = gr.Theme.from_hub("earneleh/paris")
+theme = apriel
+
+with gr.Blocks(theme=theme) as demo:
     gr.HTML("""
     <style>
         .html-container:has(.css-styles) {

theme.py

@@ -0,0 +1,91 @@
+# from __future__ import annotations
+from typing import Iterable
+import gradio as gr
+from gradio.themes import Soft
+# from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+import time
+
+
+class Apriel(Soft):
+    def __init__(
+            self,
+            *,
+            primary_hue: colors.Color | str = colors.gray,
+            secondary_hue: colors.Color | str = colors.slate,
+            neutral_hue: colors.Color | str = colors.gray,
+            # spacing_size: sizes.Size | str = sizes.spacing_md,
+            # radius_size: sizes.Size | str = sizes.radius_md,
+            text_size: sizes.Size | str = sizes.text_md,
+            font: fonts.Font
+                  | str
+                  | Iterable[fonts.Font | str] = (
+                    fonts.GoogleFont("Inconsolata"),
+                    "Arial",
+                    "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="linear-gradient(135deg, *primary_200, *secondary_300)",
+            body_background_fill_dark="linear-gradient(135deg, *primary_900, *secondary_800)",
+            button_primary_background_fill="linear-gradient(90deg, *primary_400, *secondary_600)",
+            button_primary_background_fill_hover="linear-gradient(90deg, *primary_200, *secondary_300)",
+            button_primary_text_color="white",
+            button_primary_text_color_hover="black",
+            button_primary_background_fill_dark="linear-gradient(90deg, *primary_500, *secondary_600)",
+
+            button_secondary_text_color="black",
+            button_secondary_text_color_hover="white",
+            button_secondary_background_fill="linear-gradient(90deg, *primary_200, *secondary_300)",
+            button_secondary_background_fill_hover="linear-gradient(90deg, *secondary_400, *secondary_500)",
+            button_secondary_background_fill_dark="linear-gradient(90deg, *secondary_500, *secondary_600)",
+
+            slider_color="*secondary_300",
+            slider_color_dark="*secondary_600",
+            block_title_text_weight="600",
+            block_border_width="3px",
+            block_shadow="*shadow_drop_lg",
+            button_primary_shadow="*shadow_drop_lg",
+            button_large_padding="11px",
+
+            color_accent_soft="*primary_100",
+        )
+
+
+apriel = Apriel()
+
+with gr.Blocks(theme=apriel) 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)
+
+if __name__ == "__main__":
+    demo.launch()