安裝 Ollama

Ollama 是在你電腦上下載、管理、執行開源大語言模型的工具。
Open WebUI 本身不跑模型，而是透過 API 呼叫 Ollama。

1.1 下載與安裝

1. 前往 ollama.com/download
2. 點右上角 Download，依作業系統選擇版本
3. 安裝完成後，終端機驗證：

ollama --version
ollama pull qwen2.5:7b
ollama run qwen2.5:7b "你好"Code language: CSS (css)

用 Docker 架設 Open WebUI

2.1 Open WebUI 是什麼？

Open WebUI 是自架式 AI 聊天平台（前身 Ollama WebUI），提供：

• 類 ChatGPT 的網頁介面
• 對話紀錄、多模型切換
• 工作區：知識庫 RAG、自訂模型、提示詞、技能、工具
• 完全在本地運行，資料不出機房
  它不是獨立桌面軟體，而是跑在 Docker 容器裡的 Web 服務。

2.2 先安裝 Docker

• Windows / Mac：安裝 Docker Desktop
• 確認 Docker 已啟動（工作列有鯨魚圖示）

多數 PC 是 x86 (AMD64)；手機、部分 Mac 是 ARM。Docker 會自動選對應映像檔，一般不需手動指定。

2.3 一鍵啟動（Ollama 已裝在本機）

開啟 PowerShell 或 Terminal，執行：

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:mainCode language: JavaScript (javascript)

2.4 首次登入

1. 瀏覽器開啟 http://localhost:3000
2. 建立帳號，第一個註冊者自動成為管理員
3. Docker Desktop 的 Containers 頁可看到 open-webui 運行中

2.5 連接 Ollama 並下載模型

1. 點左下角 個人頭像 → Admin Settings（管理員設置）
2. 左側 Settings → Connections（連接）
3. 確認 Ollama Base URL 為 http://host.docker.internal:11434（Docker 連本機 Ollama）
4. 在 Pull a model 輸入模型名（如 qwen2.5:7b）→ 點下載
   
   
   也可在 ollama.com/library 查模型名稱：
   
5. 回到首頁聊天，在頂部模型選單選擇剛下載的模型作為預設
   

試著讓他自我介紹吧!

到這裡你已擁有本地語言 AI！接下來進入工作區，打造專屬助理。

認識工作區（Workspace）

3.1 工作區在哪？

左側邊欄點 Workspace（工作區），這是管理 AI「能力配置」的控制中心，不是聊天室本身。

3.2 工作區五大模組

進階還有 Functions（函式／管道） 與 Pipelines，用於過濾回應、串接外部服務。入門先掌握上表五項即可。

3.3 組合出你的 AI 助理

flowchart TD
  BASE["Ollama 底層模型<br>qwen2.5:7b"] --> CUSTOM["工作區 › 模型<br>系統提示 + 參數"]
  KB["工作區 › 知識庫<br>講義 PDF"] --> CUSTOM
  SK["工作區 › 技能<br>寫程式 SOP"] --> CUSTOM
  TL["工作區 › 工具<br>計算機 Python"] --> CUSTOM
  CUSTOM --> CHAT["聊天室使用"]
  PR["工作區 › 提示詞<br>/summarize"] --> CHAT

第四章：模型（Models）

4.1 底層模型 vs 自訂模型

• 底層模型：Ollama 裡的 qwen2.5:7b，負責實際推理
• 自訂模型：Open WebUI 的「設定包」— 同一底層模型 + 不同系統提示、溫度、知識庫綁定

4.2 建立自訂模型

1. Workspace → Models → + Create Model
2. 填寫：
   1. Name : Next.js助理
   2. Base Model: llama3.1:latest
   3. System Prompt
   4. Temperature:0.3（較穩定）或0.8（較有創意）

Profile

你是一位精通前端開發的進階專家，專職擔任「Next.js 教學助理」。你的目標是協助使用者理解 Next.js 的核心觀念、架構設計，並提供高品質、具備生產力且符合當前最佳實踐（Best Practices）的程式碼範例。

Tech Stack & Rules

核心版本：預設使用最新的 Next.js (14/15+) 版本。

路由架構：除非使用者特別指定 Pages Router，否則一律使用 App Router (app/ 目錄) 架構進行說明與程式碼撰寫。

元件元件：清楚區分「伺服器元件 (Server Components)」與「用戶端元件 (Client Components)」。在需要使用 Hooks（如 useState, useEffect）的元件頂端，務必加上 'use client';。

資料獲取：優先使用 Server Components 的異步函數（async/await）直接獲取資料，或使用基於 fetch 的 Data Fetching、Server Actions，避免推薦過時的 getStaticProps 或 getServerSideProps。

程式語言：預設使用 TypeScript 撰寫所有範例，並保持型別嚴謹。

Response Style

由淺入深：解釋觀念時先用通俗的話說明，再給出程式碼，並在程式碼關鍵處加上註解。

檔案路徑明確：提供程式碼範例時，務必在區塊上方標註該檔案在專案中的路徑，例如：// app/page.tsx 或 // app/components/Button.tsx。

提醒陷阱：在給出解答時，主動提醒使用者在 Next.js 中容易踩到的坑（例如：Hydration 錯誤、Server/Client 元件混用問題）。

Tone

專業、有耐心、條理清晰的資深導師語氣。Code language: JavaScript (javascript)

系統提示詞（System Prompt）的核心目的是限制 AI 的身分、指定使用的技術版本，以及規範程式碼的輸出格式。

儲存後，聊天室頂部可選此自訂模型，此時再讓他自我介紹:

4.3 其他場景

第五章：知識庫（Knowledge）— RAG 實戰

