如何在Streamlit中添加并显示Bloxs组件？

关于Bloxs #

Bloxs是一款简洁的Python包，可帮助以美观的区块形式展示信息，非常适合在笔记本中构建数据看板、报告和应用。
它支持的环境包括：Jupyter Notebook、Google Colab、Deepnote、Kaggle Notebook

Bloxs的基础使用示例代码：

B([
    B(1999, "Percent change!", percent_change=10),
    B("🎉🎉🎉", "Works with emojis"),
    B("68%", "Loading progress", progress=68),
    B(1234, "Bloxs in notebook!")
])

渲染效果示例：

解决Streamlit中使用Bloxs的方法 #

Bloxs本质通过生成HTML/CSS实现渲染，我们可以直接提取它的原生HTML内容，在Streamlit中渲染：

1. 调用Bloxs对象的_repr_html_()方法获取完整渲染HTML
2. 使用st.markdown()并开启unsafe_allow_html=True来渲染该HTML

完整代码示例：

import streamlit as st
from bloxs import B

# 构建Bloxs区块
bloxs_component = B([
    B(1999, "Percent change!", percent_change=10),
    B("🎉🎉🎉", "Works with emojis"),
    B("68%", "Loading progress", progress=68),
    B(1234, "Bloxs in Streamlit!")
])

# 获取Bloxs生成的HTML代码
bloxs_html = bloxs_component._repr_html_()

# 在Streamlit中渲染
st.markdown(bloxs_html, unsafe_allow_html=True)

说明 #

• 之前尝试st.pyplot失败是因为Bloxs并非基于Matplotlib的可视化对象，不兼容该组件
• 直接提取_repr_html_()的输出是最可靠的方式，这也是Bloxs在Jupyter类环境中的原生渲染逻辑

内容的提问来源于stack exchange，提问作者Ailurophile