Hugging Face's logo

Spaces:
hmb
/
windows95
Running

App Files Community
hmb HF Staff commited on
Commit
24dbc47
·
verified ·
1 Parent(s): 2fda4c9

Updating theme

Browse files
Files changed (2) hide show
  1. app.py +115 -118
  2. themes/theme_schema@0.0.2.json +1 -0
app.py CHANGED
@@ -1,142 +1,139 @@
 
 
1
  import gradio as gr
2
- from windows95 import Windows95
3
 
4
- # Windows 95 Theme Demo
5
- # This demo showcases the nostalgic Windows 95-inspired theme
6
 
7
  with gr.Blocks() as demo:
8
- with gr.Row():
9
- with gr.Column():
10
- gr.Markdown("## Input Controls")
11
-
12
- name_input = gr.Textbox(
13
- label="Your Name",
14
- placeholder="Enter your name here...",
15
- info="Type your name in this text field",
16
- )
17
-
18
- message_input = gr.Textbox(
19
- label="Message",
20
- placeholder="Type a message...",
21
- lines=3,
22
- info="Multi-line text input",
23
- )
24
-
25
- dropdown = gr.Dropdown(
26
- label="Select Option",
27
- choices=["Option 1", "Option 2", "Option 3"],
28
- value="Option 1",
29
- info="Choose from the dropdown menu",
30
  )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
31
 
32
- slider = gr.Slider(
33
- label="Volume",
34
- minimum=0,
35
- maximum=100,
36
- value=50,
37
- step=1,
38
- info="Drag to adjust the value",
39
- )
40
 
41
- checkbox = gr.Checkbox(
42
- label="Enable Feature", value=True, info="Toggle this setting"
43
- )
 
44
 
 
 
 
45
  radio = gr.Radio(
46
- label="Choose One",
47
- choices=["Small", "Medium", "Large"],
48
- value="Medium",
49
- info="Select a size",
50
  )
51
-
52
- checkboxgroup = gr.CheckboxGroup(
53
- label="Select Multiple",
54
- choices=["Red", "Green", "Blue"],
55
- value=["Red"],
56
- info="Pick your favorite colors",
 
 
 
 
 
 
 
 
57
  )
58
-
59
- with gr.Column():
60
- gr.Markdown("## Output & Actions")
61
-
62
- output_text = gr.Textbox(label="Output", interactive=False, lines=3)
63
-
64
  with gr.Row():
65
- submit_btn = gr.Button("OK", variant="primary")
66
- clear_btn = gr.Button("Cancel", variant="stop")
67
- secondary_btn = gr.Button("Help", variant="secondary")
68
 
69
- gr.Markdown("## File Operations")
 
 
70
 
71
- file_upload = gr.File(
72
- label="Upload File", file_types=[".txt", ".csv", ".json"]
73
- )
74
 
75
- image_input = gr.Image(label="Image Preview", type="pil")
 
76
 
77
- gr.Markdown("## Data Display")
78
 
79
- dataframe = gr.Dataframe(
80
- label="Data Table",
81
- headers=["Name", "Value", "Status"],
82
- datatype=["str", "number", "str"],
83
- value=[
84
- ["Item 1", 100, "Active"],
85
- ["Item 2", 200, "Inactive"],
86
- ["Item 3", 300, "Pending"],
87
- ],
88
- )
89
 
90
- with gr.Accordion("Advanced Settings", open=False):
91
- gr.Markdown("Additional configuration options would go here.")
92
- adv_slider = gr.Slider(
93
- label="Advanced Slider", minimum=0, maximum=100, value=25
94
  )
95
- adv_text = gr.Textbox(
96
- label="Advanced Input", placeholder="Enter advanced settings..."
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  )
98
 
99
- with gr.Tabs():
100
- with gr.TabItem("Tab 1"):
101
- gr.Markdown("Content for Tab 1")
102
- gr.Textbox(label="Tab 1 Input")
103
- with gr.TabItem("Tab 2"):
104
- gr.Markdown("Content for Tab 2")
105
- gr.Textbox(label="Tab 2 Input")
106
- with gr.TabItem("Tab 3"):
107
- gr.Markdown("Content for Tab 3")
108
- gr.Textbox(label="Tab 3 Input")
109
-
110
- # Event handlers
111
- def process_input(name, message, dropdown, slider, checkbox, radio, colors):
112
- result = f"Name: {name}\n"
113
- result += f"Message: {message}\n"
114
- result += f"Dropdown: {dropdown}\n"
115
- result += f"Slider: {slider}\n"
116
- result += f"Checkbox: {checkbox}\n"
117
- result += f"Radio: {radio}\n"
118
- result += f"Colors: {', '.join(colors)}"
119
- return result
120
-
121
- def clear_output():
122
- return ""
123
-
124
- submit_btn.click(
125
- fn=process_input,
126
- inputs=[
127
- name_input,
128
- message_input,
129
- dropdown,
130
- slider,
131
- checkbox,
132
- radio,
133
- checkboxgroup,
134
- ],
135
- outputs=output_text,
136
- )
137
-
138
- clear_btn.click(fn=clear_output, outputs=output_text)
139
 
