109 lines
5.0 KiB
Markdown
109 lines
5.0 KiB
Markdown
# 🚀 MONAI MLOps Console Frontend (DDO Console)
|
|
|
|
Frontend Console สำหรับการจัดการ **AI Model Registry**, **MLOps Pipeline**, และการเรียกใช้งาน **AI Inference Service**
|
|
รองรับงาน **Medical Imaging** โดยเชื่อมต่อกับ Backend หลักที่เป็น **Django DRF** (Lightweight Gateway/Security)
|
|
และระบบ AI inference บน **FastAPI/MONAI**
|
|
|
|
---
|
|
|
|
## 💡 สถาปัตยกรรมและเทคโนโลยีหลัก
|
|
|
|
| องค์ประกอบ | เทคโนโลยี | บทบาท / เหตุผล |
|
|
| :--- |:-----------------------------------------------| :--- |
|
|
| **Framework** | 🧩 **React (Vite)** | ความเร็วสูง, Hot Reload, โครงสร้าง Component-Based |
|
|
| **Styling** | 🎨 **Tailwind CSS + DaisyUI** | Utility-first CSS พร้อมชุด Component ที่สวยงาม |
|
|
| **Server State / Data Fetching** | ⚙️ **TanStack Query (React Query)** | จัดการ Cache, Loading, Error, และ Data Synchronization |
|
|
| **Form Handling** | 🧠 **React Hook Form + Yup** | Validation ที่มีประสิทธิภาพ, ลดการ re-render |
|
|
| **Security Flow** | 🔐 **JWT + Axios Interceptor + Refresh Token** | ใช้ `axiosClient` จัดการ Token, Refresh Token, และ Force Logout |
|
|
|
|
---
|
|
|
|
## 🧱 โครงสร้างโปรเจกต์ (Clean Architecture)
|
|
|
|
โปรเจกต์นี้ใช้แนวทาง **Clean Architecture + Modularization**
|
|
เพื่อให้ดูแลและขยายระบบได้ง่ายในระยะยาว
|
|
|
|
| โฟลเดอร์ | หน้าที่ |
|
|
| :--- | :--- |
|
|
| `src/routes/` | กำหนด Routing เช่น `AuthRoutes`, `PrivateRoutes`, และ `ProtectedRoute` |
|
|
| `src/services/` | เก็บ Hooks สำหรับเรียก API (`useModelList`, `useRunInferenceMutation`) และ `axiosClient` |
|
|
| `src/schemas/` | เก็บ **Yup Schemas** สำหรับตรวจสอบข้อมูลจากฟอร์ม |
|
|
| `src/features/` | เก็บ Redux Slice เช่น `authSlice` สำหรับจัดการ state ระดับ global |
|
|
| `src/pages/` | เก็บ Component หลักของแต่ละหน้า เช่น Dashboard, Model Registry |
|
|
| `src/components/` | Component ที่ใช้ซ้ำได้ เช่น Modal, Table, Input (RHF Adapter) |
|
|
|
|
---
|
|
|
|
## 🧩 Role-Based Access Control (RBAC)
|
|
|
|
ระบบมีการควบคุมสิทธิ์ทั้งฝั่ง Backend และ Frontend:
|
|
|
|
- **Backend (Django DRF):**
|
|
ใช้ Custom Permission Class (`IsAdminOrManager`) เพื่อจำกัดการเข้าถึง API
|
|
- **Frontend (React):**
|
|
ใช้ Role จาก JWT เพื่อกรองเมนูใน `sidebarRoutes.jsx`
|
|
และควบคุมการเข้าถึงหน้าใน `MainLayout.jsx`
|
|
|
|
| Role | สิทธิ์ |
|
|
| :--- | :--- |
|
|
| `admin` | เข้าถึงทุกเมนู และสามารถจัดการผู้ใช้งานได้ |
|
|
| `manager` | เข้าถึงหน้า Model Registry และ Pipeline Management |
|
|
| `viewer` | อ่านข้อมูลเท่านั้น |
|
|
|
|
---
|
|
|
|
## ⚙️ การติดตั้งและเริ่มต้นใช้งาน
|
|
|
|
### 🔧 Prerequisites
|
|
|
|
- Node.js `v18+`
|
|
- npm หรือ yarn
|
|
|
|
---
|
|
|
|
### 🧰 1. ติดตั้ง Dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
### ⚙️ 2. ตั้งค่า Environment Variables
|
|
|
|
สร้างไฟล์ .env.local ใน Root Directory
|
|
และกำหนด Base URL ของ Django DRF API Gateway:
|
|
|
|
.env.local
|
|
|
|
VITE_API_BASE_URL=http://localhost:8000
|
|
|
|
หรือ URL จริงของ API Gateway
|
|
|
|
### 🧠 3. รัน Development Server
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
🌐 แอปจะรันที่ http://localhost:5173
|
|
|
|
และจะ Redirect ไปที่หน้า Login ทันที เพื่อบังคับยืนยันตัวตนก่อนเข้า Console
|
|
|
|
## 🧩 Best Practices & Design Principles
|
|
|
|
ใช้ Atomic Design Pattern สำหรับการออกแบบ Component
|
|
|
|
ใช้ TanStack Query DevTools เพื่อ Debug API Cache ได้ง่าย
|
|
|
|
รองรับการเพิ่ม Theme (ผ่าน DaisyUI Theme Config)
|
|
|
|
แยก Business Logic ออกจาก UI เพื่อให้ทดสอบได้ง่าย
|
|
|
|
## 📘 License
|
|
|
|
Distributed under the MIT License.
|
|
See LICENSE for more information.
|
|
|
|
## 👨💻 Authors
|
|
|
|
FlookSP — DDD Project
|
|
|
|
“Building Trustworthy AI Infrastructure for Medical Data Operations.” |