3种零代码方案！10分钟搭建Ollama可视化界面

惠悦颖

524人浏览 · 2025-08-18 13:08:22

惠悦颖 · 2025-08-18 13:08:22 发布

3种零代码方案！10分钟搭建Ollama可视化界面

【免费下载链接】handy-ollama 动手学Ollama，CPU玩转大模型部署，在线阅读地址：https://datawhalechina.github.io/handy-ollama/ 项目地址: https://gitcode.com/datawhalechina/handy-ollama

你还在为本地部署Ollama后缺乏友好交互界面而烦恼？命令行操作效率低下、无法直观管理对话历史、团队协作困难？本文将系统对比3种主流可视化部署方案，从技术小白到资深开发者都能找到适配方案，10分钟内完成从"黑框交互"到"图形化操作"的跨越。

读完本文你将获得：

3种部署方案的详细实施指南（含Docker/Node.js/FastAPI）
性能对比与硬件适配建议
常见问题解决方案（端口冲突/跨域/模型切换）
界面定制与功能扩展技巧

方案选型对比表

方案类型	技术难度	部署耗时	硬件要求	核心优势	适用场景
FastAPI自建	⭐⭐	5分钟	低	轻量可控，支持二次开发	开发者定制化需求
WebUI(Node.js)	⭐	8分钟	中	功能丰富，社区插件生态	个人日常使用
Docker容器化	⭐	3分钟	中高	一键部署，环境隔离	企业级稳定运行

mermaid

FastAPI轻量部署方案

目录结构解析

fastapi_chat_app/
├── app.py              # 应用入口，路由配置
├── websocket_handler.py # 实时通信处理
├── static/
│   └── index.html      # 前端界面
└── requirements.txt    # 依赖清单

核心代码实现

后端WebSocket通信（app.py）：

import ollama
from fastapi import FastAPI, WebSocket, WebSocketDisconnect
from fastapi.staticfiles import StaticFiles

app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")

class ConnectionManager:
    def __init__(self):
        self.active_connections: list[WebSocket] = []

    async def connect(self, websocket: WebSocket):
        await websocket.accept()
        self.active_connections.append(websocket)

    def disconnect(self, websocket: WebSocket):
        self.active_connections.remove(websocket)

manager = ConnectionManager()

@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await manager.connect(websocket)
    try:
        while True:
            data = await websocket.receive_text()
            stream = ollama.chat(
                model="llama3.1",
                messages=[{"role": "user", "content": data}],
                stream=True
            )
            for chunk in stream:
                await websocket.send_text(chunk["message"]["content"])
    except WebSocketDisconnect:
        manager.disconnect(websocket)
    except Exception as e:
        await websocket.send_text(f"错误: {str(e)}")

前端界面（static/index.html）：

<!DOCTYPE html>
<html>
<head>
    <title>Ollama FastAPI Chat</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        .chat-container { max-width: 800px; margin: 0 auto; padding: 20px; }
        #chat-messages { height: 500px; border: 1px solid #ccc; padding: 10px; overflow-y: auto; margin-bottom: 10px; }
        #user-input { width: 80%; padding: 10px; }
        #send-btn { width: 18%; padding: 10px; }
    </style>
</head>
<body>
    <div class="chat-container">
        <div id="chat-messages"></div>
        <input type="text" id="user-input" placeholder="输入消息...">
        <button id="send-btn">发送</button>
    </div>
    <script>
        const ws = new WebSocket('ws://' + window.location.host + '/ws');
        ws.onmessage = function(event) {
            $('#chat-messages').append('<div class="bot-message">AI: ' + event.data + '</div>');
        };
        $('#send-btn').click(function() {
            const input = $('#user-input').val();
            $('#chat-messages').append('<div class="user-message">你: ' + input + '</div>');
            ws.send(input);
            $('#user-input').val('');
        });
        $('#user-input').keypress(function(e) {
            if (e.which === 13) $('#send-btn').click();
        });
    </script>
</body>
</html>

部署步骤

克隆代码仓库

git clone https://gitcode.com/datawhalechina/handy-ollama
cd handy-ollama/notebook/C6/fastapi_chat_app

安装依赖

pip install -r requirements.txt
# 依赖清单包含：fastapi==0.104.1 uvicorn==0.24.0 ollama==0.1.0

启动服务

uvicorn app:app --host 0.0.0.0 --port 3000 --reload

