从零搭建DeepSeek WebUI:最漂亮的AI交互界面教程

千萱大大_6682

千萱大大_6682

2026-05-09

1017人浏览

原创

deepseek webui可通过open webui容器化、page assist插件、gradio自定义或docker compose一体化四种路径实现:open webui支持多模型与主题切换;page assist提供浏览器侧边栏轻量交互;gradio允许css美化与动画效果;docker compose整合nginx统一ui风格。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

从零搭建deepseek webui:最漂亮的ai交互界面教程

如果您已成功部署 DeepSeek 模型但缺乏直观、美观的交互入口,则可能是由于缺少适配的 WebUI 层。以下是构建高可用、高颜值 DeepSeek WebUI 的多种实现路径:

一、基于 Open WebUI 容器化部署

Open WebUI 是专为本地大模型设计的现代化前端界面,支持多模型切换、会话持久化、主题自定义与响应式布局,视觉风格简洁专业,适配深色/浅色模式。

1、拉取官方 Open WebUI 镜像并启动容器,映射端口 3000:

2、执行命令 docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

3、确保本地 ollama 服务正在运行(默认监听 11434 端口),并在 Open WebUI 设置中将基础 URL 配置为 http://host.docker.internal:11434

4、浏览器访问 http://localhost:3000,首次登录后进入模型选择页,确认 DeepSeek-R1 或其他已加载模型可见并可设为默认。

二、使用 Page Assist 浏览器插件轻量可视化

Page Assist 是一款无需服务器、纯前端运行的 WebUI 工具,直接嵌入浏览器侧边栏,支持 DeepSeek 等 Ollama 托管模型,界面极简且支持 PDF/文档对话,适合快速验证与日常轻量使用。

1、在 Chrome 或 Edge 浏览器中打开扩展管理页面 chrome://extensions/

2、启用“开发者模式”,点击“加载已解压的扩展程序”

3、克隆 GitHub 仓库 https://github.com/n4ze3m/page-assist 并选择其 dist 目录作为扩展源

4、打开任意网页,点击地址栏右侧 Page Assist 图标,进入设置页,在 Model Provider 中选择 Ollama,Model Name 填写 deepseek-r1:1.5b(或您实际下载的版本标签)

5、保存后即可在侧边栏输入提问,界面自动启用 深色圆角卡片+浮动输入框 设计风格。

Deepseek Reasoner Lite Agent
Deepseek Reasoner Lite Agent

你是DeepSeek-R1-Agent,一个高效的内容创作者。

下载

三、Gradio 自定义 UI 主题美化部署

Gradio 提供高度可定制的 Python WebUI 构建能力,通过 CSS 注入与 Blocks API 可实现媲美商业产品的视觉效果,包括渐变标题栏、动画加载指示器、消息气泡分色等。

1、创建 Python 脚本 app.py,导入 transformers 与 gradio,并加载 DeepSeek 模型 tokenizer 和 pipeline

