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

Nanbeige 4.1-3B WebUI实战案例：集成Stable Diffusion生成图文回复

news 2026/4/19 5:14:04

Nanbeige 4.1-3B WebUI实战案例：集成Stable Diffusion生成图文回复

今天我们来聊聊一个特别有意思的项目——如何把一个原本只能聊天的AI助手，变成一个能说会画的“全能选手”。想象一下，你和AI聊天时，不仅能得到文字回复，它还能根据对话内容，自动生成一张精美的图片来配合回答，是不是感觉瞬间就高级起来了？

这个项目基于南北阁（Nanbeige）4.1-3B模型，搭配一个极简清爽的Web界面，再巧妙地集成了Stable Diffusion图像生成能力。整个过程就像给一个聪明的聊天机器人装上了一支“神笔”，让它能够图文并茂地回应你。

下面，我就带你一步步看看这个项目是怎么实现的，从界面设计到功能集成，再到实际应用，让你也能在自己的电脑上搭建这样一个智能对话系统。

1. 项目概览：当聊天AI遇上图像生成

这个项目的核心思路很简单，但效果很惊艳。它把两个强大的AI能力结合在了一起：

南北阁4.1-3B模型：负责理解你的问题，生成高质量、有逻辑的文字回复。这是一个专门为中文对话优化的模型，回答起来既自然又准确。
Stable Diffusion：负责根据文字描述，生成对应的图片。这是目前最流行的文生图模型之一，画质好，风格多样。

而连接这两者的，就是一个我们精心设计的Web界面。这个界面不仅好看、好用，更重要的是，它能在后台智能地协调两个模型的工作流程。

整个工作流程是这样的：

你在聊天框输入问题或指令。
南北阁模型分析你的输入，准备文字回复。
系统同时会判断，当前对话是否需要生成图片来辅助说明（比如你问“画一只猫”）。
如果需要，系统会提取关键信息，发送给Stable Diffusion模型。
Stable Diffusion生成图片。
Web界面将文字回复和生成的图片一起展示给你。

这样一来，对话就不仅仅是干巴巴的文字了。比如你问“夏天的海边是什么样子？”，AI除了用文字描述阳光、沙滩、海浪，还能直接生成一张碧海蓝天的风景图，体验感直接拉满。

2. 极简清爽的Web界面：不只是好看

这个项目的Web界面是我个人非常喜欢的一部分。它没有用复杂的前端框架，而是基于Streamlit，通过一些CSS技巧，打造出了一个非常现代、清爽的聊天界面，风格有点像一些二次元游戏里的聊天系统，或者手机短信界面，看起来特别舒服。

2.1 界面设计亮点

先说说它为什么好用：

真正的对话感：你的消息在右侧，AI的回复在左侧，气泡式的对话框，加上柔和的背景和阴影，就像真的在用聊天软件。
信息呈现清晰：如果AI模型在回复前有“思考过程”（一种叫Chain-of-Thought的技术），这些思考内容会被自动折叠起来，你可以选择展开查看。这样主界面就非常干净，不会有一大堆中间推理文字干扰阅读。
流畅的体验：AI回复文字是一个字一个字“流式”出现的，像打字一样，而不是等半天突然蹦出一整段。而且界面在输出时非常稳定，不会闪烁或变形。
极简操作：界面顶部只有一个简洁的标题，右上角一个悬浮的“清空记录”按钮，所有功能都聚焦在对话本身，没有乱七八糟的侧边栏和按钮。

2.2 技术实现巧思

这个界面看起来简单，背后用了一个挺巧妙的技术点。Streamlit本身对UI布局的限制比较多，很难做出这种左右严格对齐的聊天气泡。

开发者是怎么解决的呢？他在Python代码里，在渲染你的消息时，偷偷插入了一个看不见的HTML标记（比如一个<span class='user-mark'>）。然后，在前端的CSS样式表里，用上了高级的:has()选择器。这个选择器可以检查一个元素里面有没有特定的子元素。

所以，CSS的规则大概是：“如果某个聊天气泡容器里包含了‘user-mark’这个标记，那么就把整个容器的排列方向反转（flex-direction: row-reverse）”。这样，你的消息气泡就自动跑到右边去了，而AI的消息因为没有这个标记，就保持在左边。纯用CSS就实现了动态布局，避免了写一堆复杂的JavaScript逻辑。

3. 核心功能实战：集成Stable Diffusion

好了，欣赏完漂亮的界面，我们进入核心环节：怎么让这个聊天机器人学会“画画”。这里的关键，就是在WebUI的后台逻辑里，加入调用Stable Diffusion模型的代码。

3.1 环境与依赖准备

首先，你需要确保你的电脑环境已经准备好了。除了运行南北阁模型需要的库，还得加上图像生成相关的依赖。

打开你的终端，执行下面的安装命令：

# 基础Web框架和聊天模型依赖 pip install streamlit torch transformers accelerate # 图像生成相关依赖，这里以使用Diffusers库调用Stable Diffusion为例 pip install diffusers pillow

diffusers是Hugging Face官方维护的库，专门用来运行各种扩散模型（包括Stable Diffusion），用起来非常方便。pillow是Python里处理图片的标准库。

3.2 改造WebUI后端逻辑

原始的WebUI代码（app.py）主要处理文本对话。我们需要改造它，增加一个图像生成的“模块”。

第一步，初始化图像生成管道。在代码文件开头部分，加载南北阁模型的地方附近，添加Stable Diffusion模型的加载代码：

