在 Panel 中构建交互式 ML 仪表板

HoloViz Panel 是一个通用的 Python 库，它使开发人员和数据科学家能够轻松地构建交互式可视化。无论您是在进行机器学习项目、开发 Web 应用程序还是设计数据仪表板，Panel 都提供了一套强大的工具和功能，以增强您的数据探索和展示能力。在本博文中，我们将深入探讨 HoloViz Panel 的激动人心的功能，探索它如何彻底改变您的数据可视化工作流程，并演示如何使用大约 100 行代码制作类似的应用程序。

试用该应用程序并查看代码

• Anaconda 上的应用程序
• Anaconda Cloud 上的代码

利用 ML/AI 的力量

ML/AI 已成为数据分析和决策过程不可或缺的一部分。使用 Panel，您可以将 ML 模型和结果无缝集成到您的可视化中。在本博文中，我们将探索如何使用 OpenAI CLIP 模型进行图像分类任务。

CLIP 在大量图像-文本配对数据集上进行了预训练，使其能够理解图像和相应的文本描述，并适用于各种下游任务，例如图像分类。

我们使用了两个与 ML 相关的函数来执行图像分类任务。第一个函数 load_processor_model 使我们能够从 Hugging Face 加载预训练的 CLIP 模型。第二个函数 get_similarity_score 计算图像与提供的类别标签列表之间的相似度。

@pn.cache
def load_processor_model(
    processor_name: str, model_name: str
) -> Tuple[CLIPProcessor, CLIPModel]:
    processor = CLIPProcessor.from_pretrained(processor_name)
    model = CLIPModel.from_pretrained(model_name)
    return processor, model

def get_similarity_scores(class_items: List[str], image: Image) -> List[float]:
    processor, model = load_processor_model(
        "openai/clip-vit-base-patch32", "openai/clip-vit-base-patch32"
    )
    inputs = processor(
        text=class_items,
        images=[image],
        return_tensors="pt",  # pytorch tensors
    )
    outputs = model(**inputs)
    logits_per_image = outputs.logits_per_image
    class_likelihoods = logits_per_image.softmax(dim=1).detach().numpy()
    return class_likelihoods[0]

绑定小部件以实现交互性

Panel 的主要优势之一是它能够将小部件绑定到函数。此功能为用户提供了一个直观的界面来操作底层数据，并通过交互获得更深入的见解。

Python 函数

在我们的示例中，我们有一个 process_input 函数，它将从图像分类模型获得的相似度分数格式化为带有美观 UI 的 Panel 对象。实际函数使用 async；如果您不熟悉 async，别担心！我们将在后面的部分解释它，但请注意，async 不是 使用 Panel 的要求 - Panel 只支持它！

async def process_inputs(class_names: List[str], image_url: str):
    """
    High level function that takes in the user inputs and returns the
    classification results as panel objects.
    """
    ...
    yield results

Panel 小部件

我们使用两个小部件来与该函数交互。

1. image_url 是一个 TextInput 小部件，允许输入任何字符串作为图像 URL。
2. class_names 是另一个 TextInput 小部件，它接受模型要分类的可能的类别名称。

image_url = pn.widgets.TextInput(
    name="Image URL to classify",
    value=pn.bind(random_url, randomize_url),
)
class_names = pn.widgets.TextInput(
    name="Comma separated class names",
    placeholder="Enter possible class names, e.g. cat, dog",
    value="cat, dog, parrot",
)

将小部件绑定到函数

根据 process_inputs 函数签名，它接受两个参数： class_names 和 image_url。我们可以使用 pn.bind 将每个 arg/kwarg 绑定到一个小部件，如下所示

interactive_result = pn.panel(
    pn.bind(process_inputs, image_url=image_url, class_names=class_names),
    height=600,
)

• 第一个位置参数是函数名称。
• 之后的关键字参数与函数的签名匹配，因此小部件的值绑定到函数的关键字参数。

为了说明，如果小部件命名为 image_url_input 而不是 image_url，那么调用将是

pn.bind(process_inputs, image_url=image_url_input, ...)

添加模板设计样式

应用程序和仪表板的美观性在吸引您的受众方面起着至关重要的作用。Panel 使您能够根据流行的设计（如 Material 或 Fast）向您的可视化添加样式，使您能够创建视觉上吸引人和专业的外观界面。

在本示例中，我们使用了 bootstrap 模板，其中我们可以控制我们希望在多个区域（如 title 和 main）中显示的内容，以及可以为各种组件指定大小和颜色

pn.extension(design="bootstrap", sizing_mode="stretch_width")

我们还将 Progress 栏设计设置为 Material。

row_bar = pn.indicators.Progress(
    ...
    design=pn.theme.Material,
)

请注意，您也可以使用 styles 和 stylesheets ！

为昂贵任务缓存

某些数据处理任务在计算上可能很昂贵，导致性能下降。Panel 提供了缓存机制，允许您存储昂贵计算的结果并在需要时重用它们，从而显着提高应用程序的响应能力。

