API Call Demo

1. Mở đầu — Tổng quan kiến trúc 0:00 → 2:30

• Giới thiệu mục tiêu: Hệ thống gọi API AI Model đa nhà cung cấp (Gemini, OpenAI, OpenRouter, vLLM...) với input validation, schema validation, resilience, và observability.
• Trình bày flow: UI → Provider Selection → Input Validation → API Proxy → Model AI → Schema Validation → Response.
• Nêu problem statements: Input sai, Output sai cấu trúc, Timeout, Provider down, Không observability, Provider lock-in.

---

2. Multi-Provider Support — Chọn bất kỳ AI provider 2:30 → 5:00

• Radio button API Format: Chọn Gemini hoặc OpenAI (OpenRouter, OpenAI, Azure, vLLM, Ollama...).
• Thử với Gemini: Chọn Gemini → nhập Google AI Studio Base URL + API Key → Send.
• Chuyển sang OpenRouter: Chọn OpenAI → nhập Base URL + API key → Send.
• Giải thích: Backend tự adapt request format (Gemini: generateContent, OpenAI: chat/completions) dựa trên radio selection.

---

3. System Prompt & Schema Hint — Tùy chỉnh behavior 5:00 → 7:00

• Xem Request Preview: Click "Xem request gửi đi" → thấy system message + user message + schema hint.
• Chỉnh System Prompt: Thay đổi trong sidebar → preview cập nhật real-time → Send → model trả lời theo prompt mới.
• Xoá Schema Hint: Xoá nội dung trong textarea Schema Hint → Send → model chat tự do thay vì trả JSON structured.
• Thử ngược lại: Thêm schema hint mới (ví dụ: trả về CSV) → model chuyển format theo yêu cầu.

---

4. Input Validation — Chặn dữ liệu sai 7:00 → 8:30

• Thử nhập prompt rỗng → nhấn Send → toast lỗi ngay, không gọi API.
• Thử nhập prompt quá ngắn (1-2 ký tự) → bị chặn "Prompt quá ngắn".
• Thử nhập Base URL sai format → Pydantic validator chặn.
• Thử nhập API key rỗng → bị chặn trước khi gửi.

---

5. Schema Output Validation — Xử lý model sai cấu trúc 8:30 → 10:30

• Nhấn Bad Schema → model trả {title, score, confidence: 1.5}.
• Hệ thống phát hiện: thiếu summary, entities, sentiment; confidence vượt [0,1].
• Toggle Parsed/Raw: Xem JSON đã parse hoặc raw text model trả về để debug.
• Log ghi nhận: status: SCHEMA_ERROR kèm raw_text để truy vết.

---

6. Resilience — Timeout & Provider Failure 10:30 → 13:00

• Timeout 3s / 8s → lỗi REQUEST_TIMEOUT (408), hệ thống tự hủy, không treo luồng.
• Provider 503 → lỗi PROVIDER_UNAVAILABLE ngay lập tức.
• Random Result → 70% success, 30% schema_error, chứng minh error path.

---

7. Observability & Debugging 13:00 → 15:30

• Observability Log: request_id, execution_id, latency_ms, model_name, prompt_version, status.
• Prompt version badge: Load từ prompts.yaml, cập nhật khi reload service.
• Raw Response debugging: Khi model trả response bất thường (SSE artifacts, text + JSON), toggle Raw xem chi tiết.
• Request Preview: Xem chính xác system prompt + user message + schema hint trước khi gửi.

---

8. localStorage & UX Features 15:30 → 16:30

• Tự lưu config: Provider, Base URL, Model, API Key, System Prompt, Schema Hint lưu vào localStorage.
• Restore tự động: Reload trang → tất cả giá trị được khôi phục, không cần điền lại.
• Keyboard shortcut: Ctrl+Enter để Send, Escape để đóng modal.

---

9. Tổng kết & Q&A 16:30 → 20:00

• Recap 6 cơ chế: Multi-provider support, Input Validation, Schema Validation, Resilience, Observability, Runtime customization.
• Điểm mạnh: Gọi đa provider, tùy chỉnh system prompt/schema hint runtime, debug raw response, full traceability.
• Mở rộng: Rate limiting, retry with exponential backoff, multi-model fallback, streaming support.
• Mời Q&A: "Có câu hỏi nào về cách triển khai hoặc mở rộng hệ thống không?"