2、使用 gr.Blocks() 构建界面,添加自定义 CSS:body { background: linear-gradient(135deg, #1a2a6c, #2c3e50); }

3、为 ChatInterface 组件配置 avatar_images 参数,分别指定用户与机器头像路径,启用 rounded message bubbles with shadow

4、调用 launch() 时传入 theme='soft' 与 favicon_path 参数,指定 SVG 图标文件

5、执行 python app.py 后,访问 http://localhost:7860,界面即呈现毛玻璃背景+悬浮按钮+平滑滚动动画效果。

四、Docker Compose 一体化美学部署

通过 Docker Compose 将 ollama、open-webui 与 Nginx 反向代理层整合,利用 Nginx 注入全局 CSS 与字体资源,实现跨容器统一 UI 主题,避免前端二次开发。

1、新建 docker-compose.yml,声明 ollama、open-webui、nginx 三个服务,其中 nginx 配置 location / { proxy_pass http://open-webui:8080; }

2、准备 custom.css 文件,包含 :root { --primary-color: #4f46e5; --bg-card: rgba(255,255,255,0.08); } 等变量定义

3、在 nginx 配置中添加 add_header Content-Security-Policy "style-src 'self' 'unsafe-inline';" 并挂载 custom.css 到 /usr/share/nginx/html/css/

4、修改 open-webui 启动参数,注入环境变量 WEBUI_CUSTOM_CSS_URL=/css/custom.css

5、执行 docker-compose up -d 后,所有用户访问 http://localhost 即获得统一紫蓝主色调、半透明卡片与圆角图标的一体化界面。

相关文章

AI工具
AI工具

AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型,支持联网搜索。

下载

相关标签:

deepseek

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
DeepSeek官方入口
DeepSeek官方入口

DeepSeek,一个综合性的搜索引擎,提供来自学术数据库、新闻网站和社交媒体的广泛结果。访问 DeepSeek 的官方网站。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.02.17

39969

6

deepseek在线提问
deepseek在线提问

本合集汇总了DeepSeek在线提问技巧与免登录使用入口,助你快速上手AI对话、写作、分析等功能。阅读专题下面的文章了解更多详细内容。

2026.02.27

1169

50

DeepSeek 入门与快速上手指南
DeepSeek 入门与快速上手指南

面向 AI 工具新手,从 DeepSeek 的账号注册、网页端与客户端使用讲起,介绍 DeepSeek-V3、DeepSeek-R1 等模型的能力定位与选择建议、对话提示词(Prompt)编写技巧、深度思考模式与联网搜索功能的使用场景、API Key 申请与首次接口调用流程,帮助用户快速上手 DeepSeek 并将其融入日常工作与学习。

2026.05.12

2329

18

DeepSeek API开发与应用集成教程合集
DeepSeek API开发与应用集成教程合集

系统讲解 DeepSeek 开放平台 API 的开发与集成方法,涵盖 API Key 鉴权与请求签名、Chat Completions 接口参数详解(temperature/top_p/max_tokens)、多轮对话上下文管理、流式输出(SSE Streaming)的前后端实现、Function Call 函数调用与外部工具对接、Embeddings 文本向量接口的使用、Python requests / openai SDK / J

2026.05.12

371

19

DeepSeek 提示词工程与高效使用教程合集
DeepSeek 提示词工程与高效使用教程合集

聚焦如何通过提示词工程充分发挥 DeepSeek 的能力上限,涵盖基础 Prompt 结构(角色/任务/格式/约束)设计、System Prompt 系统指令的最佳实践、Few-shot 示例引导与 Zero-shot 直接提问的场景选择、思维链(Chain of Thought)逐步推理引导、复杂任务的分步拆解策略、输出格式控制(JSON/Markdown/表格)、避免幻觉与提升准确率的约束技巧、DeepSeek-R1 深度推理模式的

2026.05.12

507

26

DeepSeek本地部署与私有化方案
DeepSeek本地部署与私有化方案

面向有数据隐私需求的开发者与企业,讲解 DeepSeek 开源模型的本地化部署方案,涵盖 DeepSeek-R1 各蒸馏版本(1.5B/7B/8B/14B/32B/70B)的硬件需求与能力对比、Ollama 一键本地运行与模型管理、vLLM 高性能推理服务部署、llama.cpp 量化推理(GGUF 格式/Q4/Q8 量化)在消费级显卡上的实践、Hugging Face Transformers 加载与微调、Docker 容器化部署、多

2026.05.12

342

21

DeepSeek行业应用场景实战
DeepSeek行业应用场景实战

以实际业务场景为导向,展示 DeepSeek 在不同行业中的落地应用方案,涵盖代码开发辅助(代码生成/审查/重构/单元测试编写)、长文写作与内容创作(报告/文案/论文大纲)、Excel 数据分析与可视化建议、智能客服机器人搭建(意图识别/多轮对话/知识库检索)、RAG 检索增强生成实现企业知识库问答、合同与法律文本审查、教育领域个性化辅导,帮助用户将 DeepSeek 转化为切实的生产力工具。

2026.05.12

512

17

DeepSeek 与主流 AI 大模型对比评测
DeepSeek 与主流 AI 大模型对比评测

从多个维度对 DeepSeek 与市场主流大语言模型进行客观对比,涵盖模型参数规模与架构差异(MoE 混合专家架构)、中文理解与生成能力对比、英文与多语言表现、数学推理与代码能力基准评测(MMLU/HumanEval/GSM8K)、长文本处理与上下文窗口对比、API 定价与性价比分析、响应速度与并发能力、开源生态与私有化部署灵活性,帮助用户根据自身需求在 DeepSeek、ChatGPT、Claude、Gemini、Llama 等模型中

2026.05.12

245

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
零基础精通 PS 视频教程
零基础精通 PS 视频教程

共268课时 | 120.1万人学习

前端工程师必备技能—PS切图
前端工程师必备技能—PS切图

共11课时 | 2.2万人学习

麦子学院Photoshop切片视频教程
麦子学院Photoshop切片视频教程

共13课时 | 4.3万人学习