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

SecGPT-14B WebUI进阶：自定义CSS美化界面+添加企业LOGO品牌化部署

news 2026/8/31 10:27:20

SecGPT-14B WebUI进阶：自定义CSS美化界面+添加企业LOGO品牌化部署

1. 引言：从能用，到好用，再到专属

你已经成功部署了SecGPT-14B，一个专注于网络安全问答与分析的强大模型。现在，它正稳定运行在你的服务器上，通过Gradio WebUI提供了一个基础的对话界面。这个界面功能齐全，但说实话，它看起来有点“朴素”——标准的Gradio默认样式，缺乏个性，更谈不上品牌感。

如果你只是个人使用，这或许没问题。但如果你计划将这个工具部署给团队使用，或者希望将其集成到企业的安全分析平台中，一个简陋的界面就显得不够专业了。想象一下，你的安全分析师每天都要面对这个界面，一个美观、舒适、带有公司品牌标识的界面，不仅能提升使用体验，更能增强工具的归属感和专业度。

本文将带你超越基础的“能用”阶段，进入“好用”和“专属”的进阶领域。我们将手把手教你如何通过自定义CSS来美化SecGPT-14B的WebUI界面，并添加企业LOGO，实现真正的品牌化部署。整个过程不需要你成为前端专家，只需要跟着步骤操作，就能让你的安全问答助手焕然一新。

2. 准备工作：找到WebUI的“化妆间”

在开始“化妆”之前，我们需要先找到存放“化妆品”（CSS文件）和“衣帽间”（静态资源目录）的地方。SecGPT-14B的WebUI基于Gradio构建，其核心文件通常位于一个固定的工作目录。

2.1 定位关键文件与目录

首先，通过SSH连接到你的部署服务器。根据提供的部署信息，WebUI服务由Supervisor管理，其相关文件很可能在/root/workspace目录下。

让我们先查看一下服务状态和关键日志，确认WebUI应用的具体位置：

# 查看WebUI服务状态 supervisorctl status secgpt-webui # 查看WebUI启动日志的最后几行，通常会有应用路径信息 tail -20 /root/workspace/secgpt-webui.log

在日志中，你可能会看到类似Running on local URL: http://0.0.0.0:7860以及启动脚本的路径。通常，Gradio应用的Python脚本（比如app.py或webui.py）就位于/root/workspace目录下。

进入该目录并列出文件：

cd /root/workspace ls -la

你可能会看到类似secgpt_webui.py或app.py的文件，这就是WebUI的入口。同时，我们需要创建一个用于存放自定义样式和图片的静态文件夹：

# 创建一个名为static的目录，用于存放CSS文件和LOGO图片 mkdir -p static

现在，我们的“化妆间”就准备好了：/root/workspace/static/。

2.2 准备你的品牌LOGO

品牌化的核心是LOGO。你需要准备一个代表你公司或团队的LOGO图片。

图片格式建议：

格式：PNG（支持透明背景）或SVG（矢量图，缩放无损）为佳。
尺寸：建议准备一个正方形或接近正方形的版本，例如 200x200 像素或 300x300 像素，用于界面左上角或标题栏。
命名：为了清晰，我们可以将其命名为company_logo.png。

将你的LOGO图片上传到服务器的/root/workspace/static/目录。你可以使用scp命令或SFTP工具来完成。

例如，使用scp从本地传输：

# 在本地终端执行，将logo.png上传到服务器 scp /path/to/your/logo.png root@你的服务器IP:/root/workspace/static/company_logo.png

准备工作完成，接下来我们进入核心的美化环节。

3. 自定义CSS：打造专属视觉风格

CSS是网页的“样式表”，通过它我们可以控制界面上每一个元素的颜色、字体、间距、背景等。我们将创建一个自定义的CSS文件，并让Gradio加载它。

3.1 创建并编写自定义CSS文件

在/root/workspace/static/目录下，创建一个名为custom.css的文件。

cd /root/workspace/static touch custom.css

现在，用你喜欢的文本编辑器（如vim或nano）打开这个文件，我们将开始编写样式。下面是一个兼顾专业安全工具感和现代UI设计的CSS示例，你可以直接使用或根据喜好修改。

