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..34a3ae9 100644 --- a/chart/web-app/example-settings.yml +++ b/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); + }