Update app.py

app.py

@@ -324,49 +324,198 @@ with tab1:
                 """, unsafe_allow_html=True)
 
 with tab2:
-    # Add custom CSS to make font sizes consistent
+    # Add custom CSS for better styling
     st.markdown("""
     <style>
-    /* Make all text in the About tab the same size */
-    [data-testid="stAppViewContainer"] .stTabs [aria-label="About the System"] p,
-    [data-testid="stAppViewContainer"] .stTabs [aria-label="About the System"] li {
-        font-size: 16px !important;
-        line-height: 1.5 !important;
-    }
+        /* Main container styling */
+        .about-container {
+            background-color: #f8f9fa;
+            border-radius: 10px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        
+        /* Section styling */
+        .about-section {
+            margin-bottom: 25px;
+        }
+        
+        /* Section headers */
+        .section-header {
+            color: #1e3a8a;
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 10px;
+            border-bottom: 2px solid #e5e7eb;
+            padding-bottom: 5px;
+        }
+        
+        /* Regular text */
+        .about-text {
+            font-size: 16px;
+            line-height: 1.6;
+            color: #374151;
+        }
+        
+        /* Metrics card container */
+        .metrics-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 15px;
+            margin: 15px 0;
+        }
+        
+        /* Individual metric card */
+        .metric-card {
+            background-color: white;
+            border-radius: 8px;
+            padding: 15px;
+            min-width: 120px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            flex: 1;
+            text-align: center;
+        }
+        
+        /* Metric value */
+        .metric-value {
+            font-size: 22px;
+            font-weight: 600;
+            color: #2563eb;
+        }
+        
+        /* Metric label */
+        .metric-label {
+            font-size: 14px;
+            color: #6b7280;
+            margin-top: 5px;
+        }
+        
+        /* Footer styling */
+        .footer-disclaimer {
+            background-color: #f3f4f6;
+            border-radius: 8px;
+            padding: 15px;
+            margin-top: 30px;
+            border-left: 4px solid #9ca3af;
+            font-size: 14px;
+            color: #4b5563;
+        }
+        
+        /* Author bio section */
+        .author-bio {
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            background-color: white;
+            border-radius: 8px;
+            padding: 15px;
+            margin: 20px 0;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+        }
+        
+        /* Author image placeholder */
+        .author-image {
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            background-color: #e5e7eb;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #9ca3af;
+            font-size: 20px;
+            font-weight: bold;
+        }
     </style>
     """, unsafe_allow_html=True)
     
-    # Use regular paragraphs with bold text for titles
-    st.markdown("**About the Loan Approval System**")
-    st.write("Our AI-powered system evaluates loan applications using machine learning and industry-standard criteria to analyze your financial information, credit history, and loan requirements.")
-    
-    st.markdown("**About the ML Model**")
-    st.write("""The machine learning model used here is a Decision Tree, which was the best performing model among KNN, 
-    Random Forest, Logistic Regression, and Support Vector Machine models tested.
-    
-    The Decision Tree model was further refined using Cost Complexity Pruning (CCP) to find the optimal 
-    alpha value for pruning, which helps prevent overfitting while maintaining high accuracy.""")
+    # Main content container
+    st.markdown('<div class="about-container">', unsafe_allow_html=True)
+    
+    # System overview section
+    st.markdown('<div class="about-section">', unsafe_allow_html=True)
+    st.markdown('<h2 class="section-header">About the Loan Approval System</h2>', unsafe_allow_html=True)
+    st.markdown(
+        '<p class="about-text">Our AI-powered system evaluates loan applications using machine learning and '
+        'industry-standard criteria. It analyzes your financial information, credit history, and loan requirements '
+        'to provide fast, objective loan decisions.</p>', unsafe_allow_html=True
+    )
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    st.markdown("**Model Performance Metrics:**")
-    st.markdown("""
-    - Accuracy: 0.8361 
-    - Precision: 0.8077 
-    - Recall: 1.0000 
-    - F1 Score: 0.8936
-    """)
+    # Model information section
+    st.markdown('<div class="about-section">', unsafe_allow_html=True)
+    st.markdown('<h2 class="section-header">About the ML Model</h2>', unsafe_allow_html=True)
+    st.markdown(
+        '<p class="about-text">The machine learning model powering this system is a Decision Tree classifier, '
+        'which outperformed several alternatives including KNN, Random Forest, Logistic Regression, and Support '
+        'Vector Machine in our testing phase. The model was refined using Cost Complexity Pruning (CCP) to identify '
+        'the optimal alpha value, preventing overfitting while maintaining high predictive accuracy.</p>', 
+        unsafe_allow_html=True
+    )
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    st.write("For more information about the modeling process (from loading the dataset to fine-tuning the model), check here: [Coming Soon]")
+    # Performance metrics section with cards
+    st.markdown('<div class="about-section">', unsafe_allow_html=True)
+    st.markdown('<h2 class="section-header">Model Performance Metrics</h2>', unsafe_allow_html=True)
+    
+    # Metrics cards using HTML for better styling
+    st.markdown(
+        '<div class="metrics-container">'
+        '  <div class="metric-card">'
+        '    <div class="metric-value">83.61%</div>'
+        '    <div class="metric-label">Accuracy</div>'
+        '  </div>'
+        '  <div class="metric-card">'
+        '    <div class="metric-value">80.77%</div>'
+        '    <div class="metric-label">Precision</div>'
+        '  </div>'
+        '  <div class="metric-card">'
+        '    <div class="metric-value">100.00%</div>'
+        '    <div class="metric-label">Recall</div>'
+        '  </div>'
+        '  <div class="metric-card">'
+        '    <div class="metric-value">89.36%</div>'
+        '    <div class="metric-label">F1 Score</div>'
+        '  </div>'
+        '</div>',
+        unsafe_allow_html=True
+    )
+    
+    # Link to documentation/more info
+    st.markdown(
+        '<p class="about-text">For more information about the modeling process (from loading the dataset to fine-tuning '
+        'the model), check here: <a href="#" style="color: #2563eb;">Documentation</a> (Coming Soon)</p>',
+        unsafe_allow_html=True
+    )
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    st.write("Enjoyed doing this and learned a lot! 😊")
+    # Author section with profile
+    st.markdown('<div class="about-section">', unsafe_allow_html=True)
+    st.markdown('<h2 class="section-header">Behind the Build</h2>', unsafe_allow_html=True)
+    
+    st.markdown(
+        '<div class="author-bio">'
+        '  <div class="author-image">IF</div>'
+        '  <div>'
+        '    <p style="margin: 0; font-weight: 600; color: #1f2937;">Ivy Fiecas-Borjal</p>'
+        '    <p style="margin: 0; font-size: 14px; color: #6b7280;">Data Scientist & Developer</p>'
+        '    <p style="margin-top: 5px; font-size: 14px;">'
+        '      <a href="https://ifiecas.com/" target="_blank" style="color: #2563eb; text-decoration: none;">Visit Portfolio</a>'
+        '    </p>'
+        '  </div>'
+        '</div>',
+        unsafe_allow_html=True
+    )
+    
+    st.markdown(
+        '<p class="about-text">Inspired by an assessment in BCO6008 Predictive Analytics class in Victoria University '
+        '(Melbourne) with Dr. Omid Ameri Sianaki. Enjoyed doing this and learned a lot! 😊</p>',
+        unsafe_allow_html=True
+    )
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    st.markdown("**Behind the Build**")
-    st.markdown("[Ivy Fiecas-Borjal](https://ifiecas.com/)")
-    st.write("Inspired by an assessment in BCO6008 Predictive Analytics class in Victoria University (Melbourne) with Dr. Omid Ameri Sianaki")
-
-# Footer with disclaimer
-st.markdown("""
-<div class="footer-disclaimer">
-    <p><strong>Educational Project Disclaimer:</strong> This application is a prototype created to demonstrate machine learning model deployment and is not an actual financial service. The loan approval decisions are based on a trained model for educational purposes only and should not be used for real financial decisions.</p>
-    <p>© 2025 SmartLoanAI - Machine Learning Showcase Project</p>
-</div>
-""", unsafe_allow_html=True)
+    # Disclaimer footer
+    st.markdown("""<div class="footer-disclaimer">
+        <p><strong>Educational Project Disclaimer:</strong> This application is a prototype created to demonstrate machine learning model deployment and is not an actual financial service. The loan approval decisions are based on a trained model for educational purposes only and should not be used for real financial decisions.</p>
+        <p>© 2025 SmartLoanAI - Machine Learning Showcase Project</p>
+    </div>""", unsafe_allow_html=True)