---
name: one-click-pipeline
description: Biến bất kỳ workflow thủ công nào thành 1 hệ thống hoàn chỉnh có CẢ API lẫn APP UI. User mô tả thao tác → tool tự động tạo API endpoint (cho người khác gọi) + App 1 nút bấm (cho chính mình dùng). Kích hoạt khi user muốn "bấm 1 nút là xong" hoặc "tạo API cho flow này".
---

# One-Click Pipeline — Từ ý tưởng đến sản phẩm

Biến MỌI workflow thủ công thành hệ thống có **2 đầu ra đồng thời**:
1. **API** — endpoint để n8n, bot, app khác gọi vào
2. **APP** — giao diện bấm 1 nút là thực thi toàn bộ flow

## Ý tưởng cốt lõi

```
User mô tả thao tác thủ công
  → Ghi lại / viết automation script
  → Đóng gói thành WorkflowEngine
  → Mở ra 2 cổng:
      ├── FastAPI endpoint (cho hệ thống khác gọi)
      └── Streamlit/Gradio UI (cho chính mình bấm nút)
```

## Quy trình

1. **Thu thập ý tưởng:** User mô tả flow (VD: "upload video TikTok với caption và hashtag")
2. **Xác định các bước:** Liệt kê từng bước cụ thể (đăng nhập → điều hướng → upload → điền → gửi)
3. **Viết automation:** Dùng browser-recorder hoặc tự viết Playwright script
4. **Đóng gói thành WorkflowEngine:** 1 class chung, gọi 1 hàm là chạy hết
5. **Tạo API server:** FastAPI endpoints, Pydantic models, background tasks
6. **Tạo APP UI:** Streamlit app với form nhập liệu + nút Execute + thanh tiến trình + log
7. **Chạy đồng thời:** `uvicorn` cho API + `streamlit` cho UI, dùng chung 1 engine

## Kiến trúc

```
project/
  engine/
    workflow.py        → Class WorkflowEngine (logic chính)
    steps/             → Từng bước riêng biệt (đăng nhập, upload, điền...)
  api/
    server.py          → FastAPI app (mở engine qua REST)
    models.py          → Pydantic models cho request/response
  app/
    ui.py              → Streamlit UI (bấm nút gọi engine)
  config.py            → Tải .env, cài đặt
  main.py              → Chạy cả API + UI
  .env                 → Thông tin đăng nhập
  requirements.txt
```

## Các mẫu chính

### Mẫu 1: WorkflowEngine — Logic trung tâm
Xem code: `references/workflow-engine.py`
- 1 class duy nhất chứa toàn bộ logic
- Cả API lẫn UI đều gọi class này
- Hỗ trợ: chạy đồng bộ, chạy nền, callback tiến trình

### Mẫu 2: API Server — Cho người khác gọi
Xem code: `references/api-server.py`
- FastAPI + background tasks (workflow chạy lâu)
- POST /api/execute — kích hoạt workflow
- GET /api/status/{job_id} — kiểm tra trạng thái
- GET /api/jobs — liệt kê các job đã chạy
- Xác thực API key

### Mẫu 3: APP UI — Cho chính mình bấm nút
Xem code: `references/streamlit-ui.py`
- Form nhập liệu (video, title, caption, hashtags...)
- Nút "Execute" — bấm là chạy
- Thanh tiến trình thời gian thực
- Log đầu ra từng bước
- Lịch sử các lần chạy

### Mẫu 4: Chạy đồng thời API + UI
Xem code: `references/main-runner.py`
- 1 lệnh chạy cả 2: `python main.py`
- API trên port 8000, UI trên port 8501

## Quy tắc

- WorkflowEngine PHẢI là 1 class độc lập, không phụ thuộc vào API hay UI
- API và UI chỉ là "vỏ bọc" gọi vào engine
- LUÔN có job_id để theo dõi trạng thái
- LUÔN có progress callback để UI hiển thị %
- LUÔN ghi log từng bước với timestamp
- LUÔN lưu kết quả (thành công/thất bại) vào file/DB
- Background tasks cho workflow lâu (>30s)
- API: trả về job_id ngay, client poll trạng thái sau
- UI: hiển thị thanh tiến trình thời gian thực

## Khi nào dùng skill này

- User nói "tạo API cho flow này"
- User nói "bấm 1 nút là xong"
- User nói "tự động upload bài đăng"
- User nói "làm app để [bất kỳ thao tác thủ công nào]"
- User mô tả 1 quy trình nhiều bước muốn tự động hóa

## Kết hợp với skills khác

| Cần gì | Kết hợp |
|--------|---------|
| Ghi lại thao tác | `browser-recorder` → tạo các steps |
| Anti-detect | `stealth-manager` → trong engine |
| Xử lý video trước | `video-processor` → thêm step vào pipeline |
| Upload video | `video-uploader` → step upload |
| Lập lịch chạy | `task-scheduler` → cron kích hoạt engine |