🚀 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 (Bearer/Interceptor)	ใช้ `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

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

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.”

4.8 KiB Raw Blame History