Nanbeige 4.1-3B保姆级教程从HuggingFace加载到Streamlit渲染1. 项目介绍与准备Nanbeige 4.1-3B是一款具有独特像素游戏风格的对话模型前端界面。这个教程将带你从零开始完成从HuggingFace模型加载到Streamlit界面渲染的完整流程。1.1 环境准备在开始前请确保你的系统满足以下要求Python 3.8或更高版本至少16GB内存NVIDIA GPU推荐RTX 3090或更高已安装Git安装必要的Python包pip install torch transformers streamlit1.2 项目结构建议按以下结构组织项目文件nanbeige-chat/ ├── app.py # Streamlit主程序 ├── assets/ # 存放图片和样式文件 ├── requirements.txt └── README.md2. 模型加载与初始化2.1 从HuggingFace加载模型首先我们需要从HuggingFace加载Nanbeige 4.1-3B模型。创建一个Python文件model_loader.pyfrom transformers import AutoModelForCausalLM, AutoTokenizer def load_model(): model_name Nanbeige/Nanbeige-4.1-3B tokenizer AutoTokenizer.from_pretrained(model_name) model AutoModelForCausalLM.from_pretrained(model_name, device_mapauto) return model, tokenizer2.2 模型缓存优化为了提升性能我们可以使用Streamlit的缓存功能import streamlit as st st.cache_resource def get_model(): return load_model()3. Streamlit界面开发3.1 基础界面搭建创建app.py文件设置基本的Streamlit界面import streamlit as st st.set_page_config( page_titleNanbeige RPG Chat, page_icon, layoutwide ) # 加载模型 model, tokenizer get_model() # 标题和介绍 st.title(Nanbeige 4.1-3B RPG Chat) st.markdown(欢迎来到像素风格的AI对话冒险)3.2 像素风格UI实现为了实现像素游戏风格我们需要添加自定义CSS。在assets文件夹中创建style.css/* 像素风格边框 */ .pixel-border { border: 4px solid #2C2C2C; border-image: repeating-linear-gradient(45deg, #2C2C2C, #2C2C2C 4px, transparent 4px, transparent 8px) 4; } /* 玩家消息气泡 */ .player-bubble { background-color: #4D96FF; color: white; border-radius: 8px; padding: 10px; margin: 5px 0; } /* AI消息气泡 */ .ai-bubble { background-color: #6BCB77; color: white; border-radius: 8px; padding: 10px; margin: 5px 0; }在app.py中加载CSSdef load_css(): with open(assets/style.css) as f: st.markdown(fstyle{f.read()}/style, unsafe_allow_htmlTrue) load_css()4. 对话功能实现4.1 聊天历史管理我们需要管理对话历史实现连续对话功能if messages not in st.session_state: st.session_state.messages [] # 显示历史消息 for message in st.session_state.messages: with st.chat_message(message[role]): st.markdown(message[content])4.2 用户输入处理添加用户输入框和发送按钮prompt st.chat_input(输入你的问题...) if prompt: # 添加用户消息到历史 st.session_state.messages.append({role: user, content: prompt}) # 显示用户消息 with st.chat_message(user): st.markdown(prompt, unsafe_allow_htmlTrue) # 生成AI回复 with st.chat_message(assistant): response generate_response(prompt) st.markdown(response, unsafe_allow_htmlTrue) st.session_state.messages.append({role: assistant, content: response})4.3 AI回复生成实现generate_response函数def generate_response(prompt): inputs tokenizer(prompt, return_tensorspt).to(cuda) outputs model.generate( **inputs, max_new_tokens2048, do_sampleTrue, temperature0.7, top_p0.9 ) return tokenizer.decode(outputs[0], skip_special_tokensTrue)5. 高级功能实现5.1 思考过程可视化Nanbeige支持think标签显示思考过程我们可以特别处理这些内容def format_response(response): if think in response: # 提取思考内容 think_start response.find(think) len(think) think_end response.find(/think) think_content response[think_start:think_end] # 格式化显示 formatted response.replace( fthink{think_content}/think, fdiv classthink-box{think_content}/div ) return formatted return response5.2 流式输出效果为了实现字符逐个显示的效果修改生成函数from time import sleep def stream_response(response): message_placeholder st.empty() full_response for chunk in response.split(): full_response chunk sleep(0.05) message_placeholder.markdown(full_response ▌) message_placeholder.markdown(full_response) return full_response6. 部署与运行6.1 本地运行在项目目录下执行streamlit run app.py6.2 云部署可以使用Streamlit Community Cloud或其他云服务部署创建requirements.txt文件torch2.0.0 transformers4.30.0 streamlit1.25.0将项目推送到GitHub仓库在Streamlit Community Cloud中导入仓库7. 总结通过本教程我们完成了Nanbeige 4.1-3B模型的完整部署流程从HuggingFace加载模型并进行缓存优化使用Streamlit搭建基础聊天界面实现像素游戏风格的UI设计添加连续对话和历史管理功能支持思考过程可视化和流式输出效果这个项目展示了如何将大型语言模型与创意UI设计结合创造出独特的用户体验。你可以在此基础上进一步扩展功能如添加更多游戏元素、支持多语言或集成其他AI服务。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
Nanbeige 4.1-3B保姆级教程：从HuggingFace加载到Streamlit渲染
Nanbeige 4.1-3B保姆级教程从HuggingFace加载到Streamlit渲染1. 项目介绍与准备Nanbeige 4.1-3B是一款具有独特像素游戏风格的对话模型前端界面。这个教程将带你从零开始完成从HuggingFace模型加载到Streamlit界面渲染的完整流程。1.1 环境准备在开始前请确保你的系统满足以下要求Python 3.8或更高版本至少16GB内存NVIDIA GPU推荐RTX 3090或更高已安装Git安装必要的Python包pip install torch transformers streamlit1.2 项目结构建议按以下结构组织项目文件nanbeige-chat/ ├── app.py # Streamlit主程序 ├── assets/ # 存放图片和样式文件 ├── requirements.txt └── README.md2. 模型加载与初始化2.1 从HuggingFace加载模型首先我们需要从HuggingFace加载Nanbeige 4.1-3B模型。创建一个Python文件model_loader.pyfrom transformers import AutoModelForCausalLM, AutoTokenizer def load_model(): model_name Nanbeige/Nanbeige-4.1-3B tokenizer AutoTokenizer.from_pretrained(model_name) model AutoModelForCausalLM.from_pretrained(model_name, device_mapauto) return model, tokenizer2.2 模型缓存优化为了提升性能我们可以使用Streamlit的缓存功能import streamlit as st st.cache_resource def get_model(): return load_model()3. Streamlit界面开发3.1 基础界面搭建创建app.py文件设置基本的Streamlit界面import streamlit as st st.set_page_config( page_titleNanbeige RPG Chat, page_icon, layoutwide ) # 加载模型 model, tokenizer get_model() # 标题和介绍 st.title(Nanbeige 4.1-3B RPG Chat) st.markdown(欢迎来到像素风格的AI对话冒险)3.2 像素风格UI实现为了实现像素游戏风格我们需要添加自定义CSS。在assets文件夹中创建style.css/* 像素风格边框 */ .pixel-border { border: 4px solid #2C2C2C; border-image: repeating-linear-gradient(45deg, #2C2C2C, #2C2C2C 4px, transparent 4px, transparent 8px) 4; } /* 玩家消息气泡 */ .player-bubble { background-color: #4D96FF; color: white; border-radius: 8px; padding: 10px; margin: 5px 0; } /* AI消息气泡 */ .ai-bubble { background-color: #6BCB77; color: white; border-radius: 8px; padding: 10px; margin: 5px 0; }在app.py中加载CSSdef load_css(): with open(assets/style.css) as f: st.markdown(fstyle{f.read()}/style, unsafe_allow_htmlTrue) load_css()4. 对话功能实现4.1 聊天历史管理我们需要管理对话历史实现连续对话功能if messages not in st.session_state: st.session_state.messages [] # 显示历史消息 for message in st.session_state.messages: with st.chat_message(message[role]): st.markdown(message[content])4.2 用户输入处理添加用户输入框和发送按钮prompt st.chat_input(输入你的问题...) if prompt: # 添加用户消息到历史 st.session_state.messages.append({role: user, content: prompt}) # 显示用户消息 with st.chat_message(user): st.markdown(prompt, unsafe_allow_htmlTrue) # 生成AI回复 with st.chat_message(assistant): response generate_response(prompt) st.markdown(response, unsafe_allow_htmlTrue) st.session_state.messages.append({role: assistant, content: response})4.3 AI回复生成实现generate_response函数def generate_response(prompt): inputs tokenizer(prompt, return_tensorspt).to(cuda) outputs model.generate( **inputs, max_new_tokens2048, do_sampleTrue, temperature0.7, top_p0.9 ) return tokenizer.decode(outputs[0], skip_special_tokensTrue)5. 高级功能实现5.1 思考过程可视化Nanbeige支持think标签显示思考过程我们可以特别处理这些内容def format_response(response): if think in response: # 提取思考内容 think_start response.find(think) len(think) think_end response.find(/think) think_content response[think_start:think_end] # 格式化显示 formatted response.replace( fthink{think_content}/think, fdiv classthink-box{think_content}/div ) return formatted return response5.2 流式输出效果为了实现字符逐个显示的效果修改生成函数from time import sleep def stream_response(response): message_placeholder st.empty() full_response for chunk in response.split(): full_response chunk sleep(0.05) message_placeholder.markdown(full_response ▌) message_placeholder.markdown(full_response) return full_response6. 部署与运行6.1 本地运行在项目目录下执行streamlit run app.py6.2 云部署可以使用Streamlit Community Cloud或其他云服务部署创建requirements.txt文件torch2.0.0 transformers4.30.0 streamlit1.25.0将项目推送到GitHub仓库在Streamlit Community Cloud中导入仓库7. 总结通过本教程我们完成了Nanbeige 4.1-3B模型的完整部署流程从HuggingFace加载模型并进行缓存优化使用Streamlit搭建基础聊天界面实现像素游戏风格的UI设计添加连续对话和历史管理功能支持思考过程可视化和流式输出效果这个项目展示了如何将大型语言模型与创意UI设计结合创造出独特的用户体验。你可以在此基础上进一步扩展功能如添加更多游戏元素、支持多语言或集成其他AI服务。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。
