✨ Theme & layout

.gitignore

@@ -1,2 +1,3 @@
 env
-.gradio
+.gradio
+__pycache__

app.py

@@ -1,6 +1,8 @@
 import gradio as gr
 import requests
 
+from theme import logo, theme
+
 DEFAULT_DEPLOYMENT_URL = "https://api.app.deeploy.ml/workspaces/708b5808-27af-461a-8ee5-80add68384c7/deployments/a0a5d36d-ede6-4c53-8705-e4a8727bb0b7/predict"
 
 DEFAULT_PROMPTS = [
@@ -180,31 +182,38 @@ def get_evaluation_url(url: str, prediction_log_id: str) -> str:
     )
 
 
-with gr.Blocks() as demo:
-    with gr.Column(scale=1):
-        api_url = gr.Textbox(
-            value=DEFAULT_DEPLOYMENT_URL, label="Deeploy API URL", type="text"
-        )
-        deployment_token = gr.Textbox(label="Deployment token", type="password")
-
-    with gr.Column(scale=2):
-        chatbot = gr.Chatbot(
-            height=1000,
-            type="messages",
-            render_markdown=True,
-            show_copy_button=True,
-        )
-        msg = gr.Textbox(
-            label="Message",
-            placeholder="Type your message here...",
-            show_label=False,
-            submit_btn="Send",
-        )
-
-    gr.Examples(
-        examples=DEFAULT_PROMPTS,
-        inputs=[msg],
-    )
+with gr.Blocks(theme=theme, mode="light") as demo:
+    with gr.Row():
+        with gr.Column(scale=1):
+            with gr.Row():
+                gr.HTML(f"""
+                    <div style="display: flex; align-items: center; column-gap: 8px;">
+                        {logo}
+                        <h1 style="margin: 0;">Deeploy OpenAI</h1>
+                    </div>
+                """)
+            api_url = gr.Textbox(
+                value=DEFAULT_DEPLOYMENT_URL, label="Deeploy API URL", type="text"
+            )
+            deployment_token = gr.Textbox(label="Deployment token", type="password")
+
+        with gr.Column(scale=2):
+            chatbot = gr.Chatbot(
+                height=600,
+                type="messages",
+                render_markdown=True,
+                show_copy_button=True,
+            )
+            msg = gr.Textbox(
+                label="Message",
+                placeholder="Type your message here...",
+                show_label=False,
+                submit_btn="Send",
+            )
+            gr.Examples(
+                examples=DEFAULT_PROMPTS,
+                inputs=[msg],
+            )
 
     msg.submit(
         respond,

theme.py

@@ -0,0 +1,101 @@
+import gradio as gr
+
+theme = gr.themes.Base(
+    primary_hue=gr.themes.Color(
+        c100="#fef1d1",
+        c200="#fde3a2",
+        c300="#fde3a2",
+        c400="#fbce5d",
+        c50="fef8e8",
+        c500="fbce5d",
+        c600="#f9b917",
+        c700="#c79412",
+        c800="#854d0e",
+        c900="#713f12",
+        c950="#653b12",
+    ),
+    secondary_hue=gr.themes.Color(
+        c100="#cccdd5",
+        c200="#999bab",
+        c300="#999bab",
+        c400="#4c506c",
+        c50="#e5e6ea",
+        c500="#4c506c",
+        c600="#4c506c",
+        c700="#00052d",
+        c800="#00052d",
+        c900="#00052d",
+        c950="#00052d",
+    ),
+    neutral_hue=gr.themes.Color(
+        c100="#e5e6ea",
+        c200="#bdbdbd",
+        c300="#bdbdbd",
+        c400="#bbbbc2",
+        c50="rgba(255, 255, 255, 1)",
+        c500="#71717a",
+        c600="#52525b",
+        c700="#3f3f46",
+        c800="#27272a",
+        c900="#18181b",
+        c950="#0f0f11",
+    ),
+    font=["Helvetica Neue", "Helvetica", "Arial", "sans-serif"],
+).set(
+    body_text_color="*neutral_900",
+    embed_radius="*radius_md",
+    background_fill_primary="#fafafa",
+    border_color_primary="*neutral_100",
+    color_accent="*primary_600",
+    code_background_fill="*neutral_50",
+    block_background_fill="#ffffff",
+    panel_background_fill="*background_fill_primary",
+    checkbox_label_background_fill="*neutral_50",
+    checkbox_label_background_fill_hover="*neutral_100",
+    input_background_fill="*neutral_50",
+    input_background_fill_hover="*neutral_50",
+    input_border_color="*neutral_100",
+    input_border_width="*block_border_width",
+    button_primary_background_fill="*primary_600",
+    button_secondary_background_fill="*neutral_50",
+    button_secondary_text_color="*neutral_900",
+)
+
+logo = """
+<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;">
+    <g transform="matrix(0.223413,0,0,0.223413,-26.9959,-25.129)">
+        <g>
+            <g>
+                <g transform="matrix(1,0,0,1,55.8337,37.4778)">
+                    <circle cx="128" cy="138" r="63" style="fill:url(#_Linear1);"/>
+                </g>
+                <g transform="matrix(1,0,0,1,55.8337,122.002)">
+                    <circle cx="128" cy="138" r="63" style="fill:url(#_Linear2);"/>
+                </g>
+                <g transform="matrix(1,0,0,1,55.8337,205.07)">
+                    <circle cx="128" cy="138" r="63" style="fill:url(#_Linear3);"/>
+                </g>
+            </g>
+            <g>
+                <g transform="matrix(1,0,0,1,121,163.525)">
+                    <circle cx="128" cy="138" r="63" style="fill:url(#_Linear4);"/>
+                </g>
+                <g transform="matrix(1,0,0,1,121,79)">
+                    <circle cx="128" cy="138" r="63" style="fill:url(#_Linear5);"/>
+                </g>
+            </g>
+            <g transform="matrix(1,0,0,1,183,124.525)">
+                <circle cx="128" cy="138" r="63" style="fill:url(#_Linear6);"/>
+            </g>
+        </g>
+    </g>
+    <defs>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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>
+    </defs>
+</svg>
+"""