Download docs/DOCUMENTATION.html from chrisnguyenx/EfficientNet-P3: direct link, hf CLI and curl.
- Browser
- Download file 27.5 kB
-
https://huggingface.co/chrisnguyenx/EfficientNet-P3/resolve/main/docs/DOCUMENTATION.html
- Command line
-
hf download hf://chrisnguyenx/EfficientNet-P3/docs/DOCUMENTATION.html
-
curl -L -o DOCUMENTATION.html https://huggingface.co/chrisnguyenx/EfficientNet-P3/resolve/main/docs/DOCUMENTATION.html
27.5 kB
| <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 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(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; | |
| } | |
| /* 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(127, 29, 29, 0.4); color: #fca5a5; border: 1px solid #991b1b; } | |
| /* 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>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 Content Area --> | |
| <main class="main-wrapper"> | |
| <!-- Banner Header --> | |
| <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> | |
| <!-- 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>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> | |
| <!-- 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 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> | |
| <!-- 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 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> | |
| <!-- 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</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> | |
| <!-- 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">"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> | |
| <!-- 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">#5e0101 - Dark Red</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("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> | |
| <!-- 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-efficientnet-api . | |
| # Run Container | |
| docker run -d -p 8000:8000 --name dr_ai_service dr-efficientnet-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> | |