Nanbeige 4.1-3B WebUI实战案例集成Stable Diffusion生成图文回复今天我们来聊聊一个特别有意思的项目——如何把一个原本只能聊天的AI助手变成一个能说会画的“全能选手”。想象一下你和AI聊天时不仅能得到文字回复它还能根据对话内容自动生成一张精美的图片来配合回答是不是感觉瞬间就高级起来了这个项目基于南北阁Nanbeige4.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 classuser-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 pillowdiffusers是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_dtypetorch.float16, # 使用半精度节省显存 safety_checkerNone, # 可选关闭内置安全过滤器根据需求 ).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, height512, width512, num_inference_steps30, guidance_scale7.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, captionf“根据‘{user_input}’生成的图片”, use_column_widthTrue) # 将对话记录到历史中 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 提供视觉参考。效果体验 在实际使用中最令人惊喜的就是这种“跨界”配合的流畅感。文字模型负责理解和逻辑构建图像模型负责视觉化呈现。比如输入“一个宁静的日本庭院有红桥和锦鲤”你会在几秒到十几秒内取决于你的显卡先看到一段优美的文字描述紧接着一张充满意境的日式庭院图就会加载出来这种体验是单一模态模型无法提供的。5. 总结通过这个项目我们完成了一次有趣的“模型嫁接”。将专注于文本生成的南北阁模型与专注于图像创作的Stable Diffusion模型通过一个设计精良的Streamlit WebUI整合在一起创造出了一个112的智能应用。回顾一下关键步骤搭建基础利用南北阁4.1-3B模型和Streamlit构建一个极简、流畅的文本对话界面。功能增强在后台逻辑中通过关键词或更智能的方式判断用户是否需要图像生成。模型集成引入diffusers库加载Stable Diffusion模型在需要时根据提炼的提示词生成图片。界面融合改造前端代码将生成的图片无缝嵌入到对话流中与文字回复一同展示。这个方案的优点在于它的灵活性和可扩展性。WebUI的代码结构清晰你可以很容易地替换其中的文本模型或图像模型。比如把南北阁换成其他LLM或者把Stable Diffusion换成更快的SDXL Turbo、玩风格的Midjourney替代模型等。当然目前这只是一个基础实现。要做得更智能还有很多可以优化的地方比如训练一个小的分类器来更准确地判断绘图意图让文本模型自己总结出更适合图像模型的提示词加入图片编辑功能让AI可以“修改刚才生成的图片”等等。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。