构建交互式颜色选择器：介绍Gradio的ColorPicker模块和方法

❤️觉得内容不错的话，欢迎点赞收藏加关注😊😊😊，后续会继续输入更多优质内容❤️
👉有问题欢迎大家加关注私戳或者评论（包括但不限于NLP算法相关，linux学习相关，读研读博相关......）👈

博主原文链接：https://www.yourmetaverse.cn/nlp/365/

请添加图片描述

（封面图由文心一格生成）

构建交互式颜色选择器：介绍Gradio的ColorPicker模块和方法

颜色选择器是图形用户界面中常见的组件，用于选择和设置颜色值。在开发交互式应用程序或集成机器学习模型时，使用颜色选择器可以提供更直观和灵活的用户体验。Gradio是一个功能强大的Python库，用于构建交互式界面，其中包含了许多实用的组件，包括ColorPicker模块。本文将介绍Gradio的ColorPicker模块及其相关方法和参数。

Gradio的ColorPicker模块概述

Gradio的ColorPicker模块是一个用于选择颜色的组件，用户可以通过它选择一个颜色值作为字符串输入。ColorPicker模块的输入是选择的颜色值，以字符串形式传递给函数；输出是从函数返回的字符串，并将颜色选择器的值设置为该字符串。使用ColorPicker模块，可以轻松地在应用程序中实现颜色选择的功能。

ColorPicker模块使用示例代码：

import gradio as gr
import numpy as np
import os
from PIL import Image, ImageColor


def change_color(icon, color):

    """
    Function that given an icon in .png format changes its color
    Args:
        icon: Icon whose color needs to be changed.
        color: Chosen color with which to edit the input icon.
    Returns:
        edited_image: Edited icon.
    """
    img = icon.convert("LA")
    img = img.convert("RGBA")
    image_np = np.array(icon)
    _, _, _, alpha = image_np.T
    mask = alpha > 0
    image_np[..., :-1][mask.T] = ImageColor.getcolor(color, "RGB")
    edited_image = Image.fromarray(image_np)
    return edited_image


inputs = [
    gr.Image(label="icon", type="pil", image_mode="RGBA"),
    gr.ColorPicker(label="color"),
]
outputs = gr.Image(label="colored icon")

