Use CSS with Gradio

#python #gradio #css

What is Gradio?

Gradio is the fastest way to demo your machine learning model with a friendly web interface so that anyone can use it, anywhere!

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text")
demo.launch()

import gradio as gr

def load_css():
    with open('style.css', 'r') as file:
        css_content = file.read()
    return css_content

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="text", outputs="text", css=load_css())
demo.launch()

Add load_css function to load style.css file. Then add a css file to the same folder.

button {
  background: red;
  color: #ffffff;
}

The tricky part is that we sometimes need to use !important to override properties. That is needed because Gradio itself uses a js framework, Svelte so Gradio UI components have their style.