This guide covers how to style Blocks with more flexibility, as well as adding Javascript code to event listeners.
For additional styling ability, you can pass any CSS to your app using the css= kwarg.
The base class for the Gradio app is gradio-container, so here's an example that changes the background color of the Gradio app:
with gr.Blocks(css=".gradio-container {background-color: red}") as demo:
...
If you'd like to reference external files in your css, preface the file path (which can be a relative or absolute path) with "file=", for example:
with gr.Blocks(css=".gradio-container {background-image: url('file=clouds.jpg')}") as demo:
...
You can also pass the filepath to a CSS file to the css argument.
elem_id ArgumentYou can elem_id to add an HTML element id to any component. This will allow you to select elements more easily with CSS.
with gr.Blocks(css="#warning {color: red}") as demo:
box1 = gr.Textbox(value="Good Job")
box2 = gr.Textbox(value="Failure", elem_id="warning")
The CSS ruleset will only target the second Textbox here.
Event listeners have a _js argument that can take a Javascript function as a string and treat it just like a Python event listener function. You can pass both a Javascript function and a Python function (in which case the Javascript function is run first) or only Javascript (and set the Python fn to None). Take a look at the code below:
import gradio as gr
blocks = gr.Blocks()
with blocks as demo:
subject = gr.Textbox(placeholder="subject")
verb = gr.Radio(["ate", "loved", "hated"])
object = gr.Textbox(placeholder="object")
with gr.Row():
btn = gr.Button("Create sentence.")
reverse_btn = gr.Button("Reverse sentence.")
foo_bar_btn = gr.Button("Foo bar.")
def sentence_maker(w1, w2, w3):
return f"{w1} {w2} {w3}"
output1 = gr.Textbox(label="output 1")
output2 = gr.Textbox(label="verb")
output3 = gr.Textbox(label="verb reversed")
btn.click(sentence_maker, [subject, verb, object], output1)
reverse_btn.click(None, [subject, verb, object], output2, _js="(s, v, o) => o + ' ' + v + ' ' + s")
verb.change(lambda x: x, verb, output3, _js="(x) => [...x].reverse().join('')")
foo_bar_btn.click(None, [], subject, _js="(x) => x + ' foo'")
demo.launch()