feat: option to add custom meta tags to the UI container (#14915)

(cherry picked from commit 2721a2f)

Author: pritamsoni-hsr

requirements/app/base.txt

@@ -8,3 +8,4 @@ croniter>=1.3.0, <1.4.0  # strict; TODO: for now until we find something more ro
 traitlets>=5.3.0, <=5.4.0
 arrow>=1.2.0, <=1.2.2
 lightning-utilities==0.3.*
+beautifulsoup4<=4.8.2

src/lightning_app/core/app.py

@@ -18,12 +18,14 @@
     DEBUG_ENABLED,
     FLOW_DURATION_SAMPLES,
     FLOW_DURATION_THRESHOLD,
+    FRONTEND_DIR,
     STATE_ACCUMULATE_WAIT,
 )
 from lightning_app.core.queues import BaseQueue, SingleProcessQueue
 from lightning_app.frontend import Frontend
 from lightning_app.storage import Drive, Path
 from lightning_app.storage.path import storage_root_dir
+from lightning_app.utilities import frontend
 from lightning_app.utilities.app_helpers import _delta_to_app_state_delta, _LightningAppRef, Logger
 from lightning_app.utilities.commands.base import _process_requests
 from lightning_app.utilities.component import _convert_paths_after_init, _validate_root_flow
@@ -46,6 +48,7 @@ def __init__(
         self,
         root: "lightning_app.LightningFlow",
         debug: bool = False,
+        info: frontend.AppInfo = None,
     ):
         """The Lightning App, or App in short runs a tree of one or more components that interact to create end-to-end
         applications. There are two kinds of components: :class:`~lightning_app.core.flow.LightningFlow` and
@@ -62,6 +65,8 @@ def __init__(
                 It must define a `run()` method that the app can call.
             debug: Whether to activate the Lightning Logger debug mode.
                 This can be helpful when reporting bugs on Lightning repo.
+            info: Provide additional info about the app which will be used to update html title,
+                description and image meta tags and specify any additional tags as list of html strings.
 
         .. doctest::
 
@@ -133,6 +138,10 @@ def __init__(
 
         logger.debug(f"ENV: {os.environ}")
 
+        # update index.html,
+        # this should happen once for all apps before the ui server starts running.
+        frontend.update_index_file_with_info(FRONTEND_DIR, info=info)
+
     def get_component_by_name(self, component_name: str):
         """Returns the instance corresponding to the given component name."""
         from lightning_app.structures import Dict, List

src/lightning_app/utilities/frontend.py

@@ -0,0 +1,61 @@
+from dataclasses import dataclass
+from typing import List, Optional
+
+from bs4 import BeautifulSoup
+
+
+@dataclass
+class AppInfo:
+    title: Optional[str] = None
+    favicon: Optional[str] = None
+    description: Optional[str] = None
+    image: Optional[str] = None
+    # ensure the meta tags are correct or the UI might fail to load.
+    meta_tags: Optional[List[str]] = None
+
+
+def update_index_file_with_info(ui_root: str, info: AppInfo = None) -> None:
+    import shutil
+    from pathlib import Path
+
+    entry_file = Path(ui_root) / "index.html"
+    original_file = Path(ui_root) / "index.original.html"
+
+    if not original_file.exists():
+        shutil.copyfile(entry_file, original_file)  # keep backup
+    else:
+        # revert index.html in case it was modified after creating original.html
+        shutil.copyfile(original_file, entry_file)
+
+    if not info:
+        return
+
+    original = ""
+
+    with original_file.open() as f:
+        original = f.read()
+
+    with entry_file.open("w") as f:
+        f.write(_get_updated_content(original=original, info=info))
+
+
+def _get_updated_content(original: str, info: AppInfo) -> str:
+    soup = BeautifulSoup(original, "html.parser")
+
+    # replace favicon
+    if info.favicon:
+        soup.find("link", {"rel": "icon"}).attrs["href"] = info.favicon
+
+    if info.title is not None:
+        soup.find("title").string = info.title
+
+    if info.description:
+        soup.find("meta", {"name": "description"}).attrs["content"] = info.description
+
+    if info.image:
+        soup.find("meta", {"property": "og:image"}).attrs["content"] = info.image
+
+    if info.meta_tags:
+        soup.find("head").append(*[BeautifulSoup(meta, "html.parser") for meta in info.meta_tags])
+
+    return str(soup)