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

Nanbeige 4.1-3B实战教程：黄金色强调色与炭黑边框的CSS注入技巧

news 2026/3/27 0:24:06

Nanbeige 4.1-3B实战教程：黄金色强调色与炭黑边框的CSS注入技巧

1. 项目概述与设计理念

Nanbeige 4.1-3B是一款具有独特像素游戏风格的AI对话前端，专为提升用户交互体验而设计。与传统聊天界面不同，它采用了JRPG(日式角色扮演游戏)的视觉元素，让每次对话都像是一场复古冒险。

这套界面的核心设计理念是：

视觉沉浸感：通过高饱和度色彩和像素元素营造游戏氛围
功能可视化：将AI思考过程通过<think>标签直观展示
交互仪式感：流式文本渲染配合像素光标增强操作反馈

2. 环境准备与快速部署

2.1 系统要求

Python 3.8+
Streamlit 1.25+
Transformers 4.30+
显存≥8GB（用于运行3B参数模型）

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 快速启动

将以下代码保存为app.py：

import streamlit as st from transformers import AutoModelForCausalLM, AutoTokenizer @st.cache_resource def load_model(): return AutoModelForCausalLM.from_pretrained("nanbeige-4.1-3B") st.title("Nanbeige 像素冒险终端") # 界面代码将在后续章节补充

启动应用：

streamlit run app.py

3. 核心CSS注入技巧

3.1 黄金色强调色实现

在Streamlit中注入自定义CSS实现黄金色(#FFD700)强调效果：

def inject_gold_accent(): gold_css = """ <style> .gold-accent { color: #FFD700; text-shadow: 1px 1px 2px rgba(0,0,0,0.3); } .gold-border { border: 2px solid #FFD700; box-shadow: 0 0 8px rgba(255,215,0,0.5); } </style> """ st.markdown(gold_css, unsafe_allow_html=True) # 在应用初始化时调用 inject_gold_accent()

3.2 炭黑边框设计

实现4px炭黑边框(#2C2C2C)的像素风格：

def inject_pixel_borders(): pixel_css = """ <style> .pixel-container { border: 4px solid #2C2C2C; position: relative; } .pixel-container:before { content: ""; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border: 2px solid #2C2C2C; pointer-events: none; } </style> """ st.markdown(pixel_css, unsafe_allow_html=True)

4. 完整界面实现

4.1 对话气泡设计

实现玩家(AI)和用户的不同风格对话气泡：

def chat_bubble(text, is_user=False): bubble_color = "#4D96FF" if is_user else "#6BCB77" html = f""" <div style=" background: {bubble_color}; color: white; border-radius: 8px; padding: 12px; margin: 8px 0; border: 2px solid #2C2C2C; position: relative; max-width: 80%; {'margin-left: 20%;' if not is_user else ''} "> {text} </div> """ st.markdown(html, unsafe_allow_html=True)

4.2 流式文本渲染

模拟老式游戏机的文字逐个显示效果：

import time def stream_text(text, speed=0.05): placeholder = st.empty() displayed_text = "" for char in text: displayed_text += char placeholder.markdown(f'<div class="pixel-container">{displayed_text}█</div>', unsafe_allow_html=True) time.sleep(speed) placeholder.markdown(f'<div class="pixel-container">{text}</div>', unsafe_allow_html=True)