140
 
141
  if __name__ == "__main__":
142
- demo.launch(theme=Windows95())
 
1
+ import time
2
+
3
  import gradio as gr
4
+ from gradio.themes.utils.theme_dropdown import create_theme_dropdown
5
 
6
+ dropdown, js = create_theme_dropdown()
 
7
 
8
  with gr.Blocks() as demo:
9
+ with gr.Row(equal_height=True):
10
+ with gr.Column(scale=10):
11
+ gr.Markdown(
12
+ """
13
+ # Theme preview: `windows95`
14
+ To use this theme, set `theme='hmb/windows95'` in the `launch()` method of `gr.Blocks()` or `gr.Interface()`.
15
+ You can append an `@` and a semantic version expression, e.g. @>=1.0.0,<2.0.0 to pin to a given version
16
+ of this theme.
17
+ """
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  )
19
+ with gr.Column(scale=3):
20
+ with gr.Group():
21
+ dropdown.render()
22
+ toggle_dark = gr.Button(value="Toggle Dark")
23
+
24
+ dropdown.change(None, dropdown, None, js=js)
25
+ toggle_dark.click(
26
+ None,
27
+ js="""
28
+ () => {
29
+ document.body.classList.toggle('dark');
30
+ }
31
+ """,
32
+ )
33
 
34
+ name = gr.Textbox(
35
+ label="Name",
36
+ info="Full name, including middle name. No special characters.",
37
+ placeholder="John Doe",
38
+ value="John Doe",
39
+ interactive=True,
40
+ )
 
41
 
42
+ with gr.Row():
43
+ slider1 = gr.Slider(label="Slider 1")
44
+ slider2 = gr.Slider(label="Slider 2")
45
+ gr.CheckboxGroup(["A", "B", "C"], label="Checkbox Group")
46
 
47
+ with gr.Row():
48
+ with gr.Column(variant="panel", scale=1):
49
+ gr.Markdown("## Panel 1")
50
  radio = gr.Radio(
51
+ ["A", "B", "C"],
52
+ label="Radio",
53
+ info="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
 
54
  )
55
+ drop = gr.Dropdown(["Option 1", "Option 2", "Option 3"], show_label=False)
56
+ drop_2 = gr.Dropdown(
57
+ ["Option A", "Option B", "Option C"],
58
+ multiselect=True,
59
+ value=["Option A"],
60
+ label="Dropdown",
61
+ interactive=True,
62
+ )
63
+ check = gr.Checkbox(label="Go")
64
+ with gr.Column(variant="panel", scale=2):
65
+ img = gr.Image(
66
+ "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg",
67
+ label="Image",
68
+ height=320,
69
  )
 
 
 
 
 
 
70
  with gr.Row():
71
+ go_btn = gr.Button("Go", variant="primary")
72
+ clear_btn = gr.Button("Clear", variant="secondary")
 
73
 
74
+ def go(*_args):
75
+ time.sleep(3)
76
+ return "https://gradio-static-files.s3.us-west-2.amazonaws.com/header-image.jpg"
77
 
78
+ go_btn.click(go, [radio, drop, drop_2, check, name], img, api_name="go")
 
 
79
 
80
+ def clear():
81
+ time.sleep(0.2)
82
 
83
+ clear_btn.click(clear, None, img)
84
 
85
+ with gr.Row():
86
+ btn1 = gr.Button("Button 1", size="sm")
87
+ btn2 = gr.UploadButton(size="sm")
88
+ stop_btn = gr.Button("Stop", size="sm", variant="stop")
 
 
 
 
 
 
89
 
90
+ with gr.Row():
91
+ gr.Dataframe(value=[[1, 2, 3], [4, 5, 6], [7, 8, 9]], label="Dataframe")
92
+ gr.JSON(
93
+ value={"a": 1, "b": 2, "c": {"test": "a", "test2": [1, 2, 3]}}, label="JSON"
94
  )
95
+ gr.Label(value={"cat": 0.7, "dog": 0.2, "fish": 0.1})
96
+ gr.File()
97
+ with gr.Row():
98
+ gr.ColorPicker()
99
+ gr.Video("https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4")
100
+ gr.Gallery(
101
+ [
102
+ (
103
+ "https://gradio-static-files.s3.us-west-2.amazonaws.com/lion.jpg",
104
+ "lion",
105
+ ),
106
+ (
107
+ "https://gradio-static-files.s3.us-west-2.amazonaws.com/logo.png",
108
+ "logo",
109
+ ),
110
+ (
111
+ "https://gradio-static-files.s3.us-west-2.amazonaws.com/tower.jpg",
112
+ "tower",
113
+ ),
114
+ ],
115
+ height=200,
116
  )
117
 
118
+ with gr.Row():
119
+ with gr.Column(scale=2):
120
+ chatbot = gr.Chatbot([("Hello", "Hi")], label="Chatbot")
121
+ chat_btn = gr.Button("Add messages")
122
+
123
+ chat_btn.click(
124
+ lambda history: history
125
+ + [["How are you?", "I am good."]]
126
+ + (time.sleep(2) or []),
127
+ chatbot,
128
+ chatbot,
129
+ )
130
+ with gr.Column(scale=1):
131
+ with gr.Accordion("Advanced Settings"):
132
+ gr.Markdown("Hello")
133
+ gr.Number(label="Chatbot control 1")
134
+ gr.Number(label="Chatbot control 2")
135
+ gr.Number(label="Chatbot control 3")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
136
 
