isanders commited on
Commit
bc99a91
·
1 Parent(s): b2c0464

✨ Theme & layout

Browse files
Files changed (3) hide show
  1. .gitignore +2 -1
  2. app.py +34 -25
  3. theme.py +101 -0
.gitignore CHANGED
@@ -1,2 +1,3 @@
1
  env
2
- .gradio
 
 
1
  env
2
+ .gradio
3
+ __pycache__
app.py CHANGED
@@ -1,6 +1,8 @@
1
  import gradio as gr
2
  import requests
3
 
 
 
4
  DEFAULT_DEPLOYMENT_URL = "https://api.app.deeploy.ml/workspaces/708b5808-27af-461a-8ee5-80add68384c7/deployments/a0a5d36d-ede6-4c53-8705-e4a8727bb0b7/predict"
5
 
6
  DEFAULT_PROMPTS = [
@@ -180,31 +182,38 @@ def get_evaluation_url(url: str, prediction_log_id: str) -> str:
180
  )
181
 
182
 
183
- with gr.Blocks() as demo:
184
- with gr.Column(scale=1):
185
- api_url = gr.Textbox(
186
- value=DEFAULT_DEPLOYMENT_URL, label="Deeploy API URL", type="text"
187
- )
188
- deployment_token = gr.Textbox(label="Deployment token", type="password")
189
-
190
- with gr.Column(scale=2):
191
- chatbot = gr.Chatbot(
192
- height=1000,
193
- type="messages",
194
- render_markdown=True,
195
- show_copy_button=True,
196
- )
197
- msg = gr.Textbox(
198
- label="Message",
199
- placeholder="Type your message here...",
200
- show_label=False,
201
- submit_btn="Send",
202
- )
203
-
204
- gr.Examples(
205
- examples=DEFAULT_PROMPTS,
206
- inputs=[msg],
207
- )
 
 
 
 
 
 
 
208
 
