使用Pydantic和Streamlit回调实现持久化应用状态到JSON

使用pydantic和streamlit回调实现持久化应用状态到json

本教程详细介绍了如何在Streamlit仪表板中实现应用状态的JSON持久化。我们将利用Pydantic定义结构化的应用状态模型,并通过其内置的序列化方法将状态高效地保存为JSON文件。文章还将展示如何结合Streamlit的`on_change`回调机制,在用户交互时自动触发状态保存,并提供从JSON文件加载状态的完整实现,确保仪表板刷新或重访时能无缝恢复之前的工作状态。

引言:Streamlit应用状态持久化的重要性

在开发交互式Streamlit仪表板时,用户对各种参数和行为的调整往往希望在刷新页面或下次访问时得到保留。这种需求催生了应用状态持久化的必要性。虽然Streamlit提供了st.session_state用于管理会话内的状态,但它通常不适用于跨会话或跨重启的持久化。将应用状态保存到外部文件(如JSON)是一种常见且有效的方法,能够确保用户体验的连续性和数据的一致性。

本教程将指导您如何结合Pydantic模型和Streamlit的事件回调机制,优雅地实现应用状态到JSON文件的持久化和加载。

使用Pydantic设计应用状态模型

Pydantic是一个强大的数据验证和设置管理库,非常适合定义结构化的应用状态。通过Pydantic模型,我们可以清晰地定义仪表板中所有需要持久化的参数及其数据类型。

考虑以下示例,它定义了一个包含相机选择、裁剪参数和处理流程配置的复杂应用状态:

import osimport jsonfrom typing import List, Optionalfrom pydantic import BaseModel, Field# 定义状态文件路径STATE_FILE_PATH = "application_state.json"class SelectCameraState(BaseModel):    """相机选择状态模型"""    selected_cameras: List[str] = Field(default_factory=list)class CropState(BaseModel):    """裁剪状态模型"""    crop_type: str = "Anchor"  # Anchor / Fixed    bbox: List[int] = Field(default_factory=lambda: [0, 0, 100, 100]) # x, y, width, height    anchor_class: str = "default_anchor"    anchor_position: List[int] = Field(default_factory=lambda: [50, 50]) # center_x, center_yclass ProcessState(BaseModel):    """处理流程状态模型"""    feature_extractor: str = "ResNet"    embedding_processor: str = "PCA"    outlier_detector: str = "IsolationForest"class ApplicationState(BaseModel):    """整个应用的综合状态模型"""    camera_select_state: SelectCameraState = Field(default_factory=SelectCameraState)    crop_state: CropState = Field(default_factory=CropState)    process_state: ProcessState = Field(default_factory=ProcessState) # 新增处理状态    class Config:        validate_assignment = True # 开启赋值验证

Pydantic模型设计要点:

清晰的结构: 将相关参数分组到独立的子模型中,提高可读性和模块化。默认值: 为所有字段设置合适的默认值,确保首次加载或文件不存在时应用能正常启动。Field(default_factory=…): 对于可变类型(如列表、字典),使用default_factory来提供默认值,避免所有实例共享同一个可变对象。validate_assignment = True: 确保每次对模型实例的赋值操作都会进行验证。

Pydantic模型的序列化与反序列化

Pydantic模型提供了便捷的方法来将实例序列化为JSON字符串,以及从JSON字符串反序列化回模型实例。

序列化到JSON

Pydantic v2+ 版本提供了 model_dump_json() 方法,可以方便地将模型实例转换为JSON字符串。对于Pydantic v1,您可以使用 json() 方法。

# 示例:序列化 ApplicationState 实例app_state_instance = ApplicationState()app_state_instance.camera_select_state.selected_cameras = ["camera_A", "camera_B"]app_state_instance.crop_state.crop_type = "Fixed"# 将模型实例序列化为美观的JSON字符串json_output = app_state_instance.model_dump_json(indent=2)print(json_output)

输出示例:

