2110511008/python-sql-2110511008
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout fix

Browse Source
This commit is contained in:
Jesselyn Mu
2025-01-30 21:46:38 +07:00
parent 9364ae07aa
commit 1ea0ebced9
1 changed files with 33 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
pages/prediction.py
View File

@ -462,7 +462,38 @@ def show_prediction():
col1, col2 = st.columns([1.5, 2]) # **Kolom pertama untuk grafik, kolom kedua untuk penjelasan** col1, col2 = st.columns([1.5, 2]) # **Kolom pertama untuk grafik, kolom kedua untuk penjelasan**
with col1: 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: with col2:
top_factors = sorted(shap_dict.items(), key=lambda x: abs(x[1]), reverse=True)[:5] top_factors = sorted(shap_dict.items(), key=lambda x: abs(x[1]), reverse=True)[:5]
@ -476,7 +507,7 @@ def show_prediction():
st.markdown( st.markdown(
f""" f"""
<div style="text-align: justify; font-family: 'Poppins', sans-serif;"> <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> <p>
Grafik ini menunjukkan bagaimana hasil prediksi dihitung berdasarkan beberapa faktor utama. Grafik ini menunjukkan bagaimana hasil prediksi dihitung berdasarkan beberapa faktor utama.
Faktor-faktor yang paling memengaruhi hasil prediksi adalah {summary}. Faktor-faktor yang paling memengaruhi hasil prediksi adalah {summary}.