demo = gr.Interface(
    fn=change_color,
    inputs=inputs,
    outputs=outputs,
    examples=[
        [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#ff0000"],
        [os.path.join(os.path.dirname(__file__), "rabbit.png"), "#0000FF"],
    ],
)

if __name__ == "__main__":
    demo.launch()

ColorPicker模块参数

ColorPicker模块具有一些可调整的参数，用于自定义和配置该模块的行为。下面是ColorPicker模块的常用参数：

value：默认的颜色值。可以是字符串、可调用对象或None，默认为None。
label：在界面中显示的组件名称。可以是字符串或None，默认为None。
info：组件的附加描述信息。可以是字符串或None，默认为None。
every：如果value是一个可调用对象，可以设置每隔一定时间调用该函数的时间间隔。默认为None。
show_label：是否显示组件的标签。默认为True。
container：是否将组件放置在容器中，提供一些额外的边框间距。默认为True。
scale：与相邻组件的相对宽度比例。默认为None。
min_width：最小像素宽度，如果屏幕空间不足，则会自动换行。默认为160。
interactive：是否允许用户交互编辑颜色值。如果不提供该

参数，则根据组件是用作输入还是输出进行推断。默认为None。

visible：是否显示组件。默认为True。
elem_id：组件在HTML DOM中的ID。可以用于定位CSS样式。默认为None。
elem_classes：组件在HTML DOM中的类列表。可以用于定位CSS样式。默认为None。

通过调整这些参数，可以根据需要自定义ColorPicker模块的外观和行为。

ColorPicker模块的方法

ColorPicker模块提供了几个方法，用于响应不同的事件和交互。以下是ColorPicker模块的常用方法：

1. `change`方法

gradio.ColorPicker.change(fn, inputs=None, outputs=None, api_name=None, status_tracker=None, scroll_to_output=False, show_progress="full", queue=None, batch=False, max_batch_size=4, preprocess=True, postprocess=True, cancels=None, every=None)

该方法在组件的值发生变化时触发，无论是由用户输入还是由函数更新导致的。可以在Gradio Blocks中使用该方法。主要参数包括：

fn：要在界面中封装的函数，通常是机器学习模型的预测函数。
inputs：作为输入使用的组件列表。
outputs：作为输出使用的组件列表。
api_name：在API文档中暴露该端点的名称。
status_tracker：状态跟踪器，默认为None。
scroll_to_output：如果为True，则在完成时滚动到输出组件。
show_progress：在等待期间是否显示进度动画。
queue：如果为True，则将请求放入队列（如果队列已启用）。如果为False，则即使队列已启用，也不会将此事件放入队列。如果为None，则使用Gradio应用程序的队列设置。
batch：如果为True，则函数应处理一批输入，即它应该接受每个参数的输入值列表。列表的长度应相等（最多长度为max_batch_size）。函数必须返回一个元组的列表（即使只有一个输出组件），其中元组中的每个列表对应一个输出组件。
max_batch_size：如果从队列调用此方法时，将最大批次数量的输入组合在一起（仅适用于batch=True）。
preprocess：是否在运行’fn’之前运行组件数据的预处理（例如，如果使用Image组件，则将其保留为base64字符串）。
postprocess：是否在将’fn’输出返回给浏览器之前运行组件数据的后处理。
cancels：触发此事件时要取消的其他事件列表。
every：在客户端连接打开的同时以’every’秒数运行此事件。以秒为单位解释。队列必须已启用。

change方法适用于在函数输入或组件值发生变化时触发更新。

2. `input`方法

gradio.ColorPicker.input(fn, inputs=None, outputs=None, api_name=None, status_tracker=None, scroll_to_output=False, show_progress="full", queue=None, batch=False, max_batch_size=4, preprocess=True, postprocess=True, cancels=None, every=None)

该方法在用户更改组件的值时触发，适用于Gradio Blocks。主要参数与change方法相同，用于响应用户输入的变化。

3. `submit`方法

gradio.ColorPicker.submit(fn, inputs=None, outputs=None, api_name=None, status_tracker=None, scroll_to_output=False, show_progress="full", queue=None, batch=False, max_batch_size=4, preprocess=True, postprocess=True, cancels=None, every=None)

该方法在用户按下回车键时触发，适用于Gradio Blocks。主要参数与change方法相同，用于在用户提交输入时触发函数。

4. `blur`方法

gradio.ColorPicker.blur(fn, inputs=None, outputs=None, api_name=None, status_tracker=None, scroll_to_output=False, show_progress="full", queue=None, batch=False, max_batch_size=4, preprocess=True, postprocess=True, cancels=None, every=None)

该方法在组件失去焦点/模糊（例如，当用户点击文本框之外的区域）时触发，适用于Gradio Blocks。主要参数与change方法相同，用于响应组件失去焦点的事件。

使用这些方法，可以根据不同的事件和交互情况来定义函数的行为和触发逻辑。

参数详解

下面是关于ColorPicker模块参数及其change、input、submit和blur方法的参数的表格总结：

参数名（Parameter）	数据类型（Type）	默认值（Default）	描述（Description）
value	str \| Callable \| None	None	颜色选择器的默认文本。如果是可调用对象，每当应用程序加载时将调用该函数以设置组件的初始值。
label	str \| None	None	组件在界面中的名称。
info	str \| None	None	附加的组件描述。
every	float \| None	None	如果 `value` 是可调用对象，则在客户端连接打开时以 ‘every’ 秒为单位运行该函数。否则无效。队列必须已启用。可以通过该组件的 .load_event 属性访问该事件（例如取消它）。
show_label	bool	True	如果为 True，则显示标签。
container	bool	True	如果为 True，则将组件放置在一个容器中，提供一些额外的边框间距。
scale	int \| None	None	相对于相邻组件在行中的宽度比例。例如，如果组件 A 的 scale=2，组件 B 的 scale=1，那么组件 A 的宽度将是组件 B 的两倍。应该是一个整数。
min_width	int	160	最小像素宽度，如果屏幕空间不足以满足此值，则换行。如果某个 scale 值导致此组件比 min_width 更窄，则首先遵守 min_width 参数。
interactive	bool \| None	None	如果为 True，则渲染为可编辑的颜色选择器；如果为 False，则禁用编辑。如果未提供，则根据组件是作为输入还是输出来推断。
visible	bool	True	如果为 False，则隐藏组件。
elem_id	str \| None	None	可选的字符串，将其分配为此组件在 HTML DOM 中的 id。可用于定位 CSS 样式。
elem_classes	list[str] \| str \| None	None	可选的字符串列表，将其分配为此组件在 HTML DOM 中的类。可用于定位 CSS 样式。

change 方法中的参数

参数名（Parameter）	数据类型（Type）	默认值（Default）	描述（Description）
fn	Callable \| None		要封装成界面的函数。通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，并且函数应返回单个值或元组，元组中的每个元素对应一个输出组件。
inputs	Component \| list[Component] \| set[Component] \| None	None	要用作输入的 Gradio 组件列表。如果函数不需要输入，则应使用空列表。
outputs	Component \| list[Component] \| None	None	要用作输出的 Gradio 组件列表。如果函数不返回输出，则应使用空列表。
api_name	str \| None	None	定义此参数将在 API 文档中公开端点。
status_tracker	None	None
scroll_to_output	bool	False	如果为 True，则在完成时将滚动到输出组件。
show_progress	‘full’ \| ‘minimal’ \| ‘hidden’	“full”	如果为 True，则在等待期间显示进度动画。
queue	bool \| None	None	如果为 True，则将请求放入队列中（如果已启用队列）。如果为 False，则即使启用了队列，也不会将此事件放入队列。如果为 None，则使用 gradio 应用程序的队列设置。
batch	bool	False	如果为 True，则函数应处理一批输入，这意味着它应接受每个参数的输入值列表。列表应具有相等的长度（并且最多为 `max_batch_size`）。然后函数必须返回元组列表（即使只有 1 个输出组件），元组中的每个列表对应一个输出组件。
max_batch_size	int	4	如果从队列中调用，则将一起批处理的最大输入数量（仅在 batch=True 时相关）。
preprocess	bool	True	如果为 False，则在运行 ‘fn’ 之前不会运行组件数据的预处理（例如，如果使用 `Image` 组件，则保留为 base64 字符串）。
postprocess	bool	True	如果为 False，则在将 ‘fn’ 的输出返回给浏览器之前不会运行组件数据的后处理。
cancels	dict[str, Any] \| list[dict[str, Any]] \| None	None	要取消的其他事件列表，当此侦听器触发时。例如，设置 `cancels=[click_event]` 将取消 click_event，其中 click_event 是另一个组件的 `.click` 方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但当前正在运行的函数将被允许完成。
every	float \| None	None	当客户端连接打开时，以 ‘every’ 秒为单位运行此事件。队列必须已启用。

input 方法中的参数

参数名（Parameter）	数据类型（Type）	默认值（Default）	描述（Description）
fn	Callable \| None		要封装成界面的函数。通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，并且函数应返回单个值或元组，元组中的每个元素对应一个输出组件。
inputs	Component \| list[Component] \| set[Component] \| None	None	要用作输入的 Gradio 组件列表。如果函数不需要输入，则应使用空列表。
outputs	Component \| list[Component] \| None	None	要用作输出的 Gradio 组件列表。如果函数不返回输出，则应使用空列表。
api_name	str \| None	None	定义此参数将在 API 文档中公开端点。
status_tracker	None	None
scroll_to_output	bool	False	如果为 True，则在完成时将滚动到输出组件。
show_progress	‘full’ \| ‘minimal’ \| ‘hidden’	“full”	如果为 True，则在等待期间显示进度动画。
queue	bool \| None	None	如果为 True，则将请求放入队列中（如果已启用队列）。如果为 False，则即使启用了队列，也不会将此事件放入队列。如果为 None，则使用 gradio 应用程序的队列设置。
batch	bool	False	如果为 True，则函数应处理一批输入，这意味着它应接受每个参数的输入值列表。列表应具有相等的长度（并且最多为 `max_batch_size`）。然后函数必须返回元组列表（即使只有 1 个输出组件），元组中的每个列表对应一个输出组件。
max_batch_size	int	4	如果从队列中调用，则将一起批处理的最大输入数量（仅在 batch=True 时相关）。
preprocess	bool	True	如果为 False，则在运行 ‘fn’ 之前不会运行组件数据的预处理（例如，如果使用 `Image` 组件，则保留为 base64 字符串）。
postprocess	bool	True	如果为 False，则在将 ‘fn’ 的输出返回给浏览器之前不会运行组件数据的后处理。
cancels	dict[str, Any] \| list[dict[str, Any]] \| None	None	要取消的其他事件列表，当此侦听器触发时。例如，设置 `cancels=[click_event]` 将取消 click_event，其中 click_event 是另一个组件的 `.click` 方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但当前正在运行的函数将被允许完成。
every	float \| None	None	当客户端连接打开时，以 ‘every’ 秒为单位运行此事件。队列必须已启用。

submit 方法中的参数

参数名（Parameter）	数据类型（Type）	默认值（Default）	描述（Description）
fn	Callable \| None		要封装成界面的函数。通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，并且函数应返回单个值或元组，元组中的每个元素对应一个输出组件。
inputs	Component \| list[Component] \| set[Component] \| None	None	要用作输入的 Gradio 组件列表。如果函数不需要输入，则应使用空列表。
outputs	Component \| list[Component] \| None	None	要用作输出的 Gradio 组件列表。如果函数不返回输出，则应使用空列表。
api_name	str \| None	None	定义此参数将在 API 文档中公开端点。
status_tracker	None	None
scroll_to_output	bool	False	如果为 True，则在完成时将滚动到输出组件。
show_progress	‘full’ \| ‘minimal’ \| ‘hidden’	“full”	如果为 True，则在等待期间显示进度动画。
queue	bool \| None	None	如果为 True，则将请求放入队列中（如果已启用队列）。如果为 False，则即使启用了队列，也不会将此事件放入队列。如果为 None，则使用 gradio 应用程序的队列设置。
batch	bool	False	如果为 True，则函数应处理一批输入，这意味着它应接受每个参数的输入值列表。列表应具有相等的长度（并且最多为 `max_batch_size`）。然后函数必须返回元组列表（即使只有 1 个输出组件），元组中的每个列表对应一个输出组件。
max_batch_size	int	4	如果从队列中调用，则将一起批处理的最大输入数量（仅在 batch=True 时相关）。
preprocess	bool	True	如果为 False，则在运行 ‘fn’ 之前不会运行组件数据的预处理（例如，如果使用 `Image` 组件，则保留为 base64 字符串）。
postprocess	bool	True	如果为 False，则在将 ‘fn’ 的输出返回给浏览器之前不会运行组件数据的后处理。
cancels	dict[str, Any] \| list[dict[str, Any]] \| None	None	要取消的其他事件列表，当此侦听器触发时。例如，设置 `cancels=[click_event]` 将取消 click_event，其中 click_event 是另一个组件的 `.click` 方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但当前正在运行的函数将被允许完成。
every	float \| None	None	当客户端连接打开时，以 ‘every’ 秒为单位运行此事件。队列必须已启用。

blur 方法中的参数

参数名（Parameter）	数据类型（Type）	默认值（Default）	描述（Description）
fn	Callable \| None		要封装成界面的函数。通常是机器学习模型的预测函数。函数的每个参数对应一个输入组件，并且函数应返回单个值或元组，元组中的每个元素对应一个输出组件。
inputs	Component \| list[Component] \| set[Component] \| None	None	要用作输入的 Gradio 组件列表。如果函数不需要输入，则应使用空列表。
outputs	Component \| list[Component] \| None	None	要用作输出的 Gradio 组件列表。如果函数不返回输出，则应使用空列表。
api_name	str \| None	None	定义此参数将在 API 文档中公开端点。
status_tracker	None	None
scroll_to_output	bool	False	如果为 True，则在完成时将滚动到输出组件。
show_progress	‘full’ \| ‘minimal’ \| ‘hidden’	“full”	如果为 True，则在等待期间显示进度动画。
queue	bool \| None	None	如果为 True，则将请求放入队列中（如果已启用队列）。如果为 False，则即使启用了队列，也不会将此事件放入队列。如果为 None，则使用 gradio 应用程序的队列设置。
batch	bool	False	如果为 True，则函数应处理一批输入，这意味着它应接受每个参数的输入值列表。列表应具有相等的长度（并且最多为 `max_batch_size`）。然后函数必须返回元组列表（即使只有 1 个输出组件），元组中的每个列表对应一个输出组件。
max_batch_size	int	4	如果从队列中调用，则将一起批处理的最大输入数量（仅在 batch=True 时相关）。
preprocess	bool	True	如果为 False，则在运行 ‘fn’ 之前不会运行组件数据的预处理（例如，如果使用 `Image` 组件，则保留为 base64 字符串）。
postprocess	bool	True	如果为 False，则在将 ‘fn’ 的输出返回给浏览器之前不会运行组件数据的后处理。
cancels	dict[str, Any] \| list[dict[str, Any]] \| None	None	要取消的其他事件列表，当此侦听器触发时。例如，设置 `cancels=[click_event]` 将取消 click_event，其中 click_event 是另一个组件的 `.click` 方法的返回值。尚未运行的函数（或正在迭代的生成器）将被取消，但当前正在运行的函数将被允许完成。
every	float \| None	None	当客户端连接打开时，以 ‘every’ 秒为单位运行此事件。队列必须已启用。

结语

本文介绍了Gradio的ColorPicker模块及其相关方法和参数。使用Gradio的ColorPicker模块，您可以轻松地实现交互式颜色选择器，并与其他组件和函数进行集成。通过调整参数和使用相应的方法，可以定制ColorPicker模块的行为和触发逻辑，以满足您的需求。Gradio是一个功能强大且易于使用的库，可以帮助您构建交互式界面和部署机器学习模型。