Intel® theme for Gradio

Table of Contents

• How to Use
• What This Theme Provides
  • Header & Footer Components
    • Header
    • Footer
• Troubleshooting
  • Python dependency troubles
  • CSS file not found error
  • no_proxy environment variable
• How to Provide Feedback or Request New Features

What is the Intel theme for Gradio

The Intel theme for Gradio uses Gradio's native theming capabilities to apply the Intel brand to a gradio application. It does not have any 3rd party dependencies other than gradio.

How to Use

1. If using a virtual environment (strongly recommended), activate the virtual environment:

   source .venv/bin/activate

   Or in Windows:

   source .venv/Source/activate

2. Install the intel_gradio_theme package:

   pip install --prefer-binary git+https://github.com/intel/intel-gradio-theme.git

   intel_gradio_theme has release tags and specific versions can be targeted:

   pip install --prefer-binary git+https://github.com/intel/intel-gradio-theme.git@v0.1.5

3. Apply the theme to your Gradio app:

   import gradio as gr
   from intel_gradio_theme import SparkTheme
   
   demo = gr.Interface(...)
   theme = SparkTheme()
   cssstyles = theme.load_css()
   demo.launch(theme=theme, css=cssstyles)

   If Blocks are used to create the interface, then apply the theme to the Blocks

   with gr.Blocks(theme=theme, css=cssstyles) as demo:

What This Theme Provides

There are two themes included in this repository:

• Spark Classic Blue is provided by importing SparkTheme
• Spark Tiber is provided by importing SparkThemeTb

The Spark Classic Blue theme uses the Intel Corporate Brand colors (Blue), while the Spark Tiber theme uses the Intel Tiber colors (aqua, cosmos, cobalt). Unless you know that your product line uses the Intel Tiber Brand, you should use the Spark Classic Blue theme (SparkTheme).

Header & Footer Components

Header

To add a header to your Gradio app using the Intel theme, you can use the header method provided in the SparkTheme class. Here is an example:

from intel_gradio_theme import SparkTheme

demo = gr.Interface(...)
theme = SparkTheme()
demo.launch(theme=theme, components=[theme.header("Welcome to My Gradio App")])

This will add a header with the specified text to your Gradio app.

Footer

To add a footer to your Gradio app using the Intel theme, you can use the footer method provided in the SparkTheme class. Here is an example:

from intel_gradio_theme import SparkTheme

demo = gr.Interface(...)
theme = SparkTheme()
demo.launch(theme=theme, components=[theme.footer("Thank you for using our app")])

This will add a footer with the specified text to your Gradio app.

Troubleshooting

Python dependency troubles

If there are dependency problems, such as being unable to find gradio after installing it, then create a virtual environment and run from there. Read more about using virtual environments in python.

python3 -m venv .venv
...
source .venv/bin/activate
...
export NO_PROXY=intel.com,localhost,127.0.0.1
...
pip install --prefer-binary git+https://github.com/intel/intel-gradio-theme.git

CSS file not found error

If you encounter a FileNotFoundError indicating No such file or directory: '.../intel_gradio_theme/spark.css', it means the CSS file is not being properly included in the package. To fix this please update to version 0.1.7 or newer.

no_proxy environment variable

If you get the following error when running gradio:

ValueError: When localhost is not accessible, a shareable link must be created. Please set share=True or check your proxy settings to allow access to localhost.

ensure your environment variable for no_proxy is set:

export NO_PROXY=intel.com,localhost,127.0.0.1

How to Provide Feedback or Request New Features

1. Open an Issue: Go to the Issues tab in the repository, click "New Issue," and describe your feedback or feature request.

Your feedback and feature requests are greatly appreciated and help improve the project!