Streamlit应用运行时出现streamlit-card包FileNotFoundError问题求助

报错日志 #

2023-12-04 11:07:31.911 ComponentRequestHandler: GET /home/esoftdev1/bulkApi-deshboard/bulkapi-deshboard-env/lib/python3.12/site-packages/streamlit_card/frontend/build/null read error
Traceback (most recent call last):
  File "/home/esoftdev1/bulkApi-deshboard/bulkapi-deshboard-env/lib/python3.12/site-packages/streamlit/web/server/component_request_handler.py", line 55, in get
    with open(abspath, "rb") as file:
         ^^^^^^^^^^^^^^^^^^^
FileNotFoundError: [Errno 2] No such file or directory: '/home/esoftdev1/bulkApi-deshboard/bulkapi-deshboard-env/lib/python3.12/site-packages/streamlit_card/frontend/build/null'

涉事代码 #

from streamlit_card import card

count_yesterday = run_query("SELECT COUNT(*) FROM tbl WHERE op_status = 9000 AND DATE(creation_datetime) = (CURRENT_DATE - INTERVAL '1 day');")

yesterday = count_yesterday[0][0]
print(yesterday) #464

res = card(
             text="Yesterday's Count",
             title=yesterday,
             styles={
                 "card": {
                     "width": "300px",
                     "height": "300px",
                    "border-radius": "10px",
                     "background-color": "RGB(128, 61, 245)",
                     "box-shadow": "0 0 10px rgba(0,0,0,0.5)",
                 },
                 "text": {
                    "font-family": "Times New Roman",
                 },
             },
         )

环境信息 #

• Python版本：3.12.0
• Streamlit版本：1.29.0
• streamlit-card版本：0.0.61

目录结构 #

/home/esoftdev1/bulkApi-deshboard/bulkapi-deshboard-env/lib/python3.12/site-packages/streamlit_card/frontend/build目录包含：

• static（子目录）
• service-worker.js
• precache-manifest.6b8328ae49df780207c52d2ceeaeadd9.js
• index.html
• bootstrap.min.css.map
• bootstrap.min.css
• asset-manifest.json

已尝试的操作 #

• 卸载并重装streamlit-card：python3.12 -m pip uninstall streamlit-card && python3.12 -m pip install streamlit-card
• 升级streamlit-card：python3.12 -m pip install streamlit-card --upgrade
• 清理浏览器缓存

解决方案 #

1. 修正组件路径配置 #

该报错源于组件尝试加载null后缀的无效路径，需手动修正streamlit-card的源码配置：
找到streamlit-card安装目录下的__init__.py文件（路径：/home/esoftdev1/bulkApi-deshboard/bulkapi-deshboard-env/lib/python3.12/site-packages/streamlit_card/__init__.py），查看组件注册代码，确保path参数指向正确的build目录，无多余的null后缀。例如：

_component_func = components.declare_component(
    "streamlit_card",
    path=os.path.join(os.path.dirname(__file__), "frontend", "build")
)

修正后保存文件，重启Streamlit应用。

2. 降级Python版本 #

Python 3.12为较新版本，可能与streamlit-card 0.0.61存在兼容性问题，可尝试降级到Python 3.11：

• 创建新虚拟环境：python3.11 -m venv new-env
• 激活环境：source new-env/bin/activate
• 安装依赖：pip install streamlit==1.29.0 streamlit-card==0.0.61
• 运行应用测试

3. 改用原生组件实现卡片效果 #

若上述方法无效，可直接用Streamlit原生组件配合自定义CSS实现相同效果：

import streamlit as st

count_yesterday = 464

with st.container():
    st.markdown(f"""
    <div style="width: 300px; height: 300px; border-radius: 10px; background-color: RGB(128, 61, 245); box-shadow: 0 0 10px rgba(0,0,0,0.5); padding: 20px;">
        <h3 style="color: white; font-family: Times New Roman;">Yesterday's Count</h3>
        <h1 style="color: white; font-size: 60px;">{count_yesterday}</h1>
    </div>
    """, unsafe_allow_html=True)

内容的提问来源于stack exchange，提问作者Abdul Awal Nadim