Update app.py

app.py

@@ -185,20 +185,55 @@ with tab1:
     dti = (loan_amount / total_income) if total_income > 0 else 0
     dti_percent = dti * 100
     
-    # Show important metrics with context
-    st.markdown("<p>Debt-to-Income Ratio: <strong>{:.1f}%</strong></p>".format(dti_percent), unsafe_allow_html=True)
+    # Show DTI with visual gauge instead of raw number
+    st.markdown("<h4>Debt-to-Income Assessment</h4>", unsafe_allow_html=True)
     
-    # Add helpful context about DTI
-    dti_status = ""
+    # Cap the displayed percentage at 100% for the visual
+    display_percent = min(dti_percent, 100)
+    
+    # Determine the status and color
     if dti_percent <= 36:
-        dti_status = "📗 Good (below 36%)"
+        dti_status = "Good"
+        dti_color = "#4CAF50"  # Green
+        emoji = "✅"
     elif dti_percent <= 43:
-        dti_status = "📙 Acceptable (36-43%)"
+        dti_status = "Moderate"
+        dti_color = "#FF9800"  # Orange
+        emoji = "⚠️"
     else:
-        dti_status = "📕 High (above 43%)"
-        
-    st.markdown(f"<p>DTI Status: {dti_status}</p>", unsafe_allow_html=True)
-    st.markdown("<p style='font-size:0.8rem;color:#666;'>A lower Debt-to-Income ratio improves your chances of loan approval. Most lenders prefer ratios below 43%.</p>", unsafe_allow_html=True)
+        dti_status = "High"
+        dti_color = "#F44336"  # Red
+        emoji = "❗"
+    
+    # Create a visual progress bar
+    st.markdown(f"""
+    <div style="margin-bottom: 10px;">
+        <div style="background-color: #e0e0e0; border-radius: 10px; height: 20px; width: 100%;">
+            <div style="background-color: {dti_color}; width: {display_percent}%; height: 20px; border-radius: 10px;"></div>
+        </div>
+        <div style="display: flex; justify-content: space-between; font-size: 0.8rem;">
+            <span>0%</span>
+            <span>50%</span>
+            <span>100%+</span>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # Show a simple, friendly interpretation
+    if dti_percent > 100:
+        st.markdown(f"""
+        <div style="padding: 10px; background-color: #FFEBEE; border-radius: 5px; margin-bottom: 15px;">
+            {emoji} <strong>Your monthly loan payment would be {dti_percent/100:.1f}× your monthly income</strong>
+            <p style="margin: 5px 0 0 0; font-size: 0.9rem;">Most lenders look for a ratio below 43% (0.43× your income)</p>
+        </div>
+        """, unsafe_allow_html=True)
+    else:
+        st.markdown(f"""
+        <div style="padding: 10px; background-color: #F5F5F5; border-radius: 5px; margin-bottom: 15px;">
+            {emoji} <strong>Your monthly loan payment would be {dti_percent:.1f}% of your monthly income</strong>
+            <p style="margin: 5px 0 0 0; font-size: 0.9rem;">Most lenders look for this to be below 43%</p>
+        </div>
+        """, unsafe_allow_html=True)
     
     st.markdown('</div>', unsafe_allow_html=True)