209
  msg.submit(
210
  respond,
 
1
  import gradio as gr
2
  import requests
3
 
4
+ from theme import logo, theme
5
+
6
  DEFAULT_DEPLOYMENT_URL = "https://api.app.deeploy.ml/workspaces/708b5808-27af-461a-8ee5-80add68384c7/deployments/a0a5d36d-ede6-4c53-8705-e4a8727bb0b7/predict"
7
 
8
  DEFAULT_PROMPTS = [
 
182
  )
183
 
184
 
185
+ with gr.Blocks(theme=theme, mode="light") as demo:
186
+ with gr.Row():
187
+ with gr.Column(scale=1):
188
+ with gr.Row():
189
+ gr.HTML(f"""
190
+ <div style="display: flex; align-items: center; column-gap: 8px;">
191
+ {logo}
192
+ <h1 style="margin: 0;">Deeploy OpenAI</h1>
193
+ </div>
194
+ """)
195
+ api_url = gr.Textbox(
196
+ value=DEFAULT_DEPLOYMENT_URL, label="Deeploy API URL", type="text"
197
+ )
198
+ deployment_token = gr.Textbox(label="Deployment token", type="password")
199
+
200
+ with gr.Column(scale=2):
201
+ chatbot = gr.Chatbot(
202
+ height=600,
203
+ type="messages",
204
+ render_markdown=True,
205
+ show_copy_button=True,
206
+ )
207
+ msg = gr.Textbox(
208
+ label="Message",
209
+ placeholder="Type your message here...",
210
+ show_label=False,
211
+ submit_btn="Send",
212
+ )
213
+ gr.Examples(
214
+ examples=DEFAULT_PROMPTS,
215
+ inputs=[msg],
216
+ )
217
 
218
  msg.submit(
219
  respond,
theme.py ADDED
@@ -0,0 +1,101 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import gradio as gr
2
+
3
+ theme = gr.themes.Base(
4
+ primary_hue=gr.themes.Color(
5
+ c100="#fef1d1",
6
+ c200="#fde3a2",
7
+ c300="#fde3a2",
8
+ c400="#fbce5d",
9
+ c50="fef8e8",
10
+ c500="fbce5d",
11
+ c600="#f9b917",
12
+ c700="#c79412",
13
+ c800="#854d0e",
14
+ c900="#713f12",
15
+ c950="#653b12",
16
+ ),
17
+ secondary_hue=gr.themes.Color(
18
+ c100="#cccdd5",
19
+ c200="#999bab",
20
+ c300="#999bab",
21
+ c400="#4c506c",
22
+ c50="#e5e6ea",
23
+ c500="#4c506c",
24
+ c600="#4c506c",
25
+ c700="#00052d",
26
+ c800="#00052d",
27
+ c900="#00052d",
28
+ c950="#00052d",
29
+ ),
30
+ neutral_hue=gr.themes.Color(
31
+ c100="#e5e6ea",
32
+ c200="#bdbdbd",
33
+ c300="#bdbdbd",
34
+ c400="#bbbbc2",
35
+ c50="rgba(255, 255, 255, 1)",
36
+ c500="#71717a",
37
+ c600="#52525b",
38
+ c700="#3f3f46",
39
+ c800="#27272a",
40
+ c900="#18181b",
41
+ c950="#0f0f11",
42
+ ),
43
+ font=["Helvetica Neue", "Helvetica", "Arial", "sans-serif"],
44
+ ).set(
45
+ body_text_color="*neutral_900",
46
+ embed_radius="*radius_md",
47
+ background_fill_primary="#fafafa",
48
+ border_color_primary="*neutral_100",
49
+ color_accent="*primary_600",
50
+ code_background_fill="*neutral_50",
51
+ block_background_fill="#ffffff",
52
+ panel_background_fill="*background_fill_primary",
53
+ checkbox_label_background_fill="*neutral_50",
54
+ checkbox_label_background_fill_hover="*neutral_100",
55
+ input_background_fill="*neutral_50",
56
+ input_background_fill_hover="*neutral_50",
57
+ input_border_color="*neutral_100",
58
+ input_border_width="*block_border_width",
59
+ button_primary_background_fill="*primary_600",
60
+ button_secondary_background_fill="*neutral_50",
61
+ button_secondary_text_color="*neutral_900",
62
+ )
63
+
64
+ logo = """
65
+ <svg width="32" height="100%" viewBox="0 0 57 66" height="50" width="50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
66
+ <g transform="matrix(0.223413,0,0,0.223413,-26.9959,-25.129)">
67
+ <g>
68
+ <g>
69
+ <g transform="matrix(1,0,0,1,55.8337,37.4778)">
70
+ <circle cx="128" cy="138" r="63" style="fill:url(#_Linear1);"/>
71
+ </g>
72
+ <g transform="matrix(1,0,0,1,55.8337,122.002)">
73
+ <circle cx="128" cy="138" r="63" style="fill:url(#_Linear2);"/>
74
+ </g>
75
+ <g transform="matrix(1,0,0,1,55.8337,205.07)">
76
+ <circle cx="128" cy="138" r="63" style="fill:url(#_Linear3);"/>
77
+ </g>
78
+ </g>
79
+ <g>
80
+ <g transform="matrix(1,0,0,1,121,163.525)">
81
+ <circle cx="128" cy="138" r="63" style="fill:url(#_Linear4);"/>
82
+ </g>
83
+ <g transform="matrix(1,0,0,1,121,79)">
84
+ <circle cx="128" cy="138" r="63" style="fill:url(#_Linear5);"/>
85
+ </g>
86
+ </g>
87
+ <g transform="matrix(1,0,0,1,183,124.525)">
88
+ <circle cx="128" cy="138" r="63" style="fill:url(#_Linear6);"/>
89
+ </g>
90
+ </g>
91
+ </g>
92
+ <defs>
93
+ <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-123,4,-4,-123,185.166,216.522)"><stop offset="0" style="stop-color:rgb(255,180,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,208,0);stop-opacity:1"/></linearGradient>
94
+ <linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-123,4,-4,-123,185.166,131.998)"><stop offset="0" style="stop-color:rgb(255,180,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,208,0);stop-opacity:1"/></linearGradient>
95
+ <linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-123,4,-4,-123,185.166,48.9297)"><stop offset="0" style="stop-color:rgb(255,180,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,208,0);stop-opacity:1"/></linearGradient>
96
+ <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-99,1.2124e-14,-1.2124e-14,-99,178,88.4754)"><stop offset="0" style="stop-color:rgb(251,139,23);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,180,0);stop-opacity:1"/></linearGradient>
97
+ <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-99,1.2124e-14,-1.2124e-14,-99,178,173)"><stop offset="0" style="stop-color:rgb(251,139,23);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,180,0);stop-opacity:1"/></linearGradient>
98
+ <linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-120,-3,3,-120,185,138.475)"><stop offset="0" style="stop-color:rgb(255,66,0);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(255,133,0);stop-opacity:1"/></linearGradient>
99
+ </defs>
100
+ </svg>
101
+ """