Qwen2.5-1.5B Streamlit界面定制教程：修改提示语/调整气泡样式/添加快捷指令

Qwen2.5-1.5B Streamlit界面定制教程修改提示语/调整气泡样式/添加快捷指令你是不是也觉得虽然Qwen2.5-1.5B这个本地对话助手用起来很方便但它的聊天界面看起来有点“千篇一律”默认的提示语、标准的气泡样式总感觉少了点自己的个性。今天我就带你一起动手给这个本地AI助手“换身衣服”让它看起来更符合你的使用习惯。我们将重点改造三个地方修改开场提示语、调整聊天气泡的样式以及添加快捷指令功能。整个过程不需要你懂复杂的Web开发只需要修改几行Python代码就能让你的AI助手界面焕然一新。1. 准备工作找到并理解核心代码在开始定制之前我们得先知道要改哪里。Qwen2.5-1.5B的Streamlit界面代码通常集中在一个主文件里比如app.py或chat.py。你需要先找到这个文件。打开文件后别被代码吓到。我们主要关注三个部分提示语通常是一个叫placeholder或default_prompt的变量控制着输入框里默认显示的文字。聊天消息显示Streamlit 用st.chat_message来显示气泡样式由这里的参数和后续的CSS如果有控制。消息处理逻辑用户输入和AI回复的展示逻辑都在这里这是我们添加快捷指令的地方。为了方便你理解我们先来看一个最简化的界面核心代码结构import streamlit as st # 页面基础设置 st.set_page_config(page_title我的Qwen助手) st.title( 本地Qwen对话助手) # 初始化对话历史 if messages not in st.session_state: st.session_state.messages [] # 1. 显示历史消息这里控制气泡的显示 for message in st.session_state.messages: with st.chat_message(message[role]): # “role”决定气泡在左边user还是右边assistant st.markdown(message[content]) # 2. 用户输入区域这里控制提示语 user_input st.chat_input(在这里输入您的问题...) # 引号里的就是默认提示语 # 3. 处理用户输入并获取AI回复 if user_input: # 显示用户消息 with st.chat_message(user): st.markdown(user_input) st.session_state.messages.append({role: user, content: user_input}) # 模拟AI回复实际这里是调用模型的代码 with st.chat_message(assistant): response f这是AI对 {user_input} 的回复。 st.markdown(response) st.session_state.messages.append({role: assistant, content: response})上面的代码勾勒出了聊天界面的骨架。接下来我们就基于这个骨架开始我们的定制之旅。2. 修改默认提示语让输入框更贴心默认的提示语“在这里输入您的问题...”可能不够有引导性。我们可以把它改成更具体、更符合你使用场景的句子。修改方法非常简单找到st.chat_input()这个函数直接修改它的参数即可。例如如果你主要用它来写代码可以改成user_input st.chat_input(请输入您的编程问题例如‘如何用Python排序字典’)如果你希望它更活泼可以改成user_input st.chat_input(嗨我是Qwen有什么可以帮你的 )注意根据要求正式代码中不应包含emoji此处仅为举例说明修改位置进阶技巧随机提示语如果你觉得固定的一句话太无聊可以让它每次刷新页面时随机显示不同的提示语。import random prompt_list [ “今天想聊点什么”, “请输入您的问题我会尽力解答。”, “需要我帮您写点什么还是解答疑问”, “开始我们的对话吧” ] random_prompt random.choice(prompt_list) user_input st.chat_input(random_prompt)这样每次打开或刷新页面输入框的提示语都会不一样增加一点新鲜感。3. 调整聊天气泡样式区分你我默认情况下用户和AI的气泡可能只有左右位置的区别。我们可以通过Streamlit的内置参数和一点HTML技巧让它们的样式区分更明显。3.1 修改气泡头像Avatarst.chat_message函数支持一个avatar参数可以设置文字或图片作为头像。我们可以为用户和AI设置不同的头像。# 显示历史消息时为不同角色设置头像 for message in st.session_state.messages: # 为“用户”消息设置一个头像 if message[“role”] “user”: with st.chat_message(“user”, avatar“‍”): # 使用一个程序员emoji作为用户头像 st.markdown(message[“content”]) # 为“助手”消息设置另一个头像 elif message[“role”] “assistant”: with st.chat_message(“assistant”, avatar“”): # 使用机器人emoji作为AI头像 st.markdown(message[“content”])再次提醒实际代码应避免使用emoji可用“”、“AI”等字符替代或使用图片URL3.2 使用HTML/CSS自定义气泡样式Streamlit允许我们注入自定义的CSS来改变样式。我们可以让用户气泡和AI气泡拥有不同的背景色、边框等。在Streamlit应用的最开头通常在set_page_config之后添加以下代码# 注入自定义CSS样式 st.markdown(“”” style /* 为用户消息气泡设置样式 */ div[data-testid“stChatMessage”] div:has( div[data-testid“stMarkdownContainer”]) { /* 这里可以添加更复杂的选择器来精确匹配用户气泡 */ } /* 一个更直接的技巧通过侧边栏或配置选择样式这里提供核心思路 */ .user-message { background-color: #e3f2fd; /* 浅蓝色背景 */ border-left: 5px solid #2196f3; /* 蓝色左边框 */ padding: 10px; border-radius: 10px; margin: 5px 0; } .assistant-message { background-color: #f1f8e9; /* 浅绿色背景 */ border-left: 5px solid #4caf50; /* 绿色左边框 */ padding: 10px; border-radius: 10px; margin: 5px 0; } /style “””, unsafe_allow_htmlTrue)然后在显示消息时为不同的消息包裹上对应的CSS类。不过请注意直接给st.chat_message的内容添加类名需要一些技巧一个更简单的方法是使用st.markdown的unsafe_allow_html参数并直接构建带样式的HTML内容。但这可能会稍微复杂一些。对于初学者更推荐使用修改头像avatar和调整Streamlit主题的方式来区分气泡这样更简单可靠。你可以在运行Streamlit应用时通过--theme.*参数来设置基础主题色。4. 添加快捷指令提升对话效率这是最能提升使用体验的功能。想象一下你不用每次都打“请用Python写一个冒泡排序函数”而是输入“/sort_py”就能触发这个指令。我们来一步步实现它。4.1 设计你的快捷指令首先规划一下你需要哪些快捷指令。例如/clear或/c清空当前对话。/help或/h显示所有可用的快捷指令。/py_sort让AI生成一个Python排序示例。/en_to_zh将后续输入或上一条消息翻译成中文。4.2 修改输入处理逻辑我们需要在用户输入后、发送给AI之前拦截并检查它是否是一个快捷指令。# 处理用户输入并获取AI回复 if user_input: # 4.2.1 检查是否为快捷指令 processed_input, is_command process_quick_command(user_input) if is_command: # 如果是命令processed_input就是命令执行后的结果一段文本 with st.chat_message(“assistant”): st.markdown(processed_input) # 直接显示命令帮助或执行结果 st.session_state.messages.append({“role”: “assistant”, “content”: processed_input}) else: # 如果不是命令按正常流程处理 with st.chat_message(“user”): st.markdown(user_input) st.session_state.messages.append({“role”: “user”, “content”: user_input}) # 调用模型获取回复此处简化 with st.chat_message(“assistant”): response get_ai_response(user_input) # 你的模型调用函数 st.markdown(response) st.session_state.messages.append({“role”: “assistant”, “content”: response})4.3 实现快捷指令处理函数现在来实现核心的process_quick_command函数。def process_quick_command(input_text): “”“识别和处理快捷指令。 参数: input_text: 用户输入的文本 返回: tuple: (处理后的文本, 是否为命令) ”“” input_text input_text.strip() # 如果输入以“/”开头则认为是命令 if input_text.startswith(“/”): command input_text.lower() if command in [“/clear”, “/c”]: # 清空对话历史 st.session_state.messages [] # 可以尝试释放显存如果后端支持 # torch.cuda.empty_cache() return “对话历史已清空。我们可以开始一个新话题了”, True elif command in [“/help”, “/h”]: help_text “”“**可用快捷指令** - /clear 或 /c清空当前对话历史。 - /help 或 /h显示此帮助信息。 - /py_sort获取一个Python列表排序的示例代码。 - /en_to_zh将上一条消息翻译成中文请先发送一条英文消息。 ”“” return help_text, True elif command “/py_sort”: code_example “”“以下是一个Python冒泡排序的示例 python def bubble_sort(arr): n len(arr) for i in range(n): for j in range(0, n-i-1): if arr[j] arr[j1]: arr[j], arr[j1] arr[j1], arr[j] return arr # 示例 my_list [64, 34, 25, 12, 22, 11, 90] sorted_list bubble_sort(my_list) print(sorted_list) “”“ return code_example, True elif command “/en_to_zh”: # 获取上一条消息假设是用户发的英文 if len(st.session_state.messages) 0: last_msg st.session_state.messages[-1][“content”] # 这里应该调用翻译函数我们简化为一个提示 return f“翻译功能示例您希望将上一条消息 ‘{last_msg}’ 翻译成中文。实际需集成翻译API或模型”, True else: return “没有找到上一条消息可供翻译。”, True else: return f“未知指令 ‘{input_text}’。输入 /help 查看可用指令。”, True # 如果不是命令原样返回 return input_text, False4.4 集成到完整流程将上面的函数定义放在你的代码文件中例如在开头部分然后确保你的主逻辑按照4.2 修改输入处理逻辑部分进行调用。现在当你输入/help并发送界面上会直接显示指令列表而不会把这个指令本身当作普通问题发送给AI模型。输入/py_sort会直接得到一段排序代码。更进一步你可以让某些指令如/en_to_zh不仅返回提示而是真正触发一个后续动作比如自动将你下一条输入的内容发送给AI并附上“请将以下内容翻译成中文”的指令。这需要更复杂的会话状态管理但思路是相通的。5. 总结与效果预览好了让我们回顾一下今天的定制成果个性化提示语你再也不用面对那个冷冰冰的默认提示了。可以根据心情或用途设置一个固定或随机的温馨开场白让每次对话都从一句贴心的话开始。差异化气泡样式通过修改头像avatar用户和AI的发言一目了然。如果你愿意钻研一点CSS还能给气泡换上不同颜色的“衣服”让聊天窗口看起来更像一个精心设计的应用。高效快捷指令这是最大的效率提升点。通过识别以“/”开头的命令我们可以绕过AI模型直接执行清空对话、查看帮助、获取常用代码模板等操作。你还可以根据自己的高频需求无限扩展这个指令库。这些修改都不涉及核心的模型加载和推理代码因此非常安全。你可以大胆尝试改错了大不了恢复原样。定制后的界面不仅用起来更顺手看起来也更像“你的”专属AI工具了。技术的乐趣不就在于把它变成我们想要的样子吗快去试试吧给你的Qwen助手换上“新装”。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。