Migrated metrics to SVG

MODEL_CARD.md

@@ -23,19 +23,19 @@ KRONECTOR is rigorously cross-validated against 10+ years of F1 data (2014-2024)
 The ROC Curve demonstrates the model's ability to distinguish between a race winner and a non-winner. An AUC of 1.0 is perfect.
 **KRONECTOR achieves an impressive ~0.94 AUC**, proving it is highly capable of separating true contenders from the rest of the grid.
 
-![ROC Curve](frontend/public/metrics/roc_curve.png)
+![ROC Curve](frontend/public/metrics/roc_curve.svg)
 
 ### 2. Precision-Recall Curve
 Because Formula 1 is highly imbalanced (1 winner vs 19 losers per race), the PR curve is critical. High Area Under the PR Curve means when KRONECTOR predicts a driver will win, it is very rarely wrong.
 
-![Precision-Recall Curve](frontend/public/metrics/pr_curve.png)
+![Precision-Recall Curve](frontend/public/metrics/pr_curve.svg)
 
 ### 3. Confusion Matrix
 Evaluating the raw accuracy using a 50% probability threshold. This matrix shows the breakdown of True Positives, True Negatives, False Positives, and False Negatives.
 
-![Confusion Matrix](frontend/public/metrics/confusion_matrix.png)
+![Confusion Matrix](frontend/public/metrics/confusion_matrix.svg)
 
 ### 4. Global Feature Importance (SHAP)
 This chart aggregates the absolute SHAP values across all predictions, revealing the fundamental laws of the model. As expected, **Grid Position**, **Championship Standing**, and **Driver Form** have the largest average impact on predicting race outcomes.
 
-![Global Feature Importance](frontend/public/metrics/feature_importance.png)
+![Global Feature Importance](frontend/public/metrics/feature_importance.svg)

frontend/app/page.js

@@ -177,19 +177,19 @@ export default function Home() {
               <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem'}}>
                 <div>
                   <h3 style={{color: 'var(--neon-cyan)', marginBottom: '1rem', textAlign: 'center'}}>ROC AUC Curve</h3>
-                  <img src="/metrics/roc_curve.png" alt="ROC Curve" style={{width: '100%', borderRadius: '10px'}} />
+                  <img src="/metrics/roc_curve.svg" alt="ROC Curve" style={{width: '100%', borderRadius: '10px'}} />
                 </div>
                 <div>
                   <h3 style={{color: 'var(--neon-cyan)', marginBottom: '1rem', textAlign: 'center'}}>Precision-Recall Curve</h3>
-                  <img src="/metrics/pr_curve.png" alt="PR Curve" style={{width: '100%', borderRadius: '10px'}} />
+                  <img src="/metrics/pr_curve.svg" alt="PR Curve" style={{width: '100%', borderRadius: '10px'}} />
                 </div>
                 <div>
                   <h3 style={{color: 'var(--neon-cyan)', marginBottom: '1rem', textAlign: 'center'}}>Confusion Matrix</h3>
-                  <img src="/metrics/confusion_matrix.png" alt="Confusion Matrix" style={{width: '100%', borderRadius: '10px'}} />
+                  <img src="/metrics/confusion_matrix.svg" alt="Confusion Matrix" style={{width: '100%', borderRadius: '10px'}} />
                 </div>
                 <div>
                   <h3 style={{color: 'var(--neon-cyan)', marginBottom: '1rem', textAlign: 'center'}}>Global Feature Importance</h3>
-                  <img src="/metrics/feature_importance.png" alt="Feature Importance" style={{width: '100%', borderRadius: '10px'}} />
+                  <img src="/metrics/feature_importance.svg" alt="Feature Importance" style={{width: '100%', borderRadius: '10px'}} />
                 </div>
               </div>
             </div>

scripts/generate_model_proofs.py

@@ -91,7 +91,7 @@ def main():
     
     ax.legend([f'AUC = {roc_auc:.3f}'], loc="lower right", facecolor="#1e293b", edgecolor="#334155", labelcolor="white", fontsize=12)
     plt.tight_layout()
-    plt.savefig(os.path.join(args.output_dir, "roc_curve.png"), dpi=300, transparent=True, bbox_inches='tight')
+    plt.savefig(os.path.join(args.output_dir, "roc_curve.svg"), format="svg", transparent=True, bbox_inches='tight')
     plt.close()
 
     # 2. Precision-Recall Curve
@@ -111,7 +111,7 @@ def main():
     
     ax.legend([f'AUC = {pr_auc:.3f}'], loc="lower left", facecolor="#1e293b", edgecolor="#334155", labelcolor="white", fontsize=12)
     plt.tight_layout()
-    plt.savefig(os.path.join(args.output_dir, "pr_curve.png"), dpi=300, transparent=True, bbox_inches='tight')
+    plt.savefig(os.path.join(args.output_dir, "pr_curve.svg"), format="svg", transparent=True, bbox_inches='tight')
     plt.close()
 
     # 3. Confusion Matrix
@@ -132,7 +132,7 @@ def main():
     ax.set_yticklabels(['Not Win', 'Win'], color='#94a3b8', fontsize=12, rotation=0)
     
     plt.tight_layout()
-    plt.savefig(os.path.join(args.output_dir, "confusion_matrix.png"), dpi=300, transparent=True, bbox_inches='tight')
+    plt.savefig(os.path.join(args.output_dir, "confusion_matrix.svg"), format="svg", transparent=True, bbox_inches='tight')
     plt.close()
 
     # 4. Global Feature Importance
@@ -162,7 +162,7 @@ def main():
                 color=cyan, fontweight='bold', va='center', fontsize=11)
 
     plt.tight_layout()
-    plt.savefig(os.path.join(args.output_dir, "feature_importance.png"), dpi=300, transparent=True, bbox_inches='tight')
+    plt.savefig(os.path.join(args.output_dir, "feature_importance.svg"), format="svg", transparent=True, bbox_inches='tight')
     plt.close()
 
     print(f"Proofs generated successfully in {args.output_dir}")