🤖 CF ChatUI

🎯 零門檻使用大模型 - 無需部署服務器，無需申請 API Key，直接調用 Cloudflare Workers AI 的免費/付費模型

CF ChatUI 是一個基於 Cloudflare Workers AI 的多功能 AI 對話 Web 界面，讓您在幾分鐘內即可搭建自己的 AI 聊天平臺。支持文本對話、圖像生成、文本嵌入與聊天記錄 KV 持久化（記憶模式），所有計算都在 Cloudflare 邊緣節點完成。界面為正體中文（zh-TW）。

✨ 功能特性

🤖 AI 模型支持

💬 多模型對話 - Llama 3.1 8B Instruct (預設)、Llama 4 Scout 17B Instruct (備選)、Mistral Small 3.1 24B Instruct (程式碼模式)
🎨 AI 圖像生成 - FLUX.2 Dev 高質量圖像創作
📊 文本嵌入 - Plamo Embedding 向量化處理
🧠 記憶模式 - 聊天記錄持久化到 Cloudflare KV，可載入歷史對話

🛠️ 平臺特性

🔐 安全認證 - JWT 身份驗證，保護您的 AI 服務
🌓 深色主題 - 現代化的 ChatGPT 風格界面
📱 響應式設計 - 適配桌面和移動設備
⚡ 邊緣計算 - 基於 Cloudflare Workers 全球部署
🆓 零運維成本 - 無需管理服務器，按需付費

🔧 可配置性

本項目採用高度模塊化設計，未來版本將支持更多自定義配置：

自定義系統提示詞
模型參數調整（temperature、max_tokens 等）
主題和皮膚定製
插件擴展系統
多用戶角色管理
API 速率限制配置
更多 AI 模型接入

🌟 爲什麼選擇 CF ChatUI？

vs 傳統 AI API 方案

特性	OpenAI/Claude API	CF ChatUI + Workers AI
API Key 申請	❌ 需要信用卡，審覈嚴格	✅ 無需申請，即開即用
服務器部署	❌ 需要 VPS/雲服務器	✅ 純 Serverless，零運維
全球訪問速度	⚠️ 依賴服務器位置	✅ Cloudflare 全球邊緣節點
成本	💰 按量付費，可能較高	🆓 免費額度 + 低價按量
隱私安全	⚠️ 數據發送到第三方	✅ 數據在 Cloudflare 邊緣處理

誰適合使用？

👨‍💻 開發者 - 快速搭建 AI 演示或原型
🏢 小團隊 - 無需 DevOps 的 AI 解決方案
🎓 學習者 - 零成本體驗大模型能力
🔒 隱私敏感用戶 - 數據不經過第三方服務

🚀 快速開始

前置要求

Node.js 18+
Wrangler CLI 安裝:
```
npm install -g wrangler
```
Cloudflare 賬戶

獲取所需密鑰

在部署之前，您需要獲取以下信息：

1. Cloudflare 賬戶 ID

登錄 Cloudflare Dashboard
在右側邊欄找到 賬戶 ID (Account ID)
複製備用

2. Cloudflare API Token

訪問 API Tokens 頁面
點擊 創建令牌 (Create Token)
使用 自定義令牌 (Custom token) 模板
權限設置:
- 賬戶 (Account) - Cloudflare AI - 編輯 (Edit)
- 賬戶 (Account) - Worker 腳本 (Worker Scripts) - 編輯 (Edit) (可選)
賬戶資源: 包含您的賬戶
創建並複製令牌

3. 自定義配置 (可選)

AUTH_PASSWORD - 登錄密碼 (默認: Admin12345%)
SESSION_SECRET - JWT 簽名密鑰 (建議使用隨機字符串)

部署步驟

方式一: 使用 Wrangler CLI

# 1. 克隆倉庫
git clone https://github.com/ozuijoy/Chat-UI.git
cd Chat-UI

# 2. 安裝依賴
npm install

# 3. 設置 Secrets (推薦方式)
# 注意: wrangler.toml 已包含在倉庫中，無需額外配置
wrangler secret put CF_ACCOUNT_ID
# 輸入您的 Cloudflare 賬戶 ID

wrangler secret put CF_API_TOKEN
# 輸入您的 Cloudflare API Token

wrangler secret put AUTH_PASSWORD
# 輸入您想要的登錄密碼

wrangler secret put SESSION_SECRET
# 輸入隨機生成的密鑰 (可使用: openssl rand -base64 32)

