Nanbeige 4.1-3B WebUI部署教程零前端基础用Python跑出蔚蓝档案风格聊天界面你是不是也遇到过这种情况好不容易在本地部署了一个开源大模型想跟它聊聊天结果打开的那个Web界面怎么看都像是上个世纪的产物——侧边栏挤满了各种按钮聊天框方方正正头像呆板无趣整个界面透着一股“能用就行”的凑合感。今天我要分享的这个项目能彻底改变你对本地大模型聊天界面的认知。它不需要你懂任何前端框架React、Vue、Angular统统不用只需要会写Python就能在本地跑出一个风格酷似《蔚蓝档案》MomoTalk的现代极简聊天界面。这个界面有多特别它用天蓝色系的波点网格做背景聊天气泡左右对齐输入框悬浮在底部整个交互体验就像在用一款精心设计的手机聊天软件。更重要的是它原生支持模型的“思考过程”显示还能实现丝滑的流式输出让你看着文字一个字一个字地“打”出来。下面我就带你一步步把这个漂亮的界面跑起来即使你完全没有前端基础也能在10分钟内搞定。1. 项目核心亮点为什么这个界面值得一试在开始动手之前我们先看看这个WebUI到底有哪些吸引人的地方。了解这些亮点你就能明白为什么它值得你花时间部署。1.1 视觉体验从“能用”到“好用又好看”传统的Streamlit应用界面有个通病——布局死板组件样式单一。这个项目通过深度定制CSS彻底打破了这些限制沉浸式背景不再是单调的白色或灰色而是采用了清爽的天蓝色系搭配极简的圆点矩阵网格视觉上更加舒适智能气泡布局用户消息自动右对齐天蓝色背景AI回复自动左对齐纯白背景带轻微阴影完全模拟真实聊天软件悬浮输入框输入框设计成悬浮的“药丸”形状固定在界面底部无论聊天记录多长都能随时输入极简操作区顶部只有简洁的标题右上角一个悬浮的“清空记录”按钮没有任何多余的干扰元素1.2 功能特色专为大模型对话优化除了好看这个界面在功能上也做了很多针对性的优化思考过程智能折叠很多支持深度思考Chain-of-Thought的模型会在回复中包含think.../think这样的思考标记。这个界面能自动识别这些内容并优雅地折叠起来点击才能展开既保持了界面的清爽又不丢失重要信息真正的流式输出基于TextIteratorStreamer和多线程技术实现了打字机级别的逐字输出效果。特别优化了CSS防抖确保在文字不断出现的过程中聊天气泡不会闪烁或变形纯Python驱动整个项目就一个app.py文件所有前端效果都用Python代码控制CSS实现不需要额外学习前端技术栈1.3 技术巧思用CSS魔法解决布局难题这个项目最巧妙的地方在于它用了一个很少人知道的CSS技巧来实现在Streamlit中难以完成的功能——动态判断消息来源并调整气泡对齐方向。传统做法需要在Python中判断消息类型然后分别渲染不同的HTML结构。但这个项目通过在消息中插入一个不可见的HTML标记比如span classuser-mark/span然后利用CSS的:has()伪类选择器来检测这个标记从而动态改变父容器的布局方向。简单来说就是用CSS“看到”Python插入的标记然后自动调整样式。这种思路非常巧妙也展示了纯Python项目也能做出复杂的前端交互效果。2. 环境准备安装必要的Python库开始部署前你需要确保电脑上已经安装了Python环境。我推荐使用Python 3.10或更高版本兼容性更好。打开你的终端Windows用户用命令提示符或PowerShellMac/Linux用户用终端执行下面的安装命令pip install streamlit torch transformers accelerate这几个库的作用分别是streamlitWeb应用框架让我们能用Python快速构建交互界面torchPyTorch深度学习框架运行模型的基础transformersHugging Face的模型加载和推理库accelerate优化模型加载和推理速度如果你之前已经安装过这些库可以跳过这一步。如果安装过程中遇到网络问题可以尝试使用国内的镜像源pip install streamlit torch transformers accelerate -i https://pypi.tuna.tsinghua.edu.cn/simple安装完成后可以用下面的命令检查是否安装成功python -c import streamlit; import torch; import transformers; print(所有库都已成功安装)如果看到“所有库都已成功安装”的输出说明环境准备就绪。3. 获取项目代码和模型文件接下来我们需要两样东西项目的Python代码文件以及Nanbeige 4.1-3B的模型文件。3.1 下载项目代码这个项目的所有代码都集中在一个文件里app.py。你可以从GitHub或其他代码托管平台获取这个文件。如果你不知道从哪里下载我可以给你一个简单的获取方法创建一个新的Python文件命名为app.py然后把下面的代码模板复制进去。这是项目的核心结构完整的代码我会在后面的章节提供。import streamlit as st import torch from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer from threading import Thread import time # 页面配置 st.set_page_config( page_titleNanbeige 4.1-3B Chat, page_icon, layoutwide, initial_sidebar_statecollapsed ) # 在这里添加更多的代码...3.2 下载模型文件Nanbeige 4.1-3B是一个开源的对话模型你需要在Hugging Face的模型库中下载它。如果你访问Hugging Face有困难也可以从国内的镜像源下载。方法一使用Hugging Face官方需要网络环境支持from transformers import AutoModelForCausalLM, AutoTokenizer model_name Nanbeige/Nanbeige4-3B model AutoModelForCausalLM.from_pretrained(model_name, torch_dtypetorch.float16, device_mapauto) tokenizer AutoTokenizer.from_pretrained(model_name)方法二从国内镜像下载推荐如果你下载速度慢或者连接不稳定可以使用ModelScope魔搭社区from modelscope import AutoModelForCausalLM, AutoTokenizer model_name Nanbeige/Nanbeige4-3B model AutoModelForCausalLM.from_pretrained(model_name, torch_dtypetorch.float16, device_mapauto) tokenizer AutoTokenizer.from_pretrained(model_name)使用ModelScope需要先安装pip install modelscope方法三手动下载后使用本地路径如果你已经下载好了模型文件或者从其他地方获得了模型权重可以直接指定本地路径。这是最推荐的方式因为模型文件比较大大约6GB一次性下载好之后就不用每次重新下载了。假设你把模型下载到了D:/ai-models/nanbeige/Nanbeige4-3B/目录那么后续的代码中就可以直接使用这个路径。4. 完整代码解析与配置现在我们来详细看看app.py的完整代码。我会分段解释每个部分的作用这样你不仅能部署还能理解背后的原理。4.1 基础配置和样式注入代码的开头部分设置了Streamlit的页面配置并注入了自定义的CSS样式。这是实现漂亮界面的关键。import streamlit as st import torch from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer from threading import Thread import time # 设置页面配置 st.set_page_config( page_titleNanbeige 4.1-3B Chat, page_icon, layoutwide, initial_sidebar_statecollapsed # 折叠侧边栏让界面更干净 ) # 注入自定义CSS样式 st.markdown( style /* 这里放置所有的CSS样式代码 */ /style , unsafe_allow_htmlTrue) # 设置模型路径需要你修改成自己的路径 MODEL_PATH /path/to/your/nanbeige/model # 修改这一行 # 初始化session state用于存储聊天记录 if messages not in st.session_state: st.session_state.messages []关键点说明layoutwide让页面使用宽屏布局聊天区域更宽敞initial_sidebar_statecollapsed默认折叠侧边栏因为我们不需要Streamlit原生的侧边栏控件unsafe_allow_htmlTrue允许在Streamlit中直接使用HTML和CSS这是实现自定义样式的关键st.session_state.messages用于在页面刷新时保持聊天记录4.2 核心CSS样式打造游戏级界面CSS部分是这个项目的精华所在它定义了所有的视觉样式。我提取了最核心的部分/* 背景样式天蓝色波点网格 */ .stApp { background: linear-gradient(135deg, #f0f8ff 25%, #e6f7ff 25%, #e6f7ff 50%, #f0f8ff 50%, #f0f8ff 75%, #e6f7ff 75%, #e6f7ff); background-size: 40px 40px; } /* 聊天气泡容器 */ .chat-container { max-width: 800px; margin: 0 auto; padding: 20px; } /* 用户消息气泡右对齐 */ .user-message { background: linear-gradient(135deg, #4fc3f7, #29b6f6); color: white; border-radius: 18px 18px 4px 18px; padding: 12px 16px; margin: 8px 0; max-width: 70%; align-self: flex-end; box-shadow: 0 2px 8px rgba(41, 182, 246, 0.2); } /* AI消息气泡左对齐 */ .ai-message { background: white; color: #333; border-radius: 18px 18px 18px 4px; padding: 12px 16px; margin: 8px 0; max-width: 70%; align-self: flex-start; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* 输入框样式 */ .stTextInput div div input { border-radius: 25px; border: 2px solid #4fc3f7; padding: 12px 20px; font-size: 16px; } /* 按钮样式 */ .stButton button { border-radius: 20px; background: linear-gradient(135deg, #4fc3f7, #29b6f6); color: white; border: none; padding: 10px 24px; font-weight: 500; }这些CSS样式定义了背景的波点网格效果聊天气泡的圆角、阴影和颜色输入框的药丸形状按钮的渐变色彩4.3 模型加载和推理函数这部分代码负责加载模型并处理对话生成。为了提升体验我们使用了流式输出。st.cache_resource def load_model(): 加载模型和分词器使用缓存避免重复加载 try: tokenizer AutoTokenizer.from_pretrained(MODEL_PATH, trust_remote_codeTrue) model AutoModelForCausalLM.from_pretrained( MODEL_PATH, torch_dtypetorch.float16, device_mapauto, trust_remote_codeTrue ) return model, tokenizer except Exception as e: st.error(f模型加载失败: {e}) return None, None def generate_response_stream(prompt, model, tokenizer, max_length2048): 流式生成回复 # 构建对话格式 messages [{role: user, content: prompt}] text tokenizer.apply_chat_template(messages, tokenizeFalse, add_generation_promptTrue) # 准备输入 inputs tokenizer(text, return_tensorspt).to(model.device) # 创建流式输出器 streamer TextIteratorStreamer(tokenizer, skip_promptTrue, skip_special_tokensTrue) # 在单独线程中生成 generation_kwargs dict( inputs, streamerstreamer, max_new_tokensmax_length, do_sampleTrue, temperature0.7, top_p0.9, ) thread Thread(targetmodel.generate, kwargsgeneration_kwargs) thread.start() # 逐步返回生成的文本 generated_text for token in streamer: generated_text token yield generated_text关键点说明st.cache_resource装饰器让Streamlit缓存加载的模型避免每次交互都重新加载TextIteratorStreamer是实现流式输出的核心它让模型生成一个token就立即输出一个多线程技术确保生成过程不会阻塞Web界面的响应apply_chat_template方法自动将对话格式转换为模型需要的格式4.4 界面布局和交互逻辑最后是界面的布局和交互处理部分def main(): # 加载模型 model, tokenizer load_model() if model is None or tokenizer is None: st.error(模型加载失败请检查模型路径) return # 标题区域 st.markdown( div styletext-align: center; padding: 20px 0; h1 stylecolor: #29b6f6; margin-bottom: 10px; Nanbeige 4.1-3B Chat/h1 p stylecolor: #666;极简清爽的二次元风格聊天界面/p /div , unsafe_allow_htmlTrue) # 聊天记录显示区域 chat_container st.container() with chat_container: for message in st.session_state.messages: role message[role] content message[content] if role user: st.markdown(f div styledisplay: flex; justify-content: flex-end; margin: 10px 0; div classuser-message {content} /div /div , unsafe_allow_htmlTrue) else: # 处理思考过程CoT的折叠显示 if /think in content and think in content: # 提取思考过程和最终回复 parts content.split(/think, 1) if len(parts) 2: thought parts[0] /think final_answer parts[1] with st.expander( 查看思考过程, expandedFalse): st.markdown(fdiv stylepadding: 10px; background: #f5f5f5; border-radius: 8px;{thought}/div, unsafe_allow_htmlTrue) st.markdown(f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message {final_answer} /div /div , unsafe_allow_htmlTrue) else: st.markdown(f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message {content} /div /div , unsafe_allow_htmlTrue) # 输入区域 st.markdown(div stylepadding: 20px 0;/div, unsafe_allow_htmlTrue) col1, col2 st.columns([6, 1]) with col1: user_input st.text_input( 输入你的消息..., keyuser_input, label_visibilitycollapsed, placeholder在这里输入你想说的话... ) with col2: send_button st.button(发送, use_container_widthTrue) clear_button st.button(清空, use_container_widthTrue) # 处理清空按钮 if clear_button: st.session_state.messages [] st.rerun() # 处理发送按钮 if send_button and user_input: # 添加用户消息到历史 st.session_state.messages.append({role: user, content: user_input}) # 显示用户消息 with chat_container: st.markdown(f div styledisplay: flex; justify-content: flex-end; margin: 10px 0; div classuser-message {user_input} /div /div , unsafe_allow_htmlTrue) # 生成AI回复流式 with chat_container: ai_response_placeholder st.empty() full_response for chunk in generate_response_stream(user_input, model, tokenizer): full_response chunk # 处理思考过程的显示 if /think in full_response: parts full_response.split(/think, 1) if len(parts) 2: thought parts[0] /think final_answer parts[1] display_html f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message details stylemargin-bottom: 10px; summary stylecolor: #666; cursor: pointer; 模型正在思考点击展开/summary div stylepadding: 10px; background: #f9f9f9; border-radius: 8px; margin-top: 5px; {thought} /div /details {final_answer} /div /div else: display_html f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message {full_response} /div /div else: display_html f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message {full_response} /div /div ai_response_placeholder.markdown(display_html, unsafe_allow_htmlTrue) # 添加AI回复到历史 st.session_state.messages.append({role: assistant, content: full_response}) # 清空输入框 st.session_state.user_input st.rerun() if __name__ __main__: main()5. 一键启动与使用指南现在你已经有了完整的代码接下来就是运行它了。这个过程非常简单只需要几个步骤。5.1 修改模型路径首先打开app.py文件找到这一行MODEL_PATH /path/to/your/nanbeige/model # 修改这一行把它改成你实际存放Nanbeige 4.1-3B模型文件的路径。比如# Windows示例 MODEL_PATH D:/ai-models/nanbeige/Nanbeige4-3B/ # Linux/Mac示例 MODEL_PATH /home/username/models/nanbeige/Nanbeige4-3B/重要提示路径最后要有斜杠/并且确保这个目录下包含模型的所有必要文件通常是config.json、pytorch_model.bin等。5.2 启动Web服务打开终端进入到存放app.py文件的目录然后运行streamlit run app.py你会看到类似这样的输出You can now view your Streamlit app in your browser. Local URL: http://localhost:8501 Network URL: http://192.168.1.100:8501Streamlit会自动在浏览器中打开应用。如果没有自动打开你可以手动在浏览器中输入http://localhost:8501。5.3 第一次运行可能遇到的问题如果你是第一次运行可能会遇到一些常见问题问题1模型加载太慢或内存不足解决方案确保你的电脑有足够的RAM至少16GB并且模型加载时使用了torch.float16来减少内存占用问题2Streamlit提示端口被占用解决方案可以指定其他端口运行streamlit run app.py --server.port 8502问题3CSS样式没有生效解决方案检查浏览器控制台是否有错误确保CSS代码正确嵌套在st.markdown的style标签中5.4 开始聊天体验界面加载成功后你会看到一个清爽的聊天界面顶部是简洁的标题“ Nanbeige 4.1-3B Chat”中间区域是聊天记录显示区初始为空底部是输入框和发送按钮试着输入一些内容比如“你好介绍一下你自己”“用Python写一个快速排序算法”“讲一个有趣的故事”你会看到你的消息显示在右侧天蓝色气泡AI的回复显示在左侧白色气泡如果模型有思考过程会显示“ 查看思考过程”的折叠区域文字会像打字机一样逐个出现6. 自定义与扩展建议这个项目不仅开箱即用还很容易自定义和扩展。下面是一些你可以尝试的修改方向。6.1 修改界面样式如果你不喜欢默认的天蓝色风格可以轻松修改CSS来改变外观更改背景颜色和图案/* 改为深色模式 */ .stApp { background: linear-gradient(135deg, #1a1a2e 25%, #16213e 25%, #16213e 50%, #1a1a2e 50%, #1a1a2e 75%, #16213e 75%, #16213e); background-size: 40px 40px; color: white; } /* 更改用户气泡颜色 */ .user-message { background: linear-gradient(135deg, #ff6b6b, #ee5a52); /* 其他样式保持不变 */ } /* 更改AI气泡颜色 */ .ai-message { background: #2d3436; color: white; /* 其他样式保持不变 */ }调整气泡大小和间距/* 调整气泡最大宽度 */ .user-message, .ai-message { max-width: 60%; /* 从70%改为60% */ } /* 调整气泡内边距 */ .user-message, .ai-message { padding: 15px 20px; /* 增加内边距 */ margin: 12px 0; /* 增加外边距 */ } /* 调整字体大小 */ .user-message, .ai-message { font-size: 16px; /* 增大字体 */ line-height: 1.6; /* 调整行高 */ }6.2 添加新功能你可以在现有基础上添加更多实用功能添加对话历史保存import json import os def save_chat_history(messages, filenamechat_history.json): 保存聊天记录到文件 with open(filename, w, encodingutf-8) as f: json.dump(messages, f, ensure_asciiFalse, indent2) def load_chat_history(filenamechat_history.json): 从文件加载聊天记录 if os.path.exists(filename): with open(filename, r, encodingutf-8) as f: return json.load(f) return [] # 在合适的地方调用保存和加载函数添加模型参数调整界面# 在侧边栏添加参数调整如果你启用了侧边栏 with st.sidebar: st.header(模型参数设置) temperature st.slider(Temperature, 0.1, 1.0, 0.7, 0.1) top_p st.slider(Top-p, 0.1, 1.0, 0.9, 0.1) max_length st.slider(最大生成长度, 100, 2048, 1024, 100) # 然后在生成函数中使用这些参数支持多模型切换# 添加模型选择 model_options { Nanbeige 4.1-3B: /path/to/nanbeige, Qwen2.5-7B: /path/to/qwen, Llama3-8B: /path/to/llama } selected_model st.selectbox(选择模型, list(model_options.keys())) MODEL_PATH model_options[selected_model] # 注意切换模型时需要清理缓存 if current_model not in st.session_state or st.session_state.current_model ! selected_model: st.session_state.current_model selected_model load_model.clear() # 清理模型缓存6.3 适配其他模型这个界面不仅适用于Nanbeige也可以轻松适配其他支持对话格式的开源模型。主要需要修改的是对话模板部分对于Qwen系列模型# 修改对话格式构建 def build_qwen_prompt(messages): 构建Qwen模型的对话格式 prompt for message in messages: if message[role] user: prompt f|im_start|user\n{message[content]}|im_end|\n else: prompt f|im_start|assistant\n{message[content]}|im_end|\n prompt |im_start|assistant\n return prompt对于Llama系列模型def build_llama_prompt(messages): 构建Llama模型的对话格式 B_INST, E_INST [INST], [/INST] B_SYS, E_SYS SYS\n, \n/SYS\n\n prompt for message in messages: if message[role] user: prompt f{B_INST} {message[content]} {E_INST} else: prompt f {message[content]} /s return prompt7. 总结通过这个教程你应该已经成功在本地部署了一个既美观又实用的Nanbeige 4.1-3B聊天界面。我们来回顾一下关键要点部署过程其实很简单安装必要的Python库streamlit、torch、transformers、accelerate下载模型文件到本地获取或创建app.py文件修改模型路径运行streamlit run app.py启动服务这个项目的核心价值零前端基础友好所有界面效果都用Python和CSS实现不需要学习复杂的前端框架视觉体验出色打破了Streamlit的传统样式限制提供了游戏级的聊天界面功能针对性强专门为大模型对话优化支持思考过程折叠和流式输出易于自定义CSS样式和Python代码都清晰易懂可以根据需要随意修改你可以继续探索的方向尝试更换不同的颜色主题打造属于自己的风格添加更多实用功能比如对话导出、参数调整、多模型支持将这个界面适配到其他你喜欢的开源模型优化性能比如添加模型量化支持以减少内存占用最重要的是这个项目展示了用纯Python也能做出漂亮、实用的Web应用。你不需要成为全栈工程师也不需要学习复杂的前端技术就能让本地大模型有一个配得上它能力的交互界面。现在打开浏览器开始和你本地的Nanbeige模型聊天吧。你会发现有一个好看的界面连对话都变得更有趣了。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Nanbeige 4.1-3B WebUI部署教程：零前端基础用Python跑出蔚蓝档案风格聊天界面
发布时间：2026/7/9 19:25:17
Nanbeige 4.1-3B WebUI部署教程零前端基础用Python跑出蔚蓝档案风格聊天界面你是不是也遇到过这种情况好不容易在本地部署了一个开源大模型想跟它聊聊天结果打开的那个Web界面怎么看都像是上个世纪的产物——侧边栏挤满了各种按钮聊天框方方正正头像呆板无趣整个界面透着一股“能用就行”的凑合感。今天我要分享的这个项目能彻底改变你对本地大模型聊天界面的认知。它不需要你懂任何前端框架React、Vue、Angular统统不用只需要会写Python就能在本地跑出一个风格酷似《蔚蓝档案》MomoTalk的现代极简聊天界面。这个界面有多特别它用天蓝色系的波点网格做背景聊天气泡左右对齐输入框悬浮在底部整个交互体验就像在用一款精心设计的手机聊天软件。更重要的是它原生支持模型的“思考过程”显示还能实现丝滑的流式输出让你看着文字一个字一个字地“打”出来。下面我就带你一步步把这个漂亮的界面跑起来即使你完全没有前端基础也能在10分钟内搞定。1. 项目核心亮点为什么这个界面值得一试在开始动手之前我们先看看这个WebUI到底有哪些吸引人的地方。了解这些亮点你就能明白为什么它值得你花时间部署。1.1 视觉体验从“能用”到“好用又好看”传统的Streamlit应用界面有个通病——布局死板组件样式单一。这个项目通过深度定制CSS彻底打破了这些限制沉浸式背景不再是单调的白色或灰色而是采用了清爽的天蓝色系搭配极简的圆点矩阵网格视觉上更加舒适智能气泡布局用户消息自动右对齐天蓝色背景AI回复自动左对齐纯白背景带轻微阴影完全模拟真实聊天软件悬浮输入框输入框设计成悬浮的“药丸”形状固定在界面底部无论聊天记录多长都能随时输入极简操作区顶部只有简洁的标题右上角一个悬浮的“清空记录”按钮没有任何多余的干扰元素1.2 功能特色专为大模型对话优化除了好看这个界面在功能上也做了很多针对性的优化思考过程智能折叠很多支持深度思考Chain-of-Thought的模型会在回复中包含think.../think这样的思考标记。这个界面能自动识别这些内容并优雅地折叠起来点击才能展开既保持了界面的清爽又不丢失重要信息真正的流式输出基于TextIteratorStreamer和多线程技术实现了打字机级别的逐字输出效果。特别优化了CSS防抖确保在文字不断出现的过程中聊天气泡不会闪烁或变形纯Python驱动整个项目就一个app.py文件所有前端效果都用Python代码控制CSS实现不需要额外学习前端技术栈1.3 技术巧思用CSS魔法解决布局难题这个项目最巧妙的地方在于它用了一个很少人知道的CSS技巧来实现在Streamlit中难以完成的功能——动态判断消息来源并调整气泡对齐方向。传统做法需要在Python中判断消息类型然后分别渲染不同的HTML结构。但这个项目通过在消息中插入一个不可见的HTML标记比如span classuser-mark/span然后利用CSS的:has()伪类选择器来检测这个标记从而动态改变父容器的布局方向。简单来说就是用CSS“看到”Python插入的标记然后自动调整样式。这种思路非常巧妙也展示了纯Python项目也能做出复杂的前端交互效果。2. 环境准备安装必要的Python库开始部署前你需要确保电脑上已经安装了Python环境。我推荐使用Python 3.10或更高版本兼容性更好。打开你的终端Windows用户用命令提示符或PowerShellMac/Linux用户用终端执行下面的安装命令pip install streamlit torch transformers accelerate这几个库的作用分别是streamlitWeb应用框架让我们能用Python快速构建交互界面torchPyTorch深度学习框架运行模型的基础transformersHugging Face的模型加载和推理库accelerate优化模型加载和推理速度如果你之前已经安装过这些库可以跳过这一步。如果安装过程中遇到网络问题可以尝试使用国内的镜像源pip install streamlit torch transformers accelerate -i https://pypi.tuna.tsinghua.edu.cn/simple安装完成后可以用下面的命令检查是否安装成功python -c import streamlit; import torch; import transformers; print(所有库都已成功安装)如果看到“所有库都已成功安装”的输出说明环境准备就绪。3. 获取项目代码和模型文件接下来我们需要两样东西项目的Python代码文件以及Nanbeige 4.1-3B的模型文件。3.1 下载项目代码这个项目的所有代码都集中在一个文件里app.py。你可以从GitHub或其他代码托管平台获取这个文件。如果你不知道从哪里下载我可以给你一个简单的获取方法创建一个新的Python文件命名为app.py然后把下面的代码模板复制进去。这是项目的核心结构完整的代码我会在后面的章节提供。import streamlit as st import torch from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer from threading import Thread import time # 页面配置 st.set_page_config( page_titleNanbeige 4.1-3B Chat, page_icon, layoutwide, initial_sidebar_statecollapsed ) # 在这里添加更多的代码...3.2 下载模型文件Nanbeige 4.1-3B是一个开源的对话模型你需要在Hugging Face的模型库中下载它。如果你访问Hugging Face有困难也可以从国内的镜像源下载。方法一使用Hugging Face官方需要网络环境支持from transformers import AutoModelForCausalLM, AutoTokenizer model_name Nanbeige/Nanbeige4-3B model AutoModelForCausalLM.from_pretrained(model_name, torch_dtypetorch.float16, device_mapauto) tokenizer AutoTokenizer.from_pretrained(model_name)方法二从国内镜像下载推荐如果你下载速度慢或者连接不稳定可以使用ModelScope魔搭社区from modelscope import AutoModelForCausalLM, AutoTokenizer model_name Nanbeige/Nanbeige4-3B model AutoModelForCausalLM.from_pretrained(model_name, torch_dtypetorch.float16, device_mapauto) tokenizer AutoTokenizer.from_pretrained(model_name)使用ModelScope需要先安装pip install modelscope方法三手动下载后使用本地路径如果你已经下载好了模型文件或者从其他地方获得了模型权重可以直接指定本地路径。这是最推荐的方式因为模型文件比较大大约6GB一次性下载好之后就不用每次重新下载了。假设你把模型下载到了D:/ai-models/nanbeige/Nanbeige4-3B/目录那么后续的代码中就可以直接使用这个路径。4. 完整代码解析与配置现在我们来详细看看app.py的完整代码。我会分段解释每个部分的作用这样你不仅能部署还能理解背后的原理。4.1 基础配置和样式注入代码的开头部分设置了Streamlit的页面配置并注入了自定义的CSS样式。这是实现漂亮界面的关键。import streamlit as st import torch from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer from threading import Thread import time # 设置页面配置 st.set_page_config( page_titleNanbeige 4.1-3B Chat, page_icon, layoutwide, initial_sidebar_statecollapsed # 折叠侧边栏让界面更干净 ) # 注入自定义CSS样式 st.markdown( style /* 这里放置所有的CSS样式代码 */ /style , unsafe_allow_htmlTrue) # 设置模型路径需要你修改成自己的路径 MODEL_PATH /path/to/your/nanbeige/model # 修改这一行 # 初始化session state用于存储聊天记录 if messages not in st.session_state: st.session_state.messages []关键点说明layoutwide让页面使用宽屏布局聊天区域更宽敞initial_sidebar_statecollapsed默认折叠侧边栏因为我们不需要Streamlit原生的侧边栏控件unsafe_allow_htmlTrue允许在Streamlit中直接使用HTML和CSS这是实现自定义样式的关键st.session_state.messages用于在页面刷新时保持聊天记录4.2 核心CSS样式打造游戏级界面CSS部分是这个项目的精华所在它定义了所有的视觉样式。我提取了最核心的部分/* 背景样式天蓝色波点网格 */ .stApp { background: linear-gradient(135deg, #f0f8ff 25%, #e6f7ff 25%, #e6f7ff 50%, #f0f8ff 50%, #f0f8ff 75%, #e6f7ff 75%, #e6f7ff); background-size: 40px 40px; } /* 聊天气泡容器 */ .chat-container { max-width: 800px; margin: 0 auto; padding: 20px; } /* 用户消息气泡右对齐 */ .user-message { background: linear-gradient(135deg, #4fc3f7, #29b6f6); color: white; border-radius: 18px 18px 4px 18px; padding: 12px 16px; margin: 8px 0; max-width: 70%; align-self: flex-end; box-shadow: 0 2px 8px rgba(41, 182, 246, 0.2); } /* AI消息气泡左对齐 */ .ai-message { background: white; color: #333; border-radius: 18px 18px 18px 4px; padding: 12px 16px; margin: 8px 0; max-width: 70%; align-self: flex-start; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* 输入框样式 */ .stTextInput div div input { border-radius: 25px; border: 2px solid #4fc3f7; padding: 12px 20px; font-size: 16px; } /* 按钮样式 */ .stButton button { border-radius: 20px; background: linear-gradient(135deg, #4fc3f7, #29b6f6); color: white; border: none; padding: 10px 24px; font-weight: 500; }这些CSS样式定义了背景的波点网格效果聊天气泡的圆角、阴影和颜色输入框的药丸形状按钮的渐变色彩4.3 模型加载和推理函数这部分代码负责加载模型并处理对话生成。为了提升体验我们使用了流式输出。st.cache_resource def load_model(): 加载模型和分词器使用缓存避免重复加载 try: tokenizer AutoTokenizer.from_pretrained(MODEL_PATH, trust_remote_codeTrue) model AutoModelForCausalLM.from_pretrained( MODEL_PATH, torch_dtypetorch.float16, device_mapauto, trust_remote_codeTrue ) return model, tokenizer except Exception as e: st.error(f模型加载失败: {e}) return None, None def generate_response_stream(prompt, model, tokenizer, max_length2048): 流式生成回复 # 构建对话格式 messages [{role: user, content: prompt}] text tokenizer.apply_chat_template(messages, tokenizeFalse, add_generation_promptTrue) # 准备输入 inputs tokenizer(text, return_tensorspt).to(model.device) # 创建流式输出器 streamer TextIteratorStreamer(tokenizer, skip_promptTrue, skip_special_tokensTrue) # 在单独线程中生成 generation_kwargs dict( inputs, streamerstreamer, max_new_tokensmax_length, do_sampleTrue, temperature0.7, top_p0.9, ) thread Thread(targetmodel.generate, kwargsgeneration_kwargs) thread.start() # 逐步返回生成的文本 generated_text for token in streamer: generated_text token yield generated_text关键点说明st.cache_resource装饰器让Streamlit缓存加载的模型避免每次交互都重新加载TextIteratorStreamer是实现流式输出的核心它让模型生成一个token就立即输出一个多线程技术确保生成过程不会阻塞Web界面的响应apply_chat_template方法自动将对话格式转换为模型需要的格式4.4 界面布局和交互逻辑最后是界面的布局和交互处理部分def main(): # 加载模型 model, tokenizer load_model() if model is None or tokenizer is None: st.error(模型加载失败请检查模型路径) return # 标题区域 st.markdown( div styletext-align: center; padding: 20px 0; h1 stylecolor: #29b6f6; margin-bottom: 10px; Nanbeige 4.1-3B Chat/h1 p stylecolor: #666;极简清爽的二次元风格聊天界面/p /div , unsafe_allow_htmlTrue) # 聊天记录显示区域 chat_container st.container() with chat_container: for message in st.session_state.messages: role message[role] content message[content] if role user: st.markdown(f div styledisplay: flex; justify-content: flex-end; margin: 10px 0; div classuser-message {content} /div /div , unsafe_allow_htmlTrue) else: # 处理思考过程CoT的折叠显示 if /think in content and think in content: # 提取思考过程和最终回复 parts content.split(/think, 1) if len(parts) 2: thought parts[0] /think final_answer parts[1] with st.expander( 查看思考过程, expandedFalse): st.markdown(fdiv stylepadding: 10px; background: #f5f5f5; border-radius: 8px;{thought}/div, unsafe_allow_htmlTrue) st.markdown(f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message {final_answer} /div /div , unsafe_allow_htmlTrue) else: st.markdown(f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message {content} /div /div , unsafe_allow_htmlTrue) # 输入区域 st.markdown(div stylepadding: 20px 0;/div, unsafe_allow_htmlTrue) col1, col2 st.columns([6, 1]) with col1: user_input st.text_input( 输入你的消息..., keyuser_input, label_visibilitycollapsed, placeholder在这里输入你想说的话... ) with col2: send_button st.button(发送, use_container_widthTrue) clear_button st.button(清空, use_container_widthTrue) # 处理清空按钮 if clear_button: st.session_state.messages [] st.rerun() # 处理发送按钮 if send_button and user_input: # 添加用户消息到历史 st.session_state.messages.append({role: user, content: user_input}) # 显示用户消息 with chat_container: st.markdown(f div styledisplay: flex; justify-content: flex-end; margin: 10px 0; div classuser-message {user_input} /div /div , unsafe_allow_htmlTrue) # 生成AI回复流式 with chat_container: ai_response_placeholder st.empty() full_response for chunk in generate_response_stream(user_input, model, tokenizer): full_response chunk # 处理思考过程的显示 if /think in full_response: parts full_response.split(/think, 1) if len(parts) 2: thought parts[0] /think final_answer parts[1] display_html f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message details stylemargin-bottom: 10px; summary stylecolor: #666; cursor: pointer; 模型正在思考点击展开/summary div stylepadding: 10px; background: #f9f9f9; border-radius: 8px; margin-top: 5px; {thought} /div /details {final_answer} /div /div else: display_html f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message {full_response} /div /div else: display_html f div styledisplay: flex; justify-content: flex-start; margin: 10px 0; div classai-message {full_response} /div /div ai_response_placeholder.markdown(display_html, unsafe_allow_htmlTrue) # 添加AI回复到历史 st.session_state.messages.append({role: assistant, content: full_response}) # 清空输入框 st.session_state.user_input st.rerun() if __name__ __main__: main()5. 一键启动与使用指南现在你已经有了完整的代码接下来就是运行它了。这个过程非常简单只需要几个步骤。5.1 修改模型路径首先打开app.py文件找到这一行MODEL_PATH /path/to/your/nanbeige/model # 修改这一行把它改成你实际存放Nanbeige 4.1-3B模型文件的路径。比如# Windows示例 MODEL_PATH D:/ai-models/nanbeige/Nanbeige4-3B/ # Linux/Mac示例 MODEL_PATH /home/username/models/nanbeige/Nanbeige4-3B/重要提示路径最后要有斜杠/并且确保这个目录下包含模型的所有必要文件通常是config.json、pytorch_model.bin等。5.2 启动Web服务打开终端进入到存放app.py文件的目录然后运行streamlit run app.py你会看到类似这样的输出You can now view your Streamlit app in your browser. Local URL: http://localhost:8501 Network URL: http://192.168.1.100:8501Streamlit会自动在浏览器中打开应用。如果没有自动打开你可以手动在浏览器中输入http://localhost:8501。5.3 第一次运行可能遇到的问题如果你是第一次运行可能会遇到一些常见问题问题1模型加载太慢或内存不足解决方案确保你的电脑有足够的RAM至少16GB并且模型加载时使用了torch.float16来减少内存占用问题2Streamlit提示端口被占用解决方案可以指定其他端口运行streamlit run app.py --server.port 8502问题3CSS样式没有生效解决方案检查浏览器控制台是否有错误确保CSS代码正确嵌套在st.markdown的style标签中5.4 开始聊天体验界面加载成功后你会看到一个清爽的聊天界面顶部是简洁的标题“ Nanbeige 4.1-3B Chat”中间区域是聊天记录显示区初始为空底部是输入框和发送按钮试着输入一些内容比如“你好介绍一下你自己”“用Python写一个快速排序算法”“讲一个有趣的故事”你会看到你的消息显示在右侧天蓝色气泡AI的回复显示在左侧白色气泡如果模型有思考过程会显示“ 查看思考过程”的折叠区域文字会像打字机一样逐个出现6. 自定义与扩展建议这个项目不仅开箱即用还很容易自定义和扩展。下面是一些你可以尝试的修改方向。6.1 修改界面样式如果你不喜欢默认的天蓝色风格可以轻松修改CSS来改变外观更改背景颜色和图案/* 改为深色模式 */ .stApp { background: linear-gradient(135deg, #1a1a2e 25%, #16213e 25%, #16213e 50%, #1a1a2e 50%, #1a1a2e 75%, #16213e 75%, #16213e); background-size: 40px 40px; color: white; } /* 更改用户气泡颜色 */ .user-message { background: linear-gradient(135deg, #ff6b6b, #ee5a52); /* 其他样式保持不变 */ } /* 更改AI气泡颜色 */ .ai-message { background: #2d3436; color: white; /* 其他样式保持不变 */ }调整气泡大小和间距/* 调整气泡最大宽度 */ .user-message, .ai-message { max-width: 60%; /* 从70%改为60% */ } /* 调整气泡内边距 */ .user-message, .ai-message { padding: 15px 20px; /* 增加内边距 */ margin: 12px 0; /* 增加外边距 */ } /* 调整字体大小 */ .user-message, .ai-message { font-size: 16px; /* 增大字体 */ line-height: 1.6; /* 调整行高 */ }6.2 添加新功能你可以在现有基础上添加更多实用功能添加对话历史保存import json import os def save_chat_history(messages, filenamechat_history.json): 保存聊天记录到文件 with open(filename, w, encodingutf-8) as f: json.dump(messages, f, ensure_asciiFalse, indent2) def load_chat_history(filenamechat_history.json): 从文件加载聊天记录 if os.path.exists(filename): with open(filename, r, encodingutf-8) as f: return json.load(f) return [] # 在合适的地方调用保存和加载函数添加模型参数调整界面# 在侧边栏添加参数调整如果你启用了侧边栏 with st.sidebar: st.header(模型参数设置) temperature st.slider(Temperature, 0.1, 1.0, 0.7, 0.1) top_p st.slider(Top-p, 0.1, 1.0, 0.9, 0.1) max_length st.slider(最大生成长度, 100, 2048, 1024, 100) # 然后在生成函数中使用这些参数支持多模型切换# 添加模型选择 model_options { Nanbeige 4.1-3B: /path/to/nanbeige, Qwen2.5-7B: /path/to/qwen, Llama3-8B: /path/to/llama } selected_model st.selectbox(选择模型, list(model_options.keys())) MODEL_PATH model_options[selected_model] # 注意切换模型时需要清理缓存 if current_model not in st.session_state or st.session_state.current_model ! selected_model: st.session_state.current_model selected_model load_model.clear() # 清理模型缓存6.3 适配其他模型这个界面不仅适用于Nanbeige也可以轻松适配其他支持对话格式的开源模型。主要需要修改的是对话模板部分对于Qwen系列模型# 修改对话格式构建 def build_qwen_prompt(messages): 构建Qwen模型的对话格式 prompt for message in messages: if message[role] user: prompt f|im_start|user\n{message[content]}|im_end|\n else: prompt f|im_start|assistant\n{message[content]}|im_end|\n prompt |im_start|assistant\n return prompt对于Llama系列模型def build_llama_prompt(messages): 构建Llama模型的对话格式 B_INST, E_INST [INST], [/INST] B_SYS, E_SYS SYS\n, \n/SYS\n\n prompt for message in messages: if message[role] user: prompt f{B_INST} {message[content]} {E_INST} else: prompt f {message[content]} /s return prompt7. 总结通过这个教程你应该已经成功在本地部署了一个既美观又实用的Nanbeige 4.1-3B聊天界面。我们来回顾一下关键要点部署过程其实很简单安装必要的Python库streamlit、torch、transformers、accelerate下载模型文件到本地获取或创建app.py文件修改模型路径运行streamlit run app.py启动服务这个项目的核心价值零前端基础友好所有界面效果都用Python和CSS实现不需要学习复杂的前端框架视觉体验出色打破了Streamlit的传统样式限制提供了游戏级的聊天界面功能针对性强专门为大模型对话优化支持思考过程折叠和流式输出易于自定义CSS样式和Python代码都清晰易懂可以根据需要随意修改你可以继续探索的方向尝试更换不同的颜色主题打造属于自己的风格添加更多实用功能比如对话导出、参数调整、多模型支持将这个界面适配到其他你喜欢的开源模型优化性能比如添加模型量化支持以减少内存占用最重要的是这个项目展示了用纯Python也能做出漂亮、实用的Web应用。你不需要成为全栈工程师也不需要学习复杂的前端技术就能让本地大模型有一个配得上它能力的交互界面。现在打开浏览器开始和你本地的Nanbeige模型聊天吧。你会发现有一个好看的界面连对话都变得更有趣了。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
