如何设置 Gradio 数据框的样式

简介

数据可视化是数据分析和机器学习的关键方面。Gradio 的 DataFrame 组件是网页应用中显示表格数据的常用方式。

但如果你想对数据表进行样式设置怎么办？如果你想添加背景颜色、部分突出显示单元格或更改数字的显示精度怎么办？本指南正是为你准备的！

让我们开始吧！

先决条件：我们将在示例中使用 gradio.Blocks 类。如果你还不熟悉它，可以先阅读 Blocks 指南。另外，请确保你使用的是 Gradio 的最新版本：pip install --upgrade gradio。

Pandas `Styler`

Gradio DataFrame 组件现在支持 pandas 类中的 Styler 类型的值。这使得我们可以重用 Styler 类丰富的现有 API 和文档，而不是自行发明新的样式格式。以下是一个完整的示例：

import pandas as pd 
import gradio as gr

# Creating a sample dataframe
df = pd.DataFrame({
    "A" : [14, 4, 5, 4, 1], 
    "B" : [5, 2, 54, 3, 2], 
    "C" : [20, 20, 7, 3, 8], 
    "D" : [14, 3, 6, 2, 6], 
    "E" : [23, 45, 64, 32, 23]
}) 

# Applying style to highlight the maximum value in each row
styler = df.style.highlight_max(color = 'lightgreen', axis = 0)

# Displaying the styled dataframe in Gradio
with gr.Blocks() as demo:
    gr.DataFrame(styler)
    
demo.launch()

Styler 类可用于对数据框应用条件格式和样式，使其更具视觉吸引力和可解释性。你可以突出显示某些值、应用渐变，甚至使用自定义 CSS 来设置 DataFrame 的样式。Styler 对象应用于 DataFrame，并返回一个具有相关样式属性的新对象，该对象可以直接预览，也可以在 Gradio 界面中动态渲染。

要了解更多关于 Styler 对象的信息，请阅读官方 pandas 文档：https://pandas.ac.cn/docs/user_guide/style.html

下面，我们将探讨几个示例

突出显示单元格

好的，让我们重新审视之前的例子。我们首先创建一个 pd.DataFrame 对象，然后用浅绿色突出显示每行中的最高值。

import pandas as pd 

# Creating a sample dataframe
df = pd.DataFrame({
    "A" : [14, 4, 5, 4, 1], 
    "B" : [5, 2, 54, 3, 2], 
    "C" : [20, 20, 7, 3, 8], 
    "D" : [14, 3, 6, 2, 6], 
    "E" : [23, 45, 64, 32, 23]
}) 

# Applying style to highlight the maximum value in each row
styler = df.style.highlight_max(color = 'lightgreen', axis = 0)

现在，我们只需将此对象传递给 Gradio DataFrame，就可以用 4 行 Python 代码可视化我们的彩色数据表。

import gradio as gr

with gr.Blocks() as demo:
    gr.Dataframe(styler)
    
demo.launch()

效果如下

字体颜色

除了突出显示单元格，你可能还想为单元格内的特定文本着色。以下是你可以更改某些列文本颜色的方法：

import pandas as pd 
import gradio as gr

# Creating a sample dataframe
df = pd.DataFrame({
    "A" : [14, 4, 5, 4, 1], 
    "B" : [5, 2, 54, 3, 2], 
    "C" : [20, 20, 7, 3, 8], 
    "D" : [14, 3, 6, 2, 6], 
    "E" : [23, 45, 64, 32, 23]
}) 

# Function to apply text color
def highlight_cols(x): 
    df = x.copy() 
    df.loc[:, :] = 'color: purple'
    df[['B', 'C', 'E']] = 'color: green'
    return df 

# Applying the style function
s = df.style.apply(highlight_cols, axis = None)

# Displaying the styled dataframe in Gradio
with gr.Blocks() as demo:
    gr.DataFrame(s)
    
demo.launch()

在此脚本中，我们定义了一个自定义函数 highlight_cols，它将所有单元格的文本颜色更改为紫色，但对 B、C 和 E 列覆盖为绿色。效果如下：

显示精度

有时，你处理的数据可能包含很长的浮点数，为了简洁起见，你可能只想显示固定位数的小数。pandas Styler 对象允许你设置数字的显示精度。以下是操作方法：

import pandas as pd
import gradio as gr

# Creating a sample dataframe with floating numbers
df = pd.DataFrame({
    "A" : [14.12345, 4.23456, 5.34567, 4.45678, 1.56789], 
    "B" : [5.67891, 2.78912, 54.89123, 3.91234, 2.12345], 
    # ... other columns
}) 

# Setting the precision of numbers to 2 decimal places
s = df.style.format("{:.2f}")

# Displaying the styled dataframe in Gradio
with gr.Blocks() as demo:
    gr.DataFrame(s)
    
demo.launch()

在此脚本中，Styler 对象的 format 方法用于将数字精度设置为两位小数。现在干净多了。

自定义样式

到目前为止，我们一直将样式限制在 Pandas Styler 类支持的范围内。但是，如果你想创建自定义样式，例如根据单元格的值部分突出显示它们，该怎么办？

这在 Styler 中是不可能实现的，但你可以通过创建自己的 styling 数组来实现，它是一个与数据大小和形状相同的二维数组。此列表中的每个元素都应该是一个 CSS 样式字符串（例如 "background-color: green"），它应用于包含单元格值的 <td> 元素（如果不需要自定义 CSS，则为空字符串）。同样，你可以创建一个 display_value 数组来控制每个单元格中显示的值（这可能与用于搜索/排序的底层值不同）。

以下是如何使用 gr.Dataframe 实现自定义样式的完整代码，如上面的截图所示：

import gradio as gr

data = [
    ["DeepSeek Coder", 79.3],
    ["Llama 3.3", 68.9],
    ["Qwen 2.5", 61.9],
    ["Gemma 2", 59.5],
    ["GPT 2", 18.3],
]

headers = ["Model", "% Correct (LeetCode Hard)"]

def get_styling(values):
    return [["", f"background: linear-gradient(90deg, rgba(220, 242, 220) {row[1]}%, transparent {row[1]}%)"] for row in values]

def get_display_value(values):
    display_values = []
    medals = ["🥇", "🥈", "🥉"]
    for i, row in enumerate(values):
        if i < 3:
            display_values.append([f"{medals[i]} {row[0]}", row[1]])
        else:
            display_values.append([row[0], row[1]])
    return display_values

styling = get_styling(data)
display_value = get_display_value(data)


value = {
    "data": data,
    "headers": headers,
    "metadata": {
        "styling": styling,
        "display_value": display_value,
    },
}

with gr.Blocks() as demo:
    gr.Dataframe(value, show_search="search")

demo.launch()

关于交互性的注意事项

需要注意的是，Gradio DataFrame 组件仅在非交互式（即“静态”模式）时接受自定义样式对象。如果 DataFrame 组件是交互式的，则样式信息将被忽略，并显示原始表格值。

DataFrame 组件默认是非交互式的，除非它用作事件的输入。在这种情况下，你可以通过如下设置 interactive 属性来强制组件为非交互式：

c = gr.DataFrame(styler, interactive=False)

总结 🎉

这只是使用 gradio.DataFrame 组件与 pandas 的 Styler 类可能实现的功能的一个小例子。快来尝试一下，告诉我们你的想法吧！