访问界面

打开浏览器访问 http://localhost:3000/static/index.html，即可看到如下界面：

性能优化建议

模型选择：低配置机器建议使用7B参数模型（如llama3.1:8b）
连接管理：生产环境添加CONN_MAX_AGE=60参数限制连接时长
资源监控：使用psutil库添加系统资源监控接口

# 添加系统监控接口示例
from fastapi import APIRouter
import psutil

router = APIRouter()

@router.get("/system/status")
async def get_system_status():
    return {
        "cpu_usage": psutil.cpu_percent(),
        "memory_usage": psutil.virtual_memory().percent,
        "disk_usage": psutil.disk_usage('/').percent
    }

WebUI全功能部署方案

Node.js开发环境部署

环境准备

# 检查Node.js版本
node -v  # 需v16.0.0以上版本

# 设置国内npm镜像
npm config set registry https://registry.npmmirror.com

获取代码并安装依赖

git clone https://gitcode.com/datawhalechina/handy-ollama
cd handy-ollama/notebook/C6/webui
npm ci  # 安装package.json中指定版本的依赖

配置与启动

# 复制配置文件
cp .env.example .env

# 启动开发服务器
npm run dev

Docker容器化部署

启动命令

# Linux/macOS
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

# Windows PowerShell
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

容器状态检查

docker ps | grep open-webui  # 查看容器是否运行
docker logs -f open-webui    # 查看实时日志

功能特性展示

核心功能	描述	使用场景示例
多模型管理	支持同时加载多个模型并快速切换	对比不同模型对同一问题的回答
对话历史记录	自动保存对话上下文，支持导出导入	项目文档生成与迭代
角色预设	内置多种对话角色模板	代码审计、文案润色、学术写作
模型参数调整	可调节temperature、top_p等生成参数	控制回答的创造性与确定性

常见问题解决方案

端口冲突处理

# 查找占用3000端口的进程
netstat -tulpn | grep 3000  # Linux
# 或
lsof -i :3000               # macOS

# 终止进程
kill -9 <进程ID>

跨域访问问题

在FastAPI中添加CORS中间件：

from fastapi.middleware.cors import CORSMiddleware

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 生产环境需指定具体域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

模型加载失败

# 检查Ollama服务状态
systemctl status ollama  # systemd系统
# 或
brew services list | grep ollama  # macOS

# 手动拉取模型
ollama pull llama3.1

部署方案决策指南

mermaid

总结与展望

本文详细介绍了3种Ollama可视化界面部署方案，从技术原理到具体实施步骤，覆盖了不同用户群体的需求。FastAPI方案适合需要深度定制的开发者，WebUI方案提供丰富的现成功能，Docker方案则追求部署效率与环境一致性。

随着本地大模型技术的发展，可视化界面将向多模态交互、离线数据处理、模型协同工作等方向演进。下期我们将探讨如何通过Ollama API实现多模型协作，构建更智能的本地AI应用。

如果本文对你有帮助，请点赞收藏并关注项目更新。有任何部署问题，欢迎在评论区留言讨论。

项目仓库：https://gitcode.com/datawhalechina/handy-ollama

https://edu.csdn.net/learn/39067/627173?utm_source=2019755004

汇聚全球AI编程工具，助力开发者即刻编程。

更多推荐

深入理解Transformer：从Self-Attention到ChatGPT

通过多头注意力机制，Transformer进一步扩展了模型的表征能力，使其能够并行处理不同层次的语义信息。Transformer由编码器和解码器堆叠而成，编码器负责将输入序列转化为高维表示，解码器则基于编码器的输出生成目标序列。每一层的残差连接和层归一化技术，确保了深层网络的稳定训练，为后续大模型的发展奠定了基础。近年来，Transformer模型彻底改变了自然语言处理领域，从最初的Self-At

AI编程社区

codex的Chrome插件跟CDP脚本的区别

特性Codex 插件 (Extension Mode)脚本连接 CDP (Automation Mode)设计初衷增强用户日常浏览体验（辅助、并存）自动化测试、爬虫、无头操作（接管、控制）JS 执行环境隔离世界 (Isolated World)，不影响页面原有 JS主世界 (Main World)，极易与页面 JS 冲突用户体验零干扰，用户手动操作拥有最高优先权抢占焦点、抢占鼠标键盘输入，导致页面