在我们的示例中，我们使用 pn.cache 装饰器缓存了 load_processor_model 的输出。这意味着我们不需要多次下载和加载模型。此步骤将使您的应用程序感觉更加响应！

另外说明：为了进一步提高响应能力，还有 延迟加载 和 加载指示器.

@pn.cache
def load_processor_model(
    processor_name: str, model_name: str
) -> Tuple[CLIPProcessor, CLIPModel]:
    processor = CLIPProcessor.from_pretrained(processor_name)
    model = CLIPModel.from_pretrained(model_name)
    return processor, model

将功能与 JavaScript 桥接

虽然 Panel 提供了丰富的交互式功能，但您可能偶尔需要通过 JavaScript 实现的其他功能。将 JavaScript 代码与 Panel 可视化集成以扩展其功能非常容易。通过弥合 Python 和 JavaScript 之间的差距，您可以创建高级可视化并添加超出 Panel 本机功能范围的交互式元素。

在我们的应用程序底部，您可能已经注意到一组代表 Panel 的社交媒体帐户的图标，包括 LinkedIn 和 Twitter。当您单击这些图标中的任何一个时，您将自动重定向到相应的社交媒体配置文件。这种无缝的单击和重定向功能是通过 Panel 的 JavaScript 集成与 js_on_click 方法实现的

footer_row = pn.Row(pn.Spacer(), align="center")
for icon, url in ICON_URLS.items():
    href_button = pn.widgets.Button(icon=icon, width=35, height=35)
    href_button.js_on_click(code=f"window.open('{url}')")
    footer_row.append(href_button)
footer_row.append(pn.Spacer())

了解同步与异步支持

异步编程因其能够高效地处理并发任务而越来越受欢迎。我们将讨论同步和异步执行之间的区别，并探索 Panel 对异步操作的支持。理解这些概念将使您能够在 Panel 中利用 async 功能，从而在您的应用程序中提供更高的性能和响应能力。

在您的函数中使用 async 允许在单个线程中进行协作式多任务处理，并允许 IO 任务在后台发生。例如，当我们将随机图像获取到互联网时，我们不知道需要等待多长时间，也不希望在等待时停止程序。Async 使并发执行成为可能，使我们能够在等待时执行其他任务，并确保应用程序具有响应能力。请确保也添加相应的 awaits。

async def open_image_url(image_url: str) -> Image:
    async with aiohttp.ClientSession() as session:
        async with session.get(image_url) as resp:
            return Image.open(io.BytesIO(await resp.read()))

如果您不熟悉 async，也可以用同步方式重写它！async 不是 使用 Panel 的要求！

def open_image_url(image_url: str) -> Image:
    with requests.get(image_url) as resp:
        return Image.open(io.BytesIO(resp.read()))

其他要尝试的想法

在这里，我们只探索了一个想法；您还可以尝试更多内容

• 交互式文本生成：利用 Hugging Face 的强大语言模型（如 GPT 或 Transformer）来生成交互式文本。将 Panel 的小部件绑定功能与 Hugging Face 模型相结合，以创建动态界面，用户可以在其中输入提示或调整参数以生成自定义文本输出。
• 情感分析和文本分类：使用 Hugging Face 的预训练情感分析或文本分类模型构建交互式仪表板。使用 Panel，用户可以输入文本样本，可视化预测的情感或类别概率，并通过交互式可视化探索模型预测。
• 语言翻译：利用 Hugging Face 的翻译模型创建交互式语言翻译界面。使用 Panel，用户可以输入一种语言的文本，并可视化翻译后的输出，以便轻松实验和探索翻译质量。
• 命名实体识别 (NER)：将 Hugging Face 的 NER 模型与 Panel 相结合以构建交互式 NER 可视化。用户可以输入文本并可视化已识别的实体，突出显示实体跨度，并通过直观的界面探索模型预测。
• 聊天机器人和对话式 AI：使用 Hugging Face 的对话模型，您可以创建交互式聊天机器人或对话式代理。Panel 使用户能够与聊天机器人进行交互式对话，可视化响应，并通过交互式小部件自定义聊天机器人的行为。
• 模型微调和评估：使用 Panel 创建用于微调和评估 Hugging Face 模型的交互式界面。用户可以输入自定义训练数据，调整超参数，可视化训练进度，并通过交互式可视化评估模型性能。
• 模型比较和基准测试：使用 Panel 构建交互式界面，以比较和基准测试针对特定 NLP 任务的不同 Hugging Face 模型。用户可以输入样本输入，比较模型预测，可视化性能指标，并探索不同模型之间的权衡。

查看我们的应用程序库以获取其他想法！祝您实验愉快！

加入我们的社区

Panel 社区充满活力且乐于助人，经验丰富的开发人员和数据科学家渴望提供帮助并分享他们的知识。加入我们并与我们联系

• Discord
• Discourse
• Twitter
• LinkedIn
• GitHub