From 7144f400a7d9d2a27320df4e3dddefcc42af20a5 Mon Sep 17 00:00:00 2001 From: sd109 Date: Wed, 1 May 2024 11:24:10 +0100 Subject: [PATCH 1/2] Allow customising UI JS and CSS via app settings --- chart/web-app/app.py | 15 +++------------ chart/web-app/config.py | 7 +++++-- chart/web-app/example-settings.yml | 11 ++++++++--- 3 files changed, 16 insertions(+), 17 deletions(-) diff --git a/chart/web-app/app.py b/chart/web-app/app.py index 60fff12..bef9a91 100644 --- a/chart/web-app/app.py +++ b/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 diff --git a/chart/web-app/config.py b/chart/web-app/config.py index 9e45ae5..89818ac 100644 --- a/chart/web-app/config.py +++ b/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 diff --git a/chart/web-app/example-settings.yml b/chart/web-app/example-settings.yml index 2d9a6b7..d98b193 100644 --- a/chart/web-app/example-settings.yml +++ b/chart/web-app/example-settings.yml @@ -3,11 +3,10 @@ hf_model_name: ise-uiuc/Magicoder-S-DS-6.7B # model_instruction: You are a helpful and cheerful AI assistant. Please respond appropriately. -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 font: @@ -15,6 +14,12 @@ theme_params: font_mono: - sans-serif +css_overrides: | + h1 { + color: white; + padding-top: 1em; + } + # llm_max_tokens: # llm_temperature: # llm_top_p: From d2630aa6798f9fc2c3f5f9a58017947ae8d46456 Mon Sep 17 00:00:00 2001 From: sd109 Date: Wed, 1 May 2024 11:26:47 +0100 Subject: [PATCH 2/2] Add custom JS privacy statement example --- chart/web-app/example-settings.yml | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/chart/web-app/example-settings.yml b/chart/web-app/example-settings.yml index d98b193..34a3ae9 100644 --- a/chart/web-app/example-settings.yml +++ b/chart/web-app/example-settings.yml @@ -2,6 +2,11 @@ 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: "[Custom Markdown](https://google.com)" @@ -9,19 +14,27 @@ page_description: "[Custom Markdown](https://google.com)" 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 +# Customise page title colour css_overrides: | h1 { color: white; padding-top: 1em; } -# llm_max_tokens: -# llm_temperature: -# llm_top_p: -# llm_frequency_penalty: -# llm_presence_penalty: +# 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); + }