grahamwhiteuk commited on
Commit
ef3faba
·
1 Parent(s): 0712e0d

feat: research monochrome theme

Browse files

Signed-off-by: Graham White <[email protected]>

Files changed (2) hide show
  1. src/app.py +1 -1
  2. src/themes/research_monochrome.py +152 -0
src/app.py CHANGED
@@ -10,7 +10,7 @@ import spaces
10
  import torch
11
  from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
12
 
13
- from themes.carbon import theme
14
 
15
  today_date = datetime.today().strftime("%B %-d, %Y") # noqa: DTZ002
16
 
 
10
  import torch
11
  from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
12
 
13
+ from themes.research_monochrome import theme
14
 
15
  today_date = datetime.today().strftime("%B %-d, %Y") # noqa: DTZ002
16
 
src/themes/research_monochrome.py ADDED
@@ -0,0 +1,152 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ """IBM Research Monochrome theme for gradio demos.
2
+
3
+ This version is a variation of CarbonSoft style, where the primary button is dark gray to create monochrome style. This
4
+ version uses the style from Research demos such as Bee to make it more playful with rounded corners, a larger font
5
+ family to enhance readability, and the IBM Cool Gray color palette for better consistency with other IBM Research demos,
6
+ such as Bee.
7
+ """
8
+
9
+ import gradio as gr
10
+ from gradio.themes.utils import sizes
11
+
12
+ theme = gr.themes.Base(
13
+ primary_hue=gr.themes.Color(
14
+ c100="#EDF5FF",
15
+ c200="#D0E2FF",
16
+ c300="#A6C8FF",
17
+ c400="#78A9FF",
18
+ c50="#F9F9FB",
19
+ c500="#4589FF",
20
+ c600="#0F62FE",
21
+ c700="#0043CE",
22
+ c800="#002D9C",
23
+ c900="#001D6C",
24
+ c950="#001141",
25
+ ),
26
+ secondary_hue=gr.themes.Color(
27
+ c100="#EDF5FF",
28
+ c200="#D0E2FF",
29
+ c300="#A6C8FF",
30
+ c400="#78A9FF",
31
+ c50="#F9F9FB",
32
+ c500="#4589FF",
33
+ c600="#0F62FE",
34
+ c700="#0043CE",
35
+ c800="#002D9C",
36
+ c900="#001D6C",
37
+ c950="#001141",
38
+ ),
39
+ neutral_hue=gr.themes.Color(
40
+ c100="#F2F4F8",
41
+ c200="#DDE1E6",
42
+ c300="#C1C7CD",
43
+ c400="#A2A9B0",
44
+ c50="#F9F9FB",
45
+ c500="#878D96",
46
+ c600="#697077",
47
+ c700="#4D5358",
48
+ c800="#393939",
49
+ c900="#21272A",
50
+ c950="#121619",
51
+ ),
52
+ spacing_size=sizes.spacing_md, # change spacing to default size
53
+ radius_size=sizes.radius_md, # change spacing to default size and Keep Radius to make demo feel more playful
54
+ text_size=sizes.text_lg, # change fontsize to default size
55
+ # spacing_size: sizes.Size | str = sizes.spacing_md, #change spacing to default size
56
+ # radius_size: sizes.Size | str = sizes.radius_md, #change spacing to default size and Keep Radius to make
57
+ # demo feel more playful
58
+ # text_size: sizes.Size | str = sizes.text_lg, #change fontsize to default size
59
+ font=["IBM Plex Sans", "ui-sans-serif", "system-ui", "sans-serif"], # update font
60
+ font_mono=["IBM Plex Mono", "ui-monospace", "Consolas", "monospace"], # update font
61
+ ).set(
62
+ # Colors
63
+ background_fill_primary="*neutral_100", # Coolgray10 background
64
+ background_fill_primary_dark="*neutral_950", # Coolgray95 background for dark mode
65
+ # Change blue to black to create monochrome style
66
+ slider_color="*neutral_900",
67
+ slider_color_dark="*primary_500",
68
+ # Shadows
69
+ shadow_drop="0 1px 4px 0 rgb(0 0 0 / 0.1)",
70
+ shadow_drop_lg="0 2px 5px 0 rgb(0 0 0 / 0.1)",
71
+ # Block Labels
72
+ block_background_fill="white",
73
+ block_label_background_fill="white", # same color as blockback gound fill
74
+ block_label_radius="*radius_md",
75
+ block_label_text_size="*text_md",
76
+ block_label_text_weight="600",
77
+ block_label_text_color="black",
78
+ block_label_text_color_dark="white",
79
+ block_title_radius="*block_label_radius",
80
+ block_title_background_fill="*block_label_background_fill",
81
+ block_title_text_weight="600",
82
+ block_title_text_color="black",
83
+ block_title_text_color_dark="white",
84
+ block_label_margin="*spacing_md",
85
+ # Inputs
86
+ input_background_fill="white",
87
+ input_background_fill_dark="*block-background-fill",
88
+ input_border_color="*neutral_100",
89
+ input_shadow="*shadow_drop",
90
+ input_shadow_dark="0 1px 4px #000",
91
+ input_shadow_focus="*shadow_drop_lg",
92
+ checkbox_shadow="none",
93
+ # Buttons
94
+ shadow_spread="6px",
95
+ button_primary_shadow="*shadow_drop_lg",
96
+ button_primary_shadow_hover="*shadow_drop_lg",
97
+ button_primary_shadow_active="*shadow_inset",
98
+ button_secondary_shadow="*shadow_drop_lg",
99
+ button_secondary_shadow_hover="*shadow_drop_lg",
100
+ button_secondary_shadow_active="*shadow_inset",
101
+ checkbox_label_shadow="*shadow_drop_lg",
102
+ # Change blue to black to create monochrome style
103
+ button_primary_background_fill="*neutral_900",
104
+ button_primary_background_fill_dark="*neutral_600",
105
+ button_primary_background_fill_hover="*neutral_700",
106
+ button_primary_background_fill_hover_dark="*primary_500", # hover to be blue
107
+ button_primary_text_color="white",
108
+ button_secondary_background_fill="white",
109
+ button_secondary_background_fill_hover="*neutral_100",
110
+ button_secondary_background_fill_dark="*neutral_800", # Secondary cool gray 80
111
+ button_secondary_background_fill_hover_dark="*primary_500",
112
+ button_secondary_text_color="*neutral_800",
113
+ button_cancel_background_fill="*button_secondary_background_fill",
114
+ button_cancel_background_fill_hover="*button_secondary_background_fill_hover",
115
+ button_cancel_background_fill_hover_dark="*button_secondary_background_fill_hover",
116
+ button_cancel_text_color="*button_secondary_text_color",
117
+ checkbox_label_background_fill_selected="*primary_200",
118
+ checkbox_label_background_fill_selected_dark="*primary_500",
119
+ checkbox_border_width="1px",
120
+ checkbox_border_color="*neutral_200",
121
+ checkbox_background_color_dark="*neutral_700", # Jan 18 test to fix checkbox, radio button background color
122
+ checkbox_background_color_selected="*primary_600",
123
+ checkbox_background_color_selected_dark="*primary_500",
124
+ checkbox_border_color_focus="*primary_600",
125
+ checkbox_border_color_focus_dark="*primary_500",
126
+ checkbox_border_color_selected="*primary_600",
127
+ checkbox_border_color_selected_dark="*primary_500",
128
+ checkbox_label_text_color_selected="black",
129
+ # Borders
130
+ block_border_width="1px", # test example border
131
+ panel_border_width="1px",
132
+ # Chatbubble related colors
133
+ # light
134
+ # color_accent = "*secondary_400",
135
+ border_color_accent_subdued="*color_accent_soft", # chatbubble human border color, use Blue 20 as an accent color
136
+ color_accent_soft="*secondary_200", # chatbubble human color
137
+ # darkmode
138
+ # chatbubble human border color in darkmode, use Blue 20 as an accent color
139
+ border_color_accent_subdued_dark="*secondary_500",
140
+ color_accent_soft_dark="*secondary_500", # chatbubble human color in dark mode
141
+ # Chatbot related font
142
+ chatbot_text_size="*text_md", # make it larger
143
+ # additional dark mode related tweaks:
144
+ # block_background_fill_dark="*neutral_950", # Jan 18 test coolgray95 background for dark mode
145
+ block_label_background_fill_dark="*neutral_800", # same color as blockback gound fill
146
+ block_title_background_fill_dark="*block_label_background_fill",
147
+ # input_background_fill_dark="*neutral_800", #This attribute help match fill color cool gray 80 to match background
148
+ # however cause the problem for the general theme.
149
+ # input_shadow_dark="*shadow_drop", #Test if it could make the border without the color
150
+ # input_border_color_dark="*neutral_200",#add attribute for border Jan 18
151
+ checkbox_border_color_dark="*neutral_600", # Jan 18 test to fix border
152
+ )