南北阁 4.1-3B WebUI 效果展示：输入框语法高亮+JSON/YAML 格式校验
1. 引言：当大模型遇上'二次元'聊天室
如果你玩过《蔚蓝档案》或者用过一些设计精美的手机短信应用，一定会对那种清爽、沉浸的对话界面印象深刻。现在，这种感觉被带到了本地大模型的交互中。
今天要展示的，是一个专为南北阁 (Nanbeige) 4.1-3B 模型打造的 Web 交互界面。它不是一个普通的、布满侧边栏和方形头像的聊天工具，而是一个经过深度 CSS 魔法改造的'二次元游戏风'聊天室。最核心的亮点，是它解决了两个让开发者头疼、让用户体验打折的痛点：输入框的语法高亮和JSON/YAML 格式的实时校验。
想象一下，你正在和模型调试一个复杂的 API 调用参数，或者编写一段结构化的指令。在普通聊天框里，你面对的是密密麻麻、毫无层次感的纯文本，一个括号写错、一个缩进不对，都可能让模型返回一堆乱码。而这个 WebUI，把这一切都变得优雅而高效。
2. 核心亮点：不止于'好看'
这个界面首先吸引你的是它的颜值，但真正留住你的是它的'才华'。它基于纯 Streamlit 框架开发，却通过 CSS 彻底颠覆了 Streamlit 原生的'工程师审美'，带来了几个让人眼前一亮的特性。
2.1 视觉与交互的全面革新
首先，整个界面采用了高级的浅灰蓝波点背景，对话气泡左右分明。用户的发言气泡在右侧，是天蓝色的背景配纯白文字；AI 的回复在左侧，是纯白背景带一点柔和的阴影。这种设计不仅美观，更重要的是符合我们使用手机聊天软件的自然习惯，沉浸感极强。
其次，它原生适配了像南北阁这类具有'深度思考'能力的模型。当模型在输出答案前，内部会有一大段 `` 格式的推理过程。在普通界面里，这段冗长的思考会直接打断对话流。而在这里，系统会自动捕获这些标签，并将其优雅地折叠起来。你只会看到一个清爽的答案，如果想了解模型的'心路历程'，点开折叠面板即可，主界面始终保持整洁。
2.2 技术实现的巧妙之处
为了实现这种手机聊天软件般的左右气泡布局，项目用了一个非常巧妙的'黑客'技巧。Streamlit 本身很难动态判断一条消息是用户发的还是 AI 发的，从而应用不同的样式。
开发者的解决方案是：在 Python 代码通过 st.markdown() 输出消息时，偷偷注入一个看不见的 HTML 标记（比如 <span></span>）。然后，前端的 CSS 利用 :has() 这个强大的选择器去侦测：'哦，这个容器里有一个'用户标记'，那我要把整个气泡的排列方向反过来（flex-direction: row-reverse）'。就这样，纯靠 CSS 实现了原本需要复杂前端框架才能完成的动态样式判断。
3. 效果深度解析：输入框的'智慧'升级
现在，让我们聚焦到文章标题提到的核心功能：输入框语法高亮和JSON/YAML 格式校验。这是将用户体验从'能用'提升到'好用'的关键一步。
3.1 语法高亮：让结构一目了然
在标准的 Streamlit 文本输入框 (st.text_area) 里，你输入的所有内容都是单一颜色的。当你需要输入下面这样一段包含系统指令、用户问题和 JSON 参数的复杂提示词时，阅读和编辑会非常痛苦：
你是一个 API 助手。请根据以下用户需求生成调用参数。 用户需求：查询北京明天中午 12 点的天气。 请以 JSON 格式回复，包含 city 和 time 字段。 示例格式：{"city": "string", "time": "string"}
而在改造后的 WebUI 中，这段文字会变成这样（此处用文字描述视觉效果）：
- '你是一个 API 助手。' 这类系统指令会显示为醒目的颜色（比如橙色）。
- JSON 键（如
"city","time"）和关键字（如"string"）会分别用不同的颜色高亮。 - 大括号、引号、冒号 等符号也会有区别于普通文本的显示。
