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.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

0𝕏koji
0𝕏koji

Written by 0𝕏koji

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

No responses yet

Write a response