Merge pull request #21 from stackhpc/feat/custom-css-and-js

Allow additional UI customisation via chart values

chart/web-app/app.py

@@ -127,17 +127,6 @@ def inference(latest_message, history):
 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};
-        padding-top: 0.5em;
-    }}
-    """.format(
-        settings.theme_title_colour
-    )
-
 
 def inference_wrapper(*args):
     """
@@ -171,12 +160,14 @@ def inference_wrapper(*args):
         scale=7,
     ),
     title=settings.page_title,
+    description=settings.page_description,
     retry_btn="Retry",
     undo_btn="Undo",
     clear_btn="Clear",
     analytics_enabled=False,
     theme=theme,
-    css=css_overrides,
+    css=settings.css_overrides,
+    js=settings.custom_javascript,
 ) as app:
     logger.debug("Gradio chat interface config: %s", app.config)
     # For running locally in tilt dev setup

chart/web-app/config.py

@@ -33,6 +33,7 @@ class AppSettings(BaseSettings):
         default_factory=lambda: f"http://llm-backend.{get_k8s_namespace()}.svc"
     )
     page_title: str = Field(default="Large Language Model")
+    page_description: Optional[str] = Field(default=None)
     hf_model_instruction: str = Field(
         default="You are a helpful and cheerful AI assistant. Please respond appropriately."
     )
@@ -55,8 +56,10 @@ class AppSettings(BaseSettings):
     theme_params: dict[str, Union[str, List[str]]] = Field(default_factory=dict)
     # Overrides for theme.body_background_fill property
     theme_background_colour: Optional[str] = Field(default=None)
-    # Custom page title colour override passed as CSS
-    theme_title_colour: Optional[str] = Field(default=None)
+    # Provides arbitrary CSS and JS overrides to the UI,
+    # see https://www.gradio.app/guides/custom-CSS-and-JS
+    css_overrides: Optional[str] = Field(default=None)
+    custom_javascript: Optional[str] = Field(default=None)
 
     # Method for loading settings file
     @staticmethod

chart/web-app/example-settings.yml

@@ -2,21 +2,39 @@ backend_url: http://localhost:8081
 hf_model_name: ise-uiuc/Magicoder-S-DS-6.7B
 
 # model_instruction: You are a helpful and cheerful AI assistant. Please respond appropriately.
+# llm_max_tokens:
+# llm_temperature:
+# llm_top_p:
+# llm_frequency_penalty:
+# llm_presence_penalty:
 
-page_description: "[Privacy statement](https://google.com)"
+page_description: "[Custom Markdown](https://google.com)"
 
 # UI theming tweaks
-# theme_title_colour: white
-# theme_background_colour: "#00376c"
+theme_background_colour: "#00376c"
 theme_params:
   # primary_hue: blue
+  # Use local system fonts rather than Google fonts API
   font:
   - sans-serif
   font_mono:
   - sans-serif
 
-# llm_max_tokens:
-# llm_temperature:
-# llm_top_p:
-# llm_frequency_penalty:
-# llm_presence_penalty:
+# Customise page title colour
+css_overrides: |
+  h1 {
+      color: white;
+      padding-top: 1em;
+  }
+
+# Example of a custom JS function which adds a
+# privacy statement link to the page footer
+custom_javascript: |
+  function addPrivacyStatement() {
+      var footer = document.querySelector('footer');
+      footer.appendChild(footer.children[1].cloneNode(deep=true));
+      var item = footer.children[2].cloneNode();
+      item.href = 'https://gdpr.eu/eu-gdpr-personal-data/';
+      item.textContent = 'Privacy Statement';
+      footer.appendChild(item);
+  }