เพิ่ม Model Registry

2025-11-09 16:53:59 +07:00 · 2025-11-09 16:53:59 +07:00 · bfb0d5801a
commit bfb0d5801a
parent 119cf91905
1 changed files with 102 additions and 9 deletions
--- a/web/README.md
+++ b/web/README.md
@ -1,16 +1,109 @@
-# React + Vite
+# 🚀 MONAI MLOps Console Frontend (DDO Console)

-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Frontend Console สำหรับการจัดการ **AI Model Registry**, **MLOps Pipeline**, และการเรียกใช้งาน **AI Inference Service**  
+รองรับงาน **Medical Imaging** โดยเชื่อมต่อกับ Backend หลักที่เป็น **Django DRF** (Lightweight Gateway/Security)  
+และระบบ AI inference บน **FastAPI/MONAI**

-Currently, two official plugins are available:
+---

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## 💡 สถาปัตยกรรมและเทคโนโลยีหลัก

-## React Compiler
+| องค์ประกอบ | เทคโนโลยี | บทบาท / เหตุผล |
+| :--- | :--- | :--- |
+| **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 |

-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+---

-## Expanding the ESLint configuration
+## 🧱 โครงสร้างโปรเจกต์ (Clean Architecture)

-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+โปรเจกต์นี้ใช้แนวทาง **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.”