feat: customize gradio components with lightning colors

examples/app_gradio_custom_css/README.md

@@ -0,0 +1,36 @@
+# Customize Gradio components
+
+If you want to customize gradio component by yourself, you need to pass `css` argument to ServeGradio like this:
+
+```py
+class AnimeGANv2UI(ServeGradio):
+    inputs = gr.inputs.Image(type="pil")
+    outputs = gr.outputs.Image(type="pil")
+    ...
+    css='''
+      .gradio-container button.primary, .gradio-container button.plain {
+        background: red;
+        color: white;
+        font-size: 15;
+        font-weight: 500;
+    }
+    '''
+
+    def __init__(self):
+        super().__init__(css=self.css)
+        self.ready = False
+```
+
+You can also pass path to css file like this:
+
+```py
+class AnimeGANv2UI(ServeGradio):
+    inputs = gr.inputs.Image(type="pil")
+    outputs = gr.outputs.Image(type="pil")
+    ...
+    css="styles.css"
+
+    def __init__(self):
+        super().__init__(css=self.css)
+        self.ready = False
+```

examples/app_gradio_custom_css/app.py

@@ -0,0 +1,57 @@
+import gradio as gr
+
+import lightning as L
+from lightning.app.components.serve import ServeGradio
+
+
+class LitGradio(ServeGradio):
+    inputs = [
+        gr.components.Textbox(label="print your prompt here", elem_id="label"),
+        gr.components.Dropdown(
+            label="choose you model",
+            choices=[
+                "PulpSciFiDiffusion",
+                "pixel_art_diffusion_hard_256",
+                "pixel_art_diffusion_soft_256",
+            ],
+        ),
+        gr.components.Number(value=250, label="number of steps"),
+        gr.components.Audio(label="Audio"),
+        gr.components.Image(label="Image"),
+        gr.components.Video(label="Video"),
+        gr.components.HTML(label="HTML"),
+        gr.components.BarPlot(label="Bar Plot"),
+        gr.components.Button(value="Hi"),
+        gr.components.Chatbot(label="Bot"),
+        gr.components.Checkbox(label="Checkbox"),
+        gr.components.ColorPicker(label="Color Picker"),
+        gr.components.File(label="File"),
+        gr.components.Dataframe(label="Data Frame"),
+        gr.components.Gallery(label="Gallery"),
+        gr.components.HighlightedText(
+            label="Highlighted Text",
+        ),
+        gr.components.Image(label="Image"),
+        gr.components.JSON(label="JSON"),
+        gr.components.Label(label="Label"),
+        gr.components.LinePlot(label="Line Plot"),
+        gr.components.Markdown(label="Markdown"),
+        gr.components.Model3D(label="Model 3D"),
+        gr.components.Plot(label="Plot"),
+        gr.components.Radio(label="Radio"),
+        gr.components.ScatterPlot(label="Scatter Plot"),
+        gr.components.Slider(label="Slider"),
+        gr.components.Timeseries(label="Time Series"),
+        gr.components.UploadButton(label="Upload Button"),
+        gr.components.Video(label="Video"),
+    ]
+    outputs = gr.outputs.Image(type="pil", label="Output Image")
+
+    def predict(self, label, model, steps):
+        return 0
+
+    def build_model(self):
+        return None
+
+
+app = L.LightningApp(LitGradio())

src/lightning/app/components/serve/gradio.css

@@ -0,0 +1,77 @@
+:root {
+  --purple: rgb(121, 46, 229);
+  --purple-darker: rgb(109, 30, 229);
+  --button-primary-border-color-base: rgb(121, 46, 229);
+  --purple-gradient: linear-gradient(206.91deg, rgb(121, 46, 229) 16.83%, rgb(62, 171, 179) 144.59%);
+  --color-accent-base: var(--purple);
+  --color-border-highlight: var(--purple);
+}
+
+.gradio-container {
+  background: white;
+}
+
+.gradio-container input {
+  font-size: 15px;
+  border-radius: 6px;
+  box-shadow: none;
+}
+
+.gradio-container button.primary, .gradio-container button.plain {
+  background: var(--purple) !important;
+  color: white !important;
+  font-size: 15;
+}
+
+.gradio-container button.primary:hover, .gradio-container button.plain:hover {
+  background: var(--purple-darker);
+  color: white;
+}
+
+.gradio-container button.lg {
+  border-radius: 120px;
+}
+
+.gradio-container input:focus {
+  --tw-ring-opacity: 0;
+  --tw-border-opacity: 0.5;
+  box-shadow: none;
+  border-color: var(--purple);
+}
+.gradio-container textarea:focus {
+  --tw-ring-opacity: 0;
+  --tw-border-opacity: 0.5;
+  box-shadow: none;
+  border-color: var(--purple);
+}
+
+.gradio-container input:hover {
+  border-color: var(--purple);
+}
+
+.gradio-container input[type="range"] {
+  accent-color: var(--purple);
+}
+
+.gradio-container input[type="checkbox"]:checked {
+  background-color: var(--purple) !important;
+  border-color: var(--purple) !important;
+}
+
+.gradio-container input[type="checkbox"]:focus {
+  --ring-color: rgb(121, 46, 229 / .5) !important;
+  border-color: var(--purple) !important;
+}
+
+.gradio-container button.sm.plain:hover svg {
+  color: white !important;
+}
+
+.gradio-container .wrap:focus-within {
+  border-color: var(--purple) !important;
+  --ring-color: transparent !important;
+}
+
+.gradio-container th {
+  border-color: var(--purple);
+}

src/lightning/app/components/serve/gradio_server.py

@@ -13,13 +13,16 @@
 # limitations under the License.
 
 import abc
+import os.path
 from functools import partial
 from types import ModuleType
 from typing import Any, List, Optional
 
 from lightning.app.core.work import LightningWork
 from lightning.app.utilities.imports import _is_gradio_available, requires
 
+DEFAULT_CSS_FILE_PATH = os.path.join(os.path.dirname(os.path.realpath(__file__)), "gradio.css")
+
 if _is_gradio_available():
     import gradio
 else:
@@ -49,11 +52,12 @@ class ServeGradio(LightningWork, abc.ABC):
 
     _start_method = "spawn"
 
-    def __init__(self, *args: Any, **kwargs: Any):
+    def __init__(self, *args: Any, css=None, **kwargs: Any):
         requires("gradio")(super().__init__(*args, **kwargs))
         assert self.inputs
         assert self.outputs
         self._model = None
+        self._css = css
 
         self.ready = False
 
@@ -85,6 +89,7 @@ def run(self, *args: Any, **kwargs: Any):
             examples=self.examples,
             title=self.title,
             description=self.description,
+            css=self._css or DEFAULT_CSS_FILE_PATH,
         ).launch(
             server_name=self.host,
             server_port=self.port,

tests/integrations_app/public/test_gradio.py

@@ -28,5 +28,5 @@ def predict(self, *args, **kwargs):
     assert comp.model == "model"
     assert comp.predict() == "prediction"
     gradio_mock.Interface.assert_called_once_with(
-        fn=ANY, inputs=ANY, outputs=ANY, examples=ANY, title=None, description=None
+        fn=ANY, inputs=ANY, outputs=ANY, examples=ANY, title=None, description=None, css=ANY
     )