Spaces:
Running
Running
File size: 9,231 Bytes
1ccf66a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 |
{% extends "base.html" %}
{% block title %}Model Information{% endblock %}
{% block content %}
<div class="card shadow fade-in">
<div class="card-header" style="background-color: #f8f9fa; padding: 15px;">
<h3 class="mb-0 text-center" style="font-size: 32px; font-weight: bold;">
<i class="fas fa-brain me-2"></i>
CT-MRI Translation Model
</h3>
</div>
<div class="card-body" style="font-size: 18px; line-height: 1.6;">
<!-- Model Architecture Section -->
<section class="mb-5 slide-up" style="font-size: 20px; margin-bottom: 40px;">
<h4 class="section-title" style="font-size: 24px; font-weight: bold;">
<i class="fas fa-network-wired me-2"></i>
Model Architecture
</h4>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title" style="font-size: 22px; font-weight: bold;">Generator Network</h5>
<ul class="feature-list" style="font-size: 18px;">
<li>Encoder: 7-stage downsampling with residual blocks</li>
<li>Decoder: 7-stage upsampling with skip connections</li>
<li>Latent Space: 256-dimensional VAE</li>
<li>Activation: LeakyReLU (α=0.2)</li>
<li>Normalization: Group Normalization</li>
<li>Output: Sigmoid activation for 256x256x3 images</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title" style="font-size: 22px; font-weight: bold;">Discriminator Network</h5>
<ul class="feature-list" style="font-size: 18px;">
<li>Type: Multi-scale PatchGAN</li>
<li>Scales: 4 levels of feature discrimination</li>
<li>Activation: LeakyReLU (α=0.2)</li>
<li>Output: Real/Fake classification at multiple scales</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Loss Functions Section -->
<section class="mb-5 slide-up" style="font-size: 20px; margin-bottom: 40px;">
<h4 class="section-title" style="font-size: 24px; font-weight: bold;">
<i class="fas fa-balance-scale me-2"></i>
Loss Functions
</h4>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title" style="font-size: 22px; font-weight: bold;">Generator Loss</h5>
<ul class="feature-list" style="font-size: 18px;">
<li>Adversarial Loss: LSGAN (Least Squares GAN)</li>
<li>Cycle Consistency Loss: L1 norm (λ=10)</li>
<li>KL Divergence: Regularization for latent space (λ=0.5)</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title" style="font-size: 22px; font-weight: bold;">Discriminator Loss</h5>
<ul class="feature-list" style="font-size: 18px;">
<li>Real/Fake Loss: LSGAN (Least Squares GAN)</li>
<li>Multi-scale Loss: Aggregated across 4 scales</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Training Progress Section -->
<section class="mb-5 slide-up" style="font-size: 20px; margin-bottom: 40px;">
<h4 class="section-title" style="font-size: 24px; font-weight: bold;">
<i class="fas fa-chart-line me-2"></i>
Training Progress
</h4>
<div class="row">
{% for i in range(1, 6) %}
<div class="col-md-4 mb-3">
<div class="image-container">
<img src="{{ url_for('static', filename='progress/epoch_' ~ i ~ '_batch_0.png') }}"
alt="Training Progress Epoch {{ i }}"
class="img-fluid">
<p class="text-center mt-2" style="font-size: 18px;">Epoch {{ i }}</p>
</div>
</div>
{% endfor %}
</div>
</section>
<!-- Hyperparameters Section -->
<section class="mb-5 slide-up" style="font-size: 20px; margin-bottom: 40px;">
<h4 class="section-title" style="font-size: 24px; font-weight: bold;">
<i class="fas fa-cogs me-2"></i>
Hyperparameters
</h4>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title" style="font-size: 22px; font-weight: bold;">Training Parameters</h5>
<ul class="feature-list" style="font-size: 18px;">
<li>Epochs: 40+</li>
<li>Batch Size: 1</li>
<li>Learning Rate: 0.0001</li>
<li>Weight Decay: 6e-8</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title" style="font-size: 22px; font-weight: bold;">Model Parameters</h5>
<ul class="feature-list" style="font-size: 18px;">
<li>Latent Dimension: 256</li>
<li>Filters: 16 (base)</li>
<li>Kernel Size: 3x3</li>
<li>Image Shape: 256x256x3</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Performance Metrics Section -->
<section class="slide-up" style="font-size: 20px;">
<h4 class="section-title" style="font-size: 24px; font-weight: bold;">
<i class="fas fa-tachometer-alt me-2"></i>
Performance Metrics
</h4>
<div class="row">
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title" style="font-size: 22px; font-weight: bold;">Quantitative Metrics</h5>
<ul class="feature-list" style="font-size: 18px;">
<li>PSNR: 32.4 dB</li>
<li>SSIM: 0.91</li>
<li>FID Score: 18.7</li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title" style="font-size: 22px; font-weight: bold;">Training Metrics</h5>
<ul class="feature-list" style="font-size: 18px;">
<li>Generator Loss: ~1.5 (final)</li>
<li>Discriminator Loss: ~0.6 (final)</li>
<li>Cycle Consistency Loss: ~0.2</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
{% endblock %}
{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Add visible class to sections when they come into view
const sections = document.querySelectorAll('section');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, { threshold: 0.1 });
sections.forEach(section => {
observer.observe(section);
});
});
</script>
{% endblock %}
|