137
 
138
  if __name__ == "__main__":
139
+ demo.queue().launch(theme='hmb/windows95')
themes/theme_schema@0.0.2.json ADDED
@@ -0,0 +1 @@
 
 
1
+ {"theme": {"_font": ["MS Sans Serif", "Tahoma", "Segoe UI", "Arial", "sans-serif"], "_font_css": [], "_font_mono": ["Fixedsys", "Consolas", "Courier New", "monospace"], "_stylesheets": [], "accordion_text_color": "#000000", "accordion_text_color_dark": "#000000", "background_fill_primary": "#C0C0C0", "background_fill_primary_dark": "#C0C0C0", "background_fill_secondary": "#C0C0C0", "background_fill_secondary_dark": "#C0C0C0", "block_background_fill": "#C0C0C0", "block_background_fill_dark": "#C0C0C0", "block_border_color": "#808080", "block_border_color_dark": "#808080", "block_border_width": "2px", "block_border_width_dark": "2px", "block_info_text_color": "#000000", "block_info_text_color_dark": "#000000", "block_info_text_size": "*text_sm", "block_info_text_weight": "400", "block_label_background_fill": "#000080", "block_label_background_fill_dark": "#000080", "block_label_border_color": "#000080", "block_label_border_color_dark": "#000080", "block_label_border_width": "0px", "block_label_border_width_dark": "0px", "block_label_margin": "0", "block_label_padding": "*spacing_xs *spacing_sm", "block_label_radius": "0px", "block_label_right_radius": "0px", "block_label_shadow": "none", "block_label_text_color": "#FFFFFF", "block_label_text_color_dark": "#FFFFFF", "block_label_text_size": "*text_sm", "block_label_text_weight": "700", "block_padding": "*spacing_md", "block_radius": "0px", "block_shadow": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "block_shadow_dark": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "block_title_background_fill": "transparent", "block_title_background_fill_dark": "transparent", "block_title_border_color": "transparent", "block_title_border_color_dark": "transparent", "block_title_border_width": "0px", "block_title_border_width_dark": "0px", "block_title_padding": "*spacing_xs 0", "block_title_radius": "0px", "block_title_text_color": "#000000", "block_title_text_color_dark": "#000000", "block_title_text_size": "*text_sm", "block_title_text_weight": "700", "body_background_fill": "#008080", "body_background_fill_dark": "#008080", "body_text_color": "#000000", "body_text_color_dark": "#000000", "body_text_color_subdued": "#808080", "body_text_color_subdued_dark": "#808080", "body_text_size": "*text_md", "body_text_weight": "400", "border_color_accent": "#000080", "border_color_accent_dark": "#000080", "border_color_accent_subdued": "*border_color_accent", "border_color_accent_subdued_dark": "*border_color_accent", "border_color_primary": "#808080", "border_color_primary_dark": "#808080", "button_border_width": "2px", "button_border_width_dark": "2px", "button_cancel_background_fill": "#C0C0C0", "button_cancel_background_fill_dark": "#C0C0C0", "button_cancel_background_fill_hover": "#C0C0C0", "button_cancel_background_fill_hover_dark": "#C0C0C0", "button_cancel_border_color": "#808080", "button_cancel_border_color_dark": "#808080", "button_cancel_border_color_hover": "#808080", "button_cancel_border_color_hover_dark": "#808080", "button_cancel_shadow": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_cancel_shadow_active": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF", "button_cancel_shadow_active_dark": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF", "button_cancel_shadow_dark": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_cancel_shadow_hover": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_cancel_shadow_hover_dark": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_cancel_text_color": "#000000", "button_cancel_text_color_dark": "#000000", "button_cancel_text_color_hover": "#000000", "button_cancel_text_color_hover_dark": "#000000", "button_large_padding": "*spacing_sm *spacing_lg", "button_large_radius": "0px", "button_large_text_size": "*text_md", "button_large_text_weight": "400", "button_medium_padding": "*spacing_xs *spacing_md", "button_medium_radius": "0px", "button_medium_text_size": "*text_md", "button_medium_text_weight": "400", "button_primary_background_fill": "#C0C0C0", "button_primary_background_fill_dark": "#C0C0C0", "button_primary_background_fill_hover": "#C0C0C0", "button_primary_background_fill_hover_dark": "#C0C0C0", "button_primary_border_color": "#000000", "button_primary_border_color_dark": "#000000", "button_primary_border_color_hover": "#000000", "button_primary_border_color_hover_dark": "#000000", "button_primary_shadow": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_primary_shadow_active": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF", "button_primary_shadow_active_dark": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF", "button_primary_shadow_dark": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_primary_shadow_hover": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_primary_shadow_hover_dark": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_primary_text_color": "#000000", "button_primary_text_color_dark": "#000000", "button_primary_text_color_hover": "#000000", "button_primary_text_color_hover_dark": "#000000", "button_secondary_background_fill": "#C0C0C0", "button_secondary_background_fill_dark": "#C0C0C0", "button_secondary_background_fill_hover": "#C0C0C0", "button_secondary_background_fill_hover_dark": "#C0C0C0", "button_secondary_border_color": "#808080", "button_secondary_border_color_dark": "#808080", "button_secondary_border_color_hover": "#808080", "button_secondary_border_color_hover_dark": "#808080", "button_secondary_shadow": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_secondary_shadow_active": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF", "button_secondary_shadow_active_dark": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF", "button_secondary_shadow_dark": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_secondary_shadow_hover": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_secondary_shadow_hover_dark": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "button_secondary_text_color": "#000000", "button_secondary_text_color_dark": "#000000", "button_secondary_text_color_hover": "#000000", "button_secondary_text_color_hover_dark": "#000000", "button_small_padding": "*spacing_xs *spacing_sm", "button_small_radius": "0px", "button_small_text_size": "*text_sm", "button_small_text_weight": "400", "button_transform_active": "none", "button_transform_hover": "none", "button_transition": "none", "chatbot_text_size": "*text_md", "checkbox_background_color": "#FFFFFF", "checkbox_background_color_dark": "#FFFFFF", "checkbox_background_color_focus": "#FFFFFF", "checkbox_background_color_focus_dark": "#FFFFFF", "checkbox_background_color_hover": "#FFFFFF", "checkbox_background_color_hover_dark": "#FFFFFF", "checkbox_background_color_selected": "#FFFFFF", "checkbox_background_color_selected_dark": "#FFFFFF", "checkbox_border_color": "#808080", "checkbox_border_color_dark": "#808080", "checkbox_border_color_focus": "#000080", "checkbox_border_color_focus_dark": "#000080", "checkbox_border_color_hover": "#808080", "checkbox_border_color_hover_dark": "#808080", "checkbox_border_color_selected": "#808080", "checkbox_border_color_selected_dark": "#808080", "checkbox_border_radius": "0px", "checkbox_border_width": "2px", "checkbox_border_width_dark": "2px", "checkbox_check": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")", "checkbox_label_background_fill": "#C0C0C0", "checkbox_label_background_fill_dark": "#C0C0C0", "checkbox_label_background_fill_hover": "#C0C0C0", "checkbox_label_background_fill_hover_dark": "#C0C0C0", "checkbox_label_background_fill_selected": "#000080", "checkbox_label_background_fill_selected_dark": "#000080", "checkbox_label_border_color": "#808080", "checkbox_label_border_color_dark": "#808080", "checkbox_label_border_color_hover": "#808080", "checkbox_label_border_color_hover_dark": "#808080", "checkbox_label_border_color_selected": "#000080", "checkbox_label_border_color_selected_dark": "#000080", "checkbox_label_border_width": "2px", "checkbox_label_border_width_dark": "2px", "checkbox_label_gap": "*spacing_sm", "checkbox_label_padding": "*spacing_xs *spacing_sm", "checkbox_label_shadow": "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF", "checkbox_label_text_color": "#000000", "checkbox_label_text_color_dark": "#000000", "checkbox_label_text_color_selected": "#FFFFFF", "checkbox_label_text_color_selected_dark": "#FFFFFF", "checkbox_label_text_size": "*text_md", "checkbox_label_text_weight": "400", "checkbox_shadow": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF", "code_background_fill": "#FFFFFF", "code_background_fill_dark": "#FFFFFF", "color_accent": "#000080", "color_accent_soft": "#000080", "color_accent_soft_dark": "#000080", "container_radius": "0px", "custom_css": "\n.gradio-container,\n.gradio-container > *,\n.main,\n.wrap,\n.app,\ngradio-app,\ngradio-app > *,\nbody > * {\n transform: none !important;\n filter: none !important;\n perspective: none !important;\n contain: none !important;\n will-change: auto !important;\n}\n\nfooter {\n position: fixed !important;\n bottom: 0 !important;\n left: 0 !important;\n right: 0 !important;\n top: auto !important;\n margin: 0 !important;\n padding: 4px 8px !important;\n background: #C0C0C0 !important;\n border-top: 2px solid #FFFFFF !important;\n box-shadow:\n inset 0 1px 0 0 #DFDFDF,\n inset 0 -1px 0 0 #808080,\n 0 -1px 0 0 #404040 !important;\n justify-content: flex-start !important;\n gap: 8px !important;\n z-index: 2147483647 !important;\n font-family: \"MS Sans Serif\", Tahoma, Arial, sans-serif !important;\n height: auto !important;\n min-height: 32px !important;\n transform: none !important;\n width: 100vw !important;\n max-width: 100vw !important;\n}\n\nfooter button,\nfooter a {\n background: #C0C0C0 !important;\n color: #000000 !important;\n border: none !important;\n padding: 4px 12px !important;\n margin: 0 2px !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF !important;\n font-family: \"MS Sans Serif\", Tahoma, Arial, sans-serif !important;\n font-size: 12px !important;\n}\n\nfooter button:hover,\nfooter a:hover {\n color: #000000 !important;\n}\n\nfooter button:active,\nfooter a:active {\n box-shadow:\n inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #DFDFDF !important;\n}\n\nfooter .divider {\n display: none !important;\n}\n\nfooter img {\n filter: none !important;\n}\n\n.gradio-container {\n padding-bottom: 50px !important;\n}\n\n.main,\n.wrap,\n.app {\n padding-bottom: 50px !important;\n}\n\nfooter button:first-of-type,\nfooter a:first-of-type {\n font-weight: bold !important;\n}\n\nfooter button:last-of-type,\nfooter .settings {\n margin-left: auto !important;\n box-shadow:\n inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #FFFFFF,\n inset 2px 2px 0px 0px #404040,\n inset -2px -2px 0px 0px #DFDFDF !important;\n}\n\n.api-docs-wrap,\n#api-recorder-container {\n background: #C0C0C0 !important;\n}\n\n.post,\nh3 .post,\nspan.post {\n background: #000080 !important;\n color: #FFFFFF !important;\n border-color: #000080 !important;\n}\n\n.highlight,\nspan.highlight,\n.code.highlight {\n background: #000080 !important;\n color: #FFFFFF !important;\n padding: 2px 6px !important;\n}\n\n.type,\n.param-type,\n.parameter-type {\n color: #FFFFFF !important;\n background: #000080 !important;\n padding: 2px 6px !important;\n}\n\nspan[class*=\"required\"],\nspan[class*=\"optional\"],\n.required,\n.optional {\n color: #FFFFFF !important;\n}\n\n.copy-button,\nbutton[class*=\"copy\"],\n[class*=\"copy-button\"] {\n background: #C0C0C0 !important;\n color: #000000 !important;\n border: none !important;\n border-radius: 0 !important;\n padding: 4px 12px !important;\n font-family: \"MS Sans Serif\", Tahoma, Arial, sans-serif !important;\n font-size: 12px !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF !important;\n}\n\n.copy-button:hover,\nbutton[class*=\"copy\"]:hover,\n[class*=\"copy-button\"]:hover {\n background: #C0C0C0 !important;\n}\n\n.copy-button:active,\nbutton[class*=\"copy\"]:active,\n[class*=\"copy-button\"]:active {\n box-shadow:\n inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #DFDFDF !important;\n}\n\n.copy-button svg,\nbutton[class*=\"copy\"] svg {\n color: #000000 !important;\n fill: #000000 !important;\n}\n\n.api-docs-wrap [class*=\"dropdown\"] button,\n.api-docs-wrap .dropdown-toggle,\n.api-docs-wrap button[aria-haspopup=\"true\"] {\n background: #C0C0C0 !important;\n color: #000000 !important;\n border: none !important;\n border-radius: 0 !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF !important;\n}\n\n[role=\"menu\"],\n[role=\"listbox\"],\n.dropdown-menu,\ndiv[class*=\"dropdown\"] > div,\nul[class*=\"menu\"],\ndiv[class*=\"menu\"]:not(.overflow-menu) {\n background: #C0C0C0 !important;\n border: none !important;\n border-radius: 0 !important;\n padding: 2px !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF,\n 4px 4px 0px 0px rgba(0,0,0,0.3) !important;\n}\n\n[role=\"menu\"] button,\n[role=\"menu\"] a,\n[role=\"menuitem\"],\n.dropdown-menu button,\n.dropdown-menu a,\ndiv[class*=\"dropdown\"] button,\ndiv[class*=\"dropdown\"] a {\n background: #C0C0C0 !important;\n color: #000000 !important;\n border: none !important;\n border-radius: 0 !important;\n padding: 4px 24px 4px 8px !important;\n margin: 0 !important;\n box-shadow: none !important;\n text-align: left !important;\n display: block !important;\n width: 100% !important;\n}\n\n[role=\"menu\"] button:hover,\n[role=\"menu\"] a:hover,\n[role=\"menuitem\"]:hover,\n.dropdown-menu button:hover,\n.dropdown-menu a:hover,\ndiv[class*=\"dropdown\"] button:hover,\ndiv[class*=\"dropdown\"] a:hover {\n background: #000080 !important;\n color: #FFFFFF !important;\n}\n\n[role=\"menu\"] span,\n[role=\"menu\"] p,\n.dropdown-menu span,\n.dropdown-menu p {\n color: inherit !important;\n}\n\n[role=\"menu\"] svg,\n.dropdown-menu svg {\n color: inherit !important;\n fill: currentColor !important;\n}\n\n[style*=\"color-accent-soft\"],\n[style*=\"accent\"] {\n color: #FFFFFF !important;\n}\n\npre {\n background: #FFFFFF !important;\n color: #000000 !important;\n box-shadow: inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #FFFFFF,\n inset 2px 2px 0px 0px #404040,\n inset -2px -2px 0px 0px #DFDFDF !important;\n}\n\npre code,\ncode {\n background: transparent !important;\n color: #000000 !important;\n}\n\npre .api-name,\ncode .api-name {\n color: #000080 !important;\n}\n\npre .highlight,\npre span.highlight,\ncode .highlight,\ncode span.highlight {\n background: #000080 !important;\n color: #FFFFFF !important;\n}\n\npre .token.string,\n.token.string {\n color: #008000 !important;\n}\n\npre span[style*=\"background\"],\ncode span[style*=\"background\"],\npre .keyword,\npre .builtin,\npre .function-name,\ncode .keyword,\ncode .builtin {\n color: #FFFFFF !important;\n}\n\n.tabs {\n gap: 0 !important;\n}\n\n.tab-container::after {\n display: none !important;\n}\n\n.tab-wrapper {\n padding-bottom: 0 !important;\n margin-bottom: -2px !important;\n border-bottom: none !important;\n background: transparent !important;\n z-index: 1 !important;\n position: relative !important;\n}\n\n.tab-container button,\n.tabs button[role=\"tab\"] {\n background: #C0C0C0 !important;\n color: #000000 !important;\n border: none !important;\n border-radius: 0 !important;\n padding: 4px 16px !important;\n margin: 0 !important;\n margin-right: -1px !important;\n position: relative !important;\n bottom: -2px !important;\n font-weight: 400 !important;\n \n box-shadow:\n inset 1px 1px 0px 0px #FFFFFF,\n inset -1px 0px 0px 0px #808080,\n inset 2px 2px 0px 0px #DFDFDF,\n inset -2px 0px 0px 0px #404040,\n 0px -1px 0px 0px #FFFFFF !important;\n \n border-bottom: 2px solid #C0C0C0 !important;\n}\n\n.tab-container button:not(.selected),\n.tabs button[role=\"tab\"]:not(.selected) {\n background: #C0C0C0 !important;\n border-bottom: 2px solid #808080 !important;\n margin-bottom: 0 !important;\n}\n\n.tab-container button:hover:not(.selected),\n.tabs button[role=\"tab\"]:hover:not(.selected) {\n background: #C0C0C0 !important;\n}\n\n.tab-container button.selected,\n.tabs button[role=\"tab\"].selected,\n.tabs button[role=\"tab\"][aria-selected=\"true\"] {\n background: #C0C0C0 !important;\n color: #000000 !important;\n border-bottom: 2px solid #C0C0C0 !important;\n z-index: 2 !important;\n \n box-shadow:\n inset 1px 1px 0px 0px #FFFFFF,\n inset -1px 0px 0px 0px #808080,\n inset 2px 2px 0px 0px #DFDFDF,\n inset -2px 0px 0px 0px #404040 !important;\n}\n\n.tab-container button.selected::after,\n.tabs button[role=\"tab\"].selected::after,\n.tabs button[role=\"tab\"][aria-selected=\"true\"]::after {\n display: none !important;\n}\n\n.tabs > :not(.tab-wrapper):not(style) {\n background: #C0C0C0 !important;\n border: none !important;\n border-top: 2px solid #808080 !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 0px 0px 0px #FFFFFF,\n inset 0px 1px 0px 0px #FFFFFF,\n -2px -2px 0px 0px #404040,\n 2px 2px 0px 0px #DFDFDF !important;\n padding: 8px !important;\n margin-top: 0 !important;\n}\n\n.overflow-menu > button {\n background: #C0C0C0 !important;\n border: none !important;\n border-radius: 0 !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF !important;\n}\n\n.overflow-dropdown {\n background: #C0C0C0 !important;\n border: none !important;\n border-radius: 0 !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF,\n 2px 2px 4px rgba(0,0,0,0.3) !important;\n}\n\n.overflow-dropdown button {\n background: #C0C0C0 !important;\n color: #000000 !important;\n}\n\n.overflow-dropdown button:hover {\n background: #000080 !important;\n color: #FFFFFF !important;\n}\n\n.overflow-dropdown button.selected {\n background: #000080 !important;\n color: #FFFFFF !important;\n}\n\n* {\n scrollbar-width: auto;\n scrollbar-color: #C0C0C0 #DFDFDF;\n}\n\n*::-webkit-scrollbar {\n width: 16px !important;\n height: 16px !important;\n}\n\n*::-webkit-scrollbar-track {\n background: #DFDFDF !important;\n background-image: url(\"data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23C0C0C0'/%3E%3C/svg%3E\") !important;\n background-size: 2px 2px !important;\n}\n\n*::-webkit-scrollbar-thumb {\n background: #C0C0C0 !important;\n border: none !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF !important;\n}\n\n*::-webkit-scrollbar-button {\n background: #C0C0C0 !important;\n border: none !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF !important;\n display: block !important;\n height: 16px !important;\n width: 16px !important;\n}\n\n[data-tooltip],\n[title],\n.tooltip,\n[role=\"tooltip\"] {\n --tooltip-bg: #FFFFE1 !important;\n --tooltip-color: #000000 !important;\n}\n\n::selection {\n background: #000080 !important;\n color: #FFFFFF !important;\n}\n\n::-moz-selection {\n background: #000080 !important;\n color: #FFFFFF !important;\n}\n\n*:focus {\n outline: 1px dotted #000000 !important;\n outline-offset: -4px !important;\n}\n\nbutton:focus,\ninput:focus,\ntextarea:focus,\nselect:focus {\n outline: 1px dotted #000000 !important;\n outline-offset: 2px !important;\n}\n\nbutton:disabled,\ninput:disabled,\ntextarea:disabled,\nselect:disabled,\n[disabled] {\n color: #808080 !important;\n text-shadow: 1px 1px 0px #FFFFFF !important;\n cursor: not-allowed !important;\n}\n\nprogress,\n.progress-bar,\n[role=\"progressbar\"] {\n background: #C0C0C0 !important;\n border: none !important;\n box-shadow:\n inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #FFFFFF,\n inset 2px 2px 0px 0px #404040,\n inset -2px -2px 0px 0px #DFDFDF !important;\n height: 20px !important;\n border-radius: 0 !important;\n}\n\nprogress::-webkit-progress-bar {\n background: #C0C0C0 !important;\n border-radius: 0 !important;\n}\n\nprogress::-webkit-progress-value {\n background: repeating-linear-gradient(\n 90deg,\n #000080 0px,\n #000080 8px,\n #C0C0C0 8px,\n #C0C0C0 10px\n ) !important;\n border-radius: 0 !important;\n}\n\nprogress::-moz-progress-bar {\n background: repeating-linear-gradient(\n 90deg,\n #000080 0px,\n #000080 8px,\n #C0C0C0 8px,\n #C0C0C0 10px\n ) !important;\n border-radius: 0 !important;\n}\n\n.accordion,\ndetails,\nfieldset,\n.group {\n border: none !important;\n box-shadow:\n inset 1px 1px 0px 0px #FFFFFF,\n inset -1px -1px 0px 0px #808080 !important;\n background: #C0C0C0 !important;\n padding: 8px !important;\n margin: 4px 0 !important;\n}\n\nselect,\n.dropdown,\n[role=\"listbox\"] {\n background: #FFFFFF !important;\n border: none !important;\n box-shadow:\n inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #FFFFFF,\n inset 2px 2px 0px 0px #404040,\n inset -2px -2px 0px 0px #DFDFDF !important;\n border-radius: 0 !important;\n padding: 2px 4px !important;\n}\n\ninput[type=\"range\"] {\n -webkit-appearance: none !important;\n background: transparent !important;\n height: 24px !important;\n}\n\ninput[type=\"range\"]::-webkit-slider-track {\n background: #C0C0C0 !important;\n height: 4px !important;\n box-shadow:\n inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #FFFFFF !important;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none !important;\n width: 12px !important;\n height: 20px !important;\n background: #C0C0C0 !important;\n border: none !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #FFFFFF,\n inset -2px -2px 0px 0px #404040,\n inset 2px 2px 0px 0px #DFDFDF !important;\n cursor: pointer !important;\n margin-top: -8px !important;\n}\n\n.label-wrap label::before,\n.block-label span::before {\n \n}\n\n.image-container,\n.video-container,\n.gallery {\n box-shadow:\n inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #FFFFFF,\n inset 2px 2px 0px 0px #404040,\n inset -2px -2px 0px 0px #DFDFDF !important;\n}\n\nfooter img,\nbutton img,\na img,\nsvg {\n box-shadow: none !important;\n}\n\n.upload-container,\n.file-upload,\n[type=\"file\"] {\n background: #C0C0C0 !important;\n border: 2px dashed #808080 !important;\n border-radius: 0 !important;\n}\n\n.pending,\n.loading,\n[aria-busy=\"true\"] {\n cursor: wait !important;\n}\n\n.prose h1,\n.prose h2,\n.prose h3,\n.markdown h1,\n.markdown h2,\n.markdown h3,\nh1, h2, h3 {\n color: #000000 !important;\n font-weight: bold !important;\n border-bottom: none !important;\n}\n\nhr {\n border: none !important;\n height: 2px !important;\n background: linear-gradient(to bottom, #808080 0%, #808080 50%, #FFFFFF 50%, #FFFFFF 100%) !important;\n margin: 8px 0 !important;\n}\n\nblockquote {\n background: #FFFFFF !important;\n border-left: 4px solid #000080 !important;\n padding: 8px !important;\n margin: 8px 0 !important;\n box-shadow:\n inset 1px 1px 0px 0px #808080,\n inset -1px -1px 0px 0px #FFFFFF !important;\n}\n\n.message,\n.chat-message,\n[class*=\"message\"] {\n border-radius: 0 !important;\n}\n\n.user-message,\n[class*=\"user\"] {\n background: #FFFFFF !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #DFDFDF !important;\n}\n\n.bot-message,\n[class*=\"bot\"],\n[class*=\"assistant\"] {\n background: #FFFFC0 !important;\n box-shadow:\n inset -1px -1px 0px 0px #808080,\n inset 1px 1px 0px 0px #DFDFDF !important;\n}\n\n@keyframes win95-loading {\n 0% { background-position: 0% 0%; }\n 100% { background-position: 100% 0%; }\n}\n\n.loading-indicator,\n.loader {\n background: repeating-linear-gradient(\n 90deg,\n #000080 0px,\n #000080 16px,\n transparent 16px,\n transparent 20px\n ) !important;\n background-size: 200% 100% !important;\n animation: win95-loading 1s linear infinite !important;\n}\n", "embed_radius": "0px", "error_background_fill": "#FFFFFF", "error_background_fill_dark": "#FFFFFF", "error_border_color": "#FF0000", "error_border_color_dark": "#FF0000", "error_border_width": "2px", "error_border_width_dark": "2px", "error_icon_color": "#FF0000", "error_icon_color_dark": "#FF0000", "error_text_color": "#FF0000", "error_text_color_dark": "#FF0000", "font": "MS Sans Serif, Tahoma, Segoe UI, Arial, sans-serif", "font_mono": "Fixedsys, Consolas, Courier New, monospace", "form_gap_width": "1px", "input_background_fill": "#FFFFFF", "input_background_fill_dark": "#FFFFFF", "input_background_fill_focus": "#FFFFFF", "input_background_fill_focus_dark": "#FFFFFF", "input_background_fill_hover": "#FFFFFF", "input_background_fill_hover_dark": "#FFFFFF", "input_border_color": "#808080", "input_border_color_dark": "#808080", "input_border_color_focus": "#000080", "input_border_color_focus_dark": "#000080", "input_border_color_hover": "#808080", "input_border_color_hover_dark": "#808080", "input_border_width": "2px", "input_border_width_dark": "2px", "input_padding": "*spacing_sm", "input_placeholder_color": "#808080", "input_placeholder_color_dark": "#808080", "input_radius": "0px", "input_shadow": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF", "input_shadow_dark": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF", "input_shadow_focus": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF", "input_shadow_focus_dark": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF", "input_text_size": "*text_md", "input_text_weight": "400", "layout_gap": "*spacing_md", "link_text_color": "#0000FF", "link_text_color_active": "#800080", "link_text_color_active_dark": "#800080", "link_text_color_dark": "#0000FF", "link_text_color_hover": "#0000FF", "link_text_color_hover_dark": "#0000FF", "link_text_color_visited": "#800080", "link_text_color_visited_dark": "#800080", "loader_color": "#000080", "loader_color_dark": "#000080", "name": "windows95", "neutral_100": "#DFDFDF", "neutral_200": "#C0C0C0", "neutral_300": "#A0A0A0", "neutral_400": "#808080", "neutral_50": "#FFFFFF", "neutral_500": "#606060", "neutral_600": "#404040", "neutral_700": "#303030", "neutral_800": "#202020", "neutral_900": "#000000", "neutral_950": "#000000", "panel_background_fill": "#C0C0C0", "panel_background_fill_dark": "#C0C0C0", "panel_border_color": "#808080", "panel_border_color_dark": "#808080", "panel_border_width": "2px", "panel_border_width_dark": "2px", "primary_100": "#CCCCFF", "primary_200": "#9999FF", "primary_300": "#6666FF", "primary_400": "#3333CC", "primary_50": "#E6E6FF", "primary_500": "#000080", "primary_600": "#000066", "primary_700": "#000055", "primary_800": "#000044", "primary_900": "#000033", "primary_950": "#000022", "prose_header_text_weight": "700", "prose_text_size": "*text_md", "prose_text_weight": "400", "radio_circle": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e\")", "radius_lg": "0px", "radius_md": "0px", "radius_sm": "0px", "radius_xl": "0px", "radius_xs": "0px", "radius_xxl": "0px", "radius_xxs": "0px", "secondary_100": "#B0FFFF", "secondary_200": "#80FFFF", "secondary_300": "#40E0E0", "secondary_400": "#20C0C0", "secondary_50": "#E0FFFF", "secondary_500": "#008080", "secondary_600": "#006666", "secondary_700": "#005555", "secondary_800": "#004444", "secondary_900": "#003333", "secondary_950": "#002222", "section_header_text_size": "*text_md", "section_header_text_weight": "700", "shadow_drop": "none", "shadow_drop_lg": "none", "shadow_inset": "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF", "shadow_spread": "0px", "shadow_spread_dark": "0px", "slider_color": "#000080", "slider_color_dark": "#000080", "spacing_lg": "8px", "spacing_md": "6px", "spacing_sm": "4px", "spacing_xl": "10px", "spacing_xs": "2px", "spacing_xxl": "16px", "spacing_xxs": "1px", "stat_background_fill": "#000080", "stat_background_fill_dark": "#000080", "table_border_color": "#808080", "table_border_color_dark": "#808080", "table_even_background_fill": "#FFFFFF", "table_even_background_fill_dark": "#FFFFFF", "table_odd_background_fill": "#C0C0C0", "table_odd_background_fill_dark": "#C0C0C0", "table_radius": "0px", "table_row_focus": "#000080", "table_row_focus_dark": "#000080", "table_text_color": "#000000", "table_text_color_dark": "#000000", "text_lg": "16px", "text_md": "14px", "text_sm": "12px", "text_xl": "22px", "text_xs": "10px", "text_xxl": "26px", "text_xxs": "9px"}, "version": {"version": "0.0.2"}}