/* /root/workspace/static/custom.css */ /* SecGPT-14B 品牌化定制样式 */ /* ===== 全局主题与变量定义 ===== */ :root { --primary-color: #2a6e3f; /* 主色调：深绿色，象征安全、可靠 */ --primary-light: #e8f5e9; --secondary-color: #1565c0; /* 辅助色：蓝色，象征科技、理性 */ --background-color: #f8f9fa; --surface-color: #ffffff; --text-primary: #212121; --text-secondary: #666666; --border-color: #e0e0e0; --shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --border-radius: 8px; } /* ===== 整体布局与背景 ===== */ .gradio-container { background-color: var(--background-color) !important; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important; color: var(--text-primary) !important; max-width: 1200px !important; margin: 20px auto !important; padding: 20px !important; border-radius: 12px !important; } /* ===== 标题栏与LOGO集成 ===== */ /* 我们将在下一步通过修改Python代码来插入LOGO和标题 */ /* 这里先为标题区域定义样式 */ h1 { color: var(--primary-color) !important; border-bottom: 2px solid var(--primary-light) !important; padding-bottom: 15px !important; margin-bottom: 30px !important; font-weight: 600 !important; } /* ===== 聊天消息框样式 ===== */ /* 用户消息气泡 */ .message.user { background-color: var(--primary-light) !important; border-left: 4px solid var(--primary-color) !important; border-radius: var(--border-radius) 12px 12px var(--border-radius) !important; margin: 15px 0 15px auto !important; max-width: 85% !important; } /* 助手消息气泡 */ .message.assistant { background-color: var(--surface-color) !important; border: 1px solid var(--border-color) !important; border-left: 4px solid var(--secondary-color) !important; border-radius: 12px var(--border-radius) var(--border-radius) 12px !important; box-shadow: var(--shadow) !important; margin: 15px auto 15px 0 !important; max-width: 85% !important; } /* 消息内部的文本和代码 */ .message p { margin: 0.5em 0 !important; line-height: 1.6 !important; } .message pre, .message code { background-color: #f5f5f5 !important; border-radius: 4px !important; border: 1px solid #eee !important; } /* ===== 输入区域与按钮美化 ===== */ /* 文本输入框 */ textarea { border: 1px solid var(--border-color) !important; border-radius: var(--border-radius) !important; padding: 12px 16px !important; font-size: 16px !important; transition: border-color 0.2s, box-shadow 0.2s !important; } textarea:focus { border-color: var(--primary-color) !important; box-shadow: 0 0 0 3px rgba(42, 110, 63, 0.1) !important; outline: none !important; } /* 发送按钮 */ button { background-color: var(--primary-color) !important; color: white !important; border: none !important; border-radius: var(--border-radius) !important; padding: 12px 28px !important; font-weight: 500 !important; cursor: pointer !important; transition: background-color 0.2s, transform 0.1s !important; } button:hover { background-color: #1e5a32 !important; /* 主色调加深 */ } button:active { transform: translateY(1px) !important; } /* 参数调整的滑块和数字输入框 */ input[type="range"], input[type="number"] { border-radius: 4px !important; border: 1px solid var(--border-color) !important; } /* ===== 页脚样式 ===== */ .footer { margin-top: 40px !important; padding-top: 20px !important; border-top: 1px solid var(--border-color) !important; text-align: center !important; color: var(--text-secondary) !important; font-size: 0.9em !important; }

这个CSS文件做了以下几件事：

定义了颜色变量：使用深绿色作为主色调，贴合“安全”主题。
美化了整体容器：增加了圆角、阴影和舒适的边距。
重设计了聊天气泡：用户和助手的消息有了清晰的视觉区分，并添加了边框和阴影提升层次感。
优化了输入组件：文本框和按钮有了更现代的交互动效。
预留了页脚区域。

保存并退出编辑器。现在，我们需要让Gradio应用加载这个CSS文件。

4. 修改WebUI代码：注入样式与LOGO

仅仅有CSS文件还不够，我们需要修改启动WebUI的Python代码，告诉Gradio去加载我们的自定义样式，并在页面中插入LOGO。

4.1 定位并备份WebUI主文件

首先，找到WebUI的主文件，我们假设它是/root/workspace/secgpt_webui.py（请根据你实际找到的文件名调整）。

cd /root/workspace # 先备份原文件，这是个好习惯 cp secgpt_webui.py secgpt_webui.py.backup

4.2 修改代码，添加CSS和LOGO

用文本编辑器打开secgpt_webui.py。我们需要找到创建Gradio界面（gr.Interface或gr.ChatInterface）的部分。通常代码结构如下：

import gradio as gr # ... 其他导入和模型加载代码 ... def chat_function(message, history): # ... 调用模型生成回复的逻辑 ... return response # 创建界面 demo = gr.ChatInterface( fn=chat_function, title="SecGPT-14B", description="网络安全问答与分析助手", # ... 其他参数 ... )

我们需要修改两部分：

在创建demo对象时，通过css参数引入外部CSS文件。
在demo.launch()之前，通过Gradio的Blocks API或直接修改demo对象，在页面顶部插入一个包含LOGO和标题的组件。

以下是修改后的代码示例。请注意，这是一个示例，你需要根据你实际的文件结构进行适配，重点是理解添加css参数和创建gr.Blocks的逻辑。

import gradio as gr import os # ... 你原有的其他导入 ... def chat_function(message, history): # ... 你原有的聊天逻辑 ... return response # ===== 修改点1：定义自定义CSS文件路径 ===== custom_css_path = "/root/workspace/static/custom.css" # 检查文件是否存在，如果不存在则使用一个空字符串或默认样式 if os.path.exists(custom_css_path): with open(custom_css_path, 'r') as f: custom_css = f.read() else: custom_css = "" print("警告：未找到自定义CSS文件，将使用默认样式。") # ===== 修改点2：使用gr.Blocks构建更灵活的布局 ===== with gr.Blocks(css=custom_css, theme=gr.themes.Soft()) as demo: # 注入CSS并选择一个基础主题 # 创建顶部标题栏，包含LOGO和标题 with gr.Row(elem_classes="header-row"): # 左侧：LOGO # 假设LOGO图片位于 /root/workspace/static/company_logo.png logo_path = "/root/workspace/static/company_logo.png" if os.path.exists(logo_path): gr.Image(logo_path, show_label=False, height=60, width=60, elem_id="company-logo") else: gr.Markdown("") # 如果LOGO不存在，留空 # 右侧：标题和描述 with gr.Column(): gr.Markdown("# 🔒 SecGPT-14B | 企业安全智能助手") gr.Markdown("**专注于网络安全问答、威胁分析与合规咨询的专业AI模型**") gr.HTML("""<hr style="margin: 20px 0; border: none; height: 1px; background-color: #e0e0e0;">""") # 将原有的ChatInterface功能移植到Blocks中 chatbot = gr.Chatbot(label="安全对话", height=500) # 聊天记录显示区域 msg = gr.Textbox(label="输入您的安全问题", placeholder="例如：什么是XSS攻击？如何防护？", lines=3) with gr.Row(): submit_btn = gr.Button("发送", variant="primary") clear_btn = gr.Button("清空对话") # 参数调整区域（折叠起来，保持界面简洁） with gr.Accordion("高级参数设置", open=False): with gr.Row(): temperature = gr.Slider(0, 2, value=0.3, step=0.1, label="Temperature (创造性)") top_p = gr.Slider(0, 1, value=0.9, step=0.05, label="Top-p (核采样)") max_tokens = gr.Slider(128, 4096, value=1024, step=128, label="最大生成长度") # 定义提交函数 def respond(message, chat_history, temp, top_p_val, max_tok): # 这里需要调用你原有的模型推理逻辑 # 假设你有一个函数 `call_secgpt_model(prompt, history, temperature, top_p, max_tokens)` # 为了示例，我们模拟一个回复 bot_message = call_secgpt_model(message, chat_history, temp, top_p_val, max_tok) chat_history.append((message, bot_message)) return "", chat_history # 清空输入框，更新聊天记录 # 绑定事件 submit_event = submit_btn.click(respond, [msg, chatbot, temperature, top_p, max_tokens], [msg, chatbot]) # 回车键也触发提交 msg.submit(respond, [msg, chatbot, temperature, top_p, max_tokens], [msg, chatbot], queue=False) clear_btn.click(lambda: None, None, chatbot, queue=False) # 页脚 gr.HTML(""" <div class='footer'> <p>Powered by SecGPT-14B & CSDN AI Platform | 仅供内部安全研究使用</p> <p>© 2024 Your Company Name. All rights reserved.</p> </div> """) # ===== 修改点3：你可能需要调整launch参数 ===== # 原有的 demo.launch() 可能包含 server_name, server_port 等参数 # 确保它们被正确迁移到新的launch调用中 if __name__ == "__main__": # 共享网络，允许外部访问，这是原镜像的典型配置 demo.launch(server_name="0.0.0.0", server_port=7860, share=False)

重要说明：

上述代码是一个改造示例。最关键的部分是使用gr.Blocks(css=custom_css)来加载CSS，以及用gr.Blocks的布局能力插入LOGO和自定义标题。
你需要将你原有的chat_function逻辑整合到respond函数中，并确保能正确调用后端模型（可能是通过本地APIhttp://127.0.0.1:8000/v1/chat/completions）。
如果你的原文件非常简单，直接是一个gr.ChatInterface().launch()，那么上述改造是必要的。如果原文件已经使用了gr.Blocks，那么只需在其中添加css参数和LOGO行即可。
请务必仔细测试，确保模型调用功能在改造后依然正常。

4.3 重启WebUI服务应用更改

修改并保存Python文件后，需要重启Gradio WebUI服务以使更改生效。

# 重启WebUI服务 supervisorctl restart secgpt-webui # 查看重启日志，确认没有报错 tail -f /root/workspace/secgpt-webui.log

等待几秒钟，然后刷新你的浏览器（访问https://gpu-hwg3q2zvdb-7860.web.gpu.csdn.net/或你的服务地址）。你应该能看到一个焕然一新的界面：顶部出现了你的LOGO和定制化的标题，聊天框、按钮、颜色都变成了你在CSS中定义的样子。

5. 效果验证与调试技巧

部署完成后，打开浏览器访问你的SecGPT-14B WebUI地址。

5.1 检查核心效果

视觉风格：整体背景、颜色、字体是否符合你的预期？
LOGO显示：LOGO图片是否正常显示在左上角？尺寸是否合适？
聊天区域：用户和AI的对话气泡是否有明显区分？间距和阴影效果如何？
交互元素：鼠标悬停在按钮上颜色是否会变化？输入框聚焦时是否有高亮？
布局结构：标题、输入区、参数区、页脚布局是否合理？

5.2 常见问题与调试

如果效果不如预期，可以按以下步骤排查：

问题：CSS样式未生效。
- 检查：浏览器开发者工具（F12）。查看<head>部分是否加载了你的CSS？检查对应元素的样式是否被你的规则覆盖（可能会有!important冲突或选择器权重问题）。
- 解决：在CSS规则中谨慎使用!important；确保Gradio的css参数正确指向了你的CSS字符串。
问题：LOGO图片不显示（显示破损图标）。
- 检查：浏览器开发者工具“网络(Network)”标签，查看LOGO图片的请求是否返回404。
- 解决：确认logo_path变量指向的服务器文件路径绝对正确，并且文件权限可读。Gradio的gr.Image组件需要可访问的图片路径。
问题：页面布局错乱。
- 检查：可能是CSS中的样式与Gradio默认样式冲突，或者gr.Blocks的布局结构有误。
- 解决：简化初始CSS，逐步添加样式。检查gr.Row()和gr.Column()的使用是否正确嵌套。
问题：聊天功能失效。
- 检查：查看浏览器控制台(Console)是否有JavaScript错误，以及WebUI服务日志(secgpt-webui.log)。
- 解决：重点检查respond函数是否正确调用了模型后端。确保API地址（http://127.0.0.1:8000）和端口在容器内可访问。