{  "camera_select_state": {    "selected_cameras": [      "camera_A",      "camera_B"    ]  },  "crop_state": {    "crop_type": "Fixed",    "bbox": [      0,      0,      100,      100    ],    "anchor_class": "default_anchor",    "anchor_position": [      50,      50    ]  },  "process_state": {    "feature_extractor": "ResNet",    "embedding_processor": "PCA",    "outlier_detector": "IsolationForest"  }}

反序列化(加载)JSON到模型

要从JSON字符串或文件加载状态,可以使用Pydantic模型提供的类方法 model_validate_json() (Pydantic v2+) 或 parse_raw() (Pydantic v1)。

# 示例:从JSON字符串反序列化json_string_from_file = """{  "camera_select_state": {    "selected_cameras": [      "camera_X",      "camera_Y"    ]  },  "crop_state": {    "crop_type": "Anchor",    "bbox": [      10,      20,      200,      150    ],    "anchor_class": "custom_anchor",    "anchor_position": [      100,      75    ]  },  "process_state": {    "feature_extractor": "VGG",    "embedding_processor": "TSNE",    "outlier_detector": "DBSCAN"  }}"""# 使用 model_validate_json 从 JSON 字符串创建模型实例loaded_state = ApplicationState.model_validate_json(json_string_from_file)print(loaded_state.camera_select_state.selected_cameras) # 输出: ['camera_X', 'camera_Y']

实现状态的保存与加载函数

为了方便管理,我们将状态的保存和加载逻辑封装成独立的函数。

def save_application_state(state: ApplicationState, file_path: str = STATE_FILE_PATH):    """    将应用状态保存到指定的JSON文件。    """    try:        with open(file_path, "w", encoding="utf-8") as f:            f.write(state.model_dump_json(indent=2))        # st.success(f"状态已保存到 {file_path}") # 在Streamlit应用中可用于反馈    except IOError as e:        # st.error(f"保存状态失败: {e}")        print(f"保存状态失败: {e}") # 命令行输出错误    except Exception as e:        # st.error(f"保存状态时发生未知错误: {e}")        print(f"保存状态时发生未知错误: {e}")def load_application_state(file_path: str = STATE_FILE_PATH) -> ApplicationState:    """    从指定的JSON文件加载应用状态。如果文件不存在或加载失败,则返回一个默认的ApplicationState实例。    """    if not os.path.exists(file_path):        print(f"状态文件 '{file_path}' 不存在,将创建默认状态。")        return ApplicationState()    try:        with open(file_path, "r", encoding="utf-8") as f:            json_data = f.read()        return ApplicationState.model_validate_json(json_data)    except json.JSONDecodeError as e:        print(f"加载状态失败: JSON解析错误 - {e}。将创建默认状态。")        return ApplicationState()    except Exception as e:        print(f"加载状态时发生未知错误: {e}。将创建默认状态。")        return ApplicationState()

注意事项:

错误处理: 在实际应用中,务必添加健壮的错误处理机制,例如文件不存在、JSON格式错误等情况,确保应用不会崩溃。文件编码 使用 encoding=”utf-8″ 确保处理各种字符集。默认状态: 当加载失败或文件不存在时,返回一个默认的 ApplicationState 实例,保证应用始终处于可用状态。

集成到Streamlit:使用on_change回调

Streamlit的on_change回调机制是实现用户交互时自动保存状态的关键。当一个组件的值发生变化时,on_change参数指定的函数会被调用。

我们将使用st.session_state来存储当前的ApplicationState实例,并在组件变化时更新它并触发保存。

import streamlit as stimport osimport jsonfrom typing import List, Optionalfrom pydantic import BaseModel, Field# ... (Pydantic模型定义和save_application_state, load_application_state函数定义同上) ...# 确保 STATE_FILE_PATH 已定义STATE_FILE_PATH = "application_state.json" def update_and_save_state(key: str, new_value):    """    更新st.session_state中的应用状态,并触发保存。    """    # 确保 session_state 中有 app_state    if 'app_state' not in st.session_state:        st.session_state.app_state = load_application_state()    # 根据 key 更新 app_state 的相应部分    # 这里需要根据实际的 Streamlit 控件和 Pydantic 模型结构进行映射    # 示例:如果 key 是 'selected_cameras'    if key == 'selected_cameras':        st.session_state.app_state.camera_select_state.selected_cameras = new_value    elif key == 'crop_type':        st.session_state.app_state.crop_state.crop_type = new_value    elif key == 'feature_extractor':        st.session_state.app_state.process_state.feature_extractor = new_value    # 可以添加更多 elif 来处理其他状态字段    save_application_state(st.session_state.app_state)    st.toast("状态已自动保存!") # 给出用户反馈# --- Streamlit 应用主逻辑 ---st.set_page_config(layout="wide", page_title="Streamlit 状态持久化示例")st.title("Streamlit 应用状态持久化到 JSON 示例")# 1. 初始化或加载应用状态if 'app_state' not in st.session_state:    st.session_state.app_state = load_application_state()    st.success("应用状态已加载。")current_state: ApplicationState = st.session_state.app_state# 2. 构建 Streamlit UI,并绑定 on_change 回调st.header("相机选择")selected_cameras_options = ["Camera_A", "Camera_B", "Camera_C", "Camera_D"]# 使用 st.multiselect 来选择相机selected_cameras = st.multiselect(    "选择要使用的相机:",    options=selected_cameras_options,    default=current_state.camera_select_state.selected_cameras,    key="camera_selector",    on_change=update_and_save_state,    args=('selected_cameras', st.session_state.camera_selector) # 传递 key 和新值)st.header("裁剪设置")crop_type_options = ["Anchor", "Fixed"]crop_type = st.radio(    "选择裁剪类型:",    options=crop_type_options,    index=crop_type_options.index(current_state.crop_state.crop_type),    key="crop_type_selector",    on_change=update_and_save_state,    args=('crop_type', st.session_state.crop_type_selector))st.header("处理流程配置")feature_extractor_options = ["ResNet", "VGG", "EfficientNet"]feature_extractor = st.selectbox(    "选择特征提取器:",    options=feature_extractor_options,    index=feature_extractor_options.index(current_state.process_state.feature_extractor),    key="feature_extractor_selector",    on_change=update_and_save_state,    args=('feature_extractor', st.session_state.feature_extractor_selector))# 3. 显示当前状态(调试用)st.subheader("当前应用状态 (JSON)")st.json(current_state.model_dump())st.markdown("---")st.write("请尝试修改上面的选项,然后刷新页面或关闭再打开应用,查看状态是否被保留。")

关键点说明:

st.session_state 的使用: 我们将 ApplicationState 实例存储在 st.session_state.app_state 中。这是因为Streamlit每次运行脚本时都会重新初始化,st.session_state是跨脚本重新运行保持变量值的唯一方式。on_change 回调: 每个需要持久化的Streamlit组件都应绑定一个on_change回调函数args 参数: on_change回调函数可以通过args参数接收额外的参数。这里我们传递了状态字段的key和组件的当前值(通过st.session_state.获取),以便update_and_save_state函数知道如何更新ApplicationState实例。update_and_save_state 逻辑: 这个函数负责根据传入的key和new_value更新st.session_state.app_state中的对应字段,然后调用save_application_state将整个更新后的状态保存到JSON文件。

总结与最佳实践

通过Pydantic模型和Streamlit的on_change回调,我们实现了一个健壮且易于管理的应用状态持久化方案。

回顾与最佳实践:

Pydantic定义状态: 使用Pydantic模型清晰、结构化地定义所有需要持久化的应用参数。model_dump_json() 和 model_validate_json(): 利用Pydantic提供的内置方法进行高效的JSON序列化和反序列化。封装保存/加载逻辑: 将状态的读写操作封装到独立的函数中,提高代码可维护性。st.session_state 结合: 在Streamlit应用中,使用st.session_state来持有ApplicationState实例,确保在脚本重新运行时状态不会丢失。on_change 回调: 将状态保存函数绑定到Streamlit组件的on_change事件,实现用户交互时的自动保存。错误处理: 在文件操作和JSON解析中加入try-except块,提高应用的鲁棒性。状态文件位置: 考虑将状态文件放置在用户可访问且权限合适的目录,例如用户的主目录或应用数据目录。对于生产环境,可能需要更复杂的存储方案(如数据库、云存储)。性能考量: 对于非常频繁的状态更新或非常大的状态对象,频繁地读写文件可能会影响性能。在这种情况下,可以考虑引入一个延迟保存机制(例如,在用户停止操作几秒后才保存),或者只保存变化的最小子集。

