Hugging Face's logo

Spaces:
chrisnguyenx
/
ResNet50-DR-Space
Running

App Files Community
ResNet50-DR-Space / DOCUMENTATION.html
chrisnguyenx's picture
chrisnguyenx
Upload DOCUMENTATION.html with huggingface_hub
f3287e0 verified
Raw
History Blame Contribute Delete
29.7 kB
<!DOCTYPE html>
<html lang="vi">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Mô tả Mô hình AI ResNet-50 & JSON Output API</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet">
 <style>
 :root {
 --bg-primary: #0f172a;
 --bg-secondary: #1e293b;
 --bg-card: #1e293b;
 --bg-code: #090d16;
 --accent-cyan: #38bdf8;
 --accent-blue: #3b82f6;
 --accent-purple: #8b5cf6;
 --accent-green: #10b981;
 --accent-orange: #f59e0b;
 --accent-red: #ef4444;
 --text-main: #f8fafc;
 --text-muted: #94a3b8;
 --border-color: #334155;
 --glass-border: rgba(255, 255, 255, 0.08);
 --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
 }
 * {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 }
 body {
 font-family: 'Inter', system-ui, -apple-system, sans-serif;
 background-color: var(--bg-primary);
 color: var(--text-main);
 line-height: 1.6;
 display: flex;
 min-height: 100vh;
 }
 /* Sidebar Table of Contents */
 .sidebar {
 width: 280px;
 background: var(--bg-secondary);
 border-right: 1px solid var(--border-color);
 padding: 2rem 1.25rem;
 position: fixed;
 top: 0;
 bottom: 0;
 left: 0;
 overflow-y: auto;
 z-index: 100;
 }
 .sidebar .brand {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 font-size: 1.1rem;
 font-weight: 700;
 color: var(--accent-cyan);
 margin-bottom: 2rem;
 padding-bottom: 1rem;
 border-bottom: 1px solid var(--border-color);
 }
 .sidebar .brand svg {
 width: 28px;
 height: 28px;
 fill: var(--accent-cyan);
 }
 .nav-group-title {
 font-size: 0.75rem;
 text-transform: uppercase;
 letter-spacing: 0.08em;
 color: var(--text-muted);
 margin-top: 1.5rem;
 margin-bottom: 0.5rem;
 font-weight: 700;
 }
 .nav-links {
 list-style: none;
 }
 .nav-links li a {
 display: block;
 color: var(--text-muted);
 text-decoration: none;
 padding: 0.45rem 0.75rem;
 border-radius: 6px;
 font-size: 0.875rem;
 transition: all 0.2s ease;
 }
 .nav-links li a:hover, .nav-links li a.active {
 color: #fff;
 background: rgba(56, 189, 248, 0.12);
 color: var(--accent-cyan);
 font-weight: 500;
 }
 /* Main Content */
 .main-wrapper {
 margin-left: 280px;
 flex: 1;
 padding: 2.5rem 3.5rem;
 max-width: 1200px;
 }
 .header-banner {
 background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.15));
 border: 1px solid var(--glass-border);
 border-radius: 16px;
 padding: 2.5rem;
 margin-bottom: 3rem;
 backdrop-filter: blur(10px);
 box-shadow: var(--shadow-lg);
 }
 .header-banner h1 {
 font-size: 2.25rem;
 font-weight: 800;
 background: linear-gradient(90deg, #60a5fa, #a78bfa);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
 margin-bottom: 0.75rem;
 }
 .header-banner p {
 color: var(--text-muted);
 font-size: 1.05rem;
 max-width: 800px;
 }
 .tag-container {
 display: flex;
 gap: 0.5rem;
 flex-wrap: wrap;
 margin-top: 1.25rem;
 }
 .tag {
 background: rgba(255, 255, 255, 0.06);
 border: 1px solid var(--border-color);
 color: var(--accent-cyan);
 padding: 0.25rem 0.75rem;
 border-radius: 20px;
 font-size: 0.8rem;
 font-weight: 500;
 }
 section {
 margin-bottom: 3.5rem;
 scroll-margin-top: 2rem;
 }
 h2 {
 font-size: 1.5rem;
 font-weight: 700;
 color: #fff;
 margin-bottom: 1.25rem;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding-bottom: 0.5rem;
 border-bottom: 1px solid var(--border-color);
 }
 h2 svg {
 width: 24px;
 height: 24px;
 fill: var(--accent-cyan);
 }
 h3 {
 font-size: 1.15rem;
 font-weight: 600;
 color: var(--accent-cyan);
 margin: 1.5rem 0 0.75rem 0;
 }
 p {
 color: #cbd5e1;
 margin-bottom: 1rem;
 font-size: 0.95rem;
 }
 /* Cards Grid */
 .grid-2 {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
 gap: 1.5rem;
 margin-top: 1rem;
 }
 .card {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: 12px;
 padding: 1.5rem;
 box-shadow: var(--shadow-lg);
 transition: transform 0.2s ease, border-color 0.2s ease;
 }
 .card:hover {
 border-color: var(--accent-cyan);
 transform: translateY(-2px);
 }
 .card-title {
 font-weight: 700;
 font-size: 1.05rem;
 color: #fff;
 margin-bottom: 0.5rem;
 }
 /* Process Flow Diagram */
 .flow-container {
 background: var(--bg-card);
 border: 1px solid var(--border-color);
 border-radius: 12px;
 padding: 1.75rem;
 margin: 1.5rem 0;
 }
 .flow-step {
 display: flex;
 align-items: flex-start;
 gap: 1.25rem;
 position: relative;
 padding-bottom: 1.75rem;
 }
 .flow-step:last-child {
 padding-bottom: 0;
 }
 .flow-step:not(:last-child)::after {
 content: '';
 position: absolute;
 left: 20px;
 top: 40px;
 bottom: 0;
 width: 2px;
 background: var(--border-color);
 }
 .step-number {
 width: 42px;
 height: 42px;
 background: linear-gradient(135deg, var(--accent-blue), var(--accent-purple));
 color: #fff;
 font-weight: 700;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
 }
 .step-content h4 {
 color: #fff;
 font-size: 1.05rem;
 font-weight: 600;
 margin-bottom: 0.25rem;
 }
 .step-content p {
 color: var(--text-muted);
 font-size: 0.9rem;
 margin-bottom: 0;
 }
 /* Tables */
 table {
 width: 100%;
 border-collapse: collapse;
 margin: 1.25rem 0;
 background: var(--bg-card);
 border-radius: 10px;
 overflow: hidden;
 border: 1px solid var(--border-color);
 }
 th, td {
 padding: 0.85rem 1.1rem;
 text-align: left;
 font-size: 0.9rem;
 }
 th {
 background: rgba(15, 23, 42, 0.7);
 color: var(--accent-cyan);
 font-weight: 600;
 border-bottom: 1px solid var(--border-color);
 }
 td {
 border-bottom: 1px solid var(--border-color);
 color: #e2e8f0;
 }
 tr:last-child td {
 border-bottom: none;
 }
 tr:hover td {
 background: rgba(255, 255, 255, 0.02);
 }
 /* Badges */
 .badge {
 display: inline-block;
 padding: 0.2rem 0.65rem;
 border-radius: 6px;
 font-size: 0.8rem;
 font-weight: 600;
 }
 .badge-0 { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid #10b981; }
 .badge-1 { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid #3b82f6; }
 .badge-2 { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid #f59e0b; }
 .badge-3 { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid #ef4444; }
 .badge-4 { background: rgba(139, 92, 246, 0.2); color: #c084fc; border: 1px solid #8b5cf6; }
 /* Code Blocks */
 .code-container {
 position: relative;
 background: var(--bg-code);
 border: 1px solid var(--border-color);
 border-radius: 10px;
 margin: 1.25rem 0;
 overflow: hidden;
 }
 .code-header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: rgba(255, 255, 255, 0.03);
 padding: 0.6rem 1rem;
 border-bottom: 1px solid var(--border-color);
 font-size: 0.8rem;
 color: var(--text-muted);
 font-weight: 600;
 }
 .copy-btn {
 background: rgba(255, 255, 255, 0.1);
 border: none;
 color: #fff;
 padding: 0.25rem 0.65rem;
 border-radius: 4px;
 font-size: 0.75rem;
 cursor: pointer;
 transition: background 0.2s ease;
 }
 .copy-btn:hover {
 background: var(--accent-cyan);
 color: #000;
 }
 pre {
 padding: 1.25rem;
 overflow-x: auto;
 font-family: 'Fira Code', monospace;
 font-size: 0.875rem;
 color: #e2e8f0;
 line-height: 1.5;
 }
 code {
 font-family: 'Fira Code', monospace;
 }
 .json-key { color: #7dd3fc; }
 .json-string { color: #a5f3fc; }
 .json-number { color: #fde047; }
 .json-boolean { color: #f472b6; }
 .json-null { color: #94a3b8; }
 /* Responsive */
 @media (max-width: 900px) {
 body { flex-direction: column; }
 .sidebar { width: 100%; position: relative; height: auto; border-right: none; border-bottom: 1px solid var(--border-color); }
 .main-wrapper { margin-left: 0; padding: 1.5rem; }
 }
 </style>
</head>
<body>
<!-- Sidebar -->
 <aside class="sidebar">
 <div class="brand">
 <svg viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
 <span>ResNet-50 Documentation</span>
 </div>
<div class="nav-group-title">Nội dung chính</div>
 <ul class="nav-links">
 <li><a href="#overview" class="active">1. Tổng quan Mô hình</a></li>
 <li><a href="#architecture">2. Kiến trúc ResNet-50</a></li>
 <li><a href="#pipeline">3. Pipeline Tiền xử lý Ảnh</a></li>
 <li><a href="#processing-logic">4. Quy trình Tạo File JSON</a></li>
 <li><a href="#json-spec">5. Cấu trúc JSON Output</a></li>
 <li><a href="#clinical-guidance">6. Bảng Lời khuyên Y tế</a></li>
 <li><a href="#api-integration">7. Tích hợp REST API</a></li>
 <li><a href="#deployment">8. Đóng gói & Triển khai</a></li>
 </ul>
 </aside>
<!-- Main Content Area -->
 <main class="main-wrapper">
<!-- Banner Header -->
 <header class="header-banner">
 <h1>Mô hình AI ResNet-50 Baseline</h1>
 <p>Tài liệu kỹ thuật toàn diện về Kiến trúc Mạng Residual 50 lớp, Pipeline Tiền Xử lý Ảnh Đáy Mắt (Fundus Photo) và Quy chuẩn Trả về dữ liệu **JSON API** cho bài toán Phân loại Bệnh Võng mạc Tiểu đường (DR - 5 Lớp ICDR).</p>
 <div class="tag-container">
 <span class="tag">PyTorch 2.0+</span>
 <span class="tag">ResNet-50 Baseline</span>
 <span class="tag">Residual Connections</span>
 <span class="tag">Ben Graham Filter</span>
 <span class="tag">FastAPI REST Endpoint</span>
 <span class="tag">JSON Output Spec</span>
 </div>
 </header>
<!-- 1. Overview -->
 <section id="overview">
 <h2>
 <svg viewBox="0 0 24 24"><path d="M13 16h-2v-6h2v6zm0-8h-2V6h2v2zm-1-6A10 10 0 1 0 22 12 10 10 0 0 0 12 2z"/></svg>
 1. Tổng quan Mô hình AI
 </h2>
 <p>Mô hình <strong>ResNet50_DR</strong> phục vụ chẩn đoán tự động tổn thương võng mạc ở bệnh nhân tiểu đường dựa trên ảnh chụp đáy mắt (Fundus Camera).</p>
<div class="grid-2">
 <div class="card">
 <div class="card-title">Mô tả Bài toán</div>
 <p>Phân loại 5 cấp độ tổn thương theo Tiêu chuẩn Y tế Quốc tế ICDR (International Clinical Diabetic Retinopathy Disease Severity Scale).</p>
 </div>
 <div class="card">
 <div class="card-title">Backbone ResNet-50</div>
 <p>Sử dụng mạng <strong>ResNet-50</strong> với 50 lớp trích xuất đặc trưng sâu và kết nối tắt residual shortcuts ($2048$ kênh đặc trưng đầu ra).</p>
 </div>
 <div class="card">
 <div class="card-title">Đầu vào (Input)</div>
 <p>Kích thước chuẩn <code>224 × 224 × 3</code>. Hỗ trợ đa dạng định dạng: Đường dẫn File, Mảng Bytes, PIL Image, OpenCV Array.</p>
 </div>
 <div class="card">
 <div class="card-title">Đầu ra (Output)</div>
 <p>Vector 5 xác suất Softmax $\rightarrow$ Đóng gói thành <strong>File JSON chuẩn</strong> chứa Class ID, Confidence %, Lời khuyên Y tế & Ảnh Base64.</p>
 </div>
 </div>
 </section>
<!-- 2. Architecture -->
 <section id="architecture">
 <h2>
 <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
 2. Kiến trúc Chi tiết (Model Architecture)
 </h2>
 <p>Mạng ResNet-50 sử dụng các khối Bottleneck Blocks giúp học đặc trưng phân cấp mạnh mẽ:</p>
<div class="flow-container">
 <div class="flow-step">
 <div class="step-number">1</div>
 <div class="step-content">
 <h4>Conv1 & MaxPool Head</h4>
 <p>Lớp `Conv2d(7x7, stride=2)` và `MaxPool2d(3x3)` nén ban đầu từ 224x224 về 56x56 với 64 channels.</p>
 </div>
 </div>
 <div class="flow-step">
 <div class="step-number">2</div>
 <div class="step-content">
 <h4>Layer 1 -> Layer 4 (Bottleneck Blocks)</h4>
 <p>4 tầng khối Residual Bottleneck với kênh đặc trưng tăng dần: 256 $\rightarrow$ 512 $\rightarrow$ 1024 $\rightarrow$ 2048 channels.</p>
 </div>
 </div>
 <div class="flow-step">
 <div class="step-number">3</div>
 <div class="step-content">
 <h4>Global Average Pooling</h4>
 <p><code>AdaptiveAvgPool2d(1)</code> nén đặc trưng không gian 7x7 về vector 1D chiều dài 2048.</p>
 </div>
 </div>
 <div class="flow-step">
 <div class="step-number">4</div>
 <div class="step-content">
 <h4>Classifier Head</h4>
 <p><code>Dropout(p=0.3)</code> $\rightarrow$ <code>Linear(2048 -> 5)</code> phân loại 5 nhãn bệnh ICDR.</p>
 </div>
 </div>
 </div>
 </section>
<!-- 3. Preprocessing Pipeline -->
 <section id="pipeline">
 <h2>
 <svg viewBox="0 0 24 24"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6a5.87 5.87 0 0 1-2.8-.7l-1.46 1.46A7.93 7.93 0 0 0 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6a5.87 5.87 0 0 1 2.8.7l1.46-1.46A7.93 7.93 0 0 0 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/></svg>
 3. Quy trình Tiền xử lý Ảnh (Preprocessing Pipeline)
 </h2>
 <p>Thực thi qua 5 bước trong <code>preprocessing.py</code> giúp nâng cao chất lượng chẩn đoán:</p>
<table>
 <thead>
 <tr>
 <th>Bước</th>
 <th>Tên Hàm Python</th>
 <th>Chức năng Kỹ thuật</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><strong>1</strong></td>
 <td><code>load_image()</code></td>
 <td>Giải mã đa dạng đầu vào (Path, Byte array, PIL, BGR Array) về mảng OpenCV BGR <code>uint8</code>.</td>
 </tr>
 <tr>
 <td><strong>2</strong></td>
 <td><code>crop_fundus_circle()</code></td>
 <td>Tự động tìm Bounding Box vùng sáng đáy mắt và crop loại bỏ hoàn toàn khung viền đen dư thừa.</td>
 </tr>
 <tr>
 <td><strong>3</strong></td>
 <td><code>letterbox_resize()</code></td>
 <td>Resize ảnh về <code>224 × 224</code> giữ nguyên tỷ lệ Aspect Ratio (đệm viền đen), tránh làm méo dạng tổn thương.</td>
 </tr>
 <tr>
 <td><strong>4</strong></td>
 <td><code>ben_graham_transform()</code></td>
 <td>Lọc nhiễu & tăng tương phản Ben Graham: $\text{Output} = 4 \times I - 4 \times \text{GaussianBlur}(I, \sigma=10) + 128$.</td>
 </tr>
 <tr>
 <td><strong>5</strong></td>
 <td><code>prepare_image_tensor()</code></td>
 <td>Chuyển đổi sang PyTorch Tensor, chuẩn hóa ImageNet Mean <code>[0.485, 0.456, 0.406]</code> & Std <code>[0.229, 0.224, 0.225]</code>.</td>
 </tr>
 </tbody>
 </table>
 </section>
<!-- 4. Processing & JSON Generation -->
 <section id="processing-logic">
 <h2>
 <svg viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
 4. Quy trình Xử lý & Tạo ra File JSON
 </h2>
 <p>Khi ứng dụng Frontend gửi ảnh qua REST API <code>POST /api/predict</code>, máy chủ tiến hành các bước xử lý tạo JSON như sau:</p>
<div class="flow-container">
 <div class="flow-step">
 <div class="step-number">A</div>
 <div class="step-content">
 <h4>Tiếp nhận Request & Đọc File</h4>
 <p>Trích xuất mảng Byte từ <code>UploadFile</code> do HTTP Client tải lên.</p>
 </div>
 </div>
 <div class="flow-step">
 <div class="step-number">B</div>
 <div class="step-content">
 <h4>Suy luận PyTorch Tensor (Inference)</h4>
 <p>Đưa Tensor qua mô hình <code>DRPredictor (ResNet50_DR)</code>, tính toán xác suất 5 lớp qua <code>torch.softmax</code>.</p>
 </div>
 </div>
 <div class="flow-step">
 <div class="step-number">C</div>
 <div class="step-content">
 <h4>Mã hóa Ảnh Preprocessed sang Base64</h4>
 <p>Chuyển mảng OpenCV Ben Graham sang đuôi JPEG, sau đó encode Base64 dạng <code>data:image/jpeg;base64,...</code> để Frontend có thể hiển thị tức thì.</p>
 </div>
 </div>
 <div class="flow-step">
 <div class="step-number">D</div>
 <div class="step-content">
 <h4>Ghép nối Clinical Guidance & Trả về JSON</h4>
 <p>Tra cứu bảng chỉ dẫn y tế theo <code>class_id</code> (Title, Advice, Urgency, Badge Color) và đóng gói kết quả JSON hoàn chỉnh.</p>
 </div>
 </div>
 </div>
 </section>
<!-- 5. JSON Spec -->
 <section id="json-spec">
 <h2>
 <svg viewBox="0 0 24 24"><path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/></svg>
 5. Cấu trúc File JSON Output (JSON Specification)
 </h2>
 <p>Dưới đây là ví dụ cấu trúc dữ liệu JSON phản hồi chuẩn HTTP 200 OK khi chẩn đoán thành công một ảnh đáy mắt:</p>
<div class="code-container">
 <div class="code-header">
 <span>JSON REST API Response (`POST /api/predict`)</span>
 <button class="copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('json-code-block').innerText)">Copy JSON</button>
 </div>
 <pre><code id="json-code-block">{
 <span class="json-key">"success"</span>: <span class="json-boolean">true</span>,
 <span class="json-key">"filename"</span>: <span class="json-string">"patient_fundus_right_eye.jpg"</span>,
 <span class="json-key">"prediction"</span>: {
 <span class="json-key">"class_id"</span>: <span class="json-number">2</span>,
 <span class="json-key">"class_name"</span>: <span class="json-string">"Moderate"</span>,
 <span class="json-key">"confidence"</span>: <span class="json-number">86.30</span>,
 <span class="json-key">"probabilities"</span>: {
 <span class="json-key">"No DR"</span>: <span class="json-number">0.0210</span>,
 <span class="json-key">"Mild"</span>: <span class="json-number">0.0960</span>,
 <span class="json-key">"Moderate"</span>: <span class="json-number">0.8630</span>,
 <span class="json-key">"Severe"</span>: <span class="json-number">0.0150</span>,
 <span class="json-key">"Proliferative DR"</span>: <span class="json-number">0.0050</span>
 }
 },
 <span class="json-key">"clinical_guidance"</span>: {
 <span class="json-key">"title"</span>: <span class="json-string">"Bệnh Trung Bình (Moderate DR)"</span>,
 <span class="json-key">"badge_color"</span>: <span class="json-string">"#f59e0b"</span>,
 <span class="json-key">"advice"</span>: <span class="json-string">"Tổn thương xuất huyết/xuất tiết mức độ vừa. Cần thăm khám bác sĩ nhãn khoa trong 3 - 6 tháng để đánh giá hoàng điểm và can thiệp kịp thời."</span>,
 <span class="json-key">"urgency"</span>: <span class="json-string">"Khám chuyên khoa"</span>
 },
 <span class="json-key">"preprocessed_image_base64"</span>: <span class="json-string">"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDA..."</span>
}</code></pre>
 </div>
<h3>Mô tả Giải thích Trường Dữ liệu (Field Dictionary)</h3>
 <table>
 <thead>
 <tr>
 <th>Tên Trường (Field)</th>
 <th>Kiểu Dữ Liệu</th>
 <th>Mô tả Chi tiết</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><code>success</code></td>
 <td><code>Boolean</code></td>
 <td>Trạng thái thực thi API (<code>true</code> thành công, <code>false</code> thất bại).</td>
 </tr>
 <tr>
 <td><code>filename</code></td>
 <td><code>String</code></td>
 <td>Tên file ảnh gốc được gửi từ phía client.</td>
 </tr>
 <tr>
 <td><code>prediction.class_id</code></td>
 <td><code>Integer</code></td>
 <td>Mã lớp mức độ bệnh từ <code>0</code> (Bình thường) đến <code>4</code> (Tăng sinh nguy hiểm).</td>
 </tr>
 <tr>
 <td><code>prediction.class_name</code></td>
 <td><code>String</code></td>
 <td>Tên nhãn tiếng Anh theo chuẩn ICDR.</td>
 </tr>
 <tr>
 <td><code>prediction.confidence</code></td>
 <td><code>Float</code></td>
 <td>Độ tin cậy của nhãn dự đoán tính theo phần trăm (0.0 đến 100.0%).</td>
 </tr>
 <tr>
 <td><code>prediction.probabilities</code></td>
 <td><code>Object</code></td>
 <td>Map chứa xác suất phân bố cụ thể cho toàn bộ 5 lớp ICDR.</td>
 </tr>
 <tr>
 <td><code>clinical_guidance.title</code></td>
 <td><code>String</code></td>
 <td>Tên chẩn đoán tiếng Việt dùng để hiển thị giao diện bác sĩ.</td>
 </tr>
 <tr>
 <td><code>clinical_guidance.badge_color</code></td>
 <td><code>String</code></td>
 <td>Mã màu HEX tiêu chuẩn khuyến nghị hiển thị thẻ Status Badge trên UI.</td>
 </tr>
 <tr>
 <td><code>clinical_guidance.advice</code></td>
 <td><code>String</code></td>
 <td>Chi tiết lời khuyên tư vấn y tế lâm sàng.</td>
 </tr>
 <tr>
 <td><code>clinical_guidance.urgency</code></td>
 <td><code>String</code></td>
 <td>Mức độ khẩn cấp thăm khám lâm sàng.</td>
 </tr>
 <tr>
 <td><code>preprocessed_image_base64</code></td>
 <td><code>String</code></td>
 <td>Chuỗi Data URI Base64 ảnh sau bộ lọc Ben Graham để render trực tiếp lên Frontend HTML.</td>
 </tr>
 </tbody>
 </table>
 </section>
<!-- 6. Clinical Guidance -->
 <section id="clinical-guidance">
 <h2>
 <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-1.99.9-1.99 2L3 19c0 1.1.89 2 1.99 2H19c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 11h-4v4h-4v-4H6v-4h4V6h4v4h4v4z"/></svg>
 6. Danh mục Lời khuyên Y tế Lâm sàng (ICDR Standard)
 </h2>
 <p>Mô hình AI tự động quy đổi kết quả sang khuyến nghị y tế lâm sàng theo tiêu chuẩn 5 mức độ ICDR:</p>
<table>
 <thead>
 <tr>
 <th>Class ID</th>
 <th>Nhãn ICDR</th>
 <th>Chẩn đoán Tiếng Việt</th>
 <th>Mức độ Khẩn cấp</th>
 <th>Badge Color UI</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td><strong>0</strong></td>
 <td>No DR</td>
 <td>Mắt Bình Thường</td>
 <td>Bình thường</td>
 <td><span class="badge badge-0">#10b981 - Green</span></td>
 </tr>
 <tr>
 <td><strong>1</strong></td>
 <td>Mild</td>
 <td>Bệnh Nhẹ</td>
 <td>Theo dõi định kỳ</td>
 <td><span class="badge badge-1">#3b82f6 - Blue</span></td>
 </tr>
 <tr>
 <td><strong>2</strong></td>
 <td>Moderate</td>
 <td>Bệnh Trung Bình</td>
 <td>Khám chuyên khoa</td>
 <td><span class="badge badge-2">#f59e0b - Orange</span></td>
 </tr>
 <tr>
 <td><strong>3</strong></td>
 <td>Severe</td>
 <td>Bệnh Nặng</td>
 <td>Cần can thiệp sớm</td>
 <td><span class="badge badge-3">#ef4444 - Red</span></td>
 </tr>
 <tr>
 <td><strong>4</strong></td>
 <td>Proliferative DR</td>
 <td>Tăng Sinh Nguy Hiểm</td>
 <td>KHẨN CẤP</td>
 <td><span class="badge badge-4">#8b5cf6 - Purple</span></td>
 </tr>
 </tbody>
 </table>
 </section>
<!-- 7. API Integration -->
 <section id="api-integration">
 <h2>
 <svg viewBox="0 0 24 24"><path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"/></svg>
 7. Hướng dẫn Tích hợp REST API
 </h2>
 <p>REST API được khởi chạy với FastAPI tại cổng <code>8000</code>. Dưới đây là các ví dụ mã nguồn kết nối tích hợp:</p>
<h3>Mã nguồn Python Gọi API</h3>
 <div class="code-container">
 <div class="code-header">Python (requests)</div>
 <pre><code>import requests
url = "http://localhost:8000/api/predict"
file_path = "fundus_sample.jpg"
with open(file_path, "rb") as f:
 files = {"file": (file_path, f, "image/jpeg")}
 response = requests.post(url, files=files)
data = response.json()
print("Nhãn chẩn đoán:", data["prediction"]["class_name"])
print("Độ tin cậy:", data["prediction"]["confidence"], "%")
print("Lời khuyên y tế:", data["clinical_guidance"]["advice"])</code></pre>
 </div>
<h3>Mã nguồn JavaScript Frontend (Fetch API)</h3>
 <div class="code-container">
 <div class="code-header">JavaScript (React / Vue / HTML)</div>
 <pre><code>async function sendImageToAI(fileInput) {
 const formData = new FormData();
 formData.append("file", fileInput.files[0]);
const res = await fetch("http://localhost:8000/api/predict", {
 method: "POST",
 body: formData
 });
const json = await res.json();
// Update UI Elements
 document.getElementById("result-title").innerText = json.clinical_guidance.title;
 document.getElementById("result-title").style.color = json.clinical_guidance.badge_color;
 document.getElementById("preview-img").src = json.preprocessed_image_base64;
}</code></pre>
 </div>
 </section>
<!-- 8. Deployment -->
 <section id="deployment">
 <h2>
 <svg viewBox="0 0 24 24"><path d="M19.35 10.04A7.49 7.49 0 0 0 12 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 0 0 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3z"/></svg>
 8. Đóng gói & Triển khai (Deployment)
 </h2>
 <p>Khởi chạy hệ thống trong môi trường Docker Container production:</p>
<div class="code-container">
 <div class="code-header">Bash Terminal</div>
 <pre><code># Build Docker Image
docker build -t dr-resnet50-api .
# Run Container
docker run -d -p 8000:8000 --name dr_resnet50_service dr-resnet50-api</code></pre>
 </div>
 </section>
</main>
<script>
 // Smooth scroll active sidebar highlighting
 const links = document.querySelectorAll('.nav-links a');
 window.addEventListener('scroll', () => {
 let fromTop = window.scrollY + 100;
 links.forEach(link => {
 let section = document.querySelector(link.hash);
 if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
 link.classList.add('active');
 } else {
 link.classList.remove('active');
 }
 });
 });
 </script>
</body>
</html>