Flexibly styling and placing elements in Gradio Blocks

🔒 Gradio
1

Hi there, I am trying write a blog doing EDA on a dataset. I had decided to use gradio Blocks due to its flexibility even though its only quite recently released. However, i am still facing a few difficulties regarding the placement of elements in rows and columns

For instance the following code would give the Markdown() and Plot() equal widths as they in a row. However, I would like to make the look and feel better by giving the Markdown() 70% of the width of the screen and the Plot(), the remaining 30%. I also in turn would like to increase the height of the Plot() to make it more readable. is this possible?

Here is the code that I have described above:

import gradio as gr
import pandas as pd
import matplotlib.pyplot as plt

demo = gr.Blocks()
df = pd.DataFrame(columns=['Name', 'Number'], data=[
    ['A', 101],
    ['B', 125],
    ['C', 300],
    ['D', 548],
    ['E', 5333]
])


def get_plot():
    fig = plt.figure(figsize=(20, 10))
    plt.bar(df['Name'], df['Number'])
    return fig


with demo:
    with gr.Row():
        with gr.Column():
            gr.Markdown("""
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et ligula ullamcorper malesuada proin libero. Quam id leo in vitae turpis massa sed elementum. Et egestas quis ipsum suspendisse ultrices. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Lacus luctus accumsan tortor posuere ac ut consequat semper. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Neque laoreet suspendisse interdum consectetur libero. Nunc consequat interdum varius sit amet mattis vulputate enim. Blandit turpis cursus in hac habitasse platea dictumst. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet.
                Id venenatis a condimentum vitae sapien pellentesque habitant. Orci ac auctor augue mauris. Sed id semper risus in hendrerit gravida rutrum quisque. Vitae tempus quam pellentesque nec. Pharetra diam sit amet nisl suscipit adipiscing. Dictum at tempor commodo ullamcorper a lacus vestibulum. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Nisl condimentum id venenatis a condimentum vitae. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Quam elementum pulvinar etiam non quam lacus suspendisse. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Sed euismod nisi porta lorem. Lectus arcu bibendum at varius vel pharetra vel. In arcu cursus euismod quis viverra nibh cras. Adipiscing diam donec adipiscing tristique risus nec feugiat. Lacus sed turpis tincidunt id aliquet risus feugiat in ante.
            """).style()
        with gr.Column():
            gr.Plot(value=get_plot())

demo.launch()

Thanks in advance!

2

We will support column width’s directly soon, but for now you can apply custom CSS and elem_id’s, e.g.

import matplotlib.pyplot as plt
import pandas as pd

def get_plot():
    df = pd.DataFrame([["Al", 3], ["Bo", 2]], columns=["Name", "Number"])
    fig = plt.figure(figsize=(20, 10))
    plt.bar(df['Name'], df['Number'])
    return fig


with gr.Blocks(css="#md {width: 30%} #plot {width: 70%} ") as demo:
    with gr.Row():
          gr.Markdown("""Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et ligula ullamcorper malesuada proin libero. Quam id leo in vitae turpis massa sed elementum. Et egestas quis ipsum suspendisse ultrices. Posuere lorem ipsum dolor sit amet consectetur adipiscing. Lacus luctus accumsan tortor posuere ac ut consequat semper. Diam quis enim lobortis scelerisque fermentum dui faucibus in. Neque laoreet suspendisse interdum consectetur libero. Nunc consequat interdum varius sit amet mattis vulputate enim. Blandit turpis cursus in hac habitasse platea dictumst. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit amet.
              Id venenatis a condimentum vitae sapien pellentesque habitant. Orci ac auctor augue mauris. Sed id semper risus in hendrerit gravida rutrum quisque. Vitae tempus quam pellentesque nec. Pharetra diam sit amet nisl suscipit adipiscing. Dictum at tempor commodo ullamcorper a lacus vestibulum. Vestibulum lectus mauris ultrices eros in cursus turpis massa. Nisl condimentum id venenatis a condimentum vitae. Aliquam sem fringilla ut morbi tincidunt augue interdum velit euismod. Quam elementum pulvinar etiam non quam lacus suspendisse. Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Sed euismod nisi porta lorem. Lectus arcu bibendum at varius vel pharetra vel. In arcu cursus euismod quis viverra nibh cras. Adipiscing diam donec adipiscing tristique risus nec feugiat. Lacus sed turpis tincidunt id aliquet risus feugiat in ante.
          """, elem_id="md")
          gr.Plot(value=get_plot(), elem_id="plot")

demo.launch()
3

Thank you! Although I believe I can’t use this approach to set custom width to 2 Column() elements in a Row(). What I am trying to do here is set the first Column() to 30% of the width and then use it as a Table of Contents for the contents in my 2nd Column(). In short, I am trying to emulate st.sidebar(), is this possible too? @aliabid94

1 Like