DEV Community

0xkoji
0xkoji

Posted on

7

Use CSS with Gradio

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()   
Enter fullscreen mode Exit fullscreen mode

original

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()
Enter fullscreen mode Exit fullscreen mode

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

button {
  background: red;
  color: #ffffff;
}
Enter fullscreen mode Exit fullscreen mode

styled

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.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up