Style diagram images with centred HTML + width constraints

README.md

@@ -23,67 +23,15 @@ datasets:
 
 ## Architecture
 
-```mermaid
-graph LR
-    IN["Input
-    3 × 320 × 320"] --> STEM["Stem
-    7×7 Conv · BN · ReLU
-    3→64ch · MaxPool ÷2"]
-    STEM --> S1["Stage 1
-    3× SE-ResBlock
-    64ch"]
-    S1 --> S2["Stage 2 ↓½
-    4× SE-ResBlock
-    128ch"]
-    S2 --> S3["Stage 3 ↓½
-    6× SE-ResBlock
-    256ch"]
-    S3 --> S4["Stage 4 ↓½
-    3× SE-ResBlock
-    512ch"]
-    S4 --> GAP["Global Avg Pool
-    Dropout(0.5)
-    512-dim"]
-    GAP --> MLH["Multilabel Head
-    Linear 512→14
-    sigmoid · 14 pathologies"]
-    GAP --> BH["Binary Head
-    Linear 512→1
-    sigmoid · Normal/Abnormal"]
-    style MLH fill:#2e7d32,color:#fff
-    style BH fill:#1565c0,color:#fff
-    style IN fill:#37474f,color:#fff
-```
+<p align="center">
+  <img src="https://huggingface.co/HlexNC/chexvision-scratch/resolve/main/arch_scratch.png" width="88%" alt="SE-ResNet Architecture"/>
+</p>
 
 ## Training Pipeline
 
-```mermaid
-flowchart TD
-    DS[("🗄️ HlexNC/chest-xray-14-320
-112,120 images · 36 shards · ~7.97 GB")]
-    DS -->|snapshot_download| PREP["📂 data/images · data/labels.csv
-train 78,468 · val 11,210 · test 22,442"]
-    PREP --> AUG["Augmentation Pipeline
-HFlip · Rotate±15° · RandomAffine
-ColorJitter · GaussianBlur · RandomErasing"]
-    AUG --> FWD["⚡ Model Forward Pass
-torch.cuda.amp.autocast · fp16"]
-    FWD --> ML["multilabel_logits B×14
-WeightedBCE + pos_weight · 14 classes"]
-    FWD --> BIN["binary_logits B×1
-BCE · Normal vs. Abnormal"]
-    ML --> LOSS["Combined Loss
-1.0 × multilabel + 0.5 × binary"]
-    BIN --> LOSS
-    LOSS --> BACK["Backward · Grad Clip 1.0
-Gradient Accumulation ×4 · eff. batch 96"]
-    BACK --> OPT["AdamW · CosineAnnealingLR
-early stop patience = 15"]
-    OPT -->|"↑ best val AUC-ROC"| BEST["💾 Best Checkpoint
-model_state · best_val_metrics · config"]
-    BEST -->|upload_model_artifacts| HUB["🤗 HF Hub
-checkpoint · history.json · model card"]
-```
+<p align="center">
+  <img src="https://huggingface.co/HlexNC/chexvision-scratch/resolve/main/pipeline_training.png" width="42%" alt="Training Pipeline"/>
+</p>
 
 ## Training Metrics