Upload folder using huggingface_hub

README.md

@@ -9,21 +9,13 @@ pinned: false
 
 # Gemini Studio Web
 
-Gemini 图片 / 视频 Web 应用（FastAPI + React）。根目录 `README.md` 含 Hugging Face Spaces 的 YAML 头；详细说明见 `docs/`。
-
-## Documentation
+Gemini 图片 / 视频 Web（FastAPI + React）。根目录 YAML 供 Hugging Face Spaces；说明见 `docs/`。
 
 | Document | Contents |
 |----------|----------|
-| [**docs/SPEC_WEB_UI.md**](docs/SPEC_WEB_UI.md) | 功能与界面规格（原 PLAN） |
-| [**docs/WEB_DEV_GUIDE.md**](docs/WEB_DEV_GUIDE.md) | 环境、部署、Hugging Face |
-
-索引：[docs/README.md](docs/README.md)。
-
----
-
-## Hugging Face（摘要）
+| [docs/SPEC_WEB_UI.md](docs/SPEC_WEB_UI.md) | 功能与界面规格 |
+| [docs/WEB_DEV_GUIDE.md](docs/WEB_DEV_GUIDE.md) | 环境、部署、HF Docker |
 
-上传、`README` 元数据、Secrets、本地 Docker：见 **[docs/WEB_DEV_GUIDE.md §10](docs/WEB_DEV_GUIDE.md#10-hugging-face-spaces-docker)**。
+## Hugging Face
 
-Space **Settings → Variables and secrets** 至少配置：`GEMINI_API_KEY`、`WEB_UI_PASSWORD`、`SESSION_SECRET`（大小写一致，含义见 §10.4 与 §3）。
+上传与 Secrets：见 [docs/WEB_DEV_GUIDE.md — Hugging Face](docs/WEB_DEV_GUIDE.md#hugging-face-spaces-docker)。至少配置 `GEMINI_API_KEY`、`WEB_UI_PASSWORD`、`SESSION_SECRET`。

docs/README.md

@@ -3,6 +3,6 @@
 | File | Contents |
 |------|----------|
 | [SPEC_WEB_UI.md](./SPEC_WEB_UI.md) | Product spec |
-| [WEB_DEV_GUIDE.md](./WEB_DEV_GUIDE.md) | Runbook (local, env, Docker, HF §10) |
+| [WEB_DEV_GUIDE.md](./WEB_DEV_GUIDE.md) | Setup, env, Docker, Hugging Face |
 
-Overview: [README.md](../README.md).
+[README.md](../README.md)

docs/SPEC_WEB_UI.md

@@ -1,72 +1,41 @@
 # Web UI — product specification
 
-**Scope:** what to build and UX expectations (implementers / AI). **How to run / deploy:** [WEB_DEV_GUIDE.md](./WEB_DEV_GUIDE.md).
+**What to build:** this file. **How to run / deploy:** [WEB_DEV_GUIDE.md](./WEB_DEV_GUIDE.md).
 
----
+## Overview
 
-# Overview
+Image and video generation from prompts and optional reference images.
 
-Web UI for image and video generation: prompts plus optional reference images.
+## AI 创作台
 
-## 第一板块：AI 创作台
+**A. 图片** — 0–3 张参考图 + 提示词 → 一张图。思考强度三档（Flash minimal / Flash high / Pro high）；模型 ID 与 `thinking_level` 见后端。宽高比、分辨率见 `generation_options.json`。
 
-**A. 图片生成或编辑** — 0–3 张参考图 + 提示词 → 一张图。
+**B. 视频** — 0–3 张参考图 + 提示词 → 短视频。Veo 模型可配置；Lite **`supports_reference_images: false`**。有参考图时时长 **8s**；仅文案时 4/6/8s（以 API 为准）。
 
-- 思考强度：三项并列（模型 + 强度）— Flash（快速，默认 minimal）、Flash（长思考，high）、Pro（长思考，high）；对应 `gemini-3.1-flash-image-preview` / `gemini-3-pro-image-preview` + `thinking_level`。
-- 宽高比：`1:1` … `21:9`（见 `generation_options.json`）。
-- 分辨率：`1K` / `2K` / `4K`。
+**C. 首尾过渡** — 起始帧必填 + 提示词；结尾帧可选或「与起始相同」。时长 **固定 8s**。
 
-**B. 视频生成** — 0–3 张参考图 + 提示词 → 短视频。
+## 辅助工具
 
-- 模型（可配置）：`veo-3.1-generate-preview`、`veo-3.1-lite-generate-preview`、`veo-3.1-fast-generate-preview`；界面：**（标准）/（轻量）/（快速）**。Lite **不支持参考图**（`supports_reference_images`）。
-- 宽高比：16:9 或 9:16；分辨率：720p / 1080p / 4k。
-- 时长：纯文案 4/6/8 秒（与分辨率以 API 为准）；**有参考图时固定 8 秒**。
+- **超分辨率：** 单张原图 → 高清图；默认提示词可改；宽高比按原图自动建议（表单底部可改）；比例不匹配时警告仍可生成。
+- **提取视频帧：** 本地视频 → 时间轴选帧 → PNG。
+- **图像裁剪：** 前端 Canvas，不上传服务器；自由或固定比例 → PNG。
+- **替换纯色背景：** 前端 Canvas；原/目标色、容差、预览与 PNG。
 
-**C. 视频生成（首尾过渡）** — 至少 1 张起始帧 + 提示词；结尾帧可选或「与起始相同」。
+## 示例
 
-- 模型：同 B；宽高比、分辨率：同 B。
-- 时长：**固定 8 秒**（首/尾帧条件不接受 4/6 秒）。
+静态演示（预置素材），不调用模型。
 
-## 第二板块：辅助工具
+## 仓库脚本
 
-- **超分辨率：** 与图片编辑同一路径，1 张参考图 → 更高清；默认提示词可改。先上传原图（必填）；按原图宽高比在列表中自动择近匹配，**宽高比控件放在表单最下**、可手改。分辨率默认 4K（不随原图自动推断），自选 1K/2K/4K。原图比例与列表都不接近时 **警告**，仍可生成。模型默认「快速」，可改「标准」。
-- **提取视频帧：** 上传视频 → 可拖动时间轴 → 预览时间与画面 → 「下载」导出该帧 PNG。
-- **图像裁剪**（前端 Canvas，`/tools/crop`，不上传服务器）：裁剪框可平移、四角缩放；「自由」比例下四边白条可拖；固定比例选项与图片宽高比列表一致（另加「自由」）；裁剪区即原图、结果实时更新；下载 PNG。
-- **替换纯色背景**（前端 Canvas，`/tools/replace-bg`）：适合纯色或大块相近背景；原色/目标色（系统调色板、手动 R/G/B 或 Hex、预览图点击取色）；不透明度 0–100%；RGB 距离 ≤ 容差的像素替换为目标色；预览与 PNG 下载。
+`run_gen_image_*.sh`、`run_gen_video_*.sh` 等可能只覆盖简化场景。API 文档：[图片](https://ai.google.dev/gemini-api/docs/image-generation?hl=zh-cn)、[视频](https://ai.google.dev/gemini-api/docs/video?hl=zh-cn)。
 
-## 第三板块：示例
+## 界面
 
-创作台的静态示例：预置提示词与 `assets/` 素材，展示输出；不调用模型。
+- 密码登录（`WEB_UI_PASSWORD`）。
+- 侧栏进入各功能；提示词必填；参考图规则按 A/B/C；生成中显示耗时。
+- 模型名、分辨率、宽高比等来自 **`web/config/generation_options.json`**（可用 **`GENERATION_OPTIONS_PATH`**），避免写死在代码里；改 JSON 通常不必重编前端。
 
-简介：Wake-UP 人声乐团（北大 2025–2026 十佳歌手冠军）比赛彩幕相关能力展示。
+## 其他
 
-1. 手写字体：两张 output。  
-2. 图上加字：提示词 + input + output。  
-3. 循环视频：提示词 + input + output 视频。  
-4. 超分辨率：input + output。  
-5. 视频延伸（长视频）：仅 output +「敬请期待」。
-
-## 示例脚本（仓库内）
-
-- A：`run_gen_image_image_cond.sh`、`run_gen_image_prompt_only.sh`
-- B：`run_gen_video_prompt_only.sh`
-- C：`run_gen_video_image_start_end_diff.sh`
-
-脚本可能只覆盖单图等简化场景。完整 API 说明：[图片](https://ai.google.dev/gemini-api/docs/image-generation?hl=zh-cn)、[视频](https://ai.google.dev/gemini-api/docs/video?hl=zh-cn)。
-
-# 界面要求
-
-- 启动页：密码登录（密码来自环境变量）。
-- 登录后侧栏进入各功能，每项含：简介、**必填**提示词、上传区（A/B 最多三张参考图，均可空；C 起始帧必填、结尾可选、可勾选与起始相同）、模型/宽高比/分辨率（视频含时长，受 API/参考图约束）、结果展示区。
-- 生成中显示耗时，避免「卡住」感。
-
-# 其他
-
-- `GEMINI_API_KEY` 仅环境变量，禁止写入代码仓库。
-- 代码英文；界面文案与提示词可用中文。
-- 视觉：简洁、有一定设计感。
-
-# 稳定 URL 与可配置选项
-
-- 稳定访问域名：用自有域名 + DNS、静态 IP、反代或隧道等（见 WEB_DEV_GUIDE §8）。
-- 模型名、分辨率、宽高比等：**不要写死在代码里**；集中在 **`web/config/generation_options.json`**，可用 **`GENERATION_OPTIONS_PATH`** 指向其他文件。改 JSON 通常不必重编前端；改 React/样式需 `cd web/frontend && npm run build`。
+- `GEMINI_API_KEY` 仅环境变量，勿入库。
+- 代码英文为主；界面与提示词可用中文。

docs/WEB_DEV_GUIDE.md

@@ -1,18 +1,14 @@
 # Web UI — developer guide
 
-Set up, run, and deploy the Gemini Studio Web stack (FastAPI + React). Product scope: **[SPEC_WEB_UI.md](./SPEC_WEB_UI.md)**.
+Setup, run, deploy (FastAPI + React). Product scope: **[SPEC_WEB_UI.md](./SPEC_WEB_UI.md)**.
 
-**Imports:** Code lives under `VideoGeneration-release/web/`. Use **`PYTHONPATH=.`** with cwd = **`VideoGeneration-release`** (parent of `web/`). Do not set `PYTHONPATH` to `web/` alone.
+**Imports:** Code under `VideoGeneration-release/web/`. Run Python with cwd **`VideoGeneration-release`** and **`PYTHONPATH=.`** (not `web/` alone).
 
-## 1. Prerequisites
+## Prerequisites
 
-- Python 3.10+
-- Node.js 18+ and npm (frontend build)
-- **ffmpeg** on `PATH` (strip audio from MP4s)
+Python 3.10+, Node 18+, npm, **ffmpeg** on `PATH`.
 
-## 2. Python venv
-
-From **`VideoGeneration-release`**:
+## Python venv
 
 ```bash
 cd /path/to/VideoGeneration-release
@@ -21,17 +17,17 @@ source .venv/bin/activate   # Windows: .venv\Scripts\activate
 pip install -r web/requirements.txt
 ```
 
-## 3. Environment variables
+## Environment variables
 
-Do not commit secrets; use a `.env` with your process manager if you like.
+Do not commit secrets.
 
 | Variable | Purpose |
 |----------|---------|
-| `GEMINI_API_KEY` | Server-side only. |
+| `GEMINI_API_KEY` | Server-side API key. |
 | `WEB_UI_PASSWORD` | Login password. |
 | `SESSION_SECRET` | Session signing, e.g. `openssl rand -hex 32`. |
-| `GENERATION_OPTIONS_PATH` | Optional. Overrides default `web/config/generation_options.json`. |
-| `SESSION_COOKIE_SECURE` | Optional. Set to `1` / `true` / `yes` to send session cookies with the **Secure** flag (use on real HTTPS, e.g. Hugging Face). Leave unset for `http://127.0.0.1` local dev. Requires proxy to set `X-Forwarded-Proto` (see §10). |
+| `GENERATION_OPTIONS_PATH` | Optional; overrides default `web/config/generation_options.json`. |
+| `SESSION_COOKIE_SECURE` | Optional. `1`/`true`/`yes` for HTTPS-only cookies (e.g. Hugging Face). Unset for local `http://127.0.0.1`. Proxy must send `X-Forwarded-Proto` (see Hugging Face / Docker below). |
 
 ```bash
 export GEMINI_API_KEY="your_key"
@@ -39,14 +35,14 @@ export WEB_UI_PASSWORD="password"
 export SESSION_SECRET="$(openssl rand -hex 32)"
 ```
 
-## 4. `generation_options.json`
+## `generation_options.json`
 
-Edit **`web/config/generation_options.json`** (or the file from `GENERATION_OPTIONS_PATH`). The UI loads **`GET /api/config/generation-options`** after login. JSON-only changes need no frontend rebuild; React/TS/CSS changes do.
+Edit **`web/config/generation_options.json`** (or path from `GENERATION_OPTIONS_PATH`). UI loads it via **`GET /api/config/generation-options`** after login. JSON-only changes need no frontend rebuild.
 
-- **`image`**: `models` (`value` + `label`), `aspect_ratios`, `resolutions`, `thinking_levels`.
-- **`video`** / **`video_frames`**: `models`, `aspect_ratios`, `resolutions`, `durations_seconds`. On **`video`**, **`supports_reference_images`** (e.g. Veo Lite = `false`). With reference images, duration is forced to **8s**. **首尾帧** route always **8s** (no 4/6s like prompt-only 720p).
+- **`image`**: `models`, `aspect_ratios`, `resolutions`.
+- **`video`** / **`video_frames`**: `models`, `aspect_ratios`, `resolutions`, `durations_seconds`. On **`video`**, **`supports_reference_images: false`** hides reference images (e.g. Veo Lite). With reference images, duration is **8s**. **首尾帧** route is always **8s**.
 
-## 5. Build frontend
+## Build frontend
 
 ```bash
 cd web/frontend
@@ -54,59 +50,44 @@ npm install
 npm run build
 ```
 
-Output: **`web/backend/static/`**. Missing build → root URL returns 503.
+Output: **`web/backend/static/`**. Without it, root URL returns 503.
 
-## 6. Run server
+## Run server
 
 ```bash
 cd /path/to/VideoGeneration-release
 PYTHONPATH=. uvicorn web.backend.main:app --host 127.0.0.1 --port 8000
 ```
 
-LAN: `--host 0.0.0.0`. Dev: add `--reload`.
-
-## 7. Dev mode (hot reload)
+LAN: `--host 0.0.0.0`. Dev: `--reload`.
 
-**A** — API, cwd **`VideoGeneration-release`**:
+## Dev (hot reload)
 
-```bash
-PYTHONPATH=. uvicorn web.backend.main:app --reload --host 127.0.0.1 --port 8000
-```
+**API:** `PYTHONPATH=. uvicorn web.backend.main:app --reload --host 127.0.0.1 --port 8000` from repo root.
 
-**B** — Vite (`web/frontend`): `npm run dev` (proxies `/api` to 8000). Open the printed URL (e.g. `http://127.0.0.1:5173`).
+**Vite:** `cd web/frontend && npm run dev` — proxies `/api` to 8000; open the printed URL (e.g. `http://127.0.0.1:5173`).
 
-## 8. Stable URL
+## Stable URL
 
-The app does not provide a hostname. Use DNS to a domain you control, static/elastic IP, reverse proxy (nginx/Caddy), or a tunnel (Cloudflare Tunnel, Tailscale Funnel, etc.). **One DNS name → current server** when you move machines.
+Use your own DNS/domain, static IP, reverse proxy, or tunnel — no hostname is baked into the app.
 
-## 9. Checklist
+## Checklist
 
 - [ ] `ffmpeg -version`
 - [ ] `pip install -r web/requirements.txt`
 - [ ] `npm run build` in `web/frontend` at least once
 - [ ] `GEMINI_API_KEY`, `WEB_UI_PASSWORD`, `SESSION_SECRET` set
-- [ ] Uvicorn from **`VideoGeneration-release`** with `PYTHONPATH=.`
-
-## 10. Hugging Face Spaces (Docker)
-
-Use **Docker** (`sdk: docker`), not Streamlit/Gradio. **`Dockerfile`** at repo root next to `web/` and `assets/`.
+- [ ] Uvicorn from repo root with `PYTHONPATH=.`
 
-### 10.1 Create Space
+## Hugging Face Spaces (Docker)
 
-[Hugging Face](https://huggingface.co/) → New Space → **SDK: Docker**. Space id: **`YOUR_USERNAME/YOUR_SPACE_NAME`**.
+Use **Docker** Space (`sdk: docker`). **`Dockerfile`** at repo root beside `web/` and `assets/`.
 
-### 10.2 Root `README.md`
+### Create & upload
 
-YAML frontmatter must validate. This repo’s README is preconfigured.
+[Hugging Face](https://huggingface.co/) → New Space → **SDK: Docker**. Root **`README.md`** YAML must validate (`sdk: docker`; **`colorFrom`** / **`colorTo`** each one of: `red`, `yellow`, `green`, `blue`, `indigo`, `purple`, `pink`, `gray`).
 
-- **`sdk: docker`**
-- **`colorFrom`** / **`colorTo`**: each must be one of **`red`**, **`yellow`**, **`green`**, **`blue`**, **`indigo`**, **`purple`**, **`pink`**, **`gray`** (other names → upload error).
-
-### 10.3 Upload
-
-**Cwd:** **`VideoGeneration-release`** (contains `Dockerfile`, `web/`, `assets/`).
-
-**CLI** ([write token](https://huggingface.co/settings/tokens)):
+**Upload** from **`VideoGeneration-release`** (contains `Dockerfile`, `web/`, `assets/`):
 
 ```bash
 pip install -U huggingface_hub
@@ -115,45 +96,17 @@ cd /path/to/VideoGeneration-release
 hf upload YOUR_USERNAME/YOUR_SPACE_NAME . . --repo-type space
 ```
 
-Example:
-
-```bash
-hf upload LehongWu/VideoGeneration-release . . --repo-type space
-```
-
-Then check **Space → Logs** for the Docker build.
-
-**Git:**
-
-```bash
-git remote add hf https://huggingface.co/spaces/YOUR_USERNAME/YOUR_SPACE_NAME
-git push -u hf main
-```
-
-Or connect GitHub in Space settings and push there.
-
-### 10.4 Secrets
-
-**Settings → Variables and secrets** — names must match exactly (case-sensitive). Same as [§3](#3-environment-variables).
-
-| Name | Purpose |
-|------|---------|
-| `GEMINI_API_KEY` | Gemini key; never commit. |
-| `WEB_UI_PASSWORD` | Login password. |
-| `SESSION_SECRET` | e.g. `openssl rand -hex 32`. |
+Or add git remote `https://huggingface.co/spaces/USER/SPACE` and push.
 
-Optional: `GENERATION_OPTIONS_PATH` (custom JSON path inside the container).
+### Secrets
 
-Saving restarts the Space. Never put secrets in Git or `README.md`.
+**Settings → Variables and secrets** — same names as the env table above (case-sensitive). Optional: `GENERATION_OPTIONS_PATH`. Saving restarts the Space.
 
-### 10.5 Runtime
+### Runtime (Dockerfile)
 
-- Listens on **`PORT`** or **`7860`** (`Dockerfile`: `uvicorn ... --port ${PORT:-7860}`).
-- **`--forwarded-allow-ips='*'`** — required behind HF’s reverse proxy so `X-Forwarded-Proto: https` is trusted. Without it, Uvicorn often sees `http`, session cookies misbehave, and the UI **keeps asking you to log in**.
-- **ffmpeg** in image.
-- First build / cold start can take minutes.
+Listens on **`PORT`** or **7860**. **`--forwarded-allow-ips='*'`** is required behind HF’s proxy so HTTPS and session cookies work. **ffmpeg** in image. Cold start can take minutes.
 
-### 10.6 Local Docker
+### Local Docker
 
 ```bash
 cd /path/to/VideoGeneration-release

web/backend/static/assets/index-DKu6Axh1.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:DM Sans,system-ui,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.order-1{order:1}.order-2{order:2}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-0\.5{margin-top:.125rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-auto{margin-top:auto}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.block{display:block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-2{height:.5rem}.h-20{height:5rem}.max-h-64{max-height:16rem}.max-h-\[360px\]{max-height:360px}.max-h-\[min\(70vh\,52rem\)\]{max-height:min(70vh,52rem)}.min-h-\[100px\]{min-height:100px}.min-h-\[120px\]{min-height:120px}.min-h-screen{min-height:100vh}.w-16{width:4rem}.w-20{width:5rem}.w-\[17\.5rem\]{width:17.5rem}.w-full{width:100%}.min-w-0{min-width:0px}.min-w-\[140px\]{min-width:140px}.min-w-\[15rem\]{min-width:15rem}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-7xl{max-width:80rem}.max-w-full{max-width:100%}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.cursor-crosshair{cursor:crosshair}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.appearance-none{-webkit-appearance:none;-moz-appearance:none;appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-7{gap:1.75rem}.space-y-14>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(3.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(3.5rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.75rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.75rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.25rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * var(--tw-space-y-reverse))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.whitespace-pre-wrap{white-space:pre-wrap}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-none{border-radius:0}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-amber-200\/80{border-color:#fde68acc}.border-ink{--tw-border-opacity: 1;border-color:rgb(var(--color-ink) / var(--tw-border-opacity, 1))}.border-line\/80{border-color:rgb(var(--color-line) / .8)}.border-line\/90{border-color:rgb(var(--color-line) / .9)}.border-red-200{--tw-border-opacity: 1;border-color:rgb(254 202 202 / var(--tw-border-opacity, 1))}.border-slate-200{--tw-border-opacity: 1;border-color:rgb(226 232 240 / var(--tw-border-opacity, 1))}.border-slate-200\/80{border-color:#e2e8f0cc}.border-slate-200\/90{border-color:#e2e8f0e6}.border-slate-300{--tw-border-opacity: 1;border-color:rgb(203 213 225 / var(--tw-border-opacity, 1))}.border-slate-300\/80{border-color:#cbd5e1cc}.border-slate-400\/90{border-color:#94a3b8e6}.bg-amber-50{--tw-bg-opacity: 1;background-color:rgb(255 251 235 / var(--tw-bg-opacity, 1))}.bg-black{--tw-bg-opacity: 1;background-color:rgb(0 0 0 / var(--tw-bg-opacity, 1))}.bg-black\/5{background-color:#0000000d}.bg-ink{--tw-bg-opacity: 1;background-color:rgb(var(--color-ink) / var(--tw-bg-opacity, 1))}.bg-neutral-200{--tw-bg-opacity: 1;background-color:rgb(229 229 229 / var(--tw-bg-opacity, 1))}.bg-panel\/95{background-color:rgb(var(--color-panel) / .95)}.bg-red-50{--tw-bg-opacity: 1;background-color:rgb(254 242 242 / var(--tw-bg-opacity, 1))}.bg-slate-100{--tw-bg-opacity: 1;background-color:rgb(241 245 249 / var(--tw-bg-opacity, 1))}.bg-slate-400\/90{background-color:#94a3b8e6}.bg-slate-50\/90{background-color:#f8fafce6}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/60{background-color:#fff9}.bg-white\/80{background-color:#fffc}.bg-white\/85{background-color:#ffffffd9}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.from-paper{--tw-gradient-from: rgb(var(--color-paper) / 1) var(--tw-gradient-from-position);--tw-gradient-to: rgb(var(--color-paper) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-panel\/30{--tw-gradient-to: rgb(var(--color-panel) / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), rgb(var(--color-panel) / .3) var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-paper{--tw-gradient-to: rgb(var(--color-paper) / 1) var(--tw-gradient-to-position)}.object-contain{-o-object-fit:contain;object-fit:contain}.object-cover{-o-object-fit:cover;object-fit:cover}.p-0{padding:0}.p-10{padding:2.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.pl-0\.5{padding-left:.125rem}.pt-6{padding-top:1.5rem}.pt-8{padding-top:2rem}.text-left{text-align:left}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.625rem;line-height:2rem}.text-3xl{font-size:2rem;line-height:2.25rem}.text-base{font-size:1.0625rem;line-height:1.5rem}.text-sm{font-size:.9375rem;line-height:1.375rem}.text-xl{font-size:1.3125rem;line-height:1.75rem}.text-xs{font-size:.8125rem;line-height:1.125rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-relaxed{line-height:1.625}.tracking-wide{letter-spacing:.025em}.text-amber-800{--tw-text-opacity: 1;color:rgb(146 64 14 / var(--tw-text-opacity, 1))}.text-amber-900{--tw-text-opacity: 1;color:rgb(120 53 15 / var(--tw-text-opacity, 1))}.text-ink{--tw-text-opacity: 1;color:rgb(var(--color-ink) / var(--tw-text-opacity, 1))}.text-ink\/70{color:rgb(var(--color-ink) / .7)}.text-ink\/80{color:rgb(var(--color-ink) / .8)}.text-ink\/85{color:rgb(var(--color-ink) / .85)}.text-ink\/90{color:rgb(var(--color-ink) / .9)}.text-ink\/95{color:rgb(var(--color-ink) / .95)}.text-mist{--tw-text-opacity: 1;color:rgb(var(--color-mist) / var(--tw-text-opacity, 1))}.text-mist\/90{color:rgb(var(--color-mist) / .9)}.text-paper{--tw-text-opacity: 1;color:rgb(var(--color-paper) / var(--tw-text-opacity, 1))}.text-red-700{--tw-text-opacity: 1;color:rgb(185 28 28 / var(--tw-text-opacity, 1))}.text-red-800{--tw-text-opacity: 1;color:rgb(153 27 27 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.underline-offset-2{text-underline-offset:2px}.accent-ink{accent-color:rgb(var(--color-ink) / 1)}.shadow-lg{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.shadow-black\/10{--tw-shadow-color: rgb(0 0 0 / .1);--tw-shadow: var(--tw-shadow-colored)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-sm{--tw-backdrop-blur: blur(4px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}:root,html[data-theme=blue]{--color-paper: 238 241 248;--color-panel: 216 228 242;--color-line: 168 184 208;--color-mist: 71 85 105;--color-ink: 15 23 42;--color-clay: 99 102 241}html[data-theme=cream]{--color-paper: 252 250 245;--color-panel: 241 236 226;--color-line: 214 204 188;--color-mist: 87 83 78;--color-ink: 15 23 42;--color-clay: 120 113 108}html[data-theme=gray]{--color-paper: 244 244 246;--color-panel: 232 232 235;--color-line: 186 190 198;--color-mist: 82 82 91;--color-ink: 15 23 42;--color-clay: 82 82 91}html[data-theme=lavender]{--color-paper: 247 246 252;--color-panel: 234 231 245;--color-line: 196 191 220;--color-mist: 78 74 98;--color-ink: 15 23 42;--color-clay: 109 40 217}html{font-size:100%}html[data-font-size=compact]{font-size:75%}html[data-font-size=small]{font-size:90%}html[data-font-size=standard]{font-size:105%}html[data-font-size=large]{font-size:120%}html[data-font-size=xlarge]{font-size:135%}body{min-height:100vh;--tw-bg-opacity: 1;background-color:rgb(var(--color-paper) / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(var(--color-ink) / var(--tw-text-opacity, 1));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:DM Sans,system-ui,sans-serif;line-height:1.55}::-moz-selection{background-color:rgb(var(--color-clay) / .22)}::selection{background-color:rgb(var(--color-clay) / .22)}h1,h2,h3,.font-display{font-family:"Source Serif 4",Georgia,serif}.file\:mr-3::file-selector-button{margin-right:.75rem}.file\:rounded-lg::file-selector-button{border-radius:.5rem}.file\:border-0::file-selector-button{border-width:0px}.file\:bg-slate-200::file-selector-button{--tw-bg-opacity: 1;background-color:rgb(226 232 240 / var(--tw-bg-opacity, 1))}.file\:px-3::file-selector-button{padding-left:.75rem;padding-right:.75rem}.file\:py-1\.5::file-selector-button{padding-top:.375rem;padding-bottom:.375rem}.file\:text-sm::file-selector-button{font-size:.9375rem;line-height:1.375rem}.file\:text-ink::file-selector-button{--tw-text-opacity: 1;color:rgb(var(--color-ink) / var(--tw-text-opacity, 1))}.placeholder\:text-slate-400::-moz-placeholder{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.placeholder\:text-slate-400::placeholder{--tw-text-opacity: 1;color:rgb(148 163 184 / var(--tw-text-opacity, 1))}.hover\:border-clay\/80:hover{border-color:rgb(var(--color-clay) / .8)}.hover\:bg-slate-50:hover{--tw-bg-opacity: 1;background-color:rgb(248 250 252 / var(--tw-bg-opacity, 1))}.hover\:bg-slate-800:hover{--tw-bg-opacity: 1;background-color:rgb(30 41 59 / var(--tw-bg-opacity, 1))}.hover\:bg-white\/60:hover{background-color:#fff9}.hover\:text-ink:hover{--tw-text-opacity: 1;color:rgb(var(--color-ink) / var(--tw-text-opacity, 1))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.focus\:ring-clay\/40:focus{--tw-ring-color: rgb(var(--color-clay) / .4)}.focus\:ring-clay\/50:focus{--tw-ring-color: rgb(var(--color-clay) / .5)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}.disabled\:opacity-\[0\.92\]:disabled{opacity:.92}@media (min-width: 640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:p-10{padding:2.5rem}.sm\:p-12{padding:3rem}.sm\:p-7{padding:1.75rem}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width: 1024px){.lg\:sticky{position:sticky}.lg\:top-4{top:1rem}.lg\:order-1{order:1}.lg\:order-2{order:2}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-\[1fr_minmax\(200px\,260px\)\]{grid-template-columns:1fr minmax(200px,260px)}.lg\:p-12{padding:3rem}}@media (min-width: 1280px){.xl\:max-w-\[96rem\]{max-width:96rem}}@media (min-width: 1536px){.\32xl\:max-w-\[min\(104rem\,calc\(100vw-3rem\)\)\]{max-width:min(104rem,calc(100vw - 3rem))}}

web/backend/static/index.html

@@ -13,7 +13,8 @@
     <script>
       (function () {
         var V2 = 2;
-        var valid = function (fs) {
+        var V3 = 3;
+        function validFs(fs) {
           return (
             fs === "compact" ||
             fs === "small" ||
@@ -21,30 +22,39 @@
             fs === "large" ||
             fs === "xlarge"
           );
-        };
+        }
+        function validTheme(t) {
+          return t === "blue" || t === "cream" || t === "gray" || t === "lavender";
+        }
         try {
           var raw = localStorage.getItem("videogen-ui-settings");
           var fs = "standard";
+          var theme = "blue";
           if (raw) {
             var o = JSON.parse(raw);
             if (o && o.fontSize) {
-              if (o.version === V2 && valid(o.fontSize)) {
-                fs = o.fontSize;
+              if (o.version === V2 || o.version === V3) {
+                if (validFs(o.fontSize)) fs = o.fontSize;
               } else {
                 if (o.fontSize === "comfortable") fs = "standard";
                 else if (o.fontSize === "standard") fs = "small";
-                else if (valid(o.fontSize)) fs = o.fontSize;
+                else if (validFs(o.fontSize)) fs = o.fontSize;
               }
             }
+            if (o && o.colorTheme && validTheme(o.colorTheme)) {
+              theme = o.colorTheme;
+            }
           }
           document.documentElement.dataset.fontSize = fs;
+          document.documentElement.dataset.theme = theme;
         } catch (e) {
           document.documentElement.dataset.fontSize = "standard";
+          document.documentElement.dataset.theme = "blue";
         }
       })();
     </script>
-    <script type="module" crossorigin src="/assets/index-DKLBzrVa.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CVYDo8sh.css">
+    <script type="module" crossorigin src="/assets/index-DK0fQxAx.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-DKu6Axh1.css">
   </head>
   <body>
     <div id="root"></div>

web/frontend/index.html

@@ -13,7 +13,8 @@
     <script>
       (function () {
         var V2 = 2;
-        var valid = function (fs) {
+        var V3 = 3;
+        function validFs(fs) {
           return (
             fs === "compact" ||
             fs === "small" ||
@@ -21,25 +22,34 @@
             fs === "large" ||
             fs === "xlarge"
           );
-        };
+        }
+        function validTheme(t) {
+          return t === "blue" || t === "cream" || t === "gray" || t === "lavender";
+        }
         try {
           var raw = localStorage.getItem("videogen-ui-settings");
           var fs = "standard";
+          var theme = "blue";
           if (raw) {
             var o = JSON.parse(raw);
             if (o && o.fontSize) {
-              if (o.version === V2 && valid(o.fontSize)) {
-                fs = o.fontSize;
+              if (o.version === V2 || o.version === V3) {
+                if (validFs(o.fontSize)) fs = o.fontSize;
               } else {
                 if (o.fontSize === "comfortable") fs = "standard";
                 else if (o.fontSize === "standard") fs = "small";
-                else if (valid(o.fontSize)) fs = o.fontSize;
+                else if (validFs(o.fontSize)) fs = o.fontSize;
               }
             }
+            if (o && o.colorTheme && validTheme(o.colorTheme)) {
+              theme = o.colorTheme;
+            }
           }
           document.documentElement.dataset.fontSize = fs;
+          document.documentElement.dataset.theme = theme;
         } catch (e) {
           document.documentElement.dataset.fontSize = "standard";
+          document.documentElement.dataset.theme = "blue";
         }
       })();
     </script>

web/frontend/src/context/GenerationOptionsContext.tsx

@@ -104,16 +104,12 @@ export function GenerationOptionsProvider({ children }: { children: ReactNode })
   );
 }
 
-/** Image Flash + video Fast — default selection prefers these IDs. */
 const FAST_MODEL_IDS = new Set([
   "gemini-3.1-flash-image-preview",
   "veo-3.1-fast-generate-preview",
 ]);
 
-/**
- * Default model: always the "快速" variant when present in `models`
- * (by id or label), else first entry, else `fallback`.
- */
+/** Prefer Flash/Fast id, else label 快速, else first or `fallback`. */
 export function defaultFastModelValue(
   models: { value: string; label?: string }[],
   fallback: string,

web/frontend/src/context/UiSettingsContext.tsx

@@ -10,31 +10,38 @@ import {
 } from "react";
 
 const STORAGE_KEY = "videogen-ui-settings";
-const SETTINGS_VERSION = 2;
+const SETTINGS_VERSION = 3;
 
-/**
- * Keys match English: `standard` = default "中" (Standard). `small` = 较小 (Smaller).
- * Legacy v1 stored `comfortable` for 中 and `standard` for 较小 — migrated on read.
- */
+/** Font scale presets; v1 `comfortable`/`standard` names migrated on read. */
 export type FontSizePreset = "compact" | "small" | "standard" | "large" | "xlarge";
 
+/** Sidebar/page palette via `html[data-theme]`. */
+export type ColorTheme = "blue" | "cream" | "gray" | "lavender";
+
 type UiSettings = {
   version: number;
   fontSize: FontSizePreset;
+  colorTheme: ColorTheme;
 };
 
 const defaultSettings: UiSettings = {
   version: SETTINGS_VERSION,
   fontSize: "standard",
+  colorTheme: "blue",
 };
 
 const PRESETS: FontSizePreset[] = ["compact", "small", "standard", "large", "xlarge"];
 
+const THEMES: ColorTheme[] = ["blue", "cream", "gray", "lavender"];
+
 function isPreset(v: string): v is FontSizePreset {
   return PRESETS.includes(v as FontSizePreset);
 }
 
-/** Migrate v1 storage where `standard` meant 较小 and `comfortable` meant 中. */
+function isTheme(v: string): v is ColorTheme {
+  return THEMES.includes(v as ColorTheme);
+}
+
 function migrateV1FontSize(raw: string | undefined): FontSizePreset | null {
   if (!raw) return null;
   if (raw === "comfortable") return "standard";
@@ -50,16 +57,28 @@ function readStored(): UiSettings {
     const parsed = JSON.parse(raw) as {
       version?: number;
       fontSize?: string;
+      colorTheme?: string;
     };
-    let fs: FontSizePreset | null = null;
-    if (parsed.version === SETTINGS_VERSION && parsed.fontSize && isPreset(parsed.fontSize)) {
-      fs = parsed.fontSize;
-    } else {
-      fs = migrateV1FontSize(parsed.fontSize);
+
+    let fs: FontSizePreset = "standard";
+    if (parsed.fontSize) {
+      if (
+        (parsed.version === 2 || parsed.version === SETTINGS_VERSION) &&
+        isPreset(parsed.fontSize)
+      ) {
+        fs = parsed.fontSize;
+      } else {
+        const m = migrateV1FontSize(parsed.fontSize);
+        if (m) fs = m;
+      }
     }
-    if (fs) {
-      return { version: SETTINGS_VERSION, fontSize: fs };
+
+    let colorTheme: ColorTheme = "blue";
+    if (parsed.colorTheme && isTheme(parsed.colorTheme)) {
+      colorTheme = parsed.colorTheme;
     }
+
+    return { version: SETTINGS_VERSION, fontSize: fs, colorTheme };
   } catch {
     /* ignore */
   }
@@ -70,9 +89,15 @@ function applyFontSizeToDocument(fontSize: FontSizePreset) {
   document.documentElement.dataset.fontSize = fontSize;
 }
 
+function applyColorThemeToDocument(theme: ColorTheme) {
+  document.documentElement.dataset.theme = theme;
+}
+
 type UiSettingsContextValue = {
   fontSize: FontSizePreset;
   setFontSize: (v: FontSizePreset) => void;
+  colorTheme: ColorTheme;
+  setColorTheme: (v: ColorTheme) => void;
 };
 
 const UiSettingsContext = createContext<UiSettingsContextValue | null>(null);
@@ -82,6 +107,7 @@ export function UiSettingsProvider({ children }: { children: ReactNode }) {
     const s = readStored();
     if (typeof document !== "undefined") {
       applyFontSizeToDocument(s.fontSize);
+      applyColorThemeToDocument(s.colorTheme);
     }
     return s;
   });
@@ -90,10 +116,18 @@ export function UiSettingsProvider({ children }: { children: ReactNode }) {
     applyFontSizeToDocument(settings.fontSize);
   }, [settings.fontSize]);
 
+  useLayoutEffect(() => {
+    applyColorThemeToDocument(settings.colorTheme);
+  }, [settings.colorTheme]);
+
   useEffect(() => {
     localStorage.setItem(
       STORAGE_KEY,
-      JSON.stringify({ version: SETTINGS_VERSION, fontSize: settings.fontSize }),
+      JSON.stringify({
+        version: SETTINGS_VERSION,
+        fontSize: settings.fontSize,
+        colorTheme: settings.colorTheme,
+      }),
     );
   }, [settings]);
 
@@ -101,9 +135,18 @@ export function UiSettingsProvider({ children }: { children: ReactNode }) {
     setSettings((s) => ({ ...s, fontSize }));
   }, []);
 
+  const setColorTheme = useCallback((colorTheme: ColorTheme) => {
+    setSettings((s) => ({ ...s, colorTheme }));
+  }, []);
+
   const value = useMemo(
-    () => ({ fontSize: settings.fontSize, setFontSize }),
-    [settings.fontSize, setFontSize],
+    () => ({
+      fontSize: settings.fontSize,
+      setFontSize,
+      colorTheme: settings.colorTheme,
+      setColorTheme,
+    }),
+    [settings.fontSize, settings.colorTheme, setFontSize, setColorTheme],
   );
 
   return <UiSettingsContext.Provider value={value}>{children}</UiSettingsContext.Provider>;

web/frontend/src/index.css

@@ -2,12 +2,45 @@
 @tailwind components;
 @tailwind utilities;
 
-/*
- * Root rem scale via <html data-font-size="..."> (UiSettingsContext, index.html).
- * Keys: compact · small · standard · large · xlarge
- * CN: 小 · 较小 · 中 · 较大 · 大 — EN: Extra small · Small · Standard · Large · Extra large
- * `standard` = 中 (default). `small` = 较小 (not the old ambiguous "standard").
- */
+/* Themes: html[data-theme]; RGB triplets for Tailwind alpha (e.g. bg-panel/95). */
+:root,
+html[data-theme="blue"] {
+  --color-paper: 238 241 248;
+  --color-panel: 216 228 242;
+  --color-line: 168 184 208;
+  --color-mist: 71 85 105;
+  --color-ink: 15 23 42;
+  --color-clay: 99 102 241;
+}
+
+html[data-theme="cream"] {
+  --color-paper: 252 250 245;
+  --color-panel: 241 236 226;
+  --color-line: 214 204 188;
+  --color-mist: 87 83 78;
+  --color-ink: 15 23 42;
+  --color-clay: 120 113 108;
+}
+
+html[data-theme="gray"] {
+  --color-paper: 244 244 246;
+  --color-panel: 232 232 235;
+  --color-line: 186 190 198;
+  --color-mist: 82 82 91;
+  --color-ink: 15 23 42;
+  --color-clay: 82 82 91;
+}
+
+html[data-theme="lavender"] {
+  --color-paper: 247 246 252;
+  --color-panel: 234 231 245;
+  --color-line: 196 191 220;
+  --color-mist: 78 74 98;
+  --color-ink: 15 23 42;
+  --color-clay: 109 40 217;
+}
+
+/* Rem scale: html[data-font-size] from UiSettingsContext / index.html */
 html {
   font-size: 100%;
 }
@@ -39,7 +72,7 @@ body {
 }
 
 ::selection {
-  background-color: rgb(99 102 241 / 0.22);
+  background-color: rgb(var(--color-clay) / 0.22);
 }
 
 h1,

web/frontend/src/pages/Layout.tsx

@@ -2,7 +2,11 @@ import { useEffect, useState } from "react";
 import { Link, Navigate, Outlet, useLocation, useNavigate } from "react-router-dom";
 import { fetchMe, logout } from "../api";
 import { GenerationOptionsProvider } from "../context/GenerationOptionsContext";
-import { type FontSizePreset, useUiSettings } from "../context/UiSettingsContext";
+import {
+  type ColorTheme,
+  type FontSizePreset,
+  useUiSettings,
+} from "../context/UiSettingsContext";
 
 type NavItem = { to: string; title: string; sub: string };
 
@@ -39,6 +43,13 @@ function NavLink({ item, active }: { item: NavItem; active: boolean }) {
   );
 }
 
+const COLOR_THEME_OPTIONS: { value: ColorTheme; label: string }[] = [
+  { value: "blue", label: "淡蓝" },
+  { value: "cream", label: "淡米黄" },
+  { value: "gray", label: "浅灰" },
+  { value: "lavender", label: "淡紫灰" },
+];
+
 const FONT_SIZE_OPTIONS: { value: FontSizePreset; label: string; labelEn: string }[] = [
   { value: "compact", label: "小", labelEn: "Extra small" },
   { value: "small", label: "较小", labelEn: "Small" },
@@ -48,7 +59,7 @@ const FONT_SIZE_OPTIONS: { value: FontSizePreset; label: string; labelEn: string
 ];
 
 export function Layout() {
-  const { fontSize, setFontSize } = useUiSettings();
+  const { fontSize, setFontSize, colorTheme, setColorTheme } = useUiSettings();
   const [ok, setOk] = useState<boolean | null>(null);
   const loc = useLocation();
   const navigate = useNavigate();
@@ -114,6 +125,24 @@ export function Layout() {
         </div>
 
         <div className="mt-auto space-y-4">
+          <div>
+            <p className="text-sm font-semibold text-ink tracking-wide mb-2">界面配色</p>
+            <label htmlFor="ui-color-theme" className="sr-only">
+              界面配色
+            </label>
+            <select
+              id="ui-color-theme"
+              value={colorTheme}
+              onChange={(e) => setColorTheme(e.target.value as ColorTheme)}
+              className="w-full rounded-lg border border-slate-400/90 bg-white px-3 py-2.5 text-base text-ink shadow-sm focus:outline-none focus:ring-2 focus:ring-clay/40"
+            >
+              {COLOR_THEME_OPTIONS.map((o) => (
+                <option key={o.value} value={o.value}>
+                  {o.label}
+                </option>
+              ))}
+            </select>
+          </div>
           <div>
             <p className="text-sm font-semibold text-ink tracking-wide mb-2">字体大小</p>
             <label htmlFor="ui-font-size" className="sr-only">

web/frontend/src/pages/Login.tsx

@@ -42,8 +42,8 @@ export function Login() {
   }
 
   return (
-    <div className="min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-br from-paper via-indigo-50/35 to-violet-100/45">
-      <div className="w-full max-w-md rounded-2xl border border-line/80 bg-white/85 backdrop-blur-sm shadow-xl shadow-indigo-950/10 p-10 sm:p-12">
+    <div className="min-h-screen flex items-center justify-center p-6 sm:p-10 bg-gradient-to-br from-paper via-panel/30 to-paper">
+      <div className="w-full max-w-md rounded-2xl border border-line/80 bg-white/85 backdrop-blur-sm shadow-xl shadow-black/10 p-10 sm:p-12">
         <h1 className="font-display text-3xl font-semibold text-ink mb-2">AI创作台</h1>
         <p className="text-base text-mist mb-8">输入密码后即可使用</p>
         <form onSubmit={onSubmit} className="space-y-5">

web/frontend/tailwind.config.js

@@ -18,18 +18,13 @@ export default {
         serif: ['"Source Serif 4"', "Georgia", "serif"],
       },
       colors: {
-        /** Page background — cool misty blue-gray (replaces warm cream) */
-        paper: "#eef1f8",
-        /** Sidebar / secondary surfaces — slightly deeper vs paper for contrast */
-        panel: "#d8e4f2",
-        /** Borders — a step darker than before */
-        line: "#a8b8d0",
-        /** Primary text */
-        ink: "#0f172a",
-        /** Accents: focus rings, links, subtle highlights */
-        clay: "#6366f1",
-        /** Secondary / muted text — readable but clearly below ink */
-        mist: "#475569",
+        /** Theme tokens — RGB channels in index.css per html[data-theme] */
+        paper: "rgb(var(--color-paper) / <alpha-value>)",
+        panel: "rgb(var(--color-panel) / <alpha-value>)",
+        line: "rgb(var(--color-line) / <alpha-value>)",
+        ink: "rgb(var(--color-ink) / <alpha-value>)",
+        clay: "rgb(var(--color-clay) / <alpha-value>)",
+        mist: "rgb(var(--color-mist) / <alpha-value>)",
       },
     },
   },