Update examples that require the run() method (#15096)

Co-authored-by: Rohit Gupta <[email protected]>

Author: awaelchli

docs/source-app/workflows/add_web_ui/html/basic.rst

@@ -53,20 +53,27 @@ First **create a file named app.py** with the app content (in the same folder as
 
     # app.py
     import lightning as L
+    import lightning.app.frontend as frontend
+
 
     class HelloComponent(L.LightningFlow):
         def configure_layout(self):
-            return L.app.frontend.web.StaticWebFrontend(serve_dir='.')
+            return frontend.StaticWebFrontend(serve_dir='.')
+
 
     class LitApp(L.LightningFlow):
         def __init__(self):
             super().__init__()
             self.hello_component = HelloComponent()
 
+        def run(self):
+            self.hello_component.run()
+
         def configure_layout(self):
             tab1 = {"name": "home", "content": self.hello_component}
             return tab1
 
+
     app = L.LightningApp(LitApp())
 
 ----
@@ -100,20 +107,24 @@ Enable an HTML UI for the component
 Give the component an HTML UI, by returning a ``StaticWebFrontend`` object from the ``configure_layout`` method:
 
 .. code:: bash
-    :emphasize-lines: 5,6
+    :emphasize-lines: 6,7
 
     # app.py
     import lightning as L
+    import lightning.app.frontend as frontend
 
     class HelloComponent(L.LightningFlow):
         def configure_layout(self):
-            return L.app.frontend.web.StaticWebFrontend(serve_dir='.')
+            return frontend.StaticWebFrontend(serve_dir='.')
 
     class LitApp(L.LightningFlow):
         def __init__(self):
             super().__init__()
             self.hello_component = HelloComponent()
 
+        def run(self):
+            self.hello_component.run()
+
         def configure_layout(self):
             tab1 = {"name": "home", "content": self.hello_component}
             return tab1
@@ -129,21 +140,25 @@ Route the UI in the root component
 The final step, is to tell the Root component in which tab to render this component's UI.
 In this case, we render the ``HelloComponent`` UI in the ``home`` tab of the application.
 
-.. code:: bash
-    :emphasize-lines: 14, 15
+.. code:: python
+    :emphasize-lines: 18, 19
 
     # app.py
     import lightning as L
+    import lightning.app.frontend as frontend
 
     class HelloComponent(L.LightningFlow):
         def configure_layout(self):
-            return L.app.frontend.web.StaticWebFrontend(serve_dir='.')
+            return frontend.StaticWebFrontend(serve_dir='.')
 
     class LitApp(L.LightningFlow):
         def __init__(self):
             super().__init__()
             self.hello_component = HelloComponent()
 
+        def run(self):
+            self.hello_component.run()
+
         def configure_layout(self):
             tab1 = {"name": "home", "content": self.hello_component}
             return tab1

docs/source-app/workflows/add_web_ui/panel/basic.rst

@@ -84,6 +84,9 @@ Then, create a file named ``app.py`` with the following App content:
             super().__init__()
             self.lit_panel = LitPanel()
 
+        def run(self):
+            self.lit_panel.run()
+
         def configure_layout(self):
             return {"name": "home", "content": self.lit_panel}
 
@@ -172,6 +175,9 @@ the ``configure_layout`` method of the Lightning Component you want to connect t
             super().__init__()
             self.lit_panel = LitPanel()
 
+        def run(self):
+            self.lit_panel.run()
+
         def configure_layout(self):
             return {"name": "home", "content": self.lit_panel}
 
@@ -190,7 +196,7 @@ The second step, is to tell the Root component in which tab to render this compo
 In this case, we render the ``LitPanel`` UI in the ``home`` tab of the app.
 
 .. code:: python
-    :emphasize-lines: 16-17
+    :emphasize-lines: 19-20
 
     import lightning as L
     from lightning.app.frontend.panel import PanelFrontend
@@ -207,9 +213,14 @@ In this case, we render the ``LitPanel`` UI in the ``home`` tab of the app.
             super().__init__()
             self.lit_panel = LitPanel()
 
+        def run(self):
+            self.lit_panel.run()
+
         def configure_layout(self):
             return {"name": "home", "content": self.lit_panel}
 
+    app = L.LightningApp(LitApp())
+
 ----
 
 *************

docs/source-app/workflows/add_web_ui/streamlit/basic.rst

@@ -39,20 +39,24 @@ First **create a file named app.py** with the app content:
 
     # app.py
     import lightning as L
+    import lightning.app.frontend as frontend
     import streamlit as st
 
     def your_streamlit_app(lightning_app_state):
         st.write('hello world')
 
     class LitStreamlit(L.LightningFlow):
         def configure_layout(self):
-            return L.app.frontend.StreamlitFrontend(render_fn=your_streamlit_app)
+            return frontend.StreamlitFrontend(render_fn=your_streamlit_app)
 
     class LitApp(L.LightningFlow):
         def __init__(self):
             super().__init__()
             self.lit_streamlit = LitStreamlit()
 
+        def run(self):
+            self.lit_streamlit.run()
+
         def configure_layout(self):
             tab1 = {"name": "home", "content": self.lit_streamlit}
             return tab1
@@ -114,24 +118,28 @@ Link this function to the Lightning App by using the ``StreamlitFrontend`` class
 the ``configure_layout`` method of the Lightning component you want to connect to Streamlit.
 
 .. code:: python
-    :emphasize-lines: 8-10
+    :emphasize-lines: 9-11
 
     # app.py
     import lightning as L
+    import lightning.app.frontend as frontend
     import streamlit as st
 
     def your_streamlit_app(lightning_app_state):
         st.write('hello world')
 
     class LitStreamlit(L.LightningFlow):
         def configure_layout(self):
-            return L.app.frontend.StreamlitFrontend(render_fn=your_streamlit_app)
+            return frontend.StreamlitFrontend(render_fn=your_streamlit_app)
 
     class LitApp(L.LightningFlow):
         def __init__(self):
             super().__init__()
             self.lit_streamlit = LitStreamlit()
 
+        def run(self):
+            self.lit_streamlit.run()
+
         def configure_layout(self):
             tab1 = {"name": "home", "content": self.lit_streamlit}
             return tab1
@@ -149,24 +157,28 @@ The second step, is to tell the Root component in which tab to render this compo
 In this case, we render the ``LitStreamlit`` UI in the ``home`` tab of the application.
 
 .. code:: python
-    :emphasize-lines: 18
+    :emphasize-lines: 22
 
     # app.py
     import lightning as L
+    import lightning.app.frontend as frontend
     import streamlit as st
 
     def your_streamlit_app(lightning_app_state):
         st.write('hello world')
 
     class LitStreamlit(L.LightningFlow):
         def configure_layout(self):
-            return L.app.frontend.StreamlitFrontend(render_fn=your_streamlit_app)
+            return frontend.StreamlitFrontend(render_fn=your_streamlit_app)
 
     class LitApp(L.LightningFlow):
         def __init__(self):
             super().__init__()
             self.lit_streamlit = LitStreamlit()
 
+        def run(self):
+            self.lit_streamlit.run()
+
         def configure_layout(self):
             tab1 = {"name": "home", "content": self.lit_streamlit}
             return tab1

docs/source-app/workflows/add_web_ui/streamlit/intermediate.rst

@@ -16,10 +16,11 @@ To modify the variables of a Lightning component, access the ``lightning_app_sta
 For example, here we increase the count variable of the Lightning Component every time a user presses a button:
 
 .. code:: python
-    :emphasize-lines: 7, 13
+    :emphasize-lines: 8, 14
 
     # app.py
     import lightning as L
+    import lightning.app.frontend as frontend
     import streamlit as st
 
 
@@ -35,14 +36,17 @@ For example, here we increase the count variable of the Lightning Component ever
             self.count = 0
 
         def configure_layout(self):
-            return L.app.frontend.StreamlitFrontend(render_fn=your_streamlit_app)
+            return frontend.StreamlitFrontend(render_fn=your_streamlit_app)
 
 
     class LitApp(L.LightningFlow):
         def __init__(self):
             super().__init__()
             self.lit_streamlit = LitStreamlit()
 
+        def run(self):
+            self.lit_streamlit.run()
+
         def configure_layout(self):
             tab1 = {"name": "home", "content": self.lit_streamlit}
             return tab1
@@ -61,10 +65,11 @@ parent component.
 In this example we update the value of the counter from the component:
 
 .. code:: python
-    :emphasize-lines: 6, 14
+    :emphasize-lines: 7, 15
 
     # app.py
     import lightning as L
+    import lightning.app.frontend as frontend
     import streamlit as st
 
 
@@ -81,7 +86,7 @@ In this example we update the value of the counter from the component:
             self.count += 1
 
         def configure_layout(self):
-            return L.app.frontend.StreamlitFrontend(render_fn=your_streamlit_app)
+            return frontend.StreamlitFrontend(render_fn=your_streamlit_app)
 
 
     class LitApp(L.LightningFlow):