From 1ea0ebced947425a8921e87b60dad6f8a068ebfe Mon Sep 17 00:00:00 2001
From: Jesselyn Mu <90194068+jesselynmu@users.noreply.github.com>
Date: Thu, 30 Jan 2025 21:46:38 +0700
Subject: [PATCH] layout fix

---
 pages/prediction.py | 35 +++++++++++++++++++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/pages/prediction.py b/pages/prediction.py
index c553001..334456a 100644
--- a/pages/prediction.py
+++ b/pages/prediction.py
@@ -462,7 +462,38 @@ def show_prediction():
                 col1, col2 = st.columns([1.5, 2])  # **Kolom pertama untuk grafik, kolom kedua untuk penjelasan**
                 
                 with col1:
-                    st.image(buf, caption="SHAP Waterfall Plot", use_container_width=True)
+                    # st.image(buf, caption="SHAP Waterfall Plot", use_container_width=True)    
+                    st.markdown(
+                    f"""
+                    <style>
+                        .shap-container {{
+                            display: flex;
+                            justify-content: center;
+                        }}
+                        .shap-image {{
+                            border-radius: 10px; /* Biar sudutnya membulat */
+                            box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); /* Shadow */
+                            border: 2px solid #ddd; /* Stroke */
+                            padding: 5px; /* Ruang di dalam border */
+                            background: white; /* Biar keliatan efeknya */
+                            max-width: 100%; /* Biar responsif */
+                        }}
+                        .shap-caption {{
+                            text-align: center;
+                            font-size: 14px;
+                            font-family: 'Poppins', sans-serif;
+                            color: #555;
+                            margin-top: 5px;
+                        }}
+                    </style>
+                    <div class="shap-container">
+                        <img class="shap-image" src="data:image/png;base64,{buf.getvalue().decode('utf-8')}" alt="SHAP Waterfall Plot">
+                    </div>
+                    <p class="shap-caption">SHAP Waterfall Plot</p>
+                    """,
+                    unsafe_allow_html=True
+                )
+
 
                 with col2:
                     top_factors = sorted(shap_dict.items(), key=lambda x: abs(x[1]), reverse=True)[:5]
@@ -476,7 +507,7 @@ def show_prediction():
                     st.markdown(
                         f"""
                         <div style="text-align: justify; font-family: 'Poppins', sans-serif;">
-                            <h4 style="color:#264CBE; font-size:18px; font-weight:600;">Faktor Utama yang Mempengaruhi Prediksi:</h4>
+                            <h4 style="color:#264CBE; font-size:18px; font-weight:600; font-family: 'Poppins', sans-serif;">Faktor Utama yang Mempengaruhi Prediksi:</h4>
                             <p>
                                 Grafik ini menunjukkan bagaimana hasil prediksi dihitung berdasarkan beberapa faktor utama. 
                                 Faktor-faktor yang paling memengaruhi hasil prediksi adalah {summary}.