Skip to content

Ai click #13

Description

@nguyenhomyduyen-9949

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:

http://127.0.0.1:8000

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

GET /api/health

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í

  1. User ở Free được tạo 2 video thử.
  2. 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.
  3. User bấm nâng cấp Premium/Provip.
  4. Frontend gọi /api/billing/create-checkout-session.
  5. Backend tạo Stripe Checkout Session.
  6. User thanh toán trên Stripe.
  7. Stripe gọi /api/billing/webhook.
  8. Backend cập nhật user plan trong SQLite database.
  9. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions