一张脸，一整套身份。MeMix 用 AI 一次生成 4–12 张风格统一的头像，支持多角色独立生成，并可按平台一键导出。
- 多角色生成 — 描述多个角色（如"数据分析师、产品经理、工程师"），每个角色独立生成一张头像
- 12 种画风 — 扁平、3D、水彩、像素、二次元、赛博朋克等，可选也可自由描述
- 6 种色板 — 暖色调、冷色调、黑白灰、马卡龙、鲜艳、大地
- 5 种场景 — 职场、休闲、节日、户外、极简
- 14 平台预设 — 微信、QQ、飞书、钉钉、Slack、Discord、Telegram、WhatsApp、LINE、微博、抖音、小红书、Twitter/X、Instagram 一键打包导出
- 积分制 — 注册即送 30 积分，每张头像消耗 1 积分
- Google 登录 — 支持通过 Google OAuth 安全登录，并在回调后自动进入创作页
- 黑白电影感界面 — 深黑背景、银灰文字与高对比操作按钮，聚焦头像创作结果
用户输入: "数据分析师、产品经理、工程师、设计师的头像"
│
▼
┌─────────────────┐
│ 语言模型 (LLM) │ 解析出 4 个角色描述
│ deepseek-v4-flash │
└─────────────────┘
│
▼
┌─────────────────┐
│ 图像模型 ×4 │ 每个角色独立生成一张头像
│ doubao-seedream │
└─────────────────┘
│
▼
4 张独立头像，统一画风和色调
| 层级 | 选型 |
|---|---|
| 框架 | TanStack Start (React 19 + SSR) |
| 路由 | TanStack Router (文件路由) |
| 构建 | Vite 8 + Nitro |
| 样式 | Tailwind CSS 4 + tw-animate-css |
| UI 组件 | Radix UI + shadcn/ui |
| 状态/请求 | TanStack Query |
| 表单 | React Hook Form + Zod |
| 后端/Auth | Supabase (Auth + Database + Storage) |
| AI 服务 | 火山方舟 (deepseek-v4-flash + doubao-seedream-5.0-lite) |
| 动画 | Motion |
| 导出 | JSZip (客户端打包下载) |
public/
├── examples/ # 首页头像示意图
└── memix-mark.svg # 浏览器星芒图标
src/
├── components/ # 共享组件（Header、品牌字标、shadcn/ui 组件库）
├── hooks/ # 自定义 Hooks
├── integrations/ # Supabase 集成 (client、auth-middleware、OAuth)
├── lib/
│ ├── ai-gateway.server.ts # 火山方舟 API (仅服务端)
│ ├── generation.functions.ts # 生成流程 Server Functions
│ ├── presets.ts # 画风、色板、场景、平台预设
│ └── export.ts # 导出/打包逻辑
├── routes/
│ ├── index.tsx # 首页 (Landing)
│ ├── auth.tsx # 登录/注册
│ └── _authenticated/
│ ├── create.tsx # 头像套组生成器 (核心页面)
│ └── credits.tsx # 积分管理
└── styles.css
- Node.js 18+
- npm
npm install在项目根目录创建 .env 文件：
# Supabase
SUPABASE_URL="https://your-project.supabase.co"
SUPABASE_PUBLISHABLE_KEY="sb_publishable_xxx"
SUPABASE_SERVICE_ROLE_KEY="sb_secret_xxx"
VITE_SUPABASE_URL="https://your-project.supabase.co"
VITE_SUPABASE_PUBLISHABLE_KEY="sb_publishable_xxx"
VITE_SUPABASE_PROJECT_ID="your_project_id"
# 火山方舟 (Volcengine Ark)
ARK_API_KEY="your_ark_api_key"
ARK_CHAT_MODEL="deepseek-v4-flash"
ARK_IMAGE_MODEL="doubao-seedream-5.0-lite"全站语音助手使用 ElevenLabs Conversational AI 官方网页组件。创建并发布 Agent 后，将其公开 Agent ID 填入 VITE_ELEVENLABS_AGENT_ID；未配置时，组件不会加载。
为保护 Agent，建议在 ElevenLabs Agent 的 Security 设置中为本地与生产域名添加 Allowlist。公开网页组件要求 Agent 为公开且不启用认证；如需受限访问，应改用服务端签名 URL 方案。
npm run devnpm run build| 服务 | 用途 | 费用 |
|---|---|---|
| Supabase | 数据库 + 用户认证 + 文件存储 | 免费 (Free tier) |
| 火山方舟 | AI 文本理解 + 图像生成 | ¥9.9/月起 (Small 套餐) |
| Railway | 部署 | $5/月起 |
- 创建项目，拿到 URL 和 Keys (Publishable + Secret)
- Authentication → Providers → 开启 Email（关闭 Confirm email）
- Storage → 创建
avatarsbucket (private) - SQL Editor → 运行数据库迁移脚本（创建表、RLS 策略、积分函数）
Google 登录使用 Supabase OAuth。Google OAuth Client Secret 仅保存在 Supabase 控制台，不应写入 .env 或提交到代码库。
- 在 Google Cloud Console 创建「OAuth 2.0 Client ID」，应用类型选择「Web application」。
- 在「Authorized redirect URIs」中添加 Supabase 提供的回调地址：
https://<project-ref>.supabase.co/auth/v1/callback。 - 在 Supabase 控制台的 Authentication → Providers → Google 中启用 Google，并填入 Google Client ID 和 Client Secret。
- 在 Authentication → URL Configuration 中设置 Site URL，并将本地和生产环境的回调页加入 Redirect URLs，例如
http://localhost:3000/auth与https://<your-domain>/auth。
应用会使用 PKCE 流程完成 OAuth 回调；用户登录成功后会回到 /auth，并自动跳转至创作页或原先请求的受保护页面。
- 注册火山引擎账号，订阅 Agent Plan (Small 套餐 ¥9.9/月)
- 语言模型选
deepseek-v4-flash - 视觉模型选
doubao-seedream-5.0-lite - 拿到 API Key，填入
.env
项目通过 Nitro 的 node-server preset 生成 Railway 可直接运行的 Node 服务，仓库以 npm 和 package-lock.json 作为唯一包管理基准：
- 代码推到 GitHub
- Railway 控制台连接 GitHub 仓库
- 配置环境变量（与
.env相同） - Railway 执行
npm ci、npm run build和npm start - 服务从 Railway 注入的
PORT启动
npm run build 会生成 .output/server/index.mjs，npm start 使用该入口启动生产服务。无需在 Railway 中维护临时构建补丁或自定义启动脚本。
如需其他部署目标，请在 vite.config.ts 中调整 Nitro preset，并同步修改生产启动命令。
MeMix Studio 将以开源项目形式在 GitHub 维护。欢迎提交 Issue 反馈问题或提出功能建议，也欢迎通过 Pull Request 参与改进。公开仓库创建完成后，请在此处补充仓库链接。
提交前请确保：
- 不包含 API Key、Supabase Secret 或其他敏感信息；
- 完成
npm run build； - 改动与现有代码风格保持一致。
本项目采用 MIT License 开源。