StarSoup Image Platform
基於 Vue 3 + TypeScript + Vite 的 AI 創意設計平台，前端從 jaaz 項目完整遷移而來。
功能概覽
| 模組 | 說明 |
|---|---|
| 畫布編輯器 | Fabric.js 驅動的畫布，支持繪圖工具、形狀、文字、圖層操作、導出 PNG/SVG |
| AI 聊天面板 | 透過 WebSocket（Socket.IO）實現流式對話，支持 Markdown 渲染和圖片上傳 |
| 多供應商模型管理 | 支持 Jaaz、OpenAI、Anthropic、Ollama、Replicate、HuggingFace、WaveSpeed、Volces、ComfyUI |
| 工具系統 | 可選工具列表（圖片生成、計劃撰寫等），每個工具調用結果即時展示 |
| 會話管理 | 多會話切換、歷史記錄持久化 |
| Agent Studio | 自定義 AI 代理：配置系統提示詞、模型、工具組合 |
| 知識庫 | 上傳與管理自定義知識文檔，注入至 AI 上下文 |
| 資產管理 | 瀏覽、上傳、管理圖片/影片/音訊等媒體資源 |
| 認證系統 | Jaaz 設備授權流程（Device Auth Flow）—— 瀏覽器開啟授權頁完成登錄 |
| 國際化 | 中文（zh-CN）和英文（en）雙語切換 |
| 深色模式 | 支持系統跟隨 / 手動切換亮色與暗色主題 |
| 設定面板 | 供應商 API Key 管理、代理伺服器設定、通用設定 |
技術棧
| 類別 | 技術 |
|---|---|
| 框架 | Vue 3（Composition API + <script setup>） |
| 構建工具 | Vite 8 |
| 語言 | TypeScript 5.9 |
| 路由 | Vue Router 4 |
| 狀態管理 | Pinia 3 |
| 樣式 | Tailwind CSS 4 |
| 畫布 | Fabric.js 7 |
| 即時通訊 | Socket.IO Client 4 |
| 國際化 | vue-i18n 10 |
| UI 組件 | Headless UI + 自定義基礎組件 |
| 圖標 | Lucide Vue Next |
| Markdown | markdown-it + DOMPurify |
| 通知 | vue-sonner |
快速開始
前置要求
- Node.js ≥ 18
- jaaz 後端伺服器：本項目的 API 由 jaaz 的 FastAPI 後端提供服務，位於
jaaz/server/
安裝
bash
# 克隆項目
cd starsoup-image-platform
# 安裝依賴
npm install
# 複製環境變數（可選）
cp .env.example .env環境變數
| 變數 | 預設值 | 說明 |
|---|---|---|
VITE_API_BASE_URL | http://localhost:57988 | jaaz 後端伺服器地址 |
VITE_JAAZ_CLOUD_URL | https://jaaz.app | Jaaz 雲端服務地址（用於設備認證和令牌刷新） |
啟動後端
bash
cd ../jaaz/server
pip install -r requirements.txt
python main.py --port 57988啟動前端
bash
npm run dev
# 開發伺服器啟動在 http://localhost:5173生產構建
bash
npm run build
npm run preview認證流程
本項目使用 設備授權流程（Device Auth Flow），與 jaaz 一致：
- 用戶點擊「Login with Browser」按鈕
- 前端向
https://jaaz.app/api/device/auth請求一個設備碼（device code） - 自動打開瀏覽器到
https://jaaz.app/auth/device?code=xxx - 用戶在瀏覽器中完成登錄
- 前端每 3 秒輪詢
https://jaaz.app/api/device/poll?code=xxx - 授權成功後，token 和 user_info 存入 localStorage
- token 同時寫入 jaaz 供應商的 API Key 配置中
不需要後端參與認證——認證完全在前端與 jaaz 雲端之間完成，localStorage 為唯一持久化層。
如不使用 Jaaz 雲帳戶，可直接在「Settings」中手動配置 OpenAI / Anthropic / Ollama 等供應商的 API Key。
項目結構
src/
├── api/ # API 層（所有後端通訊）
│ ├── auth.ts # 設備認證流程
│ ├── canvas.ts # 畫布 CRUD
│ ├── chat.ts # 聊天發送 / 取消
│ ├── config.ts # 供應商配置
│ ├── knowledge.ts # 知識庫管理
│ ├── magic.ts # Magic 生成
│ ├── model.ts # 模型 / 工具列表
│ ├── settings.ts # 設定 / 代理
│ ├── upload.ts # 圖片上傳
│ └── workspace.ts # 文件操作
├── assets/style/ # 全域樣式
├── components/
│ ├── auth/ # 登錄對話框、用戶選單
│ ├── canvas/ # 畫布編輯器、工具欄、頭部
│ ├── chat/ # 聊天面板、歷史、輸入框、模型選擇
│ ├── common/ # 頂部導航欄
│ ├── home/ # 畫布列表、卡片
│ ├── settings/ # 設定對話框、供應商管理
│ └── ui/ # 基礎 UI 組件（Button, Dialog, Input, ...）
├── composables/ # Vue 組合式函數
│ ├── useAuth.ts # 認證狀態
│ ├── useBalance.ts # 餘額查詢
│ ├── useLanguage.ts # 語言切換
│ ├── useMobile.ts # 移動端檢測
│ ├── useNotifications.ts # 通知
│ ├── useSocket.ts # Socket.IO provide/inject
│ └── useTheme.ts # 主題切換
├── constants/ # 常量定義
├── i18n/ # 國際化
│ ├── locales/en/ # 英文語言包
│ └── locales/zh-CN/ # 中文語言包
├── lib/ # 工具庫
│ ├── notifications.ts # 通知管理器
│ ├── socket.ts # Socket.IO 管理器
│ └── utils.ts # 通用工具函數
├── router/ # Vue Router 路由配置
├── stores/ # Pinia 狀態管理
│ ├── canvas.ts # 畫布狀態
│ ├── chat.ts # 聊天狀態
│ └── configs.ts # 全域配置（模型、工具、對話框）
├── types/ # TypeScript 類型定義
├── views/ # 頁面視圖
│ ├── HomeView.vue # 首頁（畫布列表）
│ ├── CanvasView.vue # 畫布 + 聊天分割視圖
│ ├── AgentStudioView.vue # Agent 工作室
│ ├── AssetsView.vue # 資產管理
│ └── KnowledgeView.vue # 知識庫
├── App.vue # 根組件
└── main.ts # 應用入口路由
| 路徑 | 頁面 | 說明 |
|---|---|---|
/ | HomeView | 首頁 — 畫布列表與新建 |
/canvas/:id | CanvasView | 畫布編輯器 + 聊天面板 |
/agent_studio | AgentStudioView | AI 代理配置 |
/assets | AssetsView | 媒體資源管理 |
/knowledge | KnowledgeView | 知識庫管理 |
常見問題
按鈕返回 502 錯誤
確保 jaaz 後端伺服器正在運行於 http://localhost:57988：
bash
cd jaaz/server && python main.py --port 57988如何不用 Jaaz 帳戶？
在 Settings 中直接配置 OpenAI / Anthropic / Ollama 等供應商的 API Key 即可使用。
如何切換語言？
頂部導航欄的設定中可切換中文和英文。
授權
本項目基於 jaaz 項目遷移構建。