How to Add CSS to Gradio App

Gradio emerges as a revolutionary tool, providing the swiftest route to showcase your machine learning models through a user-friendly web interface. This dynamic platform ensures that your models are easily accessible and usable by anyone, anywhere.

import gradio as gr



def greet(name):

    return "Hello " + name + "!"



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

demo.launch()

Gradio facilitates seamless demonstrations of machine learning models, making it an ideal choice for developers and data scientists looking to showcase their creations effortlessly. The snippet above demonstrates a simple implementation where a greeting function is exposed through a text input interface.

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()

Enhancing Visual Appeal with CSS

Gradio doesn't just stop at functionality; it also offers a way to enhance the visual appeal of your interfaces. By introducing a custom CSS file, such as 'style.css' in the example above, developers can tailor the look and feel of their demonstrations. The added load_css function dynamically incorporates the CSS file, allowing for a personalized touch.

/* style.css */



button {

  background: red;

  color: #ffffff !important;

}

Customizing Styles with CSS

The provided CSS snippet showcases the ability to customize styles, such as button appearances. Notably, the use of !important is highlighted, emphasizing its necessity to override properties due to Gradio's underlying use of the Svelte framework.

In essence, Gradio empowers developers to not only exhibit the functionality of their machine learning models effortlessly but also provides the flexibility to mold the visual aspects to suit individual preferences. As the realm of machine learning continues to evolve, tools like Gradio play a pivotal role in bridging the gap between complex models and user-friendly interfaces.