Gradio Notes

Installation and Set-up

In a new terminal run (see below if this doesn't work):

docker pull matimedes/southerncrossai:modelworks

docker run -it --name modelworks-container -p 7860:7860 matimedes/southerncrossai:modelworks 

or run container with GPU:

docker run -it --gpus all --runtime=nvidia --name modelworks-container-gpu -p 7860:7860  matimedes/southerncrossai:modelworks /bin/bash

use cd to move to the dir you want to work in then run

python3 -m venv ./app/venv

source ./app/venv/bin/activate

pip install gradio

touch ./app/app.py

open the app.py file and write the following inside

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

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

demo.launch(server_name="0.0.0.0", server_port=7860)

save that then in the same directory run

python ./app/app.py

open a browser and go to http://localhost:7860

Interfaces

General

More information on Interfaces can be found at Gradio's Documentation

Default Interface

• Official page on Gradio Docs: https://www.gradio.app/docs/gradio/interface
• Pros:
  • Most UI elements are all in one place
    • Good for something meant for easy use (such as a chatbot)
• Cons:
  • Limited input and output options
    • Expects text inputs and outputs only

ChatInterface

• Official page on Gradio Docs: https://www.gradio.app/docs/gradio/chatinterface
• Pros:
  • Good for inputs and outputs of differing types
    • e.g. This would be the perfect interface for an image generator (inputs = "text", outputs = "image")
• Cons:
  • Components are all separated
    • This could be unnecessary for something simpler like a chatbot

Blocks

• Official page on Gradio Docs: https://www.gradio.app/docs/gradio/blocks
• This is not necessarily an interface, but rather a functionality of Gradio that can combine both components and interfaces
• It does, however, have a way of distributing attributes across all components/interfaces
  • This allows for UI to be more unique, but also uniform
• You can set it up by pretty much stacking components and interfaces on top of each other
  • An example can be seen below:

with gr.Blocks( ... ) as demo:
    gr.Markdown( ... ),
    gr.ChatInterface(
        fn=...,
        type="messages",
        # ... insert any other attributes here
    )
    .
    .
    .

Components

Markdown

• Official page on Gradio Docs: https://www.gradio.app/docs/gradio/markdown
• Pros:
  • A straightforward way of implementing simple UI changes
    • e.g. You are able to add an image
  • Pretty simple once you get the hang of the Markdown language
• Cons:
  • Probably won't be that useful if you have no idea how Markdown works
    • You can study up here
  • You can choose to have more complex Markdown, but it will requires HTML-like notation
    • You can study up here
  • Can be hard to track
    • Can you read this?

Rows

• Official page on Gradio Docs: https://www.gradio.app/docs/gradio/row
• This is another functionality of Gradio that can connect components/interfaces together. This time, it groups components/interfaces side by side, as seen below (code credit (thank you!)):

with gr.Blocks() as demo:
    .
    .
    .
    # Places two or more components side by side
    with gr.Row():
        pdf_input = gr.File(label="📤 Upload PDF file", type="filepath")
        pdf_output = gr.Textbox(label="📊 Processing Result")
    .
    .
    .

Customisation Options

Attributes

• wip

Theming

• Has CSS-like notation
• Utils it uses (e.g. color, font) can be found here
• Colours
  • Gradio has a selection of colours you can choose from (you can refer to all possible names here)
  • You can make custom Gradio colours by typing the following:

example_hue = gr.themes.Color(
                c50=[colour 1], # colour of chatwindow (light)*
                c100=[colour 2], # text colour outside
                c200=[colour 3], # text/icon colour of chatwindow (dark), inside of textbox (light)
                c300=[colour 4], # what
                c400=[colour 5],
                c500=[colour 6], # text/icon inside chatwindow (light)
                c600=[colour 7],
                c700=[colour 8], # inside textbox/textbubble, border (dark)*
                c800=[colour 9], # outside textbox (dark), text colour (light)*
                c900=[colour 10], # colour of chatwindow*
                c950=[colour 11]), # error colour and dark mode settings window

• More information can be found here

CSS and JS

• This can be achieved by just copying and pasting CSS or JS code into a String, turning it into a variable in Python, and assigning it as a parameter of a given interface.
  • e.g., follow the instructions below:
    • Make up a random bit of CSS (e.g. .gradio-container {background-color: red})
    • Make a variable (e.g. my_css)
    • Write css = "[INSERT YOUR CSS HERE]"
    • Within the brackets of your Gradio interface, insert "css=my_css")
• More information can be found here

(more to come!)

Useful Information

• If you want to make the app.py file from the command line type vi /app.py and then press i to insert code then copy in the necessary code. Then press Esc then type :wq then Enter
• Otherwise, you might want to do the following if you want to test files that are already in your system but you are using a non-Linux device:
  • docker cp "[INSERT LOCAL PATH TO YOUR FILE YOU WANT TO RUN]" [INSERT CONTAINER NAME]:[INSERT DIRECTORY OF CONTAINER YOU WANT TO SAVE THE FILE IN]
• Alternatively, if you already have Gradio installed in a container but did not expose the port (-p 7860:7860), then you can run the following:
  • docker commit [INSERT CONTAINER NAME] [INSERT WHAT YOU'D LIKE TO CALL YOUR NEW IMAGE]
  • docker run -it --name [INSERT WHAT YOU'D LIKE TO CALL YOUR NEW CONTAINER] -p 7860:7860 [INSERT WHAT YOU'D LIKE TO CALL YOUR NEW IMAGE]