UI improvements

.gitignore

@@ -6,4 +6,6 @@ __pycache__/
 **/*.secret
 
 # Ignore local dev helpers
-test-values.y[a]ml
+test-values.y[a]ml
+chart/web-app/settings.yml
+gradio-client-test.py

chart/.helmignore

@@ -31,4 +31,5 @@ __pycache__/
 images/
 .hf-token.secret
 hu-poc/
-test-values.yaml
+test-values.yaml
+web-app/settings.yml

chart/web-app/app.py

@@ -38,23 +38,52 @@ def inference(message, history):
         if chunk:
             data = json.loads(chunk.decode("utf-8"))
             output = data["text"][0]
-            # Manually trim the context from output
-            delimiter = settings.prompt_template.splitlines()[-1]
-            if delimiter in output:
-                output = output.split(delimiter)[-1]
+            # Manually trim the context from output if present
+            prompt_template_lines = settings.prompt_template.splitlines()
+            if len(prompt_template_lines) > 0:
+                delimiter = prompt_template_lines[-1]
+                if delimiter in output:
+                    output = output.split(delimiter)[-1]
             yield output
 
 
+# UI colour theming
+theme = gr.themes.Default(
+    primary_hue=settings.theme_primary_hue,
+    secondary_hue=settings.theme_secondary_hue,
+    neutral_hue=settings.theme_neutral_hue,
+)
+if settings.theme_background_colour:
+    theme.body_background_fill = settings.theme_background_colour
+
+css_overrides = ""
+if settings.theme_title_colour:
+    css_overrides += """
+    h1 {{
+        color: {0}
+    }}
+    """.format(settings.theme_title_colour)
+
+
+# Build main chat interface
 gr.ChatInterface(
     inference,
     chatbot=gr.Chatbot(
-        height=500,
+        # Height of conversation window in CSS units (string) or pixels (int)
+        height="70vh",
         show_copy_button=True,
-        # layout='panel',
     ),
-    textbox=gr.Textbox(placeholder="Ask me anything...", container=False, scale=7),
+    textbox=gr.Textbox(
+        placeholder="Ask me anything...", 
+        container=False, 
+        # Ratio of text box to submit button width
+        scale=7
+    ),
     title=settings.page_title,
     retry_btn="Retry",
     undo_btn="Undo",
     clear_btn="Clear",
+    analytics_enabled=False,
+    theme=theme,
+    css=css_overrides,
 ).queue().launch(server_name="0.0.0.0")

chart/web-app/config.py

@@ -3,6 +3,7 @@
 from pydantic_settings import BaseSettings, SettingsConfigDict
 import yaml
 
+from typing import Optional
 
 def get_k8s_namespace():
     namespace_file_path = "/var/run/secrets/kubernetes.io/serviceaccount/namespace"
@@ -25,7 +26,7 @@ class AppSettings(BaseSettings):
     model_config = SettingsConfigDict(env_prefix="llm_ui_")
 
     # General settings
-    backend_url: HttpUrl = f"http://llm-backend.{get_k8s_namespace()}.svc"
+    backend_url: HttpUrl = Field(default_factory=lambda: f"http://llm-backend.{get_k8s_namespace()}.svc")
     page_title: str = "Large Language Model"
 
     # Prompt settings
@@ -48,6 +49,16 @@ class AppSettings(BaseSettings):
     llm_params: dict[str, float] = {}
     llm_max_tokens: int = 1000
 
+    # UI theming
+    # Variables explicitly passed to gradio.theme.Default()
+    theme_primary_hue: str = Field(default="orange")
+    theme_secondary_hue: str = Field(default="blue")
+    theme_neutral_hue: str = Field(default="gray")
+    # Overrides for theme.body_background_fill property
+    theme_background_colour: Optional[str] = None
+    # Custom page title colour override passed as CSS
+    theme_title_colour: Optional[str] = None
+
     @staticmethod
     def load(file_path: str):
         try: