ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Python全栈入门到实战【AI实战篇 09】AI应用侧边栏制作,第一个AI项目个性化配置核心

Python全栈入门到实战【AI实战篇 09】AI应用侧边栏制作,第一个AI项目个性化配置核心 前言上一篇《AI实战篇 08》中我们已经实现了AI智能助手的流式输出功能解决了非流式输出的等待卡顿问题让交互体验媲美主流AI产品。本篇作为第一个AI项目的第九篇我们将开发侧边栏个性化配置功能实现AI角色和技能的自定义切换让用户无需修改代码就能根据不同场景编程教学、英语翻译、文案创作等快速调整AI的身份和能力大幅提升应用的实用性和灵活性。本文为Python全栈开发者与零基础AI入门者量身打造全程采用步骤式教学从Streamlit侧边栏组件基础、会话状态持久化、UI界面开发到动态系统提示词关联每一个环节都有完整代码、逐行讲解和效果验证即使是完全没有Web开发经验的同学也能跟着一步步完成侧边栏功能打造属于自己的个性化AI助手。本节核心学习内容前置知识Streamlit Sidebar组件的两种使用方式与最佳实践会话状态初始化侧边栏配置的持久化存储刷新页面不丢失侧边栏UI开发角色输入框、技能输入框的实现与实时同步动态系统提示词将侧边栏配置与AI响应关联实现实时生效完整代码整合侧边栏历史消息会话记忆流式输出三合一效果验证自定义角色与技能的实际使用测试关键注意事项输入同步时机、空值处理、布局优化等避坑点核心总结侧边栏开发核心速查表方便开发时快速查阅文章目录前言一、开发背景二、前置知识Streamlit Sidebar组件方式1直接调用法方式2上下文管理器法强烈推荐三、侧边栏开发详细步骤3.1 初始化侧边栏配置的会话状态关键说明3.2 实现侧边栏UI界面逐行参数详解核心逻辑说明3.3 构建动态系统提示词关联侧边栏与AI响应关键说明四、完整代码汇总五、侧边栏与核心聊天逻辑的关联六、效果展示与验证效果验证步骤七、关键注意事项八、核心总结侧边栏开发核心速查表九、专栏订阅一、开发背景在前序开发中我们已经完整实现了AI聊天应用的消息展示、会话记忆、流式输出三大核心功能。但目前的AI角色和能力是硬编码在代码中的用户如果想切换AI的身份必须修改代码并重启服务非常不方便。为了解决这个问题我们将开发侧边栏配置功能让用户可以在浏览器中实时修改AI的角色和技能所有配置会自动保存到会话状态中刷新页面也不会丢失真正实现AI助手的个性化定制。二、前置知识Streamlit Sidebar组件Streamlit的sidebar组件用于创建页面左侧的侧边栏区域支持嵌入所有Streamlit原生交互元素输入框、按钮、下拉框、滑块等有两种标准使用方式下面详细对比并说明推荐方案方式1直接调用法# 直接通过sidebar前缀调用元素st.sidebar.subheader(助手信息)st.sidebar.text_input(AI角色)st.sidebar.text_area(角色技能)优点写法极简适合侧边栏只有2-3个简单元素的场景缺点元素较多时代码层级混乱可读性差难以维护方式2上下文管理器法强烈推荐# 通过with语句包裹所有侧边栏元素withst.sidebar:st.subheader(助手信息)st.text_input(AI角色)st.text_area(角色技能)优点代码结构清晰所有侧边栏元素统一在一个代码块中便于阅读和维护特点支持复杂的元素嵌套和布局符合Python上下文管理的编码规范适用场景所有侧边栏开发场景尤其是元素较多、逻辑较复杂的情况三、侧边栏开发详细步骤3.1 初始化侧边栏配置的会话状态侧边栏的配置角色、技能需要在页面刷新、用户交互后保留因此必须使用st.session_state进行存储。我们需要在页面最开始的位置初始化两个会话状态变量# 初始化AI角色默认值为编程老师# 作用用户第一次打开页面时显示默认角色后续修改后值会被更新ifrolenotinst.session_state:st.session_state.role编程老师# 初始化AI技能默认值为编程教学# 作用用户第一次打开页面时显示默认技能后续修改后值会被更新ifskillsnotinst.session_state:st.session_state.skills编程教学关键说明必须添加if xxx not in st.session_state:判断如果不加这个判断每次页面刷新时变量都会被重新初始化为默认值用户的自定义配置会丢失变量名建议语义化使用role和skills作为键名便于后续代码中引用和维护默认值设置合理设置用户最常用的角色和技能作为默认值提升首次使用体验3.2 实现侧边栏UI界面使用with st.sidebar:上下文管理器创建侧边栏的标题、角色输入框和技能输入框并实现配置回显和实时同步功能# 侧边栏部分withst.sidebar:st.subheader(助手信息)# 创建一个输入框用于输入角色set_up_rolesst.text_input(角色,placeholder例如编程老师等等,value编程老师)# 将用户输入的角色添加到session_state.role中ifset_up_roles.strip()!:st.session_state.roleset_up_roles# 创建一个输入框用于输入该角色的技能set_up_skillsst.text_area(技能,placeholder例如编程数学等等,value编程,教学)# 将用户输入的技能添加到session_state.skills中ifset_up_skills.strip()!:st.session_state.skillsset_up_skills逐行参数详解label输入框的标签必须清晰明确让用户知道这个输入框是用来做什么的placeholder输入框为空时的灰色提示文字用于引导用户正确输入格式value输入框的初始值这里绑定st.session_state中的变量实现“修改后刷新页面不丢失”的效果height仅text_area组件有用于设置多行输入框的高度提升长文本输入体验核心逻辑说明配置回显通过valuest.session_state.xxx将session_state中存储的配置值显示在输入框中用户刷新页面后之前输入的内容不会消失实时同步通过if set_up_xxx: st.session_state.xxx set_up_xxx当用户在输入框中修改内容并按下回车时session_state中的值会立即更新后续的AI响应会使用最新的配置3.3 构建动态系统提示词关联侧边栏与AI响应侧边栏的配置最终要作用于AI的响应这是通过动态生成系统提示词实现的。我们将session_state中存储的角色和技能通过f-string拼接成系统提示词传递给DeepSeek API# 动态生成系统提示词# 作用根据侧边栏配置的角色和技能实时定义AI的身份和能力system_promptf我是一名资深的{st.session_state.role}我的名字叫做小辉辉我的技能是{st.session_state.skills}。关键说明系统提示词必须写在侧边栏代码之后、API调用之前这样才能保证每次调用API时使用的是最新的侧边栏配置添加约束条件在系统提示词末尾加上“严格按照身份回答”“不要回答超出技能范围的内容”可以有效避免AI回答跑偏格式灵活可以根据需求调整系统提示词的格式例如增加“回答风格”“回答长度”等要求四、完整代码汇总以下是整合了侧边栏功能、消息展示、会话记忆和流式输出的完整代码可直接复制使用importstreamlitasstimportosfromopenaiimportOpenAI# 设置页面的配置项st.set_page_config(page_title小辉AI,# 标题page_iconimgs/logo.png,# 图标layoutwide,# 布局占页面全部initial_sidebar_stateexpanded,# 侧边栏状态menu_items{})# 页面的大标题st.title(小辉AI)# 设置logo图片st.logo(imgs/logo.png,sizelarge)# 创建OpenAI客户端clientOpenAI(api_keyos.environ.get(DEEPSEEK_API_KEY),base_urlhttps://api.deepseek.com)# 初始化聊天信息ifmessagesnotinst.session_state:st.session_state.messages[]# 创建一个列表用于存储聊天信息, 默认值为空# 初始化角色ifrolenotinst.session_state:st.session_state.role编程老师# 创建一个变量用于存储角色, 默认值为编程老师# 初始化技能ifskillsnotinst.session_state:st.session_state.skills编程教学# 创建一个变量用于存储技能, 默认值为编程# 将聊天信息显示在页面上formessageinst.session_state.messages:ifmessage[role]user:st.chat_message(user).write(message[content])else:st.chat_message(assistant).write(message[content])# 侧边栏部分withst.sidebar:st.subheader(助手信息)# 创建一个输入框用于输入角色set_up_rolesst.text_input(角色,placeholder例如编程老师等等,value编程老师)# 将用户输入的角色添加到session_state.role中ifset_up_roles.strip()!:st.session_state.roleset_up_roles# 创建一个输入框用于输入该角色的技能set_up_skillsst.text_area(技能,placeholder例如编程数学等等,value编程,教学)# 将用户输入的技能添加到session_state.skills中ifset_up_skills.strip()!:st.session_state.skillsset_up_skills# 定义系统提示词system_promptf我是一名资深的{st.session_state.role}我的名字叫做小辉辉我的技能是{st.session_state.skills}# 消息输入框promptst.chat_input(请输入您的问题)# prompt获取到用户输入的提示词ifprompt:st.chat_message(user).write(prompt)# 将用户输入的提示词添加到session_state.messages中st.session_state.messages.append({role:user,content:prompt})# 调用OpenAI APIresponseclient.chat.completions.create(modeldeepseek-chat,messages[{role:system,content:system_prompt},*st.session_state.messages,# 获取session_state.messages中的所有消息],streamTrue)# 创建一个空变量用于存储流式输出的答案response_messagest.empty()# 初始化流式输出变量output# 流式输出代码forchunkinresponse:chunk_strchunk.choices[0].delta.content# 获取当前chunk的contentoutputchunk_str# 将当前chunk的content添加到output中response_message.chat_message(assistant).write(output)# 将output往空组件中进行显示# 将OpenAI API返回的答案添加到session_state.messages中st.session_state.messages.append({role:assistant,content:output})# 非流式输出代码# st.chat_message(assistant).write(response.choices[0].message.content)# 将OpenAI API返回的答案添加到session_state.messages中# st.session_state.messages.append({role: assistant, content: response.choices[0].message.content})五、侧边栏与核心聊天逻辑的关联侧边栏配置完成后无需修改任何聊天交互逻辑只需在调用DeepSeek API时传入上面动态生成的system_prompt即可# 调用DeepSeek API流式输出responseclient.chat.completions.create(modeldeepseek-chat,messages[{role:system,content:system_prompt},# 传入动态生成的系统提示词*st.session_state.messages,# 传入历史会话消息],streamTrue)六、效果展示与验证运行代码后浏览器页面效果如下效果验证步骤在侧边栏的「AI角色」输入框中输入“英语老师”按下回车在「角色技能」输入框中输入“初中英语语法、英语口语、英语作文批改”按下回车在聊天输入框中输入“帮我批改一下这篇英语作文”观察AI的回复会以英语老师的身份按照配置的技能进行回答刷新浏览器页面侧边栏的配置和聊天记录都会保留不会丢失七、关键注意事项输入框同步时机st.text_input和st.text_area组件只有在用户按下回车或点击输入框外的区域时才会更新值并同步到session_state空值处理如果用户清空输入框并按下回车set_up_roles或set_up_skills会变为空字符串此时session_state中的值也会被清空。可以添加判断避免这种情况ifset_up_roles.strip()!:st.session_state.roleset_up_roles系统提示词优先级系统提示词会覆盖AI的默认行为因此配置越具体AI的回答越符合预期侧边栏布局优化可以使用st.divider()添加分割线区分不同的配置区域提升视觉体验withst.sidebar:st.subheader(助手信息配置)st.divider()# 添加分割线st.text_input(AI角色)st.text_area(角色技能)八、核心总结侧边栏开发核心速查表为了方便后续开发时快速查阅整理了侧边栏开发的核心速查表核心环节关键操作核心要点组件选择使用with st.sidebar:上下文管理器代码结构清晰便于维护配置持久化用st.session_state存储角色和技能必须添加初始化判断避免刷新丢失UI开发st.text_inputst.text_area配置placeholder引导用户输入实时同步输入框值变化时更新session_state按下回车或点击空白处生效关联AI响应动态生成系统提示词必须写在侧边栏代码之后、API调用之前空值处理添加strip() ! 判断避免空字符串覆盖有效配置布局优化使用st.divider()添加分割线区分不同配置区域提升视觉体验九、专栏订阅专栏优点《Python从入门到实战》专栏内容涵盖Python基础到高级编程、并发编程进程/线程/协程、网络编程TCP/UDP/Socket、核心内置/第三方模块、数据库核心实战、Web开发Django/Flask/FastAPI框架、数据库MySQL/ORM/异步数据库、网络爬虫同步/异步/分布式、AI实战、Linux部署运维等全栈核心知识以项目驱动教学构建清晰学习路径适合零基础入门和进阶提升的同学跟着一步步从入门到精通专栏地址https://blog.csdn.net/zsh_1314520/category_13108073.html文章是永久吗一次订阅后可永久免费查看专栏内所有文章后续会持续更新全栈相关内容第一时间获取最新教程有答疑交流群吗订阅专栏后有专属的全栈学习答疑群群内提供专业问题答疑、和众多学习者抱团取暖一起沉淀技术、赋能成长进群方式订阅专栏后可直接在专栏内申请加入答疑群或私信博主沟通进群事宜https://bbs.csdn.net/topics/620104702更多干货点赞收藏关注博主不迷路博主博客链接https://blog.csdn.net/zsh_1314520?spm1000.2115.3001.5343专注Python全栈技术分享评论区留言问题会一一回复助力大家轻松搞定Python全栈【原创声明】除本文原文地址以外如发现同款内容皆为盗版本文已收录于《Python全栈从入门到实战》请勿购买盗版文章和专栏如购买盗版内容不提供任何服务。原文地址https://blog.csdn.net/zsh_1314520/article/details/163831675
返回列表