import torch from diffusers import StableDiffusionPipeline from PIL import Image # ... 原有的南北阁模型加载代码 ... # 初始化Stable Diffusion管道 # 这里以运行本地SD 1.5模型为例，你需要提前下载好模型权重 sd_pipe = StableDiffusionPipeline.from_pretrained( “你的/stable-diffusion-v1-5/路径”， torch_dtype=torch.float16, # 使用半精度节省显存 safety_checker=None, # 可选，关闭内置安全过滤器（根据需求） ).to(“cuda”) # 如果有GPU就放到GPU上 # 启用CPU或内存优化（如果GPU内存不够） # sd_pipe.enable_attention_slicing() # sd_pipe.enable_sequential_cpu_offload()

第二步，修改对话处理函数。这是最关键的一步。我们需要在AI生成文字回复的函数里，加入一个判断：用户的问题是不是在请求生成图片？

一个简单的判断方法是检查用户输入是否包含“画”、“生成图片”、“图”等关键词，或者更智能一点，用另一个小的文本分类模型来判断。这里为了演示，我们用关键词：

def generate_response_with_image(user_input, chat_history): """ 生成回复，并判断是否需要生成图片 """ # 1. 首先，像往常一样用南北阁模型生成文字回复 text_prompt = f”用户说：{user_input}\n请以助手的身份进行回复：” # ... (这里是调用南北阁模型生成text_reply的代码) ... # 2. 判断是否需要生成图片 image_prompt = None trigger_words = [“画”, “生成图片”, “生成一张”, “图片”, “图”, “照片”] if any(word in user_input for word in trigger_words): # 尝试从用户输入中提取更具体的图片描述 # 这里可以写更复杂的逻辑，比如让南北阁模型来总结图片描述 # 为了简单，我们直接使用用户输入作为图片提示词，或者稍作处理 image_prompt = user_input # 可以尝试去掉“帮我画一个”这样的前缀，让提示词更干净 for word in [“帮我”, “请”, “能不能”, “想要”]: if image_prompt.startswith(word): image_prompt = image_prompt[len(word):].strip() # 3. 如果需要生成图片，则调用Stable Diffusion generated_image = None if image_prompt: try: # 调用SD生成图片，设置参数如尺寸、步数等 generated_image = sd_pipe( image_prompt, height=512, width=512, num_inference_steps=30, guidance_scale=7.5 ).images[0] # 返回PIL Image对象 except Exception as e: print(f“生成图片时出错：{e}”) # 可以选择在文字回复里追加一条错误信息 text_reply += “\n\n（抱歉，图片生成功能暂时出了点问题。）” # 4. 返回文字回复和可能的图片 return text_reply, generated_image

第三步，改造前端展示部分。原来的前端只显示文字。现在我们需要在Streamlit的界面代码里，检查generate_response_with_image函数是否返回了图片。如果返回了，就在AI的文字气泡下面，把图片显示出来。

在Streamlit的主循环中，大概是这样的：

# 当用户发送消息后... if user_input: # 将用户消息显示在右侧 with st.chat_message(“user”): st.markdown(user_input) # 生成回复和可能的图片 with st.chat_message(“assistant”): message_placeholder = st.empty() # 占位符，用于流式输出文字 full_response = “” # 这里模拟流式输出文字（实际应调用模型的流式接口） text_reply, gen_image = generate_response_with_image(user_input, st.session_state.messages) # 先流式输出文字 for chunk in text_reply.split(): # 简单按空格分割模拟 full_response += chunk + “ ” message_placeholder.markdown(full_response + “▌”) time.sleep(0.05) message_placeholder.markdown(full_response) # 如果有生成的图片，就显示在文字下方 if gen_image: st.image(gen_image, caption=f“根据‘{user_input}’生成的图片”, use_column_width=True) # 将对话记录到历史中 st.session_state.messages.append({“role”: “user”, “content”: user_input}) st.session_state.messages.append({“role”: “assistant”, “content”: text_reply, “image”: gen_image})

这样，一个基本的图文回复功能就集成进去了。当AI判断需要生成图片时，它会默默在后台调用Stable Diffusion，然后把成品和文字一起呈现在你面前。

4. 应用场景与效果展示

这个图文并茂的AI助手，能用在很多有趣的地方。

场景一：创意写作与故事生成你可以对AI说：“写一个关于星际探险的短故事，并生成故事主角飞船的图片。” AI会先构思一段文字故事，然后根据故事描述生成一张飞船的图片，让整个创作过程更加生动直观。

场景二：学习与教育比如孩子问：“恐龙长什么样子？” 传统的AI会给出文字描述。而这个系统可以在描述霸王龙体型、特征的同时，直接生成一张霸王龙的复原图，学习效果事半功倍。

场景三：产品设计与头脑风暴你对AI说：“设计一个现代风格的智能水杯，描述它的功能并给出外观概念图。” AI可以从材料、智能提醒、保温等技术点进行文字阐述，并附上一张它“想象”中的产品概念图，为初期 brainstorming 提供视觉参考。

效果体验：在实际使用中，最令人惊喜的就是这种“跨界”配合的流畅感。文字模型负责理解和逻辑构建，图像模型负责视觉化呈现。比如输入“一个宁静的日本庭院，有红桥和锦鲤”，你会在几秒到十几秒内（取决于你的显卡），先看到一段优美的文字描述，紧接着一张充满意境的日式庭院图就会加载出来，这种体验是单一模态模型无法提供的。