当前位置：首页 > news >正文

Nanbeige 4.1-3B基础教程：4px像素边框+阳光草原配色实现详解

news 2026/4/5 23:07:27

Nanbeige 4.1-3B基础教程：4px像素边框+阳光草原配色实现详解

1. 项目概述

Nanbeige 4.1-3B像素冒险聊天终端是一款为对话AI设计的独特前端界面，它将传统AI对话体验转变为充满游戏感的冒险旅程。这个项目特别适合想要为AI应用添加游戏化元素的开发者。

核心特点：

复古像素风格UI设计
高饱和度阳光草原配色方案
角色扮演游戏(RPG)风格的对话交互
完整的视觉设计规范
基于Streamlit的轻量级实现

2. 环境准备与快速部署

2.1 系统要求

Python 3.8+
Streamlit 1.25+
Transformers 4.30+
支持CUDA的GPU（推荐）

2.2 安装步骤

# 创建虚拟环境 python -m venv nanbeige-env source nanbeige-env/bin/activate # Linux/Mac # nanbeige-env\Scripts\activate # Windows # 安装依赖 pip install streamlit transformers torch

2.3 快速启动

创建一个名为nanbeige_ui.py的文件，添加以下基础代码：

import streamlit as st from transformers import AutoModelForCausalLM, AutoTokenizer # 初始化模型 @st.cache_resource def load_model(): model = AutoModelForCausalLM.from_pretrained("nanbeige-4.1-3B") tokenizer = AutoTokenizer.from_pretrained("nanbeige-4.1-3B") return model, tokenizer model, tokenizer = load_model()

3. 像素风格UI实现

3.1 基础CSS样式注入

在Streamlit中注入自定义CSS来实现像素风格：

def inject_custom_css(): st.markdown(""" <style> /* 像素边框 */ .pixel-border { border: 4px solid #2C2C2C !important; border-radius: 0 !important; } /* 阳光草原背景 */ .sunny-bg { background-color: #FDF6E3 !important; } /* 玩家对话框 */ .player-bubble { background-color: #4D96FF; color: white; padding: 10px; margin: 5px 0; border-radius: 4px; } </style> """, unsafe_allow_html=True)

3.2 完整UI组件实现

将CSS应用到Streamlit组件：

def create_chat_interface(): st.title("Nanbeige 4.1-3B 像素冒险") # 应用自定义样式 st.markdown('<div class="pixel-border sunny-bg">', unsafe_allow_html=True) # 聊天历史显示区 chat_container = st.container() # 用户输入区 user_input = st.text_input("你的指令:", key="user_input") # 重置按钮 if st.button("RESET", key="reset_button"): st.session_state.messages = [] st.markdown('</div>', unsafe_allow_html=True) return chat_container, user_input

4. 对话系统实现

4.1 消息处理逻辑

实现RPG风格的对话气泡：

def display_message(role, content): if role == "player": bubble_class = "player-bubble" prefix = "PLAYER:" else: bubble_class = "bot-bubble" prefix = "NANBEIGE LV.99:" st.markdown(f""" <div class="{bubble_class}"> <strong>{prefix}</strong> {content} </div> """, unsafe_allow_html=True) def handle_chat(user_input, chat_container): if "messages" not in st.session_state: st.session_state.messages = [] if user_input: # 添加用户消息 st.session_state.messages.append(("player", user_input)) # 生成AI回复 inputs = tokenizer(user_input, return_tensors="pt") outputs = model.generate(**inputs, max_new_tokens=2048) bot_response = tokenizer.decode(outputs[0], skip_special_tokens=True) # 添加AI回复 st.session_state.messages.append(("bot", bot_response)) # 显示所有消息 with chat_container: for role, content in st.session_state.messages: display_message(role, content)

4.2 思考过程可视化

实现<think>标签的特殊渲染：

def process_think_tags(text): # 提取思考内容 think_content = re.search(r'<think>(.*?)</think>', text, re.DOTALL) if think_content: thought = think_content.group(1) text = text.replace(think_content.group(0), "") # 添加可折叠的思考面板 with st.expander("系统日志 (点击查看思考过程)"): st.code(thought, language="text") return text

5. 完整应用集成

将所有组件组合成完整应用：

def main(): inject_custom_css() chat_container, user_input = create_chat_interface() if user_input: handle_chat(user_input, chat_container) if __name__ == "__main__": main()