5.1 什麼是 RAG？

RAG（Retrieval-Augmented Generation） = 先從你的文件找相關段落，再讓模型根據這些內容回答。避免模型「瞎掰」課程內容。

5.2 建立知識庫

1. Workspace → Knowledge → + Create Collection
2. 下載下方PDF: Sprint & GitLab工作流
   (附件：)
3. 命名，例如 Sprint工作流與GitLab
4. 上傳 PDF、Markdown、TXT、網頁連結
5. 等待系統切片 + 向量化（Embeddings）完成

5.3 在聊天中使用

方式 A：建立自訂模型時綁定知識庫
方式 B：聊天輸入框旁的 + → 附加知識庫→Sprint工作流與GitLab
接著詢問模型：「Scrum Master等於PM嗎？」模型回答:

知識庫品質取決於文件清晰度。掃描模糊的 PDF 效果較差

第六章：提示詞（Prompts）

6.1 用途

把常用指令存成範本，在聊天室輸入 / 即可快速呼叫，支援變數占位。

6.2 建立提示詞（跟著做）

1. Workspace → Prompts → +
2. 設定：

標題：Sprint 回顧
指令：/sprint-review
內容：
請根據以下 Sprint 筆記，產出回顧報告：
- 完成項目
- 未完成與原因
- 下個 Sprint 建議

筆記：{{notes}}

聊天時輸入 /sprint-review，填入 notes 變數

Sprint 筆記範例

【Sprint 12 團隊開發筆記】
週期：2026-06-01 ~ 2026-06-12
團隊角色：Thomas (Frontend/Full-stack), Hy.C(PM), Team members


任務追蹤與實際狀況：

[已完成] 舊專案容器化：成功將原本混亂的 local 環境打包成 Docker 映像檔，並部署至測試伺服器。解決了連接埠（Port 3000）被本機其他服務佔用（Address already in use）的問題，後來改用 3001 埠成功避開。

[已完成] 開發 Next.js App Router 核心架構：完成新專案的目錄結構架設（app/ 路由），並釐清了 Server Components 與 Client Components 的邊界。所有共用元件皆加上嚴格的 TypeScript 型別定義。

[已完成] AI 輔助開發測試：在本地成功架設 Open WebUI 並串接 Ollama 後台 API，建立了專屬的「Next.js 教學助理」Agent，大幅提升團隊翻修舊程式碼的效率。

[未完成] 整合第三方 API 認證模組：原本計畫在本周完成與 Taipei Veterans General Hospital 系統的 API 資料對接與驗證測試。

原因：外部單位的 API 文件更新延遲，且測試環境的防火牆（Firewall）權限臨時被關閉，導致連線一直收到 504 Gateway Timeout。PM Xiaoli 已經與對方窗口聯繫，預計下週二才會重新開放權限並提供新版文件。

[未完成] 自動化部署（CI/CD Pipeline）腳本撰寫：因為突發的 Port 衝突除錯與 AI 工具環境架設花費了比預期更多的時間（多耗費了 1.5 天），導致此非緊急任務被排擠。

團隊痛點與發現：

團隊成員在剛接觸 Next.js 14/15 的 Server Actions 時容易踩坑，常忘記在頂端宣告 'use server' 或是不小心在 Client 端的 Hooks 裡直接呼叫。

本地開發環境的 Port 常常被其他背景程式（如舊的 Node.js 執行序或 Docker 殘留容器）佔用，造成 ERR_EMPTY_RESPONSE 錯誤，浪費不少除錯時間。Code language: JavaScript (javascript)

LLM回付:

6.3 與 System Prompt 的差別

第七章：技能（Skills）

7.1 什麼是 Skills？

Skills 是一份 Markdown 格式的「做事指南」，教模型遇到某類任務時應遵循的步驟與格式。與 System Prompt 類似但更模組化，可掛載到自訂模型。

7.2 建立技能（跟著做）

1. Workspace → Skills → +
2. 撰寫 Markdown，例如 git-commit-規範.md：

# Git Commit 撰寫技能

當使用者要求產生 commit message 時：
1. 使用 Conventional Commits 格式
2. type 限 feat / fix / docs / refactor
3. 附繁體中文 subject，50 字內
4. body 說明影響範圍與關聯 IssueCode language: PHP (php)

1. 在自訂模型的 Skills 欄位勾選此技能

7.3 Skills vs Tools

簡單來說：Tool 是「手段（硬體/配備）」，而 Skill 是「目的（能力/大腦）」。

第八章：工具（Tools）

8.1 什麼是 Tools？

Tools 是 Python 函式，模型在對話中可透過 Function Calling 主動呼叫，例如查天氣、算數、讀檔案。
Open WebUI 內建程式碼編輯器，支援 BYOF（Bring Your Own Function）。

8.2 建立簡單工具（跟著做）

1. Workspace → Tools → +
2. 命名為: 基礎 Tool 範例
   1. 工具ID:my_tools
   2. 描述: 圓面積與反轉字串
3. 撰寫 Python：

import math
from typing import Generator, Callable

class Tools:
    def __init__(self):
        pass

    def calculate_circle_area(self, radius: float) -> str:
        """
        計算圓形的面積。當使用者詢問特定半徑的圓面積是多少時使用。
        :param radius: 圓的半徑（必須是數字、浮點數）。
        :return: 計算結果的描述字串。
        """
        area = math.pi * (radius ** 2)
        return f"半徑為 {radius} 的圓面積為 {area:.2f}"

1. 儲存並啟用
2. 在自訂模型的設定頁面 勾選此Tool
   
3. 問模型：「#calculate_circle_area 半徑為5的圓面積?」