Use CSS with Gradio

0š¯•¸koji
Feb 1, 2024

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.

--

--

0š¯•¸koji

software engineer works for a Biotechnology Research startup in Brooklyn. #CreativeCoding #Art #IoT #MachineLearning #python #typescript #javascript #reactjs