通过遵循这些指导原则,您可以为您的Streamlit仪表板构建一个稳定、用户友好的持久化状态管理系统。

以上就是使用Pydantic和Streamlit回调实现持久化应用状态到JSON的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1379063.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月14日 20:20:27
下一篇 2025年12月14日 20:20:31

相关推荐

  • 深入理解CSS框架与JS之间的关系

    深入理解CSS框架与JS之间的关系 在现代web开发中,CSS框架和JavaScript (JS) 是两个常用的工具。CSS框架通过提供一系列样式和布局选项,可以帮助我们快速构建美观的网页。而JS则提供了一套功能强大的脚本语言,可以为网页添加交互和动态效果。本文将深入探讨CSS框架和JS之间的关系,…

    2025年12月24日
    000
  • HTML+CSS+JS实现雪花飘扬(代码分享)

    使用html+css+js如何实现下雪特效?下面本篇文章给大家分享一个html+css+js实现雪花飘扬的示例,希望对大家有所帮助。 很多南方的小伙伴可能没怎么见过或者从来没见过下雪,今天我给大家带来一个小Demo,模拟了下雪场景,首先让我们看一下运行效果 可以点击看看在线运行:http://hai…

    2025年12月24日 好文分享
    500
  • 10款好看且实用的文字动画特效,让你的页面更吸引人!

    图片和文字是网页不可缺少的组成部分,图片运用得当可以让网页变得生动,但普通的文字不行。那么就可以给文字添加一些样式,实现一下好看的文字效果,让页面变得更交互,更吸引人。下面创想鸟就来给大家分享10款文字动画特效,好看且实用,快来收藏吧! 1、网页玻璃文字动画特效 模板简介:使用css3制作网页渐变底…

    2025年12月24日 好文分享
    000
  • tp5如何引入css文件

    tp5引入css文件的方法:1、将css文件放在public目录下的static文件里即可;2、在页面引入中写上“”语句即可。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 其实很简单,只需要将css,js,image文件放在这个目录下即可 页…

    2025年12月24日
    000
  • 聊聊CSS 与 JS 是如何阻塞 DOM 解析和渲染的

    本篇文章给大家介绍一下css和js阻塞 dom 解析和渲染的原理。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 hello~各位亲爱的看官老爷们大家好。估计大家都听过,尽量将CSS放头部,JS放底部,这样可以提高页面的性能。然而,为什么呢?大家有考虑过么?很长一段时间,我都是知其…

    2025年12月24日
    200
  • js如何修改css样式

    js修改css样式的方法:1、使用【obj.className】来修改样式表的类名;2、使用【obj.style.cssTest】来修改嵌入式的css;3、使用【obj.className】来修改样式表的类名;4、使用更改外联的css。 本教程操作环境:windows7系统、css3版,DELL G…

    2025年12月24日
    000
  • 如何使用纯CSS、JS实现图片轮播效果

    本篇文章给大家详细介绍一下使用纯css、js实现图片轮播效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 .carousel {width: 648px;height: 400px;margin: 0 auto;text-align: center;position: a…

    2025年12月24日
    000
  • css怎么设置文件编码

    在css中,可以使用“@charset”规则来设置编码,语法格式“@charset “字符编码类型”;”。“@charset”规则可以指定样式表中使用的字符编码,它必须是样式表中的第一个元素,并且不能以任何字符开头。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月24日
    000
  • js如何修改css

    js修改css的方法:1、使用【obj.style.cssTest】来修改嵌入式的css;2、使用【bj.className】来修改样式表的类名;3、使用更改外联的css文件,从而改变元素的css。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 js修改css的方法: 方法…

    2025年12月24日
    000
  • js如何改变css样式

    js改变css样式的方法:1、使用cssText方法;2、使用【setProperty()】方法;3、使用css属性对应的style属性。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 js改变css样式的方法: 第一种:用cssText div.style.cssText…

    2025年12月24日
    000
  • 为什么css放上面js放下面

    css放上面js放下面的原因:1、在加载html生成DOM tree的时候,可以同时对DOM tree进行渲染,这样可以防止闪跳,白屏或者布局混乱;2、javascript加载后会立即执行,同时会阻塞后面的资源加载。 本文操作环境:Windows7系统、HTML5&&CSS3版,DE…

    2025年12月24日
    000
  • 推荐六款移动端 UI 框架

    作为一个前端人员来说,总结几款相对来说不错的用于移动端开发的UI框架是非常必要的,以下几种移动端UI框架就能基本满足工作中开发需要,根据项目需求,选用合适的框架搭建项目,更能容易提高开发效率。 一、MUI         最接近原生APP体验的高性能前端框架,追求性能体验,是我们开始启动MUI项目的…

    2025年12月24日
    000
  • css如何实现图片的旋转展示效果(代码示例)

    本篇文章给大家带来内容是通过代码示例介绍使用css+js实现图片的旋转展示,制作一个手动操作的“无限”照片轮播图。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 下面我们就开始介绍如何实现效果。 1、构建图像轮播框架 首先是HTML。它有点难以阅读,因为我们删除了元素之间的任何空格…

    2025年12月24日
    000
  • css3+js实现烟花绽放的动画效果(代码示例)

    本篇文章给大家介绍通过js+css3的transforms属性和keyframes属性来实现烟花绽放的动画效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 首先我们来看看效果: 动画的实现原理: 动画使用了两个关键帧(keyframes): 一个是烟花筒上升的轨迹,另一个…

    2025年12月24日
    000
  • css+js如何在幻灯片上添加文字?实现幻灯片的旋转切换(附代码)

    本篇文章给大家带来的内容是介绍css+js如何在幻灯片上添加文字?实现幻灯片的旋转切换(附代码)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 在之前的文章【css如何实现幻灯片效果?幻灯片的实现方法】中介绍了实现淡入淡出幻灯片的实现方法,本篇文章就在其基础上去解释如何在幻灯片上…

    2025年12月24日
    000
  • css+js如何实现简单的动态进度条效果?(代码实例)

    css+js如何实现简单的动态进度条?本篇文章就给大家用css+js制作一个简单的动态进度条效果,并将页面动态进度条滚动加载的代码分享给大家,感兴趣的小伙伴可以参考借鉴一下,希望对你们有所帮助。 我们要知道,这里主要使用了css3的animation动画属性,首先将进度条设置为一个初始宽度为0,背景…

    2025年12月24日
    000
  • 手写CSS+js实现radio单选按钮

    本文给大家介绍手写css+js实现radio单选按钮,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。 有的时候我们需要用长得漂亮一点的单选按钮,那么,就要抛弃原有的自己来写,下面就是我实现的 你丑你先你才丑你先你更丑你先 .radio{display: flex;align-ite…

    2025年12月24日
    000
  • css3+js绘制动态时钟(附代码)

    本章给大家介绍如何使用css3与js实现动态时钟效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 先看看效果图: 首先,思考了一下页面的布局,大致需要4层div,最底层是一个表盘的背景图,然后其余3层分别是时针,分针,秒针的图层. html代码如下: 变量名是随便起的,不要介意;…

    2025年12月24日
    000
  • 什么是web标准??

    本章给大家介绍什么是web标准??通过介绍大家可以对web标准有更深入的了解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 web标准 不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)…

    好文分享 2025年12月24日
    000
  • 关于javascript和css3开发打气球小游戏的完整代码

    这篇文章主要介绍了关于javascript和css3开发打气球小游戏的完整代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码,主要基于js和css3,基于css3画气球,具体实现代码大家参考下本文 效果知识点: css3画气球…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信