Update app.py

app.py

@@ -8,7 +8,7 @@ A comprehensive tool for estimating VRAM requirements and recommending optimal
 GPU configurations for Large Language Model (LLM) deployment and training.
 
 Author: Rudali Huidrom
-Version: 3.0.0
+Version: 4.0.0
 First Written On: 08 December 2025
 
 Overview
@@ -88,8 +88,13 @@ HF_TOKEN = os.getenv("HF_TOKEN", "")
 # - Budget tier: Green gradient for cost-effective options
 # - Runner-up tier: Blue gradient for balanced options
 # - Performance tier: Purple gradient for maximum performance
+# - Dark/Light mode support
+# - Mobile/Tablet responsive
 CUSTOM_CSS = """
 <style>
+/* ============================================
+   LIGHT MODE (Default)
+   ============================================ */
 .budget-box { 
     background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%) !important; 
     border: 2px solid #22c55e !important; 
@@ -125,6 +130,137 @@ CUSTOM_CSS = """
     padding: 12px !important;
     margin: 8px 0 !important;
 }
+
+/* ============================================
+   DARK MODE
+   ============================================ */
+@media (prefers-color-scheme: dark) {
+    .budget-box { 
+        background: linear-gradient(135deg, #052e16 0%, #064e3b 100%) !important; 
+        border: 2px solid #22c55e !important; 
+        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.25) !important;
+    }
+    .budget-box, .budget-box * {
+        color: #dcfce7 !important;
+    }
+    
+    .runner-box { 
+        background: linear-gradient(135deg, #172554 0%, #1e3a8a 100%) !important; 
+        border: 2px solid #3b82f6 !important; 
+        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25) !important;
+    }
+    .runner-box, .runner-box * {
+        color: #dbeafe !important;
+    }
+    
+    .perf-box { 
+        background: linear-gradient(135deg, #3b0764 0%, #4c1d95 100%) !important; 
+        border: 2px solid #a855f7 !important; 
+        box-shadow: 0 2px 8px rgba(168, 85, 247, 0.25) !important;
+    }
+    .perf-box, .perf-box * {
+        color: #f3e8ff !important;
+    }
+    
+    .warning-box {
+        background-color: #451a03 !important;
+        border: 1px solid #f59e0b !important;
+        color: #fde68a !important;
+    }
+    
+    .error-box {
+        background-color: #450a0a !important;
+        border: 1px solid #ef4444 !important;
+        color: #fecaca !important;
+    }
+}
+
+/* ============================================
+   TABLET (max-width: 1024px)
+   Stack main columns, keep boxes side by side
+   ============================================ */
+@media screen and (max-width: 1024px) {
+    .gradio-container {
+        padding: 12px !important;
+    }
+}
+
+/* ============================================
+   MOBILE (max-width: 768px)
+   ============================================ */
+@media screen and (max-width: 768px) {
+    .gradio-container {
+        padding: 8px !important;
+    }
+    
+    /* Stack recommendation boxes vertically */
+    .budget-box, .runner-box, .perf-box {
+        margin-bottom: 12px !important;
+    }
+    
+    /* Larger touch targets */
+    button, .gradio-button {
+        min-height: 44px !important;
+        font-size: 16px !important;
+    }
+    
+    input, select, textarea {
+        min-height: 44px !important;
+        font-size: 16px !important; /* Prevents iOS zoom */
+    }
+}
+
+/* ============================================
+   SMALL MOBILE (max-width: 480px)
+   ============================================ */
+@media screen and (max-width: 480px) {
+    .gradio-container {
+        padding: 4px !important;
+    }
+    
+    .budget-box, .runner-box, .perf-box {
+        padding: 12px !important;
+        border-radius: 8px !important;
+    }
+    
+    h1, .markdown h1 {
+        font-size: 1.4rem !important;
+    }
+    
+    h3, .markdown h3 {
+        font-size: 1rem !important;
+    }
+}
+
+/* ============================================
+   TOUCH DEVICES
+   ============================================ */
+@media (pointer: coarse) {
+    button, .gradio-button, 
+    input, select, textarea {
+        min-height: 44px !important;
+    }
+    
+    input[type="checkbox"], input[type="radio"] {
+        width: 20px !important;
+        height: 20px !important;
+    }
+}
+
+/* ============================================
+   ACCESSIBILITY
+   ============================================ */
+@media (prefers-reduced-motion: reduce) {
+    * {
+        transition: none !important;
+        animation: none !important;
+    }
+}
+
+*:focus-visible {
+    outline: 2px solid #3b82f6 !important;
+    outline-offset: 2px !important;
+}
 </style>
 """
 
@@ -476,7 +612,7 @@ GPU_DATABASE = [
 # Based on real-world benchmarks from MLPerf, vendor data, and community testing
 # Tokens per second per GPU for different model sizes
 # 
-# Last Updated: 15 December 2025
+# Last Updated: 16 December 2025
 # Sources:
 # - MLPerf Training v3.1 (November 2023)
 # - NVIDIA TensorRT-LLM benchmarks (Q4 2024)
@@ -790,10 +926,18 @@ def calculate_throughput(
     # Get base throughput per GPU (assumes FP16 on vLLM baseline)
     tps_per_gpu = interpolate_throughput(gpu_family, model_size_bn, task, use_batched)
     
-    # Apply quantization speedup multiplier
+    # Apply quantization speedup multiplier (INFERENCE ONLY)
     # INT8/INT4 are significantly faster due to specialized Tensor Cores
-    quant_speedup = QUANTIZATION_SPEEDUP.get(precision, 1.0)
-    tps_per_gpu *= quant_speedup
+    # For training, quantization provides memory savings, not speed improvements
+    if task == "Inference":
+        quant_speedup = QUANTIZATION_SPEEDUP.get(precision, 1.0)
+        tps_per_gpu *= quant_speedup
+    else:
+        quant_speedup = 1.0  # No speedup for training
+        # For QLoRA, there's actually a slight slowdown due to
+        # quantization/dequantization overhead during forward pass
+        if precision in ['nf4', '4bit', 'int4', 'int8'] and ft_method == "QLoRA":
+            tps_per_gpu *= 0.85  # ~15% overhead for quantized training
     
     # Apply framework efficiency multiplier
     # TensorRT-LLM is more optimized than vLLM, HuggingFace is less optimized