AI One-Click Studio — bản gần production
Đây là source hoàn tất bước cuối để biến prototype thành một SaaS AI thật:
- Frontend static:
index.html + config.js
- Backend FastAPI:
backend_fastapi/main.py
- Khóa gói Free/Premium/Provip ở backend
- Free: 2 video thử, 10 website draft, 0 voiceover audio, 1 CRM
- Premium: 10 USD/tháng hoặc 96 USD/năm
- Provip: 100 USD/tháng hoặc 960 USD/năm
- Stripe Checkout + Stripe webhook để mở gói trả phí
- OpenAI để sinh website/video/voiceover/CRM
- ElevenLabs để xuất voiceover MP3 nếu có API key
- Runway để gửi job tạo video thật nếu có API key
- Config deploy sẵn cho Vercel, Netlify, Render, Railway
Lưu ý: source đã sẵn sàng để deploy, nhưng để chạy thành sản phẩm thật bạn cần tự thêm API key thật trong hosting: OpenAI, Stripe, ElevenLabs, Runway.
Cấu trúc thư mục
ai-one-click-studio/
├── index.html
├── config.js
├── vercel.json
├── netlify.toml
├── railway.json
├── render.yaml
├── DEPLOY_GUIDE.md
├── backend_fastapi/
│ ├── main.py
│ ├── requirements.txt
│ ├── .env.example
│ └── Procfile
└── workflows/
└── n8n_workflow_sample.json
Chạy local
1. Backend
cd backend_fastapi
python -m venv .venv
source .venv/bin/activate # Windows: .venv\Scripts\activate
pip install -r requirements.txt
cp .env.example .env
uvicorn main:app --reload
Backend local sẽ chạy tại:
2. Frontend
Mở file config.js và sửa:
window.AI_STUDIO_API_URL = "http://127.0.0.1:8000";
Sau đó mở index.html bằng trình duyệt.
Biến môi trường backend
Tạo các biến sau trên Render/Railway hoặc trong file .env local:
FRONTEND_URL=https://your-frontend.vercel.app
CORS_ORIGINS=https://your-frontend.vercel.app,http://localhost:5500
DATABASE_PATH=./ai_studio.sqlite3
OPENAI_API_KEY=sk-your-openai-key
OPENAI_MODEL=gpt-5.5-mini
STRIPE_SECRET_KEY=sk_live_or_test_xxx
STRIPE_WEBHOOK_SECRET=whsec_xxx
STRIPE_PRICE_PREMIUM_MONTHLY=price_xxx
STRIPE_PRICE_PREMIUM_YEARLY=price_xxx
STRIPE_PRICE_PROVIP_MONTHLY=price_xxx
STRIPE_PRICE_PROVIP_YEARLY=price_xxx
ELEVENLABS_API_KEY=your-elevenlabs-key
ELEVENLABS_VOICE_ID=21m00Tcm4TlvDq8ikWAM
ELEVENLABS_MODEL_ID=eleven_multilingual_v2
RUNWAY_API_KEY=your-runway-key
RUNWAY_MODEL=gen4.5
API chính
Health check
Xem gói và quota user
GET /api/me
X-User-Email: user@example.com
Tạo Stripe Checkout
POST /api/billing/create-checkout-session
Content-Type: application/json
{
"email": "user@example.com",
"plan": "premium",
"billing_cycle": "monthly"
}
Webhook Stripe
POST /api/billing/webhook
Sau khi Stripe gửi checkout.session.completed, backend sẽ cập nhật user sang Premium/Provip.
Tạo toàn bộ bằng AI
POST /api/generate
X-User-Email: user@example.com
Content-Type: application/json
{
"brand": "Misa AI Studio",
"industry": "Video AI, website, CRM",
"audience": "Chủ shop và creator",
"idea": "Tạo chiến dịch bán hàng bằng AI",
"create_real_voice_audio": false,
"create_real_video_task": false
}
Luồng khóa gói trả phí
- User ở Free được tạo 2 video thử.
- Khi hết quota,
/api/generate trả lỗi 402 Payment Required hoặc trả danh sách tính năng bị khóa.
- User bấm nâng cấp Premium/Provip.
- Frontend gọi
/api/billing/create-checkout-session.
- Backend tạo Stripe Checkout Session.
- User thanh toán trên Stripe.
- Stripe gọi
/api/billing/webhook.
- Backend cập nhật user plan trong SQLite database.
- User quay lại web và bấm “Làm mới quota”.
Điểm quan trọng: không tin dữ liệu gói từ frontend. Frontend chỉ hiển thị. Backend mới là nơi kiểm tra và trừ quota.
Deploy nhanh
Xem file DEPLOY_GUIDE.md để có hướng dẫn chi tiết cho:
- Render backend + Vercel frontend
- Railway backend + Netlify frontend
- Cấu hình Stripe webhook
- Cấu hình API key
- Checklist trước khi bán thật
Nâng cấp nên làm trước khi bán đại trà
- Thêm đăng nhập thật bằng Supabase Auth, Firebase Auth hoặc Auth0.
- Chuyển SQLite sang PostgreSQL/Supabase khi có khách thật.
- Thêm bảng
generated_outputs để lưu lịch sử kết quả.
- Thêm admin dashboard để xem doanh thu, số lượt tạo, user trả phí.
- Thêm credit add-on để bán thêm video/voice khi khách hết quota.
- Thêm watermark cho Free, bỏ watermark cho Premium/Provip.
AI One-Click Studio — bản gần production
Đây là source hoàn tất bước cuối để biến prototype thành một SaaS AI thật:
index.html+config.jsbackend_fastapi/main.pyCấu trúc thư mục
Chạy local
1. Backend
Backend local sẽ chạy tại:
2. Frontend
Mở file
config.jsvà sửa:Sau đó mở
index.htmlbằng trình duyệt.Biến môi trường backend
Tạo các biến sau trên Render/Railway hoặc trong file
.envlocal:API chính
Health check
Xem gói và quota user
Tạo Stripe Checkout
Webhook Stripe
Sau khi Stripe gửi
checkout.session.completed, backend sẽ cập nhật user sang Premium/Provip.Tạo toàn bộ bằng AI
Luồng khóa gói trả phí
/api/generatetrả lỗi402 Payment Requiredhoặc trả danh sách tính năng bị khóa./api/billing/create-checkout-session./api/billing/webhook.Điểm quan trọng: không tin dữ liệu gói từ frontend. Frontend chỉ hiển thị. Backend mới là nơi kiểm tra và trừ quota.
Deploy nhanh
Xem file
DEPLOY_GUIDE.mdđể có hướng dẫn chi tiết cho:Nâng cấp nên làm trước khi bán đại trà
generated_outputsđể lưu lịch sử kết quả.