# 4. 在 Cloudflare Dashboard 綁定 KV (記憶模式)
# 為避免敏感資訊寫入代碼庫，KV namespace id 不出現在 wrangler.toml 中。
# 請在面板操作：
#   a) Workers & Pages → KV namespace → 建立一個新 namespace（例如: chat-memory）
#   b) Workers & Pages → chatui → Settings → Bindings → 新增 KV namespace 綁定
#      - Variable name: CHAT_MEMORY
#      - KV namespace:  選擇上面建立的 chat-memory
#   c) 完成後再執行部署（面板綁定，wrangler deploy 不會移除）

# 5. 部署
wrangler deploy

方式二: 使用 .dev.vars (本地開發)

# 1. 創建本地環境變量文件
cp .dev.vars.example .dev.vars

# 2. 編輯 .dev.vars 填入實際值
# CF_ACCOUNT_ID=your_account_id
# CF_API_TOKEN=your_api_token
# AUTH_PASSWORD=your_password
# SESSION_SECRET=your_secret

# 3. 本地開發
wrangler dev

# 4. 部署到生產環境
wrangler deploy

方式三: Cloudflare Dashboard (無需命令行)

Fork 此倉庫到您的 GitHub 賬戶
登錄 Cloudflare Dashboard
進入 Workers & Pages
點擊創建 → 使用 Git 創建
連接您的 GitHub 賬戶並選擇 fork 的倉庫
設置環境變量:
- 變量名: CF_ACCOUNT_ID, CF_API_TOKEN, AUTH_PASSWORD, SESSION_SECRET
- 加密: 建議啓用加密 (Secret)
綁定 KV (記憶模式): Settings → Bindings → Add KV namespace binding，Variable name 填 CHAT_MEMORY（未綁定則記憶模式自動停用）
部署

部署後配置

部署成功後，您將獲得一個類似 https://cf-chatui.your-account.workers.dev 的 URL。

首次訪問:

使用設置的密碼登錄
默認密碼: Admin12345% (如果未自定義)

🛠️ 技術棧

運行時: Cloudflare Workers
AI 服務: Cloudflare Workers AI
前端: 原生 JavaScript + Tailwind CSS
認證: JWT (JSON Web Tokens)
持久化: Cloudflare Workers KV（記憶模式，於 Dashboard 綁定）
圖標: Heroicons

📝 支持的 AI 模型

類型	模型	描述
對話	`@cf/meta/llama-3.1-8b-instruct-fp8-fast`	Meta Llama 3.1，預設對話模型
對話	`@cf/meta/llama-4-scout-17b-16e-instruct`	Meta Llama 4 Scout，備選模型
程式碼	`@cf/mistralai/mistral-small-3.1-24b-instruct`	Mistral Small 3.1，程式碼模式
圖像	`@cf/black-forest-labs/flux-2-dev`	FLUX 高質量圖像生成
嵌入	`@cf/pfnet/plamo-embedding-1b`	文本嵌入向量模型

🔧 開發指南

# 安裝依賴
npm install

# 本地開發 (需配置 .dev.vars)
wrangler dev

# 部署到生產環境
wrangler deploy

# 查看日誌
wrangler tail

項目結構

cf-chatui/
├── src/
│   ├── index.ts           # 主入口 (Worker + 前端 + KV 記憶 API)
│   ├── index.html         # 前端靜態頁面（由 index.ts 模板生成）
│   └── index.html.escaped # 模板字串轉義版
├── wrangler.toml          # Cloudflare Workers 配置（KV 僅在面板綁定，無明文 id）
├── .wrangler.toml.example # 配置檔案模板
├── .dev.vars.example      # 本地環境變數模板
├── BUGS.md                # 已知問題清單
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md

🧠 記憶模式使用說明

部署後在 Cloudflare Dashboard → Workers & Pages → chatui → Settings → Bindings 新增 KV namespace 綁定，Variable name 填 CHAT_MEMORY
進入聊天界面後，輸入框下方有 「記憶模式」 開關（預設開啟）
載入歷史：從 KV 拉回最近的對話記錄並還原到聊天窗口
清除記錄：刪除 KV 中保存的該會話全部聊天記錄（操作前有二次確認）
未綁定 KV 時應用自動降級，記憶開關預設關閉，不影響正常聊天

💰 Workers AI 定價

