Open WebUI 手把手教學

Youtube Tutorial - AI 模型太多管理不易？ Open WebUI 幫你搞定！從安裝到企業級應用

open-webui 多功能 AI 模型整合平台,

Open WebUI 是一個可自架的 AI 平台，能幫您統一管理並輕鬆切換多種 AI 模型，無論是本地的 Ollama 還是外部的 Gemini、OpenAI API 等等.

核心亮點：

集中管理： 單一介面存取您所有的 AI 模型 API Key。
企業適用： 支援自架、離線運作，並提供帳號與權限管理，確保資料安全。
靈活擴展： 功能豐富且具可擴展性。

簡單來說，Open WebUI 讓您在公司內安全、方便使用多樣化的 AI 模型服務，並能有效管理使用者權限。

安裝方法

建議用 docker, 我寫了一板 docker-compose.yaml,

執行 docker compose up -d, 接著瀏覽 http://localhost:3000

這個版本要安裝 Ollama(安裝在本機, 不是 docker ), 之前有介紹過 Ollama 簡介

文件中有提供非常多種的選項,

像是有 GPU 版本

docker run -d -p 3000:8080 --gpus=all -v ollama:/root/.ollama -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:ollama

只有 CPU 版本

docker run -d -p 3000:8080 -v ollama:/root/.ollama -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:ollama

甚至你不需要 Ollama, 也可以安裝沒有 Ollama 的版本.

for OpenAI API Usage Only

docker run -d -p 3000:8080 -e OPENAI_API_KEY=your_secret_key -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

Project workflow

順序圖 (Sequence Diagram) Project workflow

整個架構使用前端(Frontend) Svelte + 後端 (Backend) Python FastAPI 完成

使用者開啟網頁 (User opens browser, visits localhost:8080)：
- 使用者在他們的瀏覽器中輸入 Open WebUI 的網址。
Open WebUI 伺服器回應 (Returns welcome page from svelte build)：
- Open WebUI 伺服器（用 Python 編寫，並使用 Svelte 進行前端建構）收到請求後，會回傳預先建構好的頁面給使用者的瀏覽器。
網頁介面載入 (WebUI is loaded to browser)：
- 瀏覽器成功載入 Open WebUI 的前端介面。
前端發送 API 請求給 Open WebUI 伺服器 (Sends API request to /api/v1)：
- 使用者在 WebUI 上進行操作（例如輸入問題、選擇模型等），前端會將這些操作轉換成一個 API 請求，發送給 Open WebUI 伺服器的 /api/v1 端點。
Open WebUI 伺服器回應前端 (Returns API response data)：
- Open WebUI 伺服器處理這個內部 API 請求（可能涉及一些自身邏輯，如使用者驗證、對話管理等），然後回傳相應的資料給前端 WebUI。
前端處理 Open WebUI 伺服器的回應 (WebUI receives and processes API response data)：
- 前端 WebUI 接收並處理來自 Open WebUI 伺服器的回應資料，可能會更新介面顯示。

5 和 6 這部份, 可以把它們理解為 Open WebUI 應用程式內部的通訊和準備階段.

(例如新的聊天訊息、載入歷史紀錄、顯示錯誤提示等)

前端發送請求給 Ollama (Sends API request to /ollama/api)：
- 接下來，如果需要與語言模型互動，前端 WebUI（或者是透過 Open WebUI 伺服器代理）會將請求發送給一個指向 Ollama API 的路徑（例如 /ollama/api）。
- 圖中顯示的是 WebUI 直接發送給 Open WebUI Server，然後 Open WebUI Server 再代理這個請求給 Ollama Server。

如果今天是呼叫外部的 Gemini, 這邊的 Ollama 就是變成 Gemini.

Open WebUI 伺服器代理請求至 Ollama 伺服器 (Proxies request to ollama server)：
- Open WebUI 伺服器將收到的請求轉發 (代理) 給實際運行的 Ollama 伺服器。
Ollama 伺服器處理並回應 (Responds with data)：
- Ollama 伺服器（運行大型語言模型）處理這個請求（例如，生成文字回應），然後將結果資料回傳給 Open WebUI 伺服器。
Open WebUI 伺服器將 Ollama 的回應轉發給前端 (Returns API response data)：
- Open WebUI 伺服器再將從 Ollama 收到的回應資料回傳給前端 WebUI。
使用者接收並處理最終回應 (User receives and processes API response data)：
- 前端 WebUI 接收到來自 Ollama（經由 Open WebUI 伺服器）的回應資料，並將其顯示給使用者。