| <!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 EfficientNet-B4 + CBAM & 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: #818cf8; |
| --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 { |
| 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-wrapper { |
| margin-left: 280px; |
| flex: 1; |
| padding: 2.5rem 3.5rem; |
| max-width: 1200px; |
| } |
| |
| .header-banner { |
| background: linear-gradient(135deg, rgba(56, 189, 248, 0.15), rgba(129, 140, 248, 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, #38bdf8, #818cf8); |
| -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; |
| } |
| |
| |
| .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; |
| } |
| |
| |
| .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; |
| } |
| |
| |
| 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); |
| } |
| |
| |
| .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(127, 29, 29, 0.4); color: #fca5a5; border: 1px solid #991b1b; } |
| |
| |
| .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; } |
| |
| |
| @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> |
|
|
| |
| <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>AI 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 EfficientNet+CBAM</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 class="main-wrapper"> |
| |
| |
| <header class="header-banner"> |
| <h1>Mô hình AI EfficientNet-B4 + CBAM</h1> |
| <p>Tài liệu kỹ thuật toàn diện về Kiến trúc Mạng Nơ-ron, 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">EfficientNet-B4</span> |
| <span class="tag">CBAM Attention</span> |
| <span class="tag">Ben Graham Filter</span> |
| <span class="tag">FastAPI REST Endpoint</span> |
| <span class="tag">JSON Output Spec</span> |
| </div> |
| </header> |
|
|
| |
| <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>EfficientNetB4_CBAM</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 + Attention</div> |
| <p>Sử dụng backbone <strong>EfficientNet-B4</strong> kết hợp module chú ý 2 chiều <strong>CBAM</strong> (Channel & Spatial Attention).</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> |
|
|
| |
| <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 kết hợp sức mạnh trích xuất đặc trưng đa tỷ lệ của EfficientNet-B4 và khả năng định vị tổn thương vi mô của CBAM Module:</p> |
| |
| <div class="flow-container"> |
| <div class="flow-step"> |
| <div class="step-number">1</div> |
| <div class="step-content"> |
| <h4>EfficientNet-B4 Backbone</h4> |
| <p>Trích xuất biểu diễn đặc trưng cấp cao từ ảnh đáy mắt. Output Feature Map shape: <code>(Batch, 1792, 7, 7)</code>.</p> |
| </div> |
| </div> |
| <div class="flow-step"> |
| <div class="step-number">2</div> |
| <div class="step-content"> |
| <h4>Channel Attention (CA Sub-module)</h4> |
| <p>Sử dụng <code>AvgPool</code> + <code>MaxPool</code> kết hợp Shared MLP (tỷ lệ nén 16: $1792 \rightarrow 112 \rightarrow 1792$) để tính trọng số chú ý từng kênh đặc trưng.</p> |
| </div> |
| </div> |
| <div class="flow-step"> |
| <div class="step-number">3</div> |
| <div class="step-content"> |
| <h4>Spatial Attention (SA Sub-module)</h4> |
| <p>Tính <code>mean</code> & <code>max</code> qua các kênh, đưa qua <code>Conv2d(kernel=7)</code> + Sigmoid để tập trung vào các vùng xuất huyết, vi phình mạch, xuất tiết.</p> |
| </div> |
| </div> |
| <div class="flow-step"> |
| <div class="step-number">4</div> |
| <div class="step-content"> |
| <h4>Classifier Head</h4> |
| <p><code>AdaptiveAvgPool2d(1)</code> $\rightarrow$ <code>Flatten(1792)</code> $\rightarrow$ <code>Dropout(0.3)</code> $\rightarrow$ <code>Linear(1792 -> 5)</code>.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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 nghiêm ngặt 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> |
|
|
| |
| <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</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, Urgency, Badge Color) và đóng gói kết quả JSON hoàn chỉnh.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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">"class_id"</span>: <span class="json-number">0</span>, |
| <span class="json-key">"class_name"</span>: <span class="json-string">"No DR"</span>, |
| <span class="json-key">"confidence"</span>: <span class="json-number">0.9945334196090698</span>, |
| <span class="json-key">"probabilities"</span>: { |
| <span class="json-key">"No DR"</span>: <span class="json-number">0.9945334196090698</span>, |
| <span class="json-key">"Mild"</span>: <span class="json-number">0.0008030196186155081</span>, |
| <span class="json-key">"Moderate"</span>: <span class="json-number">0.0019999665673822165</span>, |
| <span class="json-key">"Severe"</span>: <span class="json-number">0.0011487160809338093</span>, |
| <span class="json-key">"Proliferative DR"</span>: <span class="json-number">0.0015149053651839495</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>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>class_name</code></td> |
| <td><code>String</code></td> |
| <td>Tên nhãn tiếng Anh theo chuẩn ICDR (<code>No DR</code>, <code>Mild</code>, <code>Moderate</code>, <code>Severe</code>, <code>Proliferative DR</code>).</td> |
| </tr> |
| <tr> |
| <td><code>confidence</code></td> |
| <td><code>Float</code></td> |
| <td>Giá trị độ tin cậy của mô hình cho nhãn dự đoán (xác suất thô từ 0.0 đến 1.0).</td> |
| </tr> |
| <tr> |
| <td><code>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> |
| </tbody> |
| </table> |
| </section> |
|
|
| |
| <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">#5e0101 - Dark Red</span></td> |
| </tr> |
| </tbody> |
| </table> |
| </section> |
|
|
| |
| <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("Mức khẩn cấp:", data["clinical_guidance"]["urgency"])</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> |
|
|
| |
| <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-efficientnet-api . |
|
|
| # Run Container |
| docker run -d -p 8000:8000 --name dr_ai_service dr-efficientnet-api</code></pre> |
| </div> |
| </section> |
|
|
| </main> |
|
|
| <script> |
| |
| 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> |
|
|