Cloudflare Workers AI 採用 Neuron（運算單元）計費制，免費與付費 Workers 方案皆有每日 10,000 Neurons 免費額度（每日 00:00 UTC 重置）：

方案	免費額度	超出後價格
Workers Free	10,000 Neurons / 天	不計費，需升級才能繼續超量使用
Workers Paid	10,000 Neurons / 天	$0.011 / 1,000 Neurons

本專案使用模型的單價（官方 token 對照價）

模型	輸入價格	輸出價格
`@cf/meta/llama-3.1-8b-instruct-fp8-fast`（預設對話）	$0.045 / 1M tokens	$0.384 / 1M tokens
`@cf/meta/llama-4-scout-17b-16e-instruct-16e-instruct`（備選對話）	$0.270 / 1M tokens	$0.850 / 1M tokens
`@cf/mistralai/mistral-small-3.1-24b-instruct`（程式碼模式）	$0.351 / 1M tokens	$0.555 / 1M tokens
`@cf/black-forest-labs/flux-2-dev`（圖像生成）	$0.00021 / 輸入 512×512 tile × step	$0.00041 / 輸出 512×512 tile × step
`@cf/pfnet/plamo-embedding-1b`（文本嵌入）	$0.019 / 1M tokens	—

📌 提示: 以預設模型為例，輸出每百萬 token 約消耗 34,868 Neurons —— 每日 10,000 Neurons 免費額度約可支撐數百輪短對話，個人使用通常足夠。圖像生成以「像素塊 × 迭代步數」計價（例如 1024×1024、25 steps 約 $0.04 / 張）。最新價格與各模型單價請查看官方定價。

🔒 安全建議

更改默認密碼 - 部署後立即修改 AUTH_PASSWORD
使用強密鑰 - SESSION_SECRET 建議使用 openssl rand -base64 32 生成
保護 API Token - 使用 wrangler secret put 加密存儲
定期輪換密鑰 - 建議定期更新 SESSION_SECRET 和 CF_API_TOKEN
KV 綁定不出現明文 id - wrangler.toml 中不含 KV namespace id，僅在 Cloudflare Dashboard 綁定 CHAT_MEMORY
前端 Token 自動過期檢測 - JWT 過期後自動清除並跳回登入頁，請求帶 30 秒超時

🐛 已知問題

⚠️ 詳細的 Bug 清單請看 BUGS.md

主要已知問題：

🟠 中文編碼 在某些瀏覽器下有問題
🟡 SSE 流式中斷 弱網環境下可能意外中斷

已修復：

✅ Token 過期 前端自動檢測並跳登入頁
✅ 聊天記錄 可透過 KV 記憶模式持久化（載入/清除歷史）
✅ GPT-OSS-120B 無響應 已將該模型由支援清單移除，改用 Llama 系列

我們持續跟蹤和修復問題，歡迎提交 Issue 報告新 Bug！

🗺️ 路線圖

近期計劃 (v1.x)

📝 聊天記錄持久化 - KV 記憶模式已上線，可載入/清除歷史對話
💾 本地存儲 - 瀏覽器本地緩存對話
🎨 主題系統 - 可自定義界面顏色和風格
⚙️ 模型參數配置 - 調整 temperature、max_tokens 等

中期計劃 (v2.x)

🌐 多語言支持 - 界面國際化 (i18n)
🔑 多用戶支持 - 用戶管理和權限控制
🧩 插件系統 - 支持自定義擴展
📤 文件上傳 - 支持文檔和圖片上傳分析
🤖 更多模型 - 集成更多 Workers AI 模型

長期願景

🏗️ 可視化配置器 - 無需代碼即可定製功能
🔌 API 網關 - 統一的 AI 模型接入層
📊 使用分析 - 用量統計和成本監控

🤝 貢獻

歡迎提交 Issue 和 Pull Request！

Fork 本倉庫
創建您的功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
打開 Pull Request

📄 許可證

本項目採用 MIT 許可證。

🙏 致謝

本項目由協助開發

特別感謝

_{Workers & Workers AI 平臺}

_{優秀的 CSS 框架}

_{Powered by Kimi K2.5 × Cloudflare Workers}

Name		Name	Last commit message	Last commit date
src		src
.dev.vars.example		.dev.vars.example
.gitignore		.gitignore
.wrangler.toml.example		.wrangler.toml.example
BUGS.md		BUGS.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
tsconfig.json		tsconfig.json
wrangler.toml		wrangler.toml

Latest commit

History

Folders and files

Repository files navigation